feat(svelte): edge types, use edge-utils

2023-02-22 10:38:32 +01:00
parent b3de45ce1a
commit a0bdd9574e
15 changed files with 219 additions and 82 deletions
@@ -4,64 +4,84 @@
  import SvelteFlow, { Controls, Background, BackgroundVariant, Minimap } from '../lib/index';
  import CustomNode from '../customnodes/Custom.svelte';

-  const yNodes = 10;
-  const xNodes = 10;
-
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-
  const nodeTypes = {
    custom: CustomNode,
  };

-  let source = null;
+  // const yNodes = 10;
+  // const xNodes = 10;

-  for (let y = 0; y < yNodes; y++) {
-    for (let x = 0; x < xNodes; x++) {
-      const position = { x: x * 100, y: y * 50 };
-      const id = `${x}-${y}`;
-      const data = { label: `Node ${id}` };
-      const node = {
-        id,
-        data,
-        position,
-        type: x === 0 ? 'custom' : 'default',
-      };
-      nodes.push(node);
+  // const nodes: Node[] = [];
+  // const edges: Edge[] = [];

-      if (source) {
-        const edge = {
-          id: `${source.id}-${id}`,
-          source: source.id,
-          target: id,
-        };
-        edges.push(edge);
-      }

-      source = node;

-      
-    }
-  }
+  // let source = null;

-  // const nodes = [{
-  //   id: '1',
-  //   type: 'input',
-  //   data: { label: 'Input Node' },
-  //   position: { x: 250, y: 5 }
-  //  }, {
-  //    id: '2',
-  //    type: 'input',
-  //    data: { label: 'Input Node 2' },
-  //    position: { x: 150, y: 250 },
-  //  }]
+  // for (let y = 0; y < yNodes; y++) {
+  //   for (let x = 0; x < xNodes; x++) {
+  //     const position = { x: x * 100, y: y * 50 };
+  //     const id = `${x}-${y}`;
+  //     const data = { label: `Node ${id}` };
+  //     const node = {
+  //       id,
+  //       data,
+  //       position,
+  //       type: x === 0 ? 'custom' : 'default',
+  //     };
+  //     nodes.push(node);

-  //  const edges = [{
-  //   id: '1-2',
-  //   type: 'default',
-  //   source: '1',
-  //   target: '2'
-  //  }]
+  //     if (source) {
+  //       const edge = {
+  //         id: `${source.id}-${id}`,
+  //         source: source.id,
+  //         target: id,
+  //       };
+  //       edges.push(edge);
+  //     }
+
+  //     source = node;
+  //   }
+  // }
+
+  const nodes: Node[] = [{
+    id: '1',
+    type: 'input',
+    data: { label: 'Input Node' },
+    position: { x: 150, y: 5 }
+   }, {
+    id: '2',
+    type: 'default',
+    data: { label: 'Node' },
+    position: { x: 0, y: 150 },
+  }, {
+    id: '3',
+    type: 'output',
+    data: { label: 'Output Node' },
+    position: { x: 300, y: 150 },
+  }, {
+    id: '4',
+    type: 'custom',
+    data: { label: 'Custom Node' },
+    position: { x: 150, y: 300 },
+  }];
+
+  const edges: Edge[] = [{
+    id: '1-2',
+    type: 'default',
+    source: '1',
+    target: '2'
+  }, {
+    id: '1-3',
+    type: 'smoothstep',
+    source: '1',
+    target: '3'
+  }, {
+    id: '2-4',
+    type: 'default',
+    source: '2',
+    target: '4'
+  }];
 </script>

 <SvelteFlow {nodes} {edges} {nodeTypes} fitView>