max/nodes
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate most of graph-manager to svelte-5
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 2m44s
Details

Browse Source
This commit is contained in:
max_richter 2024-11-02 19:37:22 +01:00
parent fa659ab74e
commit 4f03f2af5a
21 changed files with 321 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/lib/graph-interface/BoxSelection.svelte
View File

@ -1,16 +1,23 @@
<script lang="ts">
import { HTML } from "@threlte/extras";
export let p1 = { x: 0, y: 0 };
export let p2 = { x: 0, y: 0 };
type Props = {
p1: { x: number; y: number };
p2: { x: number; y: number };
cameraPosition: [number, number, number];
};
export let cameraPosition = [0, 1, 0];
const {
p1 = { x: 0, y: 0 },
p2 = { x: 0, y: 0 },
cameraPosition = [0, 1, 0],
}: Props = $props();
$: width = Math.abs(p1.x - p2.x) * cameraPosition[2];
$: height = Math.abs(p1.y - p2.y) * cameraPosition[2];
const width = $derived(Math.abs(p1.x - p2.x) * cameraPosition[2]);
const height = $derived(Math.abs(p1.y - p2.y) * cameraPosition[2]);
$: x = Math.max(p1.x, p2.x) - width / cameraPosition[2];
$: y = Math.max(p1.y, p2.y) - height / cameraPosition[2];
const x = $derived(Math.max(p1.x, p2.x) - width / cameraPosition[2]);
const y = $derived(Math.max(p1.y, p2.y) - height / cameraPosition[2]);
</script>
<HTML position.x={x} position.z={y} transform={false}>

26
app/src/lib/graph-interface/Camera.svelte
View File

@ -1,18 +1,20 @@
<script lang="ts">
import { T } from '@threlte/core';
import { type OrthographicCamera } from 'three';
import { T } from "@threlte/core";
import { type OrthographicCamera } from "three";
type Props = {
camera: OrthographicCamera;
position: [number, number, number];
};
export let camera: OrthographicCamera | undefined = undefined;
export let position: [number, number, number];
let { camera = $bindable(), position }: Props = $props();
</script>
<T.OrthographicCamera
bind:ref={camera}
position.x={position[0]}
position.y={10}
position.z={position[1]}
rotation.x={-Math.PI / 2}
zoom={position[2]}
makeDefault
bind:ref={camera}
position.x={position[0]}
position.y={10}
position.z={position[1]}
rotation.x={-Math.PI / 2}
zoom={position[2]}
makeDefault
/>

15
app/src/lib/graph-interface/HelpView.svelte
View File

@ -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 @@
});
</script>
<svelte:window on:mousemove={handleMouseOver} />
<svelte:window onmousemove={handleMouseOver} />
<div
class="help-wrapper p-4"

31
app/src/lib/graph-interface/background/Background.svelte
View File

@ -3,24 +3,27 @@
import BackgroundVert from "./Background.vert";
import BackgroundFrag from "./Background.frag";
import { colors } from "../graph/stores.js";
import { colors } from "../graph/state.svelte";
import { Color } from "three";
export let minZoom = 4;
export let maxZoom = 150;
type Props = {
minZoom: number;
maxZoom: number;
cameraPosition: [number, number, number];
width: number;
height: number;
};
export let cameraPosition: [number, number, number] = [0, 1, 0];
let {
minZoom = 4,
maxZoom = 150,
cameraPosition = [0, 1, 0],
width = globalThis?.innerWidth || 100,
height = globalThis?.innerHeight || 100,
}: Props = $props();
export let width = globalThis?.innerWidth || 100;
export let height = globalThis?.innerHeight || 100;
let bw = 2;
let bh = 2;
$: if (width && height) {
bw = width / cameraPosition[2];
bh = height / cameraPosition[2];
}
let bw = $derived(width / cameraPosition[2]);
let bh = $derived(height / cameraPosition[2]);
</script>
<T.Group

26
app/src/lib/graph-interface/edges/Edge.svelte
View File

@ -1,5 +1,5 @@
<script context="module" lang="ts">
import { colors } from "../graph/stores";
<script module lang="ts">
import { colors } from "../graph/state.svelte";
const circleMaterial = new MeshBasicMaterial({
color: get(colors).edge,
@ -29,19 +29,23 @@
import { createEdgeGeometry } from "./createEdgeGeometry.js";
import { get } from "svelte/store";
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();
let samples = 5;
let geometry: BufferGeometry;
let geometry: BufferGeometry|null = $state(null);
let lastId: number | null = null;
const primeA = 31;
const primeB = 37;
export const update = function () {
function update() {
const new_x = to.x - from.x;
const new_y = to.y - from.y;
const curveId = new_x * primeA + new_y * primeB;
@ -75,11 +79,13 @@
lineCache.set(curveId, geometry);
};
$: if (from || to) {
update();
}
$effect(() => {
if (from || to) {
update();
}
});
$: lineColor = $colors["edge"].clone().convertSRGBToLinear();
const lineColor = $derived($colors.edge.clone().convertSRGBToLinear());
</script>
<T.Mesh

4
app/src/lib/graph-interface/edges/FloatingEdge.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
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();
</script>
<Edge {from} {to} />

14
app/src/lib/graph-interface/graph-manager.ts
View File

@ -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);
}

160
app/src/lib/graph-interface/graph/Graph.svelte
View File

@ -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 @@
<AddMenu bind:position={addMenuPosition} graph={manager} />
{/if}
{#if $activeSocket}
{#if state.activeSocket}
<FloatingEdge
from={{ x: $activeSocket.position[0], y: $activeSocket.position[1] }}
from={{
x: state.activeSocket.position[0],
y: state.activeSocket.position[1],
}}
to={{ x: mousePosition[0], y: mousePosition[1] }}
/>
{/if}

7
app/src/lib/graph-interface/graph/GraphView.svelte
View File

@ -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<Map<number, NodeType>>;
export let edges: Writable<EdgeType[]>;
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)}
<Node

81
app/src/lib/graph-interface/graph/Wrapper.svelte
View File

@ -2,58 +2,77 @@
import type { Graph, Node, NodeRegistry } from "@nodes/types";
import GraphEl from "./Graph.svelte";
import { GraphManager } from "../graph-manager.js";
import { createEventDispatcher, setContext } from "svelte";
import { setContext } from "svelte";
import { type Writable } from "svelte/store";
import { debounce } from "$lib/helpers";
import { createKeyMap } from "$lib/helpers/createKeyMap";
import { activeNodeId } from "./stores";
import { GraphState } from "./state.svelte";
export let registry: NodeRegistry;
export let graph: Graph;
export let settings: Writable<Record<string, any>> | 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<Record<string, any>>;
activeNode?: Node;
showGrid?: boolean;
snapToGrid?: boolean;
showHelp?: boolean;
settingTypes?: Record<string, any>;
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();
</script>
<GraphEl {manager} bind:showGrid bind:snapToGrid bind:showHelp />

3
app/src/lib/graph-interface/graph/colors.ts
View File

@ -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}`);

27
app/src/lib/graph-interface/graph/state.svelte.ts Normal file
View File

@ -0,0 +1,27 @@
import type { Socket } from "@nodes/types";
import { getContext } from "svelte";
export function getGraphState() {
return getContext<GraphState>("graphState");
}
export class GraphState {
activeNodeId = $state(-1);
selectedNodes = $state(new Set<number>());
clearSelection() {
this.selectedNodes = new Set();
}
activeSocket = $state<Socket | null>(null);
hoveredSocket = $state<Socket | null>(null);
possibleSockets = $state<Socket[]>([]);
possibleSocketIds = $derived(new Set(
this.possibleSockets.map((s) => `${s.node.id}-${s.index}`),
));
}
export { colors } from "./colors";

13
app/src/lib/graph-interface/graph/stores.ts
View File

@ -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<number> = writable(-1);
export const selectedNodes: Writable<Set<number> | null> = writable(new Set());
export const activeSocket: Writable<Socket | null> = writable(null);
export const hoveredSocket: Writable<Socket | null> = writable(null);
export const possibleSockets: Writable<Socket[]> = writable([]);
export const possibleSocketIds: Writable<Set<string> | null> = writable(null);
export { colors } from "./colors";

36
app/src/lib/graph-interface/node/Node.svelte
View File

@ -1,38 +1,44 @@
<script lang="ts">
import type { Node } from "@nodes/types";
import { getContext, onMount } from "svelte";
import { activeNodeId, selectedNodes } from "../graph/stores.js";
import { colors } from "../graph/stores";
import { colors, getGraphState } from "../graph/state.svelte";
import { T } from "@threlte/core";
import { Color, type Mesh } from "three";
import NodeFrag from "./Node.frag";
import NodeVert from "./Node.vert";
import NodeHtml from "./NodeHTML.svelte";
export let node: Node;
export let inView = true;
export let z = 2;
const graphState = getGraphState();
$: isActive = $activeNodeId === node.id;
$: isSelected = !!$selectedNodes?.has(node.id);
type Props = {
node: Node;
inView: boolean;
z: number;
};
const { node, inView, z }: Props = $props();
const isActive = $derived(graphState.activeNodeId === node.id);
const isSelected = $derived(!!graphState.selectedNodes?.has(node.id));
const updateNodePosition =
getContext<(n: Node) => void>("updateNodePosition");
const getNodeHeight = getContext<(n: string) => number>("getNodeHeight");
let meshRef: Mesh;
let meshRef: Mesh | undefined = $state();
const height = getNodeHeight?.(node.type);
$: if (node && meshRef) {
node.tmp = node.tmp || {};
node.tmp.mesh = meshRef;
updateNodePosition?.(node);
}
$effect(() => {
if (node && meshRef) {
node.tmp = node.tmp || {};
node.tmp.mesh = meshRef;
updateNodePosition?.(node);
}
});
$: colorBright = $colors["layer-2"];
$: colorDark = $colors["layer-1"];
const colorBright = $colors["layer-2"];
const colorDark = $colors["layer-1"];
onMount(() => {
node.tmp = node.tmp || {};

2
app/src/lib/graph-interface/node/NodeHeader.svelte
View File

@ -60,7 +60,7 @@
role="button"
tabindex="0"
on:mousedown={handleMouseDown}
/>
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"

34
app/src/lib/graph-interface/node/NodeInput.svelte
View File

@ -3,23 +3,33 @@
import { getGraphManager } from "../graph/context.js";
import { Input } from "@nodes/ui";
export let node: Node;
export let input: NodeInput;
export let id: string;
type Props = {
node: Node;
input: NodeInput;
id: string;
elementId?: string;
};
const {
node,
input,
id,
elementId = `input-${Math.random().toString(36).substring(7)}`,
}: Props = $props();
const graph = getGraphManager();
let value = node?.props?.[id] ?? input.value;
let value = $state(node?.props?.[id] ?? input.value);
export let elementId: string = `input-${Math.random().toString(36).substring(7)}`;
$: if (node?.props?.[id] !== value) {
node.props = { ...node.props, [id]: value };
if (graph) {
graph.save();
graph.execute();
$effect(() => {
if (value !== undefined && node?.props?.[id] !== value) {
node.props = { ...node.props, [id]: value };
if (graph) {
graph.save();
graph.execute();
}
}
}
});
</script>
<Input id="input-{elementId}" {input} bind:value />

31
app/src/lib/graph-interface/node/NodeParameter.svelte
View File

@ -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}
<div class="content" class:disabled={$inputSockets?.has(socketId)}>
@ -91,17 +96,17 @@
<div
data-node-socket
class="large target"
on:mousedown={handleMouseDown}
onmousedown={handleMouseDown}
role="button"
tabindex="0"
/>
></div>
<div
data-node-socket
class="small target"
on:mousedown={handleMouseDown}
onmousedown={handleMouseDown}
role="button"
tabindex="0"
/>
></div>
{/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 {

4
app/src/lib/settings/Settings.svelte
View File

@ -50,6 +50,7 @@
<div class="wrapper" class:visible={$activePanel}>
<div class="tabs">
<button
aria-label="Close"
on:click={() => {
setActivePanel($activePanel ? false : keys[0]);
}}
@ -59,11 +60,12 @@
{#each keys as panel (panels[panel].id)}
{#if panels[panel].visible !== false}
<button
aria-label={panel}
class="tab {panels[panel].classes}"
class:active={panel === $activePanel}
on:click={() => setActivePanel(panel)}
>
<span class={`block w-6 h-6 ${panels[panel].icon}`} />
<span class={`block w-6 h-6 ${panels[panel].icon}`}></span>
</button>
{/if}
{/each}

12
app/src/lib/settings/app-settings.ts
View File

@ -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 = {

37
app/src/routes/+page.svelte
View File

@ -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<typeof GraphInterface>;
$: 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<typeof createKeyMap>;
let applicationKeymap = createKeyMap([
{
key: "r",
@ -136,8 +124,8 @@
};
}
function handleSave(event: CustomEvent<Graph>) {
localStorage.setItem("graph", JSON.stringify(event.detail));
function handleSave(graph: Graph) {
localStorage.setItem("graph", JSON.stringify(graph));
}
</script>
@ -156,18 +144,17 @@
<Grid.Cell>
{#key graph}
<GraphInterface
bind:this={graphInterface}
{graph}
registry={nodeRegistry}
bind:manager
bind:activeNode
bind:keymap
showGrid={$AppSettings.showNodeGrid}
snapToGrid={$AppSettings.snapToGrid}
bind:showHelp={$AppSettings.showHelp}
bind:settings={graphSettings}
bind:settingTypes={graphSettingTypes}
on:result={(ev) => handleUpdate(ev.detail, $graphSettings)}
on:save={handleSave}
onresult={(result) => handleUpdate(result, $graphSettings)}
onsave={(graph) => handleSave(graph)}
/>
<Settings>
<Panel id="general" title="General" icon="i-tabler-settings">

1
packages/runtime/src/worker-runtime-executor.ts
View File

@ -5,6 +5,7 @@ import type { Graph, RuntimeExecutor } from "@nodes/types";
export class WorkerRuntimeExecutor implements RuntimeExecutor {
private worker = new ComlinkWorker<typeof import('./worker-runtime-executor-backend.ts')>(new URL("worker-runtime-executor-backend.ts", import.meta.url));
constructor() {
console.log(import.meta.url)
}
async execute(graph: Graph, settings: Record<string, unknown>) {
return this.worker.executeGraph(graph, settings);