From ada5b946739fcd7c23b52cdbf145551b4b93f92a Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 25 Sep 2023 12:58:04 +0200 Subject: [PATCH] feat(svelte) add fitViewOptions, closes #3440 --- .../react/src/examples/Overview/index.tsx | 4 +- .../svelte/src/routes/overview/+page.svelte | 12 ++++- packages/react/src/store/index.ts | 17 +++--- .../container/SvelteFlow/SvelteFlow.svelte | 5 ++ .../src/lib/container/SvelteFlow/types.ts | 4 +- packages/svelte/src/lib/store/index.ts | 54 ++++++++++--------- .../svelte/src/lib/store/initial-store.ts | 10 +++- packages/system/src/utils/general.ts | 2 +- packages/system/src/utils/graph.ts | 7 +-- 9 files changed, 71 insertions(+), 44 deletions(-) diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 233aa76c..6dbe2663 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -199,7 +199,7 @@ const OverviewFlow = () => { onConnect={onConnect} onPaneClick={onPaneClick} onPaneScroll={onPaneScroll} - onPaneContextMenu={onPaneContextMenu} + // onPaneContextMenu={onPaneContextMenu} onNodeDragStart={onNodeDragStart} onNodeDrag={onNodeDrag} onNodeDragStop={onNodeDragStop} @@ -221,7 +221,7 @@ const OverviewFlow = () => { onEdgeMouseLeave={onEdgeMouseLeave} onEdgeDoubleClick={onEdgeDoubleClick} fitView - fitViewOptions={{ padding: 0.2 }} + fitViewOptions={{ padding: 0.1, nodes: [{ id: '1' }] }} attributionPosition="top-right" maxZoom={Infinity} onNodesDelete={onNodesDelete} diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 0ba5e4da..6ca40dee 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -130,8 +130,16 @@ {nodeTypes} {edgeTypes} fitView - minZoom={0.1} - maxZoom={2.5} + fitViewOptions={{ + padding: 10, + nodes: [ + { + id: '1' + } + ] + }} + minZoom={0} + maxZoom={Infinity} selectionMode={SelectionMode.Full} initialViewport={{ x: 100, y: 100, zoom: 2 }} snapGrid={[25, 25]} diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 51ba3eff..a2a597f6 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -80,13 +80,13 @@ const createRFStore = () => const nextNodes = updateAbsolutePositions(updatedNodes, nodeOrigin); - const nextFitViewDone = - fitViewDone || - (fitViewOnInit && - fitView({ - ...fitViewOnInitOptions, - nodes: nextNodes, - })); + let nextFitViewDone = fitViewDone; + if (!fitViewDone && fitViewOnInit) { + nextFitViewDone = fitView({ + ...fitViewOnInitOptions, + nodes: fitViewOnInitOptions?.nodes || nextNodes, + }); + } set({ nodes: nextNodes, fitViewDone: nextFitViewDone }); @@ -243,7 +243,6 @@ const createRFStore = () => }, fitView: (options?: FitViewOptions): boolean => { const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get(); - const fitViewNodes = options?.nodes || nodes; if (!panZoom) { return false; @@ -251,7 +250,7 @@ const createRFStore = () => return fitViewSystem( { - nodes: fitViewNodes as Node[], + nodes, width, height, panZoom, diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index cec7597d..93cb0f9d 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -23,6 +23,7 @@ export let nodes: $$Props['nodes']; export let edges: $$Props['edges']; export let fitView: $$Props['fitView'] = undefined; + export let fitViewOptions: $$Props['fitViewOptions'] = undefined; export let minZoom: $$Props['minZoom'] = undefined; export let maxZoom: $$Props['maxZoom'] = undefined; export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 }; @@ -79,6 +80,10 @@ store.fitViewOnInit.set(fitView); } + if (fitViewOptions) { + store.fitViewOptions.set(fitViewOptions); + } + updateStore(store, { nodeTypes, edgeTypes, diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 3194ffef..2585e0fd 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -23,7 +23,8 @@ import type { NodeTypes, KeyDefinition, EdgeTypes, - DefaultEdgeOptions + DefaultEdgeOptions, + FitViewOptions } from '$lib/types'; import type { Writable } from 'svelte/store'; @@ -37,6 +38,7 @@ export type SvelteFlowProps = DOMAttributes & { panActivationKey?: KeyDefinition; deleteKey?: KeyDefinition; fitView?: boolean; + fitViewOptions?: FitViewOptions; nodeOrigin?: NodeOrigin; minZoom?: number; maxZoom?: number; diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 08fc8b90..dffae5f3 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -90,13 +90,39 @@ export function createStore(): SvelteFlowStore { return; } - const fitViewOnInitDone = - get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && fitView({ nodes: nextNodes })); + if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) { + const fitViewOptions = get(store.fitViewOptions); + const fitViewOnInitDone = fitView(nextNodes, { + ...fitViewOptions, + nodes: fitViewOptions?.nodes || nextNodes + }); + store.fitViewOnInitDone.set(fitViewOnInitDone); + } - store.fitViewOnInitDone.set(fitViewOnInitDone); store.nodes.set(nextNodes); } + function fitView(nodes: Node[], options?: FitViewOptions) { + const panZoom = get(store.panZoom); + + if (!panZoom) { + return false; + } + + return fitViewUtil( + { + nodes, + width: get(store.width), + height: get(store.height), + minZoom: get(store.minZoom), + maxZoom: get(store.maxZoom), + panZoom, + nodeOrigin: get(store.nodeOrigin) + }, + options + ); + } + function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) { const panZoom = get(store.panZoom); @@ -140,28 +166,6 @@ export function createStore(): SvelteFlowStore { } } - function fitView(options?: FitViewOptions) { - const panZoom = get(store.panZoom); - const fitViewNodes = options?.nodes || get(store.nodes); - - if (!panZoom) { - return false; - } - - return fitViewUtil( - { - nodes: fitViewNodes as Node[], - width: get(store.width), - height: get(store.height), - minZoom: get(store.minZoom), - maxZoom: get(store.maxZoom), - panZoom, - nodeOrigin: get(store.nodeOrigin) - }, - {} - ); - } - function resetSelectedItem(item: T) { if (item.selected) { return { diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index f3e69b9e..1c82f301 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -24,7 +24,14 @@ 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 type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types'; +import type { + ConnectionData, + NodeTypes, + EdgeTypes, + EdgeLayouted, + Node, + FitViewOptions +} from '$lib/types'; import { createNodesStore, createEdgesStore } from './utils'; export const initConnectionData = { @@ -64,6 +71,7 @@ export const getInitialStore = () => ({ autoPanOnConnect: writable(true), fitViewOnInit: writable(false), fitViewOnInitDone: writable(false), + fitViewOptions: writable(undefined), panZoom: writable(null), snapGrid: writable(null), dragging: writable(false), diff --git a/packages/system/src/utils/general.ts b/packages/system/src/utils/general.ts index 0bad94c9..11bbb902 100644 --- a/packages/system/src/utils/general.ts +++ b/packages/system/src/utils/general.ts @@ -160,7 +160,7 @@ export const getTransformForBounds = ( height: number, minZoom: number, maxZoom: number, - padding = 0.1 + padding: number ): Transform => { const xZoom = width / (bounds.width * (1 + padding)); const yZoom = height / (bounds.height * (1 + padding)); diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index cde43bd8..b5e61562 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -180,10 +180,11 @@ export function fitView, Options exte return isVisible; }); - const nodesInitialized = filteredNodes.every((n) => n.width && n.height); + console.log(filteredNodes); - if (nodes.length > 0 && nodesInitialized) { - const bounds = getRectOfNodes(nodes, nodeOrigin); + if (filteredNodes.length > 0) { + const bounds = getRectOfNodes(filteredNodes, nodeOrigin); + console.log(bounds); const [x, y, zoom] = getTransformForBounds( bounds,