Merge branch 'next' into fix/edge-props

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -55,6 +55,7 @@
     isValidConnection,
     lib,
     addEdge,
+    onedgecreate,
     panBy,
     cancelConnection,
     updateConnection,
@@ -80,8 +81,13 @@
         cancelConnection,
         panBy,
         onConnect: (connection) => {
-          addEdge(connection);
+          const edge = $onedgecreate ? $onedgecreate(connection) : connection;
 
+          if (!edge) {
+            return;
+          }
+
+          addEdge(edge);
           // @todo: should we change/ improve the stuff we are passing here?
           // instead of source/target we could pass fromNodeId, fromHandleId, etc
           dispatch('connect', { connection });

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

@@ -71,6 +71,7 @@
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
   export let onerror: $$Props['onerror'] = undefined;
   export let ondelete: $$Props['ondelete'] = undefined;
+  export let onedgecreate: $$Props['onedgecreate'] = undefined;
   export let attributionPosition: $$Props['attributionPosition'] = undefined;
   export let proOptions: $$Props['proOptions'] = undefined;
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
@@ -149,6 +150,7 @@
       autoPanOnNodeDrag,
       onerror,
       ondelete,
+      onedgecreate,
       connectionMode,
       nodeDragThreshold
     };

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

@@ -26,7 +26,8 @@ import type {
   EdgeTypes,
   DefaultEdgeOptions,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 
@@ -89,4 +90,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveEnd?: OnMoveEnd;
   onerror?: OnError;
   ondelete?: OnDelete;
+
+  onedgecreate?: OnEdgeCreate;
 };

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

@@ -64,6 +64,7 @@ export type UpdatableStoreProps = {
   connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
   onerror?: UnwrapWritable<SvelteFlowStore['onerror']>;
   ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
+  onedgecreate?: UnwrapWritable<SvelteFlowStore['onedgecreate']>;
   nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
 };
 

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -136,12 +136,12 @@ export function useSvelteFlow(): {
     ) => {
       const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
 
-      if (!nodeRect || !node) {
+      if (!nodeRect) {
         return [];
       }
 
       return (nodesToIntersect || get(nodes)).filter((n) => {
-        if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
+        if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -45,8 +45,8 @@
 <svg
   class={cc(['svelte-flow__background', className])}
   data-testid="svelte-flow__background"
-  style:--background-color-props={bgColor}
-  style:--background-pattern-color-props={patternColor}
+  style:--xy-background-color-props={bgColor}
+  style:--xy-background-pattern-color-props={patternColor}
 >
   <pattern
     id={patternId}

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -15,11 +15,11 @@
   type="button"
   on:click
   class={cc(['svelte-flow__controls-button', className])}
-  style:--controls-button-background-color-props={bgColor}
-  style:--controls-button-background-color-hover-props={bgColorHover}
-  style:--controls-button-color-props={color}
-  style:--controls-button-color-hover-props={colorHover}
-  style:--controls-button-border-color-props={borderColor}
+  style:--xy-controls-button-background-color-props={bgColor}
+  style:--xy-controls-button-background-color-hover-props={bgColorHover}
+  style:--xy-controls-button-color-props={color}
+  style:--xy-controls-button-color-hover-props={colorHover}
+  style:--xy-controls-button-border-color-props={borderColor}
   {...$$restProps}
 >
   <slot class="button-svg" />

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -94,10 +94,10 @@
       viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
       role="img"
       aria-labelledby={labelledBy}
-      style:--minimap-background-color-props={bgColor}
-      style:--minimap-mask-color-props={maskColor}
-      style:--minimap-mask-stroke-color-props={maskStrokeColor}
-      style:--minimap-mask-stroke-width-props={maskStrokeWidth}
+      style:--xy-minimap-background-color-props={bgColor}
+      style:--xy-minimap-mask-color-props={maskColor}
+      style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
+      style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
       use:interactive={{
         panZoom: $panZoom,
         viewport,

packages/svelte/src/lib/store/initial-store.ts

@@ -39,7 +39,8 @@ import type {
   Node,
   Edge,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -134,6 +135,7 @@ export const getInitialStore = ({
     lib: readable<string>('svelte'),
     onlyRenderVisibleElements: writable<boolean>(false),
     onerror: writable<OnError>(devWarn),
-    ondelete: writable<OnDelete>(undefined)
+    ondelete: writable<OnDelete>(undefined),
+    onedgecreate: writable<OnEdgeCreate>(undefined)
   };
 };

packages/svelte/src/lib/types/general.ts

@@ -4,7 +4,8 @@ import type {
   HandleType,
   Position,
   XYPosition,
-  ConnectingHandle
+  ConnectingHandle,
+  Connection
 } from '@xyflow/system';
 
 import type { Node } from './nodes';
@@ -35,3 +36,4 @@ export type HandleComponentProps = {
 export type FitViewOptions = FitViewOptionsBase<Node>;
 
 export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
+export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;