@cardenelabs/dragon 0.34.0 → 0.35.1

package/src/compile/flowchart.ts

@@ -1,344 +0,0 @@
-import { flowchart } from "@cardenelabs/cdl";
-import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslActor, DslDocument } from "../types";
-import { 箱の題 } from "./node-title";
-import { 縦列ごとの段を決める, 書いた縦列に置く } from "./lanes";
-import { 並べる向き } from "./direction";
-import { 測るために配置する } from "./parts";
-import { slugify } from "./slug";
-/**
- * 記法の `type: flowchart` を分かれ道の図に直す (#2513)。
- *
- * 一覧には「フローチャート」 の見本が並び、描画の library にも `flowchart()` が在り、
- * dragon の案内表にも「フローチャート」 が載っていた。 **記法だけが受理していなかった**ので、
- * 一覧で見た図を同じ名前で書けなかった。
- *
- * 縦列は役割を分ける入れ物で、箱はその中に置く。 `swimlane` は登場人物 1 人が縦列 1 本に
- * なるが、こちらは **登場人物が箱で、その `lane:` が役割の名前になる**。 分かれ道の図は
- * 1 人の役割の中に複数の箱 (申請を出す / 直して出し直す) が並ぶため。
- */
-
-/**
- * 記法の箱の種類を、描画側の分かれ道の箱の形へ読み替える。
- *
- * 描画側が受ける形は 5 つ (`process` / `decision` / `start` / `end` / `loop`)。
- * 記法の側に 4 つ分の種類が在り、残る 1 つは書かない時の既定になる。
- *
- * | 記法に書く種類 | 描く形 | なぜ |
- * |---|---|---|
- * | `decision` | `decision` | 同じ名前がそのまま描画側にもある |
- * | `mark-start` | `start` | 始まりの印 |
- * | `mark-end` | `end` | 終わりの印 |
- * | `loop` | `loop` | 終わりまで繰り返す箱 (#2523) |
- * | それ以外 / 書かない | `process` | 普通の手順の箱 |
- *
- * **始まりと終わりの印は題を持たない**。 この決まりは `箱の題` が 15 図種と共有しており
- * (#1466)、 塗った丸に字を載せる場所が無いため。 題を出したい時は `title:` を書けば使われる
- * ので、黙って消える形ではない = ここで別の知らせを足さない。
- *
- * **`loop` は記法の種類として足した** (#2523)。 描画側は繰り返しを **形** としてだけ持ち、
- * 箱の種類 (`NODE_KINDS` の 98 件) には持たない。 そのまま書くと部品の名前として扱われ、
- * 「そんな部品は無い」 と言われるだけだった (実測)。
- * 記法だけが持つ種類 (`DSL_ONLY_KINDS`) に置き、ここで形へ読み替える。
- * 分かれ道の図以外で書いた時は `記法だけの種類の読み替え` が札に落とす。
- */
-const 分かれ道の箱の形 = {
-  decision: "decision",
-  "mark-start": "start",
-  "mark-end": "end",
-  loop: "loop",
-} as const;
-
-type 分かれ道の形 = "process" | "decision" | "start" | "end" | "loop";
-
-/*
- * 横向きの見本で使う印の大きさ。
- *
- * 正の見本 (`docs/design/proposal/static/流れ-*.html`) は札幅 300 に対して、菱形が
- * 248 × 148 (0.8267 × 0.4933)、始まりの丸が直径 34 (0.1133)、終わりの丸が直径 38
- * (0.1267)。 dragon の普通の札幅 380 に掛け、1 px 単位へ丸めた。
- */
-const 横向きの印の大きさ = {
-  decision: { w: 314, h: 187 },
-  "mark-start": { w: 43, h: 43 },
-  "mark-end": { w: 48, h: 48 },
-} as const;
-
-function 箱の形(actor: DslActor): 分かれ道の形 {
-  const kind = actor.kind;
-  if (kind !== undefined && kind in 分かれ道の箱の形) {
-    return 分かれ道の箱の形[kind as keyof typeof 分かれ道の箱の形];
-  }
-  return "process";
-}
-
-/**
- * 縦列の名前を書いた順に並べる。
- *
- * **`lane:` を 1 つも書かない図でも描けるようにする**。 その時は縦列 1 本に全部入れる =
- * 分かれ道そのもの (判断と枝) は縦列が無くても成立するため、役割を分けたくない人に
- * `lane:` を強制しない。
- *
- * 書いた人と書かない人が混ざった図は、書かない箱を最初の縦列へ入れる。 行き先の規則が
- * 要る形だが、`swimlane` の混在と違ってこちらは **箱が縦列そのものではない** ので、
- * 入れ先が無いと箱を 1 つも置けない。
- *
- * **箱が 1 つも無い図では縦列も作らない**。 受け皿の縦列だけを置くと、中身の無い枠が
- * 図に残る (実測 = 登場人物 0 人の図で枠が 1 本だけ描かれた)。
- */
-function 縦列の並び(doc: DslDocument): string[] {
-  const 並び: string[] = [];
-  for (const a of doc.actors) {
-    const name = a.lane;
-    if (name === undefined || name === "") continue;
-    if (!並び.includes(name)) 並び.push(name);
-  }
-  if (並び.length > 0) return 並び;
-  return doc.actors.length > 0 ? ["本流"] : [];
-}
-
-export function compileFlowchart(doc: DslDocument): CdlDiagram {
-  const lanes = 縦列の並び(doc);
-  const 既定の縦列 = lanes[0];
-  /*
-   * 補足を書いた縦列だけ、0.127.0 の見出しの object 形へ広げる。
-   *
-   * 全縦列を `{ label }` にすると、subtitle を書いていない従来の flowchart まで見出しの
-   * 配置へ切り替わる。実測では経費申請の図が幅 1743 から 1986 へ広がり、線の札と箱の
-   * clearance も変わった。欄を書かない図を変えないため、従来どおり id の文字列を渡す。
-   */
-  const 描く側の縦列 = (id: string): string | { label: string; subtitle: string } => {
-    const subtitle = doc.lanes?.[id]?.subtitle;
-    return subtitle === undefined ? id : { label: doc.lanes?.[id]?.label ?? id, subtitle };
-  };
-  const 描く側の縦列名 = (id: string): string => {
-    const lane = 描く側の縦列(id);
-    return typeof lane === "string" ? lane : lane.label;
-  };
-  /*
-   * 並べる向きを描く側へ渡す (#2524)。
-   *
-   * 記法の 縦 / 横 と描く側の綴りは 1 対 1 で対応する。 既定は 横 で、書かない図は
-   * 1 枚も並びが動かない (`既定の向き` が `topology` 以外に 横 を返す)。
-   *
-   * 縦 は縦列 1 本に全部の箱を積む形で、役割の名前は箱の上の小さな字へ移る
-   * (描く側が `承認者 · 判断` の形にする)。
-   */
-  const 縦に積む = 並べる向き("flowchart", doc) === "縦";
-
-  const fc = flowchart({
-    id: slugify(doc.title),
-    topic: doc.title,
-    lanes: lanes.map(描く側の縦列),
-    direction: 縦に積む ? "vertical" : "horizontal",
-  });
-
-  /*
-   * 箱の id は名前から作る。 **重なったら並び順を足して分ける**。
-   *
-   * `slugify` は残せる字が 1 つも無い名前に `n` を返すため、記号だけの名前 (`***` / `---`)
-   * が 2 つあると同じ id になる。 記号の位置だけが違う名前 (`A-B` と `A/B`) も同じになる。
-   * 重なると後から置いた箱が前の箱を上書きし、矢印が別の箱へ向かう。
-   */
-  const 使ったid = new Set<string>();
-  const idOf = (a: DslActor, i: number): string => {
-    const 元 = slugify(a.name);
-    if (!使ったid.has(元)) return 元;
-    let 候補 = `${元}-${i}`;
-    for (let k = i; 使ったid.has(候補); k++) 候補 = `${元}-${k + 1}`;
-    return 候補;
-  };
-  const id一覧 = new Map<string, string>();
-  /** 箱ごとに決まった id を書いた順で持つ。 決め直すと重なりの回避が二度効いて別の id になる */
-  const 決めたid: string[] = [];
-
-  doc.actors.forEach((a, i) => {
-    const id = idOf(a, i);
-    使ったid.add(id);
-    決めたid.push(id);
-    id一覧.set(a.name, id);
-    fc.node({
-      id,
-      title: 箱の題(a),
-      shape: 箱の形(a),
-      lane:
-        a.lane !== undefined && a.lane !== ""
-          ? 描く側の縦列名(a.lane)
-          : (既定の縦列 === undefined
-              ? ""
-              : 描く側の縦列名(既定の縦列)),
-      ...(a.titleFontSize !== undefined ? { titleFontSize: a.titleFontSize } : {}),
-      ...(a.markGap !== undefined ? { markGap: a.markGap } : {}),
-    });
-  });
-
-  const 描いた線: Array<{ step: (typeof doc.flow)[number]; from: string; to: string }> = [];
-  for (const s of doc.flow) {
-    const from = id一覧.get(s.from);
-    const to = id一覧.get(s.to);
-    // 箱に無い名前を指した矢印は引かない。 描画側は知らない id の位置を引けずに落ちる
-    if (from === undefined || to === undefined) continue;
-    fc.edge({
-      from,
-      to,
-      ...(s.label !== undefined && s.label !== "" ? { label: s.label } : {}),
-    });
-    描いた線.push({ step: s, from, to });
-  }
-
-  const diagram = fc.build();
-  const 箱の一覧 = new Map(diagram.nodes.map((n) => [n.id, n]));
-
-  // cdl の flowchart builder は札固有の文字サイズと印の間隔を入力から写さないため、
-  // 記法の箱と確定した node id を対応させて build 後の payload へ補う。
-  doc.actors.forEach((actor, i) => {
-    const node = 箱の一覧.get(決めたid[i] ?? "");
-    if (node === undefined) return;
-    if (actor.titleFontSize !== undefined) node.titleFontSize = actor.titleFontSize;
-    if (actor.markGap !== undefined) node.markGap = actor.markGap;
-  });
-
-  /*
-   * 横向きだけを宅配の見本と同じ形へ直す。縦向きは役割と形の小見出しを箱の上へ移すことが
-   * 向きの読み分けになっているため、描画側が組み立てた従来の形を保つ。
-   */
-  if (!縦に積む) {
-    doc.actors.forEach((actor, i) => {
-      const node = 箱の一覧.get(決めたid[i] ?? "");
-      if (node === undefined) return;
-
-      if (actor.kind === "decision") {
-        node.kind = "decision";
-        delete node.eyebrow;
-        Object.assign(node, 横向きの印の大きさ.decision);
-        return;
-      }
-      if ((actor.kind === "mark-start" || actor.kind === "mark-end") && node.title === "") {
-        node.kind = actor.kind;
-        delete node.eyebrow;
-        Object.assign(node, 横向きの印の大きさ[actor.kind]);
-        return;
-      }
-      if (actor.kind !== "loop" && actor.kind !== "mark-start" && actor.kind !== "mark-end") {
-        delete node.eyebrow;
-      }
-    });
-  }
-
-  /*
-   * 形に読み替えなかった種類は、箱の見た目としてそのまま渡す。
-   *
-   * 描画側は形を箱の種類で表す (判断 = `card`、 印 = `event`、 手順 = `function`)。 その 3 つに
-   * 当たらない種類 (`database` / `service` 等) を捨てると、書いた人には手順の箱しか出ない。
-   * 残る図種では同じ書き方が箱の見た目になるので、ここだけ黙って消える形になっていた。
-   *
-   * **書いた箱だけを渡す** (`kindWritten`)。 記法は種類を書かない箱にも既定の `actor` を
-   * 入れるため、見ずに渡すと手順の箱が 1 つ残らず既定で塗り潰される (実測 = 7 箱の図で
-   * 手順の箱 4 つが描画側の `function` から `actor` へ変わった)。
-   */
-  doc.actors.forEach((a, i) => {
-    if (a.kindWritten !== true) return;
-    if (a.kind === undefined || a.kind in 分かれ道の箱の形) return;
-    const node = 箱の一覧.get(決めたid[i] ?? "");
-    if (node !== undefined) node.kind = a.kind as typeof node.kind;
-  });
-
-  /*
-   * 横向きでは、同じ段にある菱形の高さを普通の札へ写さない。
-   *
-   * 描く側は `h` を書いた箱だけを段の最大高へ伸ばさない。種類ごとの高さをここへ写す時は、
-   * 箱を一時的に別々の段へ置いて描く側自身に中身から高さを出させる。固定値を写すと、
-   * `database` など書いた種類や長い題の高さが描く側の変更から外れてしまうため。
-   */
-  if (!縦に積む && diagram.nodes.length > 0) {
-    const 自分の高さ = new Map(
-      測るために配置する({
-        ...diagram,
-        nodes: diagram.nodes.map((node, index) => ({ ...node, stack: index })),
-        edges: [],
-        phases: [],
-      }).nodes.map((node) => [node.id, node.h]),
-    );
-    for (const node of diagram.nodes) {
-      if (node.kind === "decision" || node.kind === "mark-start" || node.kind === "mark-end") continue;
-      const h = 自分の高さ.get(node.id);
-      if (h !== undefined) node.h = h;
-    }
-  }
-
-  /*
-   * 段は **箱を並べる図種すべてと同じ決め方** に従う (`縦列ごとの段を決める`)。
-   *
-   * 描画側は書いた順に 0 から詰めるため、書いた番号がそのまま消える。 全ての箱に縦列を
-   * 書いた図でだけ効かせるのは、縦列を書かない箱の段は残る図種でも効かないため = ここだけ
-   * 効かせると、効かないと伝える知らせのほうが誤りになる。
-   *
-   * **縦に積む図では触らない** (#2524)。 描く側が縦列 1 本に 0 から順に積んだ後で段を
-   * 書き直すと、同じ縦列に同じ段の箱が 2 つ並んで描く側が落ちる
-   * (`lane "flowchart-main" の stack=0 に node が重複`)。
-   */
-  if (!縦に積む && 書いた縦列に置く("flowchart", doc)) {
-    const 段 = 縦列ごとの段を決める(doc.actors);
-    doc.actors.forEach((a, i) => {
-      const v = 段.get(a);
-      if (v === undefined) return;
-      const node = 箱の一覧.get(決めたid[i] ?? "");
-      if (node !== undefined) node.stack = v;
-    });
-  }
-
-  /*
-   * 同じ縦列で間に箱を挟んで上へ戻る線だけ、箱の右外を回す。
-   *
-   * 隣の段への戻りは描く側の直線が最短で、下へ進む線も従来の通り道を保つ。 `side` を書いた
-   * 線は書き手が辺を選んでいるため、自動の経路と辺を一つも足さない。線の色・点線・札などは
-   * この後の共通処理 (`applyEdgeInlineOptions`) が従来どおり書き写す。
-   */
-  const 対応済みの線 = new Set<string>();
-  描いた線.forEach(({ step, from: fromId, to: toId }) => {
-    const edge = diagram.edges.find(
-      (candidate) =>
-        !対応済みの線.has(candidate.id) && candidate.from === fromId && candidate.to === toId,
-    );
-    if (edge === undefined) return;
-    対応済みの線.add(edge.id);
-    if (step.side !== undefined) return;
-    const from = 箱の一覧.get(edge.from);
-    const to = 箱の一覧.get(edge.to);
-    if (
-      from === undefined ||
-      to === undefined ||
-      from.lane !== to.lane ||
-      from.stack === undefined ||
-      to.stack === undefined ||
-      to.stack >= from.stack
-    ) return;
-    const fromStack = from.stack;
-    const toStack = to.stack;
-    const 間に箱がある = diagram.nodes.some(
-      (node) =>
-        node.lane === from.lane &&
-        node.stack !== undefined &&
-        node.stack > toStack &&
-        node.stack < fromStack,
-    );
-    if (!間に箱がある) return;
-    edge.routing = "back-detour";
-    edge.fromSide = "right";
-    edge.toSide = "right";
-  });
-
-  /*
-   * 段を書いた図では、描画側が自分で作った段を捨てる。
-   *
-   * 描画側の `flowchart()` は「全部を一度に光らせる」 段を 1 つ必ず作る。 それが残っていると
-   * 組み立ての後段 (`injectPhasesFallback`) が「段は既に在る」 と見て、書いた `animation:` を
-   * 1 段も入れない = 書いた `focus:` が黙って消える (実測 = 3 箱の図で `focus: [あ]` を書いても
-   * 3 箱とも光った)。
-   *
-   * 捨てるのは書いた時だけ。 書いていない図では描画側の段がそのまま既定の見せ方になる。
-   */
-  if ((doc.animate?.phases.length ?? 0) > 0) diagram.phases = [];
-
-  return diagram;
-}

package/src/compile/funnel.ts

@@ -1,87 +0,0 @@
-import { diagram } from "@cardenelabs/cdl";
-import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslDocument } from "../types";
-import {
-  parseChartValue,
-  数の欄から参照できる名前,
-  参照する名前,
-  図表の大きさ,
-  図表の大きさを読む,
-} from "./chart-fields";
-
-import { 箱の題 } from "./node-title";
-import type { CompileNotice } from "./notice";
-import { slugify } from "./slug";
-import { 図の小見出し } from "./subtitle";
-/**
- * 漏斗 (`type: funnel`) の組み立て (#1154)。 描画側に 1 つの箱で渡す。
- *
- * 登場人物ごとに **数** を読む (`- 訪問: "12000"`)。 段の人数なので負の数は読めない値として扱う。
- */
-export function compileFunnel(doc: DslDocument, onNotice?: (n: CompileNotice) => void): CdlDiagram {
-  const b = diagram(slugify(doc.title), { topic: doc.title, type: "funnel" });
-  const { w: W, h: H } = 図表の大きさを読む(doc, 図表の大きさ.funnel);
-  b.lane("chart", { width: W + 64 });
-  const data: NonNullable<CdlDiagram["nodes"][number]["funnelData"]> = [];
-  const 読めない: string[] = [];
-  const 未宣言: string[] = [];
-  const 参照できる = 数の欄から参照できる名前(doc);
-  for (const a of doc.actors) {
-    const v = parseChartValue(a.value ?? a.subtitle);
-    // 段の数なので負に意味が無い (状態を読む欄は符号が決まらないので通す)
-    if (v === null || (typeof v === "number" && v < 0)) {
-      読めない.push(a.name);
-      continue;
-    }
-    // 数にならない参照は落とす (棒 / 折れ線 / 円と同じ扱い)
-    const 名前 = 参照する名前(v);
-    if (名前 !== null && !参照できる.has(名前)) {
-      未宣言.push(a.name);
-      continue;
-    }
-    data.push({
-      id: slugify(a.name),
-      title: 箱の題(a),
-      count: v,
-      ...(a.tone !== undefined ? { tone: a.tone } : {}),
-      ...(a.emphasis !== undefined ? { emphasis: a.emphasis } : {}),
-    });
-  }
-  if (未宣言.length > 0) {
-    const m3 = `type: funnel で数にならない値を参照した項目があります (段に載せません): ${未宣言.join(", ")}。 \`states:\` にその名前を数で書いてください`;
-    onNotice?.({ kind: "chart-value-unreadable", actor: 未宣言[0]!, line: 0, message: m3 });
-    if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${m3}`);
-  }
-  if (読めない.length > 0) {
-    const m = `type: funnel で数を読めない項目があります (段に載せません): ${読めない.join(", ")}。 \`- 訪問: "12000"\` の形で書いてください`;
-    onNotice?.({ kind: "chart-value-unreadable", actor: 読めない[0]!, line: 0, message: m });
-    if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${m}`);
-  }
-  // 矢印は描けない。 書かれていたら伝える (黙って捨てると「書いたのに効かない」 が残る)
-  if (doc.flow.length > 0) {
-    const m2 = `type: funnel では矢印を描けません (${doc.flow.length} 本を無視しました)。 関係を描くなら type: flow を使ってください`;
-    onNotice?.({
-      kind: "chart-edge-dropped",
-      actor: doc.flow[0]?.from ?? "",
-      line: doc.flow[0]?.pos?.line ?? 0,
-      message: m2,
-    });
-    if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${m2}`);
-  }
-  b.node(`${slugify(doc.title) || "funnel"}-chart`, {
-    lane: "chart",
-    stack: 0,
-    kind: "funnel-stages",
-    title: doc.title,
-    ...図の小見出し(doc),
-    w: W,
-    h: H,
-    funnelData: data,
-    ...(doc.funnelForm !== undefined ? { funnelForm: doc.funnelForm } : {}),
-    ...(doc.funnelRate !== undefined ? { funnelRate: doc.funnelRate } : {}),
-    ...(doc.chartSeriesSkipMuted !== undefined
-      ? { chartSeriesSkipMuted: doc.chartSeriesSkipMuted }
-      : {}),
-  });
-  return b.build();
-}