feat(svelte): add subflows

2023-03-15 18:34:07 +01:00
parent 9e961809ee
commit 77d14f9ad0
15 changed files with 347 additions and 84 deletions
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import SvelteFlow, {
+    SvelteFlowProvider,
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    createNodes,
+    createEdges,
+    type NodeTypes,
+  } from '../../lib/index';
+  import { DebugNode } from './DebugNode';
+  
+  const nodeTypes: NodeTypes = {
+    default: DebugNode,
+  };
+
+  const nodes = createNodes([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Node 1' },
+      position: { x: 250, y: 5 },
+      origin: [0.5, 0.5],
+    },
+    {
+      id: '4',
+      data: { label: 'Node 4' },
+      position: { x: 100, y: 200 },
+      style: "width:500px; height:300px;"
+    },
+    {
+      id: '4a',
+      data: { label: 'Node 4a' },
+      position: { x: 15, y: 15 },
+      parentNode: '4',
+      extent: [
+        [0, 0],
+        [100, 100],
+      ],
+    },
+    {
+      id: '4b',
+      data: { label: 'Node 4b' },
+      position: { x: 100, y: 60 },
+      style: "width: 300px; height: 200px;",
+      parentNode: '4',
+    },
+    {
+      id: '4b1',
+      data: { label: 'Node 4b1' },
+      position: { x: 40, y: 20 },
+      parentNode: '4b',
+    },
+    {
+      id: '4b2',
+      data: { label: 'Node 4b2' },
+      position: { x: 20, y: 100 },
+      parentNode: '4b',
+    },
+    {
+      id: '5',
+      type: 'group',
+      data: { label: 'Node 5' },
+      position: { x: 650, y: 250 },
+      style: "width: 400px; height: 150px",
+      zIndex: 1000,
+    },
+    {
+      id: '5a',
+      data: { label: 'Node 5a' },
+      position: { x: 0, y: 0 },
+      parentNode: '5',
+      extent: 'parent',
+    },
+    {
+      id: '5b',
+      data: { label: 'Node 5b' },
+      position: { x: 225, y: 50 },
+      parentNode: '5',
+      expandParent: true,
+    },
+    {
+      id: '2',
+      data: { label: 'Node 2' },
+      position: { x: 100, y: 100 },
+    },
+    {
+      id: '3',
+      data: { label: 'Node 3' },
+      position: { x: 400, y: 100 },
+    }
+  ]);
+
+  const edges = createEdges([
+    {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    // markerEnd: {
+    //   type: MarkerType.Arrow,
+    //   strokeWidth: 2,
+    //   width: 15,
+    //   height: 15,
+    //   color: '#f00',
+    // },
+  },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
+  { id: 'e3-4b', source: '3', target: '4b' },
+  { id: 'e4a-4b1', source: '4a', target: '4b1' },
+  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
+  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  ], { animated: true });
+
+  $: {
+    console.log($nodes)
+  }
+</script>
+
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
+  <SvelteFlow
+    {nodeTypes}
+    fitView
+    minZoom={0.1}
+    maxZoom={2.5}
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+</SvelteFlowProvider>
+
+<style>
+  :global(.svelte-flow .svelte-flow__node.parent) {
+    background-color: rgba(220,220,255,0.4)
+  }
+</style>
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Handle, Position } from '../../../lib/index';
+
+  export let id: string;
+  export let xPos: number = 0;
+  export let yPos: number = 0;
+  export let zIndex: number = 0;
+</script>
+
+<Handle type="target" position={Position.Top} />
+<div>{id}</div>
+<div>
+  x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+</div>
+<Handle type="source" position={Position.Bottom} />
+
+
+<style>
+  .custom {
+    background: #ffcc00;
+    padding: 10px;
+  }
+</style>
@@ -0,0 +1 @@
+export { default as DebugNode } from './DebugNode.svelte';
				`@@ -0,0 +1 @@`
				`export { default as DebugNode } from './DebugNode.svelte';`