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 { setContext, onMount } from 'svelte'
+  import cc from 'classcat';
+  import type { Node, Edge } from '@reactflow/core';
+
+	import { key, createStore } from '$lib/store';
+  import Viewport from '$lib/container/Viewport.svelte';
+  import NodeRenderer from '$lib/container/NodeRenderer.svelte';
+  import EdgeRenderer from '$lib/container/EdgeRenderer.svelte';
+
+  export let nodes: Node[];
+  export let edges: Edge[];
+
+  export let className: string | null = null;
+  export let id: string = '1';
+
+  let props = { ...$$restProps };
+  let domNode: Element;
+
+  const store = createStore({
+    nodes,
+    edges,
+  });
+
+  setContext(key, {
+    getStore: () => store
+  });
+
+  onMount(() => {
+    const { width, height } = domNode.getBoundingClientRect();
+    store.widthStore.set(width);
+    store.heightStore.set(height);
+  })
+</script>
+
+
+<div
+  {...props}
+  class={cc(['react-flow', className])}
+  data-testid="rf__wrapper"
+  id={id}
+  bind:this={domNode}
+>
+  <Viewport>
+    <NodeRenderer />
+    <EdgeRenderer />
+  </Viewport>
+</div>
+
+<style>
+  .react-flow {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+  }
+
+  :root {
+    --node-width: 150px;
+  }
+</style>