@cardenelabs/dragon 0.35.0 → 0.36.0

package/dist/export.cjs

@@ -288,8 +288,16 @@ var LOOK = {
   stroke: { hair: 1, edge: 1.7, edgeOn: 2.25, arrow: 1.5, flow: 1.3, halo: 7, on: 1.75, glyph: 2, lifeline: 1.2, envelope: 1.5, badgeRing: 1.5 },
   shadow: { near: 0.8, far: 4, nearY: 1, farY: 3 },
   mini: { w: 168, pad: 8, title: 14, inset: 12, radius: 10 },
-  /** 寄って追う見せ方の窓の高さの、幅に対する割合と下限 */
-  follow: { aspect: 0.75, minH: 320, ease: 0.6 },
+  /**
+   * 寄って追う見せ方の窓の高さの、幅に対する割合と下限。
+   * `fitMinH` は見える高さに収める時 (#3047) の窓の高さの下限で、これより低い枠では収めずに枠の中で送る。
+   * `narrow` は縦長の全体図を出す枠の幅の下限で、これより狭い枠 (携帯の幅) では全体図を出さずに窓へ幅を渡す (#3055)。
+   * `badgeRoom` は番号の丸が窓から外れる段で窓を寄せ直す時に、丸の周りに空ける幅 (#3046)。
+   * `headRoom` は時系列図の図の頭の箱の下端から、窓に線を見せ始める所までの幅 (#3118)。
+   * `head` は時系列図の窓の上端に貼る頭の列の頭の箱で、アイコンを外した名前と下の字の 2 段 (#3120)。
+   * `pad` は頭の列の上下の余白、`h` は箱の高さ、`nameY` と `subY` は箱の上端から名前と下の字の基準線まで
+   */
+  follow: { aspect: 0.75, minH: 320, fitMinH: 160, ease: 0.6, narrow: 440, badgeRoom: 8, headRoom: 10, head: { pad: 8, h: 40, nameY: 17, subY: 31 } },
   /** 色を混ぜる割合 (%) */
   mix: { icon: 14, regionIcon: 16, regionIconEdge: 34, cap: 12, capEdge: 42, badgePast: 14, badgePastEdge: 70, mini: 62, miniBand: 16, miniBandEdge: 36, view: 6 },
   /** 字の並びの基準線を、置きたい高さの真ん中からどれだけ下げるか */
@@ -3052,20 +3060,31 @@ function band(region) {
   const mark = region.icon && ICONS[region.icon] ? `<rect class="dg-bi" x="${r1(x)}" y="${r1(y)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(region.icon, x + icon / 2, y + icon / 2, iconScale)}` : "";
   return `<g style="${cs(region.color)}"><rect class="dg-band" x="${r1(region.x + 0.5)}" y="${r1(region.y + 0.5)}" width="${r1(region.w - 1)}" height="${r1(region.h - 1)}" rx="${radius}"/>${mark}${lines}${note}</g>`;
 }
-function card(box, ctx, on, changes) {
-  const { m, sh } = ctx;
-  const { radius, icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
+function subLines(box, m, changes, y) {
   const seq = [[0, box.sub ?? "", "dg-ss"], ...changes];
-  const subs = seq.map(([t, text2, cls], k) => {
+  return seq.map(([t, text2, cls], k) => {
     const next = seq[k + 1]?.[0];
     const anim = k === 0 ? next === void 0 ? "" : m.until(next - MOTION.untilFade) : next === void 0 ? m.rise(t) : m.rise(t, next - MOTION.untilFade);
     if (text2 === "") return "";
-    return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(box.cy + subY)}" text-anchor="middle">${esc(text2)}</text></g>`;
+    return `<g${anim ? ` class="dg-a" style="${anim}"` : ""}><text class="${cls}" x="${r1(box.cx)}" y="${r1(y)}" text-anchor="middle">${esc(text2)}</text></g>`;
   }).join("");
+}
+function cardFrame(box, ctx, act, y, h) {
+  const rect = (cls, extra = "") => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(y)}" width="${r1(box.w)}" height="${h}" rx="${LOOK.box.radius}"${extra}/>`;
+  return `${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${ctx.sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}`;
+}
+function card(box, ctx, on, changes) {
+  const { icon, iconRadius, iconScale, iconY, nameY, subY } = LOOK.box;
+  const subs = subLines(box, ctx.m, changes, box.cy + subY);
   const act = on.length > 0 ? activeKf(ctx, on) : void 0;
-  const rect = (cls, extra = "") => `<rect class="${cls}" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${box.h}" rx="${radius}"${extra}/>`;
   const mark = box.icon && ICONS[box.icon] ? `<rect class="dg-ic" x="${r1(box.cx - icon / 2)}" y="${r1(box.cy + iconY - icon / 2)}" width="${icon}" height="${icon}" rx="${iconRadius}"/>${glyph(box.icon, box.cx, box.cy + iconY, iconScale)}` : "";
-  return `<g style="${cs(box.color)}">${act ? `<g class="dg-a" style="${act}">${rect("dg-halo")}</g>` : ""}${rect("dg-st", ` ${sh}`)}${act ? `<g class="dg-a" style="${act}">${rect("dg-on")}</g>` : ""}${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
+  return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, box.y, box.h)}${mark}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(box.cy + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
+}
+function headCard(box, ctx, on, changes) {
+  const { pad: pad2, h, nameY, subY } = LOOK.follow.head;
+  const subs = subLines(box, ctx.m, changes, pad2 + subY);
+  const act = on.length > 0 ? activeKf(ctx, on) : void 0;
+  return `<g style="${cs(box.color)}">${cardFrame(box, ctx, act, pad2, h)}<text class="dg-sn" x="${r1(box.cx)}" y="${r1(pad2 + nameY)}" text-anchor="middle">${esc(box.name)}</text>${subs}</g>`;
 }
 function lifeline(x, y1, y2) {
   return `<line class="dg-ll" x1="${r1(x)}" y1="${r1(y1)}" x2="${r1(x)}" y2="${r1(y2)}"/>`;
@@ -3358,6 +3377,7 @@ var PART_CSS = [
   `.dg-tg text{${font(TYPE.tag)};fill:var(--on-c)}`,
   ".dg-vp-bg{fill:var(--bg)}",
   ".dg-vp-frame{fill:none;stroke:var(--hair)}",
+  ".dg-hd-bg{fill:var(--bg)}",
   ".dg-mm-bg{fill:var(--surf);stroke:var(--hair)}",
   `.dg-mm-t{${font(TYPE.miniTitle)};fill:var(--mute)}`,
   ".dg-mm-world{fill:var(--sunk);stroke:var(--hair)}",
@@ -3471,13 +3491,34 @@ function drawSvg(diagram, layout, timeline, palette, theme, follow) {
   const content = Object.values(L).map((parts) => parts.join("")).join("");
   const { near, far, nearY, farY } = LOOK.shadow;
   const shadow = `<filter id="dg-sh-${id}" x="-20%" y="-30%" width="140%" height="180%"><feDropShadow dx="0" dy="${nearY}" stdDeviation="${near}" style="flood-color:var(--sh);flood-opacity:var(--shA)"/><feDropShadow dx="0" dy="${farY}" stdDeviation="${far}" style="flood-color:var(--sh);flood-opacity:var(--shB)"/></filter>`;
-  const view = follow ? followView(layout, timeline, diagram, m, id, content, follow) : { body: `<rect class="dg-bg" width="${layout.width}" height="${layout.height}" rx="${LOOK.region.radius}"/>${content}`, w: layout.width, h: layout.height };
+  const heads = follow && layout.kind === "sequence" ? layout.boxes.map((box) => headCard(box, ctx, on.get(box.id) ?? [], subs.get(box.id) ?? [])).join("") : "";
+  const view = follow ? followView(layout, timeline, diagram, m, id, content, follow, heads) : { body: `<rect class="dg-bg" width="${layout.width}" height="${layout.height}" rx="${LOOK.region.radius}"/>${content}`, w: layout.width, h: layout.height };
   const css = `.dg-${id}{${FONT_VARS};--T:${timeline.total}s;${paletteVars(palette, theme)}}${PART_CSS}${m.frames.join("")}`;
   return `<svg xmlns="http://www.w3.org/2000/svg" class="dg dg-${id}" viewBox="0 0 ${Math.ceil(view.w)} ${Math.ceil(view.h)}" width="${Math.ceil(view.w)}" height="${Math.ceil(view.h)}" role="img" aria-label="${esc(diagram.title)}" data-dragon="figure" data-view="${follow ? "follow" : "fixed"}"><style>${css}</style><defs>${shadow}</defs>${view.body}</svg>`;
 }
+function union(rects) {
+  const x = Math.min(...rects.map((r) => r.x));
+  const y = Math.min(...rects.map((r) => r.y));
+  return { x, y, w: Math.max(...rects.map((r) => r.x + r.w)) - x, h: Math.max(...rects.map((r) => r.y + r.h)) - y };
+}
 function focusOf(layout, diagram, step) {
+  const rects = focusParts(layout, diagram, step);
+  return rects.length === 0 ? void 0 : union(rects);
+}
+function badgeFocus(badge2, parts, vw, vh) {
+  const room = LOOK.badge.r + LOOK.follow.badgeRoom;
+  const { x: bx, y: by } = badge2;
+  const away = (p) => Math.hypot(Math.max(0, p.x - bx, bx - p.x - p.w), Math.max(0, p.y - by, by - p.y - p.h));
+  let held = { x: bx - room, y: by - room, w: room * 2, h: room * 2 };
+  for (const p of [...parts].sort((a, b) => away(a) - away(b))) {
+    const next = union([held, p]);
+    if (next.w <= vw && next.h <= vh) held = next;
+  }
+  return held;
+}
+function focusParts(layout, diagram, step) {
   const rects = [];
-  for (const e of layout.edges.filter((x2) => x2.step === step)) {
+  for (const e of layout.edges.filter((x) => x.step === step)) {
     const xs = e.points.map((p) => p[0]);
     const ys = e.points.map((p) => p[1]);
     rects.push({ x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) });
@@ -3490,24 +3531,44 @@ function focusOf(layout, diagram, step) {
       if (box && (layout.kind === "architecture" || event.type === "swap")) rects.push(box);
     }
   }
-  if (rects.length === 0) return void 0;
-  const x = Math.min(...rects.map((r) => r.x));
-  const y = Math.min(...rects.map((r) => r.y));
-  return { x, y, w: Math.max(...rects.map((r) => r.x + r.w)) - x, h: Math.max(...rects.map((r) => r.y + r.h)) - y };
+  return rects;
 }
-function followView(layout, timeline, diagram, m, id, content, follow) {
+function followView(layout, timeline, diagram, m, id, content, follow, heads) {
   const F = LOOK.follow;
   const M = LOOK.mini;
-  const vw = Math.min(layout.width, Math.max(1, follow.width));
-  const vh = Math.min(layout.height, Math.max(F.minH, vw * F.aspect));
+  const frameWidth = Math.max(1, follow.width);
+  const full = Math.min(layout.width, frameWidth);
+  const title = FIGURE_TEXT[follow.lang].overview;
+  const sized = (vh2) => {
+    const mw2 = Math.min(M.w, full * 0.4, vh2 * 0.4 / layout.height * layout.width);
+    const k2 = mw2 / layout.width;
+    const mh2 = layout.height * k2;
+    const bw2 = Math.max(mw2, Math.ceil(textWidth(title, TYPE.miniTitle)));
+    return { vh: vh2, mw: mw2, k: k2, mh: mh2, bw: bw2, bgW: bw2 + M.pad * 2, bgH: mh2 + M.pad * 2 + M.title, beside: mh2 > mw2 };
+  };
+  const natural = sized(Math.min(layout.height, Math.max(F.minH, full * F.aspect)));
+  const bare = natural.beside && frameWidth < F.narrow;
+  const room = follow.height === void 0 ? Number.POSITIVE_INFINITY : natural.beside ? follow.height : follow.height - natural.bgH - M.inset;
+  const { vh, mw, k, mh, bw, bgW, bgH, beside } = room < natural.vh ? sized(Math.max(F.fitMinH, room)) : { ...natural, vh: Number.isFinite(room) ? Math.min(layout.height, room) : natural.vh };
+  const vw = beside && !bare ? Math.min(layout.width, frameWidth - bgW - M.inset) : full;
   const clampX = (x) => Math.min(layout.width - vw / 2, Math.max(vw / 2, x));
-  const clampY = (y) => Math.min(layout.height - vh / 2, Math.max(vh / 2, y));
+  const top = heads === "" ? 0 : Math.max(...layout.boxes.map((b) => b.y + b.h)) + F.headRoom;
+  const strip2 = heads === "" ? 0 : F.head.pad * 2 + F.head.h;
+  const below = vh - strip2;
+  const clampY = (y) => Math.min(layout.height - below / 2, Math.max(top + below / 2, y));
+  const r = LOOK.badge.r;
   let prev = [layout.width / 2, layout.height / 2];
-  const centers = timeline.steps.map((_, s) => {
+  const middles = timeline.steps.map((_, s) => {
     const f = focusOf(layout, diagram, s);
     prev = f ? [f.x + f.w / 2, f.y + f.h / 2] : prev;
+    const at2 = [clampX(prev[0]), clampY(prev[1])];
+    const b = layout.badges.find((x) => x.step === s);
+    if (!b || Math.abs(b.x - at2[0]) <= vw / 2 - r && Math.abs(b.y - at2[1]) <= below / 2 - r) return at2;
+    const near = badgeFocus(b, focusParts(layout, diagram, s), vw, below);
+    prev = [near.x + near.w / 2, near.y + near.h / 2];
     return [clampX(prev[0]), clampY(prev[1])];
   });
+  const centers = middles.map(([x, y]) => [x, y - strip2 / 2]);
   const c0 = centers[0];
   const cam = [
     [0, c0[0], c0[1]],
@@ -3522,22 +3583,26 @@ function followView(layout, timeline, diagram, m, id, content, follow) {
   const cl = centers[centers.length - 1];
   cam.push([timeline.last, cl[0], cl[1], 1, EASE.inOut], [timeline.total, c0[0], c0[1]]);
   const camKf = m.move(cam.map(([t, cx, cy, s, e]) => [t, vw / 2 - cx, vh / 2 - cy, s, e]));
-  const mw = Math.min(M.w, vw * 0.4, vh * 0.4 / layout.height * layout.width);
-  const k = mw / layout.width;
-  const mh = layout.height * k;
-  const title = FIGURE_TEXT[follow.lang].overview;
-  const bw = Math.max(mw, Math.ceil(textWidth(title, TYPE.miniTitle)));
-  const bx = vw - bw - M.inset - M.pad;
+  const bgX = beside ? vw + M.inset : vw - bgW - M.inset;
+  const bgY = beside ? 0 : vh + M.inset;
+  const bx = bgX + M.pad;
   const mx = bx + (bw - mw) / 2;
-  const my = M.inset + M.pad + M.title;
-  const shapes = [
-    ...layout.regions.map((r) => `<rect class="dg-mm-band" style="${cs(r.color)}" x="${mx + r.x * k}" y="${my + r.y * k}" width="${r.w * k}" height="${r.h * k}" rx="3"/>`),
-    ...layout.boxes.map((b) => `<rect class="dg-mm-card" style="${cs(b.color)}" x="${mx + b.x * k}" y="${my + b.y * k}" width="${b.w * k}" height="${b.h * k}" rx="1.5"/>`)
-  ].join("");
-  const vp = m.move(cam.map(([t, cx, cy, , e]) => [t, mx + (cx - vw / 2) * k, my + (cy - vh / 2) * k, 1, e]));
-  const mini = `<rect class="dg-mm-bg" x="${bx - M.pad}" y="${my - M.pad - M.title}" width="${bw + M.pad * 2}" height="${mh + M.pad * 2 + M.title}" rx="${M.radius}"/><text class="dg-mm-t" x="${bx}" y="${my - M.pad + 2}">${title}</text><g clip-path="url(#dg-mm-${id})"><rect class="dg-mm-world" x="${mx}" y="${my}" width="${mw}" height="${mh}"/>${shapes}<rect class="dg-mm-vp dg-a" width="${vw * k}" height="${vh * k}" rx="2" style="${vp}"/></g>`;
-  const body = `<defs><clipPath id="dg-vp-${id}"><rect width="${vw}" height="${vh}" rx="${LOOK.region.radius}"/></clipPath><clipPath id="dg-mm-${id}"><rect x="${mx}" y="${my}" width="${mw}" height="${mh}" rx="4"/></clipPath></defs><g clip-path="url(#dg-vp-${id})"><rect class="dg-vp-bg" width="${vw}" height="${vh}"/><g class="dg-a" style="${camKf}">${content}</g></g><rect class="dg-vp-frame" x="0.5" y="0.5" width="${vw - 1}" height="${vh - 1}" rx="${LOOK.region.radius}"/>${mini}`;
-  return { body, w: vw, h: vh };
+  const my = bgY + M.pad + M.title;
+  const overview = () => {
+    const shapes = [
+      ...layout.regions.map((r3) => `<rect class="dg-mm-band" style="${cs(r3.color)}" x="${mx + r3.x * k}" y="${my + r3.y * k}" width="${r3.w * k}" height="${r3.h * k}" rx="3"/>`),
+      ...layout.boxes.map((b) => `<rect class="dg-mm-card" style="${cs(b.color)}" x="${mx + b.x * k}" y="${my + b.y * k}" width="${b.w * k}" height="${b.h * k}" rx="1.5"/>`)
+    ].join("");
+    const vp = m.move(cam.map(([t, cx, cy, , e]) => [t, mx + (cx - vw / 2) * k, my + (cy - vh / 2) * k, 1, e]));
+    return {
+      clip: `<clipPath id="dg-mm-${id}"><rect x="${mx}" y="${my}" width="${mw}" height="${mh}" rx="4"/></clipPath>`,
+      body: `<rect class="dg-mm-bg" x="${bgX}" y="${bgY}" width="${bgW}" height="${bgH}" rx="${M.radius}"/><text class="dg-mm-t" x="${bx}" y="${my - M.pad + 2}">${title}</text><g clip-path="url(#dg-mm-${id})"><rect class="dg-mm-world" x="${mx}" y="${my}" width="${mw}" height="${mh}"/>${shapes}<rect class="dg-mm-vp dg-a"${strip2 === 0 ? "" : ` y="${strip2 * k}"`} width="${vw * k}" height="${(vh - strip2) * k}" rx="2" style="${vp}"/></g>`
+    };
+  };
+  const mini = bare ? { clip: "", body: "" } : overview();
+  const head = strip2 === 0 ? "" : `<g class="dg-hd"><rect class="dg-hd-bg" width="${vw}" height="${strip2}"/><line class="dg-sep" x1="0" y1="${strip2}" x2="${vw}" y2="${strip2}"/><g class="dg-a" style="${m.move(cam.map(([t, cx, , s, e]) => [t, vw / 2 - cx, 0, s, e]))}">${heads}</g></g>`;
+  const body = `<defs><clipPath id="dg-vp-${id}"><rect width="${vw}" height="${vh}" rx="${LOOK.region.radius}"/></clipPath>${mini.clip}</defs><g clip-path="url(#dg-vp-${id})"><rect class="dg-vp-bg" width="${vw}" height="${vh}"/><g class="dg-a" style="${camKf}">${content}</g>${head}</g><rect class="dg-vp-frame" x="0.5" y="0.5" width="${vw - 1}" height="${vh - 1}" rx="${LOOK.region.radius}"/>${mini.body}`;
+  return { body, w: beside && !bare ? vw + M.inset + bgW : full, h: beside ? vh : bgY + bgH };
 }
 function renderDiagram(input, options = {}) {
   const lang = options.lang ?? "ja";
@@ -3561,8 +3626,10 @@ function renderDiagram(input, options = {}) {
 }
 
 // src/view.ts
-function chooseView(rendered, frameWidth) {
-  const textPx = Math.max(0, frameWidth) / rendered.layout.width * TYPE.boxName.size;
+function chooseView(rendered, frameWidth, frameHeight) {
+  const byWidth = Math.max(0, frameWidth) / rendered.layout.width;
+  const scale = byWidth ;
+  const textPx = scale * TYPE.boxName.size;
   if (rendered.view) return { mode: rendered.view, textPx };
   return { mode: textPx >= READABLE_PX ? "fixed" : "follow", textPx };
 }