@diagrammo/dgmo 0.48.1 → 0.48.2

package/dist/auto.mjs

@@ -61550,20 +61550,35 @@ function renderRing(container, parsed, palette, isDark, onClickItem, exportDims)
   }
   if (inBandLabelsVisible) {
     const labelsG = svg.append("g").attr("class", "ring-labels");
+    const labelDefs = labelsG.append("defs");
+    let ringLabelSeq = 0;
     for (let i = 0; i < N; i++) {
       const layer = parsed.layers[i];
       const fill2 = layerFills[i];
       const isInnermost = i === 0;
-      const labelY = isInnermost ? cy : cy - (i + 0.5) * thickness;
-      const fittedFont = labelFont;
       const textColor = contrastText(
         fill2,
         palette.textOnFillLight,
         palette.textOnFillDark
       );
       const labelG = labelsG.append("g").attr("class", "ring-label-group").attr("data-line-number", layer.lineNumber);
-      const label = labelG.append("text").attr("class", "ring-label").attr("x", cx).attr("y", labelY).attr("dy", "0.35em").attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", fittedFont).attr("font-weight", 600).style("pointer-events", "none");
-      renderInlineText(label, layer.label, palette, fittedFont);
+      if (isInnermost) {
+        const label = labelG.append("text").attr("class", "ring-label").attr("x", cx).attr("y", cy).attr("dy", "0.35em").attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", labelFont).attr("font-weight", 600).style("pointer-events", "none");
+        renderInlineText(label, layer.label, palette, labelFont);
+        continue;
+      }
+      drawRingCurvedLabel(
+        labelG,
+        labelDefs,
+        `dgmo-ring-lbl-${ringLabelSeq++}`,
+        layer.label,
+        cx,
+        cy,
+        (i + 0.5) * thickness,
+        labelFont,
+        textColor,
+        palette
+      );
     }
   }
   if (hasAnyDescription || !inBandLabelsVisible) {
@@ -61583,6 +61598,34 @@ function renderRing(container, parsed, palette, isDark, onClickItem, exportDims)
     });
   }
 }
+function drawRingCurvedLabel(labelG, defs, pathId, text, cx, cy, rMid, labelFont, textColor, palette) {
+  const PAD = 1.18;
+  let fs = labelFont;
+  let rPath = rMid - fs * 0.32;
+  const maxLen = MAX_LABEL_ARC * rPath;
+  const wPadded = measureText(text, labelFont) * PAD;
+  if (wPadded > maxLen) {
+    fs = Math.max(LABEL_FONT_MIN2, Math.floor(labelFont * maxLen / wPadded));
+    rPath = rMid - fs * 0.32;
+  }
+  const arcLen = measureText(text, fs) * PAD;
+  const halfAngle = Math.min(arcLen / (2 * rPath), MAX_LABEL_ARC / 2);
+  const largeArc = halfAngle * 2 > Math.PI ? 1 : 0;
+  const p0x = cx - Math.sin(halfAngle) * rPath;
+  const p0y = cy - Math.cos(halfAngle) * rPath;
+  const p1x = cx + Math.sin(halfAngle) * rPath;
+  const p1y = cy - Math.cos(halfAngle) * rPath;
+  const d = `M ${p0x.toFixed(2)} ${p0y.toFixed(2)} A ${rPath.toFixed(2)} ${rPath.toFixed(2)} 0 ${largeArc} 1 ${p1x.toFixed(2)} ${p1y.toFixed(2)}`;
+  defs.append("path").attr("id", pathId).attr("d", d);
+  const label = labelG.append("text").attr("class", "ring-label").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", fs).attr("font-weight", 600).style("pointer-events", "none");
+  const textPath = label.append("textPath").attr("href", `#${pathId}`).attr("startOffset", "50%").attr("text-anchor", "middle");
+  renderInlineText(
+    textPath,
+    text,
+    palette,
+    fs
+  );
+}
 function renderRingForExport(container, parsed, palette, isDark, exportDims) {
   renderRing(container, parsed, palette, isDark, void 0, exportDims);
 }
@@ -61666,7 +61709,7 @@ function truncateWithEllipsis2(lines, cap) {
 function clamp2(x, lo, hi) {
   return Math.max(lo, Math.min(hi, x));
 }
-var TITLE_AREA_HEIGHT3, H_MARGIN_FRAC2, V_MARGIN2, RING_AREA_FRAC_NO_DESC, RING_AREA_FRAC_WITH_DESC, DESC_GAP2, DESC_ACCENT_WIDTH2, DESC_ACCENT_GAP2, BULLET_BODY_INDENT2, RING_STROKE_WIDTH, RING_STROKE_OPACITY, DESC_LINE_CAP, LABEL_FONT_MIN2, LABEL_FONT_MAX2, DESC_FONT_MIN2, DESC_FONT_MAX2;
+var TITLE_AREA_HEIGHT3, H_MARGIN_FRAC2, V_MARGIN2, RING_AREA_FRAC_NO_DESC, RING_AREA_FRAC_WITH_DESC, DESC_GAP2, DESC_ACCENT_WIDTH2, DESC_ACCENT_GAP2, BULLET_BODY_INDENT2, RING_STROKE_WIDTH, RING_STROKE_OPACITY, DESC_LINE_CAP, LABEL_FONT_MIN2, LABEL_FONT_MAX2, DESC_FONT_MIN2, DESC_FONT_MAX2, MAX_LABEL_ARC;
 var init_renderer22 = __esm({
   "src/ring/renderer.ts"() {
     "use strict";
@@ -61694,6 +61737,7 @@ var init_renderer22 = __esm({
     LABEL_FONT_MAX2 = 22;
     DESC_FONT_MIN2 = 11;
     DESC_FONT_MAX2 = 15;
+    MAX_LABEL_ARC = 1.6 * Math.PI;
   }
 });
 
@@ -69812,15 +69856,21 @@ var BLOCK_CSS = `
   opacity: 1;
 }
 
-/* === Open state: frame the whole block ===
+/* === Frame the whole block ===
  * When the source panel is open, diagram + toolbar + code get one shared
- * border so the code visibly belongs to the chart above it, not to the
- * surrounding prose. Closed blocks stay frameless. */
-.dgmo:has(> .dgmo-source-wrap[open]) {
-  border: 1px solid rgba(127, 127, 127, 0.3);
+ * border so the code visibly belongs to the chart above it. The frame box
+ * (border + padding) is RESERVED at all times \u2014 with the border transparent
+ * while closed \u2014 so opening the panel only paints the border in. It never
+ * reflows the diagram or shifts the toolbar: the SVG box and toolbar position
+ * are identical open vs closed. */
+.dgmo:has(> .dgmo-source-wrap) {
+  border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
 }
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border-color: rgba(127, 127, 127, 0.3);
+}
 
 /* === Source panel (hidden until toggled) === */
 .dgmo-source-inner {
@@ -70101,7 +70151,7 @@ var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.48.1";
+var VERSION = "0.48.2";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";

package/dist/block.css

@@ -109,15 +109,21 @@
   opacity: 1;
 }
 
-/* === Open state: frame the whole block ===
+/* === Frame the whole block ===
  * When the source panel is open, diagram + toolbar + code get one shared
- * border so the code visibly belongs to the chart above it, not to the
- * surrounding prose. Closed blocks stay frameless. */
-.dgmo:has(> .dgmo-source-wrap[open]) {
-  border: 1px solid rgba(127, 127, 127, 0.3);
+ * border so the code visibly belongs to the chart above it. The frame box
+ * (border + padding) is RESERVED at all times — with the border transparent
+ * while closed — so opening the panel only paints the border in. It never
+ * reflows the diagram or shifts the toolbar: the SVG box and toolbar position
+ * are identical open vs closed. */
+.dgmo:has(> .dgmo-source-wrap) {
+  border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
 }
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border-color: rgba(127, 127, 127, 0.3);
+}
 
 /* === Source panel (hidden until toggled) === */
 .dgmo-source-inner {

package/dist/block.js

@@ -4,7 +4,7 @@ import {
 import {
   encodeDiagramUrl,
   render
-} from "./chunk-UC7TFHUM.js";
+} from "./chunk-PZMETGLY.js";
 import "./chunk-PBAHEPLQ.js";
 import "./chunk-OJR3MQYV.js";
 import "./chunk-UWN33VNX.js";
@@ -583,15 +583,21 @@ var BLOCK_CSS = `
   opacity: 1;
 }
 
-/* === Open state: frame the whole block ===
+/* === Frame the whole block ===
  * When the source panel is open, diagram + toolbar + code get one shared
- * border so the code visibly belongs to the chart above it, not to the
- * surrounding prose. Closed blocks stay frameless. */
-.dgmo:has(> .dgmo-source-wrap[open]) {
-  border: 1px solid rgba(127, 127, 127, 0.3);
+ * border so the code visibly belongs to the chart above it. The frame box
+ * (border + padding) is RESERVED at all times \u2014 with the border transparent
+ * while closed \u2014 so opening the panel only paints the border in. It never
+ * reflows the diagram or shifts the toolbar: the SVG box and toolbar position
+ * are identical open vs closed. */
+.dgmo:has(> .dgmo-source-wrap) {
+  border: 1px solid transparent;
   border-radius: 0.6em;
   padding: 0.75em 0.75em 0.5em;
 }
+.dgmo:has(> .dgmo-source-wrap[open]) {
+  border-color: rgba(127, 127, 127, 0.3);
+}
 
 /* === Source panel (hidden until toggled) === */
 .dgmo-source-inner {

package/dist/{chunk-UC7TFHUM.js → chunk-PZMETGLY.js}

@@ -3046,7 +3046,7 @@ async function exportPyramid(ctx) {
 async function exportRing(ctx) {
   const { content, theme, palette } = ctx;
   const { parseRing } = await import("./parser-O5J4VBII.js");
-  const { renderRingForExport } = await import("./renderer-ZTR3DER3.js");
+  const { renderRingForExport } = await import("./renderer-UV6MI64M.js");
   const effectivePalette = await resolveExportPalette(theme, palette);
   const ringParsed = parseRing(content);
   if (ringParsed.error || ringParsed.layers.length === 0) return "";
@@ -3965,4 +3965,4 @@ export {
   encodeDiagramUrl,
   decodeDiagramUrl
 };
-//# sourceMappingURL=chunk-UC7TFHUM.js.map
+//# sourceMappingURL=chunk-PZMETGLY.js.map

package/dist/{chunk-A4VFQH5G.js → chunk-YGJZWZTY.js}

@@ -16,7 +16,8 @@ import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
-  CHAR_WIDTH_RATIO
+  CHAR_WIDTH_RATIO,
+  measureText
 } from "./chunk-WCT3NYCV.js";
 import {
   contrastText,
@@ -127,20 +128,35 @@ function renderRing(container, parsed, palette, isDark, onClickItem, exportDims)
   }
   if (inBandLabelsVisible) {
     const labelsG = svg.append("g").attr("class", "ring-labels");
+    const labelDefs = labelsG.append("defs");
+    let ringLabelSeq = 0;
     for (let i = 0; i < N; i++) {
       const layer = parsed.layers[i];
       const fill = layerFills[i];
       const isInnermost = i === 0;
-      const labelY = isInnermost ? cy : cy - (i + 0.5) * thickness;
-      const fittedFont = labelFont;
       const textColor = contrastText(
         fill,
         palette.textOnFillLight,
         palette.textOnFillDark
       );
       const labelG = labelsG.append("g").attr("class", "ring-label-group").attr("data-line-number", layer.lineNumber);
-      const label = labelG.append("text").attr("class", "ring-label").attr("x", cx).attr("y", labelY).attr("dy", "0.35em").attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", fittedFont).attr("font-weight", 600).style("pointer-events", "none");
-      renderInlineText(label, layer.label, palette, fittedFont);
+      if (isInnermost) {
+        const label = labelG.append("text").attr("class", "ring-label").attr("x", cx).attr("y", cy).attr("dy", "0.35em").attr("text-anchor", "middle").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", labelFont).attr("font-weight", 600).style("pointer-events", "none");
+        renderInlineText(label, layer.label, palette, labelFont);
+        continue;
+      }
+      drawRingCurvedLabel(
+        labelG,
+        labelDefs,
+        `dgmo-ring-lbl-${ringLabelSeq++}`,
+        layer.label,
+        cx,
+        cy,
+        (i + 0.5) * thickness,
+        labelFont,
+        textColor,
+        palette
+      );
     }
   }
   if (hasAnyDescription || !inBandLabelsVisible) {
@@ -160,6 +176,35 @@ function renderRing(container, parsed, palette, isDark, onClickItem, exportDims)
     });
   }
 }
+var MAX_LABEL_ARC = 1.6 * Math.PI;
+function drawRingCurvedLabel(labelG, defs, pathId, text, cx, cy, rMid, labelFont, textColor, palette) {
+  const PAD = 1.18;
+  let fs = labelFont;
+  let rPath = rMid - fs * 0.32;
+  const maxLen = MAX_LABEL_ARC * rPath;
+  const wPadded = measureText(text, labelFont) * PAD;
+  if (wPadded > maxLen) {
+    fs = Math.max(LABEL_FONT_MIN, Math.floor(labelFont * maxLen / wPadded));
+    rPath = rMid - fs * 0.32;
+  }
+  const arcLen = measureText(text, fs) * PAD;
+  const halfAngle = Math.min(arcLen / (2 * rPath), MAX_LABEL_ARC / 2);
+  const largeArc = halfAngle * 2 > Math.PI ? 1 : 0;
+  const p0x = cx - Math.sin(halfAngle) * rPath;
+  const p0y = cy - Math.cos(halfAngle) * rPath;
+  const p1x = cx + Math.sin(halfAngle) * rPath;
+  const p1y = cy - Math.cos(halfAngle) * rPath;
+  const d = `M ${p0x.toFixed(2)} ${p0y.toFixed(2)} A ${rPath.toFixed(2)} ${rPath.toFixed(2)} 0 ${largeArc} 1 ${p1x.toFixed(2)} ${p1y.toFixed(2)}`;
+  defs.append("path").attr("id", pathId).attr("d", d);
+  const label = labelG.append("text").attr("class", "ring-label").attr("fill", textColor).attr("font-family", FONT_FAMILY).attr("font-size", fs).attr("font-weight", 600).style("pointer-events", "none");
+  const textPath = label.append("textPath").attr("href", `#${pathId}`).attr("startOffset", "50%").attr("text-anchor", "middle");
+  renderInlineText(
+    textPath,
+    text,
+    palette,
+    fs
+  );
+}
 function renderRingForExport(container, parsed, palette, isDark, exportDims) {
   renderRing(container, parsed, palette, isDark, void 0, exportDims);
 }
@@ -248,4 +293,4 @@ export {
   renderRing,
   renderRingForExport
 };
-//# sourceMappingURL=chunk-A4VFQH5G.js.map
+//# sourceMappingURL=chunk-YGJZWZTY.js.map