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

fixed errors but still WIP

Browse Source
This commit is contained in:
peterkogo
2024-04-10 09:30:00 +02:00
parent 47319ec747
commit 2d1d4717d9
16 changed files with 142 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/store/derived-connection-props.ts
+6 -6
View File
@@ -6,7 +6,6 @@ import {
ConnectionLineType,
ConnectionMode,
Position,
internalsSymbol,
type HandleElement
} from '@xyflow/system';
@@ -65,8 +64,9 @@ export function getDerivedConnectionProps(
return initConnectionProps;
}
// TODO: it should bail out if the node is not found
const fromNode = nodeLookup.get(connection.connectionStartHandle?.nodeId);
const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
const fromHandleBounds = fromNode?.internals.handleBounds;
const handleBoundsStrict =
fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || [];
const handleBoundsLoose: HandleElement[] | undefined | null = handleBoundsStrict
@@ -81,12 +81,12 @@ export function getDerivedConnectionProps(
: handleBounds?.[0];
const fromHandleX = fromHandle
? fromHandle.x + fromHandle.width / 2
: (fromNode?.computed?.width ?? 0) / 2;
: (fromNode?.measured.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;
: fromNode?.measured.height ?? 0;
const fromX = (fromNode?.internals.positionAbsolute.x ?? 0) + fromHandleX;
const fromY = (fromNode?.internals.positionAbsolute.y ?? 0) + fromHandleY;
const fromPosition = fromHandle?.position;
const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
packages/svelte/src/lib/store/index.ts
+39 -19
View File
@@ -64,52 +64,72 @@ export function createStore({
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
const nodeLookup = get(store.nodeLookup);
nodeDragItems.forEach((nodeDragItem) => {
for (const nodeDragItem of nodeDragItems) {
const node = nodeLookup.get(nodeDragItem.id);
if (node) {
node.position = nodeDragItem.position;
node.dragging = dragging;
node.computed = {
...node.computed,
positionAbsolute: nodeDragItem.computed?.positionAbsolute
};
if (!node) {
continue;
}
});
const userNode = node.internals.userNode;
userNode.position = nodeDragItem.position;
userNode.dragging = dragging;
// node.internals.positionAbsolute = nodeDragItem.internals.positionAbsolute;
}
store.nodes.set(get(store.nodes));
//$nodes = $nodes
};
function updateNodeDimensions(updates: Map<string, NodeDimensionUpdate>) {
const nextNodes = updateNodeDimensionsSystem(
const nodeLookup = get(store.nodeLookup);
const nodeUpdates = updateNodeDimensionsSystem(
updates,
get(store.nodes),
get(store.nodeLookup),
nodeLookup,
get(store.domNode),
get(store.nodeOrigin)
);
if (!nextNodes) {
if (!nodeUpdates) {
return;
}
if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
const fitViewOptions = get(store.fitViewOptions);
const fitViewOnInitDone = fitView(nextNodes, {
const fitViewOnInitDone = fitView({
...fitViewOptions,
nodes: fitViewOptions?.nodes || nextNodes
nodes: fitViewOptions?.nodes
});
store.fitViewOnInitDone.set(fitViewOnInitDone);
}
store.nodes.set(nextNodes);
for (const nodeUpdate of nodeUpdates) {
const node = nodeLookup.get(nodeUpdate.id)?.internals.userNode;
if (!node) {
continue;
}
switch (nodeUpdate.type) {
case 'dimensions':
node.width = nodeUpdate.dimensions?.width ?? node.width;
node.height = nodeUpdate.dimensions?.height ?? node.height;
// TODO: do we need measured here?
break;
case 'position':
node.position = nodeUpdate.position ?? node.position;
break;
}
}
store.nodes.set(get(store.nodes));
if (!get(store.nodesInitialized)) {
store.nodesInitialized.set(true);
}
}
function fitView(nodes: Node[], options?: FitViewOptions) {
function fitView(options?: FitViewOptions) {
const panZoom = get(store.panZoom);
if (!panZoom) {
@@ -118,7 +138,7 @@ export function createStore({
return fitViewUtil(
{
nodes,
nodeLookup: get(store.nodeLookup),
width: get(store.width),
height: get(store.height),
minZoom: get(store.minZoom),
@@ -384,7 +404,7 @@ export function createStore({
updateNodeDimensions,
zoomIn,
zoomOut,
fitView: (options?: FitViewOptions) => fitView(get(store.nodes), options),
fitView: (options?: FitViewOptions) => fitView(options),
setMinZoom,
setMaxZoom,
setTranslateExtent,
packages/svelte/src/lib/store/initial-store.ts
+11 -8
View File
@@ -5,7 +5,7 @@ import {
ConnectionMode,
ConnectionLineType,
devWarn,
adoptUserProvidedNodes,
adoptUserNodes,
getNodesBounds,
getViewportForBounds,
updateConnectionLookup,
@@ -47,7 +47,8 @@ import type {
OnDelete,
OnEdgeCreate,
OnBeforeDelete,
IsValidConnection
IsValidConnection,
InternalNode
} from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -80,9 +81,10 @@ export const getInitialStore = ({
fitView?: boolean;
}) => {
const nodeLookup: NodeLookup = new Map();
const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
adoptUserNodes(nodes, nodeLookup, {
nodeOrigin: [0, 0],
elevateNodesOnSelect: false
elevateNodesOnSelect: false,
checkEquality: false
});
const connectionLookup = new Map();
const edgeLookup = new Map();
@@ -91,9 +93,10 @@ export const getInitialStore = ({
let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
if (fitView && width && height) {
const nodesWithDimensions = nextNodes.filter(
const nodesWithDimensions = Array.from(nodeLookup.values()).filter(
(node) => (node.width && node.height) || (node.initialWidth && node.initialHeight)
);
// @todo users nodeOrigin should be used here
const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
@@ -101,10 +104,10 @@ export const getInitialStore = ({
return {
flowId: writable<string | null>(null),
nodes: createNodesStore(nextNodes, nodeLookup),
nodeLookup: readable<NodeLookup<Node>>(nodeLookup),
nodes: createNodesStore(nodes, nodeLookup),
nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
visibleNodes: readable<Node[]>([]),
visibleNodes: readable<InternalNode[]>([]),
edges: createEdgesStore(edges, connectionLookup, edgeLookup),
visibleEdges: readable<EdgeLayouted[]>([]),
connectionLookup: readable<ConnectionLookup>(connectionLookup),
packages/svelte/src/lib/store/utils.ts
+6 -5
View File
@@ -16,7 +16,7 @@ import {
type NodeLookup
} from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
// we need to sync the user nodes and the internal nodes so that the user can receive the updates
// made by Svelte Flow (like dragging or selecting a node).
@@ -127,7 +127,7 @@ export type NodeStoreOptions = {
// The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
export const createNodesStore = (
nodes: Node[],
nodeLookup: NodeLookup<Node>
nodeLookup: NodeLookup<InternalNode>
): {
subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
update: (this: void, updater: Updater<Node[]>) => void;
@@ -141,12 +141,13 @@ export const createNodesStore = (
let elevateNodesOnSelect = true;
const _set = (nds: Node[]): Node[] => {
const nextNodes = adoptUserNodes(nds, nodeLookup, {
adoptUserNodes(nds, nodeLookup, {
elevateNodesOnSelect,
defaults
defaults,
checkEquality: false
});
value = nextNodes;
value = nodes;
set(value);
packages/svelte/src/lib/store/visible-nodes.ts
+11 -6
View File
@@ -1,18 +1,23 @@
import { derived } from 'svelte/store';
import { getNodesInside, type Transform } from '@xyflow/system';
import type { Node } from '$lib/types';
import type { SvelteFlowStoreState } from './types';
export function getVisibleNodes(store: SvelteFlowStoreState) {
return derived(
[store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.viewport],
([nodes, onlyRenderVisibleElements, width, height, viewport]) => {
[
store.nodes,
store.nodeLookup,
store.onlyRenderVisibleElements,
store.width,
store.height,
store.viewport
],
([_, nodeLookup, onlyRenderVisibleElements, width, height, viewport]) => {
const transform: Transform = [viewport.x, viewport.y, viewport.zoom];
return onlyRenderVisibleElements
? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true)
: nodes;
? getNodesInside(nodeLookup, { x: 0, y: 0, width, height }, transform, true)
: Array.from(nodeLookup.values());
}
);
}