From 4fcde6f6bf9fcc28736ee52557d2c3c9f68779ae Mon Sep 17 00:00:00 2001 From: peterkogo Date: Fri, 6 Dec 2024 15:35:43 +0100 Subject: [PATCH] refector viewport to use signals --- .../examples/add-node-on-drop/Flow.svelte | 2 +- packages/svelte/src/lib/actions/drag/index.ts | 5 ++--- packages/svelte/src/lib/actions/zoom/index.ts | 20 ++++++++++++------ .../src/lib/components/Handle/Handle.svelte | 4 ++-- .../svelte/src/lib/container/Pane/Pane.svelte | 4 ++-- .../container/SvelteFlow/SvelteFlow.svelte | 7 +------ .../lib/container/Viewport/Viewport.svelte | 7 ++++--- .../svelte/src/lib/container/Zoom/Zoom.svelte | 6 ++++-- .../svelte/src/lib/container/Zoom/types.ts | 3 +-- .../src/lib/hooks/useSvelteFlow.svelte.ts | 20 ++++++++---------- .../lib/plugins/Background/Background.svelte | 14 ++++++------- .../src/lib/plugins/Controls/Controls.svelte | 5 ++--- .../src/lib/plugins/Minimap/Minimap.svelte | 11 +++++----- .../src/lib/plugins/Minimap/interactive.ts | 13 ++++-------- .../plugins/NodeResizer/ResizeControl.svelte | 21 ++++++++++--------- .../plugins/NodeToolbar/NodeToolbar.svelte | 11 +++++----- packages/svelte/src/lib/store/index.ts | 7 +++---- .../src/lib/store/initial-store.svelte.ts | 15 ++++++------- packages/svelte/src/lib/store/types.ts | 2 +- 19 files changed, 87 insertions(+), 90 deletions(-) diff --git a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte index 53d7aa82..25a7c2ad 100644 --- a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte +++ b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte @@ -27,7 +27,7 @@ let id = 1; const getId = () => `${id++}`; - const { screenToFlowPosition, flowToScreenPosition } = useSvelteFlow(); + const { screenToFlowPosition, flowToScreenPosition } = $derived(useSvelteFlow()); const handleConnectEnd: OnConnectEnd = (event) => { if (!connectingNodeId) return; diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts index 08848ffe..2b3ef6ec 100644 --- a/packages/svelte/src/lib/actions/drag/index.ts +++ b/packages/svelte/src/lib/actions/drag/index.ts @@ -25,8 +25,7 @@ export default function drag(domNode: Element, params: UseDragParams) { onDragStop, onNodeMouseDown, getStoreItems: () => { - const snapGrid = store.snapGrid; - const vp = get(store.viewport); + const { snapGrid, viewport } = store; return { nodes: get(store.nodes), @@ -38,7 +37,7 @@ export default function drag(domNode: Element, params: UseDragParams) { nodeOrigin: store.nodeOrigin, multiSelectionActive: store.multiselectionKeyPressed, domNode: store.domNode, - transform: [vp.x, vp.y, vp.zoom], + transform: [viewport.x, viewport.y, viewport.zoom], autoPanOnNodeDrag: store.autoPanOnNodeDrag, nodesDraggable: store.nodesDraggable, selectNodesOnDrag: store.selectNodesOnDrag, diff --git a/packages/svelte/src/lib/actions/zoom/index.ts b/packages/svelte/src/lib/actions/zoom/index.ts index 36eff896..48d31bfc 100644 --- a/packages/svelte/src/lib/actions/zoom/index.ts +++ b/packages/svelte/src/lib/actions/zoom/index.ts @@ -1,4 +1,3 @@ -import type { Writable } from 'svelte/store'; import { PanOnScrollMode, XYPanZoom, @@ -10,7 +9,7 @@ import { } from '@xyflow/system'; type ZoomParams = { - viewport: Writable; + viewport: Viewport; initialViewport: Viewport; minZoom: number; maxZoom: number; @@ -45,11 +44,11 @@ export default function zoom(domNode: Element, params: ZoomParams) { minZoom, maxZoom, initialViewport, - viewport, translateExtent, paneClickDistance, setPanZoomInstance, - onDraggingChange + onDraggingChange, + onTransformChange } = params; const panZoomInstance = XYPanZoom({ @@ -61,8 +60,17 @@ export default function zoom(domNode: Element, params: ZoomParams) { paneClickDistance, onDraggingChange }); - const currentViewport = panZoomInstance.getViewport(); - viewport.set(currentViewport); + + //TODO: is this neccessary? + const viewport = panZoomInstance.getViewport(); + if ( + initialViewport.x !== viewport.x || + initialViewport.y !== viewport.y || + initialViewport.zoom !== viewport.zoom + ) { + onTransformChange([viewport.x, viewport.y, viewport.zoom]); + } + setPanZoomInstance(panZoomInstance); panZoomInstance.update(params); diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index eb847c44..f0da0103 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -40,7 +40,7 @@ ); let store = useStore(); - let { viewport, edges } = store; + let { edges } = store; function onPointerDown(event: MouseEvent | TouchEvent) { const isMouseTriggered = isMouseEvent(event); @@ -81,7 +81,7 @@ onConnectEnd: (event, connectionState) => { store.onconnectend?.(event, connectionState); }, - getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom], + getTransform: () => [store.viewport.x, store.viewport.y, store.viewport.zoom], getFromHandle: () => store.connection.fromHandle }); } diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte index c0242604..22178ac1 100644 --- a/packages/svelte/src/lib/container/Pane/Pane.svelte +++ b/packages/svelte/src/lib/container/Pane/Pane.svelte @@ -45,7 +45,7 @@ children }: PaneProps = $props(); - const { viewport, nodes, edges } = store; + const { nodes, edges } = store; // svelte-ignore non_reactive_update let container: HTMLDivElement; @@ -131,7 +131,7 @@ selectedNodes = getNodesInside( store.nodeLookup, nextUserSelectRect, - [$viewport.x, $viewport.y, $viewport.zoom], + [store.viewport.x, store.viewport.y, store.viewport.zoom], store.selectionMode === SelectionMode.Partial, true ); diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 4b815e69..1b74e198 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -1,5 +1,4 @@
{@render children()}
diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte index 1f57042a..4e07fcac 100644 --- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte +++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte @@ -8,7 +8,6 @@ let { store, - initialViewport = { x: 0, y: 0, zoom: 1 }, onMoveStart, onMove, onMoveEnd, @@ -27,7 +26,10 @@ let panOnScrollActive = $derived(store.panActivationKeyPressed || panOnScroll); const onTransformChange = (transform: Transform) => - store.viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] }); + (store.viewport = { x: transform[0], y: transform[1], zoom: transform[2] }); + + // We extract the initial value by destructuring + const { viewport: initialViewport } = store; onMount(() => { store.viewportInitialized = true; diff --git a/packages/svelte/src/lib/container/Zoom/types.ts b/packages/svelte/src/lib/container/Zoom/types.ts index 5f95920c..d521e09b 100644 --- a/packages/svelte/src/lib/container/Zoom/types.ts +++ b/packages/svelte/src/lib/container/Zoom/types.ts @@ -1,10 +1,9 @@ import type { SvelteFlowStore } from '$lib/store/types'; -import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system'; +import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode } from '@xyflow/system'; import type { Snippet } from 'svelte'; export type ZoomProps = { store: SvelteFlowStore; - initialViewport?: Viewport; panOnScrollMode: PanOnScrollMode; onMove?: OnMove; onMoveStart?: OnMoveStart; diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts index 43e60164..c73923ff 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts @@ -1,4 +1,4 @@ -import { get, type Writable } from 'svelte/store'; +import { get } from 'svelte/store'; import { getOverlappingArea, isRectObject, @@ -197,7 +197,6 @@ export function useSvelteFlow(): { * const clientPosition = flowToScreenPosition({ x: node.position.x, y: node.position.y }) */ flowToScreenPosition: (flowPosition: XYPosition) => XYPosition; - viewport: Writable; /** * Updates a node. * @@ -279,7 +278,7 @@ export function useSvelteFlow(): { } const store = useStore(); - const { viewport, 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)!; @@ -378,9 +377,9 @@ export function useSvelteFlow(): { ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false); }, - getZoom: () => get(viewport).zoom, + getZoom: () => store.viewport.zoom, setViewport: async (nextViewport, options) => { - const currentViewport = get(viewport); + const currentViewport = store.viewport; if (!store.panZoom) { return Promise.resolve(false); @@ -397,7 +396,7 @@ export function useSvelteFlow(): { return Promise.resolve(true); }, - getViewport: () => get(viewport), + getViewport: () => store.viewport, setCenter: async (x, y, options) => { const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom; const currentPanZoom = store.panZoom; @@ -513,7 +512,7 @@ export function useSvelteFlow(): { } const _snapGrid = options.snapToGrid ? store.snapGrid : false; - const { x, y, zoom } = get(viewport); + const { x, y, zoom } = store.viewport; const { x: domX, y: domY } = store.domNode.getBoundingClientRect(); const correctedPosition = { x: position.x - domX, @@ -537,7 +536,7 @@ export function useSvelteFlow(): { return position; } - const { x, y, zoom } = get(viewport); + const { x, y, zoom } = store.viewport; const { x: domX, y: domY } = store.domNode.getBoundingClientRect(); const rendererPosition = rendererPointToPoint(position, [x, y, zoom]); @@ -557,7 +556,7 @@ export function useSvelteFlow(): { data: { ...node.data } })), edges: get(edges).map((edge) => ({ ...edge })), - viewport: { ...get(viewport) } + viewport: { ...store.viewport } }; }, updateNode, @@ -579,8 +578,7 @@ export function useSvelteFlow(): { return getNodesBounds(nodes, { nodeLookup: store.nodeLookup, nodeOrigin: store.nodeOrigin }); }, getHandleConnections: ({ type, id, nodeId }) => - Array.from(store.connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? []), - viewport + Array.from(store.connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? []) }; } function getElements(lookup: Map, ids: string[]): Node[]; diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte index 13e46d2a..73754243 100644 --- a/packages/svelte/src/lib/plugins/Background/Background.svelte +++ b/packages/svelte/src/lib/plugins/Background/Background.svelte @@ -28,9 +28,6 @@ }: BackgroundProps = $props(); const store = useStore(); - const { viewport } = store; - - $inspect($viewport); const patternSize = size ?? defaultSize[variant!]; const isDots = variant === BackgroundVariant.Dots; @@ -38,8 +35,11 @@ const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!]; let patternId = $derived(`background-pattern-${store.flowId}-${id ?? ''}`); - let scaledGap = $derived([gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]); - let scaledSize = $derived(patternSize * $viewport.zoom); + let scaledGap = $derived([ + gapXY[0] * store.viewport.zoom || 1, + gapXY[1] * store.viewport.zoom || 1 + ]); + let scaledSize = $derived(patternSize * store.viewport.zoom); let patternDimensions = $derived( (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number] ); @@ -56,8 +56,8 @@ > = store.maxZoom); + let minZoomReached = $derived(store.viewport.zoom <= store.minZoom); + let maxZoomReached = $derived(store.viewport.zoom >= store.maxZoom); let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical'); const onZoomInHandler = () => { diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte index 97412edb..65e6d572 100644 --- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte @@ -43,7 +43,6 @@ }: MiniMapProps = $props(); let store = useStore(); - const { viewport } = store; let nodes = $derived(store.nodes); @@ -58,10 +57,10 @@ // TODO: simplify this let viewBB = $derived({ - x: -$viewport.x / $viewport.zoom, - y: -$viewport.y / $viewport.zoom, - width: store.width / $viewport.zoom, - height: store.height / $viewport.zoom + x: -store.viewport.x / store.viewport.zoom, + y: -store.viewport.y / store.viewport.zoom, + width: store.width / store.viewport.zoom, + height: store.height / store.viewport.zoom }); let boundingRect = $derived( store.nodeLookup.size > 0 @@ -102,8 +101,8 @@ ? maskStrokeWidth * viewScale : undefined} use:interactive={{ + store, panZoom: store.panZoom, - viewport: store.viewport, getViewScale, translateExtent: store.translateExtent, width: store.width, diff --git a/packages/svelte/src/lib/plugins/Minimap/interactive.ts b/packages/svelte/src/lib/plugins/Minimap/interactive.ts index 064f0d27..41015852 100644 --- a/packages/svelte/src/lib/plugins/Minimap/interactive.ts +++ b/packages/svelte/src/lib/plugins/Minimap/interactive.ts @@ -1,14 +1,9 @@ -import { get, type Writable } from 'svelte/store'; -import { - XYMinimap, - type PanZoomInstance, - type Viewport, - type XYMinimapUpdate -} from '@xyflow/system'; +import { XYMinimap, type PanZoomInstance, type XYMinimapUpdate } from '@xyflow/system'; +import type { SvelteFlowStore } from '$lib/store/types'; export type UseInteractiveParams = { panZoom: PanZoomInstance; - viewport: Writable; + store: SvelteFlowStore; getViewScale: () => number; } & XYMinimapUpdate; @@ -17,7 +12,7 @@ export default function interactive(domNode: Element, params: UseInteractivePara domNode, panZoom: params.panZoom, getTransform: () => { - const viewport = get(params.viewport); + const { viewport } = params.store; return [viewport.x, viewport.y, viewport.zoom]; }, getViewScale: params.getViewScale diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index 415899ed..f78fba12 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -11,6 +11,7 @@ type XYResizerChildChange } from '@xyflow/system'; import type { ResizeControlProps } from './types'; + import { get } from 'svelte/store'; let { nodeId, @@ -31,7 +32,7 @@ children }: ResizeControlProps = $props(); - const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore(); + const store = useStore(); let id = $derived( typeof nodeId === 'string' ? nodeId : getContext('svelteflow__node_id') @@ -62,16 +63,16 @@ nodeId: id, getStoreItems: () => { return { - nodeLookup: $nodeLookup, - transform: [$viewport.x, $viewport.y, $viewport.zoom], - snapGrid: $snapGrid ?? undefined, - snapToGrid: !!$snapGrid, - nodeOrigin: $nodeOrigin, - paneDomNode: $domNode + nodeLookup: store.nodeLookup, + transform: [store.viewport.x, store.viewport.y, store.viewport.zoom], + snapGrid: store.snapGrid ?? undefined, + snapToGrid: !!store.snapGrid, + nodeOrigin: store.nodeOrigin, + paneDomNode: store.domNode }; }, onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => { - const node = $nodeLookup.get(id)?.internals.userNode; + const node = store.nodeLookup.get(id)?.internals.userNode; if (!node) { return; } @@ -86,13 +87,13 @@ } for (const childChange of childChanges) { - const childNode = $nodeLookup.get(childChange.id)?.internals.userNode; + const childNode = store.nodeLookup.get(childChange.id)?.internals.userNode; if (childNode) { childNode.position = childChange.position; } } - $nodes = $nodes; + store.nodes.set(get(store.nodes)); } }); } diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte index 6607f3c3..04dd8bc1 100644 --- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte +++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte @@ -18,7 +18,8 @@ children }: NodeToolbarProps = $props(); - const { domNode, viewport, nodeLookup, nodes } = useStore(); + const store = useStore(); + const { nodes } = store; const { getNodesBounds } = useSvelteFlow(); const contextNodeId = getContext('svelteflow__node_id'); @@ -28,7 +29,7 @@ const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId]; return nodeIds.reduce((res, nodeId) => { - const node = $nodeLookup.get(nodeId); + const node = store.nodeLookup.get(nodeId); if (node) { res.push(node); @@ -41,7 +42,7 @@ let transform: string = $derived.by(() => { const nodeRect = getNodesBounds(toolbarNodes); if (nodeRect) { - return getNodeToolbarTransform(nodeRect, $viewport, position, offset, align); + return getNodeToolbarTransform(nodeRect, store.viewport, position, offset, align); } return ''; }); @@ -63,11 +64,11 @@ ); -{#if $domNode && isActive && toolbarNodes} +{#if store.domNode && isActive && toolbarNodes}
`${acc}${node.id} `, '').trim()} class="svelte-flow__node-toolbar" - use:portal={{ domNode: $domNode }} + use:portal={{ domNode: store.domNode }} style:position="absolute" style:transform style:z-index={zIndex} diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 54847c29..d6856204 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -22,7 +22,7 @@ import { import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types'; import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store.svelte'; import { type StoreSignals, type SvelteFlowStore, type SvelteFlowStoreActions } from './types'; -import { syncNodeStores, syncEdgeStores, syncViewportStores } from './utils'; +import { syncNodeStores, syncEdgeStores } from './utils'; // import { getVisibleEdges } from './visible-edges'; // import { getVisibleNodes } from './visible-nodes'; @@ -314,11 +314,10 @@ export function createStore(signals: StoreSignals): SvelteFlowStore { } function panBy(delta: XYPosition) { - const viewport = get(store.viewport); return panBySystem({ delta, panZoom: store.panZoom, - transform: [viewport.x, viewport.y, viewport.zoom], + transform: [store.viewport.x, store.viewport.y, store.viewport.zoom], translateExtent: store.translateExtent, width: store.width, height: store.height @@ -346,7 +345,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore { const storeWithActions = Object.assign(store, { syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes), syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges), - syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport), + // syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport), setNodeTypes, setEdgeTypes, addEdge, diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts index b4505e3f..d70676c5 100644 --- a/packages/svelte/src/lib/store/initial-store.svelte.ts +++ b/packages/svelte/src/lib/store/initial-store.svelte.ts @@ -118,9 +118,7 @@ export const getInitialStore = (signals: StoreSignals) => { nodeTypes: NodeTypes = $derived({ ...initialNodeTypes, ...signals.props.nodeTypes }); edgeTypes: EdgeTypes = $derived({ ...initialEdgeTypes, ...signals.props.edgeTypes }); - viewport: Writable = writable( - signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 } - ); + viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 }); connectionMode: ConnectionMode = $derived( signals.props.connectionMode ?? ConnectionMode.Strict @@ -128,10 +126,13 @@ export const getInitialStore = (signals: StoreSignals) => { rawConnection: ConnectionState = $state(initialConnection); connection: ConnectionState = $derived.by(() => { if (this.rawConnection.inProgress) { - const viewport = get(this.viewport); return { ...this.rawConnection, - to: pointToRendererPoint(this.rawConnection.to, [viewport.x, viewport.y, viewport.zoom]) + to: pointToRendererPoint(this.rawConnection.to, [ + this.viewport.x, + this.viewport.y, + this.viewport.zoom + ]) }; } else { return { ...this.rawConnection }; @@ -210,12 +211,12 @@ export const getInitialStore = (signals: StoreSignals) => { this.edges = createEdgesStore(edges, this.connectionLookup, this.edgeLookup); updateConnectionLookup(this.connectionLookup, this.edgeLookup, edges); - if (signals.props.fitView && this.width && this.height) { + if (signals.props.fitView && !signals.props.initialViewport && this.width && this.height) { const bounds = getInternalNodesBounds(this.nodeLookup, { filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)) }); - this.viewport.set(getViewportForBounds(bounds, this.width, this.height, 0.5, 2, 0.1)); + this.viewport = getViewportForBounds(bounds, this.width, this.height, 0.5, 2, 0.1); } } diff --git a/packages/svelte/src/lib/store/types.ts b/packages/svelte/src/lib/store/types.ts index 1c20231c..fb963a64 100644 --- a/packages/svelte/src/lib/store/types.ts +++ b/packages/svelte/src/lib/store/types.ts @@ -17,7 +17,7 @@ import type { SvelteFlowProps } from '$lib/container/SvelteFlow'; export type SvelteFlowStoreActions = { syncNodeStores: (nodesStore: Writable) => void; syncEdgeStores: (edgeStore: Writable) => void; - syncViewport: (viewportStore?: Writable) => void; + // syncViewport: (viewportStore?: Writable) => void; setNodeTypes: (nodeTypes: NodeTypes) => void; setEdgeTypes: (edgeTypes: EdgeTypes) => void; addEdge: (edge: Edge | Connection) => void;