editor WIP

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<Node[]>([
-    {
-      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<Edge[]>([
-    {
-      id: 'e1-2',
-      source: '1',
-      target: '2',
-      type: 'smoothstep'
-    }
-  ]);
 </script>
 
 <main>

platform/loom/editor/src/lib/CustomNode.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { NodeResizer,
+           Position,
+           useSvelteFlow,
+           Handle,
+           type NodeProps } from '@xyflow/svelte';
+
+  let { id, data, selected }: NodeProps = $props();
+  let { updateNodeData } = useSvelteFlow();
+</script>
+
+<div class={["sigil", !selected ? "border" : '']}>
+  <div>
+    <label for="text">{id}</label>
+    <input
+      id="text"
+      name="text"
+      value={data.text}
+      oninput={(evt) => {
+        const target = evt.target as HTMLInputElement;
+        updateNodeData(id, { text: target?.value });
+      }}
+      class="nodrag"
+    />
+    {#if selected}
+      <NodeResizer />
+    {/if}
+    <Handle type="target" position={Position.Top} />
+    <Handle type="source" position={Position.Bottom} />
+  </div>
+</div>
+
+<style>
+  .sigil > div {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+  }
+
+  .sigil {
+    display: flex;
+    height: 100%;
+    background-color: ivory;
+    border: 1px solid rgba(0,0,0,0);
+  }
+
+  .sigil.border {
+    border: 1px solid gray;
+  }
+
+  .sigil > div > label {
+    font-size: 8px;
+    padding-bottom: 4px;
+  }
+</style>

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<typeof prefix> {
+    return TypeID.fromUUID(prefix, v5(data, v5(prefix, NIL)));
+  }
 
   let nodes = $state.raw<Node[]>([
     {
-      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<Edge[]>([]);
+
+  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 };
 </script>
 
 <SvelteFlow bind:nodes bind:edges fitView snapGrid={[10,10]}
             defaultEdgeOptions={{ type: 'smoothstep', zIndex: 0 }}
-            connectionLineType={ConnectionLineType.SmoothStep}>
+            connectionLineType={ConnectionLineType.SmoothStep}
+            onconnect={onconnect} nodeTypes={nodeTypes}>
     <Controls />
     <Background />
     <MiniMap />