From 9d3f404e56367b23ed343eaa090826c7d3cb9ac9 Mon Sep 17 00:00:00 2001 From: Kevin Zheng Date: Mon, 23 Oct 2023 19:04:26 +1100 Subject: [PATCH] Fix issues resulting in crashes --- client/src/components/generic/Property.tsx | 36 ++++++++++++---- .../components/inspector/TraceRenderer.tsx | 6 +-- .../layer-editor/layers/traceLayerSource.tsx | 7 +--- .../components/renderer/parser/parseTrace.ts | 16 +++++--- client/src/index.css | 7 ++++ client/src/manifest.json | 12 +++--- client/src/workers/usingWorker.ts | 5 ++- .../src/d2-renderer/D2Renderer.ts | 6 ++- .../src/d2-renderer/D2RendererOptions.ts | 4 +- .../converted/aurora-polyanya.trace.json | 16 +++++--- .../v1.0.4/converted/road-astar.trace.json | 41 ++++++++++++++----- 11 files changed, 103 insertions(+), 53 deletions(-) diff --git a/client/src/components/generic/Property.tsx b/client/src/components/generic/Property.tsx index 9d0b6b54..ecf27094 100644 --- a/client/src/components/generic/Property.tsx +++ b/client/src/components/generic/Property.tsx @@ -1,29 +1,47 @@ -import { ReactNode } from "react"; -import { Flex } from "./Flex"; -import { Space } from "./Space"; import { Typography as Type, TypographyProps as TypeProps, } from "@mui/material"; - - +import { truncate } from "lodash"; +import { ReactNode } from "react"; +import { Flex } from "./Flex"; +import { Space } from "./Space"; +import YAML from "yaml"; type Props = { label?: ReactNode; - value?: ReactNode; + value?: any; type?: TypeProps<"div">; }; +function stringify(obj: any) { + switch (typeof obj) { + case "number": + case "string": + return `${obj}`; + case "undefined": + return "null"; + default: + return ( + + {truncate(YAML.stringify(obj).replace("\n", ", "), { + length: 30, + })} + + ); + } +} + export function Property({ label, value, type }: Props) { return ( - + {label} - {value ?? "none"} + {stringify(value) ?? "none"} ); -} \ No newline at end of file +} diff --git a/client/src/components/inspector/TraceRenderer.tsx b/client/src/components/inspector/TraceRenderer.tsx index 5d85ce02..58708a61 100644 --- a/client/src/components/inspector/TraceRenderer.tsx +++ b/client/src/components/inspector/TraceRenderer.tsx @@ -24,10 +24,10 @@ import { useRenderers } from "slices/renderers"; const rendererOptions = { tileSubdivision: 2, - workerCount: 2, + workerCount: 3, tileResolution: { - width: 1024, - height: 1024, + width: 256, + height: 256, }, }; diff --git a/client/src/components/layer-editor/layers/traceLayerSource.tsx b/client/src/components/layer-editor/layers/traceLayerSource.tsx index 44dcc6d9..79345fd3 100644 --- a/client/src/components/layer-editor/layers/traceLayerSource.tsx +++ b/client/src/components/layer-editor/layers/traceLayerSource.tsx @@ -204,12 +204,7 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = { items: { properties: { index: -1, - primary: ( - - ), + primary: , }, [`${event}`]: { primary: `Go to Step ${step}`, diff --git a/client/src/components/renderer/parser/parseTrace.ts b/client/src/components/renderer/parser/parseTrace.ts index 2e8ac0a2..f6ca7c47 100644 --- a/client/src/components/renderer/parser/parseTrace.ts +++ b/client/src/components/renderer/parser/parseTrace.ts @@ -29,12 +29,16 @@ export function useTrace(params: ParseTraceWorkerParameters) { usingLoadingState(async () => { if (params?.trace) { push("Processing trace..."); - const output = await parseTraceAsync(params); - push( - "Trace loaded", - pluralize("step", output?.stepsPersistent?.length ?? 0, true) - ); - return output; + try { + const output = await parseTraceAsync(params); + push( + "Trace loaded", + pluralize("step", output?.stepsPersistent?.length ?? 0, true) + ); + return output; + } catch (e) { + push("Error parsing", `${e}`); + } } }), [params] diff --git a/client/src/index.css b/client/src/index.css index 60f20261..01a62a33 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Monoa&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + html, body, #root { @@ -22,6 +24,11 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } +code { + font-family: "Roboto Mono", "Consolas", "Courier New", Courier, monospace; + transform: translateY(-10px); +} + @media (pointer: fine) { * { scrollbar-color: #888888 #f0f0f0; diff --git a/client/src/manifest.json b/client/src/manifest.json index f1af8066..11b0a661 100644 --- a/client/src/manifest.json +++ b/client/src/manifest.json @@ -1,9 +1,9 @@ { "short_name": "Visualiser", "name": "Visualiser", - "version":"1.0.4", + "version": "1.0.4", "description": "Visualise pathfinding search.", - "version_name":"1.0.4; mid October 2023", + "version_name": "1.0.4 patch 1; mid October 2023", "icons": [ { "src": "./favicon.png", @@ -27,12 +27,12 @@ "scope": ".", "background_color": "#546e7a", "display_override": ["window-controls-overlay"], - "screenshots": - [{ + "screenshots": [ + { "src": "./screenshots/0.png", "type": "image/jpeg", "sizes": "2560x1600", "form_factor": "wide" - }] - + } + ] } diff --git a/client/src/workers/usingWorker.ts b/client/src/workers/usingWorker.ts index 31a1b132..808bd7e1 100644 --- a/client/src/workers/usingWorker.ts +++ b/client/src/workers/usingWorker.ts @@ -16,10 +16,11 @@ export const usingWorkerTask = (inp: T) => usingWorker(w)((worker) => { worker.postMessage(inp); - return new Promise((res) => { + return new Promise((res, rej) => { worker.onmessage = (out) => { res(out.data as R); }; + worker.onerror = rej; }); }); @@ -29,4 +30,4 @@ export const usingMemoizedWorkerTask = ( async: true, length: 1, } -) => memoize(usingWorkerTask(w), o); \ No newline at end of file +) => memoize(usingWorkerTask(w), o); diff --git a/internal-renderers/src/d2-renderer/D2Renderer.ts b/internal-renderers/src/d2-renderer/D2Renderer.ts index d61f4e66..4db55b26 100644 --- a/internal-renderers/src/d2-renderer/D2Renderer.ts +++ b/internal-renderers/src/d2-renderer/D2Renderer.ts @@ -118,7 +118,6 @@ class D2Renderer setup(options: Partial) { const o = { ...defaultD2RendererOptions, ...options }; - // create a pixi application this.#setupPixi(o); this.setOptions(o); this.#handleWorkerChange(o); @@ -160,6 +159,8 @@ class D2Renderer backgroundAlpha: 0, width: options.screenSize.width, height: options.screenSize.height, + autoDensity: true, + resolution: 2, }); this.#viewport = new Viewport({ @@ -227,7 +228,7 @@ class D2Renderer ); #startDynamicResolution() { - const { tileResolution, dynamicResolution } = this.#options; + const { dynamicResolution } = this.#options; const { dtMax, dtMin, increment, intervalMs, maxScale, minScale } = dynamicResolution; const targetFrames = floor(PIXI.Ticker.targetFPMS * intervalMs); @@ -235,6 +236,7 @@ class D2Renderer let cdt = 0; let scale = 1; this.#app!.ticker.add((dt) => { + const { tileResolution } = this.#options; if (!(frames % targetFrames)) { const adt = cdt / targetFrames; scale = clamp( diff --git a/internal-renderers/src/d2-renderer/D2RendererOptions.ts b/internal-renderers/src/d2-renderer/D2RendererOptions.ts index 0a6202d6..b62d6e0b 100644 --- a/internal-renderers/src/d2-renderer/D2RendererOptions.ts +++ b/internal-renderers/src/d2-renderer/D2RendererOptions.ts @@ -36,8 +36,8 @@ export const defaultD2RendererOptions: D2RendererOptions = { workerCount: 4, workerIndex: 0, tileResolution: { - width: 128, - height: 128, + width: 64, + height: 64, }, tileSubdivision: 0, refreshInterval: 1000 / 60, diff --git a/resources/traces/v1.0.4/converted/aurora-polyanya.trace.json b/resources/traces/v1.0.4/converted/aurora-polyanya.trace.json index f1066d0f..12898b6d 100644 --- a/resources/traces/v1.0.4/converted/aurora-polyanya.trace.json +++ b/resources/traces/v1.0.4/converted/aurora-polyanya.trace.json @@ -16,9 +16,10 @@ "line1": [ { "$": "path", + "visible": "{{ctx.currentStep == ctx.step}}", "points": [ - { "x": "{{ctx.x2}}", "y": "{{ctx.y2}}" }, - { "x": "{{ctx.x3}}", "y": "{{ctx.y3}}" }, + { "x": "{{ctx.rayShootX ?? ctx.x}}", "y": "{{ctx.y2}}" }, + { "x": "{{ctx.x3 ?? ctx.y}}", "y": "{{ctx.y3}}" }, { "x": "{{ctx.x1}}", "y": "{{ctx.y1}}" }, { "x": "{{ctx.x2}}", "y": "{{ctx.y2}}" } ], @@ -38,15 +39,18 @@ "fill": "{{ctx.color[ctx.type]}}" } ], - "mesh-event": [ { "$": "node" }, { "$": "line1" }, { "$": "triangle" } ] + "mesh-event": [{ "$": "node" }, { "$": "line1" }, { "$": "triangle" }] }, "views": { - "main": { "renderer": "2d-pixi", "components": [ { "$": "mesh-event" } ] } + "main": { "renderer": "2d-pixi", "components": [{ "$": "mesh-event" }] } }, "path": { "pivot": { "x": "{{ctx.x1}}", "y": "{{ctx.y1}}" }, "scale": 0.5 } }, "path": { - "pivot": { "x": "{{'x' in ctx ? ctx.x : 0}}", "y": "{{'y' in ctx ? ctx.y : 0}}" }, + "pivot": { + "x": "{{'x' in ctx ? ctx.x : 0}}", + "y": "{{'y' in ctx ? ctx.y : 0}}" + }, "scale": 1 }, "events": [ @@ -1741,4 +1745,4 @@ "y3": 307 } ] -} \ No newline at end of file +} diff --git a/resources/traces/v1.0.4/converted/road-astar.trace.json b/resources/traces/v1.0.4/converted/road-astar.trace.json index d4d6ec03..b0da4ba2 100644 --- a/resources/traces/v1.0.4/converted/road-astar.trace.json +++ b/resources/traces/v1.0.4/converted/road-astar.trace.json @@ -12,28 +12,47 @@ } ], "line": [ + { + "$": "for", + "$let": "i", // Default i + "$from": 0, // Default 0 + "$to": 4, // Required + "$step": 1, // Default 1 + "$component": "circle" + }, + { + "$": "circle", + "$for": { + "$let": "i", // Default i + "$from": 0, // Default 0 + "$to": 4, // Required + "$step": 1 // Default 1 + } + }, + { + "$": "if", + "$condition": "{{true}}", + "$component": "circle" + }, { "$": "path", - "points": [ - { - "x": "{{ctx.parent ? ctx.parent.x : ctx.x}}", - "y": "{{ctx.parent ? ctx.parent.y : ctx.y}}" - }, - { "x": "{{ctx.x}}", "y": "{{ctx.y}}" } - ], + "points": "{{ctx.agent1}}", "fill": "{{ctx.color[ctx.type]}}", "lineWidth": 90 } ], - "road-event": [ { "$": "node" }, { "$": "line" } ] + "road-event": [{ "$": "node" }, { "$": "line" }] }, "views": { - "main": { "renderer": "2d-pixi", "components": [ { "$": "road-event" } ] } + "main": { "renderer": "2d-pixi", "components": [{ "$": "road-event" }] } }, "path": { "pivot": { "x": "{{ctx.x}}", "y": "{{ctx.y}}" }, "scale": 120 } }, "path": { - "pivot": { "x": "{{'x' in ctx ? ctx.x : 0}}", "y": "{{'y' in ctx ? ctx.y : 0}}" }, + "pivot": { + "x": "{{'x' in ctx ? ctx.x : 0}}", + "y": "{{'y' in ctx ? ctx.y : 0}}" + }, "scale": 1 }, "events": [ @@ -22027,4 +22046,4 @@ "y": 41118596 } ] -} \ No newline at end of file +}