feat(svelte): add onError prop closes #3423

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}
   >
-    <Pane on:paneclick {panOnDrag}>
+    <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
         <EdgeRenderer on:edgeclick />
         <ConnectionLine />

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<HTMLDivElement> & {
   onMoveStart?: OnMoveStart;
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
+  onError?: OnError;
 
   'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>;
   'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>;

packages/svelte/src/lib/container/SvelteFlow/utils.ts

@@ -61,6 +61,7 @@ export type UpdatableStoreProps = {
   isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
   autoPanOnConnect?: UnwrapWritable<SvelteFlowStore['autoPanOnConnect']>;
   autoPanOnNodeDrag?: UnwrapWritable<SvelteFlowStore['autoPanOnNodeDrag']>;
+  onError?: UnwrapWritable<SvelteFlowStore['onError']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {

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<EdgeLayouted[]>((res, edge) => {
         const sourceNode = nodes.find((node) => node.id === edge.source);
         const targetNode = nodes.find((node) => node.id === edge.target);

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
   };
 }
 

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<HTMLDivElement | null>(null),
   connectionPath: readable<string | null>(null),
   connection: writable<ConnectionData>(initConnectionData),
-  connectionRadius: writable<number>(20),
   connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
+  connectionRadius: writable<number>(20),
   isValidConnection: writable<IsValidConnection>(() => true),
   nodesDraggable: writable<boolean>(true),
   nodesConnectable: writable<boolean>(true),
@@ -89,5 +91,6 @@ export const getInitialStore = () => ({
   markers: readable<MarkerProps[]>([]),
   defaultMarkerColor: writable<string>('#b1b1b7'),
   lib: readable<string>('svelte'),
-  onlyRenderVisibleElements: writable<boolean>(false)
+  onlyRenderVisibleElements: writable<boolean>(false),
+  onError: writable<OnError>(devWarn)
 });

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<typeof getInitialStore>;