@aranzatech/diagrams-bpmn 0.2.13 → 0.2.15

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var react = require('@xyflow/react');
 var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('react');
 var routing = require('@aranzatech/diagrams-core/routing');
 var diagramsCore = require('@aranzatech/diagrams-core');
 var serialization = require('@aranzatech/diagrams-core/serialization');
@@ -761,6 +762,7 @@ var BPMN_THEME = {
   fillSoft: "#f8fbff",
   fillSubtle: "#eef6ff",
   stroke: "#334155",
+  strokeMuted: "#64748b",
   strokeSelected: "#2563eb",
   strokeWidth: 1.5,
   strokeWidthSelected: 2.5,
@@ -1400,71 +1402,33 @@ function SubProcessNode({ data, selected }) {
     }
   );
 }
-var HEADER_WIDTH = 30;
-var HEADER_HEIGHT = 28;
-function PoolNode({ data, selected }) {
-  const d = data;
-  const stroke = resolveStroke(selected, d.color?.stroke);
-  const sw = resolveStrokeWidth(selected);
-  const orientation = d.orientation ?? "horizontal";
-  const fill = d.color?.fill ?? "#f8fbff";
-  const headerFill = d.color?.fill ?? "#eaf2ff";
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          border: `${sw}px solid ${stroke}`,
-          borderRadius: 4,
-          boxSizing: "border-box",
-          background: fill,
-          boxShadow: resolveNodeShadow(selected),
-          overflow: "hidden",
-          fontFamily: BPMN_THEME.fontFamily,
-          transition: BPMN_THEME.transition
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "aria-label": "pool-header",
-              className: "pool-drag-handle",
-              style: {
-                height: HEADER_HEIGHT,
-                minHeight: HEADER_HEIGHT,
-                borderBottom: `${sw}px solid ${stroke}`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                background: headerFill,
-                padding: "0 8px",
-                cursor: "grab"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: BPMN_THEME.fontSize,
-                    fontWeight: 600,
-                    color: BPMN_THEME.labelColor,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  },
-                  children: d.label
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, position: "relative" } })
-        ]
+function PoolNode({ selected }) {
+  const sw = selected ? 2.5 : 2;
+  const borderColor = selected ? "var(--color-accent)" : "color-mix(in srgb, var(--color-accent) 40%, transparent)";
+  const bg = "color-mix(in srgb, var(--color-accent) 3%, white)";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        border: `${sw}px solid ${borderColor}`,
+        borderRadius: 6,
+        boxSizing: "border-box",
+        background: bg,
+        fontFamily: BPMN_THEME.fontFamily,
+        transition: "border-color 140ms ease",
+        overflow: "visible"
       }
-    );
-  }
+    }
+  );
+}
+var LABEL_W = 28;
+function LaneNode({ data, selected }) {
+  const d = data;
+  const stroke = selected ? BPMN_THEME.strokeSelected : d.color?.stroke ?? BPMN_THEME.strokeMuted;
+  const bodyFill = "#fbfdff";
+  const labelFill = d.color?.fill ?? "#eef6ff";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1472,11 +1436,11 @@ function PoolNode({ data, selected }) {
         width: "100%",
         height: "100%",
         display: "flex",
-        border: `${sw}px solid ${stroke}`,
-        borderRadius: 4,
+        flexDirection: "row",
+        border: `1px solid ${stroke}`,
+        borderRadius: 3,
         boxSizing: "border-box",
-        background: fill,
-        boxShadow: resolveNodeShadow(selected),
+        background: bodyFill,
         overflow: "hidden",
         fontFamily: BPMN_THEME.fontFamily,
         transition: BPMN_THEME.transition
@@ -1485,17 +1449,19 @@ function PoolNode({ data, selected }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            "aria-label": "pool-header",
-            className: "pool-drag-handle",
+            "aria-label": "lane-header",
+            className: "lane-drag-handle",
             style: {
-              width: HEADER_WIDTH,
-              minWidth: HEADER_WIDTH,
-              borderRight: `${sw}px solid ${stroke}`,
+              width: LABEL_W,
+              minWidth: LABEL_W,
+              borderRight: `1px solid ${stroke}`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              background: headerFill,
-              cursor: "grab"
+              background: labelFill,
+              cursor: "grab",
+              userSelect: "none",
+              flexShrink: 0
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "span",
@@ -1504,7 +1470,7 @@ function PoolNode({ data, selected }) {
                   writingMode: "vertical-rl",
                   transform: "rotate(180deg)",
                   fontSize: BPMN_THEME.fontSize,
-                  fontWeight: 600,
+                  fontWeight: 500,
                   color: BPMN_THEME.labelColor,
                   whiteSpace: "nowrap",
                   overflow: "hidden",
@@ -1516,118 +1482,7 @@ function PoolNode({ data, selected }) {
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, position: "relative" } })
-      ]
-    }
-  );
-}
-var HEADER_HEIGHT2 = 24;
-var HEADER_WIDTH2 = 28;
-function LaneNode({ data, selected }) {
-  const d = data;
-  const stroke = resolveStroke(selected, d.color?.stroke);
-  const sw = resolveStrokeWidth(selected);
-  const orientation = d.orientation ?? "horizontal";
-  const fill = d.color?.fill ?? "#fbfdff";
-  const headerFill = d.color?.fill ?? "#eef6ff";
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          border: `${sw}px solid ${stroke}`,
-          borderRadius: 2,
-          boxSizing: "border-box",
-          background: fill,
-          boxShadow: resolveNodeShadow(selected),
-          overflow: "hidden",
-          fontFamily: BPMN_THEME.fontFamily,
-          transition: BPMN_THEME.transition
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "aria-label": "lane-header",
-              className: "lane-drag-handle",
-              style: {
-                width: HEADER_WIDTH2,
-                minWidth: HEADER_WIDTH2,
-                borderRight: `1px solid ${stroke}`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                background: headerFill,
-                padding: "6px 0",
-                cursor: "grab"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    writingMode: "vertical-rl",
-                    transform: "rotate(180deg)",
-                    fontSize: BPMN_THEME.fontSize,
-                    fontWeight: 500,
-                    color: BPMN_THEME.labelColor,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    maxHeight: "90%"
-                  },
-                  children: d.label
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, position: "relative" } })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        border: `${sw}px solid ${stroke}`,
-        borderRadius: 2,
-        boxSizing: "border-box",
-        background: fill,
-        boxShadow: resolveNodeShadow(selected),
-        overflow: "hidden",
-        fontFamily: BPMN_THEME.fontFamily,
-        transition: BPMN_THEME.transition
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "aria-label": "lane-header",
-            className: "lane-drag-handle",
-            style: {
-              height: HEADER_HEIGHT2,
-              minHeight: HEADER_HEIGHT2,
-              borderBottom: `1px solid ${stroke}`,
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: 8,
-              background: headerFill,
-              fontSize: BPMN_THEME.fontSize,
-              fontWeight: 500,
-              color: BPMN_THEME.labelColor,
-              cursor: "grab"
-            },
-            children: d.label
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, position: "relative" } })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nodrag", style: { flex: 1, position: "relative" } })
       ]
     }
   );
@@ -2291,6 +2146,33 @@ function SequenceFlowEdge({
   const path = points && points.length >= 2 ? routing.pointsToSvgPath([{ x: sourceX, y: sourceY }, ...points.slice(1, -1), { x: targetX, y: targetY }]) : routing.getOrthogonalPath(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition);
   const midpoint = getPolylineMidpoint(polyline);
   const defaultMarkerPath = d?.isDefault ? getDefaultFlowMarkerPath(polyline) : null;
+  const labelX = midpoint.x + (d?.labelOffsetX ?? 0);
+  const labelY = midpoint.y + (d?.labelOffsetY ?? 0);
+  const { updateEdgeData, getViewport } = react.useReactFlow();
+  const dragStartRef = react$1.useRef(null);
+  const handleLabelPointerDown = react$1.useCallback((e) => {
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragStartRef.current = {
+      mx: e.clientX,
+      my: e.clientY,
+      ox: d?.labelOffsetX ?? 0,
+      oy: d?.labelOffsetY ?? 0
+    };
+  }, [d?.labelOffsetX, d?.labelOffsetY]);
+  const handleLabelPointerMove = react$1.useCallback((e) => {
+    if (!dragStartRef.current) return;
+    const { zoom } = getViewport();
+    const dx = (e.clientX - dragStartRef.current.mx) / zoom;
+    const dy = (e.clientY - dragStartRef.current.my) / zoom;
+    updateEdgeData(id, {
+      labelOffsetX: dragStartRef.current.ox + dx,
+      labelOffsetY: dragStartRef.current.oy + dy
+    });
+  }, [id, updateEdgeData, getViewport]);
+  const handleLabelPointerUp = react$1.useCallback(() => {
+    dragStartRef.current = null;
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       react.BaseEdge,
@@ -2320,15 +2202,20 @@ function SequenceFlowEdge({
     (label ?? d?.label) && /* @__PURE__ */ jsxRuntime.jsx(react.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        onPointerDown: handleLabelPointerDown,
+        onPointerMove: handleLabelPointerMove,
+        onPointerUp: handleLabelPointerUp,
         style: {
           position: "absolute",
-          transform: `translate(-50%,-50%) translate(${midpoint.x}px,${midpoint.y}px)`,
+          transform: `translate(-50%,-50%) translate(${labelX}px,${labelY}px)`,
           fontSize: 11,
           fontFamily: "Inter, system-ui, sans-serif",
           background: "rgba(255,255,255,0.85)",
           padding: "1px 4px",
           borderRadius: 2,
-          pointerEvents: "all"
+          pointerEvents: "all",
+          cursor: "grab",
+          userSelect: "none"
         },
         className: "nodrag nopan",
         children: label ?? d?.label
@@ -4385,7 +4272,9 @@ function createBpmnNode(options) {
     height: options.height ?? size.height,
     zIndex: getBpmnNodeZIndex(options.elementType),
     ...options.parentId ? { parentId: options.parentId } : {},
-    ...options.elementType === "Lane" && options.parentId ? { extent: "parent" } : {},
+    // extent:"parent" is intentionally omitted for Lane — it blocks resize beyond
+    // the Pool boundary before the Pool/Lane coupling can expand the Pool.
+    // Lane containment during drag is handled programmatically in handleNodeDragStop.
     ...dragHandle ? { dragHandle } : {}
   };
 }
@@ -4402,8 +4291,13 @@ function withBpmnNodeZIndexes(nodes) {
   });
 }
 var BPMN_POOL_LANE_LAYOUT = {
-  poolHeaderSize: 30,
-  laneHeaderSize: 24,
+  // Pool inner padding on all sides (no left label strip).
+  // 8px = pool border (2px) + 6px visible gap.
+  poolPad: 8,
+  /** @deprecated use poolPad */
+  poolHeaderSize: 8,
+  // Lane left label strip (vertical text).
+  laneHeaderSize: 28,
   laneGap: 0,
   verticalPoolHeaderSize: 28,
   minLaneSize: 96
@@ -4527,6 +4421,30 @@ function getBpmnPoolLanes(state, poolId) {
     (node) => node.data.elementType === "Lane"
   );
 }
+function getBpmnNodeBounds(state, node) {
+  const position = getBpmnNodeAbsolutePosition(state, node) ?? node.position;
+  const size = getBpmnNodeSize(node);
+  return {
+    ...position,
+    width: size.width,
+    height: size.height
+  };
+}
+function findBpmnLaneAt(state, position) {
+  return state.nodes.find((node) => {
+    if (node.data.elementType !== "Lane") return false;
+    const bounds = getBpmnNodeBounds(state, node);
+    return position.x >= bounds.x && position.x <= bounds.x + bounds.width && position.y >= bounds.y && position.y <= bounds.y + bounds.height;
+  });
+}
+function getAncestorLaneId(state, node) {
+  let current = node;
+  while (current) {
+    if (current.data.elementType === "Lane") return current.id;
+    current = current.parentId ? diagramsCore.getNode(state, current.parentId) : void 0;
+  }
+  return void 0;
+}
 function getNodeDimension(node, axis) {
   return node[axis] ?? node.measured?.[axis] ?? getBpmnElementSize(node.data.elementType)[axis];
 }
@@ -4535,16 +4453,18 @@ function getBpmnLaneOrderPosition(lane, orientation) {
   return orientation === "vertical" ? lane.position.x + size.width / 2 : lane.position.y + size.height / 2;
 }
 function resizeHorizontalBpmnLanes(lanes, pool) {
+  const pad = BPMN_POOL_LANE_LAYOUT.poolPad;
   const poolSize = getBpmnNodeSize(pool);
-  const laneWidth = Math.max(BPMN_POOL_LANE_LAYOUT.minLaneSize, poolSize.width - BPMN_POOL_LANE_LAYOUT.poolHeaderSize);
-  const laneHeight = Math.max(BPMN_POOL_LANE_LAYOUT.minLaneSize, poolSize.height / Math.max(1, lanes.length));
+  const laneWidth = Math.max(BPMN_POOL_LANE_LAYOUT.minLaneSize, poolSize.width - pad * 2);
+  const availH = Math.max(0, poolSize.height - pad * 2);
+  const laneHeight = Math.max(BPMN_POOL_LANE_LAYOUT.minLaneSize, availH / Math.max(1, lanes.length));
   return lanes.map((lane, index) => ({
     ...lane,
-    position: { x: BPMN_POOL_LANE_LAYOUT.poolHeaderSize, y: index * laneHeight },
+    position: { x: pad, y: pad + index * laneHeight },
     width: laneWidth,
     height: laneHeight,
     parentId: pool.id,
-    extent: "parent",
+    // extent:"parent" intentionally omitted — blocks resize→Pool coupling.
     zIndex: getBpmnNodeZIndex("Lane"),
     data: { ...lane.data, orientation: "horizontal", laneIndex: index }
   }));
@@ -4575,10 +4495,22 @@ function layoutBpmnPoolLaneNodes(nodes, poolId) {
     return getBpmnLaneOrderPosition(a, orientation) - getBpmnLaneOrderPosition(b, orientation);
   });
   if (lanes.length === 0) return withBpmnNodeZIndexes(nodes);
-  const laneMap = new Map(
-    (orientation === "vertical" ? resizeVerticalBpmnLanes(lanes, pool) : resizeHorizontalBpmnLanes(lanes, pool)).map((lane) => [lane.id, lane])
+  const resizedLanes = orientation === "vertical" ? resizeVerticalBpmnLanes(lanes, pool) : resizeHorizontalBpmnLanes(lanes, pool);
+  const laneMap = new Map(resizedLanes.map((lane) => [lane.id, lane]));
+  const pad = BPMN_POOL_LANE_LAYOUT.poolPad;
+  const totalLaneH = resizedLanes.reduce((sum, l) => sum + (l.height ?? 0), 0);
+  const requiredPoolH = totalLaneH + pad * 2;
+  const poolMap = /* @__PURE__ */ new Map();
+  if (orientation === "horizontal") {
+    const currentH = getBpmnNodeSize(pool).height;
+    poolMap.set(pool.id, {
+      ...pool,
+      height: Math.max(requiredPoolH, currentH)
+    });
+  }
+  return withBpmnNodeZIndexes(
+    nodes.map((node) => laneMap.get(node.id) ?? poolMap.get(node.id) ?? node)
   );
-  return withBpmnNodeZIndexes(nodes.map((node) => laneMap.get(node.id) ?? node));
 }
 function reorderBpmnLaneAfterDrop(nodes, laneId) {
   const lane = nodes.find((node) => node.id === laneId && node.data.elementType === "Lane");
@@ -4637,6 +4569,53 @@ function findBpmnContainerAt(state, options) {
     }
   });
 }
+function resolveBpmnDropTarget(state, options) {
+  if (options.elementType === "Pool") {
+    return { highlightedContainerId: null, invalidContainerId: null, isValid: true };
+  }
+  if (options.elementType === "Lane") {
+    const pool = state.nodes.find((node) => {
+      if (node.data.elementType !== "Pool") return false;
+      const bounds = getBpmnNodeBounds(state, node);
+      return options.position.x >= bounds.x && options.position.x <= bounds.x + bounds.width && options.position.y >= bounds.y && options.position.y <= bounds.y + bounds.height;
+    });
+    return {
+      ...pool ? { container: pool } : {},
+      highlightedContainerId: pool?.id ?? null,
+      invalidContainerId: null,
+      isValid: Boolean(pool)
+    };
+  }
+  const lane = findBpmnLaneAt(state, options.position);
+  if (lane) {
+    return {
+      container: lane,
+      highlightedContainerId: lane.id,
+      invalidContainerId: null,
+      isValid: true
+    };
+  }
+  const container = findBpmnContainerAt(state, {
+    position: options.position,
+    ...options.excludeId ? { excludeId: options.excludeId } : {}
+  });
+  if (container?.data.elementType === "Pool") {
+    const hasLanes = getBpmnPoolLanes(state, container.id).length > 0;
+    if (hasLanes) {
+      return {
+        highlightedContainerId: null,
+        invalidContainerId: container.id,
+        isValid: false
+      };
+    }
+  }
+  return {
+    ...container ? { container } : {},
+    highlightedContainerId: getAncestorLaneId(state, container) ?? container?.id ?? null,
+    invalidContainerId: null,
+    isValid: true
+  };
+}
 function getBpmnNodeCenter(node, absolutePosition) {
   return diagramsCore.getNodeCenterPosition(absolutePosition, getBpmnNodeSize(node));
 }
@@ -5307,6 +5286,7 @@ exports.reparentBpmnNodeCommand = reparentBpmnNodeCommand;
 exports.replaceBpmnNodeCommand = replaceBpmnNodeCommand;
 exports.resizeBpmnNodeByHandleCommand = resizeBpmnNodeByHandleCommand;
 exports.resizeBpmnNodeCommand = resizeBpmnNodeCommand;
+exports.resolveBpmnDropTarget = resolveBpmnDropTarget;
 exports.restoreBpmnHistory = restoreBpmnHistory;
 exports.routeBpmnEdgeCommand = routeBpmnEdgeCommand;
 exports.runBatchSimulation = runBatchSimulation;