compasso 0.4.0 → 0.5.0

package/dist/org-chart/index.cjs

@@ -249,6 +249,70 @@ function legendBlock(entries, startY) {
 var EDGE_STROKE = {
   distant: { width: 1.5, dash: [4, 4], opacity: 0.55 }};
 
+// src/core/annotation.ts
+var round = (n) => Math.round(n * 100) / 100;
+var ANNOTATION_INK = "#52525b";
+var DOT_R = 3;
+var TICK_HALF = 3;
+function annotationDot(cx, cy) {
+  return `<circle cx="${round(cx)}" cy="${round(cy)}" r="${DOT_R}" fill="${ANNOTATION_INK}" fill-opacity="0.6"/>`;
+}
+function annotationTick(points) {
+  if (points.length < 2) return "";
+  const i = Math.floor((points.length - 1) / 2);
+  const a = points[i];
+  const b = points[i + 1] ?? points[i];
+  const mx = (a.x + b.x) / 2;
+  const my = (a.y + b.y) / 2;
+  const horizontal = Math.abs(a.y - b.y) <= Math.abs(a.x - b.x);
+  const x1 = horizontal ? mx : mx - TICK_HALF;
+  const x2 = horizontal ? mx : mx + TICK_HALF;
+  const y1 = horizontal ? my - TICK_HALF : my;
+  const y2 = horizontal ? my + TICK_HALF : my;
+  return `<line x1="${round(x1)}" y1="${round(y1)}" x2="${round(x2)}" y2="${round(y2)}" stroke="${ANNOTATION_INK}" stroke-width="1.5"/>`;
+}
+function annotationSwatch(x, yCenter) {
+  return annotationDot(x + LEGEND_SWATCH_W / 2, yCenter);
+}
+
+// src/core/layered.ts
+function packSubtree(node, gaps) {
+  const { ownHalfL, ownHalfR, children } = node;
+  if (children.length === 0) {
+    return { halfL: ownHalfL, halfR: ownHalfR, offsets: [] };
+  }
+  const xs = [0];
+  for (let i = 1; i < children.length; i++) {
+    xs.push(xs[i - 1] + children[i - 1].halfR + gaps.siblingGap + children[i].halfL);
+  }
+  const first = children[0];
+  const last = children[children.length - 1];
+  const axis = (xs[0] + xs[xs.length - 1]) / 2;
+  const offsets = xs.map((x) => x - axis);
+  const halfL = Math.max(ownHalfL, axis - (xs[0] - first.halfL));
+  const halfR = Math.max(ownHalfR, xs[xs.length - 1] + last.halfR - axis);
+  return { halfL, halfR, offsets };
+}
+function allocateLanes(items) {
+  const lanes = [];
+  for (const it of items) {
+    let chosen = -1;
+    for (let l = 0; l < lanes.length; l++) {
+      if (lanes[l].every((o) => it.hi <= o.lo || it.lo >= o.hi)) {
+        chosen = l;
+        break;
+      }
+    }
+    if (chosen === -1) {
+      chosen = lanes.length;
+      lanes.push([]);
+    }
+    lanes[chosen].push({ lo: it.lo, hi: it.hi });
+    it.set(chosen);
+  }
+  return lanes.length;
+}
+
 // src/org-chart/layout.ts
 var ORG_LABEL_FONT = 12;
 var ORG_TITLE_FONT = 10;
@@ -270,26 +334,9 @@ var ORG_BUS_ID_BASE = 2e6;
 var ORG_DROP_ID_BASE = 3e6;
 var ORG_ASSIST_ID_BASE = 4e6;
 var ORG_DOTTED_ID_BASE = 5e6;
-var round = (n) => Math.round(n * 100) / 100;
-var drawnLeftEdge = (cx, boxW) => round(round(cx) - round(boxW) / 2);
-var drawnRightEdge = (cx, boxW) => drawnLeftEdge(cx, boxW) + round(boxW);
-function packSubtree(node, gaps) {
-  const { ownHalfL, ownHalfR, children } = node;
-  if (children.length === 0) {
-    return { halfL: ownHalfL, halfR: ownHalfR, offsets: [] };
-  }
-  const xs = [0];
-  for (let i = 1; i < children.length; i++) {
-    xs.push(xs[i - 1] + children[i - 1].halfR + gaps.siblingGap + children[i].halfL);
-  }
-  const first = children[0];
-  const last = children[children.length - 1];
-  const axis = (xs[0] + xs[xs.length - 1]) / 2;
-  const offsets = xs.map((x) => x - axis);
-  const halfL = Math.max(ownHalfL, axis - (xs[0] - first.halfL));
-  const halfR = Math.max(ownHalfR, xs[xs.length - 1] + last.halfR - axis);
-  return { halfL, halfR, offsets };
-}
+var round2 = (n) => Math.round(n * 100) / 100;
+var drawnLeftEdge = (cx, boxW) => round2(round2(cx) - round2(boxW) / 2);
+var drawnRightEdge = (cx, boxW) => drawnLeftEdge(cx, boxW) + round2(boxW);
 function measurePosition(position, maxLabelChars, vacantWord) {
   const nameLines = position.name === "" ? [] : wrapLabelBalanced(clampLabel(position.name, maxLabelChars), 2);
   const titleLines = position.title === null ? [] : wrapLabelBalanced(clampLabel(position.title, maxLabelChars), 2);
@@ -440,10 +487,10 @@ function computeOrgChartLayout(input, opts = {}) {
   const pushNode = (inst) => {
     nodes.push({
       positionId: inst.position.id,
-      cx: round(inst.cx),
-      top: round(rowTop[inst.depth]),
-      boxW: round(inst.m.boxW),
-      boxH: round(inst.m.boxH),
+      cx: round2(inst.cx),
+      top: round2(rowTop[inst.depth]),
+      boxW: round2(inst.m.boxW),
+      boxH: round2(inst.m.boxH),
       style: inst.style,
       nameLines: inst.m.nameLines,
       titleLines: inst.m.titleLines,
@@ -451,7 +498,8 @@ function computeOrgChartLayout(input, opts = {}) {
       vacantMarker: inst.m.vacantMarker,
       isAssistant: inst.assistReport !== null,
       depth: inst.depth,
-      title: inst.title
+      title: inst.title,
+      annotated: inst.position.annotated ?? false
     });
   };
   const emit = (inst) => {
@@ -465,10 +513,10 @@ function computeOrgChartLayout(input, opts = {}) {
       const assistMidY = assistTop + a.m.boxH / 2;
       nodes.push({
         positionId: a.position.id,
-        cx: round(a.cx),
-        top: round(assistTop),
-        boxW: round(a.m.boxW),
-        boxH: round(a.m.boxH),
+        cx: round2(a.cx),
+        top: round2(assistTop),
+        boxW: round2(a.m.boxW),
+        boxH: round2(a.m.boxH),
         style: a.style,
         nameLines: a.m.nameLines,
         titleLines: a.m.titleLines,
@@ -476,17 +524,19 @@ function computeOrgChartLayout(input, opts = {}) {
         vacantMarker: a.m.vacantMarker,
         isAssistant: true,
         depth: a.depth,
-        title: a.title
+        title: a.title,
+        annotated: a.position.annotated ?? false
       });
       elements.push({
         edgeId: ORG_ASSIST_ID_BASE + report.reportId,
         kind: "assist",
         points: [
-          { x: round(inst.cx), y: round(assistMidY) },
-          { x: drawnRightEdge(a.cx, a.m.boxW), y: round(assistMidY) }
+          { x: round2(inst.cx), y: round2(assistMidY) },
+          { x: drawnRightEdge(a.cx, a.m.boxW), y: round2(assistMidY) }
         ],
         dashed: false,
-        title: reportTitle("assistant", report.label)
+        title: reportTitle("assistant", report.label),
+        annotated: report.annotated ?? false
       });
       bandY += a.m.boxH + ORG_ASSIST_BAND_DROP;
     }
@@ -498,11 +548,12 @@ function computeOrgChartLayout(input, opts = {}) {
       edgeId: ORG_STEM_ID_BASE + inst.position.id,
       kind: "stem",
       points: [
-        { x: round(inst.cx), y: round(boxBottom) },
-        { x: round(inst.cx), y: round(by) }
+        { x: round2(inst.cx), y: round2(boxBottom) },
+        { x: round2(inst.cx), y: round2(by) }
       ],
       dashed: false,
-      title: reportTitle("line", null)
+      title: reportTitle("line", null),
+      annotated: false
     });
     const childCxs = inst.lineChildren.map((c) => c.cx);
     if (inst.lineChildren.length > 1) {
@@ -510,23 +561,28 @@ function computeOrgChartLayout(input, opts = {}) {
         edgeId: ORG_BUS_ID_BASE + inst.position.id,
         kind: "bus",
         points: [
-          { x: round(Math.min(...childCxs)), y: round(by) },
-          { x: round(Math.max(...childCxs)), y: round(by) }
+          { x: round2(Math.min(...childCxs)), y: round2(by) },
+          { x: round2(Math.max(...childCxs)), y: round2(by) }
         ],
         dashed: false,
-        title: reportTitle("line", null)
+        title: reportTitle("line", null),
+        annotated: false
       });
     }
+    const lineReports = lineChildIds.get(inst.position.id) ?? [];
+    const lineReportByChildId = new Map(lineReports.map((r) => [r.reportId, r]));
     for (const c of inst.lineChildren) {
+      const lineReport = lineReportByChildId.get(c.position.id);
       elements.push({
         edgeId: ORG_DROP_ID_BASE + c.position.id,
         kind: "drop",
         points: [
-          { x: round(c.cx), y: round(by) },
-          { x: round(c.cx), y: round(rowTop[c.depth]) }
+          { x: round2(c.cx), y: round2(by) },
+          { x: round2(c.cx), y: round2(rowTop[c.depth]) }
         ],
         dashed: false,
-        title: reportTitle("line", null)
+        title: reportTitle("line", null),
+        annotated: lineReport?.annotated ?? false
       });
     }
     for (const c of inst.lineChildren) emit(c);
@@ -596,13 +652,13 @@ function computeOrgChartLayout(input, opts = {}) {
       return {
         r,
         i,
-        repMidY: round(nextExitY(r.reportId, rep.midY, rep.boxH)),
-        mgrMidY: round(nextExitY(r.managerId, mgr.midY, mgr.boxH)),
-        repBoxEdge: round(rep.boxEdge),
-        mgrBoxEdge: round(mgr.boxEdge),
-        repChY: round(channelTop + 2 * i * ORG_MATRIX_LANE_PITCH),
-        mgrChY: round(channelTop + (2 * i + 1) * ORG_MATRIX_LANE_PITCH),
-        laneX: round(canvasRight + ORG_MATRIX_GUTTER_GAP + laneOf.get(r.id) * ORG_MATRIX_LANE_PITCH),
+        repMidY: round2(nextExitY(r.reportId, rep.midY, rep.boxH)),
+        mgrMidY: round2(nextExitY(r.managerId, mgr.midY, mgr.boxH)),
+        repBoxEdge: round2(rep.boxEdge),
+        mgrBoxEdge: round2(mgr.boxEdge),
+        repChY: round2(channelTop + 2 * i * ORG_MATRIX_LANE_PITCH),
+        mgrChY: round2(channelTop + (2 * i + 1) * ORG_MATRIX_LANE_PITCH),
+        laneX: round2(canvasRight + ORG_MATRIX_GUTTER_GAP + laneOf.get(r.id) * ORG_MATRIX_LANE_PITCH),
         repEscX: 0,
         mgrEscX: 0
       };
@@ -640,14 +696,14 @@ function computeOrgChartLayout(input, opts = {}) {
         else if (v.side === -1 && bRight < v.escCol - VERT_EPS) band = Math.min(band, v.escCol - bRight);
       }
       let lane = 0;
-      let candidate = round(v.escCol);
+      let candidate = round2(v.escCol);
       while (placed.some((p) => Math.abs(p.x - candidate) < VERT_EPS && yOverlap(p.lo, p.hi, v.lo, v.hi))) {
         lane += 1;
-        candidate = round(v.escCol + v.side * lane * ORG_MATRIX_ESCAPE_STEP);
+        candidate = round2(v.escCol + v.side * lane * ORG_MATRIX_ESCAPE_STEP);
       }
       if (lane > 0 && lane * ORG_MATRIX_ESCAPE_STEP >= band - VERT_EPS) {
         throw new Error(
-          `org-chart: escape-column-overflow \u2014 escape vertical nudged ${lane * ORG_MATRIX_ESCAPE_STEP}px from its base column exceeds the ${round(band)}px box-free band`
+          `org-chart: escape-column-overflow \u2014 escape vertical nudged ${lane * ORG_MATRIX_ESCAPE_STEP}px from its base column exceeds the ${round2(band)}px box-free band`
         );
       }
       placed.push({ x: candidate, lo: v.lo, hi: v.hi });
@@ -676,7 +732,8 @@ function computeOrgChartLayout(input, opts = {}) {
           // → into the manager box's edge
         ]),
         dashed: true,
-        title: reportTitle("dotted", g.r.label)
+        title: reportTitle("dotted", g.r.label),
+        annotated: g.r.annotated ?? false
       });
     }
   }
@@ -692,25 +749,6 @@ function collapseDegenerate(points) {
   }
   return out;
 }
-function allocateLanes(items) {
-  const lanes = [];
-  for (const it of items) {
-    let chosen = -1;
-    for (let l = 0; l < lanes.length; l++) {
-      if (lanes[l].every((o) => it.hi <= o.lo || it.lo >= o.hi)) {
-        chosen = l;
-        break;
-      }
-    }
-    if (chosen === -1) {
-      chosen = lanes.length;
-      lanes.push([]);
-    }
-    lanes[chosen].push({ lo: it.lo, hi: it.hi });
-    it.set(chosen);
-  }
-  return lanes.length;
-}
 
 // src/org-chart/svg.ts
 var GLYPH_STROKE = "#52525b";
@@ -719,25 +757,25 @@ var EDGE_INK = "#71717a";
 var GLYPH_ATTRS = `fill="transparent" stroke="${GLYPH_STROKE}" stroke-width="2"`;
 var VACANT_DASH = `stroke-dasharray="6,4"`;
 var DOTTED = EDGE_STROKE.distant;
-var round2 = (n) => Math.round(n * 100) / 100;
+var round3 = (n) => Math.round(n * 100) / 100;
 var ORG_BOX_PAD_Y2 = 9;
 function boxSvg(n) {
-  const left = round2(n.cx - n.boxW / 2);
+  const left = round3(n.cx - n.boxW / 2);
   const pieces = [`<title>${xmlEscape(n.title)}</title>`];
   if (n.style === "dashed") {
     pieces.push(
       `<rect x="${left}" y="${n.top}" width="${n.boxW}" height="${n.boxH}" rx="2" ${GLYPH_ATTRS} ${VACANT_DASH}/>`
     );
-    const ix = round2(left + 3);
-    const iy = round2(n.top + 3);
-    const iw = round2(n.boxW - 6);
-    const ih = round2(n.boxH - 6);
+    const ix = round3(left + 3);
+    const iy = round3(n.top + 3);
+    const iw = round3(n.boxW - 6);
+    const ih = round3(n.boxH - 6);
     pieces.push(`<rect x="${ix}" y="${iy}" width="${iw}" height="${ih}" rx="2" ${GLYPH_ATTRS} ${VACANT_DASH}/>`);
   } else {
     pieces.push(`<rect x="${left}" y="${n.top}" width="${n.boxW}" height="${n.boxH}" rx="2" ${GLYPH_ATTRS}/>`);
   }
   let lineIndex = 0;
-  const firstBaseline = (i) => round2(n.top + ORG_BOX_PAD_Y2 + ORG_LABEL_LINE_H / 2 + i * ORG_LABEL_LINE_H + ORG_LABEL_FONT * 0.32);
+  const firstBaseline = (i) => round3(n.top + ORG_BOX_PAD_Y2 + ORG_LABEL_LINE_H / 2 + i * ORG_LABEL_LINE_H + ORG_LABEL_FONT * 0.32);
   const textBlock = (lines, font) => {
     if (lines.length === 0) return "";
     const tspans = lines.map((line, i) => `<tspan x="${n.cx}" y="${firstBaseline(lineIndex + i)}">${xmlEscape(line)}</tspan>`).join("");
@@ -748,43 +786,45 @@ function boxSvg(n) {
   pieces.push(textBlock(n.titleLines, ORG_TITLE_FONT));
   pieces.push(textBlock(n.subtitleLines, ORG_TITLE_FONT));
   if (n.vacantMarker !== null) pieces.push(textBlock([n.vacantMarker], ORG_TITLE_FONT));
+  if (n.annotated) pieces.push(annotationDot(round3(n.cx + n.boxW / 2) - 4, n.top + 4));
   return `<g data-node-id="p${n.positionId}">${pieces.filter((p) => p !== "").join("")}</g>`;
 }
 function elementSvg(el) {
   const head = `<g data-edge-id="${el.edgeId}"><title>${xmlEscape(el.title)}</title>`;
+  const tick = el.annotated ? annotationTick(el.points) : "";
   if (el.dashed) {
     const dash = DOTTED.dash === null ? "" : ` stroke-dasharray="${DOTTED.dash[0]},${DOTTED.dash[1]}"`;
-    return head + `<path d="${pathData(el.points)}" fill="none" stroke="${EDGE_INK}" stroke-width="${DOTTED.width}" stroke-opacity="${DOTTED.opacity}"${dash}/></g>`;
+    return head + `<path d="${pathData(el.points)}" fill="none" stroke="${EDGE_INK}" stroke-width="${DOTTED.width}" stroke-opacity="${DOTTED.opacity}"${dash}/>${tick}</g>`;
   }
   if (el.points.length === 2) {
     const a = el.points[0];
     const b = el.points[1];
-    return head + `<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/></g>`;
+    return head + `<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/>${tick}</g>`;
   }
-  return head + `<path d="${pathData(el.points)}" fill="none" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/></g>`;
+  return head + `<path d="${pathData(el.points)}" fill="none" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/>${tick}</g>`;
 }
 var MINI_ATTRS = `fill="transparent" stroke="${GLYPH_STROKE}" stroke-width="1.5"`;
 function lineSwatch(x, y) {
-  const x1 = round2(x + 2);
-  const x2 = round2(x + LEGEND_SWATCH_W - 2);
+  const x1 = round3(x + 2);
+  const x2 = round3(x + LEGEND_SWATCH_W - 2);
   return `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/>`;
 }
 function assistantSwatch(x, y) {
-  const stemX = round2(x + LEGEND_SWATCH_W - 4);
-  const boxX = round2(x + 1);
-  return `<line x1="${stemX}" y1="${round2(y - 4)}" x2="${stemX}" y2="${y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/><line x1="${stemX}" y1="${y}" x2="${round2(boxX + 8)}" y2="${y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/><rect x="${boxX}" y="${round2(y - 3.5)}" width="8" height="7" rx="1" ${MINI_ATTRS}/>`;
+  const stemX = round3(x + LEGEND_SWATCH_W - 4);
+  const boxX = round3(x + 1);
+  return `<line x1="${stemX}" y1="${round3(y - 4)}" x2="${stemX}" y2="${y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/><line x1="${stemX}" y1="${y}" x2="${round3(boxX + 8)}" y2="${y}" stroke="${EDGE_INK}" stroke-width="1.5" stroke-opacity="0.75"/><rect x="${boxX}" y="${round3(y - 3.5)}" width="8" height="7" rx="1" ${MINI_ATTRS}/>`;
 }
 function dottedSwatch(x, y) {
-  const x1 = round2(x + 2);
-  const x2 = round2(x + LEGEND_SWATCH_W - 2);
+  const x1 = round3(x + 2);
+  const x2 = round3(x + LEGEND_SWATCH_W - 2);
   const dash = DOTTED.dash === null ? "" : ` stroke-dasharray="${DOTTED.dash[0]},${DOTTED.dash[1]}"`;
   return `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${EDGE_INK}" stroke-width="${DOTTED.width}" stroke-opacity="${DOTTED.opacity}"${dash}/>`;
 }
 function vacantSwatch(x, y) {
-  const cx = round2(x + LEGEND_SWATCH_W / 2);
-  const bx = round2(cx - 8);
-  const by = round2(y - 5);
-  return `<rect x="${bx}" y="${by}" width="16" height="10" rx="1" ${MINI_ATTRS} stroke-dasharray="3,2"/><rect x="${round2(bx + 2)}" y="${round2(by + 2)}" width="12" height="6" rx="1" ${MINI_ATTRS} stroke-dasharray="3,2"/>`;
+  const cx = round3(x + LEGEND_SWATCH_W / 2);
+  const bx = round3(cx - 8);
+  const by = round3(y - 5);
+  return `<rect x="${bx}" y="${by}" width="16" height="10" rx="1" ${MINI_ATTRS} stroke-dasharray="3,2"/><rect x="${round3(bx + 2)}" y="${round3(by + 2)}" width="12" height="6" rx="1" ${MINI_ATTRS} stroke-dasharray="3,2"/>`;
 }
 function orgChartLayoutSvg(layout, opts = {}) {
   const labels = opts.labels ?? ORG_CHART_SVG_LABELS_EN;
@@ -803,6 +843,9 @@ function orgChartLayoutSvg(layout, opts = {}) {
     if (hasAssistant) entries.push({ swatch: assistantSwatch, label: labels.legend.assistant });
     if (hasDotted) entries.push({ swatch: dottedSwatch, label: labels.legend.dotted });
     if (hasVacant) entries.push({ swatch: vacantSwatch, label: labels.legend.vacant });
+    if (opts.annotationLabel !== void 0 && (layout.nodes.some((n) => n.annotated) || layout.elements.some((e) => e.annotated))) {
+      entries.push({ swatch: annotationSwatch, label: opts.annotationLabel });
+    }
     const block = legendBlock(entries, layout.height);
     if (block.svg !== "") {
       parts.push(block.svg);
@@ -823,7 +866,8 @@ function orgChartSvg(input, opts = {}) {
   });
   const svg = orgChartLayoutSvg(layout, {
     ...opts.legend === false ? { legend: false } : {},
-    ...opts.svgLabels !== void 0 ? { labels: opts.svgLabels } : {}
+    ...opts.svgLabels !== void 0 ? { labels: opts.svgLabels } : {},
+    ...opts.annotationLabel !== void 0 ? { annotationLabel: opts.annotationLabel } : {}
   });
   return { svg, layout };
 }