From 1a935de3f99f00f02aae6fdcf165a10da0ae56f2 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 21 Sep 2023 16:00:53 +0200 Subject: [PATCH] feat(svelte): add onError prop closes #3423 --- .../container/SvelteFlow/SvelteFlow.svelte | 36 ++++++++++--------- .../src/lib/container/SvelteFlow/types.ts | 4 ++- .../src/lib/container/SvelteFlow/utils.ts | 1 + packages/svelte/src/lib/store/edge-tree.ts | 8 ++--- packages/svelte/src/lib/store/index.ts | 9 ++--- .../svelte/src/lib/store/initial-store.ts | 9 +++-- packages/svelte/src/lib/store/types.ts | 4 +-- 7 files changed, 36 insertions(+), 35 deletions(-) diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index a24d7aaa..d6e55ee2 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -19,7 +19,7 @@ type $$Props = SvelteFlowProps; - export let id = '1'; + export let id: $$Props['id'] = '1'; export let nodes: $$Props['nodes']; export let edges: $$Props['edges']; export let fitView: $$Props['fitView'] = undefined; @@ -44,15 +44,16 @@ export let isValidConnection: $$Props['isValidConnection'] = undefined; export let translateExtent: $$Props['translateExtent'] = undefined; export let onlyRenderVisibleElements: $$Props['onlyRenderVisibleElements'] = undefined; - export let panOnScrollMode: PanOnScrollMode = PanOnScrollMode.Free; - export let preventScrolling: boolean = true; - export let zoomOnScroll: boolean = true; - export let zoomOnDoubleClick: boolean = true; - export let zoomOnPinch: boolean = true; - export let panOnScroll: boolean = false; - export let panOnDrag: boolean | number[] = true; + export let panOnScrollMode: $$Props['panOnScrollMode'] = PanOnScrollMode.Free; + export let preventScrolling: $$Props['preventScrolling'] = true; + export let zoomOnScroll: $$Props['zoomOnScroll'] = true; + export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'] = true; + export let zoomOnPinch: $$Props['zoomOnPinch'] = true; + export let panOnScroll: $$Props['panOnScroll'] = false; + export let panOnDrag: $$Props['panOnDrag'] = true; export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true; export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true; + export let onError: $$Props['onError'] = undefined; export let defaultMarkerColor = '#b1b1b7'; @@ -106,7 +107,8 @@ onlyRenderVisibleElements, isValidConnection, autoPanOnConnect, - autoPanOnNodeDrag + autoPanOnNodeDrag, + onError }; updateStoreByKeys(store, updatableProps); @@ -137,15 +139,15 @@ {onMoveStart} {onMove} {onMoveEnd} - {panOnScrollMode} - {preventScrolling} - {zoomOnScroll} - {zoomOnDoubleClick} - {zoomOnPinch} - {panOnScroll} - {panOnDrag} + panOnScrollMode={panOnScrollMode === undefined ? PanOnScrollMode.Free : panOnScrollMode} + preventScrolling={preventScrolling === undefined ? true : preventScrolling} + zoomOnScroll={zoomOnScroll === undefined ? true : zoomOnScroll} + zoomOnDoubleClick={zoomOnDoubleClick === undefined ? true : zoomOnDoubleClick} + zoomOnPinch={zoomOnPinch === undefined ? true : zoomOnPinch} + panOnScroll={panOnScroll === undefined ? false : panOnScroll} + panOnDrag={panOnDrag === undefined ? true : panOnDrag} > - + diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 2e7d8a53..04838c3a 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -13,7 +13,8 @@ import type { PanOnScrollMode, IsValidConnection, HandleType, - NodeBase + NodeBase, + OnError } from '@xyflow/system'; import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types'; @@ -61,6 +62,7 @@ export type SvelteFlowProps = DOMAttributes & { onMoveStart?: OnMoveStart; onMove?: OnMove; onMoveEnd?: OnMoveEnd; + onError?: OnError; 'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>; 'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>; diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts index f06a8dab..8ad5547b 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts @@ -61,6 +61,7 @@ export type UpdatableStoreProps = { isValidConnection?: UnwrapWritable; autoPanOnConnect?: UnwrapWritable; autoPanOnNodeDrag?: UnwrapWritable; + onError?: UnwrapWritable; }; export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) { diff --git a/packages/svelte/src/lib/store/edge-tree.ts b/packages/svelte/src/lib/store/edge-tree.ts index dbbe9827..f316fee5 100644 --- a/packages/svelte/src/lib/store/edge-tree.ts +++ b/packages/svelte/src/lib/store/edge-tree.ts @@ -1,10 +1,10 @@ import { derived } from 'svelte/store'; -import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition, type OnError } from '@xyflow/system'; +import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition } from '@xyflow/system'; import type { EdgeLayouted } from '$lib/types'; import type { SvelteFlowStoreState } from './types'; -export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) { +export function getEdgeTree(store: SvelteFlowStoreState) { const visibleEdges = derived( [ store.edges, @@ -40,8 +40,8 @@ export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) { ); return derived( - [visibleEdges, store.nodes, store.connectionMode], - ([visibleEdges, nodes, connectionMode]) => { + [visibleEdges, store.nodes, store.connectionMode, store.onError], + ([visibleEdges, nodes, connectionMode, onError]) => { const layoutedEdges = visibleEdges.reduce((res, edge) => { const sourceNode = nodes.find((node) => node.id === edge.source); const targetNode = nodes.find((node) => node.id === edge.target); diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 5c41413e..08fc8b90 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -286,16 +286,12 @@ export function createStore(): SvelteFlowStore { cancelConnection(); } - function onError(id: string, msg: string) { - console.log(msg); - } - return { // state ...store, // derived state - edgeTree: getEdgeTree(store, onError), + edgeTree: getEdgeTree(store), connectionPath: getConnectionPath(store), visibleNodes: getVisibleNodes(store), markers: derived( @@ -323,8 +319,7 @@ export function createStore(): SvelteFlowStore { panBy, updateConnection, cancelConnection, - reset, - onError + reset }; } diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index bf613085..f3e69b9e 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -12,7 +12,9 @@ import { type CoordinateExtent, type IsValidConnection, type GroupedEdges, - type NodeOrigin + type NodeOrigin, + type OnError, + devWarn } from '@xyflow/system'; import DefaultNode from '$lib/components/nodes/DefaultNode.svelte'; @@ -79,8 +81,8 @@ export const getInitialStore = () => ({ domNode: writable(null), connectionPath: readable(null), connection: writable(initConnectionData), - connectionRadius: writable(20), connectionLineType: writable(ConnectionLineType.Bezier), + connectionRadius: writable(20), isValidConnection: writable(() => true), nodesDraggable: writable(true), nodesConnectable: writable(true), @@ -89,5 +91,6 @@ export const getInitialStore = () => ({ markers: readable([]), defaultMarkerColor: writable('#b1b1b7'), lib: readable('svelte'), - onlyRenderVisibleElements: writable(false) + onlyRenderVisibleElements: writable(false), + onError: writable(devWarn) }); diff --git a/packages/svelte/src/lib/store/types.ts b/packages/svelte/src/lib/store/types.ts index 5dda4c39..9156f6f0 100644 --- a/packages/svelte/src/lib/store/types.ts +++ b/packages/svelte/src/lib/store/types.ts @@ -6,8 +6,7 @@ import type { Connection, UpdateNodePositions, CoordinateExtent, - UpdateConnection, - OnError + UpdateConnection } from '@xyflow/system'; import type { getInitialStore } from './initial-store'; @@ -34,7 +33,6 @@ export type SvelteFlowStoreActions = { updateConnection: UpdateConnection; cancelConnection: () => void; reset(): void; - onError: OnError; }; export type SvelteFlowStoreState = ReturnType;