@zombie-mermaid/svg-renderer 4.2.0 → 4.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "license": "MIT",
   "description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
   "repository": {
@@ -37,7 +37,7 @@
   "dependencies": {
     "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/core": "4.2.0",
-    "@zombie-mermaid/mermaid-parser": "4.2.0"
+    "@zombie-mermaid/core": "4.2.2",
+    "@zombie-mermaid/mermaid-parser": "4.2.2"
   }
 }

package/src/__tests__/edge-jog-straightening-1388.test.ts

@@ -0,0 +1,57 @@
+/**
+ * #1388: parallel edges between differently sized, centered nodes kinked by a
+ * fraction of a pixel near the target and tilted the arrowhead.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseMermaid } from '@zombie-mermaid/mermaid-parser'
+import { layoutGraphSync } from '@zombie-mermaid/svg-renderer'
+import { straightenTinyJogs } from '../layout-engine/jog-straightening.ts'
+
+describe('straightenTinyJogs', () => {
+  it('collapses a sub-pixel vertical jog into one straight run', () => {
+    const out = straightenTinyJogs([
+      { x: 62.48, y: 76.9 },
+      { x: 62.48, y: 112.9 },
+      { x: 63.11, y: 112.9 },
+      { x: 63.11, y: 124.9 },
+    ])
+    expect(out).toHaveLength(2)
+    expect(out[0]!.x).toBeCloseTo(out[1]!.x, 6)
+    expect(out[0]!.y).toBe(76.9)
+    expect(out[1]!.y).toBe(124.9)
+  })
+
+  it('collapses a sub-pixel horizontal jog', () => {
+    const out = straightenTinyJogs([
+      { x: 0, y: 10 },
+      { x: 20, y: 10 },
+      { x: 20, y: 10.6 },
+      { x: 40, y: 10.6 },
+    ])
+    expect(out).toHaveLength(2)
+    expect(out[0]!.y).toBeCloseTo(out[1]!.y, 6)
+  })
+
+  it('keeps a real bend', () => {
+    const pts = [
+      { x: 0, y: 0 },
+      { x: 0, y: 20 },
+      { x: 30, y: 20 },
+      { x: 30, y: 40 },
+    ]
+    expect(straightenTinyJogs(pts)).toEqual(pts)
+  })
+})
+
+describe('parallel edges between different-width nodes (#1388)', () => {
+  it('routes both edges as straight vertical lines', () => {
+    const g = layoutGraphSync(
+      parseMermaid('graph TD\n  Top <--> Bot\n  Top <-.- Bot'),
+    )
+    expect(g.edges).toHaveLength(2)
+    for (const e of g.edges) {
+      const xs = new Set(e.points.map((p) => p.x.toFixed(2)))
+      expect(xs.size, JSON.stringify(e.points)).toBe(1)
+    }
+  })
+})

package/src/layout-engine/from-elk.ts

@@ -22,6 +22,7 @@ import { clipEdgeToShape } from '../shape-clipping.ts'
 import { DEFAULTS } from './constants.ts'
 import { alignLayerNodes } from './layer-alignment.ts'
 import { bundleEdgePaths } from './edge-bundling.ts'
+import { straightenTinyJogs } from './jog-straightening.ts'
 import { edgesReversedForLayout } from './to-elk.ts'
 import {
   extractEdgePoints,
@@ -222,6 +223,7 @@ export function elkToPositioned(
   // ELK treats all nodes as rectangles, so we need to clip edge endpoints
   // to the actual shape boundaries (e.g., diamond vertices).
   for (const edge of edges) {
+    edge.points = straightenTinyJogs(edge.points)
     const sourceNode = nodeMap.get(edge.source)
     const targetNode = nodeMap.get(edge.target)
 

package/src/layout-engine/jog-straightening.ts

@@ -0,0 +1,52 @@
+/**
+ * Straighten sub-pixel jogs in orthogonal edge routes.
+ *
+ * ELK spreads parallel edges across each node's side relative to that node's
+ * own width, so two edges between differently sized, centered nodes leave and
+ * arrive at slightly different offsets. The route then runs straight, steps
+ * sideways by a fraction of a pixel, and runs straight again — a visible kink
+ * that also tilts the arrowhead off the edge's axis (#1388).
+ */
+
+import type { Point } from '@zombie-mermaid/core'
+
+/** Largest sideways step, in px, treated as an artifact rather than a bend. */
+const MAX_JOG = 1.5
+
+/** Slack for deciding two coordinates are "the same" run. */
+const EPS = 0.01
+
+/**
+ * Collapse `run, tiny step, run` into one straight run along the shared axis.
+ * Pattern (vertical form): A-B vertical, B-C horizontal with |dx| <= MAX_JOG,
+ * C-D vertical. Returns a new array; the input is not mutated.
+ */
+export function straightenTinyJogs(points: Point[]): Point[] {
+  const out = points.map((p) => ({ ...p }))
+  let i = 0
+  while (i + 3 < out.length) {
+    const [a, b, c, d] = [out[i]!, out[i + 1]!, out[i + 2]!, out[i + 3]!]
+    const vertical =
+      Math.abs(a.x - b.x) < EPS &&
+      Math.abs(c.x - d.x) < EPS &&
+      Math.abs(b.y - c.y) < EPS &&
+      Math.abs(b.x - c.x) <= MAX_JOG &&
+      Math.abs(b.x - c.x) >= EPS
+    const horizontal =
+      Math.abs(a.y - b.y) < EPS &&
+      Math.abs(c.y - d.y) < EPS &&
+      Math.abs(b.x - c.x) < EPS &&
+      Math.abs(b.y - c.y) <= MAX_JOG &&
+      Math.abs(b.y - c.y) >= EPS
+    if (vertical) {
+      const x = (a.x + d.x) / 2
+      out.splice(i, 4, { x, y: a.y }, { x, y: d.y })
+    } else if (horizontal) {
+      const y = (a.y + d.y) / 2
+      out.splice(i, 4, { x: a.x, y }, { x: d.x, y })
+    } else {
+      i++
+    }
+  }
+  return out
+}