@cardenelabs/dragon 0.12.0 → 0.14.0

package/src/types.ts

@@ -3,9 +3,49 @@
  * docs/cdl/text-dsl-spec.md の文法を AST に変換した中間表現
  */
 
-import type { NodeKind, Tone, EdgeStyle } from "@cardenelabs/cdl";
+import type { CdlDiagram, NodeKind, Tone, EdgeStyle } from "@cardenelabs/cdl";
 import type { RelativePos } from "./relative-pos";
 
+/**
+ * 箱の中に描く図形 (#1374)。 **描画側の型をそのまま使う**。
+ *
+ * 写して持つと欄が増えた時にずれる。 指した先が変われば型検査が教える。
+ */
+export type DslDynShape = NonNullable<CdlDiagram["nodes"][number]["shape"]>;
+
+/** 値を見せる部品 (#1374)。 図形と同じ理由で描画側の型をそのまま使う */
+export type DslReadout = NonNullable<CdlDiagram["readouts"]>[number];
+
+/** 読む人が動かすつまみ (#1389)。 部品と同じ理由で描画側の型をそのまま使う */
+export type DslInput = NonNullable<CdlDiagram["inputs"]>[number];
+
+/** つまみの値から決まる値 (#1391)。 描画側の型に、知らせ用の記述位置だけを足す。 */
+export type DslFormula = NonNullable<CdlDiagram["formulas"]>[number] & { pos?: Position };
+
+/** 巻き上げに応じて進む値 (#1393)。 描画側の型をそのまま使う */
+export type DslScrollTrigger = NonNullable<CdlDiagram["scrollTriggers"]>[number];
+
+/**
+ * 押下などの出来事で動く仕掛け (`events:`、 #1393)。
+ *
+ * **描画側の型をそのまま使わない**。 描画側は相手を識別子で持つ (`{ kind: "node", id }`) が、
+ * 記法は識別子を書けず名前で指す。 名前から識別子への読み替えは組み立てが行うため、
+ * 記法の段階では「何をどう指したか」 だけを持つ。
+ */
+export type DslEventBinding = {
+  /** 出来事の種類 (`click` / `hover` など、描画側の `CdlEventKind` と同じ語) */
+  event: NonNullable<CdlDiagram["eventBindings"]>[number]["event"];
+  /** 何を指したか。 名前は記法に書かれたまま持ち、組み立てが識別子へ直す */
+  target:
+    | { kind: "node"; name: string }
+    | { kind: "lane"; name: string }
+    | { kind: "edge"; from: string; to: string }
+    | { kind: "diagram" };
+  /** 呼び出す仕掛けの名前。 実体は画面側が持つ */
+  handlerId: string;
+  pos: Position;
+};
+
 export type PresetType =
   | "sequence"
   | "flow"
@@ -96,6 +136,41 @@ export type DslDocument = {
   viewport?: DslViewport;
   lanes?: Record<string, DslLane>;
   groups?: Record<string, DslGroup>;
+  /**
+   * 値を見せる部品 (`readouts:`、 #1374)。 割合の輪や数え上げを図の脇に出す。
+   *
+   * 箱ではないので縦列に載らない。 図全体に 1 つの並びとして持つ。
+   */
+  readouts?: DslReadout[];
+  /**
+   * 読む人が動かすつまみ (`inputs:`、 #1389)。 つまみが握る値は状態と同じ名前で参照できる。
+   *
+   * 部品と同じく箱ではないので縦列に載らない。 図全体に 1 つの並びとして持つ。
+   */
+  inputs?: DslInput[];
+  /**
+   * つまみの値から決まる値 (`formulas:`、 #1391)。
+   *
+   * **`values:` とは経路が別**。 あちらは段が動かす状態を読んで毎 frame 決まり直す
+   * (`derived`) のに対し、こちらはつまみが握る値を読む反応の網に載る (`formulas`)。
+   * 描画側がこの 2 つを別の欄として持つため、記法でも別の項目にする。
+   *
+   * 式は描画側の書き方。 名前は中括弧で囲っても囲わなくてもよい (描画側の parser が
+   * どちらも同じ名前として読む)。
+   */
+  formulas?: DslFormula[];
+  /**
+   * 押下などの出来事で動く仕掛け (`events:`、 #1393)。
+   *
+   * 相手は名前で指す。 組み立てが識別子へ直し、指す先が無ければ知らせる。
+   */
+  events?: DslEventBinding[];
+  /**
+   * 巻き上げに応じて進む値 (`scrolls:`、 #1393)。
+   *
+   * 画面を巻き上げた量から 0 から 1 の進み具合を作る。 描画側はこれを値として読む。
+   */
+  scrolls?: DslScrollTrigger[];
   /**
    * canvas pivot (CAR-1693 Phase 1) diagram-level layout mode。 未指定は "auto" default で
    * catalog 100+ backward compat。 "manual" は Phase 4 で drag → pos: 保存の完全 manual mode。
@@ -128,6 +203,49 @@ export type DslActor = {
   eyebrow?: string;
   value?: string;
   rows?: string[];
+  /**
+   * 箱の中に描く図形 (`shape:`、 #1374)。 水位や角度を状態で動かせる。
+   *
+   * 種類ごとに書ける欄が違う (`図形の表`)。 知らない種類と欄は読み取りが知らせる。
+   */
+  shape?: DslDynShape;
+  /**
+   * 箱に出す題 (`title:`、 #1381)。 書かなければ名前がそのまま題になる。
+   *
+   * 名前は図の中で 1 つに決まる必要がある (`focus:` と `flow:` が名前で指すため) 一方、
+   * 題は重なってよい。 同じ題の箱を並べる図と、題を持たない箱を、名前と切り離して書ける。
+   */
+  title?: string;
+  /**
+   * その箱を出すかどうかの条件 (`visibleIf:`、 #1381)。
+   *
+   * 状態を差し込める文字列で、描画側が真偽を判定する。 `"0"` / `"false"` / 空文字が偽で、
+   * それ以外は真。 値だけを見せる図が、場所を空けるためだけの見えない箱を置くのに使う。
+   */
+  visibleIf?: string;
+  /**
+   * 箱の幅と高さを値に追随させる (`wBind:` / `hBind:`、 #1392)。
+   *
+   * 状態の名前を `{名前}` の形で書く。 配置計算は追随前の `posW` / `posH` を使い、
+   * 描く時だけ値に合わせて伸び縮みする (矢印の通り道が動かないようにするための分離)。
+   */
+  wBind?: string;
+  hBind?: string;
+  /**
+   * 箱の濃さ (`opacity:`、 #1392)。 0 から 1 の数か、状態の名前を書く。
+   *
+   * 書かなければ完全に見える状態になる。 `visibleIf` が出す / 出さないの 2 値なのに対し、
+   * こちらは途中の濃さを持てる。
+   */
+  opacity?: number | string;
+  /**
+   * 描く時だけ箱をずらす量 (`renderOffsetX:` / `renderOffsetY:`、 #1392)。
+   *
+   * 配置計算と矢印はずらす前の位置を使うため、円周上に並べて見せる等の見た目専用。
+   * 数か、状態の名前を書く。
+   */
+  renderOffsetX?: number | string;
+  renderOffsetY?: number | string;
   /**
    * 工程の並び (`type: gantt`) で、その工程の担当 (#1251)。
    *
@@ -261,6 +379,17 @@ export type DslStep = {
   /** v0.5+ inline option */
   guard?: string;
   cardinality?: string;
+  /**
+   * 矢印を値に追随させる欄 (`widthBind:` / `strokeBind:` / `dashOffsetBind:`、 #1396)。
+   *
+   * 箱の `wBind` (#1392) と同じ形で、状態やつまみの名前を `{名前}` で書く。
+   * 太さ / 色 / 破線の位置がその値に合わせて動く。 通り道そのものは動かない。
+   */
+  widthBind?: string;
+  strokeBind?: string;
+  dashOffsetBind?: string;
+  /** 矢印がどの辺から出るか (#1385)。 書かなければ描画側が自動で選ぶ */
+  side?: "top" | "right" | "bottom" | "left";
   labelOffsetX?: number;
   labelOffsetY?: number;
   /** true で説明文を矢印の線の上に重ねる。 分岐図の条件ラベル用。 */

package/src/v05/input-table.generated.ts

@@ -0,0 +1,136 @@
+// このファイルは自動生成です。 手で編集しないでください。
+//
+// 出どころ = 描画側 (`@cardenelabs/cdl`) の型定義 `CdlInput`。
+// 作り直す = `node packages/dragon/scripts/gen-input-table.mjs`
+// ずれの検知 = `packages/dragon/test/input-table-generated.test.ts`
+
+import type { 図形の定義 } from "./parser-types";
+
+/** 記法が受けるつまみと、その欄 (`CdlInput` の全種を覆う) */
+export const つまみの表: Record<string, 図形の定義> = {
+  color: {
+    必須: ["defaultValue"],
+    欄: {
+      defaultValue: "文字列",
+      label: "文字列",
+    },
+  },
+  datetime: {
+    必須: ["defaultValue"],
+    欄: {
+      defaultValue: "文字列",
+      label: "文字列",
+    },
+  },
+  dropdown: {
+    必須: ["options", "defaultValue"],
+    欄: {
+      options: "文字列の並び",
+      defaultValue: "文字列",
+      label: "文字列",
+    },
+  },
+  "multi-select": {
+    必須: ["options", "defaultValues"],
+    欄: {
+      options: "文字列の並び",
+      defaultValues: "文字列の並び",
+      label: "文字列",
+    },
+  },
+  number: {
+    必須: ["defaultValue"],
+    欄: {
+      min: "数",
+      max: "数",
+      defaultValue: "数",
+      label: "文字列",
+    },
+  },
+  radio: {
+    必須: ["options", "defaultValue"],
+    欄: {
+      options: "文字列の並び",
+      defaultValue: "文字列",
+      label: "文字列",
+    },
+  },
+  range: {
+    必須: ["min", "max", "defaultLo", "defaultHi"],
+    欄: {
+      min: "数",
+      max: "数",
+      step: "数",
+      defaultLo: "数",
+      defaultHi: "数",
+      label: "文字列",
+    },
+  },
+  slider: {
+    必須: ["min", "max", "defaultValue"],
+    欄: {
+      min: "数",
+      max: "数",
+      step: "数",
+      defaultValue: "数",
+      label: "文字列",
+    },
+  },
+  stepper: {
+    必須: ["defaultValue"],
+    欄: {
+      min: "数",
+      max: "数",
+      step: "数",
+      defaultValue: "数",
+      label: "文字列",
+    },
+  },
+  tabs: {
+    必須: ["options", "defaultValue"],
+    欄: {
+      options: "文字列の並び",
+      defaultValue: "文字列",
+      label: "文字列",
+    },
+  },
+  text: {
+    必須: ["defaultValue"],
+    欄: {
+      defaultValue: "文字列",
+      placeholder: "文字列",
+      maxLength: "数",
+      label: "文字列",
+    },
+  },
+  timeline: {
+    必須: ["duration"],
+    欄: {
+      duration: "数",
+      autoplay: "真偽",
+      loop: "真偽",
+      speeds: "数の並び",
+      defaultSpeedIdx: "数",
+      label: "文字列",
+    },
+  },
+  toggle: {
+    必須: ["defaultValue"],
+    欄: {
+      defaultValue: "真偽",
+      label: "文字列",
+    },
+  },
+  xypad: {
+    必須: ["xMin", "xMax", "yMin", "yMax", "defaultX", "defaultY"],
+    欄: {
+      xMin: "数",
+      xMax: "数",
+      yMin: "数",
+      yMax: "数",
+      defaultX: "数",
+      defaultY: "数",
+      label: "文字列",
+    },
+  },
+};

package/src/v05/parser-types.ts

@@ -0,0 +1,21 @@
+/**
+ * 中括弧の中身を表で読むための型 (#1385 で `parser.ts` から切り出した)。
+ *
+ * **生成した表 (`readout-table.generated.ts`) がこの型を使う**。 `parser.ts` に置いたままだと
+ * 生成した表 → `parser.ts` → 生成した表 の輪ができる。 型だけを別に置けば輪が消える。
+ */
+
+/**
+ * 欄に書ける値の形。
+ *
+ * `真偽` は #1385 で足した。 描画側の部品に `boolean` の欄が 2 つあり、それまでの 5 形では
+ * 書けなかった。
+ *
+ * `数の並び` は #1389 で足した。 描画側のつまみに `readonly number[]` の欄が 1 つあり
+ * (`timeline` の再生速度の候補)、`文字列の並び` として読むと数が文字列のまま図に載る。
+ */
+export type 欄の形 =
+  "数" | "文字列" | "数か文字列" | "文字列の並び" | "数の並び" | "向き" | "組の並び" | "真偽";
+
+/** 1 つの種類が受ける、必須の欄と全欄の形 */
+export type 図形の定義 = { 必須: readonly string[]; 欄: Record<string, 欄の形> };