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

first working version with using $state for nodes & edges

Browse Source
This commit is contained in:
peterkogo
2024-12-09 12:07:10 +01:00
parent 4fcde6f6bf
commit d0fce3984d
24 changed files with 400 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/package.json
+2 -1
View File
@@ -58,6 +58,7 @@
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.9.0",
"@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^8.17.0",
"@typescript-eslint/parser": "^8.17.0",
"autoprefixer": "^10.4.20",
@@ -74,7 +75,7 @@
"postcss-rename": "^0.6.1",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2",
"svelte": "^5.7.1",
"svelte": "^5.9.0",
"svelte-check": "^4.1.1",
"svelte-eslint-parser": "^0.43.0",
"svelte-preprocess": "^6.0.3",
packages/svelte/src/lib/actions/drag/index.ts
+2 -2
View File
@@ -28,9 +28,9 @@ export default function drag(domNode: Element, params: UseDragParams) {
const { snapGrid, viewport } = store;
return {
nodes: get(store.nodes),
nodes: store.nodes,
nodeLookup: store.nodeLookup,
edges: get(store.edges),
edges: store.edges,
nodeExtent: store.nodeExtent,
snapGrid: snapGrid ? snapGrid : [0, 0],
snapToGrid: !!snapGrid,
packages/svelte/src/lib/components/Handle/Handle.svelte
+3 -2
View File
@@ -40,7 +40,7 @@
);
let store = useStore();
let { edges } = store;
// let { edges } = store;
function onPointerDown(event: MouseEvent | TouchEvent) {
const isMouseTriggered = isMouseEvent(event);
@@ -91,7 +91,8 @@
$effect.pre(() => {
// connectionLookup is not reactive, so we use edges to get notified about updates
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
$edges;
// $edges;
store.edges;
if (onconnect || ondisconnect) {
let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`);
packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+9 -9
View File
@@ -20,7 +20,7 @@
zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
}: KeyHandlerProps = $props();
const { nodes: _nodes, edges: _edges } = store;
// const { nodes: _nodes, edges: _edges } = store;
function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
return key !== null && typeof key === 'object';
@@ -66,22 +66,22 @@
}
async function handleDelete() {
const nodes = get(_nodes);
const edges = get(_edges);
const selectedNodes = nodes.filter((node) => node.selected);
const selectedEdges = edges.filter((edge) => edge.selected);
// const nodes = get(_nodes);
// const edges = get(_edges);
const selectedNodes = store.nodes.filter((node) => node.selected);
const selectedEdges = store.edges.filter((edge) => edge.selected);
const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
nodesToRemove: selectedNodes,
edgesToRemove: selectedEdges,
nodes,
edges,
nodes: store.nodes,
edges: store.edges,
onBeforeDelete: store.onbeforedelete
});
if (matchingNodes.length || matchingEdges.length) {
_nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
_edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
// _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
// _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
store.ondelete?.({
nodes: matchingNodes,
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+4 -4
View File
@@ -15,24 +15,24 @@
onselectioncontextmenu
}: NodeSelectionProps = $props();
const { nodes } = store;
// const { nodes } = store;
let bounds: Rect | null = $derived.by(() => {
if (store.selectionRectMode === 'nodes') {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
$nodes;
store.nodes;
return getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected });
}
return null;
});
function oncontextmenu(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected);
const selectedNodes = store.nodes.filter((n) => n.selected);
onselectioncontextmenu?.({ nodes: selectedNodes, event });
}
function onclick(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected);
const selectedNodes = store.nodes.filter((n) => n.selected);
onselectionclick?.({ nodes: selectedNodes, event });
}
</script>
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+3 -3
View File
@@ -14,11 +14,11 @@
onedgemouseleave
}: { store: SvelteFlowStore } & EdgeEvents = $props();
const { edges, nodes } = store;
// const { edges, nodes } = store;
let layoutedEdges = $derived.by(() => {
$nodes;
const layoutedEdges = $edges.reduce<EdgeLayouted[]>((res, edge) => {
store.nodes;
const layoutedEdges = store.edges.reduce<EdgeLayouted[]>((res, edge) => {
const sourceNode = store.nodeLookup.get(edge.source);
const targetNode = store.nodeLookup.get(edge.target);
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+12 -3
View File
@@ -2,7 +2,7 @@
import { onDestroy } from 'svelte';
import { nodeHasDimensions } from '@xyflow/system';
import type { NodeEvents } from '$lib/types';
import type { Node, NodeEvents } from '$lib/types';
import { NodeWrapper } from '$lib/components/NodeWrapper';
import type { SvelteFlowStore } from '$lib/store/types';
@@ -19,7 +19,7 @@
onnodedragstop
}: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props();
const { nodes } = store;
// const { nodes } = store;
const resizeObserver: ResizeObserver | null =
typeof ResizeObserver === 'undefined'
@@ -43,10 +43,19 @@
onDestroy(() => {
resizeObserver?.disconnect();
});
function give(node: Node) {
const internalNode = store.nodeLookup.get(node.id);
// console.log('this reruns most definitely', internalNode);
console.log(internalNode?.position);
return internalNode;
}
// $inspect(store.nodes).with(console.trace);
</script>
<div class="svelte-flow__nodes">
{#each $nodes as node (node.id)}
{#each store.nodes as node (node.id)}
{@const internalNode = store.nodeLookup.get(node.id)}
<NodeWrapper
{store}
packages/svelte/src/lib/container/Pane/Pane.svelte
+5 -5
View File
@@ -45,7 +45,7 @@
children
}: PaneProps = $props();
const { nodes, edges } = store;
// const { nodes, edges } = store;
// svelte-ignore non_reactive_update
let container: HTMLDivElement;
@@ -126,7 +126,7 @@
height: Math.abs(mousePos.y - startY)
};
const prevSelectedNodeIds = selectedNodes.map((n) => n.id);
const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id);
selectedNodes = getNodesInside(
store.nodeLookup,
@@ -135,7 +135,7 @@
store.selectionMode === SelectionMode.Partial,
true
);
const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
const selectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id);
const selectedNodeIds = selectedNodes.map((n) => n.id);
// this prevents unnecessary updates while updating the selection rectangle
@@ -143,14 +143,14 @@
prevSelectedNodeIds.length !== selectedNodeIds.length ||
selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
) {
nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
// store.nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
}
if (
prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
) {
edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
// store.edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
}
store.selectionRectMode = 'user';
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+113 -92
View File
@@ -1,5 +1,8 @@
<!-- TODO: why is this neccessary for types to work?? -->
<svelte:options runes={true} />
<script lang="ts">
import { onMount, getContext, setContext } from 'svelte';
import { getContext, setContext, onDestroy } from 'svelte';
import cc from 'classcat';
import { PanOnScrollMode } from '@xyflow/system';
@@ -64,28 +67,45 @@
connectionLineStyle = '',
attributionPosition,
children,
nodes = $bindable([]),
edges = $bindable([]),
...props
}: SvelteFlowProps = $props();
// svelte-ignore perf_avoid_inline_class
const container: ContainerSignals = new (class {
domNode = $state<HTMLDivElement>();
width = $state<number | undefined>(width);
height = $state<number | undefined>(height);
})();
let domNode = $state<HTMLDivElement>();
let clientWidth = $state<number | undefined>(width);
let clientHeight = $state<number | undefined>(height);
const store = createStore({
props,
container
get domNode() {
return domNode;
},
get width() {
return clientWidth;
},
get height() {
return clientHeight;
},
get nodes() {
return nodes;
},
set nodes(newNodes) {
nodes = newNodes;
},
get edges() {
return edges;
},
set edges(newEdges) {
edges = newEdges;
}
});
store.syncNodeStores(props.nodes);
store.syncEdgeStores(props.edges);
const providerContext = getContext<ProviderContext>(key);
if (providerContext) {
providerContext.setStore(store);
}
setContext(key, {
provider: false,
getStore() {
@@ -93,93 +113,94 @@
}
} satisfies StoreContext);
onMount(() => {
return () => {
store.reset();
};
onDestroy(() => {
store.reset();
});
let colorModeClass = $derived(useColorModeClass(store.colorMode));
</script>
<div
bind:this={container.domNode}
bind:clientWidth={container.width}
bind:clientHeight={container.height}
style:width
style:height
{style}
class={cc(['svelte-flow', className, $colorModeClass])}
data-testid="svelte-flow__wrapper"
{...props}
role="application"
>
<KeyHandler
{store}
{selectionKey}
{deleteKey}
{panActivationKey}
{multiSelectionKey}
{zoomActivationKey}
/>
<Zoom
{store}
{onMoveStart}
{onMove}
{onMoveEnd}
{panOnScrollMode}
{preventScrolling}
{zoomOnScroll}
{zoomOnDoubleClick}
{zoomOnPinch}
{panOnScroll}
{panOnDrag}
{paneClickDistance}
<!-- TODO: this is the only hack in the library so far. Can we get rid of it? -->
{#if store.adoptNodes && store.adoptEdges}
<div
bind:this={domNode}
bind:clientWidth
bind:clientHeight
style:width
style:height
{style}
class={cc(['svelte-flow', className, $colorModeClass])}
data-testid="svelte-flow__wrapper"
{...props}
role="application"
>
<Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
<ViewportComponent {store}>
<EdgeRenderer
{store}
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
/>
<ConnectionLine
{store}
containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
{connectionLine}
/>
<div class="svelte-flow__edgelabel-renderer"></div>
<div class="svelte-flow__viewport-portal"></div>
<NodeRenderer
{store}
{nodeClickDistance}
{onnodeclick}
{onnodecontextmenu}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
<NodeSelection
{store}
{onselectionclick}
{onselectioncontextmenu}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
</ViewportComponent>
<UserSelection />
</Pane>
</Zoom>
<Attribution {proOptions} position={attributionPosition} />
{@render children?.()}
</div>
<KeyHandler
{store}
{selectionKey}
{deleteKey}
{panActivationKey}
{multiSelectionKey}
{zoomActivationKey}
/>
<Zoom
{store}
{onMoveStart}
{onMove}
{onMoveEnd}
{panOnScrollMode}
{preventScrolling}
{zoomOnScroll}
{zoomOnDoubleClick}
{zoomOnPinch}
{panOnScroll}
{panOnDrag}
{paneClickDistance}
>
<Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
<ViewportComponent {store}>
<EdgeRenderer
{store}
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
/>
<ConnectionLine
{store}
containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
{connectionLine}
/>
<div class="svelte-flow__edgelabel-renderer"></div>
<div class="svelte-flow__viewport-portal"></div>
<NodeRenderer
{store}
{nodeClickDistance}
{onnodeclick}
{onnodecontextmenu}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
<NodeSelection
{store}
{onselectionclick}
{onselectioncontextmenu}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
</ViewportComponent>
<UserSelection />
</Pane>
</Zoom>
<Attribution {proOptions} position={attributionPosition} />
{@render children?.()}
</div>
{/if}
<style>
.svelte-flow {
packages/svelte/src/lib/container/SvelteFlow/types.ts
+3 -3
View File
@@ -59,7 +59,7 @@ export type SvelteFlowProps = NodeEvents &
* }
* ]);
*/
nodes: Writable<Node[]>;
nodes: Node[];
/** An array of edges to render in a controlled flow.
* @example
* const edges = writable([
@@ -70,7 +70,7 @@ export type SvelteFlowProps = NodeEvents &
* }
* ]);
*/
edges: Writable<Edge[]>;
edges: Edge[];
/** Custom node types to be available in a flow.
*
* Svelte Flow matches a node's type to a component in the nodeTypes object.
@@ -191,7 +191,7 @@ export type SvelteFlowProps = NodeEvents &
/**
* Controls if nodes should be automatically selected when being dragged
*/
selectNodesOnDrag: boolean;
selectNodesOnDrag?: boolean;
/** Grid all nodes will snap to
* @example [20, 20]
*/
packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
+45 -45
View File
@@ -278,7 +278,7 @@ export function useSvelteFlow(): {
}
const store = useStore();
const { nodes, edges } = store;
// const { nodes, edges } = store;
const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!;
@@ -316,20 +316,20 @@ export function useSvelteFlow(): {
const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
if (options.replace) {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
}
// if (options.replace) {
// nodes.update((nds) =>
// nds.map((node) => {
// if (node.id === id) {
// return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
// }
return node;
})
);
} else {
Object.assign(node, nextNode);
nodes.set(get(nodes));
}
// return node;
// })
// );
// } else {
// Object.assign(node, nextNode);
// nodes.set(store.nodes);
// }
};
const updateEdge = (
@@ -345,20 +345,20 @@ export function useSvelteFlow(): {
const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge as Edge) : edgeUpdate;
if (options.replace) {
edges.update((edgs) =>
edgs.map((edge) => {
if (edge.id === id) {
return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
}
// if (options.replace) {
// edges.update((edgs) =>
// edgs.map((edge) => {
// if (edge.id === id) {
// return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
// }
return edge;
})
);
} else {
Object.assign(edge, nextEdge);
edges.set(get(edges));
}
// return edge;
// })
// );
// } else {
// Object.assign(edge, nextEdge);
// edges.set(store.edges);
// }
};
const getInternalNode = (id: string) => store.nodeLookup.get(id);
@@ -368,9 +368,9 @@ export function useSvelteFlow(): {
zoomOut: store.zoomOut,
getInternalNode,
getNode: (id) => getInternalNode(id)?.internals.userNode,
getNodes: (ids) => (ids === undefined ? get(nodes) : getElements(store.nodeLookup, ids)),
getNodes: (ids) => (ids === undefined ? store.nodes : getElements(store.nodeLookup, ids)),
getEdge: (id) => store.edgeLookup.get(id),
getEdges: (ids) => (ids === undefined ? get(edges) : getElements(store.edgeLookup, ids)),
getEdges: (ids) => (ids === undefined ? store.edges : getElements(store.edgeLookup, ids)),
setZoom: (zoomLevel, options) => {
const panZoom = store.panZoom;
return panZoom
@@ -447,7 +447,7 @@ export function useSvelteFlow(): {
return [];
}
return (nodesToIntersect || get(nodes)).filter((n) => {
return (nodesToIntersect || store.nodes).filter((n) => {
const internalNode = store.nodeLookup.get(n.id);
if (!internalNode || (!isRect && n.id === nodeOrRect.id)) {
return false;
@@ -481,22 +481,22 @@ export function useSvelteFlow(): {
const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
nodesToRemove,
edgesToRemove,
nodes: get(nodes),
edges: get(edges),
nodes: store.nodes,
edges: store.edges,
onBeforeDelete: store.onbeforedelete
});
if (matchingNodes) {
nodes.update((nds) =>
nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
);
}
// if (matchingNodes) {
// nodes.update((nds) =>
// nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
// );
// }
if (matchingEdges) {
edges.update((eds) =>
eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
);
}
// if (matchingEdges) {
// edges.update((eds) =>
// eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
// );
// }
return {
deletedNodes: matchingNodes,
@@ -548,14 +548,14 @@ export function useSvelteFlow(): {
toObject: () => {
return {
nodes: get(nodes).map((node) => ({
nodes: store.nodes.map((node) => ({
...node,
// we want to make sure that changes to the nodes object that gets returned by toObject
// do not affect the nodes object
position: { ...node.position },
data: { ...node.data }
})),
edges: get(edges).map((edge) => ({ ...edge })),
edges: store.edges.map((edge) => ({ ...edge })),
viewport: { ...store.viewport }
};
},
@@ -571,7 +571,7 @@ export function useSvelteFlow(): {
node.data = options?.replace ? nextData : { ...node.data, ...nextData };
nodes.update((nds) => nds);
// nodes.update((nds) => nds);
},
updateEdge,
getNodesBounds: (nodes) => {
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+2 -2
View File
@@ -44,7 +44,7 @@
let store = useStore();
let nodes = $derived(store.nodes);
// let nodes = $derived(store.nodes);
const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -115,7 +115,7 @@
>
{#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
{#each $nodes as userNode (userNode.id)}
{#each store.nodes as userNode (userNode.id)}
{@const node = store.nodeLookup.get(userNode.id)}
{#if node && nodeHasDimensions(node)}
{@const nodeDimesions = getNodeDimensions(node)}
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+1 -1
View File
@@ -93,7 +93,7 @@
}
}
store.nodes.set(get(store.nodes));
// store.nodes.set(get(store.nodes));
}
});
}
packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+3 -3
View File
@@ -19,13 +19,13 @@
}: NodeToolbarProps = $props();
const store = useStore();
const { nodes } = store;
// const { nodes } = store;
const { getNodesBounds } = useSvelteFlow();
const contextNodeId = getContext<string>('svelteflow__node_id');
let toolbarNodes: InternalNode[] = $derived.by(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
$nodes;
store.nodes;
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId];
return nodeIds.reduce<InternalNode[]>((res, nodeId) => {
@@ -54,7 +54,7 @@
);
//FIXME: Possible performance bottleneck
let selectedNodesCount = $derived($nodes.filter((node) => node.selected).length);
let selectedNodesCount = $derived(store.nodes.filter((node) => node.selected).length);
// if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
let isActive = $derived(
packages/svelte/src/lib/store/index.ts
+54 -59
View File
@@ -1,4 +1,3 @@
import { get } from 'svelte/store';
import {
fitView as fitViewSystem,
panBy as panBySystem,
@@ -23,6 +22,7 @@ import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/type
import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store.svelte';
import { type StoreSignals, type SvelteFlowStore, type SvelteFlowStoreActions } from './types';
import { syncNodeStores, syncEdgeStores } from './utils';
import drag from '$lib/actions/drag';
// import { getVisibleEdges } from './visible-edges';
// import { getVisibleNodes } from './visible-nodes';
@@ -48,23 +48,15 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
function addEdge(edgeParams: Edge | Connection) {
const edges = get(store.edges);
store.edges.set(addEdgeUtil(edgeParams, edges));
// TODO: let's see
store.edges = addEdgeUtil(edgeParams, store.edges);
}
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
for (const [id, dragItem] of nodeDragItems) {
const node = store.nodeLookup.get(id)?.internals.userNode;
if (!node) {
continue;
}
node.position = dragItem.position;
node.dragging = dragging;
}
store.nodes.update((nds) => nds);
store.nodes = store.nodes.map((node) => {
const dragItem = nodeDragItems.get(node.id);
return dragItem ? { ...node, position: dragItem.position, dragging } : node;
});
};
function updateNodeInternals(updates: Map<string, InternalNodeUpdate>) {
@@ -93,13 +85,16 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
store.fitViewOnInitDone = fitViewOnInitDone;
}
const newNodes = new Map<string, Node>();
for (const change of changes) {
const node = store.nodeLookup.get(change.id)?.internals.userNode;
const userNode = store.nodeLookup.get(change.id)?.internals.userNode;
if (!node) {
if (!userNode) {
continue;
}
const node = { ...userNode };
switch (change.type) {
case 'dimensions': {
const measured = { ...node.measured, ...change.dimensions };
@@ -114,12 +109,15 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
case 'position':
node.position = change.position ?? node.position;
break;
}
newNodes.set(change.id, node);
}
store.nodes.update((nds) => nds);
// store.nodes.update((nds) => nds);
store.nodes = store.nodes.map((node) => newNodes.get(node.id) ?? node);
// signals.updateNodes((node) => newNodes.get(node.id) ?? node);
if (!store.nodesInitialized) {
store.nodesInitialized = true;
@@ -235,68 +233,65 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
if (resetNodes) store.nodes.set(get(store.nodes));
resetSelectedElements(params?.nodes || store.nodes);
// if (resetNodes) store.nodes.set(get(store.nodes));
const resetEdges = resetSelectedElements(params?.edges || get(store.edges));
if (resetEdges) store.edges.set(get(store.edges));
resetSelectedElements(params?.edges || store.edges);
// if (resetEdges) store.edges.set(get(store.edges));
}
function addSelectedNodes(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed;
store.nodes.update((ns) =>
ns.map((node) => {
const nodeWillBeSelected = ids.includes(node.id);
const selected = isMultiSelection
? node.selected || nodeWillBeSelected
: nodeWillBeSelected;
// store.nodes.update((ns) =>
store.nodes.forEach((node) => {
const nodeWillBeSelected = ids.includes(node.id);
const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
// we need to mutate the node here in order to have the correct selected state in the drag handler
node.selected = selected;
// we need to mutate the node here in order to have the correct selected state in the drag handler
node.selected = selected;
return node;
})
);
// return node;
});
// );
if (!isMultiSelection) {
store.edges.update((es) =>
es.map((edge) => {
edge.selected = false;
return edge;
})
);
// store.edges.forEach((es) =>
store.edges.forEach((edge) => {
edge.selected = false;
// return edge;
});
// );
}
}
function addSelectedEdges(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed;
store.edges.update((edges) =>
edges.map((edge) => {
const edgeWillBeSelected = ids.includes(edge.id);
const selected = isMultiSelection
? edge.selected || edgeWillBeSelected
: edgeWillBeSelected;
// store.edges.update((edges) =>
store.edges.forEach((edge) => {
const edgeWillBeSelected = ids.includes(edge.id);
const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
edge.selected = selected;
edge.selected = selected;
return edge;
})
);
// return edge;
});
// );
if (!isMultiSelection) {
store.nodes.update((ns) =>
ns.map((node) => {
node.selected = false;
return node;
})
);
// store.nodes.update((ns) =>
store.nodes.forEach((node) => {
node.selected = false;
// return node;
});
// );
}
}
function handleNodeSelection(id: string) {
const node = get(store.nodes)?.find((n) => n.id === id);
const node = store.nodes?.find((n) => n.id === id);
// const node = store.nodeLookup.get(id)?.internals.userNode;
if (!node) {
console.warn('012', errorMessages['error012'](id));
@@ -343,8 +338,8 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
const storeWithActions = Object.assign(store, {
syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
// syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
// syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
// syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
setNodeTypes,
setEdgeTypes,
packages/svelte/src/lib/store/initial-store.svelte.ts
+33 -37
View File
@@ -1,4 +1,3 @@
import { get, writable, type Writable } from 'svelte/store';
import {
infiniteExtent,
SelectionMode,
@@ -52,7 +51,7 @@ import type {
OnBeforeDelete,
IsValidConnection
} from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import type { StoreSignals } from './types';
export const initialNodeTypes = {
@@ -71,19 +70,39 @@ export const initialEdgeTypes = {
export const getInitialStore = (signals: StoreSignals) => {
class SvelteFlowStore {
nodes: ReturnType<typeof createNodesStore>;
edges: ReturnType<typeof createEdgesStore>;
get nodes() {
return signals.nodes;
}
set nodes(nodes) {
signals.nodes = nodes;
}
get edges() {
return signals.edges;
}
set edges(edges) {
signals.edges = edges;
}
nodeLookup: NodeLookup = new Map();
parentLookup: ParentLookup = new Map();
connectionLookup: ConnectionLookup = new Map();
edgeLookup: EdgeLookup = new Map();
adoptNodes: true = $derived.by(() => {
adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
nodeExtent: this.nodeExtent,
nodeOrigin: this.nodeOrigin,
elevateNodesOnSelect: false,
checkEquality: true
});
return true;
});
adoptEdges: true = $derived.by(() => {
updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
return true;
});
domNode: HTMLDivElement | null = $derived(
signals.container?.domNode ?? signals.props.domNode ?? null
);
width: number = $derived(signals.container?.width ?? signals.props.width ?? 0);
height: number = $derived(signals.container?.height ?? signals.props.height ?? 0);
domNode: HTMLDivElement | null = $derived(signals.domNode ?? signals.props.domNode ?? null);
width: number = $derived(signals.width ?? signals.props.width ?? 0);
height: number = $derived(signals.height ?? signals.props.height ?? 0);
flowId: string = $derived(signals.props.id ?? '1');
minZoom: number = $derived(signals.props.minZoom ?? 0.5);
@@ -149,12 +168,10 @@ export const getInitialStore = (signals: StoreSignals) => {
nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true);
elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true);
selectNodesOnDrag: boolean = $derived(signals.props.selectNodesOnDrag ?? true);
// // [store.edges, store.defaultMarkerColor, store.flowId],
// // ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
defaultMarkerColor: string = $derived(signals.props.defaultMarkerColor ?? '#b1b1b7');
markers: MarkerProps[] = $derived.by(() => {
const edges = signals.props.edges ?? writable([]);
return createMarkerIds(get(edges), {
return createMarkerIds(signals.edges, {
defaultColor: this.defaultMarkerColor,
id: this.flowId
});
@@ -172,8 +189,8 @@ export const getInitialStore = (signals: StoreSignals) => {
edgesInitialized: boolean = $state(false);
viewportInitialized: boolean = $state(false);
initialNodesLength: number = signals.props.nodes ? get(signals.props.nodes)?.length : 0;
initialEdgesLength: number = signals.props.edges ? get(signals.props.edges)?.length : 0;
initialNodesLength: number = signals.nodes.length;
initialEdgesLength: number = signals.edges.length;
initialized: boolean = $derived.by(() => {
let initialized = false;
// if it hasn't been initialised check if it's now
@@ -190,27 +207,6 @@ export const getInitialStore = (signals: StoreSignals) => {
colorMode: ColorMode = $derived(signals.props.colorMode ?? 'light');
constructor() {
const nodes = signals.props.nodes ? get(signals.props.nodes) : [];
const edges = signals.props.edges ? get(signals.props.edges) : [];
this.nodes = createNodesStore(
nodes,
this.nodeLookup,
this.parentLookup,
this.nodeOrigin,
this.nodeExtent
);
adoptUserNodes(nodes, this.nodeLookup, this.parentLookup, {
nodeExtent: this.nodeExtent,
nodeOrigin: this.nodeOrigin,
elevateNodesOnSelect: false,
checkEquality: false
});
this.edges = createEdgesStore(edges, this.connectionLookup, this.edgeLookup);
updateConnectionLookup(this.connectionLookup, this.edgeLookup, edges);
if (signals.props.fitView && !signals.props.initialViewport && this.width && this.height) {
const bounds = getInternalNodesBounds(this.nodeLookup, {
filter: (node) =>
packages/svelte/src/lib/store/types.ts
+8 -5
View File
@@ -6,8 +6,7 @@ import type {
Connection,
UpdateNodePositions,
CoordinateExtent,
UpdateConnection,
Viewport
UpdateConnection
} from '@xyflow/system';
import type { getInitialStore } from './initial-store.svelte';
@@ -15,8 +14,8 @@ import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/type
import type { SvelteFlowProps } from '$lib/container/SvelteFlow';
export type SvelteFlowStoreActions = {
syncNodeStores: (nodesStore: Writable<Node[]>) => void;
syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
// syncNodeStores: (nodesStore: Writable<Node[]>) => void;
// syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
// syncViewport: (viewportStore?: Writable<Viewport>) => void;
setNodeTypes: (nodeTypes: NodeTypes) => void;
setEdgeTypes: (edgeTypes: EdgeTypes) => void;
@@ -43,7 +42,11 @@ export type SvelteFlowStoreActions = {
export type ContainerSignals = { domNode?: HTMLDivElement | null; width?: number; height?: number };
export type StoreSignals = {
props: Partial<SvelteFlowProps> & ContainerSignals;
container?: ContainerSignals;
domNode?: HTMLDivElement;
width?: number;
height?: number;
nodes: Node[];
edges: Edge[];
};
export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;
packages/svelte/src/routes/+page.svelte.d.ts
Vendored
+16 -16
View File
@@ -1,23 +1,23 @@
/** @typedef {typeof __propDef.props} PageProps */
/** @typedef {typeof __propDef.events} PageEvents */
/** @typedef {typeof __propDef.slots} PageSlots */
export default class Page extends SvelteComponentTyped<{
[x: string]: never;
}, {
[evt: string]: CustomEvent<any>;
}, {}> {
}
// export default class Page extends SvelteComponentTyped<{
// [x: string]: never;
// }, {
// [evt: string]: CustomEvent<any>;
// }, {}> {
// }
export type PageProps = typeof __propDef.props;
export type PageEvents = typeof __propDef.events;
export type PageSlots = typeof __propDef.slots;
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: never;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {};
};
// import { SvelteComponentTyped } from "svelte";
// declare const __propDef: {
// props: {
// [x: string]: never;
// };
// events: {
// [evt: string]: CustomEvent<any>;
// };
// slots: {};
// };
export {};
packages/svelte/svelte.config.js
+5 -2
View File
@@ -1,9 +1,12 @@
import adapter from '@sveltejs/adapter-auto';
import { sveltePreprocess } from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: sveltePreprocess(),
preprocess: vitePreprocess(),
compilerOptions: {
runes: true
},
kit: {
adapter: adapter()
}