@cardenelabs/dragon 0.35.0 → 0.36.0

package/src/render/svg.ts

@@ -16,7 +16,7 @@ import { readDiagram } from "../version";
 import type { Diagram, ViewMode } from "../schema";
 import { buildTimeline, type Span, type Timeline } from "../timeline";
 import type { NotationLang } from "../words";
-import { action, badge, band, card, carrier, type Ctx, cs, edge, esc, type FieldChange, label, lifeline, strip, type SubChange } from "./parts";
+import { action, badge, band, card, carrier, type Ctx, cs, edge, esc, type FieldChange, headCard, label, lifeline, strip, type SubChange } from "./parts";
 import { Motion } from "./motion";
 
 export interface RenderOptions {
@@ -96,6 +96,7 @@ const 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)}",
@@ -189,6 +190,8 @@ function fieldChanges(diagram: Diagram, timeline: Timeline, layout: Layout): Map
 export interface FollowFrame {
   /** 枠の幅 (px)。寄って追う窓はこの幅で、字を原寸で見せる */
   width: number;
+  /** 枠の中で見える高さ (px)。渡すと、窓と全体図をこの高さに収め (#3047)、窓をこの高さまで伸ばす (#3053)。枠の高さが図で伸びる置き場では渡さない */
+  height?: number;
   /** 隅の全体図の札の言葉。渡し忘れを型の検査で止めるため、省けない欄にする */
   lang: NotationLang;
 }
@@ -233,7 +236,9 @@ export function drawSvg(diagram: Diagram, layout: Layout, timeline: Timeline, pa
 
   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 };
+  // 寄って追う時系列図は、頭の箱を窓の上端に貼る頭の列にも描く (#3118)。頭の列の箱はアイコンを外した 2 段 (#3120)。止めて見せる図では描かない
+  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"}">` +
@@ -241,8 +246,37 @@ export function drawSvg(diagram: Diagram, layout: Layout, timeline: Timeline, pa
   );
 }
 
+/** 四角を全部囲む四角。 */
+function union(rects: Rect[]): Rect {
+  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: Layout, diagram: Diagram, step: number): Rect | undefined {
+  const rects = focusParts(layout, diagram, step);
+  return rects.length === 0 ? undefined : union(rects);
+}
+
+/**
+ * 番号の丸が窓から外れる段で、窓に入れる所 (#3046)。
+ * 丸とその周りを起点に、丸に近い動く物から順に、窓 (`vw` × `vh`) に収まる間だけ囲む。収まらない物は飛ばして次を見る
+ */
+function badgeFocus(badge: { x: number; y: number }, parts: Rect[], vw: number, vh: number): Rect {
+  const room = LOOK.badge.r + LOOK.follow.badgeRoom;
+  const { x: bx, y: by } = badge;
+  const away = (p: Rect): number => 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: Rect = { 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;
+}
+
+/** 段で動く物を 1 つずつ。 */
+function focusParts(layout: Layout, diagram: Diagram, step: number): Rect[] {
   const rects: Rect[] = [];
   for (const e of layout.edges.filter((x) => x.step === step)) {
     const xs = e.points.map((p) => p[0]);
@@ -258,26 +292,74 @@ function focusOf(layout: Layout, diagram: Diagram, step: number): Rect | undefin
       if (box && (layout.kind === "architecture" || event.type === "swap")) rects.push(box);
     }
   }
-  if (rects.length === 0) return undefined;
-  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: Layout, timeline: Timeline, diagram: Diagram, m: Motion, id: string, content: string, follow: FollowFrame): { body: string; w: number; h: number } {
+/**
+ * 寄って追う窓。段ごとに動く所へ寄り、窓の外の全体図に今見ている所の枠を同じ動きで出す。
+ * 全体図は窓に重ねると今動く線や箱を覆うので、窓の外に置く (#3042)。
+ * 縦長の全体図は窓の右に列を取り、横長の全体図は窓の下に置く。失う窓の幅か図の高さの小さい側を選ぶ。
+ * 枠の中で見える高さを渡された時は、窓と全体図がその高さに入るまで窓を低くする (#3047)。
+ * 枠が余る時は窓を広げ、図の原寸の幅と、見える高さか図の高さまで使う。全体図は今の大きさのまま置く (#3053)。
+ * 枠の幅が `LOOK.follow.narrow` より狭い時は、縦長の全体図を出さずに窓へ枠の幅の全部を渡す (#3055)。
+ * 段で動く物を全部囲んだ所の真ん中に寄せると今の段の番号の丸が窓から外れる段では、丸に近い動く物から窓に収まるだけ囲んだ所へ寄せる (#3046)。
+ * 時系列図は頭の箱 `heads` を窓の上端の頭の列に貼り、窓が横に動く時だけ一緒に動かす。頭の箱は図の上端に在り、線を追う窓からは外れるため。
+ * 窓は頭の列の下の残りの高さで動く物を真ん中に見せる (#3118)。
+ * 頭の列の箱はアイコンを外した 2 段にして低く貼り、線は図の頭の箱の下から見せ始める (#3120)。
+ */
+function followView(layout: Layout, timeline: Timeline, diagram: Diagram, m: Motion, id: string, content: string, follow: FollowFrame, heads: string): { body: string; w: number; h: number } {
   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;
+  /** 窓の高さ `vh` の時の全体図の寸法。全体図は窓の高さで縮むので、窓を低くしたら測り直す */
+  const sized = (vh: number) => {
+    // 全体図の寸法は枠の幅と窓の高さで決め、置き場所に依らない
+    const mw = Math.min(M.w, full * 0.4, ((vh * 0.4) / layout.height) * layout.width);
+    const k = mw / layout.width;
+    const mh = layout.height * k;
+    // 地の幅は図の縦横の比で決まるので、縦に長い図では札より狭くなる。その時は地を札の幅まで広げ、図は広げた地の真ん中に置く
+    const bw = Math.max(mw, Math.ceil(textWidth(title, TYPE.miniTitle)));
+    // 縦横の比は窓の高さに依らないので、低くしても全体図の置き場所は変わらない
+    return { vh, mw, k, mh, bw, bgW: bw + M.pad * 2, bgH: mh + M.pad * 2 + M.title, beside: mh > mw };
+  };
+  const natural = sized(Math.min(layout.height, Math.max(F.minH, full * F.aspect)));
+  // 携帯の幅では縦長の全体図の列が枠の幅の 3 割を取り、窓が図の横の 3 割ほどしか見せない。その時は全体図を出さない。
+  // 横長の全体図は窓の下に出して幅を取らないので、狭い枠でも出す
+  const bare = natural.beside && frameWidth < F.narrow;
+  // 窓の右の全体図は窓の高さの中に収まり、窓の下の全体図は窓の高さに足される
+  const room = follow.height === undefined ? 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: number): number => Math.min(layout.width - vw / 2, Math.max(vw / 2, x));
-  const clampY = (y: number): number => Math.min(layout.height - vh / 2, Math.max(vh / 2, y));
+  // 時系列図は窓の上端に頭の列を貼るので、動く物は頭の列の下の残りの高さ `below` に見せる (#3118)。
+  // 線は図の頭の箱の下 `top` から見せ始め、図の頭の箱は頭の列の下か窓の上に隠す (#3120)
+  const top = heads === "" ? 0 : Math.max(...layout.boxes.map((b) => b.y + b.h)) + F.headRoom;
+  const strip = heads === "" ? 0 : F.head.pad * 2 + F.head.h;
+  const below = vh - strip;
+  /** 頭の列の下の残りの窓の真ん中の高さを、図の頭の箱の下と図の下端で止める */
+  const clampY = (y: number): number => Math.min(layout.height - below / 2, Math.max(top + below / 2, y));
+  const r = LOOK.badge.r;
   let prev: [number, number] = [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 at: [number, number] = [clampX(prev[0]), clampY(prev[1])];
+    // 動く物を全部囲んだ所が窓より大きいと、その端に在る番号の丸が窓から外れる。その段だけ丸の近くへ寄せ直す (#3046)
+    const b = layout.badges.find((x) => x.step === s);
+    if (!b || (Math.abs(b.x - at[0]) <= vw / 2 - r && Math.abs(b.y - at[1]) <= below / 2 - r)) return at;
+    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])] as [number, number];
   });
+  const centers = middles.map(([x, y]): [number, number] => [x, y - strip / 2]);
   const c0 = centers[0] as [number, number];
   const cam: [number, number, number, number?, string?][] = [
     [0, c0[0], c0[1]],
@@ -293,29 +375,42 @@ function followView(layout: Layout, timeline: Timeline, diagram: Diagram, m: Mot
   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 my = bgY + M.pad + M.title;
+  /**
+   * 全体図の地と札と、今見ている所の枠。窓と同じ動きで枠を動かす。
+   * 時系列図の枠は頭の列の下の線を見せる所だけを囲む。頭の箱は頭の列に常に出ているため (#3122)
+   */
+  const overview = (): { clip: string; body: string } => {
+    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]));
+    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"${strip === 0 ? "" : ` y="${strip * k}"`} width="${vw * k}" height="${(vh - strip) * k}" rx="2" style="${vp}"/></g>`,
+    };
+  };
+  const mini = bare ? { clip: "", body: "" } : overview();
+  // 頭の列は窓の中身の上に重ね、窓と同じ時刻と緩急で横にだけ動かす (#3118)
+  const head =
+    strip === 0
+      ? ""
+      : `<g class="dg-hd"><rect class="dg-hd-bg" width="${vw}" height="${strip}"/><line class="dg-sep" x1="0" y1="${strip}" x2="${vw}" y2="${strip}"/>` +
+        `<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><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 };
+    `<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 };
 }
 
 /** 原本の JSON から図を描く。原本が形に合わない時は、誤りの場所を添えて断る。 */

package/src/schema.ts

@@ -15,7 +15,7 @@ import validate from "./schemas/validate-diagram.js";
 import type { NotationLang } from "./words";
 
 export type Color = "blue" | "amber" | "green" | "violet" | "rose" | "slate" | "coin";
-/** 色の役の一覧。記法の `[色 …]` で書ける値と、誤りの文に並べる値 */
+/** 色の役の一覧。記法の `color:` に書ける値と、誤りの文に並べる値 */
 export const COLORS: readonly Color[] = ["blue", "amber", "green", "violet", "rose", "slate", "coin"];
 
 export interface Region {

package/src/tokenize.ts

@@ -1,28 +1,31 @@
 /**
  * 記法を 1 行ずつに切る。
  *
- * 空行とコメントの行 (`//` で始まる行) は捨てる。行の頭と終わりの空白は意味を持たないので落とし、
+ * 空行とコメントの行 (`//` で始まる行) も捨てずに返す。`say` の下に字下げして続けた本文では、
+ * 空行も `//` で始まる行も本文の字になるため、捨てるかは読む側が行の場所で決める (#3137)。
+ * 行の頭と終わりの空白は落とし、頭の空白の字の数を `indent` に残す。
  * 誤りを示すために元の行の番号と、残した字が始まる列を持たせる。
  * 行と列は 1 から数え、列は字の数で数える (UTF-16 の単位では数えない)。
  */
 export interface SourceLine {
   line: number;
   column: number;
+  /** 行の頭の空白の字の数。`say` の続きの行を見分ける */
+  indent: number;
   text: string;
 }
 
+/** 空行かコメントの行 */
+export const isBlankOrComment = (source: SourceLine): boolean => source.text === "" || source.text.startsWith("//");
+
 /** `text` の `index` 番目 (UTF-16 の位置) にある字が、行の何列目かを返す。 */
 export function columnOf(source: SourceLine, index: number): number {
   return source.column + Array.from(source.text.slice(0, index)).length;
 }
 
 export function tokenize(notation: string): SourceLine[] {
-  const lines: SourceLine[] = [];
-  notation.split(/\r?\n/).forEach((raw, index) => {
-    const text = raw.trim();
-    if (text === "" || text.startsWith("//")) return;
-    const lead = raw.length - raw.trimStart().length;
-    lines.push({ line: index + 1, column: Array.from(raw.slice(0, lead)).length + 1, text });
+  return notation.split(/\r?\n/).map((raw, index) => {
+    const indent = Array.from(raw.slice(0, raw.length - raw.trimStart().length)).length;
+    return { line: index + 1, column: indent + 1, indent, text: raw.trim() };
   });
-  return lines;
 }

package/src/view.ts

@@ -3,14 +3,17 @@
  *
  * 全体を枠の幅へ収めた時の箱の名前の字が 10.5px 以上なら、全体を止めて中だけ動かす (`fixed`)。
  * 下回るなら、動く所へ寄って追い、隅の全体図で今どこかを示す (`follow`)。
+ * 枠の高さを渡すと、全体を枠の幅と高さの両方へ収めた時の字で選ぶ (#3047)。高さの決まった置き場で、縦に長い図を縮めすぎないため。
  * 書き手が原本の `view` で決めた時は、字の大きさに関わらずそれに従う。
  */
 import { READABLE_PX, TYPE } from "./look/values";
 import type { Rendered } from "./render/svg";
 import type { ViewMode } from "./schema";
 
-export function chooseView(rendered: Pick<Rendered, "layout" | "view">, frameWidth: number): { mode: ViewMode; textPx: number } {
-  const textPx = (Math.max(0, frameWidth) / rendered.layout.width) * TYPE.boxName.size;
+export function chooseView(rendered: Pick<Rendered, "layout" | "view">, frameWidth: number, frameHeight?: number): { mode: ViewMode; textPx: number } {
+  const byWidth = Math.max(0, frameWidth) / rendered.layout.width;
+  const scale = frameHeight === undefined ? byWidth : Math.min(byWidth, Math.max(0, frameHeight) / rendered.layout.height);
+  const textPx = scale * TYPE.boxName.size;
   if (rendered.view) return { mode: rendered.view, textPx };
   return { mode: textPx >= READABLE_PX ? "fixed" : "follow", textPx };
 }

package/src/words.ts

@@ -1,79 +1,53 @@
 /**
- * 記法の語。役割ごとに日本語と英語の語を組で持つ (#2997)。
+ * dragon記法の語 (#3137)。
  *
- * 英語の語は原本の JSON が使う名前に揃え、記法と JSON で覚える語を 1 組にする。
- * 1 つの file の言葉は最初の行の図の種類の語で決まり、読む仕組みと書き戻す仕組みは
- * その言葉の語だけをこの表から引く。
+ * 行の種類は行の頭の英語の語で決まり、属性は `[<鍵>: <値>]` で書く。
+ * 語は英語だけで、原本の JSON が使う名前に揃え、記法と JSON で覚える語を 1 組にする。
  *
- * 型が組の欠けを止める。原本の JSON の値 (図の種類、運ぶ物、見せ方、名前の側) に語が無い時と、
- * どちらかの言葉の語が無い役割がある時は、型の検査が落ちる。
+ * 言葉の型 (`NotationLang`) は、誤りの文と図の中の字の言葉を選ぶために持つ。
+ * 語が英語だけなので、記法の file から言葉は決めず、呼ぶ側が渡す。
+ *
+ * 型が欠けを止める。原本の JSON の値 (図の種類、運ぶ物、見せ方、名前の側) に語が無い時は、型の検査が落ちる。
  */
 import type { Carry, Diagram, LabelSide, ViewMode } from "./schema";
 
 export type NotationLang = "ja" | "en";
 
-type Pair = Readonly<Record<NotationLang, string>>;
-
-export const WORDS = {
-  /** 最初の行の図の種類 */
-  kind: { sequence: { ja: "時系列図", en: "sequence" }, architecture: { ja: "構成図", en: "architecture" } } satisfies Record<Diagram["kind"], Pair>,
-  /** 段の見出しより前の行の頭 */
-  head: {
-    region: { ja: "区画", en: "region" },
-    strip: { ja: "帯", en: "strip" },
-    view: { ja: "見せ方", en: "view" },
-  } satisfies Record<string, Pair>,
-  /** 行の終わりの `[<鍵> <値>]` の鍵 */
-  attr: {
-    color: { ja: "色", en: "color" },
-    icon: { ja: "印", en: "icon" },
-    region: { ja: "区画", en: "region" },
-    label: { ja: "名前", en: "label" },
-  } satisfies Record<string, Pair>,
-  /** 線の上を走る物 */
-  carry: {
-    envelope: { ja: "封筒", en: "envelope" },
-    tag: { ja: "札", en: "tag" },
-    coin: { ja: "硬貨", en: "coin" },
-    none: { ja: "なし", en: "none" },
-  } satisfies Record<Carry["kind"], Pair>,
-  /** 見せ方の値 */
-  view: { fixed: { ja: "止める", en: "fixed" }, follow: { ja: "寄る", en: "follow" } } satisfies Record<ViewMode, Pair>,
-  /** 線の名前を置く側 */
-  side: {
-    above: { ja: "上", en: "above" },
-    below: { ja: "下", en: "below" },
-    left: { ja: "左", en: "left" },
-    right: { ja: "右", en: "right" },
-  } satisfies Record<LabelSide, Pair>,
-} as const;
+const keys = <K extends string>(table: Record<K, true>): K[] => Object.keys(table) as K[];
 
-export type WordGroup = keyof typeof WORDS;
+/** 図の種類。最初の行の頭の語 */
+export const KINDS = keys<Diagram["kind"]>({ sequence: true, architecture: true });
 
-/** `group` の役割の `value` を、`lang` の言葉の語にする */
-export function wordOf<G extends WordGroup>(group: G, value: keyof (typeof WORDS)[G], lang: NotationLang): string {
-  return ((WORDS[group] as Record<string, Pair>)[value as string] as Pair)[lang];
-}
+/** 最初の行より後の行の頭の語。線の行だけは箱の名札から始まる */
+export const HEADS = ["group", "end", "box", "strip", "step", "say", "code", "act", "note", "set"] as const;
+type Head = (typeof HEADS)[number];
 
-/** `lang` の言葉の語 `word` が、`group` のどの値を指すか。語でなければ `undefined` */
-export function valueOf<G extends WordGroup>(group: G, word: string, lang: NotationLang): keyof (typeof WORDS)[G] | undefined {
-  const found = Object.entries(WORDS[group] as Record<string, Pair>).find(([, pair]) => pair[lang] === word);
-  return found?.[0] as keyof (typeof WORDS)[G] | undefined;
-}
+/** 箱と区画の名札の後ろに、見せる名前を続ける語 (`box <名札> as <名前>`) */
+export const AS = "as";
 
-export const otherLang = (lang: NotationLang): NotationLang => (lang === "ja" ? "en" : "ja");
+/** 行ごとに書ける属性の鍵 */
+export const ATTRS = {
+  diagram: ["view"],
+  group: ["note", "color", "icon"],
+  box: ["note", "color", "icon"],
+  edge: ["carry", "tag", "side"],
+  set: ["tag"],
+} as const;
 
-/** 記法の最初の行 (空行とコメントの行を除く) の図の種類の語から、言葉を決める。決まらなければ `undefined` */
-export function languageOf(headLine: string): NotationLang | undefined {
-  const first = headLine.trim().split(/\s+/)[0] ?? "";
-  return (["ja", "en"] as const).find((lang) => valueOf("kind", first, lang) !== undefined);
-}
+/** `carry` に書ける運ぶ物。封筒は書かない時、札は `tag` で書く */
+export const CARRIES = keys<Exclude<Carry["kind"], "envelope" | "tag">>({ coin: true, none: true });
+export const VIEWS = keys<ViewMode>({ fixed: true, follow: true });
+export const SIDES = keys<LabelSide>({ above: true, below: true, left: true, right: true });
 
-/** 記法の言葉。最初の行の図の種類の語で決まり、決まらなければ `undefined` */
-export function notationLanguage(notation: string): NotationLang | undefined {
-  const head = notation
-    .split(/\r?\n/)
-    .map((line) => line.trim())
-    .find((line) => line !== "" && !line.startsWith("//"));
-  return head === undefined ? undefined : languageOf(head);
-}
+/**
+ * 今の形の行 (#2997 まで) が、新しい形のどの行に当たるか。誤りの文で新しい行の形を示すために引く。
+ * 鍵は今の形の行の頭の語で、記号 (`#` など) で始まる行と、名札の後ろに `=` や「」が来る行は読む側が見分ける。
+ */
+export const OLD_HEADS = {
+  時系列図: "sequence",
+  構成図: "architecture",
+  区画: "group",
+  見せ方: "view",
+  region: "group",
+  view: "view",
+} as const satisfies Record<string, Diagram["kind"] | Head | "view">;