@cardenelabs/dragon 0.36.3 → 0.37.0

package/dist/{schema-9VLameDG.d.cts → schema-B2MTRv66.d.cts}

@@ -81,6 +81,12 @@ type DiagramEvent = {
     value?: string;
     tag?: string;
 };
+/** 状態遷移図の、最初の段より前に書いた移れる道。`from` に `start`、`to` に `finish` を書ける */
+interface StatePath {
+    from: string;
+    to: string;
+    label?: string;
+}
 interface Step {
     title: string;
     body: string;
@@ -89,7 +95,7 @@ interface Step {
 }
 interface Diagram {
     version: number;
-    kind: "sequence" | "architecture";
+    kind: "sequence" | "architecture" | "state";
     title: string;
     view?: ViewMode;
     regions?: Region[];
@@ -102,6 +108,9 @@ interface Diagram {
     sequence?: {
         lifelines: string[];
     };
+    state?: {
+        paths: StatePath[];
+    };
 }
 interface FieldError {
     /** 誤った欄の場所 (JSON Pointer) */
@@ -121,4 +130,4 @@ interface CheckOptions {
 /** 原本の JSON を検査する。版が道具より新しいかは見ない (`readDiagram` が見る)。 */
 declare function validateDiagram(input: unknown, options?: CheckOptions): Checked;
 
-export { type Box as B, type CheckOptions as C, type Diagram as D, type FieldError as F, type LabelSide as L, type NotationLang as N, PALETTES as P, READABLE_PX as R, type Step as S, type Theme as T, type ViewMode as V, type ColorKey as a, type Carry as b, type Checked as c, type Color as d, DEFAULT_PALETTE as e, type DiagramEvent as f, type Palette as g, type Region as h, resolvePalette as r, validateDiagram as v };
+export { type Box as B, type CheckOptions as C, type Diagram as D, type FieldError as F, type LabelSide as L, type NotationLang as N, PALETTES as P, READABLE_PX as R, type StatePath as S, type Theme as T, type ViewMode as V, type ColorKey as a, type Carry as b, type Checked as c, type Color as d, DEFAULT_PALETTE as e, type DiagramEvent as f, type Palette as g, type Region as h, type Step as i, resolvePalette as r, validateDiagram as v };

package/dist/{schema-9VLameDG.d.ts → schema-B2MTRv66.d.ts}

@@ -81,6 +81,12 @@ type DiagramEvent = {
     value?: string;
     tag?: string;
 };
+/** 状態遷移図の、最初の段より前に書いた移れる道。`from` に `start`、`to` に `finish` を書ける */
+interface StatePath {
+    from: string;
+    to: string;
+    label?: string;
+}
 interface Step {
     title: string;
     body: string;
@@ -89,7 +95,7 @@ interface Step {
 }
 interface Diagram {
     version: number;
-    kind: "sequence" | "architecture";
+    kind: "sequence" | "architecture" | "state";
     title: string;
     view?: ViewMode;
     regions?: Region[];
@@ -102,6 +108,9 @@ interface Diagram {
     sequence?: {
         lifelines: string[];
     };
+    state?: {
+        paths: StatePath[];
+    };
 }
 interface FieldError {
     /** 誤った欄の場所 (JSON Pointer) */
@@ -121,4 +130,4 @@ interface CheckOptions {
 /** 原本の JSON を検査する。版が道具より新しいかは見ない (`readDiagram` が見る)。 */
 declare function validateDiagram(input: unknown, options?: CheckOptions): Checked;
 
-export { type Box as B, type CheckOptions as C, type Diagram as D, type FieldError as F, type LabelSide as L, type NotationLang as N, PALETTES as P, READABLE_PX as R, type Step as S, type Theme as T, type ViewMode as V, type ColorKey as a, type Carry as b, type Checked as c, type Color as d, DEFAULT_PALETTE as e, type DiagramEvent as f, type Palette as g, type Region as h, resolvePalette as r, validateDiagram as v };
+export { type Box as B, type CheckOptions as C, type Diagram as D, type FieldError as F, type LabelSide as L, type NotationLang as N, PALETTES as P, READABLE_PX as R, type StatePath as S, type Theme as T, type ViewMode as V, type ColorKey as a, type Carry as b, type Checked as c, type Color as d, DEFAULT_PALETTE as e, type DiagramEvent as f, type Palette as g, type Region as h, type Step as i, resolvePalette as r, validateDiagram as v };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/dragon",
-  "version": "0.36.3",
+  "version": "0.37.0",
   "description": "Dragon — 動く図を、人は行ごとの記法で、AI は JSON で書く。時系列図と構成図を段ごとに動かし、mp4・GIF・HTML・PNG に書き出す。",
   "license": "MIT",
   "author": "cardene777",

package/src/field-messages.ts

@@ -32,6 +32,8 @@ export interface FieldMessages {
   const: (value: string) => string;
   /** どの欄の組み合わせか判らない場所では `undefined` */
   not: (allowed: Allowed | undefined) => string;
+  /** 状態遷移図の箱の名札に、始まりと終わりの印の名前 (`names`) を書いた */
+  reserved: (names: readonly string[]) => string;
   /** 選べる決まりがどれも欄が足りない時の、足りない欄。それ以外の時は空 */
   anyOf: (fields: readonly string[]) => string;
   oneOf: string;
@@ -74,6 +76,7 @@ const ja: FieldMessages = {
   minimum: (limit) => `${limit} 以上にする`,
   const: (value) => `${value} にする`,
   not: (allowed) => (allowed ? `${allowed.field} の欄は kind が ${allowed.kind} の時だけ書ける` : "この欄の組み合わせは書けない"),
+  reserved: (names) => `${names.join(" と ")} は状態遷移図の始まりと終わりの印の名前で、箱の名札に使えない`,
   anyOf: (fields) =>
     fields.length > 0 ? `${fields.join(" か ")} の${fields.length === 2 ? "どちらか" : "どれか"}の欄が要る` : "書ける形のどれにも合わない",
   oneOf: "書ける形のどれか 1 つだけに合わせる",
@@ -95,6 +98,7 @@ const en: FieldMessages = {
   minimum: (limit) => `Use ${limit} or greater`,
   const: (value) => `Use ${value}`,
   not: (allowed) => (allowed ? `The ${allowed.field} field is allowed only when kind is ${allowed.kind}` : "This combination of fields is not allowed"),
+  reserved: (names) => `${names.join(" and ")} name the start and end marks of a state diagram and cannot be box ids`,
   anyOf: (fields) => (fields.length > 0 ? `Write one of the ${fields.join(" or ")} fields` : "Does not match any of the allowed shapes"),
   oneOf: "Match exactly one of the allowed shapes",
   discriminator: (tag, values) => `${tag} is one of ${values.join(" / ")}`,

package/src/figure-text.ts

@@ -18,6 +18,15 @@ export interface FigureText {
   next: string;
   /** 段の一覧の読み上げの名前 */
   steps: (title: string) => string;
+  /** 状態遷移図の脇道の囲みの名前と添え書き (#3163)。添え書きの 2 行目は脇道へ入れる状態の数を言う (#3171) */
+  side: string;
+  sideNote: string;
+  sideFrom: (count: number) => string;
+  /** 状態遷移図の帯の最後の、通った状態の欄の名前 (#3171) */
+  trail: string;
+  /** 状態遷移図の始まりと終わりの印の字 */
+  start: string;
+  end: string;
 }
 
 export const FIGURE_TEXT: Record<NotationLang, FigureText> = {
@@ -29,6 +38,12 @@ export const FIGURE_TEXT: Record<NotationLang, FigureText> = {
     play: "動かす",
     next: "次の段",
     steps: (title) => `${title} の段`,
+    side: "脇道",
+    sideNote: "今回は通らない",
+    sideFrom: (count) => `${count} つの状態から入れる`,
+    trail: "通った状態",
+    start: "始まり",
+    end: "終わり",
   },
   en: {
     cannotDraw: (detail) => `Cannot draw the diagram: ${detail}`,
@@ -38,5 +53,11 @@ export const FIGURE_TEXT: Record<NotationLang, FigureText> = {
     play: "Play",
     next: "Next step",
     steps: (title) => `Steps of ${title}`,
+    side: "Side path",
+    sideNote: "Not taken this time",
+    sideFrom: (count) => `Enterable from ${count} ${count === 1 ? "state" : "states"}`,
+    trail: "States passed",
+    start: "Start",
+    end: "End",
   },
 };

package/src/index.ts

@@ -20,6 +20,7 @@ export {
   type FieldError,
   type LabelSide,
   type Region,
+  type StatePath,
   type Step,
   validateDiagram,
   type ViewMode,
@@ -33,15 +34,21 @@ export type {
   SceneBadge,
   SceneBox,
   SceneEdge,
+  SceneEnd,
   SceneField,
   SceneLabel,
   SceneLifeline,
+  ScenePath,
   SceneRegion,
+  SceneSide,
   SceneStrip,
+  SceneTrail,
 } from "./layout/scene";
 export { type Family, FONTS } from "./look/fonts";
 export { type ColorKey, DEFAULT_PALETTE, type Palette, PALETTES, READABLE_PX, resolvePalette, type Theme } from "./look/values";
 export { mountDiagram, type Player, type PlayerOptions } from "./player";
+export { ICONS } from "./render/icons";
+export { iconSvg } from "./render/parts";
 export { type Rendered, type RenderOptions, renderDiagram } from "./render/svg";
-export type { CarrierTime, EdgeTime, EventTime, LabelTime, Span, Timeline } from "./timeline";
+export type { CarrierTime, EdgeTime, EventTime, LabelTime, Span, StateTime, Timeline } from "./timeline";
 export { chooseView } from "./view";

package/src/layout/architecture.ts

@@ -334,7 +334,7 @@ function arrange(diagram: Diagram, groups: Group[], slots: Map<string, Slot>, ro
     );
   }
 
-  const layout: Layout = { kind: "architecture", width: 0, height: 0, regions, boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [] };
+  const layout: Layout = { kind: "architecture", width: 0, height: 0, regions, boxes, lifelines: [], edges: sceneEdges, labels, actions: [], badges: [], paths: [], ends: [] };
   // 名前が左へ出たら、帯の中身を右へ寄せる。帯は図の幅いっぱいに引き直す
   const shift = labels.length > 0 ? Math.max(0, margin + LOOK.label.soft - Math.min(...labels.map((l) => l.x))) : 0;
   if (shift > 0) shiftContent(layout, shift, 0);

package/src/layout/scene.ts

@@ -26,6 +26,8 @@ export interface SceneBox extends Rect {
   color: ColorKey;
   cx: number;
   cy: number;
+  /** 状態遷移図で、どの段も辿り着かない状態。点線の箱で脇道の囲みに描く */
+  ghost?: boolean;
 }
 
 export interface SceneRegion extends Rect {
@@ -60,6 +62,34 @@ export interface SceneLabel extends Rect {
   color: ColorKey;
 }
 
+/** 状態遷移図の、最初の段より前に書いてどの段にも出ない線。点線で描き、運ぶ物を走らせない */
+export interface ScenePath {
+  from: string;
+  to: string;
+  points: Point[];
+  label?: Rect & { text: string; family: Family };
+}
+
+/** 状態遷移図の始まりと終わりの印。`ghost` は脇道の中の終わりの印 */
+export interface SceneEnd {
+  kind: "start" | "finish";
+  x: number;
+  y: number;
+  r: number;
+  ghost: boolean;
+  /** 印の右に添える字 */
+  text: string;
+  /** 終わりの印へ線を引く状態 */
+  box?: string;
+}
+
+/** 状態遷移図の脇道の囲み。`title` と `notes` は囲みの左上に置く字 */
+export interface SceneSide extends Rect {
+  title: string;
+  /** 囲みの名前の下に 1 行ずつ置く添え書き */
+  notes: string[];
+}
+
 /** 時系列図の箱の中の処理。生存線の上に札で出す。 */
 export interface SceneAction extends Rect {
   step: number;
@@ -90,9 +120,19 @@ export interface SceneField {
   w: number;
 }
 
+/** 状態遷移図の帯の最後の欄。段が辿り着く順に状態を点で並べ、着いた状態を塗る (#3171) */
+export interface SceneTrail {
+  title: string;
+  states: { box: string; color: ColorKey }[];
+  x: number;
+  y: number;
+  w: number;
+}
+
 export interface SceneStrip extends Rect {
   title: string;
   fields: SceneField[];
+  trail?: SceneTrail;
 }
 
 export interface Layout {
@@ -107,6 +147,12 @@ export interface Layout {
   actions: SceneAction[];
   badges: SceneBadge[];
   strip?: SceneStrip;
+  /** 状態遷移図の通らない道。他の図の種類では空 */
+  paths: ScenePath[];
+  /** 状態遷移図の始まりと終わりの印。他の図の種類では空 */
+  ends: SceneEnd[];
+  /** 状態遷移図の脇道の囲み。通らない状態が無ければ無い */
+  side?: SceneSide;
 }
 
 export type EdgeEvent = Extract<DiagramEvent, { type: "edge" }>;
@@ -272,32 +318,43 @@ function fieldWidth(diagram: Diagram, name: string): number {
   return Math.max(textWidth(name, TYPE.fieldName), both);
 }
 
+/** 帯の最後に並べる通った状態の欄の名前と点。状態遷移図だけが渡す */
+export type TrailSource = Pick<SceneTrail, "title" | "states">;
+
+const trailWidth = (trail: TrailSource): number => Math.max(textWidth(trail.title, TYPE.fieldName), trail.states.length * LOOK.strip.trail.step);
+
 /** 1 行に並べた時に帯が要る幅。 */
-export function stripNeed(diagram: Diagram): number {
+export function stripNeed(diagram: Diagram, trail?: TrailSource): number {
   if (!diagram.strip) return 0;
   const { titleX, fieldGap, pad } = LOOK.strip;
   const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
-  return start + diagram.strip.fields.reduce((sum, name) => sum + fieldWidth(diagram, name) + fieldGap, 0) - fieldGap + pad;
+  const widths = [...diagram.strip.fields.map((name) => fieldWidth(diagram, name)), ...(trail ? [trailWidth(trail)] : [])];
+  return start + widths.reduce((sum, w) => sum + w + fieldGap, 0) - fieldGap + pad;
 }
 
-/** 中身の帯。欄は左から並べ、幅に収まらない欄は次の行へ送る。 */
-export function layoutStrip(diagram: Diagram, x: number, y: number, width: number): SceneStrip | undefined {
+/** 中身の帯。欄は左から並べ、幅に収まらない欄は次の行へ送る。通った状態の欄を渡すと、最後の欄の後に同じ決まりで置く。 */
+export function layoutStrip(diagram: Diagram, x: number, y: number, width: number, trail?: TrailSource): SceneStrip | undefined {
   if (!diagram.strip) return undefined;
   const { titleX, fieldGap, pad, line, h } = LOOK.strip;
   const start = titleX + textWidth(diagram.strip.title, TYPE.stripTitle) + fieldGap;
   const fields: SceneField[] = [];
   let cx = start;
   let row = 0;
-  for (const name of diagram.strip.fields) {
-    const w = fieldWidth(diagram, name);
+  const place = (w: number): { x: number; y: number } => {
     if (cx > start && cx + w > width - pad) {
       cx = start;
       row++;
     }
-    fields.push({ name, x: x + cx, y: y + row * line, w });
+    const at = { x: x + cx, y: y + row * line };
     cx += w + fieldGap;
+    return at;
+  };
+  for (const name of diagram.strip.fields) {
+    const w = fieldWidth(diagram, name);
+    fields.push({ name, ...place(w), w });
   }
-  return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields };
+  const laidTrail = trail ? { ...trail, ...place(trailWidth(trail)), w: trailWidth(trail) } : undefined;
+  return { x, y, w: width, h: h + row * line, title: diagram.strip.title, fields, ...(laidTrail ? { trail: laidTrail } : {}) };
 }
 
 /** 場面の全ての物を (dx, dy) だけ動かす。区画と帯は動かさず、横いっぱいの形を保つ。 */
@@ -325,6 +382,15 @@ export function shiftContent(layout: Layout, dx: number, dy: number): void {
     if (edge.settle) edge.settle = [edge.settle[0] + dx, edge.settle[1] + dy];
   }
   for (const label of layout.labels) move(label);
+  for (const path of layout.paths) {
+    path.points = path.points.map(([px, py]) => [px + dx, py + dy]);
+    if (path.label) move(path.label);
+  }
+  for (const end of layout.ends) {
+    end.x += dx;
+    end.y += dy;
+  }
+  if (layout.side) move(layout.side);
   for (const action of layout.actions) move(action);
   for (const badge of layout.badges) {
     badge.x += dx;
@@ -336,6 +402,10 @@ export function shiftContent(layout: Layout, dx: number, dy: number): void {
       field.x += dx;
       field.y += dy;
     }
+    if (layout.strip.trail) {
+      layout.strip.trail.x += dx;
+      layout.strip.trail.y += dy;
+    }
   }
 }
 

package/src/layout/sequence.ts

@@ -154,7 +154,7 @@ export function layoutSequence(diagram: Diagram): Layout {
     labels.push(placeLabel(request, { hard: boxes, soft }));
   }
 
-  const layout: Layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [] };
+  const layout: Layout = { kind: "sequence", width: 0, height: 0, regions: [], boxes, lifelines, edges, labels, actions, badges: [], paths: [], ends: [] };
 
   // 図の幅。名前が左に出たら全体を右へ寄せ、右端は一番右の物に余白を足した所
   const lefts = [...boxes.map((b) => b.x), ...labels.map((l) => l.x), ...actions.map((a) => a.x)];