chore(svelte): run prettier
This commit is contained in:
moklick
@@ -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;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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[];
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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<T extends Node | Edge>(item: T) {
|
||||
if (item.selected) {
|
||||
return {
|
||||
...item,
|
||||
selected: false
|
||||
};
|
||||
}
|
||||
function resetSelectedItem<T extends Node | Edge>(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<Node[]>((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<Node[]>((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<string[]>((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<string[]>((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<ConnectionData> | null) {
|
||||
const currentConnectionData = get(store.connection);
|
||||
const nextConnectionData = currentConnectionData
|
||||
? {
|
||||
...initConnectionData,
|
||||
...currentConnectionData,
|
||||
...connectionUpdate
|
||||
}
|
||||
: {
|
||||
...initConnectionData,
|
||||
...connectionUpdate
|
||||
};
|
||||
function updateConnection(connectionUpdate: Partial<ConnectionData> | 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();
|
||||
}
|
||||
|
||||
@@ -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<Node[]>([]),
|
||||
edges: writable<Edge[]>([]),
|
||||
edgesLayouted: readable<Edge[]>([]),
|
||||
height: writable<number>(500),
|
||||
width: writable<number>(500),
|
||||
nodeOrigin: writable<NodeOrigin>([0.5, 0.5]),
|
||||
d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
|
||||
zoom: null,
|
||||
selection: null
|
||||
}),
|
||||
id: writable<string | null>(null),
|
||||
dragging: writable<boolean>(false),
|
||||
selectionRect: writable<(Rect & { startX: number; startY: number }) | null>(null),
|
||||
selectionKeyPressed: writable<boolean>(false),
|
||||
multiselectionKeyPressed: writable<boolean>(false),
|
||||
deleteKeyPressed: writable<boolean>(false),
|
||||
selectionRectMode: writable<string | null>(null),
|
||||
selectionMode: writable<SelectionMode>(SelectionMode.Partial),
|
||||
nodeTypes: writable<NodeTypes>({
|
||||
input: InputNode,
|
||||
output: OutputNode,
|
||||
default: DefaultNode
|
||||
}),
|
||||
edgeTypes: writable<EdgeTypes>({
|
||||
straight: StraightEdge,
|
||||
smoothstep: SmoothStepEdge,
|
||||
default: BezierEdge
|
||||
}),
|
||||
transform: writable<Transform>([0, 0, 1]),
|
||||
connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
|
||||
domNode: writable<HTMLDivElement | null>(null),
|
||||
connectionPath: readable<string | null>(null),
|
||||
connection: writable<ConnectionData>(initConnectionData),
|
||||
connectionRadius: writable<number>(25),
|
||||
connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier)
|
||||
nodes: writable<Node[]>([]),
|
||||
edges: writable<Edge[]>([]),
|
||||
edgesLayouted: readable<Edge[]>([]),
|
||||
height: writable<number>(500),
|
||||
width: writable<number>(500),
|
||||
nodeOrigin: writable<NodeOrigin>([0.5, 0.5]),
|
||||
d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
|
||||
zoom: null,
|
||||
selection: null
|
||||
}),
|
||||
id: writable<string | null>(null),
|
||||
dragging: writable<boolean>(false),
|
||||
selectionRect: writable<(Rect & { startX: number; startY: number }) | null>(null),
|
||||
selectionKeyPressed: writable<boolean>(false),
|
||||
multiselectionKeyPressed: writable<boolean>(false),
|
||||
deleteKeyPressed: writable<boolean>(false),
|
||||
selectionRectMode: writable<string | null>(null),
|
||||
selectionMode: writable<SelectionMode>(SelectionMode.Partial),
|
||||
nodeTypes: writable<NodeTypes>({
|
||||
input: InputNode,
|
||||
output: OutputNode,
|
||||
default: DefaultNode
|
||||
}),
|
||||
edgeTypes: writable<EdgeTypes>({
|
||||
straight: StraightEdge,
|
||||
smoothstep: SmoothStepEdge,
|
||||
default: BezierEdge
|
||||
}),
|
||||
transform: writable<Transform>([0, 0, 1]),
|
||||
connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
|
||||
domNode: writable<HTMLDivElement | null>(null),
|
||||
connectionPath: readable<string | null>(null),
|
||||
connection: writable<ConnectionData>(initConnectionData),
|
||||
connectionRadius: writable<number>(25),
|
||||
connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier)
|
||||
};
|
||||
|
||||
+22
-22
@@ -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<ConnectionData>) => 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<ConnectionData>) => void;
|
||||
cancelConnection: () => void;
|
||||
};
|
||||
|
||||
export type SvelteFlowStoreState = typeof initialStoreState;
|
||||
|
||||
Reference in New Issue
Block a user