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
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -16,6 +16,7 @@
 		".": "./index.js"
 	},
 	"dependencies": {
+		"@reactflow/edge-utils": "workspace:*",
 		"@reactflow/system": "workspace:*",
 		"@reactflow/utils": "workspace:*",
 		"@svelte-put/shortcut": "^2.0.0",
--- a/packages/svelte/src/customnodes/Custom.svelte
+++ b/packages/svelte/src/customnodes/Custom.svelte
@@ -10,8 +10,8 @@
 <div class="custom">
  <div>{data.label}</div>
  <div>{~~xPos}, {~~yPos}</div>
-  <Handle type="target" position={Position.Left} />
-  <Handle type="source" position={Position.Right} />
+  <Handle type="target" position={Position.Top} />
+  <Handle type="source" position={Position.Bottom} />
 </div>

 <style>
--- a/packages/svelte/src/lib/components/edges/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BaseEdge.svelte
@@ -1,26 +1,44 @@
 <script lang="ts">
-  export let id: string = '1';
+	import type { SvelteComponentTyped } from 'svelte';
+	import { Position } from '@reactflow/system';
+
+	import { useStore } from '$lib/store';
+  import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
+	import type { EdgeProps } from '$lib/types';
+
+  export let id: string;
  export let type: string = 'default';
  export let sourceX: number = 0;
  export let sourceY: number = 0;
  export let targetX: number = 0;
  export let targetY: number = 0;
+  export let sourcePosition: Position = Position.Bottom;
+  export let targetPosition: Position = Position.Top;
+
+  const { edgeTypesStore } = useStore();
+  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypesStore[type] || BezierEdge;
 </script>

 <g
  class="react-flow__edge"
  data-id={id}
 >
-  <path
-    d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
-    fill="none"
-    class="react-flow__edge-path"
+  <svelte:component
+    this={edgeComponent}
+    {id}
+    {sourceX}
+    {sourceY}
+    {targetX}
+    {targetY}
+    {sourcePosition}
+    {targetPosition}
  />
 </g>

 <style>
-  .react-flow__edge-path {
+  .react-flow__edge :global(path) {
    stroke: #ccc;
    stroke-width: 1;
+    fill: none;
  }
 </style>
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getBezierPath } from '@reactflow/edge-utils';
+	import type { EdgeProps } from '$lib/types';
+
+  interface $$Props extends EdgeProps {}
+
+  export let id: $$Props['id'];
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+
+  $: [path] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+</script>
+
+<path
+  d={path}
+  class="react-flow__edge-path"
+/>
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@reactflow/edge-utils';
+	import type { EdgeProps } from '$lib/types';
+
+  interface $$Props extends EdgeProps {}
+
+  export let id: $$Props['id'];
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+
+  $: [path] = getSmoothStepPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+</script>
+
+<path
+  d={path}
+  class="react-flow__edge-path"
+/>
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getStraightPath } from '@reactflow/edge-utils';
+	import type { EdgeProps } from '$lib/types';
+
+  interface $$Props extends EdgeProps {}
+
+  export let id: $$Props['id'];
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+
+  $: [path] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+</script>
+
+<path
+  d={path}
+  class="react-flow__edge-path"
+/>
--- a/packages/svelte/src/lib/container/Pane/index.svelte
+++ b/packages/svelte/src/lib/container/Pane/index.svelte
@@ -1,14 +1,8 @@
-<script lang="ts">
-  import { useStore } from '$lib/store';
-	import { SelectionMode, type Node, type Edge } from '@reactflow/system';
-	import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
-
-  const { nodesStore, edgesStore, transformStore, nodeOriginStore, draggingStore, selectionRectStore, selectionRectModeStore, selectionKeyPressedStore, resetSelectedElements } = useStore();
-
-  const wrapHandler = (
+<script lang="ts" context="module">
+  export function wrapHandler(
    handler: (evt: MouseEvent) => void,
    container: HTMLDivElement
-  ):  (evt: MouseEvent) => void => {
+  ): (evt: MouseEvent) => void {
    return (event: MouseEvent) => {
      if (event.target !== container) {
        return;
@@ -18,6 +12,29 @@
    };
  };

+  export function toggleSelected<Item extends Node | Edge>(ids: string[]) {
+    return (item: Item) => {
+      const isSelected = ids.includes(item.id);
+
+      if (item.selected !== isSelected) {
+        return {
+          ...item,
+          selected: isSelected,
+        };
+      }
+
+      return item;
+    }
+  }
+</script>
+
+<script lang="ts">
+  import { useStore } from '$lib/store';
+	import { SelectionMode, type Node, type Edge } from '@reactflow/system';
+	import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
+
+  const { nodesStore, edgesStore, transformStore, nodeOriginStore, draggingStore, selectionRectStore, selectionRectModeStore, selectionKeyPressedStore, resetSelectedElements } = useStore();
+
  // @todo take from props
  const elementsSelectable = true;
  const selectionMode = SelectionMode.Partial
@@ -67,20 +84,7 @@
    // onSelectionStart?.(event);
  };

-  function toggleSelected<Item extends Node | Edge>(ids: string[]) {
-    return (item: Item) => {
-      const isSelected = ids.includes(item.id);

-      if (item.selected !== isSelected) {
-        return {
-          ...item,
-          selected: isSelected,
-        };
-      }
-
-      return item;
-    }
-  }

  function onMouseMove(event: MouseEvent) {
    if (!isSelecting || !containerBounds || !$selectionRectStore) {
--- a/packages/svelte/src/lib/container/Panel/index.svelte
+++ b/packages/svelte/src/lib/container/Panel/index.svelte
@@ -4,9 +4,9 @@

  export let position: PanelPosition = 'top-right';
  export let style: string = '';
-  export { className as class }

  let className: string;
+  export { className as class }

  $: positionClasses = `${position}`.split('-');
 </script>
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -27,7 +27,10 @@ import { SelectionMode } from 'reactflow';
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
-import type { NodeTypes } from '$lib/types';
+import type { EdgeTypes, NodeTypes } from '$lib/types';
+import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
+import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
+import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';

 export const key = Symbol();

@@ -38,6 +41,7 @@ type CreateStoreProps = {
 	nodeOrigin?: NodeOrigin;
 	transform?: Transform;
 	nodeTypes?: NodeTypes;
+	edgeTypes?: EdgeTypes;
 	id?: string;
 };

@@ -65,6 +69,7 @@ type SvelteFlowStore = {
 	selectionMode: Writable<SelectionMode>;
 	selectionKeyPressedStore: Writable<boolean>;
 	nodeTypesStore: Writable<NodeTypes>;
+	edgeTypesStore: Writable<EdgeTypes>;
 	zoomIn: (options?: ViewportHelperFunctionOptions) => void;
 	zoomOut: (options?: ViewportHelperFunctionOptions) => void;
 	fitView: (options?: ViewportHelperFunctionOptions) => boolean;
@@ -84,6 +89,7 @@ export function createStore({
 	nodeOrigin = [0, 0],
 	fitView: fitViewOnInit = false,
 	nodeTypes = {},
+	edgeTypes = {},
 	id = '1'
 }: CreateStoreProps): SvelteFlowStore {
 	const nodesStore = writable(nodes.map((n) => ({ ...n, positionAbsolute: n.position })));
@@ -108,6 +114,13 @@ export function createStore({
 		default: nodeTypes.default || DefaultNode
 	});

+	const edgeTypesStore = writable({
+		...edgeTypes,
+		straight: edgeTypes.straight || StraightEdge,
+		smoothstep: edgeTypes.smoothstep || SmoothStepEdge,
+		default: edgeTypes.default || BezierEdge
+	});
+
 	let fitViewOnInitDone = false;

 	const edgesWithDataStore = derived([edgesStore, nodesStore], ([$edges, $nodes]) => {
@@ -293,6 +306,7 @@ export function createStore({
 		selectionRectModeStore,
 		selectionMode,
 		nodeTypesStore,
+		edgeTypesStore,
 		updateNodePositions,
 		updateNodeDimensions,
 		zoomIn,
@@ -304,5 +318,6 @@ export function createStore({

 export function useStore(): SvelteFlowStore {
 	const { getStore } = getContext<{ getStore: () => SvelteFlowStore }>(key);
+
 	return getStore();
 }
--- a/packages/svelte/src/lib/types/index.ts
+++ b/packages/svelte/src/lib/types/index.ts
@@ -13,3 +13,15 @@ export type NodeProps<NodeData extends Record<string, unknown> = Record<string,
 };

 export type NodeTypes = Record<string, typeof SvelteComponentTyped<NodeProps>>;
+
+export type EdgeProps = {
+	id: string;
+	sourceX: number;
+	sourceY: number;
+	targetX: number;
+	targetY: number;
+	sourcePosition?: Position;
+	targetPosition?: Position;
+};
+
+export type EdgeTypes = Record<string, typeof SvelteComponentTyped<EdgeProps>>;
--- a/packages/svelte/src/routes/+page.svelte
+++ b/packages/svelte/src/routes/+page.svelte
@@ -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>
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -57,6 +57,6 @@
  },
  "rollup": {
    "globals": {},
-    "name": "ReactFlowCore"
+    "name": "ReactFlowSystem"
  }
 }
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -77,6 +77,8 @@ export type FitViewParams = {
  nodeOrigin: NodeOrigin;
  d3Zoom: D3ZoomInstance;
  d3Selection: D3SelectionInstance;
+  minZoom: number;
+  maxZoom: number;
 };

 export type FitViewOptions = {
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -59,6 +59,6 @@
  },
  "rollup": {
    "globals": {},
-    "name": "ReactFlowCore"
+    "name": "ReactFlowUtils"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -143,6 +143,7 @@ importers:

  packages/core:
    specifiers:
+      '@reactflow/edge-utils': workspace:^11.5.5
      '@reactflow/eslint-config': workspace:*
      '@reactflow/rollup-config': workspace:*
      '@reactflow/system': workspace:*
@@ -163,6 +164,7 @@ importers:
      typescript: ^4.9.4
      zustand: ^4.3.3
    dependencies:
+      '@reactflow/edge-utils': link:../edge-utils
      '@reactflow/system': link:../system
      '@reactflow/utils': link:../utils
      '@types/d3': registry.npmjs.org/@types/d3/7.4.0
@@ -310,6 +312,7 @@ importers:

  packages/svelte:
    specifiers:
+      '@reactflow/edge-utils': workspace:^11.5.5
      '@reactflow/system': workspace:*
      '@reactflow/utils': workspace:*
      '@svelte-put/shortcut': ^2.0.0
@@ -335,6 +338,7 @@ importers:
      typescript: ^4.9.3
      vite: ^4.1.1
    dependencies:
+      '@reactflow/edge-utils': link:../edge-utils
      '@reactflow/system': link:../system
      '@reactflow/utils': link:../utils
      '@svelte-put/shortcut': registry.npmjs.org/@svelte-put/shortcut/2.0.0