@@ -46,4 +43,4 @@
left: 50%;
transform: translateX(-50%);
}
-
\ No newline at end of file
+
diff --git a/packages/svelte/src/lib/container/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow.svelte
index d91d8181..42157767 100644
--- a/packages/svelte/src/lib/container/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow.svelte
@@ -1,8 +1,8 @@
@@ -22,4 +22,4 @@
z-index: 2;
pointer-events: none;
}
-
\ No newline at end of file
+
diff --git a/packages/svelte/src/lib/container/Zoom/index.svelte b/packages/svelte/src/lib/container/Zoom/index.svelte
index 51c7bbfd..4097d51f 100644
--- a/packages/svelte/src/lib/container/Zoom/index.svelte
+++ b/packages/svelte/src/lib/container/Zoom/index.svelte
@@ -20,4 +20,4 @@
left: 0;
z-index: 4;
}
-
\ No newline at end of file
+
diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index 75526092..c30b958f 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -4,7 +4,7 @@
import DotPattern from './DotPattern.svelte';
import LinePattern from './LinePattern.svelte';
import { useStore } from '$lib/store';
- import { BackgroundVariant } from './types';
+ import { BackgroundVariant } from './types';
export let variant: BackgroundVariant = BackgroundVariant.Dots;
export let gap = 20;
@@ -18,13 +18,13 @@
const defaultColor = {
[BackgroundVariant.Dots]: '#91919a',
[BackgroundVariant.Lines]: '#eee',
- [BackgroundVariant.Cross]: '#e2e2e2',
+ [BackgroundVariant.Cross]: '#e2e2e2'
};
const defaultSize = {
[BackgroundVariant.Dots]: 1,
[BackgroundVariant.Lines]: 1,
- [BackgroundVariant.Cross]: 6,
+ [BackgroundVariant.Cross]: 6
};
const { transform, id } = useStore();
@@ -43,7 +43,7 @@
: [patternDimensions[0] / 2, patternDimensions[1] / 2];
-
diff --git a/packages/svelte/src/lib/plugins/Controls/Icons/Minus.svelte b/packages/svelte/src/lib/plugins/Controls/Icons/Minus.svelte
index dc8d310b..b2f109bb 100644
--- a/packages/svelte/src/lib/plugins/Controls/Icons/Minus.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Icons/Minus.svelte
@@ -1,3 +1,3 @@
\ No newline at end of file
+
diff --git a/packages/svelte/src/lib/plugins/Controls/Icons/Plus.svelte b/packages/svelte/src/lib/plugins/Controls/Icons/Plus.svelte
index a13adbd7..feb813da 100644
--- a/packages/svelte/src/lib/plugins/Controls/Icons/Plus.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Icons/Plus.svelte
@@ -1,3 +1,3 @@
\ No newline at end of file
+
diff --git a/packages/svelte/src/lib/plugins/Controls/Icons/Unlock.svelte b/packages/svelte/src/lib/plugins/Controls/Icons/Unlock.svelte
index 2e59dbd7..82866851 100644
--- a/packages/svelte/src/lib/plugins/Controls/Icons/Unlock.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Icons/Unlock.svelte
@@ -1,3 +1,5 @@
\ No newline at end of file
+
+
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index 1d6f3348..cf24f1d2 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -1,10 +1,10 @@
-
+
-
\ No newline at end of file
+
diff --git a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
index 5d549332..079ef22a 100644
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -20,14 +20,14 @@
\ No newline at end of file
+/>
diff --git a/packages/svelte/src/lib/store/connection-path.ts b/packages/svelte/src/lib/store/connection-path.ts
index 9b2805fa..bd3b420d 100644
--- a/packages/svelte/src/lib/store/connection-path.ts
+++ b/packages/svelte/src/lib/store/connection-path.ts
@@ -5,72 +5,72 @@ import type { SvelteFlowStoreState } from './types';
import { derived } from 'svelte/store';
const oppositePosition = {
- [Position.Left]: Position.Right,
- [Position.Right]: Position.Left,
- [Position.Top]: Position.Bottom,
- [Position.Bottom]: Position.Top
+ [Position.Left]: Position.Right,
+ [Position.Right]: Position.Left,
+ [Position.Top]: Position.Bottom,
+ [Position.Bottom]: Position.Top
};
export function getConnectionPath(store: SvelteFlowStoreState) {
- return derived(
- [
- store.connection,
- store.connectionLineType,
- store.connectionMode,
- store.nodes,
- store.transform
- ],
- ([$connection, $connectionLineType, $connectionMode, $nodes, $transform]) => {
- if (!$connection.nodeId) {
- return null;
- }
+ return derived(
+ [
+ store.connection,
+ store.connectionLineType,
+ store.connectionMode,
+ store.nodes,
+ store.transform
+ ],
+ ([$connection, $connectionLineType, $connectionMode, $nodes, $transform]) => {
+ if (!$connection.nodeId) {
+ return null;
+ }
- const fromNode = $nodes.find((n) => n.id === $connection.nodeId);
- const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
- const handleBoundsStrict = fromHandleBounds?.[$connection.handleType || 'source'] || [];
- const handleBoundsLoose = handleBoundsStrict
- ? handleBoundsStrict
- : fromHandleBounds?.[$connection.handleType === 'source' ? 'target' : 'source']!;
- const handleBounds =
- $connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
- const fromHandle = $connection.handleId
- ? handleBounds.find((d) => d.id === $connection.handleId)
- : handleBounds[0];
- const fromHandleX = fromHandle
- ? fromHandle.x + fromHandle.width / 2
- : (fromNode?.width ?? 0) / 2;
- const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
- const fromX = (fromNode?.positionAbsolute?.x ?? 0) + fromHandleX;
- const fromY = (fromNode?.positionAbsolute?.y ?? 0) + fromHandleY;
- const fromPosition = fromHandle?.position;
- const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
+ const fromNode = $nodes.find((n) => n.id === $connection.nodeId);
+ const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+ const handleBoundsStrict = fromHandleBounds?.[$connection.handleType || 'source'] || [];
+ const handleBoundsLoose = handleBoundsStrict
+ ? handleBoundsStrict
+ : fromHandleBounds?.[$connection.handleType === 'source' ? 'target' : 'source']!;
+ const handleBounds =
+ $connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose;
+ const fromHandle = $connection.handleId
+ ? handleBounds.find((d) => d.id === $connection.handleId)
+ : handleBounds[0];
+ const fromHandleX = fromHandle
+ ? fromHandle.x + fromHandle.width / 2
+ : (fromNode?.width ?? 0) / 2;
+ const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
+ const fromX = (fromNode?.positionAbsolute?.x ?? 0) + fromHandleX;
+ const fromY = (fromNode?.positionAbsolute?.y ?? 0) + fromHandleY;
+ const fromPosition = fromHandle?.position;
+ const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
- const pathParams = {
- sourceX: fromX,
- sourceY: fromY,
- sourcePosition: fromPosition,
- targetX: (($connection.position?.x ?? 0) - $transform[0]) / $transform[2],
- targetY: (($connection.position?.y ?? 0) - $transform[1]) / $transform[2],
- targetPosition: toPosition
- };
+ const pathParams = {
+ sourceX: fromX,
+ sourceY: fromY,
+ sourcePosition: fromPosition,
+ targetX: (($connection.position?.x ?? 0) - $transform[0]) / $transform[2],
+ targetY: (($connection.position?.y ?? 0) - $transform[1]) / $transform[2],
+ targetPosition: toPosition
+ };
- let path = '';
+ let path = '';
- if ($connectionLineType === ConnectionLineType.Bezier) {
- // we assume the destination position is opposite to the source position
- [path] = getBezierPath(pathParams);
- } else if ($connectionLineType === ConnectionLineType.Step) {
- [path] = getSmoothStepPath({
- ...pathParams,
- borderRadius: 0
- });
- } else if ($connectionLineType === ConnectionLineType.SmoothStep) {
- [path] = getSmoothStepPath(pathParams);
- } else {
- [path] = getStraightPath(pathParams);
- }
+ if ($connectionLineType === ConnectionLineType.Bezier) {
+ // we assume the destination position is opposite to the source position
+ [path] = getBezierPath(pathParams);
+ } else if ($connectionLineType === ConnectionLineType.Step) {
+ [path] = getSmoothStepPath({
+ ...pathParams,
+ borderRadius: 0
+ });
+ } else if ($connectionLineType === ConnectionLineType.SmoothStep) {
+ [path] = getSmoothStepPath(pathParams);
+ } else {
+ [path] = getStraightPath(pathParams);
+ }
- return path;
- }
- );
+ return path;
+ }
+ );
}
diff --git a/packages/svelte/src/lib/store/edges-layouted.ts b/packages/svelte/src/lib/store/edges-layouted.ts
index b1acfd53..b5825e99 100644
--- a/packages/svelte/src/lib/store/edges-layouted.ts
+++ b/packages/svelte/src/lib/store/edges-layouted.ts
@@ -6,56 +6,56 @@ import type { WrapEdgeProps } from '$lib/types';
import type { SvelteFlowStoreState } from './types';
export function getEdgesLayouted(store: SvelteFlowStoreState) {
- return derived([store.edges, store.nodes], ([$edges, $nodes]) => {
- return $edges
- .map((edge) => {
- const sourceNode = $nodes.find((node) => node.id === edge.source);
- const targetNode = $nodes.find((node) => node.id === edge.target);
- const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
- const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
+ return derived([store.edges, store.nodes], ([$edges, $nodes]) => {
+ return $edges
+ .map((edge) => {
+ const sourceNode = $nodes.find((node) => node.id === edge.source);
+ const targetNode = $nodes.find((node) => node.id === edge.target);
+ const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
+ const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
- if (!sourceIsValid || !targetIsValid) {
- return null;
- }
+ if (!sourceIsValid || !targetIsValid) {
+ return null;
+ }
- const edgeType = edge.type || 'default';
+ const edgeType = edge.type || 'default';
- const targetNodeHandles = targetHandleBounds!.target;
- const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle);
- const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle);
- const sourcePosition = sourceHandle?.position || Position.Bottom;
- const targetPosition = targetHandle?.position || Position.Top;
+ const targetNodeHandles = targetHandleBounds!.target;
+ const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle);
+ const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle);
+ const sourcePosition = sourceHandle?.position || Position.Bottom;
+ const targetPosition = targetHandle?.position || Position.Top;
- if (!sourceHandle || !targetHandle) {
- return null;
- }
+ if (!sourceHandle || !targetHandle) {
+ return null;
+ }
- const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
- sourceNodeRect,
- sourceHandle,
- sourcePosition,
- targetNodeRect,
- targetHandle,
- targetPosition
- );
+ const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
+ sourceNodeRect,
+ sourceHandle,
+ sourcePosition,
+ targetNodeRect,
+ targetHandle,
+ targetPosition
+ );
- // we nee to do this to match the types
- const sourceHandleId = edge.sourceHandle;
- const targetHandleId = edge.targetHandle;
+ // we nee to do this to match the types
+ const sourceHandleId = edge.sourceHandle;
+ const targetHandleId = edge.targetHandle;
- return {
- ...edge,
- type: edgeType,
- sourceX,
- sourceY,
- targetX,
- targetY,
- sourcePosition,
- targetPosition,
- sourceHandleId,
- targetHandleId
- };
- })
- .filter((e) => e !== null) as WrapEdgeProps[];
- });
+ return {
+ ...edge,
+ type: edgeType,
+ sourceX,
+ sourceY,
+ targetX,
+ targetY,
+ sourcePosition,
+ targetPosition,
+ sourceHandleId,
+ targetHandleId
+ };
+ })
+ .filter((e) => e !== null) as WrapEdgeProps[];
+ });
}
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 63da6104..5039627c 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -1,23 +1,23 @@
import { getContext } from 'svelte';
import { get } from 'svelte/store';
import {
- type Transform,
- type NodeDragItem,
- type NodeDimensionUpdate,
- internalsSymbol,
- type NodeOrigin,
- type ViewportHelperFunctionOptions,
- type Node as RFNode,
- type Connection,
- type XYPosition,
- type CoordinateExtent
+ type Transform,
+ type NodeDragItem,
+ type NodeDimensionUpdate,
+ internalsSymbol,
+ type NodeOrigin,
+ type ViewportHelperFunctionOptions,
+ type Node as RFNode,
+ type Connection,
+ type XYPosition,
+ type CoordinateExtent
} from '@reactflow/system';
import {
- fitView as fitViewUtil,
- getConnectedEdges,
- getD3Transition,
- getDimensions,
- addEdge as addEdgeUtil
+ fitView as fitViewUtil,
+ getConnectedEdges,
+ getD3Transition,
+ getDimensions,
+ addEdge as addEdgeUtil
} from '@reactflow/utils';
import { zoomIdentity } from 'd3-zoom';
@@ -32,307 +32,307 @@ import type { SvelteFlowStore } from './types';
export const key = Symbol();
type CreateStoreProps = {
- fitView?: boolean;
- nodeOrigin?: NodeOrigin;
- transform?: Transform;
- nodeTypes?: NodeTypes;
- edgeTypes?: EdgeTypes;
- id?: string;
+ fitView?: boolean;
+ nodeOrigin?: NodeOrigin;
+ transform?: Transform;
+ nodeTypes?: NodeTypes;
+ edgeTypes?: EdgeTypes;
+ id?: string;
};
export function createStore({
- transform = [0, 0, 1],
- nodeOrigin = [0, 0],
- fitView: fitViewOnInit = false,
- nodeTypes = {},
- edgeTypes = {},
- id = '1'
+ transform = [0, 0, 1],
+ nodeOrigin = [0, 0],
+ fitView: fitViewOnInit = false,
+ nodeTypes = {},
+ edgeTypes = {},
+ id = '1'
}: CreateStoreProps): SvelteFlowStore {
- const store = {
- ...initialStoreState
- };
+ const store = {
+ ...initialStoreState
+ };
- let fitViewOnInitDone = false;
+ let fitViewOnInitDone = false;
- function setEdges(edges: Edge[]) {
- store.edges.set(edges);
- }
+ function setEdges(edges: Edge[]) {
+ store.edges.set(edges);
+ }
- function addEdge(edgeParams: Edge | Connection) {
- const edges = get(store.edges);
- store.edges.set(addEdgeUtil(edgeParams, edges));
- }
+ function addEdge(edgeParams: Edge | Connection) {
+ const edges = get(store.edges);
+ store.edges.set(addEdgeUtil(edgeParams, edges));
+ }
- function setNodes(nodes: Node[]) {
- store.nodes.update((currentNodes) => {
- const nextNodes = nodes.map((n) => {
- const currentNode = currentNodes.find((cn) => cn.id === n.id) || {};
+ function setNodes(nodes: Node[]) {
+ store.nodes.update((currentNodes) => {
+ const nextNodes = nodes.map((n) => {
+ const currentNode = currentNodes.find((cn) => cn.id === n.id) || {};
- return {
- ...currentNode,
- ...n,
- positionAbsolute: n.position
- };
- });
+ return {
+ ...currentNode,
+ ...n,
+ positionAbsolute: n.position
+ };
+ });
- return nextNodes;
- });
- }
+ return nextNodes;
+ });
+ }
- function updateNodePositions(nodeDragItems: NodeDragItem[], dragging = false) {
- store.nodes.update((nds) => {
- return nds.map((n) => {
- const nodeDragItem = nodeDragItems.find((ndi) => ndi.id === n.id);
+ function updateNodePositions(nodeDragItems: NodeDragItem[], dragging = false) {
+ store.nodes.update((nds) => {
+ return nds.map((n) => {
+ const nodeDragItem = nodeDragItems.find((ndi) => ndi.id === n.id);
- if (nodeDragItem) {
- return {
- ...n,
- dragging,
- positionAbsolute: nodeDragItem.positionAbsolute,
- position: nodeDragItem.position
- };
- }
+ if (nodeDragItem) {
+ return {
+ ...n,
+ dragging,
+ positionAbsolute: nodeDragItem.positionAbsolute,
+ position: nodeDragItem.position
+ };
+ }
- return n;
- });
- });
- }
+ return n;
+ });
+ });
+ }
- function updateNodeDimensions(updates: NodeDimensionUpdate[]) {
- const viewportNode = document?.querySelector('.react-flow__viewport');
+ function updateNodeDimensions(updates: NodeDimensionUpdate[]) {
+ const viewportNode = document?.querySelector('.react-flow__viewport');
- if (!viewportNode) {
- return;
- }
+ if (!viewportNode) {
+ return;
+ }
- const style = window.getComputedStyle(viewportNode);
- const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+ const style = window.getComputedStyle(viewportNode);
+ const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
- const nextNodes = get(store.nodes).map((node) => {
- const update = updates.find((u) => u.id === node.id);
+ const nextNodes = get(store.nodes).map((node) => {
+ const update = updates.find((u) => u.id === node.id);
- if (update) {
- const dimensions = getDimensions(update.nodeElement);
+ if (update) {
+ const dimensions = getDimensions(update.nodeElement);
- const doUpdate = !!(
- dimensions.width &&
- dimensions.height &&
- (node.width !== dimensions.width ||
- node.height !== dimensions.height ||
- update.forceUpdate)
- );
+ const doUpdate = !!(
+ dimensions.width &&
+ dimensions.height &&
+ (node.width !== dimensions.width ||
+ node.height !== dimensions.height ||
+ update.forceUpdate)
+ );
- if (doUpdate) {
- node[internalsSymbol] = {
- ...node[internalsSymbol],
- handleBounds: {
- source: getHandleBounds('.source', update.nodeElement, zoom),
- target: getHandleBounds('.target', update.nodeElement, zoom)
- }
- };
- node.width = dimensions.width;
- node.height = dimensions.height;
- }
- }
+ if (doUpdate) {
+ node[internalsSymbol] = {
+ ...node[internalsSymbol],
+ handleBounds: {
+ source: getHandleBounds('.source', update.nodeElement, zoom),
+ target: getHandleBounds('.target', update.nodeElement, zoom)
+ }
+ };
+ node.width = dimensions.width;
+ node.height = dimensions.height;
+ }
+ }
- return node;
- });
+ return node;
+ });
- const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
+ const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
- fitViewOnInitDone =
- fitViewOnInitDone || (fitViewOnInit && !!d3Zoom && !!d3Selection && fitView());
+ fitViewOnInitDone =
+ fitViewOnInitDone || (fitViewOnInit && !!d3Zoom && !!d3Selection && fitView());
- store.nodes.set(nextNodes);
- }
+ store.nodes.set(nextNodes);
+ }
- function zoomIn(options?: ViewportHelperFunctionOptions) {
- const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
+ function zoomIn(options?: ViewportHelperFunctionOptions) {
+ const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
- if (d3Zoom && d3Selection) {
- d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1.2);
- }
- }
+ if (d3Zoom && d3Selection) {
+ d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1.2);
+ }
+ }
- function zoomOut(options?: ViewportHelperFunctionOptions) {
- const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
- if (d3Zoom && d3Selection) {
- d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1 / 1.2);
- }
- }
+ function zoomOut(options?: ViewportHelperFunctionOptions) {
+ const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
+ if (d3Zoom && d3Selection) {
+ d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1 / 1.2);
+ }
+ }
- function fitView() {
- const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
+ function fitView() {
+ const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
- if (!d3Zoom || !d3Selection) {
- return false;
- }
+ if (!d3Zoom || !d3Selection) {
+ return false;
+ }
- return fitViewUtil(
- {
- nodes: get(store.nodes) as RFNode[],
- width: get(store.width),
- height: get(store.height),
- minZoom: 0.2,
- maxZoom: 2,
- d3Selection,
- d3Zoom,
- nodeOrigin: get(store.nodeOrigin)
- },
- {}
- );
- }
+ return fitViewUtil(
+ {
+ nodes: get(store.nodes) as RFNode[],
+ width: get(store.width),
+ height: get(store.height),
+ minZoom: 0.2,
+ maxZoom: 2,
+ d3Selection,
+ d3Zoom,
+ nodeOrigin: get(store.nodeOrigin)
+ },
+ {}
+ );
+ }
- function resetSelectedItem
(item: T) {
- if (item.selected) {
- return {
- ...item,
- selected: false
- };
- }
+ function resetSelectedItem(item: T) {
+ if (item.selected) {
+ return {
+ ...item,
+ selected: false
+ };
+ }
- return item;
- }
+ return item;
+ }
- function resetSelectedElements() {
- store.nodes.update((ns) => ns.map(resetSelectedItem));
- store.edges.update((es) => es.map(resetSelectedItem));
- }
+ function resetSelectedElements() {
+ store.nodes.update((ns) => ns.map(resetSelectedItem));
+ store.edges.update((es) => es.map(resetSelectedItem));
+ }
- store.deleteKeyPressed.subscribe((deleteKeyPressed) => {
- if (deleteKeyPressed) {
- const nodes = get(store.nodes);
- const edges = get(store.edges);
- const selectedNodes = nodes.filter((node) => node.selected);
- const selectedEdges = edges.filter((edge) => edge.selected);
+ store.deleteKeyPressed.subscribe((deleteKeyPressed) => {
+ if (deleteKeyPressed) {
+ const nodes = get(store.nodes);
+ const edges = get(store.edges);
+ const selectedNodes = nodes.filter((node) => node.selected);
+ const selectedEdges = edges.filter((edge) => edge.selected);
- // @todo can we put this stuff into @reactflow/utils?
- const nodeIds = selectedNodes.map((node) => node.id);
- const edgeIds = selectedEdges.map((edge) => edge.id);
- const nodesToRemove = nodes.reduce((res, node) => {
- const parentHit =
- !nodeIds.includes(node.id) &&
- node.parentNode &&
- res.find((n) => n.id === node.parentNode);
- const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
- if (deletable && (nodeIds.includes(node.id) || parentHit)) {
- res.push(node);
- }
+ // @todo can we put this stuff into @reactflow/utils?
+ const nodeIds = selectedNodes.map((node) => node.id);
+ const edgeIds = selectedEdges.map((edge) => edge.id);
+ const nodesToRemove = nodes.reduce((res, node) => {
+ const parentHit =
+ !nodeIds.includes(node.id) &&
+ node.parentNode &&
+ res.find((n) => n.id === node.parentNode);
+ const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
+ if (deletable && (nodeIds.includes(node.id) || parentHit)) {
+ res.push(node);
+ }
- return res;
- }, []);
- const deletableEdges = edges.filter((e) =>
- typeof e.deletable === 'boolean' ? e.deletable : true
- );
- const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
+ return res;
+ }, []);
+ const deletableEdges = edges.filter((e) =>
+ typeof e.deletable === 'boolean' ? e.deletable : true
+ );
+ const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
- if (nodesToRemove || initialHitEdges) {
- const connectedEdges = getConnectedEdges(nodesToRemove as RFNode[], deletableEdges);
- const edgesToRemove = [...initialHitEdges, ...connectedEdges];
- const edgeIdsToRemove = edgesToRemove.reduce((res, edge) => {
- if (!res.includes(edge.id)) {
- res.push(edge.id);
- }
- return res;
- }, []);
+ if (nodesToRemove || initialHitEdges) {
+ const connectedEdges = getConnectedEdges(nodesToRemove as RFNode[], deletableEdges);
+ const edgesToRemove = [...initialHitEdges, ...connectedEdges];
+ const edgeIdsToRemove = edgesToRemove.reduce((res, edge) => {
+ if (!res.includes(edge.id)) {
+ res.push(edge.id);
+ }
+ return res;
+ }, []);
- store.nodes.update((nds) => nds.filter((node) => !nodeIds.includes(node.id)));
- store.edges.update((eds) => eds.filter((edge) => !edgeIdsToRemove.includes(edge.id)));
- }
- }
- });
+ store.nodes.update((nds) => nds.filter((node) => !nodeIds.includes(node.id)));
+ store.edges.update((eds) => eds.filter((edge) => !edgeIdsToRemove.includes(edge.id)));
+ }
+ }
+ });
- function addSelectedNodes(ids: string[]) {
- store.selectionRect.set(null);
- store.selectionRectMode.set(null);
+ function addSelectedNodes(ids: string[]) {
+ store.selectionRect.set(null);
+ store.selectionRectMode.set(null);
- if (get(store.multiselectionKeyPressed)) {
- // @todo handle multiselection key
- }
+ if (get(store.multiselectionKeyPressed)) {
+ // @todo handle multiselection key
+ }
- store.nodes.update((ns) =>
- ns.map((node) => {
- return {
- ...node,
- selected: ids.includes(node.id)
- };
- })
- );
- }
+ store.nodes.update((ns) =>
+ ns.map((node) => {
+ return {
+ ...node,
+ selected: ids.includes(node.id)
+ };
+ })
+ );
+ }
- function panBy(delta: XYPosition) {
- const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
- const transform = get(store.transform);
- const width = get(store.width);
- const height = get(store.height);
+ function panBy(delta: XYPosition) {
+ const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
+ const transform = get(store.transform);
+ const width = get(store.width);
+ const height = get(store.height);
- if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
- return;
- }
+ if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
+ return;
+ }
- const nextTransform = zoomIdentity
- .translate(transform[0] + delta.x, transform[1] + delta.y)
- .scale(transform[2]);
+ const nextTransform = zoomIdentity
+ .translate(transform[0] + delta.x, transform[1] + delta.y)
+ .scale(transform[2]);
- const extent: CoordinateExtent = [
- [0, 0],
- [width, height]
- ];
+ const extent: CoordinateExtent = [
+ [0, 0],
+ [width, height]
+ ];
- const constrainedTransform = d3Zoom?.constrain()(nextTransform, extent, [
- [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
- [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
- ]);
- d3Zoom.transform(d3Selection, constrainedTransform);
- }
+ const constrainedTransform = d3Zoom?.constrain()(nextTransform, extent, [
+ [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+ [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
+ ]);
+ d3Zoom.transform(d3Selection, constrainedTransform);
+ }
- function updateConnection(connectionUpdate: Partial | null) {
- const currentConnectionData = get(store.connection);
- const nextConnectionData = currentConnectionData
- ? {
- ...initConnectionData,
- ...currentConnectionData,
- ...connectionUpdate
- }
- : {
- ...initConnectionData,
- ...connectionUpdate
- };
+ function updateConnection(connectionUpdate: Partial | null) {
+ const currentConnectionData = get(store.connection);
+ const nextConnectionData = currentConnectionData
+ ? {
+ ...initConnectionData,
+ ...currentConnectionData,
+ ...connectionUpdate
+ }
+ : {
+ ...initConnectionData,
+ ...connectionUpdate
+ };
- store.connection.set(nextConnectionData);
- }
+ store.connection.set(nextConnectionData);
+ }
- function cancelConnection() {
- updateConnection(initConnectionData);
- }
+ function cancelConnection() {
+ updateConnection(initConnectionData);
+ }
- return {
- // state
- ...store,
+ return {
+ // state
+ ...store,
- // derived state
- edgesLayouted: getEdgesLayouted(store),
- connectionPath: getConnectionPath(store),
+ // derived state
+ edgesLayouted: getEdgesLayouted(store),
+ connectionPath: getConnectionPath(store),
- // actions
- setNodes,
- setEdges,
- addEdge,
- updateNodePositions,
- updateNodeDimensions,
- zoomIn,
- zoomOut,
- fitView,
- resetSelectedElements,
- addSelectedNodes,
- panBy,
- updateConnection,
- cancelConnection
- };
+ // actions
+ setNodes,
+ setEdges,
+ addEdge,
+ updateNodePositions,
+ updateNodeDimensions,
+ zoomIn,
+ zoomOut,
+ fitView,
+ resetSelectedElements,
+ addSelectedNodes,
+ panBy,
+ updateConnection,
+ cancelConnection
+ };
}
export function useStore(): SvelteFlowStore {
- const { getStore } = getContext<{ getStore: () => SvelteFlowStore }>(key);
+ const { getStore } = getContext<{ getStore: () => SvelteFlowStore }>(key);
- return getStore();
+ return getStore();
}
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index 43221c0b..80f74ffc 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -1,13 +1,13 @@
import { readable, writable } from 'svelte/store';
import {
- SelectionMode,
- type D3ZoomInstance,
- type D3SelectionInstance,
- ConnectionMode,
- ConnectionLineType,
- type Transform,
- type NodeOrigin,
- type Rect
+ SelectionMode,
+ type D3ZoomInstance,
+ type D3SelectionInstance,
+ ConnectionMode,
+ ConnectionLineType,
+ type Transform,
+ type NodeOrigin,
+ type Rect
} from '@reactflow/system';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -19,47 +19,47 @@ import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
export const initConnectionData = {
- nodeId: null,
- handleId: null,
- handleType: null,
- position: null,
- status: null
+ nodeId: null,
+ handleId: null,
+ handleType: null,
+ position: null,
+ status: null
};
export const initialStoreState = {
- nodes: writable([]),
- edges: writable([]),
- edgesLayouted: readable([]),
- height: writable(500),
- width: writable(500),
- nodeOrigin: writable([0.5, 0.5]),
- d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
- zoom: null,
- selection: null
- }),
- id: writable(null),
- dragging: writable(false),
- selectionRect: writable<(Rect & { startX: number; startY: number }) | null>(null),
- selectionKeyPressed: writable(false),
- multiselectionKeyPressed: writable(false),
- deleteKeyPressed: writable(false),
- selectionRectMode: writable(null),
- selectionMode: writable(SelectionMode.Partial),
- nodeTypes: writable({
- input: InputNode,
- output: OutputNode,
- default: DefaultNode
- }),
- edgeTypes: writable({
- straight: StraightEdge,
- smoothstep: SmoothStepEdge,
- default: BezierEdge
- }),
- transform: writable([0, 0, 1]),
- connectionMode: writable(ConnectionMode.Strict),
- domNode: writable(null),
- connectionPath: readable(null),
- connection: writable(initConnectionData),
- connectionRadius: writable(25),
- connectionLineType: writable(ConnectionLineType.Bezier)
+ nodes: writable([]),
+ edges: writable([]),
+ edgesLayouted: readable([]),
+ height: writable(500),
+ width: writable(500),
+ nodeOrigin: writable([0.5, 0.5]),
+ d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
+ zoom: null,
+ selection: null
+ }),
+ id: writable(null),
+ dragging: writable(false),
+ selectionRect: writable<(Rect & { startX: number; startY: number }) | null>(null),
+ selectionKeyPressed: writable(false),
+ multiselectionKeyPressed: writable(false),
+ deleteKeyPressed: writable(false),
+ selectionRectMode: writable(null),
+ selectionMode: writable(SelectionMode.Partial),
+ nodeTypes: writable({
+ input: InputNode,
+ output: OutputNode,
+ default: DefaultNode
+ }),
+ edgeTypes: writable({
+ straight: StraightEdge,
+ smoothstep: SmoothStepEdge,
+ default: BezierEdge
+ }),
+ transform: writable([0, 0, 1]),
+ connectionMode: writable(ConnectionMode.Strict),
+ domNode: writable(null),
+ connectionPath: readable(null),
+ connection: writable(initConnectionData),
+ connectionRadius: writable(25),
+ connectionLineType: writable(ConnectionLineType.Bezier)
};
diff --git a/packages/svelte/src/lib/store/types.d.ts b/packages/svelte/src/lib/store/types.d.ts
index d9f32e4d..c7c3a4c4 100644
--- a/packages/svelte/src/lib/store/types.d.ts
+++ b/packages/svelte/src/lib/store/types.d.ts
@@ -1,32 +1,32 @@
import type {
- NodeDimensionUpdate,
- XYPosition,
- ViewportHelperFunctionOptions,
- Connection,
- NodeDragItem
+ NodeDimensionUpdate,
+ XYPosition,
+ ViewportHelperFunctionOptions,
+ Connection,
+ NodeDragItem
} from '@reactflow/system';
import { initialStoreState } from './initial-store';
import type { Node, Edge, ConnectionData } from '$lib/types';
export type SvelteFlowStoreActions = {
- setNodes: (nodes: Node[]) => void;
- setEdges: (edges: Edge[]) => void;
- addEdge: (edge: Edge | Connection) => void;
- zoomIn: (options?: ViewportHelperFunctionOptions) => void;
- zoomOut: (options?: ViewportHelperFunctionOptions) => void;
- fitView: (options?: ViewportHelperFunctionOptions) => boolean;
- updateNodePositions: (
- nodeDragItems: NodeDragItem[],
- positionChanged?: boolean,
- dragging?: boolean
- ) => void;
- updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
- resetSelectedElements: () => void;
- addSelectedNodes: (ids: string[]) => void;
- panBy: (delta: XYPosition) => void;
- updateConnection: (connection: Partial) => void;
- cancelConnection: () => void;
+ setNodes: (nodes: Node[]) => void;
+ setEdges: (edges: Edge[]) => void;
+ addEdge: (edge: Edge | Connection) => void;
+ zoomIn: (options?: ViewportHelperFunctionOptions) => void;
+ zoomOut: (options?: ViewportHelperFunctionOptions) => void;
+ fitView: (options?: ViewportHelperFunctionOptions) => boolean;
+ updateNodePositions: (
+ nodeDragItems: NodeDragItem[],
+ positionChanged?: boolean,
+ dragging?: boolean
+ ) => void;
+ updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
+ resetSelectedElements: () => void;
+ addSelectedNodes: (ids: string[]) => void;
+ panBy: (delta: XYPosition) => void;
+ updateConnection: (connection: Partial) => void;
+ cancelConnection: () => void;
};
export type SvelteFlowStoreState = typeof initialStoreState;
diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts
index 81f32c0a..b759fd89 100644
--- a/packages/svelte/src/lib/types/general.ts
+++ b/packages/svelte/src/lib/types/general.ts
@@ -7,25 +7,25 @@ export type KeyDefinitionObject = { key: string; modifier?: KeyModifier };
export type KeyDefinition = string | KeyDefinitionObject;
export type ConnectionData = {
- position: XYPosition | null;
- nodeId: string | null;
- handleId: string | null;
- handleType: HandleType | null;
- status: string | null;
+ position: XYPosition | null;
+ nodeId: string | null;
+ handleId: string | null;
+ handleType: HandleType | null;
+ status: string | null;
};
export type ConnectionLineProps = {};
export type SvelteFlowProps = {
- nodes: Node[];
- edges: Edge[];
+ nodes: Node[];
+ edges: Edge[];
- connectionLineType?: ConnectionLineType;
- selectionKey?: KeyDefinition;
- deleteKey?: KeyDefinition;
- nodeTypes?: NodeTypes;
- fitView?: boolean;
- class?: string;
- style?: string;
- id?: string;
+ connectionLineType?: ConnectionLineType;
+ selectionKey?: KeyDefinition;
+ deleteKey?: KeyDefinition;
+ nodeTypes?: NodeTypes;
+ fitView?: boolean;
+ class?: string;
+ style?: string;
+ id?: string;
};
diff --git a/packages/svelte/src/lib/types/index.ts b/packages/svelte/src/lib/types/index.ts
index ced30c7a..2fccfa9a 100644
--- a/packages/svelte/src/lib/types/index.ts
+++ b/packages/svelte/src/lib/types/index.ts
@@ -1,10 +1,10 @@
export type {
- Position,
- XYPosition,
- Edge,
- BaseEdgeProps,
- WrapEdgeProps,
- EdgeProps
+ Position,
+ XYPosition,
+ Edge,
+ BaseEdgeProps,
+ WrapEdgeProps,
+ EdgeProps
} from '@reactflow/system';
export * from './nodes';
diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts
index cc180f12..9b4025c5 100644
--- a/packages/svelte/src/lib/types/nodes.ts
+++ b/packages/svelte/src/lib/types/nodes.ts
@@ -5,43 +5,43 @@ import type { internalsSymbol, NodeHandleBounds, Position, XYPosition } from '@r
// we need a base node type or helpes that accept Node like types
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type Node = {
- id: string;
- type: string;
- data: NodeData;
- position: XYPosition;
- sourcePosition?: Position;
- targetPosition?: Position;
- positionAbsolute?: XYPosition;
+ id: string;
+ type: string;
+ data: NodeData;
+ position: XYPosition;
+ sourcePosition?: Position;
+ targetPosition?: Position;
+ positionAbsolute?: XYPosition;
- width?: number;
- height?: number;
- selected?: boolean;
- class?: string;
- style?: string;
- deletable?: boolean;
- // not supported yet
- parentNode?: string;
+ width?: number;
+ height?: number;
+ selected?: boolean;
+ class?: string;
+ style?: string;
+ deletable?: boolean;
+ // not supported yet
+ parentNode?: string;
- // only used internally
- [internalsSymbol]?: {
- z?: number;
- handleBounds?: NodeHandleBounds;
- isParent?: boolean;
- };
+ // only used internally
+ [internalsSymbol]?: {
+ z?: number;
+ handleBounds?: NodeHandleBounds;
+ isParent?: boolean;
+ };
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type NodeProps = Pick<
- Node,
- 'id' | 'data' | 'selected' | 'sourcePosition' | 'targetPosition'
+ Node,
+ 'id' | 'data' | 'selected' | 'sourcePosition' | 'targetPosition'
> & {
- xPos: number;
- yPos: number;
- isConnectable?: boolean;
+ xPos: number;
+ yPos: number;
+ isConnectable?: boolean;
};
export type WrapNodeProps = Node & {
- resizeObserver?: ResizeObserver | null;
+ resizeObserver?: ResizeObserver | null;
};
export type NodeTypes = Record>>;
diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte
index 2eea4c7c..df9e6fb4 100644
--- a/packages/svelte/src/routes/+page.svelte
+++ b/packages/svelte/src/routes/+page.svelte
@@ -1,10 +1,16 @@