diff --git a/client/package-lock.json b/client/package-lock.json index 207781e9..7a271061 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -15,11 +15,11 @@ "@mui/icons-material": "^5.14.11", "@mui/lab": "^5.0.0-alpha.146", "@mui/material": "^5.14.11", - "@uidotdev/usehooks": "^2.3.1", "css-element-queries": "^1.2.3", "downloadjs": "^1.4.7", "file-select-dialog": "^1.5.4", "internal-renderers": "file:../internal-renderers", + "js-yaml": "^4.1.0", "json-beautify": "^1.1.1", "json-rpc-2.0": "^1.6.0", "lodash": "^4.17.21", @@ -58,6 +58,7 @@ "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.1", "@types/downloadjs": "^1.4.4", + "@types/js-yaml": "^4.0.9", "@types/lodash": "^4.14.199", "@types/md5": "^2.3.3", "@types/memoizee": "^0.4.9", @@ -2273,6 +2274,12 @@ "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz", "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==" }, + "node_modules/@types/js-yaml": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz", + "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==", + "dev": true + }, "node_modules/@types/json-schema": { "version": "7.0.13", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz", @@ -2708,18 +2715,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@uidotdev/usehooks": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.3.1.tgz", - "integrity": "sha512-1GL8CatTsTGZdwPNrZ44JhJI5QWip7oyDXEXFBEibJ+P+p+ZBi7mKrpG90ZIdQTSEcvkfiE2Y492Uo3ubPBZ3g==", - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "react": ">=18.0.0", - "react-dom": ">=18.0.0" - } - }, "node_modules/@vitejs/plugin-react": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz", @@ -2923,8 +2918,7 @@ "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, "node_modules/aria-query": { "version": "5.3.0", @@ -6173,7 +6167,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, "dependencies": { "argparse": "^2.0.1" }, diff --git a/client/package.json b/client/package.json index f5b66299..ff39a4e9 100644 --- a/client/package.json +++ b/client/package.json @@ -10,11 +10,11 @@ "@mui/icons-material": "^5.14.11", "@mui/lab": "^5.0.0-alpha.146", "@mui/material": "^5.14.11", - "@uidotdev/usehooks": "^2.3.1", "css-element-queries": "^1.2.3", "downloadjs": "^1.4.7", "file-select-dialog": "^1.5.4", "internal-renderers": "file:../internal-renderers", + "js-yaml": "^4.1.0", "json-beautify": "^1.1.1", "json-rpc-2.0": "^1.6.0", "lodash": "^4.17.21", @@ -71,6 +71,7 @@ "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.1", "@types/downloadjs": "^1.4.4", + "@types/js-yaml": "^4.0.9", "@types/lodash": "^4.14.199", "@types/md5": "^2.3.3", "@types/memoizee": "^0.4.9", diff --git a/client/src/components/debug-options-editor/saveJSON.tsx b/client/src/components/debug-options-editor/saveJSON.tsx deleted file mode 100644 index 8bb0ca95..00000000 --- a/client/src/components/debug-options-editor/saveJSON.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import download from "downloadjs"; -import stringify from "json-beautify"; -import { Trace } from "protocol/Trace"; - -export function saveJSON(filename: string, specimen?: Trace) { - download( - stringify(specimen, null as any, 2), - `${filename}.json`, - "application/json" - ); -} \ No newline at end of file diff --git a/client/src/components/generic/Property.tsx b/client/src/components/generic/Property.tsx index d7b3eb2d..f75a3d91 100644 --- a/client/src/components/generic/Property.tsx +++ b/client/src/components/generic/Property.tsx @@ -6,7 +6,7 @@ import { truncate } from "lodash"; import { ReactNode } from "react"; import { Flex } from "./Flex"; import { Space } from "./Space"; -import YAML from "yaml"; +import YAML from "js-yaml"; type Props = { label?: ReactNode; @@ -24,7 +24,7 @@ function stringify(obj: any) { default: return ( - {truncate(YAML.stringify(obj).replace("\n", ", "), { + {truncate(YAML.dump(obj).replace("\n", ", "), { length: 30, })} diff --git a/client/src/components/inspector/SelectionMenu.tsx b/client/src/components/inspector/SelectionMenu.tsx index a177b10e..43eff76d 100644 --- a/client/src/components/inspector/SelectionMenu.tsx +++ b/client/src/components/inspector/SelectionMenu.tsx @@ -8,10 +8,7 @@ import { MenuList, Typography, } from "@mui/material"; -import { - getLayerHandler, - SelectionInfoProvider, -} from "components/layer-editor/layers/LayerSource"; +import { getLayerHandler, SelectionInfoProvider } from "layers/Layer"; import { SelectEvent as RendererSelectEvent } from "components/renderer/Renderer"; import { chain, Dictionary, entries, merge } from "lodash"; import { useCache } from "pages/TreePage"; diff --git a/client/src/components/inspector/TraceRenderer.tsx b/client/src/components/inspector/TraceRenderer.tsx index 685cc894..926feacf 100644 --- a/client/src/components/inspector/TraceRenderer.tsx +++ b/client/src/components/inspector/TraceRenderer.tsx @@ -17,7 +17,7 @@ import { import { Renderer, RendererEvent } from "renderer"; import { Placeholder } from "./Placeholder"; import { SelectionMenu } from "./SelectionMenu"; -import { RenderLayer } from "components/layer-editor/layers/LayerSource"; +import { RenderLayer } from "layers/Layer"; import { RendererProps, SelectEvent } from "components/renderer/Renderer"; import { useLoading } from "slices/loading"; import { useRenderers } from "slices/renderers"; diff --git a/client/src/components/layer-editor/LayerEditor.tsx b/client/src/components/layer-editor/LayerEditor.tsx index a1aa2d06..b6db2c7a 100644 --- a/client/src/components/layer-editor/LayerEditor.tsx +++ b/client/src/components/layer-editor/LayerEditor.tsx @@ -25,7 +25,7 @@ import { useState, } from "react"; import { Layer } from "slices/layers"; -import { inferLayerName, layerHandlers } from "./layers/LayerSource"; +import { inferLayerName, layerHandlers } from "../../layers/Layer"; type LayerEditorProps = { value: Layer; diff --git a/client/src/components/layer-editor/layers/Option.tsx b/client/src/components/layer-editor/Option.tsx similarity index 100% rename from client/src/components/layer-editor/layers/Option.tsx rename to client/src/components/layer-editor/Option.tsx diff --git a/client/src/components/layer-editor/layers/TracePreview.tsx b/client/src/components/layer-editor/TracePreview.tsx similarity index 100% rename from client/src/components/layer-editor/layers/TracePreview.tsx rename to client/src/components/layer-editor/TracePreview.tsx diff --git a/client/src/components/render/renderer/generic/NodeList.tsx b/client/src/components/renderer/NodeList.tsx similarity index 100% rename from client/src/components/render/renderer/generic/NodeList.tsx rename to client/src/components/renderer/NodeList.tsx diff --git a/client/src/components/renderer/parser/parse.ts b/client/src/components/renderer/parser/parse.ts index 24b30b41..3a73fce0 100644 --- a/client/src/components/renderer/parser/parse.ts +++ b/client/src/components/renderer/parser/parse.ts @@ -1,4 +1,4 @@ -import { Dictionary as Dict, flatMap, range } from "lodash"; +import { Dictionary as Dict, range } from "lodash"; import { ComponentDefinition, ComponentDefinitionMap, @@ -37,7 +37,7 @@ export function parse( return definition.flatMap((c) => { const { $ } = c; const c2 = parseFor(c); - return flatMap(c2, (component) => { + return c2.flatMap((component) => { const scoped = applyScope( normalize(context), normalize(component) as any diff --git a/client/src/components/renderer/parser/parseTrace.ts b/client/src/components/renderer/parser/parseTrace.ts index 4f030a4d..1e0e1913 100644 --- a/client/src/components/renderer/parser/parseTrace.ts +++ b/client/src/components/renderer/parser/parseTrace.ts @@ -8,7 +8,7 @@ import { ParseTraceWorkerReturnType, } from "./parseTrace.worker"; import parseGridWorkerUrl from "./parseTrace.worker.ts?worker&url"; -import { stringify } from "yaml"; +import { dump } from "js-yaml"; export class ParseTraceWorker extends Worker { constructor() { @@ -37,7 +37,7 @@ export function useTraceParser(params: ParseTraceWorkerParameters) { ); return output; } catch (e) { - push("Error parsing", `${stringify(e)}`); + push("Error parsing", `${dump(e)}`); } } }), diff --git a/client/src/components/renderer/parser/parseTrace.worker.ts b/client/src/components/renderer/parser/parseTrace.worker.ts index c7e789ef..250c89f1 100644 --- a/client/src/components/renderer/parser/parseTrace.worker.ts +++ b/client/src/components/renderer/parser/parseTrace.worker.ts @@ -1,4 +1,4 @@ -import { chain, findLast, map, mapValues, negate } from "lodash"; +import { chain, findLast, mapValues, negate } from "lodash"; import { CompiledComponent, EventContext, @@ -8,8 +8,8 @@ import { } from "protocol"; import { ComponentEntry } from "renderer"; import { mapProperties } from "./mapProperties"; -import { parse as parseComponents } from "./parse"; import { normalizeConstant } from "./normalize"; +import { parse as parseComponents } from "./parse"; const isNullish = (x: KeyRef): x is Exclude => x === undefined || x === null; @@ -35,7 +35,7 @@ function parse({ event: TraceEvent, ctx?: EventContext ): CompiledComponent>[] => - map(parsed, (p) => + parsed.map((p) => mapProperties< ParsedComponent, CompiledComponent> @@ -83,8 +83,8 @@ function parse({ .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(i)))) .value(); return { - stepsPersistent: map(steps, "persistent"), - stepsTransient: map(steps, "transient"), + stepsPersistent: steps.map((c) => c.persistent), + stepsTransient: steps.map((c) => c.transient), }; } diff --git a/client/src/hooks/useTraceContent.tsx b/client/src/hooks/useTraceContent.tsx deleted file mode 100644 index 1405454f..00000000 --- a/client/src/hooks/useTraceContent.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useTheme } from "@mui/material"; -import { map } from "lodash"; -import { - CompiledComponent, - EventContext, - ParsedComponent, - Trace, - TraceEvent, -} from "protocol"; -import { useMemo } from "react"; -import { colorsHex } from "components/renderer/colors"; -import { parse } from "components/renderer/parser"; -import { mapProperties } from "components/renderer/parser/mapProperties"; - -export const context: EventContext = { - color: colorsHex, -}; - -export function useTraceContent(trace?: Trace, view: "main" = "main") { - const theme = useTheme(); - return useMemo(() => { - const parsed = parse( - trace?.render?.views?.[view]?.components ?? [], - trace?.render?.components ?? {} - ); - return { - events: trace?.events ?? [], - apply: (event: TraceEvent, ctx?: EventContext) => - map(parsed, (p) => - mapProperties< - ParsedComponent, - CompiledComponent> - >(p, (c) => - c({ - fill: theme.palette.primary.main, - alpha: 1, - ...context, - ...ctx, - ...event, - }) - ) - ), - }; - }, [trace, view, theme]); -} diff --git a/client/src/components/layer-editor/layers/LayerSource.tsx b/client/src/layers/Layer.tsx similarity index 79% rename from client/src/components/layer-editor/layers/LayerSource.tsx rename to client/src/layers/Layer.tsx index 332a8dbb..6795c4dd 100644 --- a/client/src/components/layer-editor/layers/LayerSource.tsx +++ b/client/src/layers/Layer.tsx @@ -5,9 +5,9 @@ import { Dictionary } from "lodash"; import { TraceEvent } from "protocol"; import { createElement, FC, ReactNode } from "react"; import { Layer } from "slices/layers"; -import { mapLayerSource } from "./mapLayerSource"; -import { queryLayerSource } from "./queryLayerSource"; -import { traceLayerSource } from "./traceLayerSource"; +import { controller as mapController } from "./map"; +import { controller as queryController } from "./query"; +import { controller as traceController } from "./trace"; export type SelectionInfoProvider = FC<{ layer?: string; @@ -15,7 +15,7 @@ export type SelectionInfoProvider = FC<{ children?: (menu: SelectionMenuContent) => ReactNode; }>; -export type LayerSource = { +export type LayerController = { key: K; editor: FC>>; renderer: FC<{ layer?: Layer }>; @@ -52,8 +52,8 @@ export function getLayerHandler(layer?: Layer) { return layerHandlers[layer?.source?.type ?? ""]; } -export const layerHandlers: Dictionary> = { - map: mapLayerSource, - trace: traceLayerSource, - query: queryLayerSource, +export const layerHandlers: Dictionary> = { + map: mapController, + trace: traceController, + query: queryController, }; diff --git a/client/src/layers/index.tsx b/client/src/layers/index.tsx new file mode 100644 index 00000000..a6fc92ba --- /dev/null +++ b/client/src/layers/index.tsx @@ -0,0 +1 @@ +export * from "./Layer"; diff --git a/client/src/components/layer-editor/layers/mapLayerSource.tsx b/client/src/layers/map/index.tsx similarity index 88% rename from client/src/components/layer-editor/layers/mapLayerSource.tsx rename to client/src/layers/map/index.tsx index 779a1581..d7c9608f 100644 --- a/client/src/components/layer-editor/layers/mapLayerSource.tsx +++ b/client/src/layers/map/index.tsx @@ -1,17 +1,17 @@ import { MapPicker } from "components/app-bar/Input"; -import { NodeList } from "components/render/renderer/generic/NodeList"; +import { Option } from "components/layer-editor/Option"; import { getParser } from "components/renderer"; +import { NodeList } from "components/renderer/NodeList"; import { ParsedMap } from "components/renderer/map-parser/Parser"; import { useEffectWhen } from "hooks/useEffectWhen"; import { useMapContent } from "hooks/useMapContent"; import { useParsedMap } from "hooks/useParsedMap"; +import { LayerController, inferLayerName } from "layers"; import { isUndefined, round, set, startCase } from "lodash"; import { withProduce } from "produce"; import { useMemo } from "react"; import { Map } from "slices/UIState"; import { Layer, useLayer } from "slices/layers"; -import { LayerSource, inferLayerName } from "./LayerSource"; -import { Option } from "./Option"; export type MapLayerData = { map?: Map; @@ -20,7 +20,7 @@ export type MapLayerData = { export type MapLayer = Layer; -export const mapLayerSource: LayerSource<"map", MapLayerData> = { +export const controller = { key: "map", inferName: (layer) => layer?.source?.map @@ -75,8 +75,8 @@ export const mapLayerSource: LayerSource<"map", MapLayerData> = { } return {}; }, [parsedMap, event]); - const menu = useMemo(() => { - return { + const menu = useMemo( + () => ({ ...(layer && point && !isUndefined(node) && { @@ -90,8 +90,9 @@ export const mapLayerSource: LayerSource<"map", MapLayerData> = { }, }, }), - }; - }, [point, node, layer, layers, setLayer]); + }), + [point, node, layer, layers, setLayer] + ); return <>{children?.(menu)}; }, -}; +} satisfies LayerController<"map", MapLayerData>; diff --git a/client/src/components/layer-editor/layers/queryLayerSource.tsx b/client/src/layers/query/index.tsx similarity index 91% rename from client/src/components/layer-editor/layers/queryLayerSource.tsx rename to client/src/layers/query/index.tsx index 93c622bc..70460bf6 100644 --- a/client/src/components/layer-editor/layers/queryLayerSource.tsx +++ b/client/src/layers/query/index.tsx @@ -15,14 +15,14 @@ import { useMemo } from "react"; import { Connection, useConnections } from "slices/connections"; import { useFeatures } from "slices/features"; import { Layer, useLayer, useLayers } from "slices/layers"; -import { useEffectWhenAsync } from "../../../hooks/useEffectWhen"; -import { LayerSource, inferLayerName } from "./LayerSource"; -import { Heading, Option } from "./Option"; -import { TracePreview } from "./TracePreview"; -import { MapLayer, MapLayerData } from "./mapLayerSource"; -import { TraceLayerData, traceLayerSource } from "./traceLayerSource"; +import { useEffectWhenAsync } from "hooks/useEffectWhen"; +import { LayerController, inferLayerName } from "layers"; +import { Heading, Option } from "components/layer-editor/Option"; +import { TracePreview } from "components/layer-editor/TracePreview"; +import { MapLayer, MapLayerData } from "layers/map"; +import { TraceLayerData, controller as traceController } from "layers/trace"; -const TraceLayerSelectionInfoProvider = traceLayerSource.getSelectionInfo!; +const TraceLayerSelectionInfoProvider = traceController.getSelectionInfo; async function findConnection( connections: Connection[], @@ -30,9 +30,9 @@ async function findConnection( format: string ) { for (const connection of connections) { - const algs = await connection.call("features/algorithms"); + const algorithms = await connection.call("features/algorithms"); const formats = await connection.call("features/formats"); - if (find(algs, { id: algorithm }) && find(formats, { id: format })) { + if (find(algorithms, { id: algorithm }) && find(formats, { id: format })) { return connection; } } @@ -45,7 +45,8 @@ export type QueryLayerData = { algorithm?: string; } & TraceLayerData; -export const queryLayerSource: LayerSource<"query", QueryLayerData> = { +export const controller = { + ...traceController, key: "query", editor: withProduce(({ value, produce }) => { const { algorithm } = value?.source ?? {}; @@ -179,11 +180,9 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = { ], [mapLayer, connections, algorithm, start, end] ); - return <>{traceLayerSource.service}; + return <>{traceController.service}; }), inferName: (l) => l.source?.trace?.name ?? "Untitled Query", - renderer: traceLayerSource.renderer, - steps: traceLayerSource.steps, getSelectionInfo: ({ children, event, layer: key }) => { const { layer, setLayer, layers } = useLayer(key); const mapLayerData = useMemo(() => { @@ -266,4 +265,4 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = { ); }, -}; +} satisfies LayerController<"query", QueryLayerData>; diff --git a/client/src/components/layer-editor/layers/traceLayerSource.tsx b/client/src/layers/trace/index.tsx similarity index 96% rename from client/src/components/layer-editor/layers/traceLayerSource.tsx rename to client/src/layers/trace/index.tsx index 6b2e96f4..19154837 100644 --- a/client/src/components/layer-editor/layers/traceLayerSource.tsx +++ b/client/src/layers/trace/index.tsx @@ -3,10 +3,7 @@ import { Box, useTheme } from "@mui/material"; import { FeaturePicker } from "components/app-bar/FeaturePicker"; import { TracePicker } from "components/app-bar/Input"; import { PropertyList } from "components/inspector/PropertyList"; -import { - LazyNodeList, - NodeList, -} from "components/render/renderer/generic/NodeList"; +import { LazyNodeList, NodeList } from "components/renderer/NodeList"; import { colorsHex, getColorHex } from "components/renderer/colors"; import { parseString } from "components/renderer/parser/parseString"; import { useTraceParser } from "components/renderer/parser/parseTrace"; @@ -33,9 +30,9 @@ import { useEffect, useMemo } from "react"; import { useThrottle } from "react-use"; import { UploadedTrace } from "slices/UIState"; import { Layer, useLayer } from "slices/layers"; -import { LayerSource, inferLayerName } from "./LayerSource"; -import { Heading, Option } from "./Option"; -import { TracePreview } from "./TracePreview"; +import { LayerController, inferLayerName } from "layers"; +import { Heading, Option } from "components/layer-editor/Option"; +import { TracePreview } from "components/layer-editor/TracePreview"; import { PlaybackLayerData, PlaybackService, @@ -105,7 +102,7 @@ export type TraceLayerData = { export type TraceLayer = Layer; -export const traceLayerSource: LayerSource<"trace", TraceLayerData> = { +export const controller = { key: "trace", inferName: (layer) => layer.source?.trace?.name ?? "Untitled Trace", editor: withProduce(({ value, produce }) => { @@ -252,7 +249,8 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = { }, [layer, event]); return <>{children?.(menu)}; }, -}; +} satisfies LayerController<"trace", TraceLayerData>; + function use2DPath(layer?: TraceLayer, step: number = 0) { const { palette } = useTheme(); const { getPath } = useMemo( diff --git a/client/src/pages/StepsPage.tsx b/client/src/pages/StepsPage.tsx index 2ae21c12..0a032d86 100644 --- a/client/src/pages/StepsPage.tsx +++ b/client/src/pages/StepsPage.tsx @@ -20,10 +20,7 @@ import { import { EventInspector } from "components/inspector/EventInspector"; import { Placeholder } from "components/inspector/Placeholder"; import { useViewTreeContext } from "components/inspector/ViewTree"; -import { - inferLayerName, - layerHandlers, -} from "components/layer-editor/layers/LayerSource"; +import { inferLayerName, layerHandlers } from "layers/Layer"; import { usePlaybackState } from "hooks/usePlaybackState"; import { delay, map } from "lodash"; import { Page } from "pages/Page"; diff --git a/client/src/pages/TreePage.tsx b/client/src/pages/TreePage.tsx index ef6a30bb..08c60572 100644 --- a/client/src/pages/TreePage.tsx +++ b/client/src/pages/TreePage.tsx @@ -19,7 +19,7 @@ import { Flex } from "components/generic/Flex"; import { Label } from "components/generic/Label"; import { Placeholder } from "components/inspector/Placeholder"; import { useViewTreeContext } from "components/inspector/ViewTree"; -import { inferLayerName } from "components/layer-editor/layers/LayerSource"; +import { inferLayerName } from "layers/Layer"; import { getColorHex } from "components/renderer/colors"; import { delay, entries, find, findLast, map, set, startCase } from "lodash"; import PopupState, { bindMenu } from "material-ui-popup-state"; diff --git a/client/src/pages/ViewportPage.tsx b/client/src/pages/ViewportPage.tsx index 42048b5e..562c6b61 100644 --- a/client/src/pages/ViewportPage.tsx +++ b/client/src/pages/ViewportPage.tsx @@ -11,7 +11,7 @@ import { FeaturePickerMulti } from "components/app-bar/FeaturePickerMulti"; import { Flex } from "components/generic/Flex"; import { TraceRenderer } from "components/inspector/TraceRenderer"; import { useViewTreeContext } from "components/inspector/ViewTree"; -import { inferLayerName } from "components/layer-editor/layers/LayerSource"; +import { inferLayerName } from "layers/Layer"; import { Dictionary, every, filter, find, head, keyBy, map } from "lodash"; import { Page } from "pages/Page"; import { useMemo, useState } from "react"; diff --git a/client/src/services/LayerService.tsx b/client/src/services/LayerService.tsx index 808f9fce..df63b983 100644 --- a/client/src/services/LayerService.tsx +++ b/client/src/services/LayerService.tsx @@ -1,4 +1,4 @@ -import { getLayerHandler } from "components/layer-editor/layers/LayerSource"; +import { getLayerHandler } from "layers/Layer"; import { map } from "lodash"; import { createElement, useMemo } from "react"; import { useLayers } from "slices/layers"; diff --git a/client/src/workers/parseYaml.worker.ts b/client/src/workers/parseYaml.worker.ts index e3498eb9..087e335d 100644 --- a/client/src/workers/parseYaml.worker.ts +++ b/client/src/workers/parseYaml.worker.ts @@ -1,3 +1,3 @@ -import { parse } from "yaml"; +import { load } from "js-yaml"; -onmessage = (str: MessageEvent) => postMessage(parse(str.data)); +onmessage = (str: MessageEvent) => postMessage(load(str.data)); diff --git a/internal-renderers/src/d2-renderer/D2Renderer.ts b/internal-renderers/src/d2-renderer/D2Renderer.ts index 2feebb08..8474fd3f 100644 --- a/internal-renderers/src/d2-renderer/D2Renderer.ts +++ b/internal-renderers/src/d2-renderer/D2Renderer.ts @@ -2,6 +2,7 @@ import { ceil, clamp, debounce, + defer, find, floor, forEach, @@ -144,10 +145,11 @@ class D2Renderer map(this.#workers, (w) => w.call("add", [map(components, "component"), id]) ); - return () => { - for (const c of bodies) this.#system.remove(c); - map(this.#workers, (w) => w.call("remove", [id])); - }; + return () => + defer(() => { + for (const c of bodies) this.#system.remove(c); + map(this.#workers, (w) => w.call("remove", [id])); + }); } setOptions(o: D2RendererOptions) { diff --git a/internal-renderers/src/d2-renderer/D2RendererWorker.ts b/internal-renderers/src/d2-renderer/D2RendererWorker.ts index 8ae4ffe1..c9c0ab75 100644 --- a/internal-renderers/src/d2-renderer/D2RendererWorker.ts +++ b/internal-renderers/src/d2-renderer/D2RendererWorker.ts @@ -220,10 +220,10 @@ export class D2RendererWorker extends EventEmitter< const prevTile = this.#cache[tileKey]; if (!prevTile || nextHash !== prevTile.hash) { const g = new OffscreenCanvas(tile.width, tile.height); - const ctx = g.getContext("2d")!; + const ctx = g.getContext("2d", { alpha: false })!; ctx.imageSmoothingEnabled = false; - // ctx.fillStyle = this.#options.backgroundColor; - // ctx.fillRect(0, 0, tile.width, tile.height); + ctx.fillStyle = this.#options.backgroundColor; + ctx.fillRect(0, 0, tile.width, tile.height); const length = tile.width * 0.05; const thickness = 1;