@cardenelabs/dragon 0.34.0 → 0.35.0

package/src/compile/swimlane-marks.ts

@@ -1,87 +0,0 @@
-import { SWIMLANE_SHAPES, type DslSwimlaneShape } from "../keywords";
-import type { DslActor, DslDocument, DslStep } from "../types";
-
-const 泳法図の印 = ["decision", "mark-start", "mark-end"] as const;
-type 泳法図の印 = (typeof 泳法図の印)[number];
-
-export type 泳法図の印の描き方 = "描く" | "札" | "省く";
-
-/** 段の箱で、分かれ道を普通の箱に添えて見分ける字。 */
-export const 分かれ道の札 = "分かれ道";
-
-/** 泳法図の形と印ごとに、描画側へ渡す形を決める表。 */
-export const 泳法図の印の描き方: Record<
-  DslSwimlaneShape,
-  Record<泳法図の印, 泳法図の印の描き方>
-> = {
-  stages: {
-    decision: "札",
-    "mark-start": "省く",
-    "mark-end": "省く",
-  },
-  metro: {
-    decision: "描く",
-    "mark-start": "描く",
-    "mark-end": "描く",
-  },
-  timeline: {
-    decision: "描く",
-    "mark-start": "省く",
-    "mark-end": "描く",
-  },
-};
-
-/** 泳法図の3形で印をどう描くかを返し、それ以外の図と種類では返さない。 */
-export function 泳法図で印をどう描く(
-  doc: Pick<DslDocument, "type" | "shape">,
-  actor: Pick<DslActor, "kind">,
-): 泳法図の印の描き方 | undefined {
-  if (doc.type !== "swimlane") return undefined;
-  if (!(SWIMLANE_SHAPES as readonly string[]).includes(doc.shape ?? "")) return undefined;
-  if (!(泳法図の印 as readonly string[]).includes(actor.kind)) return undefined;
-  return 泳法図の印の描き方[doc.shape as DslSwimlaneShape][actor.kind as 泳法図の印];
-}
-
-/**
- * 省く印を本文から外し、その印へ入る線と出る線を直接結ぶ。
- *
- * 繋いだ線は入る線の行と指定を保つ。説明だけは入る線が空なら出る線から受け継ぎ、
- * 後段が元の行から色や線種を写せるようにする。
- */
-export function 省く泳法図の印を外す(doc: DslDocument): DslDocument {
-  const 省く印 = doc.actors.filter((actor) => 泳法図で印をどう描く(doc, actor) === "省く");
-  if (省く印.length === 0) return doc;
-
-  let actors = doc.actors;
-  let flow = doc.flow;
-  for (const mark of 省く印) {
-    const 出る線 = flow.filter((step) => step.from === mark.name && step.to !== mark.name);
-    const 既に在る組 = new Set(
-      flow
-        .filter((step) => step.from !== mark.name && step.to !== mark.name)
-        .map((step) => `${step.from}\u0000${step.to}`),
-    );
-    const 繋ぎ直した: DslStep[] = [];
-    for (const step of flow) {
-      if (step.from !== mark.name && step.to !== mark.name) {
-        繋ぎ直した.push(step);
-        continue;
-      }
-      if (step.to !== mark.name || step.from === mark.name) continue;
-      for (const next of 出る線) {
-        if (step.from === next.to) continue;
-        const 組 = `${step.from}\u0000${next.to}`;
-        if (既に在る組.has(組)) continue;
-        既に在る組.add(組);
-        繋ぎ直した.push({
-          ...step,
-          to: next.to,
-          label: step.label === "" ? next.label : step.label,
-        });
-      }
-    }
-    actors = actors.filter((actor) => actor !== mark);
-    flow = 繋ぎ直した;
-  }
-  return { ...doc, actors, flow };
-}

package/src/compile/swimlane.ts

@@ -1,82 +0,0 @@
-import { swimlane } from "@cardenelabs/cdl";
-import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslDocument } from "../types";
-import { compileGenericWithAnimate, 共通の組み立てへ回す } from "./generic";
-import { 描ける種別 } from "./kinds";
-import { 箱の題 } from "./node-title";
-import { slugify } from "./slug";
-import { STAGE_LANE_WIDTH } from "./stages";
-export function compileSwimlane(doc: DslDocument): CdlDiagram {
-  // 形を指定した泳法図は動き・縦列・向きの有無で経路を分けない (#2797 / #2799)。
-  // 段の箱の列と札の決め方は `compile/stages.ts` が持つ (#2831)。
-  if (doc.shape === "stages" || doc.shape === "metro" || doc.shape === "timeline") {
-    return compileGenericWithAnimate(doc, {
-      kind: "swimlane",
-      laneWidth: doc.shape === "stages" ? STAGE_LANE_WIDTH : 400,
-    });
-  }
-  // 動きを書いた形と縦列を書いた形は共通の組み立てへ (#1263 / #2348 で 1 箇所にまとめた)。
-  // **向きを書いた形も** (#1494)。 静止図の経路は並びを固定で持つので、
-  // ここを通さないと書いた向きが黙って消える (縦列を書いた形と同じ理由)
-  if (共通の組み立てへ回す("swimlane", doc, doc.direction !== undefined)) {
-    return compileGenericWithAnimate(doc, { kind: "swimlane", laneWidth: 400 });
-  }
-  // swimlane preset は lane 配置 + 自由 node/edge。
-  // v0.2 では actors を lane 化、 流れ の各 step から node を生成、 edge を引く。
-  const swim = swimlane({
-    id: slugify(doc.title),
-    topic: doc.title,
-    lanes: doc.actors.map((a) => a.name),
-  });
-
-  // 各 step で from / to の node を lane 内 stack 配置
-  const placedNodes = new Set<string>();
-  const laneStackCount = new Map<string, number>();
-  let edgeIdx = 0;
-
-  for (const s of doc.flow) {
-    for (const actorName of [s.from, s.to]) {
-      if (placedNodes.has(actorName)) continue;
-      const laneId = swim.laneId(actorName);
-      const actor = doc.actors.find((a) => a.name === actorName);
-      const stack = laneStackCount.get(laneId) ?? 0;
-      const nodeId = slugify(actorName) || `n${placedNodes.size}`;
-      swim.node(nodeId, {
-        lane: laneId,
-        stack,
-        kind: 描ける種別(actor?.kind),
-        title: actorName,
-      });
-      laneStackCount.set(laneId, stack + 1);
-      placedNodes.add(actorName);
-    }
-    const fromId = slugify(s.from);
-    const toId = slugify(s.to);
-    swim.edge(fromId, toId, {
-      id: `e${edgeIdx++}-${fromId}-${toId}`,
-      label: s.label,
-      ...(s.sub ? { sub: s.sub } : {}),
-      ...(s.side ? { side: s.side } : {}),
-    });
-  }
-
-  // **箱が 1 つも置けなかった時は、 登場人物をそのまま置く** (#1219)。
-  //
-  // この図種は矢印の端から箱を作るため、 矢印が 1 本も無いと箱が 0 件になり `compile` が
-  // 落ちる (実測 = 矢印を書かない図は本 Issue の前から落ちていた)。 解決できない矢印を
-  // 外すと同じ形になるので、 受け皿を置く。
-  //
-  // **1 つでも置けた時は触らない**。 矢印に出てこない登場人物にも箱を置くと、 今まで枠だけ
-  // だった所に箱が増えて既存の図の見た目が変わる (それを変えるかは別の判断)。
-  if (placedNodes.size === 0) {
-    doc.actors.forEach((a, i) => {
-      swim.node(slugify(a.name) || `n${i}`, {
-        lane: swim.laneId(a.name),
-        stack: 0,
-        kind: 描ける種別(a.kind),
-        title: 箱の題(a),
-      });
-    });
-  }
-  return swim.build();
-}

package/src/compile/timeline.ts

@@ -1,213 +0,0 @@
-import type { DslDocument } from "../types";
-import { slugify } from "./slug";
-
-/** 見本の札と同じ横長の比率にする。 */
-export const TIMELINE_CARD_WIDTH = 420;
-export const TIMELINE_CARD_HEIGHT = 56;
-
-/** 分かれ道の脇に置く札は、見本どおり通常の札より少し短くする。 */
-export const TIMELINE_SIDE_CARD_WIDTH = 380;
-
-/** 描く側の `timeline-number` が半径 24・縁 4 の丸を描く大きさ。 */
-export const TIMELINE_NUMBER_SIZE = 52;
-
-/** 描く側が四辺を 8 内側へ縮めるため、実描画を見本の 124 x 92 にする大きさ。 */
-export const TIMELINE_DECISION_WIDTH = 140;
-export const TIMELINE_DECISION_HEIGHT = 108;
-
-/** 軸の lane は、軸上で最も広い菱形をはみ出させない幅にする。 */
-export const TIMELINE_AXIS_WIDTH = TIMELINE_DECISION_WIDTH;
-
-/**
- * 描く側は終わりの印を短辺いっぱいに描き、輪の太さの半分だけ半径を縮める。
- * `80 x 42` なら node-visibility の下限 80 x 40 を保ち、外輪の半径が 19 になる。
- */
-export const TIMELINE_END_WIDTH = 80;
-export const TIMELINE_END_HEIGHT = 42;
-
-/**
- * 軸から通常の札の内側までの距離。
- * 見本と 7 意匠の実測に合わせ、札の内側を軸の中心から 70 離す。
- */
-export const TIMELINE_AXIS_TO_CARD = 70;
-
-/** 正解頁の軸 x=800 と「持ち戻る」の左辺 x=1020 から測った距離。 */
-export const TIMELINE_AXIS_TO_SIDE_CARD = 220;
-
-/** 見本どおり、番号の段を 125 ずつ進める。 */
-export const TIMELINE_STEP_GAP = 125;
-
-/** 7 意匠とも前後の和が 285 なので、CSS で意匠を替える見本帳へ届く一つの値を使う。 */
-export const TIMELINE_DECISION_GAP = 142.5;
-
-/** 見本どおり、最後の番号から終わりの印まで 105 空ける。 */
-export const TIMELINE_END_GAP = 105;
-
-/** 軸の左右の札と、戻る線の折れ曲がりを図の中へ収める余白。 */
-const TIMELINE_SIDE_MARGIN = 160;
-
-const AXIS_X = TIMELINE_SIDE_MARGIN + TIMELINE_CARD_WIDTH + TIMELINE_AXIS_TO_CARD;
-
-/** 最初の札と番号の上側を図の中へ収める中心 y。 */
-const FIRST_STEP_Y = 60;
-
-const TIMELINE_WIDTH = AXIS_X * 2;
-
-export type TimelineEdgeKind = "advance" | "back" | "branch";
-
-export type TimelineStep = {
-  cardId: string;
-  numberId?: string;
-  cardX: number;
-  cardWidth: number;
-  stage: number;
-  y: number;
-};
-
-export type TimelinePlacement = {
-  axisX: number;
-  axisHeight: number;
-  width: number;
-  stepsHeight: number;
-  steps: TimelineStep[];
-};
-
-/** 見た目の段の差で、進行線・戻り線・分かれ道を分ける。 */
-export function classifyTimelineEdge(fromStage: number, toStage: number): TimelineEdgeKind {
-  if (toStage === fromStage + 1) return "advance";
-  if (toStage < fromStage) return "back";
-  return "branch";
-}
-
-/**
- * 分かれ道だけから入る普通の段のうち、分かれ道の直後に書かれていない段を脇の札にする。
- * 省く印は呼び出し前に除かれるため、配列の直前が「書いた順で次」の判定になる。
- */
-function timelineSideCards(doc: Pick<DslDocument, "actors" | "flow">): Map<string, string> {
-  const actorsByName = new Map(doc.actors.map((actor) => [actor.name, actor]));
-  const sideCards = new Map<string, string>();
-  doc.actors.forEach((actor, index) => {
-    if (actor.kind === "decision" || actor.kind === "mark-end") return;
-    const incoming = doc.flow.filter((edge) => edge.to === actor.name);
-    if (incoming.length === 0) return;
-    if (!incoming.every((edge) => actorsByName.get(edge.from)?.kind === "decision")) return;
-    if (doc.actors[index - 1]?.kind === "decision") return;
-    const firstIncoming = incoming[0];
-    if (firstIncoming === undefined) return;
-    sideCards.set(actor.name, firstIncoming.from);
-  });
-  return sideCards;
-}
-
-function gapBefore(kind: string | undefined): number {
-  if (kind === "decision") return TIMELINE_DECISION_GAP;
-  if (kind === "mark-end") return TIMELINE_END_GAP;
-  return TIMELINE_STEP_GAP;
-}
-
-/** 時間軸の絶対座標と、札に重ならない番号 id を返す。 */
-export function placeTimeline(
-  doc: Pick<DslDocument, "actors" | "flow">,
-  軸に置く段: ReadonlySet<string> = new Set(),
-): TimelinePlacement {
-  const sideCardSource = timelineSideCards(doc);
-  const cardIds = doc.actors.map((actor, index) => slugify(actor.name) || `n${index}`);
-  const usedIds = new Set(cardIds);
-  const stageByName = new Map<string, number>();
-  const yByName = new Map<string, number>();
-  let stage = -1;
-  let y = FIRST_STEP_Y;
-  let previousKind: string | undefined;
-
-  for (const actor of doc.actors) {
-    const source = sideCardSource.get(actor.name);
-    if (source !== undefined) {
-      const sourceStage = stageByName.get(source);
-      const sourceY = yByName.get(source);
-      if (sourceStage === undefined || sourceY === undefined) {
-        throw new Error(`時間軸の脇の札 "${actor.name}" の分かれ道 "${source}" がありません`);
-      }
-      stageByName.set(actor.name, sourceStage);
-      yByName.set(actor.name, sourceY);
-      continue;
-    }
-    stage += 1;
-    if (stage > 0) {
-      y += previousKind === "decision" ? TIMELINE_DECISION_GAP : gapBefore(actor.kind);
-    }
-    stageByName.set(actor.name, stage);
-    yByName.set(actor.name, y);
-    previousKind = actor.kind;
-  }
-
-  const cardSideByName = new Map<string, "left" | "right">();
-  doc.actors
-    .map((actor, index) => ({ actor, index, y: yByName.get(actor.name) ?? FIRST_STEP_Y }))
-    .filter(({ actor }) => !軸に置く段.has(actor.name))
-    .sort((a, b) => a.y - b.y || a.index - b.index)
-    .forEach(({ actor }, index) => cardSideByName.set(actor.name, index % 2 === 0 ? "left" : "right"));
-
-  const cardLayoutByName = new Map<string, { centerX: number; width: number }>();
-  for (const actor of doc.actors) {
-    const sideCard = sideCardSource.has(actor.name);
-    const width = sideCard ? TIMELINE_SIDE_CARD_WIDTH : TIMELINE_CARD_WIDTH;
-    const axisToCard = sideCard ? TIMELINE_AXIS_TO_SIDE_CARD : TIMELINE_AXIS_TO_CARD;
-    const side = cardSideByName.get(actor.name) ?? "left";
-    cardLayoutByName.set(actor.name, {
-      centerX: side === "left"
-        ? AXIS_X - axisToCard - width / 2
-        : AXIS_X + axisToCard + width / 2,
-      width,
-    });
-  }
-
-  for (const actor of doc.actors) {
-    if (!sideCardSource.has(actor.name)) continue;
-    const source = cardLayoutByName.get(actor.name);
-    const sourceStage = stageByName.get(actor.name);
-    if (source === undefined || sourceStage === undefined) continue;
-    for (const edge of doc.flow.filter((item) => item.from === actor.name)) {
-      const target = cardLayoutByName.get(edge.to);
-      const targetStage = stageByName.get(edge.to);
-      if (target === undefined || targetStage === undefined || targetStage >= sourceStage) continue;
-      const targetLeft = target.centerX - target.width / 2;
-      const targetRight = target.centerX + target.width / 2;
-      if (source.centerX < targetLeft || source.centerX > targetRight) continue;
-      /*
-       * cardene777/cdl#1031: `back-detour` は札の上辺の中点どうしを結び、
-       * 両端の札を障害物に数えない。右側の脇札も線札の clearance を保つ位置へ置く。
-       */
-      source.centerX = AXIS_X + TIMELINE_AXIS_TO_SIDE_CARD + source.width / 2;
-    }
-  }
-
-  let 次の番号 = 1;
-  const steps = doc.actors.map((actor, index): TimelineStep => {
-    const sideCard = sideCardSource.has(actor.name);
-    const 番号 = 軸に置く段.has(actor.name) || sideCard ? undefined : 次の番号++;
-    const base = 番号 === undefined ? undefined : `timeline-number-${番号}`;
-    let numberId = base;
-    let suffix = 2;
-    while (numberId !== undefined && usedIds.has(numberId)) numberId = `${base}-${suffix++}`;
-    if (numberId !== undefined) usedIds.add(numberId);
-    const cardLayout = cardLayoutByName.get(actor.name);
-    if (cardLayout === undefined) throw new Error(`時間軸の札 "${actor.name}" の配置がありません`);
-    return {
-      cardId: cardIds[index]!,
-      numberId,
-      cardX: cardLayout.centerX,
-      cardWidth: cardLayout.width,
-      stage: stageByName.get(actor.name) ?? index,
-      y: yByName.get(actor.name) ?? FIRST_STEP_Y,
-    };
-  });
-  const lastY = Math.max(FIRST_STEP_Y, ...steps.map((step) => step.y));
-  const rightEdge = Math.max(...steps.map((step) => step.cardX + step.cardWidth / 2));
-  return {
-    axisX: AXIS_X,
-    axisHeight: lastY + TIMELINE_END_HEIGHT / 2,
-    width: Math.max(TIMELINE_WIDTH, rightEdge + TIMELINE_SIDE_MARGIN),
-    stepsHeight: lastY + TIMELINE_CARD_HEIGHT / 2 + TIMELINE_SIDE_MARGIN,
-    steps,
-  };
-}

package/src/compile/topology.ts

@@ -1,44 +0,0 @@
-import { diagram, topology } from "@cardenelabs/cdl";
-import { 箱の題 } from "./node-title";
-import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslDocument } from "../types";
-
-import { compileGenericWithAnimate, 共通の組み立てへ回す } from "./generic";
-import { 描ける種別 } from "./kinds";
-
-import { slugify } from "./slug";
-
-export function compileTopology(doc: DslDocument): CdlDiagram {
-  // 動きを書いた形と縦列を書いた形は共通の組み立てへ (#1263 / #2348 で 1 箇所にまとめた)
-  if (共通の組み立てへ回す("topology", doc)) {
-    return compileGenericWithAnimate(doc, { kind: "topology", laneWidth: 460 });
-  }
-  // 登場人物が 0 人なら枠も作らない。 描画側の `topology()` は枠を必ず 1 つ作るため、 そのまま
-  // 通すと中身の無い枠が残る (#1096)
-  if (doc.actors.length === 0) {
-    return diagram(slugify(doc.title), { topic: doc.title, type: "topology" }).build();
-  }
-  // topology preset ... actors を 1 つの group 内 container として配置
-  // v0.3 で「group」 ブロックを追加して複数 group 対応検討
-  const topo = topology({
-    id: slugify(doc.title),
-    topic: doc.title,
-  });
-  const groupId = "main";
-  const groupBuilder = topo.group(groupId, { label: doc.title });
-  for (const a of doc.actors) {
-    groupBuilder.add({
-      id: slugify(a.name) || a.name,
-      kind: 描ける種別(a.kind),
-      title: 箱の題(a),
-    });
-  }
-  for (const s of doc.flow) {
-    topo.connect(slugify(s.from), slugify(s.to), {
-      label: s.label,
-      ...(s.sub ? { sub: s.sub } : {}),
-      ...(s.side ? { side: s.side } : {}),
-    });
-  }
-  return topo.build();
-}

package/src/compile/tree.ts

@@ -1,69 +0,0 @@
-import { diagram, 木の札の幅 } from "@cardenelabs/cdl";
-import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslDocument } from "../types";
-import { 図表の大きさ, 図表の大きさを読む } from "./chart-fields";
-import { 矢印から親を決める, 放射に出す文字 } from "./hierarchy";
-import type { CompileNotice } from "./notice";
-import { slugify } from "./slug";
-import { 図の小見出し } from "./subtitle";
-/**
- * 木 (`type: tree`) の組み立て (#1154)。 描画側に 1 つの箱で渡す。
- *
- * 親子を `flow` の矢印で読む (`親 -> 子`)。 他の図表と違って `flow` を読むのは、親子が
- * 2 つの名前の関係で、 1 行 1 値では書けないため。
- */
-export function compileTree(doc: DslDocument, onNotice?: (n: CompileNotice) => void): CdlDiagram {
-  const b = diagram(slugify(doc.title), { topic: doc.title, type: "tree" });
-  // **同じ slug になる名前を先に見る**。 違う名前が同じ id に潰れると、 自分を親にしたと
-  // 誤判定したり、 同じ id の要素が 2 つできたりする (review 指摘)
-  const slug別 = new Map<string, string[]>();
-  for (const a of doc.actors) {
-    const k = slugify(a.name);
-    slug別.set(k, [...(slug別.get(k) ?? []), a.name]);
-  }
-  const 名前 = new Set(slug別.keys());
-  // **行番号を渡す**。 `DslActor` / `DslStep` は `pos.line` を持つので遡れる。 前回「持てない」
-  // と書いたのは誤り (review 指摘)。 0 にすると画面が問題の行を案内できない
-  const 伝える = (名: string, message: string, line = 0) => {
-    onNotice?.({ kind: "chart-value-unreadable", actor: 名, line, message });
-    if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${message}`);
-  };
-  for (const [k, 群] of slug別) {
-    if (群.length > 1) {
-      伝える(
-        群[0]!,
-        `type: tree で ${群.join(" / ")} が同じ id (${k}) になります。 名前を変えてください`,
-      );
-    }
-  }
-  const 親 = 矢印から親を決める(doc, "tree", 名前, 伝える);
-  const data: NonNullable<CdlDiagram["nodes"][number]["treeData"]> = doc.actors.map((a) => {
-    const id = slugify(a.name);
-    const p3 = 親.get(id);
-    // 木も放射と同じく名前と補足を分けて渡す (#1332)。 分けないと補足が捨てられ、
-    // 書いた文字が図に出ない
-    return { id, ...放射に出す文字(a), ...(p3 !== undefined ? { parent: p3 } : {}) };
-  });
-  // 札の幅は葉の数で変わる (cdl#970)。 **規則は描画側が持つ** ので、ここでは引くだけにする。
-  // 写すと、描画側が割付を変えた時に記法の側だけが古い幅を渡す。
-  // 高さは段の数で決まり、描画側が既定を返す形なので表から取る
-  const 既定W = 木の札の幅(data);
-  const { w: W, h: H } = 図表の大きさを読む(doc, { w: 既定W, h: 図表の大きさ.tree.h });
-  b.lane("chart", { width: W + 64 });
-  b.node(`${slugify(doc.title) || "tree"}-chart`, {
-    lane: "chart",
-    stack: 0,
-    kind: "tree-hierarchy",
-    title: doc.title,
-    ...図の小見出し(doc),
-    w: W,
-    h: H,
-    treeData: data,
-    ...(doc.treeNodeForm !== undefined ? { treeNodeForm: doc.treeNodeForm } : {}),
-    ...(doc.treeSize !== undefined ? { treeSize: doc.treeSize } : {}),
-    ...(doc.treeEdgeTone !== undefined ? { treeEdgeTone: doc.treeEdgeTone } : {}),
-    ...(doc.treeEdgeHead !== undefined ? { treeEdgeHead: doc.treeEdgeHead } : {}),
-    ...(doc.figureKindLabel !== undefined ? { figureKindLabel: doc.figureKindLabel } : {}),
-  });
-  return b.build();
-}