From 4f03f2af5a80ffec3ce8f02e233601f360b32cee Mon Sep 17 00:00:00 2001 From: Max Richter Date: Sat, 2 Nov 2024 19:37:22 +0100 Subject: [PATCH] feat: migrate most of graph-manager to svelte-5 --- .../lib/graph-interface/BoxSelection.svelte | 21 ++- app/src/lib/graph-interface/Camera.svelte | 26 +-- app/src/lib/graph-interface/HelpView.svelte | 15 +- .../background/Background.svelte | 31 ++-- app/src/lib/graph-interface/edges/Edge.svelte | 26 +-- .../graph-interface/edges/FloatingEdge.svelte | 4 +- app/src/lib/graph-interface/graph-manager.ts | 14 +- .../lib/graph-interface/graph/Graph.svelte | 160 ++++++++---------- .../graph-interface/graph/GraphView.svelte | 7 +- .../lib/graph-interface/graph/Wrapper.svelte | 81 +++++---- app/src/lib/graph-interface/graph/colors.ts | 3 +- .../lib/graph-interface/graph/state.svelte.ts | 27 +++ app/src/lib/graph-interface/graph/stores.ts | 13 -- app/src/lib/graph-interface/node/Node.svelte | 36 ++-- .../graph-interface/node/NodeHeader.svelte | 2 +- .../lib/graph-interface/node/NodeInput.svelte | 34 ++-- .../graph-interface/node/NodeParameter.svelte | 31 ++-- app/src/lib/settings/Settings.svelte | 4 +- app/src/lib/settings/app-settings.ts | 12 +- app/src/routes/+page.svelte | 37 ++-- .../runtime/src/worker-runtime-executor.ts | 1 + 21 files changed, 321 insertions(+), 264 deletions(-) create mode 100644 app/src/lib/graph-interface/graph/state.svelte.ts delete mode 100644 app/src/lib/graph-interface/graph/stores.ts diff --git a/app/src/lib/graph-interface/BoxSelection.svelte b/app/src/lib/graph-interface/BoxSelection.svelte index 74790dd..196f87b 100644 --- a/app/src/lib/graph-interface/BoxSelection.svelte +++ b/app/src/lib/graph-interface/BoxSelection.svelte @@ -1,16 +1,23 @@ diff --git a/app/src/lib/graph-interface/Camera.svelte b/app/src/lib/graph-interface/Camera.svelte index 6a08fb8..e2e098f 100644 --- a/app/src/lib/graph-interface/Camera.svelte +++ b/app/src/lib/graph-interface/Camera.svelte @@ -1,18 +1,20 @@ diff --git a/app/src/lib/graph-interface/HelpView.svelte b/app/src/lib/graph-interface/HelpView.svelte index c032655..a5bfbc1 100644 --- a/app/src/lib/graph-interface/HelpView.svelte +++ b/app/src/lib/graph-interface/HelpView.svelte @@ -2,16 +2,17 @@ import type { NodeDefinition, NodeRegistry } from "@nodes/types"; import { onMount } from "svelte"; - let mx = 0; - let my = 0; + let mx = $state(0); + let my = $state(0); - let node: NodeDefinition | undefined = undefined; - let input: string | undefined = undefined; + let node: NodeDefinition | undefined = $state(undefined); + let input: string | undefined = $state(undefined); let wrapper: HTMLDivElement; + type Props = { registry: NodeRegistry }; + const { registry }: Props = $props(); - export let registry: NodeRegistry; - let width = 0; + let width = $state(0); function handleMouseOver(ev: MouseEvent) { let target = ev.target as HTMLElement | null; @@ -45,7 +46,7 @@ }); - +
- import { colors } from "../graph/stores"; + import Edge from "./Edge.svelte"; - export let from: { x: number; y: number }; - export let to: { x: number; y: number }; + type Props = { from: { x: number; y: number }; to: { x: number; y: number } }; + const { from, to }: Props = $props(); diff --git a/app/src/lib/graph-interface/graph-manager.ts b/app/src/lib/graph-interface/graph-manager.ts index 6a5c19e..3e8c5db 100644 --- a/app/src/lib/graph-interface/graph-manager.ts +++ b/app/src/lib/graph-interface/graph-manager.ts @@ -1,11 +1,10 @@ -import { writable, type Writable } from "svelte/store"; -import type { Graph, Node, Edge, Socket, NodeRegistry, } from "@nodes/types"; -import { HistoryManager } from "./history-manager.js" -import EventEmitter from "./helpers/EventEmitter.js"; -import throttle from "./helpers/throttle.js"; -import { createLogger } from "./helpers/index.js"; -import type { NodeInput } from "@nodes/types"; +import type { Edge, Graph, Node, NodeInput, NodeRegistry, Socket, } from "@nodes/types"; import { fastHashString } from "@nodes/utils"; +import { writable, type Writable } from "svelte/store"; +import EventEmitter from "./helpers/EventEmitter.js"; +import { createLogger } from "./helpers/index.js"; +import throttle from "./helpers/throttle.js"; +import { HistoryManager } from "./history-manager.js"; const logger = createLogger("graph-manager"); @@ -68,6 +67,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, " const edges = this._edges.map(edge => [edge[0].id, edge[1], edge[2].id, edge[3]]) as Graph["edges"]; const serialized = { id: this.graph.id, settings: this.settings, nodes, edges }; logger.groupEnd(); + console.log({ serialized }); return clone(serialized); } diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte index 8c9e927..b06cfbd 100644 --- a/app/src/lib/graph-interface/graph/Graph.svelte +++ b/app/src/lib/graph-interface/graph/Graph.svelte @@ -4,7 +4,6 @@ lerp, snapToGrid as snapPointToGrid, } from "../helpers/index.js"; - import { Canvas } from "@threlte/core"; import type { OrthographicCamera } from "three"; import Background from "../background/Background.svelte"; import type { GraphManager } from "../graph-manager.js"; @@ -14,20 +13,16 @@ import type { Node, NodeId, Node as NodeType, Socket } from "@nodes/types"; import { GraphSchema } from "@nodes/types"; import FloatingEdge from "../edges/FloatingEdge.svelte"; - import { - activeNodeId, - activeSocket, - hoveredSocket, - possibleSockets, - possibleSocketIds, - selectedNodes, - } from "./stores.js"; + import { getGraphState } from "./state.svelte"; import { createKeyMap } from "../../helpers/createKeyMap"; import BoxSelection from "../BoxSelection.svelte"; import AddMenu from "../AddMenu.svelte"; import HelpView from "../HelpView.svelte"; import FileSaver from "file-saver"; + import { Canvas } from "@threlte/core"; + + const state = getGraphState(); export let manager: GraphManager; @@ -184,7 +179,7 @@ } setContext("setDownSocket", (socket: Socket) => { - $activeSocket = socket; + state.activeSocket = socket; let { node, index, position } = socket; @@ -203,14 +198,14 @@ } mouseDown = position; - $activeSocket = { + state.activeSocket = { node, index, position, }; - $possibleSockets = manager - .getPossibleSockets($activeSocket) + state.possibleSockets = manager + .getPossibleSockets(state.activeSocket) .map(([node, index]) => { return { node, @@ -218,9 +213,6 @@ position: getSocketPosition(node, index), }; }); - $possibleSocketIds = new Set( - $possibleSockets.map((s) => `${s.node.id}-${s.index}`), - ); }); function getSnapLevel() { @@ -271,10 +263,10 @@ if (!mouseDown) return; // we are creating a new edge here - if ($activeSocket || $possibleSockets?.length) { + if (state.activeSocket || state.possibleSockets?.length) { let smallestDist = 1000; let _socket; - for (const socket of $possibleSockets) { + for (const socket of state.possibleSockets) { const dist = Math.sqrt( (socket.position[0] - mousePosition[0]) ** 2 + (socket.position[1] - mousePosition[1]) ** 2, @@ -287,9 +279,9 @@ if (_socket && smallestDist < 0.9) { mousePosition = _socket.position; - $hoveredSocket = _socket; + state.hoveredSocket = _socket; } else { - $hoveredSocket = null; + state.hoveredSocket = null; } return; } @@ -309,18 +301,17 @@ const y = node.position[1]; const height = getNodeHeight(node.type); if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) { - $selectedNodes?.add(node.id); + state.selectedNodes?.add(node.id); } else { - $selectedNodes?.delete(node.id); + state.selectedNodes?.delete(node.id); } } - $selectedNodes = $selectedNodes; return; } // here we are handling dragging of nodes - if ($activeNodeId !== -1 && mouseDownId !== -1) { - const node = manager.getNode($activeNodeId); + if (state.activeNodeId !== -1 && mouseDownId !== -1) { + const node = manager.getNode(state.activeNodeId); if (!node || event.buttons !== 1) return; node.tmp = node.tmp || {}; @@ -349,8 +340,8 @@ const vecX = oldX - newX; const vecY = oldY - newY; - if ($selectedNodes?.size) { - for (const nodeId of $selectedNodes) { + if (state.selectedNodes?.size) { + for (const nodeId of state.selectedNodes) { const n = manager.getNode(nodeId); if (!n?.tmp) continue; n.tmp.x = (n?.tmp?.downX || 0) - vecX; @@ -433,44 +424,43 @@ // if we clicked on a node if (clickedNodeId !== -1) { - if ($activeNodeId === -1) { - $activeNodeId = clickedNodeId; + if (state.activeNodeId === -1) { + state.activeNodeId = clickedNodeId; // if the selected node is the same as the clicked node - } else if ($activeNodeId === clickedNodeId) { + } else if (state.activeNodeId === clickedNodeId) { //$activeNodeId = -1; // if the clicked node is different from the selected node and secondary } else if (event.ctrlKey) { - $selectedNodes = $selectedNodes || new Set(); - $selectedNodes.add($activeNodeId); - $selectedNodes.delete(clickedNodeId); - $activeNodeId = clickedNodeId; + state.selectedNodes = state.selectedNodes || new Set(); + state.selectedNodes.add(state.activeNodeId); + state.selectedNodes.delete(clickedNodeId); + state.activeNodeId = clickedNodeId; // select the node } else if (event.shiftKey) { - const activeNode = manager.getNode($activeNodeId); + const activeNode = manager.getNode(state.activeNodeId); const newNode = manager.getNode(clickedNodeId); if (activeNode && newNode) { const edge = manager.getNodesBetween(activeNode, newNode); if (edge) { const selected = new Set(edge.map((n) => n.id)); selected.add(clickedNodeId); - $selectedNodes = selected; + state.selectedNodes = selected; } } - } else if (!$selectedNodes?.has(clickedNodeId)) { - $activeNodeId = clickedNodeId; - $selectedNodes?.clear(); - $selectedNodes = $selectedNodes; + } else if (!state.selectedNodes?.has(clickedNodeId)) { + state.activeNodeId = clickedNodeId; + state.clearSelection(); } } else if (event.ctrlKey) { boxSelection = true; } - const node = manager.getNode($activeNodeId); + const node = manager.getNode(state.activeNodeId); if (!node) return; node.tmp = node.tmp || {}; node.tmp.downX = node.position[0]; node.tmp.downY = node.position[1]; - if ($selectedNodes) { - for (const nodeId of $selectedNodes) { + if (state.selectedNodes) { + for (const nodeId of state.selectedNodes) { const n = manager.getNode(nodeId); if (!n) continue; n.tmp = n.tmp || {}; @@ -481,8 +471,8 @@ } function copyNodes() { - if ($activeNodeId === -1 && !$selectedNodes?.size) return; - let _nodes = [$activeNodeId, ...($selectedNodes?.values() || [])] + if (state.activeNodeId === -1 && !state.selectedNodes?.size) return; + let _nodes = [state.activeNodeId, ...(state.selectedNodes?.values() || [])] .map((id) => manager.getNode(id)) .filter(Boolean) as Node[]; @@ -518,7 +508,7 @@ .filter(Boolean) as Node[]; const newNodes = manager.createGraph(_nodes, clipboard.edges); - $selectedNodes = new Set(newNodes.map((n) => n.id)); + state.selectedNodes = new Set(newNodes.map((n) => n.id)); } const isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT"; @@ -527,10 +517,10 @@ key: "l", description: "Select linked nodes", callback: () => { - const activeNode = manager.getNode($activeNodeId); + const activeNode = manager.getNode(state.activeNodeId); if (activeNode) { const nodes = manager.getLinkedNodes(activeNode); - $selectedNodes = new Set(nodes.map((n) => n.id)); + state.selectedNodes = new Set(nodes.map((n) => n.id)); } console.log(activeNode); }, @@ -562,9 +552,8 @@ key: "Escape", description: "Deselect nodes", callback: () => { - $activeNodeId = -1; - $selectedNodes?.clear(); - $selectedNodes = $selectedNodes; + state.activeNodeId = -1; + state.clearSelection(); (document.activeElement as HTMLElement)?.blur(); }, }); @@ -616,7 +605,7 @@ description: "Select all nodes", callback: () => { if (!isBodyFocused()) return; - $selectedNodes = new Set($nodes.keys()); + state.selectedNodes = new Set($nodes.keys()); }, }); @@ -665,22 +654,21 @@ callback: (event) => { if (!isBodyFocused()) return; manager.startUndoGroup(); - if ($activeNodeId !== -1) { - const node = manager.getNode($activeNodeId); + if (state.activeNodeId !== -1) { + const node = manager.getNode(state.activeNodeId); if (node) { manager.removeNode(node, { restoreEdges: event.ctrlKey }); - $activeNodeId = -1; + state.activeNodeId = -1; } } - if ($selectedNodes) { - for (const nodeId of $selectedNodes) { + if (state.selectedNodes) { + for (const nodeId of state.selectedNodes) { const node = manager.getNode(nodeId); if (node) { manager.removeNode(node, { restoreEdges: event.ctrlKey }); } } - $selectedNodes.clear(); - $selectedNodes = $selectedNodes; + state.clearSelection(); } manager.saveUndoGroup(); }, @@ -689,16 +677,15 @@ function handleMouseUp(event: MouseEvent) { if (!mouseDown) return; - const activeNode = manager.getNode($activeNodeId); + const activeNode = manager.getNode(state.activeNodeId); const clickedNodeId = getNodeIdFromEvent(event); if (clickedNodeId !== -1) { if (activeNode) { if (!activeNode?.tmp?.isMoving && !event.ctrlKey && !event.shiftKey) { - $selectedNodes?.clear(); - $selectedNodes = $selectedNodes; - $activeNodeId = clickedNodeId; + state.clearSelection(); + state.activeNodeId = clickedNodeId; } } } @@ -721,7 +708,7 @@ activeNode.position[1] = activeNode?.tmp?.y ?? activeNode.position[1]; } const nodes = [ - ...[...($selectedNodes?.values() || [])].map((id) => + ...[...(state.selectedNodes?.values() || [])].map((id) => manager.getNode(id), ), ] as NodeType[]; @@ -760,26 +747,26 @@ $edges = $edges; }); manager.save(); - } else if ($hoveredSocket && $activeSocket) { + } else if (state.hoveredSocket && state.activeSocket) { if ( - typeof $hoveredSocket.index === "number" && - typeof $activeSocket.index === "string" + typeof state.hoveredSocket.index === "number" && + typeof state.activeSocket.index === "string" ) { manager.createEdge( - $hoveredSocket.node, - $hoveredSocket.index || 0, - $activeSocket.node, - $activeSocket.index, + state.hoveredSocket.node, + state.hoveredSocket.index || 0, + state.activeSocket.node, + state.activeSocket.index, ); } else if ( - typeof $activeSocket.index == "number" && - typeof $hoveredSocket.index === "string" + typeof state.activeSocket.index == "number" && + typeof state.hoveredSocket.index === "string" ) { manager.createEdge( - $activeSocket.node, - $activeSocket.index || 0, - $hoveredSocket.node, - $hoveredSocket.index, + state.activeSocket.node, + state.activeSocket.index || 0, + state.hoveredSocket.node, + state.hoveredSocket.index, ); } manager.save(); @@ -793,17 +780,15 @@ cameraDown[1] === cameraPosition[1] && isBodyFocused() ) { - $activeNodeId = -1; - $selectedNodes?.clear(); - $selectedNodes = $selectedNodes; + state.activeNodeId = -1; + state.clearSelection(); } mouseDown = null; boxSelection = false; - $activeSocket = null; - $possibleSockets = []; - $possibleSocketIds = null; - $hoveredSocket = null; + state.activeSocket = null; + state.possibleSockets = []; + state.hoveredSocket = null; addMenuPosition = null; } @@ -958,9 +943,12 @@ {/if} - {#if $activeSocket} + {#if state.activeSocket} {/if} diff --git a/app/src/lib/graph-interface/graph/GraphView.svelte b/app/src/lib/graph-interface/graph/GraphView.svelte index 5b992cd..61ccdb6 100644 --- a/app/src/lib/graph-interface/graph/GraphView.svelte +++ b/app/src/lib/graph-interface/graph/GraphView.svelte @@ -5,13 +5,14 @@ import Node from "../node/Node.svelte"; import { getContext, onMount } from "svelte"; import type { Writable } from "svelte/store"; - import { activeSocket } from "./stores.js"; + import { getGraphState } from "./state.svelte"; export let nodes: Writable>; export let edges: Writable; - export let cameraPosition = [0, 0, 4]; + const graphState = getGraphState(); + const isNodeInView = getContext<(n: NodeType) => boolean>("isNodeInView"); const getSocketPosition = @@ -58,7 +59,7 @@ tabindex="0" class="wrapper" style:transform={`scale(${cameraPosition[2] * 0.1})`} - class:hovering-sockets={activeSocket} + class:hovering-sockets={graphState.activeSocket} > {#each $nodes.values() as node (node.id)} > | undefined; - export const manager = new GraphManager(registry); - export let activeNode: Node | undefined; - $: if ($activeNodeId !== -1) { - activeNode = manager.getNode($activeNodeId); - } else { - activeNode = undefined; - } + type Props = { + graph: Graph; + registry: NodeRegistry; - export const status = manager.status; + settings?: Writable>; + + activeNode?: Node; + showGrid?: boolean; + snapToGrid?: boolean; + showHelp?: boolean; + settingTypes?: Record; + + onsave?: (save: Graph) => void; + onresult?: (result: any) => void; + }; + + let { + graph, + registry, + settings = $bindable(), + activeNode = $bindable(), + showGrid, + snapToGrid, + showHelp = $bindable(false), + settingTypes = $bindable(), + onsave, + onresult, + }: Props = $props(); export const keymap = createKeyMap([]); + export const manager = new GraphManager(registry); + + const state = new GraphState(); + setContext("graphState", state); + + $effect(() => { + if (state.activeNodeId !== -1) { + activeNode = manager.getNode(state.activeNodeId); + } else { + activeNode = undefined; + } + }); + setContext("keymap", keymap); - export let showGrid = false; - export let snapToGrid = false; - export let showHelp = false; - - export let settingTypes = {}; - const updateSettings = debounce((s) => { manager.setSettings(s); }, 200); - $: if (settings && $settings) { - updateSettings($settings); - } + $effect(() => { + if (settingTypes && settings) { + updateSettings($settings); + } + }); manager.on("settings", (_settings) => { settingTypes = _settings.types; - settings.set(_settings.values); + settings?.set(_settings.values); }); - manager.on("result", (result) => { - dispatch("result", result); - }); + manager.on("result", (result) => onresult?.(result)); - manager.on("save", (save) => { - dispatch("save", save); - }); + manager.on("save", (save) => onsave?.(save)); manager.load(graph); - - const dispatch = createEventDispatcher(); diff --git a/app/src/lib/graph-interface/graph/colors.ts b/app/src/lib/graph-interface/graph/colors.ts index 993efcf..fc6ddff 100644 --- a/app/src/lib/graph-interface/graph/colors.ts +++ b/app/src/lib/graph-interface/graph/colors.ts @@ -18,7 +18,8 @@ let lastStyle = ""; function updateColors() { if (!("getComputedStyle" in globalThis)) return; - const style = getComputedStyle(document.body); + console.log("updateColors") + const style = getComputedStyle(document.body.parentElement!); let hash = ""; for (const v of variables) { let color = style.getPropertyValue(`--${v}`); diff --git a/app/src/lib/graph-interface/graph/state.svelte.ts b/app/src/lib/graph-interface/graph/state.svelte.ts new file mode 100644 index 0000000..942d7cb --- /dev/null +++ b/app/src/lib/graph-interface/graph/state.svelte.ts @@ -0,0 +1,27 @@ +import type { Socket } from "@nodes/types"; +import { getContext } from "svelte"; + +export function getGraphState() { + return getContext("graphState"); +} + +export class GraphState { + + activeNodeId = $state(-1); + + selectedNodes = $state(new Set()); + clearSelection() { + this.selectedNodes = new Set(); + } + + activeSocket = $state(null); + hoveredSocket = $state(null); + possibleSockets = $state([]); + possibleSocketIds = $derived(new Set( + this.possibleSockets.map((s) => `${s.node.id}-${s.index}`), + )); + +} + +export { colors } from "./colors"; + diff --git a/app/src/lib/graph-interface/graph/stores.ts b/app/src/lib/graph-interface/graph/stores.ts deleted file mode 100644 index bea338a..0000000 --- a/app/src/lib/graph-interface/graph/stores.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { Socket } from "@nodes/types"; -import { writable, type Writable } from "svelte/store"; -import { Color } from "three/src/math/Color.js"; - -export const activeNodeId: Writable = writable(-1); -export const selectedNodes: Writable | null> = writable(new Set()); - -export const activeSocket: Writable = writable(null); -export const hoveredSocket: Writable = writable(null); -export const possibleSockets: Writable = writable([]); -export const possibleSocketIds: Writable | null> = writable(null); - -export { colors } from "./colors"; diff --git a/app/src/lib/graph-interface/node/Node.svelte b/app/src/lib/graph-interface/node/Node.svelte index e675899..6478a43 100644 --- a/app/src/lib/graph-interface/node/Node.svelte +++ b/app/src/lib/graph-interface/node/Node.svelte @@ -1,38 +1,44 @@ diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte index 824acee..f627cf8 100644 --- a/app/src/lib/graph-interface/node/NodeParameter.svelte +++ b/app/src/lib/graph-interface/node/NodeParameter.svelte @@ -6,20 +6,25 @@ } from "@nodes/types"; import { getContext } from "svelte"; import { createNodePath } from "../helpers/index.js"; - import { possibleSocketIds } from "../graph/stores.js"; import { getGraphManager } from "../graph/context.js"; import NodeInput from "./NodeInput.svelte"; + import { getGraphState } from "../graph/state.svelte.js"; - export let node: NodeType; - export let input: NodeInputType; - export let id: string; - export let isLast = false; + type Props = { + node: NodeType; + input: NodeInputType; + id: string; + isLast?: boolean; + }; + + const { node = $bindable(), input, id, isLast }: Props = $props(); const inputType = node?.tmp?.type?.inputs?.[id]!; const socketId = `${node.id}-${id}`; const graph = getGraphManager(); + const graphState = getGraphState(); const graphId = graph?.id; const inputSockets = graph?.inputSockets; @@ -75,7 +80,7 @@ class="wrapper" data-node-type={node.type} data-node-input={id} - class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)} + class:disabled={!graphState.possibleSocketIds.has(socketId)} > {#key id && graphId}
@@ -91,17 +96,17 @@
+ >
+ >
{/if} {/key} @@ -185,8 +190,10 @@ d: var(--path); } - :global(.hovering-sockets) .large:hover ~ svg path { - d: var(--hover-path); + :global { + .hovering-sockets .large:hover ~ svg path { + d: var(--hover-path); + } } .content.disabled { diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte index ca8cafd..bdddad7 100644 --- a/app/src/lib/settings/Settings.svelte +++ b/app/src/lib/settings/Settings.svelte @@ -50,6 +50,7 @@
{/if} {/each} diff --git a/app/src/lib/settings/app-settings.ts b/app/src/lib/settings/app-settings.ts index 56a957a..a10991b 100644 --- a/app/src/lib/settings/app-settings.ts +++ b/app/src/lib/settings/app-settings.ts @@ -20,14 +20,16 @@ export const AppSettings = localStore("node.settings", { const themes = ["dark", "light", "catppuccin", "solarized", "high-contrast", "nord", "dracula"]; AppSettings.subscribe((value) => { - const classes = document.body.classList; + const classes = document.body.parentElement?.classList; const newClassName = `theme-${themes[value.theme]}`; - for (const className of classes) { - if (className.startsWith("theme-") && className !== newClassName) { - classes.remove(className); + if (classes) { + for (const className of classes) { + if (className.startsWith("theme-") && className !== newClassName) { + classes.remove(className); + } } } - document.body.classList.add(newClassName); + document.body?.parentElement?.classList.add(newClassName); }); export const AppSettingTypes = { diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index d3edc4c..e021aa7 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -24,11 +24,12 @@ MemoryRuntimeExecutor, } from "@nodes/runtime"; import { IndexDBCache, RemoteNodeRegistry } from "@nodes/registry"; - import { decodeNestedArray, createPerformanceStore } from "@nodes/utils"; + import { createPerformanceStore } from "@nodes/utils"; import BenchmarkPanel from "$lib/settings/panels/BenchmarkPanel.svelte"; import { debounceAsyncFunction } from "$lib/helpers"; + import type { Component } from "svelte"; - let performanceStore = createPerformanceStore("page"); + let performanceStore = createPerformanceStore(); const registryCache = new IndexDBCache("node-registry"); const nodeRegistry = new RemoteNodeRegistry(""); @@ -38,17 +39,6 @@ const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache); memoryRuntime.perf = performanceStore; - globalThis.decode = decodeNestedArray; - - globalThis.clearCache = () => { - registryCache.clear(); - runtimeCache.clear(); - localStorage.clear(); - setTimeout(() => { - window.location.reload(); - }, 500); - }; - $: runtime = $AppSettings.useWorker ? workerRuntime : memoryRuntime; let activeNode: Node | undefined; @@ -59,11 +49,10 @@ ? JSON.parse(localStorage.getItem("graph")!) : templates.defaultPlant; - let manager: GraphManager; - let managerStatus: Writable<"loading" | "error" | "idle">; - $: if (manager) { - managerStatus = manager.status; - } + let graphInterface: ReturnType; + $: manager = graphInterface?.manager; + $: managerStatus = manager?.status; + $: keymap = graphInterface?.keymap; async function randomGenerate() { const g = manager.serialize(); @@ -71,7 +60,6 @@ await handleUpdate(g, s); } - let keymap: ReturnType; let applicationKeymap = createKeyMap([ { key: "r", @@ -136,8 +124,8 @@ }; } - function handleSave(event: CustomEvent) { - localStorage.setItem("graph", JSON.stringify(event.detail)); + function handleSave(graph: Graph) { + localStorage.setItem("graph", JSON.stringify(graph)); } @@ -156,18 +144,17 @@ {#key graph} handleUpdate(ev.detail, $graphSettings)} - on:save={handleSave} + onresult={(result) => handleUpdate(result, $graphSettings)} + onsave={(graph) => handleSave(graph)} /> diff --git a/packages/runtime/src/worker-runtime-executor.ts b/packages/runtime/src/worker-runtime-executor.ts index 4db21e1..721e161 100644 --- a/packages/runtime/src/worker-runtime-executor.ts +++ b/packages/runtime/src/worker-runtime-executor.ts @@ -5,6 +5,7 @@ import type { Graph, RuntimeExecutor } from "@nodes/types"; export class WorkerRuntimeExecutor implements RuntimeExecutor { private worker = new ComlinkWorker(new URL("worker-runtime-executor-backend.ts", import.meta.url)); constructor() { + console.log(import.meta.url) } async execute(graph: Graph, settings: Record) { return this.worker.executeGraph(graph, settings);