Node search on right click?

web/src/App.svelte

@@ -11,6 +11,7 @@
     type Edge,
   } from '@xyflow/svelte';
   import LynxKiteNode from './LynxKiteNode.svelte';
+  import NodeSearch from './NodeSearch.svelte';
   import '@xyflow/svelte/dist/style.css';
 
   const nodeTypes: NodeTypes = {
@@ -26,12 +27,6 @@
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
     },
-    {
-      id: '2',
-      // type: 'basic',
-      data: { label: 'World' },
-      position: { x: 150, y: 150 },
-    },
     {
       id: '3',
       type: 'basic',
@@ -43,21 +38,48 @@
 
   const edges = writable<Edge[]>([
     {
-      id: '1-2',
-      source: '1',
-      target: '2',
+      id: '3-1',
+      source: '3',
+      target: '1',
       markerEnd: {
-        type: MarkerType.Arrow
+        type: MarkerType.ArrowClosed,
       },
     },
   ]);
+
+  function onPaneContextMenu({ detail: { event } }) {
+    event.preventDefault();
+    const width = 500;
+    const height = 200;
+    showNodeSearch = {
+      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
+    };
+    showNodeSearch = {
+      top: event.clientY,
+      left: event.clientX - 150,
+    };
+  }
+  function addNode(node: Node) {
+    nodes.update((n) => [...n, node]);
+  }
+
+  let showNodeSearch;
 </script>
 
 <div style:height="100vh">
-  <SvelteFlow {nodes} {edges} {nodeTypes} fitView>
+  <SvelteFlow {nodes} {edges} {nodeTypes} fitView
+    on:nodecontextmenu={onPaneContextMenu}
+    on:panecontextmenu={onPaneContextMenu}
+    on:paneclick={() => showNodeSearch = undefined}
+    on:nodeclick={() => showNodeSearch = undefined}
+    >
     <Background />
     <Controls />
     <Background />
     <MiniMap />
+    {#if showNodeSearch}<NodeSearch on:add={addNode} pos={showNodeSearch} />{/if}
   </SvelteFlow>
 </div>

web/src/LynxKiteNode.svelte

@@ -65,7 +65,7 @@
     width: calc(100% - 8px);
   }
   .node-container {
-    padding: 5px;
+    padding: 8px;
   }
   .lynxkite-node {
     box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);

web/src/NodeSearch.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let pos;
+  console.log({pos});
+  function titleClicked() {
+    expanded = !expanded;
+  }
+</script>
+
+<div class="node-search"
+style="top: {pos.top}px; left: {pos.left}px; right: {pos.right}px; bottom: {pos.bottom}px;">
+
+  Node Search!
+</div>
+
+<style>
+  .node-search {
+    position: absolute;
+    width: 300px;
+    z-index: 5;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #888;
+    background-color: white;
+  }
+</style>

web/src/app.css

@@ -3,3 +3,21 @@
   line-height: 1.5;
   font-weight: 400;
 }
+path.svelte-flow__edge-path {
+  stroke-width: 2;
+  stroke: black;
+}
+.svelte-flow__edge.selected path.svelte-flow__edge-path {
+  stroke-width: 5;
+  stroke: black;
+}
+.svelte-flow__handle {
+  border-color: black;
+  background: white;
+  width: 10px;
+  height: 10px;
+}
+.svelte-flow__arrowhead * {
+  stroke: none;
+  fill: black;
+}