@jarenjs/mermaid 0.34.0

package/src/interactive.js

@@ -0,0 +1,244 @@
+//@ts-check
+/**
+ * @file Optional pan/zoom/touch for a rendered diagram.
+ *
+ * The render stays pure: this module is never imported by it, runs only in a
+ * browser, and only when a consumer opts in with `mermaidPlugin({ interactive:
+ * true })`. Server-rendered output is byte-identical with and without it, and
+ * a page that never enables it tree-shakes the whole file away.
+ *
+ * Everything happens on the SVG's `viewBox`. Nothing re-renders, nothing is
+ * re-parsed, no `eval`, no `innerHTML` — panning is four numbers changing.
+ *
+ * The interaction rules are chosen so the diagram never fights the page,
+ * which is the usual failure of embedded zoomable content:
+ *
+ *   - **A plain wheel scrolls the page.** Zoom needs ctrl/⌘ (the browser's own
+ *     zoom gesture) or the on-diagram buttons. Hijacking the wheel is the
+ *     fastest way to make a document unreadable.
+ *   - **A one-finger drag pans only once zoomed in.** At rest the whole
+ *     diagram is visible, so there is nothing to pan to, and a swipe should
+ *     scroll the page like every other element. `touch-action` is switched to
+ *     match, so the browser never has to guess.
+ *   - **Two fingers always pinch-zoom**, because that gesture means nothing
+ *     else inside a figure.
+ *   - **Keyboard works**: the figure is focusable, `+`/`-`/`0` zoom and reset,
+ *     arrows pan. A pointer-only zoom control is not usable by everyone.
+ */
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+const ZOOM_STEP = 1.35;
+const PAN_STEP = 40;
+
+/** Parse `viewBox` into a mutable box, or null when the SVG lacks one. */
+function readViewBox(svg) {
+  const raw = svg.getAttribute('viewBox');
+  if (typeof raw !== 'string') return null;
+  const parts = raw.trim().split(/[\s,]+/).map(Number);
+  if (parts.length !== 4 || parts.some((n) => !Number.isFinite(n))) return null;
+  return { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+}
+
+/**
+ * Attach pan/zoom to one rendered diagram element.
+ * @param {any} el the block element wrapping the `<svg>`
+ * @param {{ document?: any }} [env] injection seam for tests
+ * @returns {(() => void)|undefined} a teardown function, or undefined when
+ *   there is nothing to attach to
+ */
+export function attachInteractiveDiagram(el, env = {}) {
+  const svg = el.querySelector === undefined ? null : el.querySelector('svg');
+  if (svg === null) return undefined;
+  const home = readViewBox(svg);
+  if (home === null) return undefined;
+
+  const doc = env.document ?? el.ownerDocument ?? globalThis.document;
+  const view = { ...home };
+  let scale = 1;
+
+  const apply = () => {
+    svg.setAttribute('viewBox', `${view.x} ${view.y} ${view.w} ${view.h}`);
+    // Once zoomed the drag belongs to the diagram; until then it belongs to
+    // the page. Telling the browser directly avoids a preventDefault race.
+    el.style.touchAction = scale > 1 ? 'none' : 'pan-y';
+    el.setAttribute('data-mm-zoom', scale.toFixed(2));
+    // At rest the figure is an ordinary scrolling frame showing the diagram at
+    // its natural, legible size; zooming switches it to a viewBox viewport.
+    if (typeof el.classList?.toggle === 'function')
+      el.classList.toggle('mm-zoomed', scale > 1);
+  };
+
+  /** Clamp the view so the diagram can never be panned off its own canvas. */
+  const clamp = () => {
+    view.w = home.w / scale;
+    view.h = home.h / scale;
+    view.x = Math.min(Math.max(view.x, home.x), home.x + home.w - view.w);
+    view.y = Math.min(Math.max(view.y, home.y), home.y + home.h - view.h);
+  };
+
+  /** Zoom about a point given in viewBox units. */
+  const zoomAt = (factor, px, py) => {
+    const next = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale * factor));
+    if (next === scale) return;
+    const ratio = scale / next;
+    view.x = px - (px - view.x) * ratio;
+    view.y = py - (py - view.y) * ratio;
+    scale = next;
+    clamp();
+    apply();
+  };
+
+  const centre = () => [view.x + view.w / 2, view.y + view.h / 2];
+
+  const reset = () => {
+    scale = 1;
+    view.x = home.x; view.y = home.y; view.w = home.w; view.h = home.h;
+    apply();
+  };
+
+  /** Client coordinates to viewBox units. */
+  const toView = (clientX, clientY) => {
+    const rect = svg.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return centre();
+    return [
+      view.x + ((clientX - rect.left) / rect.width) * view.w,
+      view.y + ((clientY - rect.top) / rect.height) * view.h,
+    ];
+  };
+
+  /** @type {Map<number, {x: number, y: number}>} live pointers */
+  const pointers = new Map();
+  let pinchDistance = 0;
+
+  const onWheel = (event) => {
+    // A plain wheel is the page's. Only the browser's own zoom modifier
+    // means "zoom this thing".
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    const [px, py] = toView(event.clientX, event.clientY);
+    zoomAt(event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP, px, py);
+  };
+
+  const onPointerDown = (event) => {
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()];
+      pinchDistance = Math.hypot(a.x - b.x, a.y - b.y);
+    }
+    if (typeof svg.setPointerCapture === 'function' && pointers.size === 1) {
+      try { svg.setPointerCapture(event.pointerId); }
+      catch { /* a capture the browser declines is not fatal */ }
+    }
+  };
+
+  const onPointerMove = (event) => {
+    const previous = pointers.get(event.pointerId);
+    if (previous === undefined) return;
+    const current = { x: event.clientX, y: event.clientY };
+    pointers.set(event.pointerId, current);
+
+    if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()];
+      const distance = Math.hypot(a.x - b.x, a.y - b.y);
+      if (pinchDistance > 0 && distance > 0) {
+        const [px, py] = toView((a.x + b.x) / 2, (a.y + b.y) / 2);
+        zoomAt(distance / pinchDistance, px, py);
+      }
+      pinchDistance = distance;
+      event.preventDefault();
+      return;
+    }
+
+    // At rest there is nothing to pan to, so the gesture is the page's.
+    if (scale <= 1) return;
+    const rect = svg.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    view.x -= ((current.x - previous.x) / rect.width) * view.w;
+    view.y -= ((current.y - previous.y) / rect.height) * view.h;
+    clamp();
+    apply();
+    event.preventDefault();
+  };
+
+  const onPointerUp = (event) => {
+    pointers.delete(event.pointerId);
+    if (pointers.size < 2) pinchDistance = 0;
+  };
+
+  const onDoubleClick = (event) => {
+    event.preventDefault();
+    if (scale > 1) { reset(); return; }
+    const [px, py] = toView(event.clientX, event.clientY);
+    zoomAt(ZOOM_STEP * ZOOM_STEP, px, py);
+  };
+
+  const onKeyDown = (event) => {
+    const [cx, cy] = centre();
+    switch (event.key) {
+      case '+': case '=': zoomAt(ZOOM_STEP, cx, cy); break;
+      case '-': case '_': zoomAt(1 / ZOOM_STEP, cx, cy); break;
+      case '0': reset(); break;
+      case 'ArrowLeft': view.x -= PAN_STEP / scale; clamp(); apply(); break;
+      case 'ArrowRight': view.x += PAN_STEP / scale; clamp(); apply(); break;
+      case 'ArrowUp': view.y -= PAN_STEP / scale; clamp(); apply(); break;
+      case 'ArrowDown': view.y += PAN_STEP / scale; clamp(); apply(); break;
+      default: return;
+    }
+    event.preventDefault();
+  };
+
+  // The controls are built here, not in the render, so server output stays
+  // free of buttons that would do nothing without this module. They are an
+  // enhancement on top of an enhancement: without a document to build them,
+  // pointer, pinch and keyboard still work, so their absence must not take
+  // the viewer down with it.
+  let controls = null;
+  if (doc !== undefined && doc !== null && typeof doc.createElement === 'function') {
+    controls = doc.createElement('div');
+    controls.className = 'mm-controls';
+    const buttons = [
+      ['+', 'Zoom in', () => { const [x, y] = centre(); zoomAt(ZOOM_STEP, x, y); }],
+      ['−', 'Zoom out', () => { const [x, y] = centre(); zoomAt(1 / ZOOM_STEP, x, y); }],
+      ['↺', 'Reset view', reset],
+    ];
+    for (const [glyph, label, action] of buttons) {
+      const button = doc.createElement('button');
+      button.type = 'button';
+      button.className = 'mm-control';
+      button.textContent = glyph;
+      button.setAttribute('aria-label', label);
+      button.addEventListener('click', action);
+      controls.appendChild(button);
+    }
+    el.appendChild(controls);
+  }
+
+  el.setAttribute('tabindex', '0');
+  el.setAttribute('role', 'group');
+  el.setAttribute('aria-label',
+    'Diagram. Use plus and minus to zoom, arrow keys to pan, zero to reset.');
+  el.classList.add('mm-interactive');
+
+  svg.addEventListener('wheel', onWheel, { passive: false });
+  svg.addEventListener('pointerdown', onPointerDown);
+  svg.addEventListener('pointermove', onPointerMove);
+  svg.addEventListener('pointerup', onPointerUp);
+  svg.addEventListener('pointercancel', onPointerUp);
+  svg.addEventListener('dblclick', onDoubleClick);
+  el.addEventListener('keydown', onKeyDown);
+  apply();
+
+  return () => {
+    svg.removeEventListener('wheel', onWheel);
+    svg.removeEventListener('pointerdown', onPointerDown);
+    svg.removeEventListener('pointermove', onPointerMove);
+    svg.removeEventListener('pointerup', onPointerUp);
+    svg.removeEventListener('pointercancel', onPointerUp);
+    svg.removeEventListener('dblclick', onDoubleClick);
+    el.removeEventListener('keydown', onKeyDown);
+    if (controls !== null && controls.parentNode !== null)
+      controls.parentNode.removeChild(controls);
+    el.classList.remove('mm-interactive');
+  };
+}

package/src/layout/flowchart.js

@@ -0,0 +1,352 @@
+//@ts-check
+/**
+ * @file Flowchart layout: a compact "dagre-lite" — longest-path rank
+ * assignment, stable within-rank ordering, banded coordinate
+ * assignment, and straight border-clipped edge routing. Pure and
+ * deterministic (same AST → identical geometry), so the golden-JSON
+ * tests catch any drift. Output is a host-free `PositionedDiagram`.
+ */
+
+import { measureText } from '@jarenjs/view/helpers';
+import { coord as round } from '../utils.js';
+
+import { resolveNodeStyles } from '../styles.js';
+
+const FONT_SIZE = 14;
+const PAD_X = 14;
+const PAD_Y = 9;
+const MIN_W = 48;
+const MIN_H = 34;
+const RANK_SEP = 54;
+const NODE_SEP = 40;
+const MARGIN = 12;
+const SUBGRAPH_PAD = 18;
+const SUBGRAPH_LABEL_H = 22;
+
+/**
+ * @param {any} ast flowchart AST
+ * @returns {any} PositionedDiagram
+ */
+export function layoutFlowchart(ast) {
+  const nodeStyles = resolveNodeStyles(ast);
+  const dir = ast.direction || 'TB';
+  const horizontal = dir === 'LR' || dir === 'RL';
+
+  // 1. Node boxes from label metrics.
+  /** @type {Map<string, any>} */
+  const boxes = new Map();
+  for (const node of ast.nodes) {
+    boxes.set(node.id, sizeNode(node));
+  }
+
+  // 2. Rank assignment (longest path over predecessors).
+  const preds = new Map();
+  for (const node of ast.nodes) preds.set(node.id, []);
+  for (const e of ast.edges) {
+    if (preds.has(e.to)) preds.get(e.to).push(e.from);
+  }
+  const rank = new Map();
+  const computing = new Set();
+  const rankOf = (id) => {
+    if (rank.has(id)) return rank.get(id);
+    if (computing.has(id)) return 0;
+    computing.add(id);
+    let r = 0;
+    for (const p of preds.get(id) ?? []) {
+      if (p !== id) r = Math.max(r, rankOf(p) + 1);
+    }
+    computing.delete(id);
+    rank.set(id, r);
+    return r;
+  };
+  for (const node of ast.nodes) rankOf(node.id);
+
+  // 3. Group by rank, preserve AST order within a rank.
+  /** @type {Map<number, string[]>} */
+  const ranks = new Map();
+  let maxRank = 0;
+  for (const node of ast.nodes) {
+    const r = rank.get(node.id);
+    if (!ranks.has(r)) ranks.set(r, []);
+    ranks.get(r).push(node.id);
+    if (r > maxRank) maxRank = r;
+  }
+
+  // 4. Cross-axis extent per rank and the along-axis band offsets.
+  const bandStart = []; // cumulative main-axis position per rank
+  const bandSize = []; // main-axis size (height for TB, width for LR) per rank
+  let mainCursor = MARGIN;
+  let maxCross = 0;
+  for (let r = 0; r <= maxRank; r++) {
+    const ids = ranks.get(r) ?? [];
+    let mainMax = 0;
+    let crossTotal = 0;
+    for (let i = 0; i < ids.length; i++) {
+      const b = boxes.get(ids[i]);
+      const main = horizontal ? b.w : b.h;
+      const cross = horizontal ? b.h : b.w;
+      if (main > mainMax) mainMax = main;
+      crossTotal += cross + (i > 0 ? NODE_SEP : 0);
+    }
+    bandStart[r] = mainCursor;
+    bandSize[r] = mainMax;
+    mainCursor += mainMax + RANK_SEP;
+    if (crossTotal > maxCross) maxCross = crossTotal;
+  }
+  const mainTotal = mainCursor - RANK_SEP + MARGIN;
+
+  // 5. Place nodes: center each rank on the cross axis.
+  for (let r = 0; r <= maxRank; r++) {
+    const ids = ranks.get(r) ?? [];
+    let crossTotal = 0;
+    for (let i = 0; i < ids.length; i++) {
+      const b = boxes.get(ids[i]);
+      crossTotal += (horizontal ? b.h : b.w) + (i > 0 ? NODE_SEP : 0);
+    }
+    let cross = MARGIN + (maxCross - crossTotal) / 2;
+    for (let i = 0; i < ids.length; i++) {
+      const b = boxes.get(ids[i]);
+      const main = horizontal ? b.w : b.h;
+      const crossExtent = horizontal ? b.h : b.w;
+      const mainPos = bandStart[r] + (bandSize[r] - main) / 2;
+      if (horizontal) {
+        b.x = mainPos;
+        b.y = cross;
+      }
+      else {
+        b.x = cross;
+        b.y = mainPos;
+      }
+      cross += crossExtent + NODE_SEP;
+    }
+  }
+
+  let width = horizontal ? mainTotal : maxCross + 2 * MARGIN;
+  let height = horizontal ? maxCross + 2 * MARGIN : mainTotal;
+
+  // 6. Flip for BT / RL.
+  if (dir === 'BT') {
+    for (const b of boxes.values()) b.y = height - b.y - b.h;
+  }
+  else if (dir === 'RL') {
+    for (const b of boxes.values()) b.x = width - b.x - b.w;
+  }
+
+  // 7. Positioned nodes.
+  const nodes = ast.nodes.map((node) => {
+    const b = boxes.get(node.id);
+    const styles = nodeStyles.get(node.id);
+    const box = { id: node.id, x: b.x, y: b.y, w: b.w, h: b.h, shape: node.shape, label: node.label };
+    // Carried on the positioned node so the scene stays self-describing: a
+    // renderer never has to reach back into the AST to know how to paint.
+    if (styles !== undefined) box.styles = styles;
+    return box;
+  });
+
+  // 8. Edges: straight, clipped to node borders.
+  const edges = ast.edges.map((e) => {
+    const a = boxes.get(e.from);
+    const b = boxes.get(e.to);
+    if (a === undefined || b === undefined) {
+      return { from: e.from, to: e.to, points: [], label: e.label, labelPos: null, stroke: e.stroke, head: e.head, tail: e.tail };
+    }
+    const ac = { x: a.x + a.w / 2, y: a.y + a.h / 2 };
+    const bc = { x: b.x + b.w / 2, y: b.y + b.h / 2 };
+    const p1 = clipToBox(bc, ac, a);
+    const p2 = clipToBox(ac, bc, b);
+    const edge = {
+      from: e.from, to: e.to, points: [p1, p2], label: e.label,
+      labelPos: null, stroke: e.stroke, head: e.head, tail: e.tail,
+    };
+    if (e.label != null) {
+      // Measured, not estimated from the character count: the renderer used to
+      // guess the background width and a wide label overflowed its own box.
+      const m = measureText(e.label, FONT_SIZE);
+      edge.labelW = m.width + LABEL_PAD;
+      edge.labelH = m.height + LABEL_PAD / 2;
+      edge.labelPos = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
+    }
+    return edge;
+  });
+
+  placeEdgeLabels(edges, nodes);
+
+  // 9. Subgraph bounding boxes around their members.
+  const subgraphs = ast.subgraphs.map((sg) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const id of sg.nodes) {
+      const b = boxes.get(id);
+      if (b === undefined) continue;
+      minX = Math.min(minX, b.x); minY = Math.min(minY, b.y);
+      maxX = Math.max(maxX, b.x + b.w); maxY = Math.max(maxY, b.y + b.h);
+    }
+    if (!isFinite(minX)) return { id: sg.id, label: sg.label, x: 0, y: 0, w: 0, h: 0 };
+    return {
+      id: sg.id,
+      label: sg.label,
+      x: minX - SUBGRAPH_PAD,
+      y: minY - SUBGRAPH_PAD - SUBGRAPH_LABEL_H,
+      w: maxX - minX + 2 * SUBGRAPH_PAD,
+      h: maxY - minY + 2 * SUBGRAPH_PAD + SUBGRAPH_LABEL_H,
+    };
+  });
+
+  // Expand canvas for subgraph frames that spill past the content box.
+  for (const s of subgraphs) {
+    width = Math.max(width, s.x + s.w + MARGIN);
+    height = Math.max(height, s.y + s.h + MARGIN);
+  }
+
+  return {
+    type: 'flowchart',
+    direction: dir,
+    width: round(width),
+    height: round(height),
+    nodes: nodes.map(roundBox),
+    edges: edges.map(roundEdge),
+    subgraphs: subgraphs.map(roundBox),
+    fontSize: FONT_SIZE,
+  };
+}
+
+/**
+ * @param {any} node
+ * @returns {any}
+ */
+function sizeNode(node) {
+  const shape = node.shape;
+  // The state-diagram pseudo-states are fixed-size markers, never
+  // label-sized boxes. An empty-labeled doublecircle cannot come from
+  // flowchart source (the parser defaults a missing label to the id),
+  // so the branch only fires for the state layout's synthetic end node.
+  if (shape === 'statedot') {
+    return { x: 0, y: 0, w: 14, h: 14, lines: [] };
+  }
+  if (shape === 'doublecircle' && node.label === '') {
+    return { x: 0, y: 0, w: 22, h: 22, lines: [] };
+  }
+  const m = measureText(node.label, FONT_SIZE);
+  let w = m.width + 2 * PAD_X;
+  let h = m.height + 2 * PAD_Y;
+  if (shape === 'circle' || shape === 'doublecircle') {
+    const d = Math.max(w, h, MIN_H + 8);
+    w = d; h = d;
+  }
+  else if (shape === 'diamond') {
+    w = Math.max(w * 1.4, MIN_W + 20);
+    h = Math.max(h * 1.4, MIN_H + 8);
+  }
+  else if (shape === 'hexagon') {
+    w += 20;
+  }
+  else if (shape === 'stadium' || shape === 'round') {
+    w += 10;
+  }
+  return {
+    x: 0, y: 0,
+    w: Math.max(w, MIN_W),
+    h: Math.max(h, MIN_H),
+    lines: m.lines,
+  };
+}
+
+/**
+ * Intersect the segment from an external point `from` to the box center
+ * with the box border.
+ * @param {{x:number,y:number}} from
+ * @param {{x:number,y:number}} to box center
+ * @param {any} box
+ * @returns {{x:number,y:number}}
+ */
+function clipToBox(from, to, box) {
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  const dx = from.x - cx;
+  const dy = from.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const hw = box.w / 2;
+  const hh = box.h / 2;
+  const scaleX = dx === 0 ? Infinity : hw / Math.abs(dx);
+  const scaleY = dy === 0 ? Infinity : hh / Math.abs(dy);
+  const scale = Math.min(scaleX, scaleY);
+  return { x: cx + dx * scale, y: cy + dy * scale };
+}
+
+const roundBox = (b) => ({ ...b, x: round(b.x), y: round(b.y), w: round(b.w), h: round(b.h) });
+
+/** Horizontal breathing room around an edge label's background. */
+const LABEL_PAD = 10;
+
+/** How far along an edge a label may sit, nearest the middle first. */
+const LABEL_SLOTS = [0.5, 0.42, 0.58, 0.34, 0.66];
+
+/** Sideways steps, in label-heights, tried when sliding alone cannot free a
+ * label. Perpendicular to a near-vertical edge is horizontal, which is where
+ * the space actually is when two edges leave one node. */
+const LABEL_OFFSETS = [0, 1, -1, 2, -2];
+
+/** Whether two label boxes overlap, with a small gap required between them. */
+function labelsOverlap(a, b) {
+  const gap = 2;
+  return Math.abs(a.x - b.x) * 2 < a.w + b.w + gap * 2
+    && Math.abs(a.y - b.y) * 2 < a.h + b.h + gap * 2;
+}
+
+/**
+ * Place each edge label so it does not cover one already placed.
+ *
+ * Two edges leaving the same node land their midpoints at the same height, so
+ * with any pair of long labels the second one's opaque background covered the
+ * first — the reason the bundled diagrams had to keep edge labels short.
+ *
+ * Candidates are tried in order of how far they stray from the natural
+ * midpoint: first slide ALONG the edge (which keeps the label on its line),
+ * then step sideways. A label with nowhere free keeps the midpoint rather than
+ * drifting somewhere arbitrary — an honest overlap beats a confusing one.
+ *
+ * Deterministic by construction: edges are visited in document order and the
+ * candidate list is fixed, so a diagram always lays out the same way.
+ * Node boxes are seeded as obstacles too: a label that lands on top of a box
+ * it has nothing to do with reads as that box's text.
+ * @param {any[]} edges positioned edges, mutated in place
+ * @param {any[]} nodes positioned nodes, treated as obstacles
+ */
+function placeEdgeLabels(edges, nodes) {
+  const placed = nodes.map((n) => ({
+    x: n.x + n.w / 2, y: n.y + n.h / 2, w: n.w, h: n.h,
+  }));
+  for (const e of edges) {
+    if (e.labelPos === null || e.points.length < 2) continue;
+    const [p1, p2] = e.points;
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const len = Math.hypot(dx, dy) || 1;
+    // The unit normal: sideways relative to this edge, whichever way it runs.
+    const nx = -dy / len;
+    const ny = dx / len;
+
+    let chosen = null;
+    for (const off of LABEL_OFFSETS) {
+      for (const t of LABEL_SLOTS) {
+        const step = off * (e.labelH + 4);
+        const candidate = {
+          x: p1.x + dx * t + nx * step,
+          y: p1.y + dy * t + ny * step,
+          w: e.labelW, h: e.labelH,
+        };
+        if (placed.some((other) => labelsOverlap(candidate, other))) continue;
+        chosen = candidate;
+        break;
+      }
+      if (chosen !== null) break;
+    }
+    if (chosen === null) continue;   // keep the midpoint; nothing is free
+    e.labelPos = { x: chosen.x, y: chosen.y };
+    placed.push(chosen);
+  }
+}
+const roundEdge = (e) => ({
+  ...e,
+  points: e.points.map((p) => ({ x: round(p.x), y: round(p.y) })),
+  labelPos: e.labelPos ? { x: round(e.labelPos.x), y: round(e.labelPos.y) } : null,
+});