@cardenelabs/dragon 0.13.0 → 0.14.0

package/src/schemas/diagram.json

@@ -368,6 +368,36 @@
                     "required": ["sides"]
                   }
                 ]
+              },
+              "wBind": {
+                "type": "string",
+                "minLength": 1,
+                "pattern": "\\S",
+                "description": "箱の幅を値に追随させる。 状態の名前を {名前} の形で書く。 配置計算は追随前の大きさを使う"
+              },
+              "hBind": {
+                "type": "string",
+                "minLength": 1,
+                "pattern": "\\S",
+                "description": "箱の高さを値に追随させる。 wBind と同じ読み方"
+              },
+              "opacity": {
+                "type": ["number", "string"],
+                "minLength": 1,
+                "pattern": "\\S",
+                "description": "箱の濃さ。 0 から 1 の数か、状態の名前。 書かなければ完全に見える"
+              },
+              "renderOffsetX": {
+                "type": ["number", "string"],
+                "minLength": 1,
+                "pattern": "\\S",
+                "description": "描く時だけ箱を横へずらす量。 配置計算と矢印はずらす前の位置を使う"
+              },
+              "renderOffsetY": {
+                "type": ["number", "string"],
+                "minLength": 1,
+                "pattern": "\\S",
+                "description": "描く時だけ箱を縦へずらす量。 renderOffsetX と同じ読み方"
               }
             }
           }
@@ -459,6 +489,24 @@
                 "type": "number"
               }
             }
+          },
+          "widthBind": {
+            "type": "string",
+            "minLength": 1,
+            "pattern": "\\S",
+            "description": "線の太さを値に追随させる。 状態やつまみの名前を {名前} の形で書く"
+          },
+          "strokeBind": {
+            "type": "string",
+            "minLength": 1,
+            "pattern": "\\S",
+            "description": "線の色を値に追随させる。 widthBind と同じ読み方"
+          },
+          "dashOffsetBind": {
+            "type": "string",
+            "minLength": 1,
+            "pattern": "\\S",
+            "description": "破線の位置を値に追随させる (流れているように見せる)。 widthBind と同じ読み方"
           }
         }
       }
@@ -1485,6 +1533,314 @@
           }
         ]
       }
+    },
+    "inputs": {
+      "type": "array",
+      "description": "読む人が動かすつまみ。 値を握り、箱の文字や部品がその値を追いかける。 箱ではないので縦列に載らず、図全体に 1 つの並びとして持つ。",
+      "items": {
+        "type": "object",
+        "required": ["id", "kind"],
+        "additionalProperties": false,
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1
+          },
+          "kind": {
+            "type": "string",
+            "enum": [
+              "color",
+              "datetime",
+              "dropdown",
+              "multi-select",
+              "number",
+              "radio",
+              "range",
+              "slider",
+              "stepper",
+              "tabs",
+              "text",
+              "timeline",
+              "toggle",
+              "xypad"
+            ]
+          },
+          "autoplay": {
+            "type": "boolean"
+          },
+          "defaultHi": {
+            "type": "number"
+          },
+          "defaultLo": {
+            "type": "number"
+          },
+          "defaultSpeedIdx": {
+            "type": "number"
+          },
+          "defaultValue": {
+            "type": ["boolean", "number", "string"]
+          },
+          "defaultValues": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "defaultX": {
+            "type": "number"
+          },
+          "defaultY": {
+            "type": "number"
+          },
+          "duration": {
+            "type": "number"
+          },
+          "label": {
+            "type": "string"
+          },
+          "loop": {
+            "type": "boolean"
+          },
+          "max": {
+            "type": "number"
+          },
+          "maxLength": {
+            "type": "number"
+          },
+          "min": {
+            "type": "number"
+          },
+          "options": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "placeholder": {
+            "type": "string"
+          },
+          "speeds": {
+            "type": "array",
+            "items": {
+              "type": "number"
+            }
+          },
+          "step": {
+            "type": "number"
+          },
+          "xMax": {
+            "type": "number"
+          },
+          "xMin": {
+            "type": "number"
+          },
+          "yMax": {
+            "type": "number"
+          },
+          "yMin": {
+            "type": "number"
+          }
+        },
+        "oneOf": [
+          {
+            "properties": {
+              "kind": {
+                "enum": ["color", "datetime", "text"]
+              },
+              "defaultValue": {
+                "type": "string"
+              }
+            },
+            "required": ["defaultValue"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["dropdown", "radio", "tabs"]
+              },
+              "defaultValue": {
+                "type": "string"
+              }
+            },
+            "required": ["options", "defaultValue"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["multi-select"]
+              }
+            },
+            "required": ["options", "defaultValues"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["number", "stepper"]
+              },
+              "defaultValue": {
+                "type": "number"
+              }
+            },
+            "required": ["defaultValue"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["range"]
+              }
+            },
+            "required": ["min", "max", "defaultLo", "defaultHi"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["slider"]
+              },
+              "defaultValue": {
+                "type": "number"
+              }
+            },
+            "required": ["min", "max", "defaultValue"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["timeline"]
+              }
+            },
+            "required": ["duration"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["toggle"]
+              },
+              "defaultValue": {
+                "type": "boolean"
+              }
+            },
+            "required": ["defaultValue"]
+          },
+          {
+            "properties": {
+              "kind": {
+                "enum": ["xypad"]
+              }
+            },
+            "required": ["xMin", "xMax", "yMin", "yMax", "defaultX", "defaultY"]
+          }
+        ]
+      }
+    },
+    "formulas": {
+      "type": "object",
+      "description": "つまみの値から決まる値。 名前を鍵、式を値に書く。 `values` とは経路が別で、式は名前を中括弧で囲わない (例 \"input * 2\")。",
+      "additionalProperties": {
+        "type": "string",
+        "minLength": 1,
+        "pattern": "\\S"
+      },
+      "propertyNames": {
+        "pattern": "^[A-Za-z_][A-Za-z0-9_]*$"
+      }
+    },
+    "events": {
+      "type": "array",
+      "description": "押下などの出来事で動く仕掛け。 相手は名前で指す (box / lane / arrow / diagram のどれか 1 つ)。",
+      "items": {
+        "type": "object",
+        "required": ["on", "handler"],
+        "additionalProperties": false,
+        "properties": {
+          "on": {
+            "type": "string",
+            "enum": [
+              "click",
+              "hover",
+              "double-click",
+              "long-press",
+              "drag",
+              "drop",
+              "keydown",
+              "focus",
+              "blur"
+            ]
+          },
+          "handler": {
+            "type": "string",
+            "minLength": 1,
+            "pattern": "\\S"
+          },
+          "box": {
+            "type": "string",
+            "minLength": 1,
+            "description": "箱の名前"
+          },
+          "lane": {
+            "type": "string",
+            "minLength": 1,
+            "description": "縦列の名前"
+          },
+          "arrow": {
+            "type": "string",
+            "minLength": 1,
+            "pattern": "^(?!.*->.*->)\\s*\\S(?:.*\\S)?\\s*->\\s*\\S(?:.*\\S)?\\s*$",
+            "description": "矢印。 `A -> B` の形で両端の名前を書く"
+          },
+          "diagram": {
+            "const": true,
+            "description": "図全体を指す"
+          }
+        },
+        "oneOf": [
+          {
+            "required": ["box"]
+          },
+          {
+            "required": ["lane"]
+          },
+          {
+            "required": ["arrow"]
+          },
+          {
+            "required": ["diagram"]
+          }
+        ]
+      }
+    },
+    "scrolls": {
+      "type": "object",
+      "description": "巻き上げに応じて進む値。 画面を巻き上げた量から 0 から 1 の進み具合を作る。",
+      "propertyNames": {
+        "pattern": "^[A-Za-z_][A-Za-z0-9_]*$"
+      },
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": false,
+        "properties": {
+          "start": {
+            "type": "number",
+            "minimum": 0,
+            "maximum": 1,
+            "description": "進み具合が 0 になる画面上の位置 (0 が上端、1 が下端)"
+          },
+          "end": {
+            "type": "number",
+            "minimum": 0,
+            "maximum": 1,
+            "description": "進み具合が 1 になる画面上の位置"
+          },
+          "scrub": {
+            "type": "number",
+            "minimum": 0,
+            "maximum": 1,
+            "description": "巻き上げへの追随度合い (0 が段階的、1 が連続)"
+          },
+          "label": {
+            "type": "string"
+          }
+        }
+      }
     }
   }
 }

package/src/types.ts

@@ -16,6 +16,36 @@ 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"
@@ -112,6 +142,35 @@ export type DslDocument = {
    * 箱ではないので縦列に載らない。 図全体に 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。
@@ -164,6 +223,29 @@ export type DslActor = {
    * それ以外は真。 値だけを見せる図が、場所を空けるためだけの見えない箱を置くのに使う。
    */
   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)。
    *
@@ -297,6 +379,15 @@ 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;

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

@@ -10,8 +10,12 @@
  *
  * `真偽` は #1385 で足した。 描画側の部品に `boolean` の欄が 2 つあり、それまでの 5 形では
  * 書けなかった。
+ *
+ * `数の並び` は #1389 で足した。 描画側のつまみに `readonly number[]` の欄が 1 つあり
+ * (`timeline` の再生速度の候補)、`文字列の並び` として読むと数が文字列のまま図に載る。
  */
-export type 欄の形 = "数" | "文字列" | "数か文字列" | "文字列の並び" | "向き" | "組の並び" | "真偽";
+export type 欄の形 =
+  "数" | "文字列" | "数か文字列" | "文字列の並び" | "数の並び" | "向き" | "組の並び" | "真偽";
 
 /** 1 つの種類が受ける、必須の欄と全欄の形 */
 export type 図形の定義 = { 必須: readonly string[]; 欄: Record<string, 欄の形> };