feat(packages): add svelte version

2023-02-01 09:41:09 +01:00
parent 079e380a31
commit 2af833aee1
30 changed files with 2279 additions and 21 deletions
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { onMount, setContext } from 'svelte';
+  import type { XYPosition } from '@reactflow/core';
+
+  import drag  from '$lib/hooks/drag'
+	import { useStore } from '$lib/store';
+	import DefaultNode from './DefaultNode.svelte';
+
+  export let id: string;
+  export let positionAbsolute: XYPosition = { x: 0, y: 0 };
+  export let dragging: boolean = false;
+  export let data: any = {};
+  export let resizeObserver: ResizeObserver | null = null;
+  export let style: any = {};
+
+  let nodeRef: HTMLDivElement;
+
+  const { nodesStore, transformStore, updateNodePositions } = useStore();
+
+  setContext('rf_nodeid', id);
+
+  onMount(() => {
+    resizeObserver?.observe(nodeRef);
+
+    return () => {
+      resizeObserver?.unobserve(nodeRef);
+    }
+  });
+
+</script>
+
+<div
+  use:drag={{ nodeId: id, nodesStore, transformStore, updateNodePositions }}
+  class="react-flow__node"
+  class:dragging={dragging}
+  bind:this={nodeRef}
+  style="transform: translate({positionAbsolute.x}px, {positionAbsolute.y}px);"
+  data-id={id}
+>
+  <svelte:component this={DefaultNode} data={data} />
+</div>
+
+<style>
+  .react-flow__node {
+    padding: 10px;
+    border-radius: 3px;
+    width: var(--node-width);
+    font-size: 12px;
+    color: #222;
+    text-align: center;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #1a192b;
+    background-color: white;
+    position: absolute;
+    cursor: grab; 
+  }
+
+  .dragging {
+    cursor: grabbing;
+  }
+</style>