From ba43823d59d48094289c559be37f95b677effaaf Mon Sep 17 00:00:00 2001 From: EatThePooh Date: Tue, 4 Nov 2025 10:03:32 +0700 Subject: [PATCH] editor WIP --- platform/loom/deno.json | 2 + platform/loom/deno.lock | 24 +++++++- platform/loom/editor/src/App.svelte | 30 ---------- .../loom/editor/src/lib/CustomHandle.svelte | 0 .../loom/editor/src/lib/CustomNode.svelte | 55 +++++++++++++++++++ platform/loom/editor/src/lib/Flow.svelte | 40 ++++++++++++-- 6 files changed, 115 insertions(+), 36 deletions(-) create mode 100644 platform/loom/editor/src/lib/CustomHandle.svelte create mode 100644 platform/loom/editor/src/lib/CustomNode.svelte diff --git a/platform/loom/deno.json b/platform/loom/deno.json index 649373f..7cb0143 100644 --- a/platform/loom/deno.json +++ b/platform/loom/deno.json @@ -15,7 +15,9 @@ "@types/node": "npm:@types/node@^24.6.0", "svelte": "npm:svelte@^5.39.6", "svelte-check": "npm:svelte-check@^4.3.2", + "typeid-js": "npm:typeid-js@^1.2.0", "typescript": "npm:typescript@~5.9.3", + "uuid": "npm:uuid@^13.0.0", "vite": "npm:rolldown-vite@7.1.14", }, "lint": { diff --git a/platform/loom/deno.lock b/platform/loom/deno.lock index 54e045a..bc5de53 100644 --- a/platform/loom/deno.lock +++ b/platform/loom/deno.lock @@ -9,10 +9,16 @@ "npm:@xyflow/svelte@^1.3.1": "1.3.1_svelte@5.39.11__acorn@8.15.0", "npm:express@*": "5.1.0", "npm:rolldown-vite@7.1.14": "7.1.14_@types+node@24.7.0_picomatch@4.0.3", + "npm:svelte-check@*": "4.3.3_svelte@5.39.11__acorn@8.15.0_typescript@5.9.3", "npm:svelte-check@^4.3.2": "4.3.3_svelte@5.39.11__acorn@8.15.0_typescript@5.9.3", "npm:svelte-splitpanes@8": "8.0.9_svelte@5.39.11__acorn@8.15.0", "npm:svelte@^5.39.6": "5.39.11_acorn@8.15.0", + "npm:typeid-js@*": "1.2.0", + "npm:typeid-js@^1.2.0": "1.2.0", + "npm:typescript@5.9.3": "5.9.3", "npm:typescript@~5.9.3": "5.9.3", + "npm:uuid@*": "10.0.0", + "npm:uuid@13": "13.0.0", "npm:vite@*": "7.1.9_@types+node@24.7.0_picomatch@4.0.3" }, "npm": { @@ -1286,6 +1292,12 @@ "mime-types" ] }, + "typeid-js@1.2.0": { + "integrity": "sha512-t76ZucAnvGC60ea/HjVsB0TSoB0cw9yjnfurUgtInXQWUI/VcrlZGpO23KN3iSe8yOGUgb1zr7W7uEzJ3hSljA==", + "dependencies": [ + "uuid@10.0.0" + ] + }, "typescript@5.9.3": { "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "bin": true @@ -1296,6 +1308,14 @@ "unpipe@1.0.0": { "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==" }, + "uuid@10.0.0": { + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "bin": true + }, + "uuid@13.0.0": { + "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==", + "bin": true + }, "vary@1.1.2": { "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==" }, @@ -1345,7 +1365,9 @@ "npm:svelte-check@^4.3.2", "npm:svelte-splitpanes@8", "npm:svelte@^5.39.6", - "npm:typescript@~5.9.3" + "npm:typeid-js@^1.2.0", + "npm:typescript@~5.9.3", + "npm:uuid@13" ] } } diff --git a/platform/loom/editor/src/App.svelte b/platform/loom/editor/src/App.svelte index 89b96df..20938f8 100644 --- a/platform/loom/editor/src/App.svelte +++ b/platform/loom/editor/src/App.svelte @@ -6,36 +6,6 @@ // import { Splitpanes, Pane } from 'svelte-splitpanes' - import { SvelteFlow, Controls, Background, MiniMap, Panel, ConnectionLineType } from '@xyflow/svelte'; - import '@xyflow/svelte/dist/style.css'; - - let nodes = $state.raw([ - { - id: '1', - position: { x: 0, y: 0 }, - data: { label: 'Hello' }, - type: 'input' - }, - { - id: '2', - position: { x: 100, y: 100 }, - data: { label: 'Hello you' }, - type: 'output' - }, - { - id: '3', - position: { x: 200, y: 0 }, - data: { label: 'what about me'} - } - ]); - let edges = $state.raw([ - { - id: 'e1-2', - source: '1', - target: '2', - type: 'smoothstep' - } - ]);
diff --git a/platform/loom/editor/src/lib/CustomHandle.svelte b/platform/loom/editor/src/lib/CustomHandle.svelte new file mode 100644 index 0000000..e69de29 diff --git a/platform/loom/editor/src/lib/CustomNode.svelte b/platform/loom/editor/src/lib/CustomNode.svelte new file mode 100644 index 0000000..600c4c4 --- /dev/null +++ b/platform/loom/editor/src/lib/CustomNode.svelte @@ -0,0 +1,55 @@ + + +
+
+ + { + const target = evt.target as HTMLInputElement; + updateNodeData(id, { text: target?.value }); + }} + class="nodrag" + /> + {#if selected} + + {/if} + + +
+
+ + diff --git a/platform/loom/editor/src/lib/Flow.svelte b/platform/loom/editor/src/lib/Flow.svelte index 47c85d7..bc78997 100644 --- a/platform/loom/editor/src/lib/Flow.svelte +++ b/platform/loom/editor/src/lib/Flow.svelte @@ -5,33 +5,63 @@ MiniMap, ConnectionLineType } from '@xyflow/svelte'; + import type { Node, + Edge, + Connection + } from '@xyflow/svelte'; import '@xyflow/svelte/dist/style.css'; + import { TypeID } from 'typeid-js'; + import { v5, NIL } from 'uuid'; + + import CustomNode from './CustomNode.svelte'; + + function tid_v5(prefix: string, data: string): TypeID { + return TypeID.fromUUID(prefix, v5(data, v5(prefix, NIL))); + } let nodes = $state.raw([ { - id: '1', + id: tid_v5('sigil', '1').toString(), position: { x: 0, y: 0 }, data: { label: 'Hello' }, - type: 'input' + type: 'sigil' }, { - id: '2', + id: tid_v5('sigil', '2').toString(), position: { x: 100, y: 100 }, data: { label: 'Hello you' }, type: 'output' }, { - id: '3', + id: tid_v5('sigil','3').toString(), position: { x: 200, y: 0 }, data: { label: 'what about me'} } ]); let edges = $state.raw([]); + + function onconnect(connection: Connection) { + let strandId = tid_v5('strand', connection.source + connection.target); + + let filteredEdges = edges.filter(e => { + let sourceHandlesDiffer = e.source !== connection.source + || (e.sourceHandle ?? null) !== (connection.sourceHandle ?? null); + let targetHandlesDiffer = e.target !== connection.target + || (e.targetHandle ?? null) !== (connection.targetHandle ?? null); + + return sourceHandlesDiffer && targetHandlesDiffer; + }); + + edges = [...filteredEdges, { id: strandId.toString(), ...connection } ]; + } + + let nodeTypes = { sigil: CustomNode }; + connectionLineType={ConnectionLineType.SmoothStep} + onconnect={onconnect} nodeTypes={nodeTypes}>