feat: node store interface

app/src/lib/node-store/DraggableNode.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import NodeHtml from "$lib/graph-interface/node/NodeHTML.svelte";
+  import type { NodeType } from "@nodes/types";
+
+  export let node: NodeType;
+
+  let dragging = false;
+
+  function handleDragStart(e: DragEvent) {
+    dragging = true;
+    const box = (e?.target as HTMLElement)?.getBoundingClientRect();
+    if (e.dataTransfer === null) return;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("data/node-id", node.id);
+    e.dataTransfer.setData(
+      "data/node-offset-x",
+      Math.round(box.left - e.clientX).toString(),
+    );
+    e.dataTransfer.setData(
+      "data/node-offset-y",
+      Math.round(box.top - e.clientY).toString(),
+    );
+  }
+</script>
+
+<div class="node-wrapper" class:dragging>
+  <div
+    on:dragend={() => {
+      dragging = false;
+    }}
+    draggable={true}
+    role="button"
+    tabindex="0"
+    on:dragstart={handleDragStart}
+  >
+    <NodeHtml
+      inView={true}
+      position={"relative"}
+      z={5}
+      node={{
+        id: 0,
+        type: node.id,
+        position: [0, 0],
+        tmp: {
+          type: node,
+        },
+      }}
+    />
+  </div>
+</div>
+
+<style>
+  .node-wrapper {
+    width: fit-content;
+    border-radius: 5px;
+    box-sizing: border-box;
+    border: solid 2px transparent;
+    padding: 5px;
+    margin-left: -5px;
+  }
+
+  .dragging {
+    border: dashed 2px var(--outline);
+  }
+  .node-wrapper > div {
+    opacity: 1;
+    display: block;
+    pointer-events: all;
+    transition: opacity 0.2s;
+  }
+  .dragging > div {
+    opacity: 0.2;
+  }
+</style>