alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'next' into refactor/edge-rendering

Browse Source
This commit is contained in:
moklick
2023-12-17 11:04:32 +01:00
parent 622c987e46 d39d803d4f
commit c3834208d2
187 changed files with 5192 additions and 2186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/store/derived-connection-props.ts
+6 -4
View File
@@ -80,10 +80,12 @@ export function getDerivedConnectionProps(
: 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;
: (fromNode?.computed?.width ?? 0) / 2;
const fromHandleY = fromHandle
? fromHandle.y + fromHandle.height / 2
: fromNode?.computed?.height ?? 0;
const fromX = (fromNode?.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
const fromY = (fromNode?.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
const fromPosition = fromHandle?.position;
const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
packages/svelte/src/lib/store/index.ts
+23 -15
View File
@@ -66,22 +66,25 @@ export function createStore({
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
store.nodes.update((nds) => {
return nds.map((n) => {
return nds.map((node) => {
const nodeDragItem = (nodeDragItems as Array<NodeBase | NodeDragItem>).find(
(ndi) => ndi.id === n.id
(ndi) => ndi.id === node.id
);
if (nodeDragItem) {
return {
...n,
[internalsSymbol]: n[internalsSymbol],
...node,
dragging,
positionAbsolute: nodeDragItem.positionAbsolute,
position: nodeDragItem.position
position: nodeDragItem.position,
computed: {
...node.computed,
positionAbsolute: nodeDragItem.computed?.positionAbsolute
},
[internalsSymbol]: node[internalsSymbol]
};
}
return n;
return node;
});
});
};
@@ -189,15 +192,20 @@ export function createStore({
}
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const nodeIdsToUnselect = (params?.nodes ? params.nodes : get(store.nodes)).map(
(item) => item.id
);
const edgeIdsToUnselect = (params?.edges ? params.edges : get(store.edges)).map(
(item) => item.id
);
const selectedNodeIds = (params?.nodes ? params.nodes : get(store.nodes))
.filter((node) => node.selected)
.map((node) => node.id);
const selectedEdgeIds = (params?.edges ? params.edges : get(store.edges))
.filter((edge) => edge.selected)
.map((edge) => edge.id);
store.nodes.update((ns) => ns.map(resetSelectedItem(nodeIdsToUnselect)));
store.edges.update((es) => es.map(resetSelectedItem(edgeIdsToUnselect)));
if (selectedNodeIds.length) {
store.nodes.update((ns) => ns.map(resetSelectedItem(selectedNodeIds)));
}
if (selectedEdgeIds.length) {
store.edges.update((es) => es.map(resetSelectedItem(selectedEdgeIds)));
}
}
store.deleteKeyPressed.subscribe((deleteKeyPressed) => {
packages/svelte/src/lib/store/initial-store.ts
+33 -21
View File
@@ -14,19 +14,28 @@ import {
type OnError,
devWarn,
type Viewport,
updateNodes,
adoptUserProvidedNodes,
getNodesBounds,
getViewportForBounds
getViewportForBounds,
updateConnectionLookup,
type ConnectionLookup,
type OnConnect,
type OnConnectStart,
type OnConnectEnd
} from '@xyflow/system';
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 GroupNode from '$lib/components/nodes/GroupNode.svelte';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
import StepEdge from '$lib/components/edges/StepEdge.svelte';
import {
BezierEdgeInternal,
SmoothStepEdgeInternal,
StraightEdgeInternal,
StepEdgeInternal
} from '$lib/components/edges';
import type {
NodeTypes,
EdgeTypes,
@@ -34,7 +43,8 @@ import type {
Node,
Edge,
FitViewOptions,
OnDelete
OnDelete,
OnEdgeCreate
} from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -47,10 +57,10 @@ export const initialNodeTypes = {
};
export const initialEdgeTypes = {
straight: StraightEdge,
smoothstep: SmoothStepEdge,
default: BezierEdge,
step: StepEdge
straight: StraightEdgeInternal,
smoothstep: SmoothStepEdgeInternal,
default: BezierEdgeInternal,
step: StepEdgeInternal
};
export const getInitialStore = ({
@@ -66,20 +76,17 @@ export const getInitialStore = ({
height?: number;
fitView?: boolean;
}) => {
const nodeLookup = new Map<string, Node>();
const nextNodes = updateNodes(nodes, nodeLookup, {
const nodeLookup = new Map();
const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
nodeOrigin: [0, 0],
elevateNodesOnSelect: false
});
const connectionLookup = updateConnectionLookup(new Map(), edges);
let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
if (fitView && width && height) {
const nodesWithDimensions = nextNodes.map((node) => ({
...node,
width: node.size?.width,
height: node.size?.height
}));
const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
}
@@ -89,14 +96,15 @@ export const getInitialStore = ({
nodes: createNodesStore(nextNodes, nodeLookup),
nodeLookup: readable<Map<string, Node>>(nodeLookup),
visibleNodes: readable<Node[]>([]),
edges: createEdgesStore(edges),
edges: createEdgesStore(edges, connectionLookup),
visibleEdges: readable<EdgeLayouted[]>([]),
connectionLookup: readable<ConnectionLookup>(connectionLookup),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
maxZoom: writable<number>(2),
nodeOrigin: writable<NodeOrigin>([0, 0]),
nodeDragThreshold: writable<number>(0),
nodeDragThreshold: writable<number>(1),
nodeExtent: writable<CoordinateExtent>(infiniteExtent),
translateExtent: writable<CoordinateExtent>(infiniteExtent),
autoPanOnNodeDrag: writable<boolean>(true),
@@ -133,6 +141,10 @@ export const getInitialStore = ({
lib: readable<string>('svelte'),
onlyRenderVisibleElements: writable<boolean>(false),
onerror: writable<OnError>(devWarn),
ondelete: writable<OnDelete>(undefined)
ondelete: writable<OnDelete>(undefined),
onedgecreate: writable<OnEdgeCreate>(undefined),
onconnect: writable<OnConnect>(undefined),
onconnectstart: writable<OnConnectStart>(undefined),
onconnectend: writable<OnConnectEnd>(undefined)
};
};
packages/svelte/src/lib/store/utils.ts
+12 -2
View File
@@ -6,7 +6,13 @@ import {
type Writable,
get
} from 'svelte/store';
import { updateNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
import {
adoptUserProvidedNodes,
updateConnectionLookup,
type Viewport,
type PanZoomInstance,
type ConnectionLookup
} from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
@@ -133,7 +139,7 @@ export const createNodesStore = (
let elevateNodesOnSelect = true;
const _set = (nds: Node[]): Node[] => {
const nextNodes = updateNodes(nds, nodeLookup, {
const nextNodes = adoptUserProvidedNodes(nds, nodeLookup, {
elevateNodesOnSelect,
defaults
});
@@ -168,6 +174,7 @@ export const createNodesStore = (
export const createEdgesStore = (
edges: Edge[],
connectionLookup: ConnectionLookup,
defaultOptions?: DefaultEdgeOptions
): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
const { subscribe, set, update } = writable<Edge[]>([]);
@@ -176,6 +183,9 @@ export const createEdgesStore = (
const _set: typeof set = (eds: Edge[]) => {
const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
updateConnectionLookup(connectionLookup, nextEdges);
value = nextEdges;
set(value);
};