Create nodes at the search location.

web/src/App.svelte

@@ -1,99 +1,10 @@
 <script lang="ts">
-  import { writable } from 'svelte/store';
   import {
-    SvelteFlow,
-    Controls,
-    Background,
-    MiniMap,
-    MarkerType,
-    Position,
-    type Node,
-    type Edge,
+    SvelteFlowProvider,
   } from '@xyflow/svelte';
-  import LynxKiteNode from './LynxKiteNode.svelte';
-  import NodeSearch from './NodeSearch.svelte';
-  import '@xyflow/svelte/dist/style.css';
-
-  const nodeTypes: NodeTypes = {
-    basic: LynxKiteNode,
-  };
-
-  const nodes = writable<Node[]>([
-    {
-      id: '1',
-      type: 'basic',
-      data: { title: 'Compute PageRank', params: { damping: 0.85, iterations: 3 } },
-      position: { x: 0, y: 0 },
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left,
-    },
-    {
-      id: '3',
-      type: 'basic',
-      data: { title: 'Import Parquet', params: { filename: '/tmp/x.parquet' } },
-      position: { x: -300, y: 0 },
-      sourcePosition: Position.Right,
-    },
-  ]);
-
-  const edges = writable<Edge[]>([
-    {
-      id: '3-1',
-      source: '3',
-      target: '1',
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-      },
-    },
-  ]);
-
-  function closeNodeSearch() {
-    nodeSearchPos = undefined;
-  }
-  function toggleNodeSearch({ detail: { event } }) {
-    if (nodeSearchPos) {
-      closeNodeSearch();
-      return;
-    }
-    event.preventDefault();
-    const width = 500;
-    const height = 200;
-    nodeSearchPos = {
-      top: event.clientY < height - 200 ? event.clientY : undefined,
-      left: event.clientX < width - 200 ? event.clientX : undefined,
-      right: event.clientX >= width - 200 ? width - event.clientX : undefined,
-      bottom: event.clientY >= height - 200 ? height - event.clientY : undefined
-    };
-    nodeSearchPos = {
-      top: event.clientY,
-      left: event.clientX - 150,
-    };
-  }
-  function addNode(node: Node) {
-    nodes.update((n) => [...n, node]);
-  }
-
-  const boxes = [
-    { name: 'Compute PageRank' },
-    { name: 'Import Parquet' },
-    { name: 'Export Parquet' },
-    { name: 'Export CSV' },
-  ];
-
-  let nodeSearchPos;
+  import LynxKiteFlow from './LynxKiteFlow.svelte';
 </script>
 
-<div style:height="100vh">
-  <SvelteFlow {nodes} {edges} {nodeTypes} fitView
-    on:paneclick={toggleNodeSearch}
-    proOptions={{ hideAttribution: true }}
-    maxZoom={1.5}
-    minZoom={0.3}
-    >
-    <Background />
-    <Controls />
-    <Background />
-    <MiniMap />
-    {#if nodeSearchPos}<NodeSearch boxes={boxes} on:cancel={closeNodeSearch} on:add={addNode} pos={nodeSearchPos} />{/if}
-  </SvelteFlow>
-</div>
+<SvelteFlowProvider>
+  <LynxKiteFlow />
+</SvelteFlowProvider>

web/src/LynxKiteFlow.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import {
+    SvelteFlow,
+    Controls,
+    Background,
+    MiniMap,
+    MarkerType,
+    Position,
+    useSvelteFlow,
+    type XYPosition,
+    type Node,
+    type Edge,
+  } from '@xyflow/svelte';
+  import LynxKiteNode from './LynxKiteNode.svelte';
+  import NodeSearch from './NodeSearch.svelte';
+  import '@xyflow/svelte/dist/style.css';
+
+  const { screenToFlowPosition } = useSvelteFlow();
+  const nodeTypes: NodeTypes = {
+    basic: LynxKiteNode,
+  };
+
+  const nodes = writable<Node[]>([
+    {
+      id: '1',
+      type: 'basic',
+      data: { title: 'Compute PageRank', params: { damping: 0.85, iterations: 3 } },
+      position: { x: 0, y: 0 },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    },
+    {
+      id: '3',
+      type: 'basic',
+      data: { title: 'Import Parquet', params: { filename: '/tmp/x.parquet' } },
+      position: { x: -300, y: 0 },
+      sourcePosition: Position.Right,
+    },
+  ]);
+
+  const edges = writable<Edge[]>([
+    {
+      id: '3-1',
+      source: '3',
+      target: '1',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+      },
+    },
+  ]);
+
+  function closeNodeSearch() {
+    nodeSearchPos = undefined;
+  }
+  function toggleNodeSearch({ detail: { event } }) {
+    if (nodeSearchPos) {
+      closeNodeSearch();
+      return;
+    }
+    event.preventDefault();
+    const width = 500;
+    const height = 200;
+    nodeSearchPos = {
+      top: event.clientY < height - 200 ? event.clientY : undefined,
+      left: event.clientX < width - 200 ? event.clientX : undefined,
+      right: event.clientX >= width - 200 ? width - event.clientX : undefined,
+      bottom: event.clientY >= height - 200 ? height - event.clientY : undefined
+    };
+    nodeSearchPos = {
+      top: event.clientY,
+      left: event.clientX - 150,
+    };
+  }
+  function addNode(e) {
+    const node = {...e.detail};
+    nodes.update((n) => {
+      node.position = screenToFlowPosition({x: nodeSearchPos.left, y: nodeSearchPos.top});
+      const title = node.data.title;
+      let i = 1;
+      node.id = `${title} ${i}`;
+      while (n.find((x) => x.id === node.id)) {
+        i += 1;
+        node.id = `${title} ${i}`;
+      }
+      return [...n, node]
+    });
+    closeNodeSearch();
+  }
+
+  const boxes = [
+    {
+      type: 'basic',
+      data: { title: 'Import Parquet', params: { filename: '/tmp/x.parquet' } },
+      sourcePosition: Position.Right,
+    },
+    {
+      type: 'basic',
+      data: { title: 'Export Parquet', params: { filename: '/tmp/x.parquet' } },
+      sourcePosition: Position.Right,
+    },
+    {
+      type: 'basic',
+      data: { title: 'Export CSV', params: { filename: '/tmp/x.csv' } },
+      sourcePosition: Position.Right,
+    },
+    {
+      type: 'basic',
+      data: { title: 'Compute PageRank', params: { damping: 0.85, iterations: 3 } },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    },
+  ];
+
+  let nodeSearchPos: XYPosition | undefined = undefined
+</script>
+
+<div style:height="100vh">
+  <SvelteFlow {nodes} {edges} {nodeTypes} fitView
+    on:paneclick={toggleNodeSearch}
+    proOptions={{ hideAttribution: true }}
+    maxZoom={1.5}
+    minZoom={0.3}
+    >
+    <Background />
+    <Controls />
+    <Background />
+    <MiniMap />
+    {#if nodeSearchPos}<NodeSearch boxes={boxes} on:cancel={closeNodeSearch} on:add={addNode} pos={nodeSearchPos} />{/if}
+  </SvelteFlow>
+</div>

web/src/NodeSearch.svelte

@@ -9,12 +9,11 @@
   let selectedIndex = 0;
   onMount(() => searchBox.focus());
   const fuse = new Fuse(boxes, {
-    keys: ['name']
+    keys: ['data.title']
   })
   function onInput() {
-    console.log('input', searchBox.value, selectedIndex);
     hits = fuse.search(searchBox.value);
-    selectedIndex = Math.min(selectedIndex, hits.length - 1);
+    selectedIndex = Math.max(0, Math.min(selectedIndex, hits.length - 1));
   }
   function onKeyDown(e) {
     if (e.key === 'ArrowDown') {
@@ -24,7 +23,9 @@
       e.preventDefault();
       selectedIndex = Math.max(selectedIndex - 1, 0);
     } else if (e.key === 'Enter') {
-      dispatch('add', {x: pos.left, y: pos.top, ...hits[selectedIndex].item});
+      const node = {...hits[selectedIndex].item};
+      node.position = {x: pos.left, y: pos.top};
+      dispatch('add', node);
     } else if (e.key === 'Escape') {
       dispatch('cancel');
     }
@@ -42,7 +43,7 @@ style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.
     on:focusout={() => dispatch('cancel')}
     placeholder="Search for box">
   {#each hits as box, index}
-    <div class="search-result" class:selected={index == selectedIndex}>{index} {box.item.name}</div>
+    <div class="search-result" class:selected={index == selectedIndex}>{index} {box.item.data.title}</div>
   {/each}
 </div>