Fix: block arrows now span multiple columns when widthInColumns is set

.changeset/fruity-ghosts-watch.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Arrow blocks in block-beta diagrams not spanning the specified number of columns when using :n syntax.

cypress/integration/rendering/block.spec.js

@@ -458,6 +458,28 @@ columns 3
       {}
     );
   });
+
+  it('BL35: block arrow should span multiple columns when widthInColumns is set', () => {
+    imgSnapshotTest(
+      `block-beta
+columns 10
+
+  arrow<["span 10"]>(x):10
+  A
+  B
+  C
+  D
+  E
+  F
+  G
+  H
+  I
+  J
+  `,
+      {}
+    );
+  });
+
   it('BL35: mixed column spans should not shrink column widths (issue #7503)', () => {
     imgSnapshotTest(
       `block-beta

packages/mermaid/src/dagre-wrapper/blockArrowHelper.ts

@@ -24,7 +24,8 @@ const expandAndDeduplicateDirections = (directions: Direction[]) => {
 export const getArrowPoints = (
   duplicatedDirections: Direction[],
   bbox: { width: number; height: number },
-  node: any
+  node: any,
+  totalWidth?: number
 ) => {
   // Expand and deduplicate the provided directions.
   // for instance: x, right => right, left
@@ -38,7 +39,8 @@ export const getArrowPoints = (
   // Midpoint calculation based on height.
   const midpoint = height / f;
   // Calculated width of the bounding box, accounting for additional width and node padding.
-  const width = bbox.width + 2 * midpoint + node.padding;
+  // When totalWidth is provided
+  const width = totalWidth ?? bbox.width + 2 * midpoint + node.padding;
   // Padding to use, half of the node padding.
   const padding = node.padding / 2;
 

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -125,9 +125,12 @@ const block_arrow = async (parent, node) => {
   const f = 2;
   const h = bbox.height + 2 * node.padding;
   const m = h / f;
-  const w = bbox.width + 2 * m + node.padding;
+  const naturalW = bbox.width + 2 * m + node.padding;
+  // Only use the layout-computed width when the block explicitly spans multiple columns
+  const isSpanning = node.positioned && (node.widthInColumns ?? 1) > 1 && node.width > naturalW;
+  const w = isSpanning ? node.width : naturalW;
 
-  const points = getArrowPoints(node.directions, bbox, node);
+  const points = getArrowPoints(node.directions, bbox, node, w);
 
   const blockArrow = insertPolygonShape(shapeSvg, w, h, points);
   blockArrow.attr('style', node.style);

packages/mermaid/src/diagrams/block/renderHelpers.ts

@@ -112,6 +112,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     intersect: undefined,
     type: vertex.type,
     padding: padding ?? getConfig()?.block?.padding ?? 0,
+    widthInColumns: vertex.widthInColumns ?? 1,
   };
   return node;
 }