diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 715d8837..09110529 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -223,7 +223,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 f830baf7..32bef5d0 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -131,8 +131,12 @@ {nodeTypes} {edgeTypes} fitView - minZoom={0.1} - maxZoom={2.5} + fitViewOptions={{ + padding: 0.1, + nodes: [{ id: '1' }, { id: '2' }, { id: '3' }] + }} + minZoom={0} + maxZoom={Infinity} selectionMode={SelectionMode.Full} initialViewport={{ x: 100, y: 100, zoom: 2 }} snapGrid={[25, 25]} diff --git a/examples/svelte/src/routes/validation/+page.svelte b/examples/svelte/src/routes/validation/+page.svelte index 1c72199e..c973e193 100644 --- a/examples/svelte/src/routes/validation/+page.svelte +++ b/examples/svelte/src/routes/validation/+page.svelte @@ -32,9 +32,21 @@ const edges = writable([]); const isValidConnection: IsValidConnection = (connection) => connection.target === 'B'; + + const defaultEdgeOptions = { + animated: true + }; - + diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 51ba3eff..2f27da45 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(nextNodes, { + ...fitViewOnInitOptions, + nodes: fitViewOnInitOptions?.nodes || nextNodes, + }); + } set({ nodes: nextNodes, fitViewDone: nextFitViewDone }); @@ -241,9 +241,8 @@ const createRFStore = () => const { transform, width, height, panZoom, translateExtent } = get(); return panBySystem({ delta, panZoom, transform, translateExtent, width, height }); }, - fitView: (options?: FitViewOptions): boolean => { - const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get(); - const fitViewNodes = options?.nodes || nodes; + fitView: (nodes: Node[], options?: FitViewOptions): boolean => { + const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get(); if (!panZoom) { return false; @@ -251,7 +250,7 @@ const createRFStore = () => return fitViewSystem( { - nodes: fitViewNodes as Node[], + nodes, width, height, panZoom, diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index 7fff1f73..36e79220 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -155,7 +155,7 @@ export type ReactFlowActions = { reset: () => void; triggerNodeChanges: (changes: NodeChange[]) => void; panBy: PanBy; - fitView: (options?: FitViewOptions) => boolean; + fitView: (nodes: Node[], options?: FitViewOptions) => boolean; }; export type ReactFlowState = ReactFlowStore & ReactFlowActions; diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 8835c19a..4831278d 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -1,9 +1,23 @@ {#each $edgeTree as group (group.level)} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 600622ce..6c47f37e 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 }; @@ -57,6 +58,7 @@ export let onError: $$Props['onError'] = undefined; export let attributionPosition: $$Props['attributionPosition'] = undefined; export let proOptions: $$Props['proOptions'] = undefined; + export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined; export let defaultMarkerColor = '#b1b1b7'; @@ -81,6 +83,10 @@ store.fitViewOnInit.set(fitView); } + if (fitViewOptions) { + store.fitViewOptions.set(fitViewOptions); + } + updateStore(store, { nodeTypes, edgeTypes, @@ -153,7 +159,7 @@ > - +
& { @@ -33,6 +41,7 @@ export type SvelteFlowProps = DOMAttributes & { panActivationKey?: KeyDefinition; deleteKey?: KeyDefinition; fitView?: boolean; + fitViewOptions?: FitViewOptions; nodeOrigin?: NodeOrigin; minZoom?: number; maxZoom?: number; @@ -58,6 +67,7 @@ export type SvelteFlowProps = DOMAttributes & { autoPanOnNodeDrag?: boolean; attributionPosition?: PanelPosition; proOptions?: ProOptions; + defaultEdgeOptions?: DefaultEdgeOptions; class?: string; style?: string; 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..3da50ebc 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -171,7 +171,7 @@ export function fitView, Options exte options?: Options ) { const filteredNodes = nodes.filter((n) => { - const isVisible = options?.includeHiddenNodes ? n.width && n.height : !n.hidden; + const isVisible = n.width && n.height && (options?.includeHiddenNodes || !n.hidden); if (options?.nodes?.length) { return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id); @@ -180,10 +180,8 @@ export function fitView, Options exte return isVisible; }); - const nodesInitialized = filteredNodes.every((n) => n.width && n.height); - - if (nodes.length > 0 && nodesInitialized) { - const bounds = getRectOfNodes(nodes, nodeOrigin); + if (filteredNodes.length > 0) { + const bounds = getRectOfNodes(filteredNodes, nodeOrigin); const [x, y, zoom] = getTransformForBounds( bounds,