From 339df4c651b81e21e38907eff884770cdd88f8d4 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 25 Sep 2023 10:36:31 +0200 Subject: [PATCH 1/7] feat(svelte) add defaultEdgeOptions, closes #3437 --- examples/svelte/src/routes/overview/+page.svelte | 3 +++ .../lib/container/EdgeRenderer/EdgeRenderer.svelte | 13 ++++++++++++- .../src/lib/container/SvelteFlow/SvelteFlow.svelte | 3 ++- .../svelte/src/lib/container/SvelteFlow/types.ts | 10 +++++++++- 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 05bc506b..0ba5e4da 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -161,6 +161,9 @@ }} autoPanOnConnect autoPanOnNodeDrag + defaultEdgeOptions={{ + hidden: false + }} > diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 0658f47a..19f6848d 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -2,8 +2,19 @@ import { EdgeWrapper } from '$lib/components/EdgeWrapper'; import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition'; import { useStore } from '$lib/store'; + import type { DefaultEdgeOptions } from '$lib/types'; - const { width, height, elementsSelectable, edgeTree } = useStore(); + export let defaultOptions: DefaultEdgeOptions | undefined; + + const { + width, + height, + elementsSelectable, + edgeTree, + edges: { setDefaultOptions } + } = useStore(); + + $: if (defaultOptions) setDefaultOptions(defaultOptions); {#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 d6e55ee2..cec7597d 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -54,6 +54,7 @@ export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true; export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true; export let onError: $$Props['onError'] = undefined; + export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined; export let defaultMarkerColor = '#b1b1b7'; @@ -149,7 +150,7 @@ > - +
& { @@ -52,6 +59,7 @@ export type SvelteFlowProps = DOMAttributes & { onlyRenderVisibleElements?: boolean; autoPanOnConnect?: boolean; autoPanOnNodeDrag?: boolean; + defaultEdgeOptions?: DefaultEdgeOptions; class?: string; style?: string; From ada5b946739fcd7c23b52cdbf145551b4b93f92a Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 25 Sep 2023 12:58:04 +0200 Subject: [PATCH 2/7] 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, From 439916e619ebf603529c76ba4e3817c9696160a7 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 25 Sep 2023 13:46:22 +0200 Subject: [PATCH 3/7] fix(react) fitViewOptions.nodes are now working as intended --- examples/react/src/examples/Overview/index.tsx | 2 +- examples/svelte/src/routes/overview/+page.svelte | 2 +- packages/react/src/store/index.ts | 6 +++--- packages/react/src/types/store.ts | 2 +- packages/system/src/utils/graph.ts | 5 +---- 5 files changed, 7 insertions(+), 10 deletions(-) diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 6dbe2663..eb8a8b95 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -221,7 +221,7 @@ const OverviewFlow = () => { onEdgeMouseLeave={onEdgeMouseLeave} onEdgeDoubleClick={onEdgeDoubleClick} fitView - fitViewOptions={{ padding: 0.1, nodes: [{ id: '1' }] }} + 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 6ca40dee..dc3bbbc4 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -131,7 +131,7 @@ {edgeTypes} fitView fitViewOptions={{ - padding: 10, + padding: 0.1, nodes: [ { id: '1' diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index a2a597f6..2f27da45 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -82,7 +82,7 @@ const createRFStore = () => let nextFitViewDone = fitViewDone; if (!fitViewDone && fitViewOnInit) { - nextFitViewDone = fitView({ + nextFitViewDone = fitView(nextNodes, { ...fitViewOnInitOptions, nodes: fitViewOnInitOptions?.nodes || nextNodes, }); @@ -241,8 +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(); + fitView: (nodes: Node[], options?: FitViewOptions): boolean => { + const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get(); if (!panZoom) { return false; 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/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index b5e61562..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,11 +180,8 @@ export function fitView, Options exte return isVisible; }); - console.log(filteredNodes); - if (filteredNodes.length > 0) { const bounds = getRectOfNodes(filteredNodes, nodeOrigin); - console.log(bounds); const [x, y, zoom] = getTransformForBounds( bounds, From e56e6a9a6b02a3511904b34e780fcf179e52b782 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 26 Sep 2023 10:20:13 +0200 Subject: [PATCH 4/7] fix(svelte) only updated defaultEdgeOptions once on Mount --- examples/svelte/src/routes/overview/+page.svelte | 2 +- .../src/lib/container/EdgeRenderer/EdgeRenderer.svelte | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 0ba5e4da..2056c619 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -162,7 +162,7 @@ autoPanOnConnect autoPanOnNodeDrag defaultEdgeOptions={{ - hidden: false + // animated: true }} > diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index 19f6848d..babac217 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -3,6 +3,7 @@ import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition'; import { useStore } from '$lib/store'; import type { DefaultEdgeOptions } from '$lib/types'; + import { onMount } from 'svelte'; export let defaultOptions: DefaultEdgeOptions | undefined; @@ -14,7 +15,9 @@ edges: { setDefaultOptions } } = useStore(); - $: if (defaultOptions) setDefaultOptions(defaultOptions); + onMount(() => { + if (defaultOptions) setDefaultOptions(defaultOptions); + }); {#each $edgeTree as group (group.level)} @@ -27,7 +30,6 @@ edge.selectable || ($elementsSelectable && typeof edge.selectable === 'undefined') )} - {/each} From 5d742b4d9c27c7809df734b0d06fc9c981e15626 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 26 Sep 2023 10:57:02 +0200 Subject: [PATCH 5/7] pull request review --- examples/svelte/src/routes/overview/+page.svelte | 3 --- .../src/lib/container/EdgeRenderer/EdgeRenderer.svelte | 6 +++--- .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 2056c619..05bc506b 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -161,9 +161,6 @@ }} autoPanOnConnect autoPanOnNodeDrag - defaultEdgeOptions={{ - // animated: true - }} > diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index babac217..d9c8602c 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -1,11 +1,11 @@ diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index cec7597d..6a7c416b 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -150,7 +150,7 @@ > - +
Date: Tue, 26 Sep 2023 11:17:21 +0200 Subject: [PATCH 6/7] pull request review --- examples/react/src/examples/Overview/index.tsx | 2 +- examples/svelte/src/routes/overview/+page.svelte | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 904f31d6..09110529 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -201,7 +201,7 @@ const OverviewFlow = () => { onConnect={onConnect} onPaneClick={onPaneClick} onPaneScroll={onPaneScroll} - // onPaneContextMenu={onPaneContextMenu} + onPaneContextMenu={onPaneContextMenu} onNodeDragStart={onNodeDragStart} onNodeDrag={onNodeDrag} onNodeDragStop={onNodeDragStop} diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 4dcd9149..ac9394ed 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -133,11 +133,7 @@ fitView fitViewOptions={{ padding: 0.1, - nodes: [ - { - id: '1' - } - ] + nodes: [{ id: '1' }] }} minZoom={0} maxZoom={Infinity} From b3329253ed1a4480feffaa9aaacaa4ea6a453c49 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 26 Sep 2023 12:46:32 +0200 Subject: [PATCH 7/7] chore(svelte): cleanup examples --- examples/svelte/src/routes/overview/+page.svelte | 2 +- examples/svelte/src/routes/validation/+page.svelte | 14 +++++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index ac9394ed..32bef5d0 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -133,7 +133,7 @@ fitView fitViewOptions={{ padding: 0.1, - nodes: [{ id: '1' }] + nodes: [{ id: '1' }, { id: '2' }, { id: '3' }] }} minZoom={0} maxZoom={Infinity} 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 + }; - +