@cardenelabs/dragon 0.16.0 → 0.18.0

package/src/index.ts

@@ -76,6 +76,7 @@ export {
   MAX_PART_SCALE,
   partDrawsInDiagram,
   partIsMeasurable,
+  partsBaseRows,
   partsGridCenters,
 } from "./compile";
 // 色として読めるかの判定と、 図の外を指す値かの判定。 状態の上書きを受け取る側 / 画面が色欄を

package/src/json-parser.ts

@@ -21,6 +21,7 @@
 import {
   DRAW_WORDS,
   EDGE_SIDE_VALUES,
+  EDGE_HEAD_VALUES,
   NODE_KIND_VALID,
   PRESET_TYPES,
   STYLE_VALID,
@@ -36,7 +37,17 @@ import {
   type 図形の定義,
 } from "./v05/parser";
 import type { CompileToCdlOpts } from "./compile";
-import type { CdlDiagram, NodeKind, Tone, EdgeStyle } from "@cardenelabs/cdl";
+import type {
+  CdlDiagram,
+  NodeKind,
+  Tone,
+  EdgeStyle,
+  EdgeHead,
+  EdgeHeadFill,
+  EdgeReveal,
+  ClassRelationType,
+  SequenceMessageKind,
+} from "@cardenelabs/cdl";
 import { extractIdentifiers, parseFormula } from "@cardenelabs/cdl";
 import type {
   DslDocument,
@@ -172,6 +183,12 @@ export interface DragonJson {
       lanes: string[];
     }
   >;
+  /** 順序図で面が動いている間の帯 (#1466)。 記法の最上位 `bands:` と同じ */
+  bands?: { actor: string; from: number; to: number }[];
+  /** 矢印をいつ出すか (#1470)。 記法の最上位 `reveal:` と同じ */
+  reveal?: EdgeReveal;
+  /** 図の並ぶ向き (#1494)。 記法の最上位 `direction:` と同じ。 JSON は英語の語で書く */
+  direction?: "vertical" | "horizontal";
 }
 
 export interface JsonActor {
@@ -294,6 +311,8 @@ export interface JsonActor {
    * 読めない項目名として知らせる)。
    */
   scale?: number;
+  /** 行頭の印 (#1466)。 行と対で読む。 語の意味は図の種類が決める */
+  marks?: string[];
 }
 
 /** 2 軸で仕分ける図の軸の名前 (#1294)。 記法の `axes:` と同じ形 */
@@ -317,6 +336,21 @@ export interface JsonStep {
   sub?: string;
   /** 矢印がどの辺から出るか (#1385)。 記法の `side:` と同じ */
   side?: "top" | "right" | "bottom" | "left";
+  /**
+   * 矢印の先の形 (#1462)。 記法の `{ head: triangle }` と同じ。
+   *
+   * 三角 (継ぐ) / 菱 (持つ) / 開いた矢 (使う) / 鳥の足 (多)。
+   * 書かなければ従来どおり塗った三角になる。
+   */
+  head?: EdgeHead;
+  /** 出どころ側の端の形と、両端の塗り (#1466)。 記法の `{ tailHead: diamond }` 等と同じ */
+  tailHead?: EdgeHead;
+  headFill?: EdgeHeadFill;
+  tailHeadFill?: EdgeHeadFill;
+  /** クラス図の関係の語 (#1466)。 書くと端の形 / 塗り / 線種がまとめて決まる */
+  relation?: ClassRelationType;
+  /** 順序図の言づての種類 (#1466)。 `call` / `return` / `fire` */
+  kind?: SequenceMessageKind;
   /**
    * 矢印の色 (#1304)。 記法の `(成功)` と同じく別名 (`成功` / `neutral` 等) も受ける。
    *
@@ -451,6 +485,12 @@ export const ACCEPTED_KEYS = {
     // 押下などの出来事で動く仕掛けと、巻き上げに応じて進む値 (#1393)
     "events",
     "scrolls",
+    // 順序図で面が動いている間の帯 (#1466)
+    "bands",
+    // 矢印をいつ出すか (#1470)
+    "reveal",
+    // 図の並ぶ向き (#1494)
+    "direction",
   ],
   actor: [
     "name",
@@ -491,6 +531,8 @@ export const ACCEPTED_KEYS = {
     "opacity",
     "renderOffsetX",
     "renderOffsetY",
+    // 行頭の印 (#1466)。 行ごとに 1 つ、図の種類ごとの語で書く
+    "marks",
   ],
   step: [
     "from",
@@ -499,6 +541,14 @@ export const ACCEPTED_KEYS = {
     "sub",
     // 矢印がどの辺から出るか (#1385)
     "side",
+    // 矢印の先の形 (#1462)
+    "head",
+    // 端の印の残り 3 欄と、関係の語 / 言づての種類 (#1466)
+    "tailHead",
+    "headFill",
+    "tailHeadFill",
+    "relation",
+    "kind",
     "tone",
     "style",
     "guard",
@@ -561,6 +611,7 @@ export type 欄の型 =
   | "色"
   | "線種"
   | "辺"
+  | "端の形"
   | "色か色番号"
   | "描くもの"
   | "必須の図種"
@@ -592,6 +643,12 @@ export const 欄の型表 = {
     // 押下と巻き上げ (#1393)。 中身は下の検査が 1 件ずつ見る
     events: "並び",
     scrolls: "object",
+    // 順序図で面が動いている間の帯 (#1466)
+    bands: "並び",
+    // 矢印をいつ出すか (#1470)
+    reveal: "非空の文字列",
+    // 図の並ぶ向き (#1494)
+    direction: "非空の文字列",
   },
   actor: {
     name: "必須の非空文字列",
@@ -631,6 +688,8 @@ export const 欄の型表 = {
     opacity: "数か文字列",
     renderOffsetX: "数か文字列",
     renderOffsetY: "数か文字列",
+    // 行頭の印 (#1466)
+    marks: "文字列の並び",
   },
   step: {
     from: "必須の文字列",
@@ -639,6 +698,13 @@ export const 欄の型表 = {
     sub: "文字列",
     // 矢印がどの辺から出るか (#1385)
     side: "辺",
+    head: "端の形",
+    // 端の印の残り 3 欄と、関係の語 / 言づての種類 (#1466)
+    tailHead: "端の形",
+    headFill: "非空の文字列",
+    tailHeadFill: "非空の文字列",
+    relation: "非空の文字列",
+    kind: "非空の文字列",
     tone: "色",
     style: "線種",
     guard: "文字列",
@@ -890,6 +956,18 @@ function 値を検査(
         });
       }
       return;
+    case "端の形":
+      if (v === undefined) return;
+      // 受ける語は記法と同じ一覧を見る (`EDGE_HEAD_VALUES`)。 写すと描画側が形を増やした時に
+      // 片方だけ古くなる
+      if (typeof v !== "string" || !EDGE_HEAD_VALUES.includes(v)) {
+        errors.push({
+          path,
+          message: `${名前} must be one of: ${EDGE_HEAD_VALUES.join(", ")}`,
+          hint: typeof v === "string" ? `got "${v}"` : `got ${typeof v}`,
+        });
+      }
+      return;
     case "描くもの":
       if (v === undefined) return;
       // 受ける語は記法と同じ一覧を見る (`DRAW_WORDS`)。 写すと語が増えた時に片方だけ古くなる
@@ -1202,6 +1280,40 @@ function 表で中身を検査する(
  * 委ねる作りなので (`checkFieldType` の `case "並び"`)、ここで見ないと `readouts: 1` が
  * 素通りする。
  */
+/**
+ * 順序図の帯の並びを検査する (#1466)。
+ *
+ * **外側の形もここで見る**。 `欄の型表` は「並び」 とだけ宣言し、中身の検査は専用の検査に
+ * 委ねる作りなので、ここで見ないと `bands: 1` が素通りする。
+ */
+function validateBands(v: unknown, errors: JsonDslError[]): void {
+  if (v === undefined) return;
+  if (!Array.isArray(v)) {
+    errors.push({
+      path: "$.bands",
+      message: "bands must be an array of band objects",
+      hint: `got ${v === null ? "null" : typeof v}`,
+    });
+    return;
+  }
+  v.forEach((b, i) => {
+    const path = `$.bands[${i}]`;
+    if (typeof b !== "object" || b === null || Array.isArray(b)) {
+      errors.push({ path, message: "band must be an object", hint: "{ actor, from, to } の形で書く" });
+      return;
+    }
+    const o = b as Record<string, unknown>;
+    if (typeof o.actor !== "string" || o.actor === "") {
+      errors.push({ path: `${path}.actor`, message: "band.actor must be a non-empty string" });
+    }
+    for (const k of ["from", "to"] as const) {
+      if (typeof o[k] !== "number" || !Number.isInteger(o[k]) || (o[k] as number) < 0) {
+        errors.push({ path: `${path}.${k}`, message: `band.${k} must be a non-negative integer` });
+      }
+    }
+  });
+}
+
 function validateReadouts(v: unknown, errors: JsonDslError[]): void {
   if (v === undefined) return;
   if (!Array.isArray(v)) {
@@ -1879,6 +1991,7 @@ function validateJson(
   checkUnknownKeys(j, "root", "$", errors);
   // 値を見せる部品の中身を、記法と同じ表で見る (#1374)
   validateReadouts(j.readouts, errors);
+  validateBands(j.bands, errors);
   // 読む人が動かすつまみの中身も、記法と同じ表で見る (#1389)
   validateInputs(j.inputs, errors);
   // 式は描画側の parser に通す (#1391)
@@ -2181,6 +2294,8 @@ export function jsonToDoc(json: DragonJson): DslDocument {
       value: a.value,
       previous: a.previous,
       rows: a.rows,
+      // 行頭の印 (#1466)。 行と対で読む
+      marks: a.marks,
       lane: a.lane,
       stack: a.stack,
       initial: a.initial,
@@ -2240,6 +2355,14 @@ export function jsonToDoc(json: DragonJson): DslDocument {
     label: s.label,
     sub: s.sub,
     side: s.side as "top" | "right" | "bottom" | "left" | undefined,
+    // 矢印の先の形 (#1462)。 読めない語は組み立てが落とす
+    head: s.head,
+    // 端の印の残り 3 欄と、関係の語 / 言づての種類 (#1466)
+    tailHead: s.tailHead,
+    headFill: s.headFill,
+    tailHeadFill: s.tailHeadFill,
+    relation: s.relation,
+    msgKind: s.kind,
     // 箱と同じ読み替えを通す (#1304)。 通さないと `tone: "成功"` が色名として解決されないまま
     // 図に届き、同じ値が箱では色になり矢印では色にならない
     tone: resolveTone(s.tone),
@@ -2373,6 +2496,12 @@ export function jsonToDoc(json: DragonJson): DslDocument {
     formulas,
     events,
     scrolls,
+    // 順序図で面が動いている間の帯 (#1466)
+    bands: json.bands,
+    // 矢印をいつ出すか (#1470)
+    reveal: json.reveal,
+    // 図の並ぶ向き (#1494)。 JSON は英語で書くので、記法と同じ語に直してから渡す
+    ...(json.direction !== undefined ? { direction: json.direction === "horizontal" ? ("横" as const) : ("縦" as const) } : {}),
     pos: p0,
   };
 }

package/src/keywords.ts

@@ -17,6 +17,34 @@ export const HEADERS = {
 /** preset 名 */
 export const PRESET_NAMES = ["sequence", "flow", "swimlane", "er", "state", "topology"] as const;
 
+/**
+ * 図の並ぶ向き (`direction:`、 #1494)。
+ *
+ * 縦列 (`lane`) は横、段 (`stack`) は縦に置かれるので、向きは「1 つの縦列に積む」 か
+ * 「1 人ずつ縦列を作る」 かの選択になる。 どちらも組み立て側に既にある経路で、
+ * 記法から名指しできる言葉が無かった。
+ */
+export const DIRECTIONS = ["縦", "横"] as const;
+export type DslDirection = (typeof DIRECTIONS)[number];
+
+/**
+ * 向きの別名。 色 (`色` / `color` / `tone`) と同じく日本語と英語の両方で書ける。
+ *
+ * 正規の語を鍵にも入れておく = 引く側が別名かどうかを気にせず 1 度で解決できる。
+ */
+export const DIRECTION_ALIAS: Record<string, DslDirection> = {
+  縦: "縦",
+  横: "横",
+  vertical: "縦",
+  horizontal: "横",
+};
+
+/** 書いた向きを正規の語に直す。 読めない語は `null`。 */
+export function resolveDirection(s: string): DslDirection | null {
+  const k = s.trim().toLowerCase();
+  return Object.hasOwn(DIRECTION_ALIAS, k) ? DIRECTION_ALIAS[k]! : null;
+}
+
 /** NodeKind 別名 (日本語 → English) */
 export const NODE_KIND_ALIAS: Record<string, NodeKind> = {
   // 日本語

package/src/schemas/diagram.json

@@ -123,6 +123,13 @@
                 },
                 "description": "storage 内の column 列 (kind: storage 用)"
               },
+              "marks": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "行頭の印。 rows と同じ数だけ並べる。 語の意味は図の種類が決める = er は pk / fk / opt、class は + / - と () の有無、state は entry / do / exit / internal"
+              },
               "lane": {
                 "type": "string",
                 "description": "swimlane / topology で属する lane id"
@@ -457,7 +464,7 @@
           },
           "style": {
             "type": "string",
-            "enum": ["solid", "dotted-flow"],
+            "enum": ["solid", "dotted-flow", "dashed"],
             "description": "矢印の線種"
           },
           "guard": {
@@ -473,6 +480,36 @@
             "enum": ["top", "right", "bottom", "left"],
             "description": "矢印がどの辺から出るか。 書かなければ描画側が自動で選ぶ。"
           },
+          "head": {
+            "type": "string",
+            "enum": ["none", "triangle", "diamond", "open", "crow", "one", "zero-one", "many", "zero-many"],
+            "description": "着き先側の端の形。 端の形で関係の種類を示す = triangle (継ぐ) / diamond (持つ) / open (使う) / crow (多) / one / zero-one / many / zero-many (個数)。 書かなければ塗った三角になる。"
+          },
+          "tailHead": {
+            "type": "string",
+            "enum": ["none", "triangle", "diamond", "open", "crow", "one", "zero-one", "many", "zero-many"],
+            "description": "出どころ側の端の形。 両端に別々の印を立てる時に書く。"
+          },
+          "headFill": {
+            "type": "string",
+            "enum": ["solid", "hollow"],
+            "description": "着き先側の端の塗り。 中空は「弱い関係」 を表す。"
+          },
+          "tailHeadFill": {
+            "type": "string",
+            "enum": ["solid", "hollow"],
+            "description": "出どころ側の端の塗り。"
+          },
+          "relation": {
+            "type": "string",
+            "enum": ["extends", "implements", "aggregates", "composes", "associates", "uses"],
+            "description": "クラス図の関係の語。 書くと端の形 / 塗り / 線種がまとめて決まる。"
+          },
+          "kind": {
+            "type": "string",
+            "enum": ["call", "return", "fire"],
+            "description": "順序図の言づての種類。 call (返事を待つ) / return (返し) / fire (返事を待たない)。"
+          },
           "labelOffsetX": {
             "type": "number",
             "description": "ラベル位置 x 調整"
@@ -1759,6 +1796,30 @@
         "pattern": "^[A-Za-z_][A-Za-z0-9_]*$"
       }
     },
+    "direction": {
+      "type": "string",
+      "enum": ["vertical", "horizontal"],
+      "description": "図の並ぶ向き。 vertical = 1 つの縦列に積む。 horizontal = 1 人ずつ縦列を作る。 効くのは flow と swimlane だけ。"
+    },
+    "reveal": {
+      "type": "string",
+      "enum": ["phase", "all"],
+      "description": "矢印をいつ出すか。 phase (既定) = 段が名指しする矢印はその段が来るまで描かない。 all = 段に関わらず最初から全部描く。"
+    },
+    "bands": {
+      "type": "array",
+      "description": "順序図で面が動いている間の帯。 書かなければ面ごとに「最初に関わった段から最後まで」 の 1 本になる。",
+      "items": {
+        "type": "object",
+        "required": ["actor", "from", "to"],
+        "additionalProperties": false,
+        "properties": {
+          "actor": { "type": "string", "description": "帯を出す面の名前" },
+          "from": { "type": "integer", "minimum": 0, "description": "始まりの言づての番号 (0 起点)" },
+          "to": { "type": "integer", "minimum": 0, "description": "終わりの言づての番号 (0 起点)" }
+        }
+      }
+    },
     "events": {
       "type": "array",
       "description": "押下などの出来事で動く仕掛け。 相手は名前で指す (box / lane / arrow / diagram のどれか 1 つ)。",

package/src/tokenize.ts

@@ -33,7 +33,7 @@
  * 分割して返す = 参照だけ別の色にできる。
  */
 import { TONE_ALIAS, ARROW_PATTERNS } from "./keywords";
-import { TONES } from "@cardenelabs/cdl";
+import { TONES, EDGE_STYLES } from "@cardenelabs/cdl";
 import type { Tone } from "@cardenelabs/cdl";
 
 /** 分解した部分の種類 (#1310) */
@@ -49,12 +49,12 @@ export type トークン = {
 };
 
 /**
- * 線種の一覧 (#1310)。 `v05/parser.ts` の `STYLE_VALID` と同じ値を持つ。
+ * 線種の一覧 (#1310 → #1466)。
  *
- * あちらを import すると parser 全体を引き込むため、分解器では持ち直す。 **2 箇所に
- * 分かれるので検査で突き合わせる** (`tokenize.test.ts`)。
+ * 描画側 (`EDGE_STYLES`) から導く。 手で並べると、描画側が線種を増やした時に書けないままになる
+ * (実測 = `dashed` を足した時に 3 箇所のうち 2 箇所が古いままだった)。
  */
-const 線種 = ["solid", "dotted-flow"] as const;
+const 線種 = EDGE_STYLES;
 
 /** 色名として読める語 (小文字で引く)。 正規の色名と別名の両方 */
 const 色名の表 = new Map<string, Tone>([

package/src/types.ts

@@ -3,8 +3,9 @@
  * docs/cdl/text-dsl-spec.md の文法を AST に変換した中間表現
  */
 
-import type { CdlDiagram, NodeKind, Tone, EdgeStyle } from "@cardenelabs/cdl";
+import type { CdlDiagram, NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, EdgeReveal, ClassRelationType, SequenceMessageKind } from "@cardenelabs/cdl";
 import type { DslOnlyKind } from "./v05/parser";
+import type { DslDirection } from "./keywords";
 
 /**
  * 記法が書ける箱の種類 (#1420)。
@@ -152,6 +153,31 @@ export type DslDocument = {
   /** v0.5+ 拡張 ... viewport / lanes / groups */
   viewport?: DslViewport;
   lanes?: Record<string, DslLane>;
+  /**
+   * 動いている間の帯 (#1466)。 順序図だけが読む。
+   *
+   * 書かなければ面ごとに「最初に関わった段から最後まで」 の 1 本。 途中で手が空く面を
+   * 分けたい図だけ書く = どこで手が空くかは言づての並びからは決まらない。
+   */
+  bands?: DslBand[];
+  /**
+   * 矢印をいつ出すか (`reveal:`、 #1470)。
+   *
+   * 既定 (`phase`) は「段が名指しする矢印は、その段が来るまで描かない」。 `all` と書くと
+   * 段に関わらず最初から全部描く。 描き手の `CdlDiagram.edgeReveal` にそのまま渡る。
+   */
+  reveal?: EdgeReveal;
+  /**
+   * 図の並ぶ向き (`direction:`、 #1494)。
+   *
+   * `縦` は 1 つの縦列に積み、`横` は 1 人ずつ縦列を作る。 効くのは流れ図と泳法図だけで、
+   * 他の図種は並び方そのものが読み方を担うため書いても効かない (知らせを出す)。
+   *
+   * 全ての箱が縦列を書いた形では、書いた縦列が勝つ (同じく知らせを出す)。
+   */
+  direction?: DslDirection;
+  /** `direction:` を書いた行。 効かない時の知らせで、書いた場所を指すために持つ */
+  directionPos?: { line: number };
   groups?: Record<string, DslGroup>;
   /**
    * 値を見せる部品 (`readouts:`、 #1374)。 割合の輪や数え上げを図の脇に出す。
@@ -230,6 +256,14 @@ export type DslActor = {
    */
   previous?: string;
   rows?: string[];
+  /**
+   * 行頭の印 (#1466)。 `rows` と同じ並びで、空文字はその行に印を付けない。
+   *
+   * **語の意味は図の種類が決める**。 ER は `pk` / `fk` / `opt`、状態遷移は
+   * `entry` / `exit` / `do` / `internal`。 印の 2 軸 (形 × 塗り) は共通だが、その軸が
+   * 何を指すかは種類ごとに違う。
+   */
+  marks?: string[];
   /**
    * 箱の中に描く図形 (`shape:`、 #1374)。 水位や角度を状態で動かせる。
    *
@@ -417,6 +451,35 @@ export type DslStep = {
   dashOffsetBind?: string;
   /** 矢印がどの辺から出るか (#1385)。 書かなければ描画側が自動で選ぶ */
   side?: "top" | "right" | "bottom" | "left";
+  /**
+   * 矢印の先の形 (#1462)。 書かなければ従来どおり塗った三角。
+   *
+   * 4 図の設計は **端の形で関係の種類を示す** = 三角 (継ぐ) / 菱 (持つ) /
+   * 開いた矢 (使う) / 鳥の足 (多)。 書けないと 4 種とも同じ三角になり、
+   * 線の種類 (実線 / 点線) だけで 6 種の関係を区別することになる。
+   *
+   * 受ける語は描画側の `EDGE_HEADS` から導く = 描画側が増やせば書けるようになる。
+   */
+  head?: EdgeHead;
+  /** 出どころ側の端の形 (#1466)。 ER は端ごとに違う個数を示すので両端に要る */
+  tailHead?: EdgeHead;
+  /** 端の印の塗り (#1466)。 白抜きの菱が「持つ」、塗った菱が「抱える」 */
+  headFill?: EdgeHeadFill;
+  /** 出どころ側の印の塗り (#1466) */
+  tailHeadFill?: EdgeHeadFill;
+  /**
+   * クラス図の関係の種類 (#1466)。 書くと線と端の形と塗りと付く側がまとめて決まる。
+   *
+   * 4 つを個別に書かせないのは、組合せが 6 通りしか無く、1 つでも書き違えると読み手に
+   * 別の意味で伝わるため (菱を逆に置くと持ち主が入れ替わる)。
+   */
+  relation?: ClassRelationType;
+  /**
+   * 言づての種類 (#1466)。 順序図で線と矢の形がまとめて決まる。
+   *
+   * `kind` にしないのは、箱の種類 (`DslActor.kind`) と同じ語が別の意味を持つため。
+   */
+  msgKind?: SequenceMessageKind;
   labelOffsetX?: number;
   labelOffsetY?: number;
   /** true で説明文を矢印の線の上に重ねる。 分岐図の条件ラベル用。 */
@@ -541,6 +604,9 @@ export type DslValue = {
 );
 
 /** ステップ (phase) */
+/** 動いている間の帯 (#1466)。 順序図で、面がいつ動いているかを段の番号で持つ */
+export type DslBand = { actor: string; from: number; to: number };
+
 export type DslPhase = {
   name: string;
   durationMs: number;