Merge branch 'next' into refactor/infer-node-types

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -19,6 +19,7 @@
     class="svelte-flow__edge-label"
     style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
     style={'pointer-events: all;' + style}
+    role="button"
     on:click={() => {
       if (id) handleEdgeSelect(id);
     }}

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

@@ -6,7 +6,7 @@
     Position,
     XYHandle,
     isMouseEvent,
-    type Connection,
+    type HandleConnection,
     areConnectionMapsEqual,
     handleConnectionChange
   } from '@xyflow/system';
@@ -103,8 +103,8 @@
     }
   }
 
-  let prevConnections: Map<string, Connection> | null = null;
-  let connections: Map<string, Connection> | undefined;
+  let prevConnections: Map<string, HandleConnection> | null = null;
+  let connections: Map<string, HandleConnection> | undefined;
 
   $: if (onconnect || ondisconnect) {
     // connectionLookup is not reactive, so we use edges to get notified about updates

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -113,7 +113,15 @@
       {
         ...deleteKeyDefinition,
         enabled: deleteKeyDefinition.key !== null,
-        callback: (detail) => !isInputDOMNode(detail.originalEvent) && deleteKeyPressed.set(true)
+        callback: (detail) => {
+          const isModifierKey =
+            detail.originalEvent.ctrlKey ||
+            detail.originalEvent.metaKey ||
+            detail.originalEvent.shiftKey;
+          if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
+            deleteKeyPressed.set(true);
+          }
+        }
       }
     ],
     type: 'keydown'

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

@@ -215,7 +215,12 @@
     panOnScroll={panOnScroll === undefined ? false : panOnScroll}
     panOnDrag={panOnDrag === undefined ? true : panOnDrag}
   >
-    <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag} {selectionOnDrag}>
+    <Pane
+      on:paneclick
+      on:panecontextmenu
+      panOnDrag={panOnDrag === undefined ? true : panOnDrag}
+      {selectionOnDrag}
+    >
       <ViewportComponent>
         <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
         <ConnectionLine

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

@@ -135,11 +135,11 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
    */
   nodeDragThreshold?: number;
   /** Minimum zoom level
-   * @default 0.1
+   * @default 0.5
    */
   minZoom?: number;
   /** Maximum zoom level
-   * @default 1
+   * @default 2
    */
   maxZoom?: number;
   /** Sets the initial position and zoom of the viewport.

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

@@ -1,15 +1,16 @@
 import { derived } from 'svelte/store';
-import { areConnectionMapsEqual, type Connection, type HandleType } from '@xyflow/system';
+import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
+import { getContext } from 'svelte';
 
 export type useHandleConnectionsParams = {
-  nodeId: string;
   type: HandleType;
+  nodeId?: string;
   id?: string | null;
 };
 
-const initialConnections: Connection[] = [];
+const initialConnections: HandleConnection[] = [];
 
 /**
  *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
@@ -20,14 +21,18 @@ const initialConnections: Connection[] = [];
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @returns an array with connections
  */
-export function useHandleConnections({ nodeId, type, id = null }: useHandleConnectionsParams) {
+export function useHandleConnections({ type, nodeId, id = null }: useHandleConnectionsParams) {
   const { edges, connectionLookup } = useStore();
-  let prevConnections: Map<string, Connection> | undefined = undefined;
+
+  const _nodeId = getContext<string>('svelteflow__node_id');
+  const currentNodeId = nodeId ?? _nodeId;
+
+  let prevConnections: Map<string, HandleConnection> | undefined = undefined;
 
   return derived(
     [edges, connectionLookup],
     ([, connectionLookup], set) => {
-      const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+      const nextConnections = connectionLookup.get(`${currentNodeId}-${type}-${id || null}`);
 
       if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
         prevConnections = nextConnections;

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

@@ -83,7 +83,7 @@
 
 <Panel
   {position}
-  {style}
+  style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
   class={cc(['svelte-flow__minimap', className])}
   data-testid="svelte-flow__minimap"
 >
@@ -92,12 +92,14 @@
       width={elementWidth}
       height={elementHeight}
       viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
+      class="svelte-flow__minimap-svg"
       role="img"
       aria-labelledby={labelledBy}
-      style:--xy-minimap-background-color-props={bgColor}
-      style:--xy-minimap-mask-color-props={maskColor}
+      style:--xy-minimap-mask-background-color-props={maskColor}
       style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
-      style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
+      style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth
+        ? maskStrokeWidth * viewScale
+        : undefined}
       use:interactive={{
         panZoom: $panZoom,
         viewport,

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -7,7 +7,8 @@
     ResizeControlVariant,
     type ControlPosition,
     type XYResizerInstance,
-    type XYResizerChange
+    type XYResizerChange,
+    type XYResizerChildChange
   } from '@xyflow/system';
   import type { ResizeControlProps } from './types';
 
@@ -66,7 +67,7 @@
             snapToGrid: !!$snapGrid
           };
         },
-        onChange: (change: XYResizerChange) => {
+        onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
           const node = $nodeLookup.get(id);
           if (node) {
             node.height = change.isHeightChange ? change.height : node.height;
@@ -76,6 +77,13 @@
                 ? { x: change.x, y: change.y }
                 : node.position;
 
+            for (const childChange of childChanges) {
+              const childNode = $nodeLookup.get(childChange.id);
+              if (childNode) {
+                childNode.position = childChange.position;
+              }
+            }
+
             $nodes = $nodes;
           }
         }

packages/svelte/src/lib/store/index.ts

@@ -64,28 +64,22 @@ export function createStore({
   }
 
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
-    store.nodes.update((nds) => {
-      return nds.map((node) => {
-        const nodeDragItem = (nodeDragItems as Array<Node | NodeDragItem>).find(
-          (ndi) => ndi.id === node.id
-        );
+    const nodeLookup = get(store.nodeLookup);
 
-        if (nodeDragItem) {
-          return {
-            ...node,
-            dragging,
-            position: nodeDragItem.position,
-            computed: {
-              ...node.computed,
-              positionAbsolute: nodeDragItem.computed?.positionAbsolute
-            },
-            [internalsSymbol]: node[internalsSymbol]
-          };
-        }
+    nodeDragItems.forEach((nodeDragItem) => {
+      const node = nodeLookup.get(nodeDragItem.id);
 
-        return node;
-      });
+      if (node) {
+        node.position = nodeDragItem.position;
+        node.dragging = dragging;
+        node.computed = {
+          ...node.computed,
+          positionAbsolute: nodeDragItem.computed?.positionAbsolute
+        };
+      }
     });
+
+    store.nodes.set(get(store.nodes));
   };
 
   function updateNodeDimensions(updates: Map<string, NodeDimensionUpdate>) {