n8n-editor-ui 1.77.0 → 1.77.2

package/dist/assets/{useCanvasOperations-ZjLeZwpS.js → useCanvasOperations-CEPzjX8I.js}

@@ -1,5 +1,5 @@
-import { gn as createCompounder, go as SetCache, gp as arrayIncludes, gq as cacheHas, gr as baseRest, gs as isArrayLikeObject, gt as baseFlatten, r as ref, K as useUIStore, bo as useNodeTypesStore, T as useWorkflowsStore, a0 as useSourceControlStore, q as computed, al as getResourcePermissions, cR as isPresent, H as watch, dz as getMousePosition$1, aB as STICKY_NODE_TYPE, g as useI18n, gu as NOT_DUPLICATABLE_NODE_TYPES, d as defineComponent, E as onClickOutside, l as unref, c as openBlock, e as createBlock, j as createBaseVNode, i as createVNode, w as withCtx, n as normalizeClass, gv as N8nActionDropdown, B as normalizeStyle, gw as Teleport, f as createCommentVNode, _ as _export_sfc$1, bk as v4, gx as CORE_NODES_CATEGORY, gy as DEFAULT_SUBCATEGORY, p as useSettingsStore, gz as AI_TRANSFORM_NODE_TYPE, gA as sublimeSearch, ba as AI_SUBCATEGORY, bb as AI_CATEGORY_AGENTS, gB as sortBy, fV as i18n, gC as AI_CATEGORY_OTHER_TOOLS, gD as AI_OTHERS_NODE_CREATOR_VIEW, gE as AI_CATEGORY_DOCUMENT_LOADERS, bh as NodeConnectionType, gF as AI_CATEGORY_LANGUAGE_MODELS, gG as AI_CATEGORY_MEMORY, gH as AI_CATEGORY_OUTPUTPARSER, gI as AI_CATEGORY_RETRIEVERS, gJ as AI_CATEGORY_TEXT_SPLITTERS, gK as AI_CATEGORY_TOOLS, gL as AI_WORKFLOW_TOOL_LANGCHAIN_NODE_TYPE, gM as AI_CODE_TOOL_LANGCHAIN_NODE_TYPE, gN as AI_CATEGORY_EMBEDDING, gO as AI_CATEGORY_VECTOR_STORES, gP as AI_UNCATEGORIZED_CATEGORY, aM as useTemplatesStore, eo as AI_NODE_CREATOR_VIEW, dP as TRIGGER_NODE_CREATOR_VIEW, bI as MANUAL_TRIGGER_NODE_TYPE, bJ as WEBHOOK_NODE_TYPE, gQ as EMAIL_IMAP_NODE_TYPE, gR as SCHEDULE_TRIGGER_NODE_TYPE, by as FORM_TRIGGER_NODE_TYPE, g9 as EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, b7 as CHAT_TRIGGER_NODE_TYPE, gS as OTHER_TRIGGER_NODES_SUBCATEGORY, eH as REGULAR_NODE_CREATOR_VIEW, gT as RSS_READ_NODE_TYPE, gU as EMAIL_SEND_NODE_TYPE, gV as TRANSFORM_DATA_SUBCATEGORY, gW as FILTER_NODE_TYPE, gX as REMOVE_DUPLICATES_NODE_TYPE, gY as SPLIT_OUT_NODE_TYPE, gZ as LIMIT_NODE_TYPE, g_ as SUMMARIZE_NODE_TYPE, g$ as AGGREGATE_NODE_TYPE, h0 as MERGE_NODE_TYPE, co as HTML_NODE_TYPE, h1 as MARKDOWN_NODE_TYPE, h2 as XML_NODE_TYPE, h3 as CRYPTO_NODE_TYPE, h4 as EXTRACT_FROM_FILE_NODE_TYPE, h5 as CONVERT_TO_FILE_NODE_TYPE, h6 as COMPRESSION_NODE_TYPE, h7 as EDIT_IMAGE_NODE_TYPE, h8 as FLOWS_CONTROL_SUBCATEGORY, h9 as IF_NODE_TYPE, ha as SPLIT_IN_BATCHES_NODE_TYPE, hb as HELPERS_SUBCATEGORY, hc as HTTP_REQUEST_NODE_TYPE, hd as CODE_NODE_TYPE, bc as AI_CATEGORY_CHAINS, he as SET_NODE_TYPE, hf as DATETIME_NODE_TYPE, R as defineStore, $ as useCanvasStore, hg as AI_CATEGORY_ROOT_NODES, y as nextTick, bd as AI_CODE_NODE_TYPE, bK as AI_TRANSFORM_NODE_TYPE$1, eQ as CanvasConnectionMode, hh as isValidCanvasConnectionMode, d7 as isValidNodeConnectionType, S as STORES, as as useNDVStore, dE as NODE_CREATOR_OPEN_SOURCES, hi as isVueFlowConnection, d$ as nodeConnectionTypes, be as getNodeInputs, dp as CUSTOM_API_CALL_KEY, aT as useExternalHooks, aj as useTelemetry, hj as effectScope, cj as toRef, h as createElementBlock, s as renderSlot, ca as useSlots, bq as provide, b4 as onUnmounted, aw as onBeforeMount, o as onMounted, hk as createPropsRestProxy, hl as useAttrs, F as Fragment, d5 as getCurrentInstance, dy as reactive, aW as inject, t as toDisplayString, A as renderList, x as onBeforeUnmount, hm as isMemoSame, hn as getCurrentScope, ho as onScopeDispose, aX as isRef, aY as toRefs$1, hp as customRef, hq as toValue$1, b0 as resolveDynamicComponent, k as createTextVNode, a$ as mergeProps, m as resolveComponent, ap as h, hr as markRaw, hs as readonly, dD as KeyboardShortcutTooltip, ht as CanvasKey, aa as useCssModule, bn as watchEffect, aZ as normalizeProps, hu as CanvasNodeKey, eN as CanvasNodeRenderType, hv as refThrottled, hw as mergeModels, hx as useModel, bp as useNodeHelpers, bH as TitledList, cO as resolveDirective, ax as withDirectives, ac as nodeViewEventBus, hy as CanvasNodeHandleKey, ay as vShow, cZ as Transition$2, br as _sfc_main$y, I as withModifiers, C as createEventBus, bP as isEqual, hz as useActiveElement, d0 as useDeviceSupport, hA as useEventListener$1, aS as createSlots, dk as GRID_SIZE, hB as onKeyDown, hC as onKeyUp, c9 as useThrottleFn, a_ as guardReactiveProps, cr as Suspense, bg as getNodeOutputs, c$ as getTriggerNodeServiceName, eW as sanitizeHtml, bG as nodeIssuesToString, ds as WAIT_NODE_TYPE, dt as SEND_AND_WAIT_OPERATION, du as FORM_NODE_TYPE, dv as WAIT_INDEFINITELY, Z as useRootStore, bR as useCredentialsStore, bU as useHistoryStore, D as useTagsStore, at as useExecutionsStore, a as useToast, a4 as useWorkflowHelpers, b6 as useClipboard, dS as MoveNodeCommand, c3 as RenameNodeCommand, eL as RemoveNodeCommand, eJ as useDataSchema, dZ as NODE_SIZE, hD as AddNodeCommand, b$ as getNodeParameters, dU as getNewNodePosition, hE as DEFAULT_NODE_SIZE, hF as CONFIGURATION_NODE_SIZE, bf as getConnectionTypes, d_ as generateOffsets, hG as CONFIGURABLE_NODE_SIZE, dY as PUSH_NODES_OFFSET, e8 as AddConnectionCommand, ei as RemoveConnectionCommand, dT as UPDATE_WEBHOOK_ID_NODE_TYPES, dN as generateNodesGraph, a8 as EnterpriseEditionFeature, c0 as deepCopy } from "./index-BW7gX0J2.js";
-import { c as capitalize, u as usePinnedData } from "./usePinnedData-CHMuwypo.js";
+import { gn as createCompounder, go as SetCache, gp as arrayIncludes, gq as cacheHas, gr as baseRest, gs as isArrayLikeObject, gt as baseFlatten, r as ref, K as useUIStore, bo as useNodeTypesStore, T as useWorkflowsStore, a0 as useSourceControlStore, q as computed, al as getResourcePermissions, cR as isPresent, H as watch, dz as getMousePosition$1, aB as STICKY_NODE_TYPE, g as useI18n, gu as NOT_DUPLICATABLE_NODE_TYPES, d as defineComponent, E as onClickOutside, l as unref, c as openBlock, e as createBlock, j as createBaseVNode, i as createVNode, w as withCtx, n as normalizeClass, gv as N8nActionDropdown, B as normalizeStyle, gw as Teleport, f as createCommentVNode, _ as _export_sfc$1, bk as v4, gx as CORE_NODES_CATEGORY, gy as DEFAULT_SUBCATEGORY, p as useSettingsStore, gz as AI_TRANSFORM_NODE_TYPE, gA as sublimeSearch, ba as AI_SUBCATEGORY, bb as AI_CATEGORY_AGENTS, gB as sortBy, fV as i18n, gC as AI_CATEGORY_OTHER_TOOLS, gD as AI_OTHERS_NODE_CREATOR_VIEW, gE as AI_CATEGORY_DOCUMENT_LOADERS, bh as NodeConnectionType, gF as AI_CATEGORY_LANGUAGE_MODELS, gG as AI_CATEGORY_MEMORY, gH as AI_CATEGORY_OUTPUTPARSER, gI as AI_CATEGORY_RETRIEVERS, gJ as AI_CATEGORY_TEXT_SPLITTERS, gK as AI_CATEGORY_TOOLS, gL as AI_WORKFLOW_TOOL_LANGCHAIN_NODE_TYPE, gM as AI_CODE_TOOL_LANGCHAIN_NODE_TYPE, gN as AI_CATEGORY_EMBEDDING, gO as AI_CATEGORY_VECTOR_STORES, gP as AI_UNCATEGORIZED_CATEGORY, aM as useTemplatesStore, eo as AI_NODE_CREATOR_VIEW, dP as TRIGGER_NODE_CREATOR_VIEW, bI as MANUAL_TRIGGER_NODE_TYPE, bJ as WEBHOOK_NODE_TYPE, gQ as EMAIL_IMAP_NODE_TYPE, gR as SCHEDULE_TRIGGER_NODE_TYPE, by as FORM_TRIGGER_NODE_TYPE, g9 as EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, b7 as CHAT_TRIGGER_NODE_TYPE, gS as OTHER_TRIGGER_NODES_SUBCATEGORY, eH as REGULAR_NODE_CREATOR_VIEW, gT as RSS_READ_NODE_TYPE, gU as EMAIL_SEND_NODE_TYPE, gV as TRANSFORM_DATA_SUBCATEGORY, gW as FILTER_NODE_TYPE, gX as REMOVE_DUPLICATES_NODE_TYPE, gY as SPLIT_OUT_NODE_TYPE, gZ as LIMIT_NODE_TYPE, g_ as SUMMARIZE_NODE_TYPE, g$ as AGGREGATE_NODE_TYPE, h0 as MERGE_NODE_TYPE, co as HTML_NODE_TYPE, h1 as MARKDOWN_NODE_TYPE, h2 as XML_NODE_TYPE, h3 as CRYPTO_NODE_TYPE, h4 as EXTRACT_FROM_FILE_NODE_TYPE, h5 as CONVERT_TO_FILE_NODE_TYPE, h6 as COMPRESSION_NODE_TYPE, h7 as EDIT_IMAGE_NODE_TYPE, h8 as FLOWS_CONTROL_SUBCATEGORY, h9 as IF_NODE_TYPE, ha as SPLIT_IN_BATCHES_NODE_TYPE, hb as HELPERS_SUBCATEGORY, hc as HTTP_REQUEST_NODE_TYPE, hd as CODE_NODE_TYPE, bc as AI_CATEGORY_CHAINS, he as SET_NODE_TYPE, hf as DATETIME_NODE_TYPE, R as defineStore, $ as useCanvasStore, hg as AI_CATEGORY_ROOT_NODES, y as nextTick, bd as AI_CODE_NODE_TYPE, bK as AI_TRANSFORM_NODE_TYPE$1, eQ as CanvasConnectionMode, hh as isValidCanvasConnectionMode, d7 as isValidNodeConnectionType, S as STORES, as as useNDVStore, dE as NODE_CREATOR_OPEN_SOURCES, hi as isVueFlowConnection, d$ as nodeConnectionTypes, be as getNodeInputs, dp as CUSTOM_API_CALL_KEY, aT as useExternalHooks, aj as useTelemetry, hj as effectScope, cj as toRef, h as createElementBlock, s as renderSlot, ca as useSlots, bq as provide, b4 as onUnmounted, aw as onBeforeMount, o as onMounted, hk as useAttrs, a$ as mergeProps, F as Fragment, d5 as getCurrentInstance, dy as reactive, aW as inject, t as toDisplayString, A as renderList, x as onBeforeUnmount, hl as isMemoSame, hm as getCurrentScope, hn as onScopeDispose, aX as isRef, aY as toRefs$1, ho as customRef, hp as toValue$1, hq as createPropsRestProxy, b0 as resolveDynamicComponent, k as createTextVNode, m as resolveComponent, ap as h, hr as readonly, hs as markRaw, dD as KeyboardShortcutTooltip, ht as CanvasKey, aa as useCssModule, bn as watchEffect, aZ as normalizeProps, hu as CanvasNodeKey, eN as CanvasNodeRenderType, hv as refThrottled, hw as mergeModels, hx as useModel, bp as useNodeHelpers, bH as TitledList, cO as resolveDirective, ax as withDirectives, ac as nodeViewEventBus, hy as CanvasNodeHandleKey, ay as vShow, cZ as Transition$2, br as _sfc_main$y, I as withModifiers, C as createEventBus, bP as isEqual, hz as useActiveElement, d0 as useDeviceSupport, hA as useEventListener$1, aS as createSlots, dk as GRID_SIZE, hB as onKeyDown, hC as onKeyUp, c9 as useThrottleFn, a_ as guardReactiveProps, cr as Suspense, bg as getNodeOutputs, c$ as getTriggerNodeServiceName, eW as sanitizeHtml, bG as nodeIssuesToString, ds as WAIT_NODE_TYPE, dt as SEND_AND_WAIT_OPERATION, du as FORM_NODE_TYPE, dv as WAIT_INDEFINITELY, Z as useRootStore, bR as useCredentialsStore, bU as useHistoryStore, D as useTagsStore, at as useExecutionsStore, a as useToast, a4 as useWorkflowHelpers, b6 as useClipboard, dS as MoveNodeCommand, c3 as RenameNodeCommand, eL as RemoveNodeCommand, eJ as useDataSchema, dZ as NODE_SIZE, hD as AddNodeCommand, b$ as getNodeParameters, dU as getNewNodePosition, hE as DEFAULT_NODE_SIZE, hF as CONFIGURATION_NODE_SIZE, bf as getConnectionTypes, d_ as generateOffsets, hG as CONFIGURABLE_NODE_SIZE, dY as PUSH_NODES_OFFSET, e8 as AddConnectionCommand, ei as RemoveConnectionCommand, dT as UPDATE_WEBHOOK_ID_NODE_TYPES, dN as generateNodesGraph, a8 as EnterpriseEditionFeature, c0 as deepCopy } from "./index-DablXALM.js";
+import { c as capitalize, u as usePinnedData } from "./usePinnedData-BEOJK2e-.js";
 var camelCase = createCompounder(function(result, word, index) {
   word = word.toLowerCase();
   return result + (index ? capitalize(word) : word);
@@ -5865,36 +5865,27 @@ function calcNextPosition(node2, nextPosition, triggerError, nodeExtent, parentN
     computedPosition: clampedPos
   };
 }
-function getHandlePosition(node2, handle2, fallbackPosition = Position.Left) {
+function getHandlePosition(node2, handle2, fallbackPosition = Position.Left, center = false) {
   const x = ((handle2 == null ? void 0 : handle2.x) ?? 0) + node2.computedPosition.x;
   const y = ((handle2 == null ? void 0 : handle2.y) ?? 0) + node2.computedPosition.y;
   const { width, height } = handle2 ?? getNodeDimensions(node2);
+  if (center) {
+    return { x: x + width / 2, y: y + height / 2 };
+  }
   const position2 = (handle2 == null ? void 0 : handle2.position) ?? fallbackPosition;
   switch (position2) {
     case Position.Top:
-      return {
-        x: x + width / 2,
-        y
-      };
+      return { x: x + width / 2, y };
     case Position.Right:
-      return {
-        x: x + width,
-        y: y + height / 2
-      };
+      return { x: x + width, y: y + height / 2 };
     case Position.Bottom:
-      return {
-        x: x + width / 2,
-        y: y + height
-      };
+      return { x: x + width / 2, y: y + height };
     case Position.Left:
-      return {
-        x,
-        y: y + height / 2
-      };
+      return { x, y: y + height / 2 };
   }
 }
-function getHandle(bounds = [], handleId) {
-  if (!bounds.length) {
+function getEdgeHandle(bounds, handleId) {
+  if (!bounds) {
     return null;
   }
   return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null;
@@ -6094,103 +6085,90 @@ function snapPosition(position2, snapGrid = [1, 1]) {
     y: snapGrid[1] * Math.round(position2.y / snapGrid[1])
   };
 }
-function defaultValidHandleResult() {
-  return {
-    handleDomNode: null,
-    isValid: false,
-    connection: { source: "", target: "", sourceHandle: null, targetHandle: null },
-    endHandle: null
-  };
-}
+const alwaysValid$1 = () => true;
 function resetRecentHandle(handleDomNode) {
   handleDomNode == null ? void 0 : handleDomNode.classList.remove("valid", "connecting", "vue-flow__handle-valid", "vue-flow__handle-connecting");
 }
-function getHandles(node2, handleBounds, type, currentHandle) {
-  const connectionHandles = [];
-  for (const handle2 of handleBounds[type] || []) {
-    if (`${node2.id}-${handle2.id}-${type}` !== currentHandle) {
-      const { x, y } = getHandlePosition(node2, handle2);
-      connectionHandles.push({
-        id: handle2.id || null,
-        type,
-        nodeId: node2.id,
-        x,
-        y
-      });
+function getNodesWithinDistance(position2, nodeLookup, distance2) {
+  const nodes = [];
+  const rect = {
+    x: position2.x - distance2,
+    y: position2.y - distance2,
+    width: distance2 * 2,
+    height: distance2 * 2
+  };
+  for (const node2 of nodeLookup.values()) {
+    if (getOverlappingArea(rect, nodeToRect(node2)) > 0) {
+      nodes.push(node2);
     }
   }
-  return connectionHandles;
+  return nodes;
 }
-function getClosestHandle(event, doc, pos, connectionRadius, handles, validator) {
-  const { x, y } = getEventPosition(event);
-  const domNodes = doc.elementsFromPoint(x, y);
-  const handleBelow = domNodes.find((el) => el.classList.contains("vue-flow__handle"));
-  if (handleBelow) {
-    const handleNodeId = handleBelow.getAttribute("data-nodeid");
-    if (handleNodeId) {
-      const handleType = getHandleType(void 0, handleBelow);
-      const handleId = handleBelow.getAttribute("data-handleid");
-      const validHandleResult = validator({ nodeId: handleNodeId, id: handleId, type: handleType });
-      if (validHandleResult) {
-        const handle2 = handles.find((h2) => h2.nodeId === handleNodeId && h2.type === handleType && h2.id === handleId);
-        return {
-          handle: {
-            id: handleId,
-            type: handleType,
-            nodeId: handleNodeId,
-            x: (handle2 == null ? void 0 : handle2.x) || pos.x,
-            y: (handle2 == null ? void 0 : handle2.y) || pos.y
-          },
-          validHandleResult
-        };
-      }
-    }
-  }
+const ADDITIONAL_DISTANCE = 250;
+function getClosestHandle(position2, connectionRadius, nodeLookup, fromHandle) {
+  var _a, _b;
   let closestHandles = [];
   let minDistance = Number.POSITIVE_INFINITY;
-  for (const handle2 of handles) {
-    const distance2 = Math.sqrt((handle2.x - pos.x) ** 2 + (handle2.y - pos.y) ** 2);
-    if (distance2 <= connectionRadius) {
-      const validHandleResult = validator(handle2);
-      if (distance2 <= minDistance) {
-        if (distance2 < minDistance) {
-          closestHandles = [{ handle: handle2, validHandleResult }];
-        } else if (distance2 === minDistance) {
-          closestHandles.push({
-            handle: handle2,
-            validHandleResult
-          });
-        }
+  const closeNodes = getNodesWithinDistance(position2, nodeLookup, connectionRadius + ADDITIONAL_DISTANCE);
+  for (const node2 of closeNodes) {
+    const allHandles = [...((_a = node2.handleBounds) == null ? void 0 : _a.source) ?? [], ...((_b = node2.handleBounds) == null ? void 0 : _b.target) ?? []];
+    for (const handle2 of allHandles) {
+      if (fromHandle.nodeId === handle2.nodeId && fromHandle.type === handle2.type && fromHandle.id === handle2.id) {
+        continue;
+      }
+      const { x, y } = getHandlePosition(node2, handle2, handle2.position, true);
+      const distance2 = Math.sqrt((x - position2.x) ** 2 + (y - position2.y) ** 2);
+      if (distance2 > connectionRadius) {
+        continue;
+      }
+      if (distance2 < minDistance) {
+        closestHandles = [{ ...handle2, x, y }];
         minDistance = distance2;
+      } else if (distance2 === minDistance) {
+        closestHandles.push({ ...handle2, x, y });
       }
     }
   }
   if (!closestHandles.length) {
-    return { handle: null, validHandleResult: defaultValidHandleResult() };
-  }
-  if (closestHandles.length === 1) {
-    return closestHandles[0];
+    return null;
   }
-  const hasValidHandle = closestHandles.some(({ validHandleResult }) => validHandleResult.isValid);
-  const hasTargetHandle = closestHandles.some(({ handle: handle2 }) => handle2.type === "target");
-  return closestHandles.find(
-    ({ handle: handle2, validHandleResult }) => hasTargetHandle ? handle2.type === "target" : hasValidHandle ? validHandleResult.isValid : true
-  ) || closestHandles[0];
-}
-function isValidHandle(event, handle2, connectionMode, fromNodeId, fromHandleId, fromType, isValidConnection, doc, edges, nodes, findNode) {
+  if (closestHandles.length > 1) {
+    const oppositeHandleType = fromHandle.type === "source" ? "target" : "source";
+    return closestHandles.find((handle2) => handle2.type === oppositeHandleType) ?? closestHandles[0];
+  }
+  return closestHandles[0];
+}
+function isValidHandle(event, {
+  handle: handle2,
+  connectionMode,
+  fromNodeId,
+  fromHandleId,
+  fromType,
+  doc,
+  lib,
+  flowId,
+  isValidConnection = alwaysValid$1
+}, edges, nodes, findNode) {
   const isTarget = fromType === "target";
-  const handleDomNode = doc.querySelector(`.vue-flow__handle[data-id="${handle2 == null ? void 0 : handle2.nodeId}-${handle2 == null ? void 0 : handle2.id}-${handle2 == null ? void 0 : handle2.type}"]`);
+  const handleDomNode = handle2 ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle2 == null ? void 0 : handle2.nodeId}-${handle2 == null ? void 0 : handle2.id}-${handle2 == null ? void 0 : handle2.type}"]`) : null;
   const { x, y } = getEventPosition(event);
-  const elementBelow = doc.elementFromPoint(x, y);
-  const handleToCheck = (elementBelow == null ? void 0 : elementBelow.classList.contains("vue-flow__handle")) ? elementBelow : handleDomNode;
-  const result = defaultValidHandleResult();
+  const handleBelow = doc.elementFromPoint(x, y);
+  const handleToCheck = (handleBelow == null ? void 0 : handleBelow.classList.contains(`${lib}-flow__handle`)) ? handleBelow : handleDomNode;
+  const result = {
+    handleDomNode: handleToCheck,
+    isValid: false,
+    connection: null,
+    toHandle: null
+  };
   if (handleToCheck) {
-    result.handleDomNode = handleToCheck;
     const handleType = getHandleType(void 0, handleToCheck);
     const handleNodeId = handleToCheck.getAttribute("data-nodeid");
     const handleId = handleToCheck.getAttribute("data-handleid");
     const connectable = handleToCheck.classList.contains("connectable");
     const connectableEnd = handleToCheck.classList.contains("connectableend");
+    if (!handleNodeId || !handleType) {
+      return result;
+    }
     const connection = {
       source: isTarget ? handleNodeId : fromNodeId,
       sourceHandle: isTarget ? handleId : fromHandleId,
@@ -6200,38 +6178,16 @@ function isValidHandle(event, handle2, connectionMode, fromNodeId, fromHandleId,
     result.connection = connection;
     const isConnectable = connectable && connectableEnd;
     const isValid = isConnectable && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
-    if (isValid) {
-      result.isValid = isValidConnection(connection, {
-        edges,
-        nodes,
-        sourceNode: findNode(connection.source),
-        targetNode: findNode(connection.target)
-      });
-      result.endHandle = {
-        nodeId: handleNodeId,
-        handleId,
-        type: handleType,
-        position: result.isValid ? handleToCheck.getAttribute("data-handlepos") : null
-      };
-    }
+    result.isValid = isValid && isValidConnection(connection, {
+      nodes,
+      edges,
+      sourceNode: findNode(fromNodeId),
+      targetNode: findNode(handleNodeId)
+    });
+    result.toHandle = handle2;
   }
   return result;
 }
-function getHandleLookup({ nodes, nodeId, handleId, handleType }) {
-  const handleLookup = [];
-  for (let i = 0; i < nodes.length; i++) {
-    const node2 = nodes[i];
-    const { handleBounds } = node2;
-    let sourceHandles = [];
-    let targetHandles = [];
-    if (handleBounds) {
-      sourceHandles = getHandles(node2, handleBounds, "source", `${nodeId}-${handleId}-${handleType}`);
-      targetHandles = getHandles(node2, handleBounds, "target", `${nodeId}-${handleId}-${handleType}`);
-    }
-    handleLookup.push(...sourceHandles, ...targetHandles);
-  }
-  return handleLookup;
-}
 function getHandleType(edgeUpdaterType, handleDomNode) {
   if (edgeUpdaterType) {
     return edgeUpdaterType;
@@ -6251,6 +6207,31 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
   }
   return connectionStatus;
 }
+function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
+  let isValid = null;
+  if (isHandleValid) {
+    isValid = true;
+  } else if (isInsideConnectionRadius && !isHandleValid) {
+    isValid = false;
+  }
+  return isValid;
+}
+function getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode, withAbsolutePosition = false) {
+  var _a, _b, _c;
+  const node2 = nodeLookup.get(nodeId);
+  if (!node2) {
+    return null;
+  }
+  const handles = connectionMode === ConnectionMode.Strict ? (_a = node2.handleBounds) == null ? void 0 : _a[handleType] : [...((_b = node2.handleBounds) == null ? void 0 : _b.source) ?? [], ...((_c = node2.handleBounds) == null ? void 0 : _c.target) ?? []];
+  const handle2 = (handleId ? handles == null ? void 0 : handles.find((h2) => h2.id === handleId) : handles == null ? void 0 : handles[0]) ?? null;
+  return handle2 && withAbsolutePosition ? { ...handle2, ...getHandlePosition(node2, handle2, handle2.position, true) } : handle2;
+}
+const oppositePosition = {
+  [Position.Left]: Position.Right,
+  [Position.Right]: Position.Left,
+  [Position.Top]: Position.Bottom,
+  [Position.Bottom]: Position.Top
+};
 const productionEnvs = ["production", "prod"];
 function warn(message, ...args) {
   if (isDev()) {
@@ -6260,14 +6241,16 @@ function warn(message, ...args) {
 function isDev() {
   return !productionEnvs.includes("production");
 }
-function getHandleBounds(selector2, nodeElement, nodeBounds, zoom2) {
-  const handles = nodeElement.querySelectorAll(`.vue-flow__handle${selector2}`);
+function getHandleBounds(type, nodeElement, nodeBounds, zoom2) {
+  const handles = nodeElement.querySelectorAll(`.vue-flow__handle.${type}`);
   const handlesArray = Array.from(handles);
   return handlesArray.map((handle2) => {
     const handleBounds = handle2.getBoundingClientRect();
     return {
       id: handle2.getAttribute("data-handleid"),
       position: handle2.getAttribute("data-handlepos"),
+      nodeId: handle2.getAttribute("data-nodeid"),
+      type,
       x: (handleBounds.left - nodeBounds.left) / zoom2,
       y: (handleBounds.top - nodeBounds.top) / zoom2,
       ...getDimensions(handle2)
@@ -6361,18 +6344,42 @@ function createGraphNodes(nodes, findNode, triggerError) {
   }
   return nextNodes;
 }
-function updateConnectionLookup(connectionLookup, edges) {
+function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
+  let key = nodeId;
+  const nodeMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
+  connectionLookup.set(key, nodeMap.set(connectionKey, connection));
+  key = `${nodeId}-${type}`;
+  const typeMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
+  connectionLookup.set(key, typeMap.set(connectionKey, connection));
+  if (handleId) {
+    key = `${nodeId}-${type}-${handleId}`;
+    const handleMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
+    connectionLookup.set(key, handleMap.set(connectionKey, connection));
+  }
+}
+function updateConnectionLookup(connectionLookup, edgeLookup, edges) {
   connectionLookup.clear();
+  edgeLookup.clear();
   for (const edge2 of edges) {
-    const { id: edgeId, source, target: target2, sourceHandle = null, targetHandle = null } = edge2;
-    const sourceKey = `${source}-source-${sourceHandle}`;
-    const targetKey = `${target2}-target-${targetHandle}`;
-    const prevSource = connectionLookup.get(sourceKey) || /* @__PURE__ */ new Map();
-    const prevTarget = connectionLookup.get(targetKey) || /* @__PURE__ */ new Map();
-    const connection = markRaw({ edgeId, source, target: target2, sourceHandle, targetHandle });
-    connectionLookup.set(sourceKey, prevSource.set(`${target2}-${targetHandle}`, connection));
-    connectionLookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
+    const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge2;
+    const connection = { edgeId: edge2.id, source: sourceNode, target: targetNode, sourceHandle, targetHandle };
+    const sourceKey = `${sourceNode}-${sourceHandle}--${targetNode}-${targetHandle}`;
+    const targetKey = `${targetNode}-${targetHandle}--${sourceNode}-${sourceHandle}`;
+    addConnectionToLookup("source", connection, targetKey, connectionLookup, sourceNode, sourceHandle);
+    addConnectionToLookup("target", connection, sourceKey, connectionLookup, targetNode, targetHandle);
+    edgeLookup.set(edge2.id, edge2);
+  }
+}
+function areSetsEqual(a, b) {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const item of a) {
+    if (!b.has(item)) {
+      return false;
+    }
   }
+  return true;
 }
 function createGraphEdges(nextEdges, isValidConnection, findNode, findEdge, onError, defaultEdgeOptions, nodes, edges) {
   const validEdges = [];
@@ -6712,6 +6719,7 @@ function useHandle({
   onEdgeUpdateEnd
 }) {
   const {
+    id: flowId,
     vueFlowRef,
     connectionMode,
     connectionRadius,
@@ -6729,12 +6737,12 @@ function useHandle({
     viewport,
     edges,
     nodes,
-    isValidConnection: isValidConnectionProp
+    isValidConnection: isValidConnectionProp,
+    nodeLookup
   } = useVueFlow();
   let connection = null;
   let isValid = false;
   let handleDomNode = null;
-  let previousConnection = null;
   function handlePointerDown(event) {
     var _a;
     const isTarget = toValue$1(type) === "target";
@@ -6743,35 +6751,47 @@ function useHandle({
     if (isMouseTriggered && event.button === 0 || !isMouseTriggered) {
       let onPointerMove = function(event2) {
         connectionPosition = getEventPosition(event2, containerBounds);
-        const { handle: handle2, validHandleResult } = getClosestHandle(
-          event2,
-          doc,
+        closestHandle = getClosestHandle(
           pointToRendererPoint(connectionPosition, viewport.value, false, [1, 1]),
           connectionRadius.value,
-          handleLookup,
-          (handle22) => isValidHandle(
-            event2,
-            handle22,
-            connectionMode.value,
-            toValue$1(nodeId),
-            toValue$1(handleId),
-            isTarget ? "target" : "source",
-            isValidConnectionHandler,
-            doc,
-            edges.value,
-            nodes.value,
-            findNode
-          )
+          nodeLookup.value,
+          fromHandle
         );
-        closestHandle = handle2;
         if (!autoPanStarted) {
           autoPan();
           autoPanStarted = true;
         }
-        connection = validHandleResult.connection;
-        isValid = validHandleResult.isValid;
-        handleDomNode = validHandleResult.handleDomNode;
-        if (isValid && closestHandle && (previousConnection == null ? void 0 : previousConnection.endHandle) && validHandleResult.endHandle && previousConnection.endHandle.type === validHandleResult.endHandle.type && previousConnection.endHandle.nodeId === validHandleResult.endHandle.nodeId && previousConnection.endHandle.handleId === validHandleResult.endHandle.handleId) {
+        const result = isValidHandle(
+          event2,
+          {
+            handle: closestHandle,
+            connectionMode: connectionMode.value,
+            fromNodeId: toValue$1(nodeId),
+            fromHandleId: toValue$1(handleId),
+            fromType: isTarget ? "target" : "source",
+            isValidConnection: isValidConnectionHandler,
+            doc,
+            lib: "vue",
+            flowId,
+            nodeLookup: nodeLookup.value
+          },
+          edges.value,
+          nodes.value,
+          findNode
+        );
+        handleDomNode = result.handleDomNode;
+        connection = result.connection;
+        isValid = isConnectionValid(!!closestHandle, result.isValid);
+        const newConnection2 = {
+          // from stays the same
+          ...previousConnection,
+          isValid,
+          to: closestHandle && isValid ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, viewport.value) : connectionPosition,
+          toHandle: result.toHandle,
+          toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
+          toNode: result.toHandle ? nodeLookup.value.get(result.toHandle.nodeId) : null
+        };
+        if (isValid && closestHandle && (previousConnection == null ? void 0 : previousConnection.toHandle) && newConnection2.toHandle && previousConnection.toHandle.type === newConnection2.toHandle.type && previousConnection.toHandle.nodeId === newConnection2.toHandle.nodeId && previousConnection.toHandle.id === newConnection2.toHandle.id && previousConnection.to.x === newConnection2.to.x && previousConnection.to.y === newConnection2.to.y) {
           return;
         }
         updateConnection(
@@ -6782,10 +6802,10 @@ function useHandle({
             },
             viewport.value
           ) : connectionPosition,
-          validHandleResult.endHandle,
+          result.toHandle,
           getConnectionStatus(!!closestHandle, isValid)
         );
-        previousConnection = validHandleResult;
+        previousConnection = newConnection2;
         if (!closestHandle && !isValid && !handleDomNode) {
           return resetRecentHandle(prevActiveHandle);
         }
@@ -6793,8 +6813,8 @@ function useHandle({
           resetRecentHandle(prevActiveHandle);
           prevActiveHandle = handleDomNode;
           handleDomNode.classList.add("connecting", "vue-flow__handle-connecting");
-          handleDomNode.classList.toggle("valid", isValid);
-          handleDomNode.classList.toggle("vue-flow__handle-valid", isValid);
+          handleDomNode.classList.toggle("valid", !!isValid);
+          handleDomNode.classList.toggle("vue-flow__handle-valid", !!isValid);
         }
       }, onPointerUp = function(event2) {
         if ((closestHandle || handleDomNode) && connection && isValid) {
@@ -6834,15 +6854,13 @@ function useHandle({
       if (!containerBounds || !handleType) {
         return;
       }
+      const fromHandleInternal = getHandle(toValue$1(nodeId), handleType, toValue$1(handleId), nodeLookup.value, connectionMode.value);
+      if (!fromHandleInternal) {
+        return;
+      }
       let prevActiveHandle;
       let connectionPosition = getEventPosition(event, containerBounds);
       let autoPanStarted = false;
-      const handleLookup = getHandleLookup({
-        nodes: nodes.value,
-        nodeId: toValue$1(nodeId),
-        handleId: toValue$1(handleId),
-        handleType
-      });
       const autoPan = () => {
         if (!autoPanOnConnect.value) {
           return;
@@ -6851,10 +6869,30 @@ function useHandle({
         panBy({ x: xMovement, y: yMovement });
         autoPanId = requestAnimationFrame(autoPan);
       };
+      const fromHandle = {
+        ...fromHandleInternal,
+        nodeId: toValue$1(nodeId),
+        type: handleType,
+        position: fromHandleInternal.position
+      };
+      const fromNodeInternal = nodeLookup.value.get(toValue$1(nodeId));
+      const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true);
+      const newConnection = {
+        inProgress: true,
+        isValid: null,
+        from,
+        fromHandle,
+        fromPosition: fromHandle.position,
+        fromNode: fromNodeInternal,
+        to: connectionPosition,
+        toHandle: null,
+        toPosition: oppositePosition[fromHandle.position],
+        toNode: null
+      };
       startConnection(
         {
           nodeId: toValue$1(nodeId),
-          handleId: toValue$1(handleId),
+          id: toValue$1(handleId),
           type: handleType,
           position: (clickedHandle == null ? void 0 : clickedHandle.getAttribute("data-handlepos")) || Position.Top
         },
@@ -6864,6 +6902,7 @@ function useHandle({
         }
       );
       emits.connectStart({ event, nodeId: toValue$1(nodeId), handleId: toValue$1(handleId), handleType });
+      let previousConnection = newConnection;
       doc.addEventListener("mousemove", onPointerMove);
       doc.addEventListener("mouseup", onPointerUp);
       doc.addEventListener("touchmove", onPointerMove);
@@ -6871,47 +6910,58 @@ function useHandle({
     }
   }
   function handleClick(event) {
+    var _a, _b;
     if (!connectOnClick.value) {
       return;
     }
     const isTarget = toValue$1(type) === "target";
     if (!connectionClickStartHandle.value) {
       emits.clickConnectStart({ event, nodeId: toValue$1(nodeId), handleId: toValue$1(handleId) });
-      startConnection({ nodeId: toValue$1(nodeId), type: toValue$1(type), handleId: toValue$1(handleId) }, void 0, true);
-    } else {
-      let isValidConnectionHandler = toValue$1(isValidConnection) || isValidConnectionProp.value || alwaysValid;
-      const node2 = findNode(toValue$1(nodeId));
-      if (!isValidConnectionHandler && node2) {
-        isValidConnectionHandler = (!isTarget ? node2.isValidTargetPos : node2.isValidSourcePos) || alwaysValid;
-      }
-      if (node2 && (typeof node2.connectable === "undefined" ? nodesConnectable.value : node2.connectable) === false) {
-        return;
-      }
-      const doc = getHostForElement(event.target);
-      const { connection: connection2, isValid: isValid2 } = isValidHandle(
-        event,
-        {
+      startConnection(
+        { nodeId: toValue$1(nodeId), type: toValue$1(type), id: toValue$1(handleId), position: Position.Top },
+        void 0,
+        true
+      );
+      return;
+    }
+    let isValidConnectionHandler = toValue$1(isValidConnection) || isValidConnectionProp.value || alwaysValid;
+    const node2 = findNode(toValue$1(nodeId));
+    if (!isValidConnectionHandler && node2) {
+      isValidConnectionHandler = (!isTarget ? node2.isValidTargetPos : node2.isValidSourcePos) || alwaysValid;
+    }
+    if (node2 && (typeof node2.connectable === "undefined" ? nodesConnectable.value : node2.connectable) === false) {
+      return;
+    }
+    const doc = getHostForElement(event.target);
+    const result = isValidHandle(
+      event,
+      {
+        handle: {
           nodeId: toValue$1(nodeId),
           id: toValue$1(handleId),
-          type: toValue$1(type)
+          type: toValue$1(type),
+          position: Position.Top
         },
-        connectionMode.value,
-        connectionClickStartHandle.value.nodeId,
-        connectionClickStartHandle.value.handleId || null,
-        connectionClickStartHandle.value.type,
-        isValidConnectionHandler,
+        connectionMode: connectionMode.value,
+        fromNodeId: connectionClickStartHandle.value.nodeId,
+        fromHandleId: connectionClickStartHandle.value.id || null,
+        fromType: connectionClickStartHandle.value.type,
+        isValidConnection: isValidConnectionHandler,
         doc,
-        edges.value,
-        nodes.value,
-        findNode
-      );
-      const isOwnHandle = connection2.source === connection2.target;
-      if (isValid2 && !isOwnHandle) {
-        emits.connect(connection2);
-      }
-      emits.clickConnectEnd(event);
-      endConnection(event, true);
+        lib: "vue",
+        flowId,
+        nodeLookup: nodeLookup.value
+      },
+      edges.value,
+      nodes.value,
+      findNode
+    );
+    const isOwnHandle = ((_a = result.connection) == null ? void 0 : _a.source) === ((_b = result.connection) == null ? void 0 : _b.target);
+    if (result.isValid && result.connection && !isOwnHandle) {
+      emits.connect(result.connection);
     }
+    emits.clickConnectEnd(event);
+    endConnection(event, true);
   }
   return {
     handlePointerDown,
@@ -7746,8 +7796,8 @@ function useActions(state, nodeLookup, edgeLookup) {
         if (doUpdate) {
           const nodeBounds = update.nodeElement.getBoundingClientRect();
           node2.dimensions = dimensions;
-          node2.handleBounds.source = getHandleBounds(".source", update.nodeElement, nodeBounds, zoom2);
-          node2.handleBounds.target = getHandleBounds(".target", update.nodeElement, nodeBounds, zoom2);
+          node2.handleBounds.source = getHandleBounds("source", update.nodeElement, nodeBounds, zoom2);
+          node2.handleBounds.target = getHandleBounds("target", update.nodeElement, nodeBounds, zoom2);
           changes.push({
             id: node2.id,
             type: "dimensions",
@@ -7902,7 +7952,7 @@ function useActions(state, nodeLookup, edgeLookup) {
       state.nodes,
       state.edges
     );
-    updateConnectionLookup(state.connectionLookup, validEdges);
+    updateConnectionLookup(state.connectionLookup, edgeLookup.value, validEdges);
     state.edges = validEdges;
   };
   const setElements = (elements) => {
@@ -8040,7 +8090,7 @@ function useActions(state, nodeLookup, edgeLookup) {
         state.edges
       );
       state.edges.splice(state.edges.indexOf(prevEdge), 1, validEdge);
-      updateConnectionLookup(state.connectionLookup, [validEdge]);
+      updateConnectionLookup(state.connectionLookup, edgeLookup.value, [validEdge]);
       return validEdge;
     }
     return false;
@@ -8058,7 +8108,7 @@ function useActions(state, nodeLookup, edgeLookup) {
   };
   const applyEdgeChanges2 = (changes) => {
     const changedEdges = applyChanges(changes, state.edges);
-    updateConnectionLookup(state.connectionLookup, changedEdges);
+    updateConnectionLookup(state.connectionLookup, edgeLookup.value, changedEdges);
     return changedEdges;
   };
   const updateNode = (id2, nodeUpdate, options = { replace: false }) => {
@@ -8370,6 +8420,7 @@ const _sfc_main$f$1 = /* @__PURE__ */ defineComponent({
     const type = toRef(() => props.type ?? "source");
     const isValidConnection = toRef(() => props.isValidConnection ?? null);
     const {
+      id: flowId,
       connectionStartHandle,
       connectionClickStartHandle,
       connectionEndHandle,
@@ -8385,13 +8436,13 @@ const _sfc_main$f$1 = /* @__PURE__ */ defineComponent({
     const isConnecting = toRef(
       () => {
         var _a, _b, _c, _d, _e, _f;
-        return ((_a = connectionStartHandle.value) == null ? void 0 : _a.nodeId) === nodeId && ((_b = connectionStartHandle.value) == null ? void 0 : _b.handleId) === __props.id && ((_c = connectionStartHandle.value) == null ? void 0 : _c.type) === type.value || ((_d = connectionEndHandle.value) == null ? void 0 : _d.nodeId) === nodeId && ((_e = connectionEndHandle.value) == null ? void 0 : _e.handleId) === __props.id && ((_f = connectionEndHandle.value) == null ? void 0 : _f.type) === type.value;
+        return ((_a = connectionStartHandle.value) == null ? void 0 : _a.nodeId) === nodeId && ((_b = connectionStartHandle.value) == null ? void 0 : _b.id) === __props.id && ((_c = connectionStartHandle.value) == null ? void 0 : _c.type) === type.value || ((_d = connectionEndHandle.value) == null ? void 0 : _d.nodeId) === nodeId && ((_e = connectionEndHandle.value) == null ? void 0 : _e.id) === __props.id && ((_f = connectionEndHandle.value) == null ? void 0 : _f.type) === type.value;
       }
     );
     const isClickConnecting = toRef(
       () => {
         var _a, _b, _c;
-        return ((_a = connectionClickStartHandle.value) == null ? void 0 : _a.nodeId) === nodeId && ((_b = connectionClickStartHandle.value) == null ? void 0 : _b.handleId) === __props.id && ((_c = connectionClickStartHandle.value) == null ? void 0 : _c.type) === type.value;
+        return ((_a = connectionClickStartHandle.value) == null ? void 0 : _a.nodeId) === nodeId && ((_b = connectionClickStartHandle.value) == null ? void 0 : _b.id) === __props.id && ((_c = connectionClickStartHandle.value) == null ? void 0 : _c.type) === type.value;
       }
     );
     const { handlePointerDown, handleClick } = useHandle({
@@ -8446,6 +8497,8 @@ const _sfc_main$f$1 = /* @__PURE__ */ defineComponent({
         position: __props.position,
         x: (handleBounds.left - nodeBounds.left) / zoom2,
         y: (handleBounds.top - nodeBounds.top) / zoom2,
+        type: type.value,
+        nodeId,
         ...getDimensions(handle2.value)
       };
       node2.handleBounds[type.value] = [...node2.handleBounds[type.value] ?? [], nextBounds];
@@ -8480,7 +8533,7 @@ const _sfc_main$f$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "handle",
         ref: handle2,
-        "data-id": `${unref(nodeId)}-${__props.id}-${type.value}`,
+        "data-id": `${unref(flowId)}-${unref(nodeId)}-${__props.id}-${type.value}`,
         "data-handleid": __props.id,
         "data-nodeid": unref(nodeId),
         "data-handlepos": _ctx.position,
@@ -8647,15 +8700,13 @@ const _sfc_main$d$1 = /* @__PURE__ */ defineComponent({
     markerStart: {},
     markerEnd: {},
     interactionWidth: { default: 20 },
-    style: {},
     labelStyle: {},
-    labelShowBg: { type: Boolean, default: true },
+    labelShowBg: { type: Boolean },
     labelBgStyle: {},
     labelBgPadding: {},
     labelBgBorderRadius: {}
   },
   setup(__props, { expose: __expose }) {
-    const props = createPropsRestProxy(__props, ["interactionWidth", "labelShowBg"]);
     const pathEl = ref(null);
     const interactionEl = ref(null);
     const labelEl = ref(null);
@@ -8667,16 +8718,15 @@ const _sfc_main$d$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createBaseVNode("path", {
+        createBaseVNode("path", mergeProps(unref(attrs), {
           id: _ctx.id,
           ref_key: "pathEl",
           ref: pathEl,
           d: _ctx.path,
-          style: normalizeStyle(props.style),
-          class: normalizeClass(["vue-flow__edge-path", unref(attrs).class]),
+          class: "vue-flow__edge-path",
           "marker-end": _ctx.markerEnd,
           "marker-start": _ctx.markerStart
-        }, null, 14, _hoisted_1$7$1),
+        }), null, 16, _hoisted_1$7$1),
         _ctx.interactionWidth ? (openBlock(), createElementBlock("path", {
           key: 0,
           ref_key: "interactionEl",
@@ -9396,7 +9446,7 @@ class Storage {
       edgeLookup,
       emits,
       id: id2,
-      vueFlowVersion: "1.41.6",
+      vueFlowVersion: "1.42.1",
       $destroy: () => {
         this.remove(id2);
       }
@@ -9644,13 +9694,14 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       multiSelectionKeyCode,
       multiSelectionActive,
       edgeLookup,
-      nodeLookup
+      nodeLookup,
+      connectionLookup,
+      defaultEdgeOptions
     } = useVueFlow();
     const container = ref(null);
-    const prevSelectedNodesCount = ref(0);
-    const prevSelectedEdgesCount = ref(0);
+    const selectedNodeIds = ref(/* @__PURE__ */ new Set());
+    const selectedEdgeIds = ref(/* @__PURE__ */ new Set());
     const containerBounds = ref();
-    const edgeIdLookup = ref(/* @__PURE__ */ new Map());
     const hasActiveSelection = toRef(() => elementsSelectable.value && (__props.isSelecting || userSelectionActive.value));
     let selectionInProgress = false;
     let selectionStarted = false;
@@ -9675,12 +9726,6 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
         handler == null ? void 0 : handler(event);
       };
     }
-    function resetUserSelection() {
-      userSelectionActive.value = false;
-      userSelectionRect.value = null;
-      prevSelectedNodesCount.value = 0;
-      prevSelectedEdgesCount.value = 0;
-    }
     function onClick(event) {
       if (selectionInProgress) {
         selectionInProgress = false;
@@ -9699,7 +9744,7 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       emits.paneScroll(event);
     }
     function onPointerDown(event) {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c;
       containerBounds.value = (_a = vueFlowRef.value) == null ? void 0 : _a.getBoundingClientRect();
       if (!elementsSelectable.value || !__props.isSelecting || event.button !== 0 || event.target !== container.value || !containerBounds.value) {
         return;
@@ -9708,11 +9753,6 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       const { x, y } = getMousePosition(event, containerBounds.value);
       selectionStarted = true;
       selectionInProgress = false;
-      edgeIdLookup.value = /* @__PURE__ */ new Map();
-      for (const [id2, edge2] of edgeLookup.value) {
-        edgeIdLookup.value.set(edge2.source, ((_d = edgeIdLookup.value.get(edge2.source)) == null ? void 0 : _d.add(id2)) || /* @__PURE__ */ new Set([id2]));
-        edgeIdLookup.value.set(edge2.target, ((_e = edgeIdLookup.value.get(edge2.target)) == null ? void 0 : _e.add(id2)) || /* @__PURE__ */ new Set([id2]));
-      }
       removeSelectedElements();
       userSelectionRect.value = {
         width: 0,
@@ -9725,6 +9765,7 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       emits.selectionStart(event);
     }
     function onPointerMove(event) {
+      var _a;
       if (!containerBounds.value || !userSelectionRect.value) {
         return;
       }
@@ -9739,32 +9780,33 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
         width: Math.abs(mouseX - startX),
         height: Math.abs(mouseY - startY)
       };
-      const selectedNodes = getNodesInside(
-        nodes.value,
-        nextUserSelectRect,
-        viewport.value,
-        selectionMode.value === SelectionMode.Partial,
-        true
+      const prevSelectedNodeIds = selectedNodeIds.value;
+      const prevSelectedEdgeIds = selectedEdgeIds.value;
+      selectedNodeIds.value = new Set(
+        getNodesInside(nodes.value, nextUserSelectRect, viewport.value, selectionMode.value === SelectionMode.Partial, true).map(
+          (node2) => node2.id
+        )
       );
-      const selectedEdgeIds = /* @__PURE__ */ new Set();
-      const selectedNodeIds = /* @__PURE__ */ new Set();
-      for (const selectedNode of selectedNodes) {
-        selectedNodeIds.add(selectedNode.id);
-        const edgeIds = edgeIdLookup.value.get(selectedNode.id);
-        if (edgeIds) {
-          for (const edgeId of edgeIds) {
-            selectedEdgeIds.add(edgeId);
+      selectedEdgeIds.value = /* @__PURE__ */ new Set();
+      const edgesSelectable = ((_a = defaultEdgeOptions.value) == null ? void 0 : _a.selectable) ?? true;
+      for (const nodeId of selectedNodeIds.value) {
+        const connections = connectionLookup.value.get(nodeId);
+        if (!connections) {
+          continue;
+        }
+        for (const { edgeId } of connections.values()) {
+          const edge2 = edgeLookup.value.get(edgeId);
+          if (edge2 && (edge2.selectable ?? edgesSelectable)) {
+            selectedEdgeIds.value.add(edgeId);
           }
         }
       }
-      if (prevSelectedNodesCount.value !== selectedNodeIds.size) {
-        prevSelectedNodesCount.value = selectedNodeIds.size;
-        const changes = getSelectionChanges(nodeLookup.value, selectedNodeIds, true);
+      if (!areSetsEqual(prevSelectedNodeIds, selectedNodeIds.value)) {
+        const changes = getSelectionChanges(nodeLookup.value, selectedNodeIds.value, true);
         emits.nodesChange(changes);
       }
-      if (prevSelectedEdgesCount.value !== selectedEdgeIds.size) {
-        prevSelectedEdgesCount.value = selectedEdgeIds.size;
-        const changes = getSelectionChanges(edgeLookup.value, selectedEdgeIds);
+      if (!areSetsEqual(prevSelectedEdgeIds, selectedEdgeIds.value)) {
+        const changes = getSelectionChanges(edgeLookup.value, selectedEdgeIds.value);
         emits.edgesChange(changes);
       }
       userSelectionRect.value = nextUserSelectRect;
@@ -9780,10 +9822,9 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       if (!userSelectionActive.value && userSelectionRect.value && event.target === container.value) {
         onClick(event);
       }
-      if (prevSelectedNodesCount.value > 0) {
-        nodesSelectionActive.value = true;
-      }
-      resetUserSelection();
+      userSelectionActive.value = false;
+      userSelectionRect.value = null;
+      nodesSelectionActive.value = selectedNodeIds.value.size > 0;
       emits.selectionEnd(event);
       if (__props.selectionKeyPressed) {
         selectionInProgress = false;
@@ -10321,14 +10362,14 @@ const EdgeWrapper = defineComponent({
       } else {
         sourceNodeHandles = [...sourceNode.handleBounds.source || [], ...sourceNode.handleBounds.target || []];
       }
-      const sourceHandle = getHandle(sourceNodeHandles, edge2.value.sourceHandle);
+      const sourceHandle = getEdgeHandle(sourceNodeHandles, edge2.value.sourceHandle);
       let targetNodeHandles;
       if (connectionMode.value === ConnectionMode.Strict) {
         targetNodeHandles = targetNode.handleBounds.target;
       } else {
         targetNodeHandles = [...targetNode.handleBounds.target || [], ...targetNode.handleBounds.source || []];
       }
-      const targetHandle = getHandle(targetNodeHandles, edge2.value.targetHandle);
+      const targetHandle = getEdgeHandle(targetNodeHandles, edge2.value.targetHandle);
       const sourcePosition = (sourceHandle == null ? void 0 : sourceHandle.position) || Position.Bottom;
       const targetPosition = (targetHandle == null ? void 0 : targetHandle.position) || Position.Top;
       const { x: sourceX, y: sourceY } = getHandlePosition(sourceNode, sourceHandle, sourcePosition);
@@ -10515,12 +10556,6 @@ const EdgeWrapper = defineComponent({
   }
 });
 const EdgeWrapper$1 = EdgeWrapper;
-const oppositePosition = {
-  [Position.Left]: Position.Right,
-  [Position.Right]: Position.Left,
-  [Position.Top]: Position.Bottom,
-  [Position.Bottom]: Position.Top
-};
 const ConnectionLine = defineComponent({
   name: "ConnectionLine",
   compatConfig: { MODE: 3 },
@@ -10561,11 +10596,11 @@ const ConnectionLine = defineComponent({
       () => connectionLineOptions.value.markerEnd ? `url(#${getMarkerId(connectionLineOptions.value.markerEnd, id2)})` : ""
     );
     return () => {
-      var _a2, _b, _c, _d;
+      var _a2, _b, _c;
       if (!fromNode.value || !connectionStartHandle.value) {
         return null;
       }
-      const startHandleId = connectionStartHandle.value.handleId;
+      const startHandleId = connectionStartHandle.value.id;
       const handleType = connectionStartHandle.value.type;
       const fromHandleBounds = fromNode.value.handleBounds;
       let handleBounds = (fromHandleBounds == null ? void 0 : fromHandleBounds[handleType]) || [];
@@ -10580,24 +10615,24 @@ const ConnectionLine = defineComponent({
       const fromPosition = (fromHandle == null ? void 0 : fromHandle.position) || Position.Top;
       const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition);
       let toHandle = null;
-      if (toNode.value && ((_a2 = connectionEndHandle.value) == null ? void 0 : _a2.handleId)) {
+      if (toNode.value) {
         if (connectionMode.value === ConnectionMode.Strict) {
-          toHandle = ((_b = toNode.value.handleBounds[handleType === "source" ? "target" : "source"]) == null ? void 0 : _b.find(
+          toHandle = ((_a2 = toNode.value.handleBounds[handleType === "source" ? "target" : "source"]) == null ? void 0 : _a2.find(
             (d) => {
               var _a3;
-              return d.id === ((_a3 = connectionEndHandle.value) == null ? void 0 : _a3.handleId);
+              return d.id === ((_a3 = connectionEndHandle.value) == null ? void 0 : _a3.id);
             }
           )) || null;
         } else {
-          toHandle = ((_c = [...toNode.value.handleBounds.source || [], ...toNode.value.handleBounds.target || []]) == null ? void 0 : _c.find(
+          toHandle = ((_b = [...toNode.value.handleBounds.source || [], ...toNode.value.handleBounds.target || []]) == null ? void 0 : _b.find(
             (d) => {
               var _a3;
-              return d.id === ((_a3 = connectionEndHandle.value) == null ? void 0 : _a3.handleId);
+              return d.id === ((_a3 = connectionEndHandle.value) == null ? void 0 : _a3.id);
             }
           )) || null;
         }
       }
-      const toPosition = ((_d = connectionEndHandle.value) == null ? void 0 : _d.position) ?? (fromPosition ? oppositePosition[fromPosition] : null);
+      const toPosition = ((_c = connectionEndHandle.value) == null ? void 0 : _c.position) ?? (fromPosition ? oppositePosition[fromPosition] : null);
       if (!fromPosition || !toPosition) {
         return null;
       }
@@ -11804,8 +11839,7 @@ var noop$1 = { value: () => {
 } };
 function dispatch$1() {
   for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {
-    if (!(t = arguments[i] + "") || t in _ || /[\s.]/.test(t))
-      throw new Error("illegal type: " + t);
+    if (!(t = arguments[i] + "") || t in _ || /[\s.]/.test(t)) throw new Error("illegal type: " + t);
     _[t] = [];
   }
   return new Dispatch$1(_);
@@ -11816,10 +11850,8 @@ function Dispatch$1(_) {
 function parseTypenames$1$1(typenames, types) {
   return typenames.trim().split(/^|\s+/).map(function(t) {
     var name = "", i = t.indexOf(".");
-    if (i >= 0)
-      name = t.slice(i + 1), t = t.slice(0, i);
-    if (t && !types.hasOwnProperty(t))
-      throw new Error("unknown type: " + t);
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
     return { type: t, name };
   });
 }
@@ -11828,42 +11860,29 @@ Dispatch$1.prototype = dispatch$1.prototype = {
   on: function(typename, callback) {
     var _ = this._, T = parseTypenames$1$1(typename + "", _), t, i = -1, n = T.length;
     if (arguments.length < 2) {
-      while (++i < n)
-        if ((t = (typename = T[i]).type) && (t = get$1(_[t], typename.name)))
-          return t;
+      while (++i < n) if ((t = (typename = T[i]).type) && (t = get$1(_[t], typename.name))) return t;
       return;
     }
-    if (callback != null && typeof callback !== "function")
-      throw new Error("invalid callback: " + callback);
+    if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
     while (++i < n) {
-      if (t = (typename = T[i]).type)
-        _[t] = set$1(_[t], typename.name, callback);
-      else if (callback == null)
-        for (t in _)
-          _[t] = set$1(_[t], typename.name, null);
+      if (t = (typename = T[i]).type) _[t] = set$1(_[t], typename.name, callback);
+      else if (callback == null) for (t in _) _[t] = set$1(_[t], typename.name, null);
     }
     return this;
   },
   copy: function() {
     var copy = {}, _ = this._;
-    for (var t in _)
-      copy[t] = _[t].slice();
+    for (var t in _) copy[t] = _[t].slice();
     return new Dispatch$1(copy);
   },
   call: function(type, that) {
-    if ((n = arguments.length - 2) > 0)
-      for (var args = new Array(n), i = 0, n, t; i < n; ++i)
-        args[i] = arguments[i + 2];
-    if (!this._.hasOwnProperty(type))
-      throw new Error("unknown type: " + type);
-    for (t = this._[type], i = 0, n = t.length; i < n; ++i)
-      t[i].value.apply(that, args);
+    if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) args[i] = arguments[i + 2];
+    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
+    for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
   },
   apply: function(type, that, args) {
-    if (!this._.hasOwnProperty(type))
-      throw new Error("unknown type: " + type);
-    for (var t = this._[type], i = 0, n = t.length; i < n; ++i)
-      t[i].value.apply(that, args);
+    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
+    for (var t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
   }
 };
 function get$1(type, name) {
@@ -11880,8 +11899,7 @@ function set$1(type, name, callback) {
       break;
     }
   }
-  if (callback != null)
-    type.push({ name, value: callback });
+  if (callback != null) type.push({ name, value: callback });
   return type;
 }
 var xhtml$1 = "http://www.w3.org/1999/xhtml";
@@ -11894,8 +11912,7 @@ const namespaces$1 = {
 };
 function namespace$1(name) {
   var prefix = name += "", i = prefix.indexOf(":");
-  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns")
-    name = name.slice(i + 1);
+  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
   return namespaces$1.hasOwnProperty(prefix) ? { space: namespaces$1[prefix], local: name } : name;
 }
 function creatorInherit$1(name) {
@@ -11921,13 +11938,11 @@ function selector$1(selector2) {
   };
 }
 function selection_select$1(select2) {
-  if (typeof select2 !== "function")
-    select2 = selector$1(select2);
+  if (typeof select2 !== "function") select2 = selector$1(select2);
   for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node2, subnode, i = 0; i < n; ++i) {
       if ((node2 = group[i]) && (subnode = select2.call(node2, node2.__data__, i, group))) {
-        if ("__data__" in node2)
-          subnode.__data__ = node2.__data__;
+        if ("__data__" in node2) subnode.__data__ = node2.__data__;
         subgroup[i] = subnode;
       }
     }
@@ -11951,10 +11966,8 @@ function arrayAll$1(select2) {
   };
 }
 function selection_selectAll$1(select2) {
-  if (typeof select2 === "function")
-    select2 = arrayAll$1(select2);
-  else
-    select2 = selectorAll$1(select2);
+  if (typeof select2 === "function") select2 = arrayAll$1(select2);
+  else select2 = selectorAll$1(select2);
   for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, node2, i = 0; i < n; ++i) {
       if (node2 = group[i]) {
@@ -12000,8 +12013,7 @@ function selection_selectChildren$1(match) {
   return this.selectAll(match == null ? children$1 : childrenFilter$1(typeof match === "function" ? match : childMatcher$1(match)));
 }
 function selection_filter$1(match) {
-  if (typeof match !== "function")
-    match = matcher$1(match);
+  if (typeof match !== "function") match = matcher$1(match);
   for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node2, i = 0; i < n; ++i) {
       if ((node2 = group[i]) && match.call(node2, node2.__data__, i, group)) {
@@ -12092,20 +12104,16 @@ function datum$1(node2) {
   return node2.__data__;
 }
 function selection_data$1(value, key) {
-  if (!arguments.length)
-    return Array.from(this, datum$1);
+  if (!arguments.length) return Array.from(this, datum$1);
   var bind = key ? bindKey$1 : bindIndex$1, parents = this._parents, groups = this._groups;
-  if (typeof value !== "function")
-    value = constant$2(value);
+  if (typeof value !== "function") value = constant$2(value);
   for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
     var parent = parents[j], group = groups[j], groupLength = group.length, data = arraylike$1(value.call(parent, parent && parent.__data__, j, parents)), dataLength = data.length, enterGroup = enter[j] = new Array(dataLength), updateGroup = update[j] = new Array(dataLength), exitGroup = exit[j] = new Array(groupLength);
     bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
     for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
       if (previous = enterGroup[i0]) {
-        if (i0 >= i1)
-          i1 = i0 + 1;
-        while (!(next = updateGroup[i1]) && ++i1 < dataLength)
-          ;
+        if (i0 >= i1) i1 = i0 + 1;
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength) ;
         previous._next = next || null;
       }
     }
@@ -12125,20 +12133,16 @@ function selection_join$1(onenter, onupdate, onexit) {
   var enter = this.enter(), update = this, exit = this.exit();
   if (typeof onenter === "function") {
     enter = onenter(enter);
-    if (enter)
-      enter = enter.selection();
+    if (enter) enter = enter.selection();
   } else {
     enter = enter.append(onenter + "");
   }
   if (onupdate != null) {
     update = onupdate(update);
-    if (update)
-      update = update.selection();
+    if (update) update = update.selection();
   }
-  if (onexit == null)
-    exit.remove();
-  else
-    onexit(exit);
+  if (onexit == null) exit.remove();
+  else onexit(exit);
   return enter && update ? enter.merge(update).order() : update;
 }
 function selection_merge$1(context) {
@@ -12159,8 +12163,7 @@ function selection_order$1() {
   for (var groups = this._groups, j = -1, m = groups.length; ++j < m; ) {
     for (var group = groups[j], i = group.length - 1, next = group[i], node2; --i >= 0; ) {
       if (node2 = group[i]) {
-        if (next && node2.compareDocumentPosition(next) ^ 4)
-          next.parentNode.insertBefore(node2, next);
+        if (next && node2.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node2, next);
         next = node2;
       }
     }
@@ -12168,8 +12171,7 @@ function selection_order$1() {
   return this;
 }
 function selection_sort$1(compare) {
-  if (!compare)
-    compare = ascending$1;
+  if (!compare) compare = ascending$1;
   function compareNode(a, b) {
     return a && b ? compare(a.__data__, b.__data__) : !a - !b;
   }
@@ -12199,16 +12201,14 @@ function selection_node$1() {
   for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
     for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
       var node2 = group[i];
-      if (node2)
-        return node2;
+      if (node2) return node2;
     }
   }
   return null;
 }
 function selection_size$1() {
   let size = 0;
-  for (const node2 of this)
-    ++size;
+  for (const node2 of this) ++size;
   return size;
 }
 function selection_empty$1() {
@@ -12217,8 +12217,7 @@ function selection_empty$1() {
 function selection_each$1(callback) {
   for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
     for (var group = groups[j], i = 0, n = group.length, node2; i < n; ++i) {
-      if (node2 = group[i])
-        callback.call(node2, node2.__data__, i, group);
+      if (node2 = group[i]) callback.call(node2, node2.__data__, i, group);
     }
   }
   return this;
@@ -12246,19 +12245,15 @@ function attrConstantNS$1(fullname, value) {
 function attrFunction$1(name, value) {
   return function() {
     var v = value.apply(this, arguments);
-    if (v == null)
-      this.removeAttribute(name);
-    else
-      this.setAttribute(name, v);
+    if (v == null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
   };
 }
 function attrFunctionNS$1(fullname, value) {
   return function() {
     var v = value.apply(this, arguments);
-    if (v == null)
-      this.removeAttributeNS(fullname.space, fullname.local);
-    else
-      this.setAttributeNS(fullname.space, fullname.local, v);
+    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+    else this.setAttributeNS(fullname.space, fullname.local, v);
   };
 }
 function selection_attr$1(name, value) {
@@ -12285,10 +12280,8 @@ function styleConstant$1(name, value, priority) {
 function styleFunction$1(name, value, priority) {
   return function() {
     var v = value.apply(this, arguments);
-    if (v == null)
-      this.style.removeProperty(name);
-    else
-      this.style.setProperty(name, v, priority);
+    if (v == null) this.style.removeProperty(name);
+    else this.style.setProperty(name, v, priority);
   };
 }
 function selection_style$1(name, value, priority) {
@@ -12310,10 +12303,8 @@ function propertyConstant$1(name, value) {
 function propertyFunction$1(name, value) {
   return function() {
     var v = value.apply(this, arguments);
-    if (v == null)
-      delete this[name];
-    else
-      this[name] = v;
+    if (v == null) delete this[name];
+    else this[name] = v;
   };
 }
 function selection_property$1(name, value) {
@@ -12350,13 +12341,11 @@ ClassList$1.prototype = {
 };
 function classedAdd$1(node2, names) {
   var list = classList$1(node2), i = -1, n = names.length;
-  while (++i < n)
-    list.add(names[i]);
+  while (++i < n) list.add(names[i]);
 }
 function classedRemove$1(node2, names) {
   var list = classList$1(node2), i = -1, n = names.length;
-  while (++i < n)
-    list.remove(names[i]);
+  while (++i < n) list.remove(names[i]);
 }
 function classedTrue$1(names) {
   return function() {
@@ -12377,9 +12366,7 @@ function selection_classed$1(name, value) {
   var names = classArray$1(name + "");
   if (arguments.length < 2) {
     var list = classList$1(this.node()), i = -1, n = names.length;
-    while (++i < n)
-      if (!list.contains(names[i]))
-        return false;
+    while (++i < n) if (!list.contains(names[i])) return false;
     return true;
   }
   return this.each((typeof value === "function" ? classedFunction$1 : value ? classedTrue$1 : classedFalse$1)(names, value));
@@ -12419,15 +12406,13 @@ function selection_html$1(value) {
   return arguments.length ? this.each(value == null ? htmlRemove$1 : (typeof value === "function" ? htmlFunction$1 : htmlConstant$1)(value)) : this.node().innerHTML;
 }
 function raise$1() {
-  if (this.nextSibling)
-    this.parentNode.appendChild(this);
+  if (this.nextSibling) this.parentNode.appendChild(this);
 }
 function selection_raise$1() {
   return this.each(raise$1);
 }
 function lower$1() {
-  if (this.previousSibling)
-    this.parentNode.insertBefore(this, this.parentNode.firstChild);
+  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
 }
 function selection_lower$1() {
   return this.each(lower$1);
@@ -12449,8 +12434,7 @@ function selection_insert$1(name, before) {
 }
 function remove$1() {
   var parent = this.parentNode;
-  if (parent)
-    parent.removeChild(this);
+  if (parent) parent.removeChild(this);
 }
 function selection_remove$1() {
   return this.each(remove$1);
@@ -12477,16 +12461,14 @@ function contextListener$1(listener) {
 function parseTypenames$2(typenames) {
   return typenames.trim().split(/^|\s+/).map(function(t) {
     var name = "", i = t.indexOf(".");
-    if (i >= 0)
-      name = t.slice(i + 1), t = t.slice(0, i);
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
     return { type: t, name };
   });
 }
 function onRemove$1(typename) {
   return function() {
     var on = this.__on;
-    if (!on)
-      return;
+    if (!on) return;
     for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
       if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
         this.removeEventListener(o.type, o.listener, o.options);
@@ -12494,49 +12476,42 @@ function onRemove$1(typename) {
         on[++i] = o;
       }
     }
-    if (++i)
-      on.length = i;
-    else
-      delete this.__on;
+    if (++i) on.length = i;
+    else delete this.__on;
   };
 }
 function onAdd$1(typename, value, options) {
   return function() {
     var on = this.__on, o, listener = contextListener$1(value);
-    if (on)
-      for (var j = 0, m = on.length; j < m; ++j) {
-        if ((o = on[j]).type === typename.type && o.name === typename.name) {
-          this.removeEventListener(o.type, o.listener, o.options);
-          this.addEventListener(o.type, o.listener = listener, o.options = options);
-          o.value = value;
-          return;
-        }
+    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+        this.addEventListener(o.type, o.listener = listener, o.options = options);
+        o.value = value;
+        return;
       }
+    }
     this.addEventListener(typename.type, listener, options);
     o = { type: typename.type, name: typename.name, value, listener, options };
-    if (!on)
-      this.__on = [o];
-    else
-      on.push(o);
+    if (!on) this.__on = [o];
+    else on.push(o);
   };
 }
 function selection_on$1(typename, value, options) {
   var typenames = parseTypenames$2(typename + ""), i, n = typenames.length, t;
   if (arguments.length < 2) {
     var on = this.node().__on;
-    if (on)
-      for (var j = 0, m = on.length, o; j < m; ++j) {
-        for (i = 0, o = on[j]; i < n; ++i) {
-          if ((t = typenames[i]).type === o.type && t.name === o.name) {
-            return o.value;
-          }
+    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+      for (i = 0, o = on[j]; i < n; ++i) {
+        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+          return o.value;
         }
       }
+    }
     return;
   }
   on = value ? onAdd$1 : onRemove$1;
-  for (i = 0; i < n; ++i)
-    this.each(on(typenames[i], value, options));
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
   return this;
 }
 function dispatchEvent$1(node2, type, params) {
@@ -12545,10 +12520,8 @@ function dispatchEvent$1(node2, type, params) {
     event = new event(type, params);
   } else {
     event = window2.document.createEvent("Event");
-    if (params)
-      event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
-    else
-      event.initEvent(type, false, false);
+    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+    else event.initEvent(type, false, false);
   }
   node2.dispatchEvent(event);
 }
@@ -12568,8 +12541,7 @@ function selection_dispatch$1(type, params) {
 function* selection_iterator$1() {
   for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
     for (var group = groups[j], i = 0, n = group.length, node2; i < n; ++i) {
-      if (node2 = group[i])
-        yield node2;
+      if (node2 = group[i]) yield node2;
     }
   }
 }
@@ -12627,14 +12599,12 @@ function select$1(selector2) {
 }
 function sourceEvent$1(event) {
   let sourceEvent2;
-  while (sourceEvent2 = event.sourceEvent)
-    event = sourceEvent2;
+  while (sourceEvent2 = event.sourceEvent) event = sourceEvent2;
   return event;
 }
 function pointer$1(event, node2) {
   event = sourceEvent$1(event);
-  if (node2 === void 0)
-    node2 = event.currentTarget;
+  if (node2 === void 0) node2 = event.currentTarget;
   if (node2) {
     var svg = node2.ownerSVGElement || node2;
     if (svg.createSVGPoint) {
@@ -12685,8 +12655,7 @@ function define(constructor, factory, prototype) {
 }
 function extend(parent, definition) {
   var prototype = Object.create(parent.prototype);
-  for (var key in definition)
-    prototype[key] = definition[key];
+  for (var key in definition) prototype[key] = definition[key];
   return prototype;
 }
 function Color() {
@@ -12880,15 +12849,12 @@ function rgbn(n) {
   return new Rgb(n >> 16 & 255, n >> 8 & 255, n & 255, 1);
 }
 function rgba(r, g, b, a) {
-  if (a <= 0)
-    r = g = b = NaN;
+  if (a <= 0) r = g = b = NaN;
   return new Rgb(r, g, b, a);
 }
 function rgbConvert(o) {
-  if (!(o instanceof Color))
-    o = color$1(o);
-  if (!o)
-    return new Rgb();
+  if (!(o instanceof Color)) o = color$1(o);
+  if (!o) return new Rgb();
   o = o.rgb();
   return new Rgb(o.r, o.g, o.b, o.opacity);
 }
@@ -12947,32 +12913,22 @@ function hex(value) {
   return (value < 16 ? "0" : "") + value.toString(16);
 }
 function hsla(h2, s, l, a) {
-  if (a <= 0)
-    h2 = s = l = NaN;
-  else if (l <= 0 || l >= 1)
-    h2 = s = NaN;
-  else if (s <= 0)
-    h2 = NaN;
+  if (a <= 0) h2 = s = l = NaN;
+  else if (l <= 0 || l >= 1) h2 = s = NaN;
+  else if (s <= 0) h2 = NaN;
   return new Hsl(h2, s, l, a);
 }
 function hslConvert(o) {
-  if (o instanceof Hsl)
-    return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color))
-    o = color$1(o);
-  if (!o)
-    return new Hsl();
-  if (o instanceof Hsl)
-    return o;
+  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+  if (!(o instanceof Color)) o = color$1(o);
+  if (!o) return new Hsl();
+  if (o instanceof Hsl) return o;
   o = o.rgb();
   var r = o.r / 255, g = o.g / 255, b = o.b / 255, min = Math.min(r, g, b), max = Math.max(r, g, b), h2 = NaN, s = max - min, l = (max + min) / 2;
   if (s) {
-    if (r === max)
-      h2 = (g - b) / s + (g < b) * 6;
-    else if (g === max)
-      h2 = (b - r) / s + 2;
-    else
-      h2 = (r - g) / s + 4;
+    if (r === max) h2 = (g - b) / s + (g < b) * 6;
+    else if (g === max) h2 = (b - r) / s + 2;
+    else h2 = (r - g) / s + 4;
     s /= l < 0.5 ? max + min : 2 - max - min;
     h2 *= 60;
   } else {
@@ -13085,16 +13041,12 @@ function interpolateString(a, b) {
   while ((am = reA.exec(a)) && (bm = reB.exec(b))) {
     if ((bs = bm.index) > bi) {
       bs = b.slice(bi, bs);
-      if (s[i])
-        s[i] += bs;
-      else
-        s[++i] = bs;
+      if (s[i]) s[i] += bs;
+      else s[++i] = bs;
     }
     if ((am = am[0]) === (bm = bm[0])) {
-      if (s[i])
-        s[i] += bm;
-      else
-        s[++i] = bm;
+      if (s[i]) s[i] += bm;
+      else s[++i] = bm;
     } else {
       s[++i] = null;
       q.push({ i, x: interpolateNumber(am, bm) });
@@ -13103,14 +13055,11 @@ function interpolateString(a, b) {
   }
   if (bi < b.length) {
     bs = b.slice(bi);
-    if (s[i])
-      s[i] += bs;
-    else
-      s[++i] = bs;
+    if (s[i]) s[i] += bs;
+    else s[++i] = bs;
   }
   return s.length < 2 ? q[0] ? one(q[0].x) : zero(b) : (b = q.length, function(t) {
-    for (var i2 = 0, o; i2 < b; ++i2)
-      s[(o = q[i2]).i] = o.x(t);
+    for (var i2 = 0, o; i2 < b; ++i2) s[(o = q[i2]).i] = o.x(t);
     return s.join("");
   });
 }
@@ -13125,14 +13074,10 @@ var identity$1 = {
 };
 function decompose(a, b, c, d, e, f) {
   var scaleX, scaleY, skewX;
-  if (scaleX = Math.sqrt(a * a + b * b))
-    a /= scaleX, b /= scaleX;
-  if (skewX = a * c + b * d)
-    c -= a * skewX, d -= b * skewX;
-  if (scaleY = Math.sqrt(c * c + d * d))
-    c /= scaleY, d /= scaleY, skewX /= scaleY;
-  if (a * d < b * c)
-    a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
+  if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;
+  if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;
+  if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;
+  if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
   return {
     translateX: e,
     translateY: f,
@@ -13148,13 +13093,10 @@ function parseCss(value) {
   return m.isIdentity ? identity$1 : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
 }
 function parseSvg(value) {
-  if (value == null)
-    return identity$1;
-  if (!svgNode)
-    svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  if (value == null) return identity$1;
+  if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
   svgNode.setAttribute("transform", value);
-  if (!(value = svgNode.transform.baseVal.consolidate()))
-    return identity$1;
+  if (!(value = svgNode.transform.baseVal.consolidate())) return identity$1;
   value = value.matrix;
   return decompose(value.a, value.b, value.c, value.d, value.e, value.f);
 }
@@ -13172,10 +13114,8 @@ function interpolateTransform(parse, pxComma, pxParen, degParen) {
   }
   function rotate(a, b, s, q) {
     if (a !== b) {
-      if (a - b > 180)
-        b += 360;
-      else if (b - a > 180)
-        a += 360;
+      if (a - b > 180) b += 360;
+      else if (b - a > 180) a += 360;
       q.push({ i: s.push(pop(s) + "rotate(", null, degParen) - 2, x: interpolateNumber(a, b) });
     } else if (b) {
       s.push(pop(s) + "rotate(" + b + degParen);
@@ -13206,8 +13146,7 @@ function interpolateTransform(parse, pxComma, pxParen, degParen) {
     a = b = null;
     return function(t) {
       var i = -1, n = q.length, o;
-      while (++i < n)
-        s[(o = q[i]).i] = o.x(t);
+      while (++i < n) s[(o = q[i]).i] = o.x(t);
       return s.join("");
     };
   };
@@ -13272,14 +13211,11 @@ function Timer() {
 Timer.prototype = timer.prototype = {
   constructor: Timer,
   restart: function(callback, delay, time) {
-    if (typeof callback !== "function")
-      throw new TypeError("callback is not a function");
+    if (typeof callback !== "function") throw new TypeError("callback is not a function");
     time = (time == null ? now() : +time) + (delay == null ? 0 : +delay);
     if (!this._next && taskTail !== this) {
-      if (taskTail)
-        taskTail._next = this;
-      else
-        taskHead = this;
+      if (taskTail) taskTail._next = this;
+      else taskHead = this;
       taskTail = this;
     }
     this._call = callback;
@@ -13304,8 +13240,7 @@ function timerFlush() {
   ++frame;
   var t = taskHead, e;
   while (t) {
-    if ((e = clockNow - t._time) >= 0)
-      t._call.call(void 0, e);
+    if ((e = clockNow - t._time) >= 0) t._call.call(void 0, e);
     t = t._next;
   }
   --frame;
@@ -13323,15 +13258,13 @@ function wake() {
 }
 function poke() {
   var now2 = clock.now(), delay = now2 - clockLast;
-  if (delay > pokeDelay)
-    clockSkew -= delay, clockLast = now2;
+  if (delay > pokeDelay) clockSkew -= delay, clockLast = now2;
 }
 function nap() {
   var t0, t1 = taskHead, t2, time = Infinity;
   while (t1) {
     if (t1._call) {
-      if (time > t1._time)
-        time = t1._time;
+      if (time > t1._time) time = t1._time;
       t0 = t1, t1 = t1._next;
     } else {
       t2 = t1._next, t1._next = null;
@@ -13342,19 +13275,14 @@ function nap() {
   sleep(time);
 }
 function sleep(time) {
-  if (frame)
-    return;
-  if (timeout$1)
-    timeout$1 = clearTimeout(timeout$1);
+  if (frame) return;
+  if (timeout$1) timeout$1 = clearTimeout(timeout$1);
   var delay = time - clockNow;
   if (delay > 24) {
-    if (time < Infinity)
-      timeout$1 = setTimeout(wake, time - clock.now() - clockSkew);
-    if (interval)
-      interval = clearInterval(interval);
+    if (time < Infinity) timeout$1 = setTimeout(wake, time - clock.now() - clockSkew);
+    if (interval) interval = clearInterval(interval);
   } else {
-    if (!interval)
-      clockLast = clock.now(), interval = setInterval(poke, pokeDelay);
+    if (!interval) clockLast = clock.now(), interval = setInterval(poke, pokeDelay);
     frame = 1, setFrame(wake);
   }
 }
@@ -13378,10 +13306,8 @@ var ENDING = 5;
 var ENDED = 6;
 function schedule(node2, name, id2, index, group, timing) {
   var schedules = node2.__transition;
-  if (!schedules)
-    node2.__transition = {};
-  else if (id2 in schedules)
-    return;
+  if (!schedules) node2.__transition = {};
+  else if (id2 in schedules) return;
   create(node2, id2, {
     name,
     index,
@@ -13400,20 +13326,17 @@ function schedule(node2, name, id2, index, group, timing) {
 }
 function init(node2, id2) {
   var schedule2 = get$2(node2, id2);
-  if (schedule2.state > CREATED)
-    throw new Error("too late; already scheduled");
+  if (schedule2.state > CREATED) throw new Error("too late; already scheduled");
   return schedule2;
 }
 function set$2(node2, id2) {
   var schedule2 = get$2(node2, id2);
-  if (schedule2.state > STARTED)
-    throw new Error("too late; already running");
+  if (schedule2.state > STARTED) throw new Error("too late; already running");
   return schedule2;
 }
 function get$2(node2, id2) {
   var schedule2 = node2.__transition;
-  if (!schedule2 || !(schedule2 = schedule2[id2]))
-    throw new Error("transition not found");
+  if (!schedule2 || !(schedule2 = schedule2[id2])) throw new Error("transition not found");
   return schedule2;
 }
 function create(node2, id2, self) {
@@ -13423,19 +13346,15 @@ function create(node2, id2, self) {
   function schedule2(elapsed) {
     self.state = SCHEDULED;
     self.timer.restart(start2, self.delay, self.time);
-    if (self.delay <= elapsed)
-      start2(elapsed - self.delay);
+    if (self.delay <= elapsed) start2(elapsed - self.delay);
   }
   function start2(elapsed) {
     var i, j, n, o;
-    if (self.state !== SCHEDULED)
-      return stop();
+    if (self.state !== SCHEDULED) return stop();
     for (i in schedules) {
       o = schedules[i];
-      if (o.name !== self.name)
-        continue;
-      if (o.state === STARTED)
-        return timeout(start2);
+      if (o.name !== self.name) continue;
+      if (o.state === STARTED) return timeout(start2);
       if (o.state === RUNNING) {
         o.state = ENDED;
         o.timer.stop();
@@ -13457,8 +13376,7 @@ function create(node2, id2, self) {
     });
     self.state = STARTING;
     self.on.call("start", node2, node2.__data__, self.index, self.group);
-    if (self.state !== STARTING)
-      return;
+    if (self.state !== STARTING) return;
     self.state = STARTED;
     tween = new Array(n = self.tween.length);
     for (i = 0, j = -1; i < n; ++i) {
@@ -13482,15 +13400,13 @@ function create(node2, id2, self) {
     self.state = ENDED;
     self.timer.stop();
     delete schedules[id2];
-    for (var i in schedules)
-      return;
+    for (var i in schedules) return;
     delete node2.__transition;
   }
 }
 function interrupt(node2, name) {
   var schedules = node2.__transition, schedule2, active, empty2 = true, i;
-  if (!schedules)
-    return;
+  if (!schedules) return;
   name = name == null ? null : name + "";
   for (i in schedules) {
     if ((schedule2 = schedules[i]).name !== name) {
@@ -13503,8 +13419,7 @@ function interrupt(node2, name) {
     schedule2.on.call(active ? "interrupt" : "cancel", node2, node2.__data__, schedule2.index, schedule2.group);
     delete schedules[i];
   }
-  if (empty2)
-    delete node2.__transition;
+  if (empty2) delete node2.__transition;
 }
 function selection_interrupt(name) {
   return this.each(function() {
@@ -13530,8 +13445,7 @@ function tweenRemove(id2, name) {
 }
 function tweenFunction(id2, name, value) {
   var tween0, tween1;
-  if (typeof value !== "function")
-    throw new Error();
+  if (typeof value !== "function") throw new Error();
   return function() {
     var schedule2 = set$2(this, id2), tween = schedule2.tween;
     if (tween !== tween0) {
@@ -13542,8 +13456,7 @@ function tweenFunction(id2, name, value) {
           break;
         }
       }
-      if (i === n)
-        tween1.push(t);
+      if (i === n) tween1.push(t);
     }
     schedule2.tween = tween1;
   };
@@ -13604,8 +13517,7 @@ function attrFunction$2(name, interpolate2, value) {
   var string00, string10, interpolate0;
   return function() {
     var string0, value1 = value(this), string1;
-    if (value1 == null)
-      return void this.removeAttribute(name);
+    if (value1 == null) return void this.removeAttribute(name);
     string0 = this.getAttribute(name);
     string1 = value1 + "";
     return string0 === string1 ? null : string0 === string00 && string1 === string10 ? interpolate0 : (string10 = string1, interpolate0 = interpolate2(string00 = string0, value1));
@@ -13615,8 +13527,7 @@ function attrFunctionNS$2(fullname, interpolate2, value) {
   var string00, string10, interpolate0;
   return function() {
     var string0, value1 = value(this), string1;
-    if (value1 == null)
-      return void this.removeAttributeNS(fullname.space, fullname.local);
+    if (value1 == null) return void this.removeAttributeNS(fullname.space, fullname.local);
     string0 = this.getAttributeNS(fullname.space, fullname.local);
     string1 = value1 + "";
     return string0 === string1 ? null : string0 === string00 && string1 === string10 ? interpolate0 : (string10 = string1, interpolate0 = interpolate2(string00 = string0, value1));
@@ -13640,8 +13551,7 @@ function attrTweenNS(fullname, value) {
   var t0, i0;
   function tween() {
     var i = value.apply(this, arguments);
-    if (i !== i0)
-      t0 = (i0 = i) && attrInterpolateNS(fullname, i);
+    if (i !== i0) t0 = (i0 = i) && attrInterpolateNS(fullname, i);
     return t0;
   }
   tween._value = value;
@@ -13651,8 +13561,7 @@ function attrTween(name, value) {
   var t0, i0;
   function tween() {
     var i = value.apply(this, arguments);
-    if (i !== i0)
-      t0 = (i0 = i) && attrInterpolate(name, i);
+    if (i !== i0) t0 = (i0 = i) && attrInterpolate(name, i);
     return t0;
   }
   tween._value = value;
@@ -13660,12 +13569,9 @@ function attrTween(name, value) {
 }
 function transition_attrTween(name, value) {
   var key = "attr." + name;
-  if (arguments.length < 2)
-    return (key = this.tween(key)) && key._value;
-  if (value == null)
-    return this.tween(key, null);
-  if (typeof value !== "function")
-    throw new Error();
+  if (arguments.length < 2) return (key = this.tween(key)) && key._value;
+  if (value == null) return this.tween(key, null);
+  if (typeof value !== "function") throw new Error();
   var fullname = namespace$1(name);
   return this.tween(key, (fullname.local ? attrTweenNS : attrTween)(fullname, value));
 }
@@ -13698,8 +13604,7 @@ function transition_duration(value) {
   return arguments.length ? this.each((typeof value === "function" ? durationFunction : durationConstant)(id2, value)) : get$2(this.node(), id2).duration;
 }
 function easeConstant(id2, value) {
-  if (typeof value !== "function")
-    throw new Error();
+  if (typeof value !== "function") throw new Error();
   return function() {
     set$2(this, id2).ease = value;
   };
@@ -13711,19 +13616,16 @@ function transition_ease(value) {
 function easeVarying(id2, value) {
   return function() {
     var v = value.apply(this, arguments);
-    if (typeof v !== "function")
-      throw new Error();
+    if (typeof v !== "function") throw new Error();
     set$2(this, id2).ease = v;
   };
 }
 function transition_easeVarying(value) {
-  if (typeof value !== "function")
-    throw new Error();
+  if (typeof value !== "function") throw new Error();
   return this.each(easeVarying(this._id, value));
 }
 function transition_filter(match) {
-  if (typeof match !== "function")
-    match = matcher$1(match);
+  if (typeof match !== "function") match = matcher$1(match);
   for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node2, i = 0; i < n; ++i) {
       if ((node2 = group[i]) && match.call(node2, node2.__data__, i, group)) {
@@ -13734,8 +13636,7 @@ function transition_filter(match) {
   return new Transition(subgroups, this._parents, this._name, this._id);
 }
 function transition_merge(transition2) {
-  if (transition2._id !== this._id)
-    throw new Error();
+  if (transition2._id !== this._id) throw new Error();
   for (var groups0 = this._groups, groups1 = transition2._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
     for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node2, i = 0; i < n; ++i) {
       if (node2 = group0[i] || group1[i]) {
@@ -13751,8 +13652,7 @@ function transition_merge(transition2) {
 function start(name) {
   return (name + "").trim().split(/^|\s+/).every(function(t) {
     var i = t.indexOf(".");
-    if (i >= 0)
-      t = t.slice(0, i);
+    if (i >= 0) t = t.slice(0, i);
     return !t || t === "start";
   });
 }
@@ -13760,8 +13660,7 @@ function onFunction(id2, name, listener) {
   var on0, on1, sit = start(name) ? init : set$2;
   return function() {
     var schedule2 = sit(this, id2), on = schedule2.on;
-    if (on !== on0)
-      (on1 = (on0 = on).copy()).on(name, listener);
+    if (on !== on0) (on1 = (on0 = on).copy()).on(name, listener);
     schedule2.on = on1;
   };
 }
@@ -13772,11 +13671,8 @@ function transition_on(name, listener) {
 function removeFunction(id2) {
   return function() {
     var parent = this.parentNode;
-    for (var i in this.__transition)
-      if (+i !== id2)
-        return;
-    if (parent)
-      parent.removeChild(this);
+    for (var i in this.__transition) if (+i !== id2) return;
+    if (parent) parent.removeChild(this);
   };
 }
 function transition_remove() {
@@ -13784,13 +13680,11 @@ function transition_remove() {
 }
 function transition_select(select2) {
   var name = this._name, id2 = this._id;
-  if (typeof select2 !== "function")
-    select2 = selector$1(select2);
+  if (typeof select2 !== "function") select2 = selector$1(select2);
   for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node2, subnode, i = 0; i < n; ++i) {
       if ((node2 = group[i]) && (subnode = select2.call(node2, node2.__data__, i, group))) {
-        if ("__data__" in node2)
-          subnode.__data__ = node2.__data__;
+        if ("__data__" in node2) subnode.__data__ = node2.__data__;
         subgroup[i] = subnode;
         schedule(subgroup[i], name, id2, i, subgroup, get$2(node2, id2));
       }
@@ -13800,8 +13694,7 @@ function transition_select(select2) {
 }
 function transition_selectAll(select2) {
   var name = this._name, id2 = this._id;
-  if (typeof select2 !== "function")
-    select2 = selectorAll$1(select2);
+  if (typeof select2 !== "function") select2 = selectorAll$1(select2);
   for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, node2, i = 0; i < n; ++i) {
       if (node2 = group[i]) {
@@ -13844,8 +13737,7 @@ function styleFunction$2(name, interpolate2, value) {
   var string00, string10, interpolate0;
   return function() {
     var string0 = styleValue$1(this, name), value1 = value(this), string1 = value1 + "";
-    if (value1 == null)
-      string1 = value1 = (this.style.removeProperty(name), styleValue$1(this, name));
+    if (value1 == null) string1 = value1 = (this.style.removeProperty(name), styleValue$1(this, name));
     return string0 === string1 ? null : string0 === string00 && string1 === string10 ? interpolate0 : (string10 = string1, interpolate0 = interpolate2(string00 = string0, value1));
   };
 }
@@ -13853,8 +13745,7 @@ function styleMaybeRemove(id2, name) {
   var on0, on1, listener0, key = "style." + name, event = "end." + key, remove2;
   return function() {
     var schedule2 = set$2(this, id2), on = schedule2.on, listener = schedule2.value[key] == null ? remove2 || (remove2 = styleRemove$2(name)) : void 0;
-    if (on !== on0 || listener0 !== listener)
-      (on1 = (on0 = on).copy()).on(event, listener0 = listener);
+    if (on !== on0 || listener0 !== listener) (on1 = (on0 = on).copy()).on(event, listener0 = listener);
     schedule2.on = on1;
   };
 }
@@ -13871,8 +13762,7 @@ function styleTween(name, value, priority) {
   var t, i0;
   function tween() {
     var i = value.apply(this, arguments);
-    if (i !== i0)
-      t = (i0 = i) && styleInterpolate(name, i, priority);
+    if (i !== i0) t = (i0 = i) && styleInterpolate(name, i, priority);
     return t;
   }
   tween._value = value;
@@ -13880,12 +13770,9 @@ function styleTween(name, value, priority) {
 }
 function transition_styleTween(name, value, priority) {
   var key = "style." + (name += "");
-  if (arguments.length < 2)
-    return (key = this.tween(key)) && key._value;
-  if (value == null)
-    return this.tween(key, null);
-  if (typeof value !== "function")
-    throw new Error();
+  if (arguments.length < 2) return (key = this.tween(key)) && key._value;
+  if (value == null) return this.tween(key, null);
+  if (typeof value !== "function") throw new Error();
   return this.tween(key, styleTween(name, value, priority == null ? "" : priority));
 }
 function textConstant$2(value) {
@@ -13911,8 +13798,7 @@ function textTween(value) {
   var t0, i0;
   function tween() {
     var i = value.apply(this, arguments);
-    if (i !== i0)
-      t0 = (i0 = i) && textInterpolate(i);
+    if (i !== i0) t0 = (i0 = i) && textInterpolate(i);
     return t0;
   }
   tween._value = value;
@@ -13920,12 +13806,9 @@ function textTween(value) {
 }
 function transition_textTween(value) {
   var key = "text";
-  if (arguments.length < 1)
-    return (key = this.tween(key)) && key._value;
-  if (value == null)
-    return this.tween(key, null);
-  if (typeof value !== "function")
-    throw new Error();
+  if (arguments.length < 1) return (key = this.tween(key)) && key._value;
+  if (value == null) return this.tween(key, null);
+  if (typeof value !== "function") throw new Error();
   return this.tween(key, textTween(value));
 }
 function transition_transition() {
@@ -13949,8 +13832,7 @@ function transition_end() {
   var on0, on1, that = this, id2 = that._id, size = that.size();
   return new Promise(function(resolve, reject) {
     var cancel = { value: reject }, end = { value: function() {
-      if (--size === 0)
-        resolve();
+      if (--size === 0) resolve();
     } };
     that.each(function() {
       var schedule2 = set$2(this, id2), on = schedule2.on;
@@ -13962,8 +13844,7 @@ function transition_end() {
       }
       schedule2.on = on1;
     });
-    if (size === 0)
-      resolve();
+    if (size === 0) resolve();
   });
 }
 var id = 0;
@@ -14206,8 +14087,7 @@ function zoom() {
     }).tween("zoom", function() {
       var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a = that.__zoom, b = typeof transform === "function" ? transform.apply(that, args) : transform, i = interpolate2(a.invert(p).concat(w / a.k), b.invert(p).concat(w / b.k));
       return function(t) {
-        if (t === 1)
-          t = b;
+        if (t === 1) t = b;
         else {
           var l = i(t), k = w / l[2];
           t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k);
@@ -14229,8 +14109,7 @@ function zoom() {
   }
   Gesture.prototype = {
     event: function(event) {
-      if (event)
-        this.sourceEvent = event;
+      if (event) this.sourceEvent = event;
       return this;
     },
     start: function() {
@@ -14241,12 +14120,9 @@ function zoom() {
       return this;
     },
     zoom: function(key, transform) {
-      if (this.mouse && key !== "mouse")
-        this.mouse[1] = transform.invert(this.mouse[0]);
-      if (this.touch0 && key !== "touch")
-        this.touch0[1] = transform.invert(this.touch0[0]);
-      if (this.touch1 && key !== "touch")
-        this.touch1[1] = transform.invert(this.touch1[0]);
+      if (this.mouse && key !== "mouse") this.mouse[1] = transform.invert(this.mouse[0]);
+      if (this.touch0 && key !== "touch") this.touch0[1] = transform.invert(this.touch0[0]);
+      if (this.touch1 && key !== "touch") this.touch1[1] = transform.invert(this.touch1[0]);
       this.that.__zoom = transform;
       this.emit("zoom");
       return this;
@@ -14275,16 +14151,14 @@ function zoom() {
     }
   };
   function wheeled(event, ...args) {
-    if (!filter2.apply(this, arguments))
-      return;
+    if (!filter2.apply(this, arguments)) return;
     var g = gesture(this, args).event(event), t = this.__zoom, k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))), p = pointer$1(event);
     if (g.wheel) {
       if (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) {
         g.mouse[1] = t.invert(g.mouse[0] = p);
       }
       clearTimeout(g.wheel);
-    } else if (t.k === k)
-      return;
+    } else if (t.k === k) return;
     else {
       g.mouse = [p, t.invert(p)];
       interrupt(this);
@@ -14299,8 +14173,7 @@ function zoom() {
     }
   }
   function mousedowned(event, ...args) {
-    if (touchending || !filter2.apply(this, arguments))
-      return;
+    if (touchending || !filter2.apply(this, arguments)) return;
     var currentTarget = event.currentTarget, g = gesture(this, args, true).event(event), v = select$1(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true), p = pointer$1(event, currentTarget), x0 = event.clientX, y0 = event.clientY;
     dragDisable(event.view);
     nopropagation$1(event);
@@ -14323,50 +14196,39 @@ function zoom() {
     }
   }
   function dblclicked(event, ...args) {
-    if (!filter2.apply(this, arguments))
-      return;
+    if (!filter2.apply(this, arguments)) return;
     var t0 = this.__zoom, p0 = pointer$1(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
     noevent$2(event);
-    if (duration > 0)
-      select$1(this).transition().duration(duration).call(schedule2, t1, p0, event);
-    else
-      select$1(this).call(zoom2.transform, t1, p0, event);
+    if (duration > 0) select$1(this).transition().duration(duration).call(schedule2, t1, p0, event);
+    else select$1(this).call(zoom2.transform, t1, p0, event);
   }
   function touchstarted(event, ...args) {
-    if (!filter2.apply(this, arguments))
-      return;
+    if (!filter2.apply(this, arguments)) return;
     var touches = event.touches, n = touches.length, g = gesture(this, args, event.changedTouches.length === n).event(event), started, i, t, p;
     nopropagation$1(event);
     for (i = 0; i < n; ++i) {
       t = touches[i], p = pointer$1(t, this);
       p = [p, this.__zoom.invert(p), t.identifier];
-      if (!g.touch0)
-        g.touch0 = p, started = true, g.taps = 1 + !!touchstarting;
-      else if (!g.touch1 && g.touch0[2] !== p[2])
-        g.touch1 = p, g.taps = 0;
+      if (!g.touch0) g.touch0 = p, started = true, g.taps = 1 + !!touchstarting;
+      else if (!g.touch1 && g.touch0[2] !== p[2]) g.touch1 = p, g.taps = 0;
     }
-    if (touchstarting)
-      touchstarting = clearTimeout(touchstarting);
+    if (touchstarting) touchstarting = clearTimeout(touchstarting);
     if (started) {
-      if (g.taps < 2)
-        touchfirst = p[0], touchstarting = setTimeout(function() {
-          touchstarting = null;
-        }, touchDelay);
+      if (g.taps < 2) touchfirst = p[0], touchstarting = setTimeout(function() {
+        touchstarting = null;
+      }, touchDelay);
       interrupt(this);
       g.start();
     }
   }
   function touchmoved(event, ...args) {
-    if (!this.__zooming)
-      return;
+    if (!this.__zooming) return;
     var g = gesture(this, args).event(event), touches = event.changedTouches, n = touches.length, i, t, p, l;
     noevent$2(event);
     for (i = 0; i < n; ++i) {
       t = touches[i], p = pointer$1(t, this);
-      if (g.touch0 && g.touch0[2] === t.identifier)
-        g.touch0[0] = p;
-      else if (g.touch1 && g.touch1[2] === t.identifier)
-        g.touch1[0] = p;
+      if (g.touch0 && g.touch0[2] === t.identifier) g.touch0[0] = p;
+      else if (g.touch1 && g.touch1[2] === t.identifier) g.touch1[0] = p;
     }
     t = g.that.__zoom;
     if (g.touch1) {
@@ -14374,41 +14236,32 @@ function zoom() {
       t = scale(t, Math.sqrt(dp / dl));
       p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2];
       l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];
-    } else if (g.touch0)
-      p = g.touch0[0], l = g.touch0[1];
-    else
-      return;
+    } else if (g.touch0) p = g.touch0[0], l = g.touch0[1];
+    else return;
     g.zoom("touch", constrain(translate(t, p, l), g.extent, translateExtent));
   }
   function touchended(event, ...args) {
-    if (!this.__zooming)
-      return;
+    if (!this.__zooming) return;
     var g = gesture(this, args).event(event), touches = event.changedTouches, n = touches.length, i, t;
     nopropagation$1(event);
-    if (touchending)
-      clearTimeout(touchending);
+    if (touchending) clearTimeout(touchending);
     touchending = setTimeout(function() {
       touchending = null;
     }, touchDelay);
     for (i = 0; i < n; ++i) {
       t = touches[i];
-      if (g.touch0 && g.touch0[2] === t.identifier)
-        delete g.touch0;
-      else if (g.touch1 && g.touch1[2] === t.identifier)
-        delete g.touch1;
+      if (g.touch0 && g.touch0[2] === t.identifier) delete g.touch0;
+      else if (g.touch1 && g.touch1[2] === t.identifier) delete g.touch1;
     }
-    if (g.touch1 && !g.touch0)
-      g.touch0 = g.touch1, delete g.touch1;
-    if (g.touch0)
-      g.touch0[1] = this.__zoom.invert(g.touch0[0]);
+    if (g.touch1 && !g.touch0) g.touch0 = g.touch1, delete g.touch1;
+    if (g.touch0) g.touch0[1] = this.__zoom.invert(g.touch0[0]);
     else {
       g.end();
       if (g.taps === 2) {
         t = pointer$1(t, this);
         if (Math.hypot(touchfirst[0] - t[0], touchfirst[1] - t[1]) < tapDistance) {
           var p = select$1(this).on("dblclick.zoom");
-          if (p)
-            p.apply(this, arguments);
+          if (p) p.apply(this, arguments);
         }
       }
     }
@@ -14456,7 +14309,8 @@ const Slots = Symbol("MiniMapSlots");
 const _hoisted_1$1$1 = ["id", "x", "y", "rx", "ry", "width", "height", "fill", "stroke", "stroke-width", "shape-rendering"];
 const __default__$1$1 = {
   name: "MiniMapNode",
-  compatConfig: { MODE: 3 }
+  compatConfig: { MODE: 3 },
+  inheritAttrs: false
 };
 const _sfc_main$1$2 = /* @__PURE__ */ defineComponent({
   ...__default__$1$1,
@@ -14471,14 +14325,15 @@ const _sfc_main$1$2 = /* @__PURE__ */ defineComponent({
     color: {},
     shapeRendering: {},
     strokeColor: {},
-    strokeWidth: {}
+    strokeWidth: {},
+    hidden: { type: Boolean }
   },
   emits: ["click", "dblclick", "mouseenter", "mousemove", "mouseleave"],
   setup(__props, { emit: emits }) {
     const props = __props;
     const miniMapSlots = inject(Slots);
     const attrs = useAttrs();
-    const style2 = toRef(() => attrs.style ?? {});
+    const style = toRef(() => attrs.style ?? {});
     function onClick(event) {
       emits("click", event);
     }
@@ -14495,26 +14350,29 @@ const _sfc_main$1$2 = /* @__PURE__ */ defineComponent({
       emits("mouseleave", event);
     }
     return (_ctx, _cache) => {
-      return unref(miniMapSlots)[`node-${props.type}`] ? (openBlock(), createBlock(resolveDynamicComponent(unref(miniMapSlots)[`node-${props.type}`]), normalizeProps(mergeProps({ key: 0 }, props)), null, 16)) : (openBlock(), createElementBlock("rect", {
-        key: 1,
-        id: _ctx.id,
-        class: normalizeClass(["vue-flow__minimap-node", { selected: _ctx.selected, dragging: _ctx.dragging }]),
-        x: _ctx.position.x,
-        y: _ctx.position.y,
-        rx: _ctx.borderRadius,
-        ry: _ctx.borderRadius,
-        width: _ctx.dimensions.width,
-        height: _ctx.dimensions.height,
-        fill: _ctx.color || style2.value.background || style2.value.backgroundColor,
-        stroke: _ctx.strokeColor,
-        "stroke-width": _ctx.strokeWidth,
-        "shape-rendering": _ctx.shapeRendering,
-        onClick,
-        onDblclick,
-        onMouseenter: onMouseEnter,
-        onMousemove: onMouseMove,
-        onMouseleave: onMouseLeave
-      }, null, 42, _hoisted_1$1$1));
+      return !_ctx.hidden && _ctx.dimensions.width !== 0 && _ctx.dimensions.height !== 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        unref(miniMapSlots)[`node-${props.type}`] ? (openBlock(), createBlock(resolveDynamicComponent(unref(miniMapSlots)[`node-${props.type}`]), normalizeProps(mergeProps({ key: 0 }, { ...props, ..._ctx.$attrs })), null, 16)) : (openBlock(), createElementBlock("rect", mergeProps({
+          key: 1,
+          id: _ctx.id
+        }, _ctx.$attrs, {
+          class: ["vue-flow__minimap-node", { selected: _ctx.selected, dragging: _ctx.dragging }],
+          x: _ctx.position.x,
+          y: _ctx.position.y,
+          rx: _ctx.borderRadius,
+          ry: _ctx.borderRadius,
+          width: _ctx.dimensions.width,
+          height: _ctx.dimensions.height,
+          fill: _ctx.color || style.value.background || style.value.backgroundColor,
+          stroke: _ctx.strokeColor,
+          "stroke-width": _ctx.strokeWidth,
+          "shape-rendering": _ctx.shapeRendering,
+          onClick,
+          onDblclick,
+          onMouseenter: onMouseEnter,
+          onMousemove: onMouseMove,
+          onMouseleave: onMouseLeave
+        }), null, 16, _hoisted_1$1$1))
+      ], 64)) : createCommentVNode("", true);
     };
   }
 });
@@ -14723,12 +14581,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 "stroke-width": _ctx.nodeStrokeWidth,
                 "shape-rendering": unref(shapeRendering),
                 type: node2.type,
+                hidden: node2.hidden,
                 onClick: ($event) => onNodeClick($event, node2),
                 onDblclick: ($event) => onNodeDblClick($event, node2),
                 onMouseenter: ($event) => onNodeMouseEnter($event, node2),
                 onMousemove: ($event) => onNodeMouseMove($event, node2),
                 onMouseleave: ($event) => onNodeMouseLeave($event, node2)
-              }, null, 8, ["id", "position", "dimensions", "selected", "dragging", "style", "class", "color", "border-radius", "stroke-color", "stroke-width", "shape-rendering", "type", "onClick", "onDblclick", "onMouseenter", "onMousemove", "onMouseleave"]);
+              }, null, 8, ["id", "position", "dimensions", "selected", "dragging", "style", "class", "color", "border-radius", "stroke-color", "stroke-width", "shape-rendering", "type", "hidden", "onClick", "onDblclick", "onMouseenter", "onMousemove", "onMouseleave"]);
             }), 128)),
             createBaseVNode("path", {
               class: "vue-flow__minimap-mask",
@@ -18066,6 +17925,7 @@ const cssModules$2 = {
 const CanvasEdgeToolbar = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__cssModules", cssModules$2]]);
 const _hoisted_1$3 = ["data-source-node-name", "data-target-node-name"];
 const _hoisted_2$2 = ["data-source-node-name", "data-target-node-name", "data-edge-status"];
+const delayedHoveredTimeout = 300;
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "CanvasEdge",
   props: {
@@ -18112,7 +17972,23 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const connectionType = computed(
       () => isValidNodeConnectionType(props.data.source.type) ? props.data.source.type : NodeConnectionType.Main
     );
-    const renderToolbar = computed(() => props.hovered && !props.readOnly);
+    const delayedHovered = ref(props.hovered);
+    const delayedHoveredSetTimeoutRef = ref(null);
+    watch(
+      () => props.hovered,
+      (isHovered) => {
+        if (isHovered) {
+          if (delayedHoveredSetTimeoutRef.value) clearTimeout(delayedHoveredSetTimeoutRef.value);
+          delayedHovered.value = true;
+        } else {
+          delayedHoveredSetTimeoutRef.value = setTimeout(() => {
+            delayedHovered.value = false;
+          }, delayedHoveredTimeout);
+        }
+      },
+      { immediate: true }
+    );
+    const renderToolbar = computed(() => (props.selected || delayedHovered.value) && !props.readOnly);
     const isMainConnection = computed(() => data.value.source.type === NodeConnectionType.Main);
     const status2 = computed(() => props.data.status);
     const edgeColor = computed(() => {