@cardenelabs/cdl 0.23.0 → 0.25.0

package/src/render/edges.tsx

@@ -3,6 +3,28 @@ import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type LaidEdge } from "../typ
 import { edgeHeadMarkerId } from "./edge-head";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { hasTone, toneColor } from "./tone";
+import type { EdgeRole, Tone } from "../types";
+
+/**
+ * 辺の色 (#618)。 役目を書いた辺だけ「いま」 の色で引く。
+ *
+ * 図の中に道が 2 種 (主となる 1 本と、 そこから枝分かれする預け先) ある時、 どちらも
+ * 同じ色だとどこから読むかが決まらない。 主となる道にだけ別の色を当てて順番を作る。
+ */
+/**
+ * 辺の太さの既定 (#618)。
+ *
+ * 元は光って 5 / 光らず 2.5 で、 消費側 (dragon) が `!important` で 2.25 に上書きしていた。
+ * 実際に画面へ出る 2.25 は箱の枠 (1.75) より太く、 線が箱より前に出ていた。
+ * 箱の枠と釣り合う細さへ下げる。
+ */
+export function defaultEdgeWidth(active: boolean): number {
+  return active ? 2.5 : 1.25;
+}
+
+export function edgeColor(edge: { tone: Tone; role?: EdgeRole }): string {
+  return edge.role === "main" ? "var(--cdl-now, #c0421f)" : toneColor(edge.tone);
+}
 import { EDGE_LABEL_TEXT, fontFamilyAttr, type EdgeLabelLine } from "../label-text";
 import { interpolate, pathSubpath, resolveNumericAttr, shrinkPathEnd } from "./utils";
 
@@ -39,7 +61,7 @@ export function CdlEdgeView({
   progress: number;
   stateValues?: Record<string, string>;
 }): JSX.Element {
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
   // 静的な図では全 edge が同じ色になり、 因果の向き (警戒 = 赤 / 良好 = 緑) が線から読めなかった。
   // 光っている / いないの区別は、 実線は太さ (5 対 2.5) と線種 (実線対破線)、 点線は太さ (5 対 4)
@@ -171,7 +193,7 @@ function SolidEdgePath({
   // 伸ばすのは初めて出る段だけ (#584)。 光っているかで引くと、光り続ける図で毎段引き直される
   const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
   // signal binding: widthBind / strokeBind / dashOffsetBind (CAR edge-signal-binding)
-  const defaultWidth = active ? 5 : 2.5;
+  const defaultWidth = defaultEdgeWidth(active);
   const boundWidth = edge.widthBind && stateValues
     ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth)
     : defaultWidth;
@@ -269,7 +291,7 @@ export function CdlEdgeGlowView({
   active: boolean;
 }): JSX.Element | null {
   if (!active) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   return <EdgeGlowCircles color={color} edgeId={edge.id} />;
 }
 
@@ -286,7 +308,7 @@ export function CdlEdgeLabelView({
   // 空 label でも rect + text で 12.5x12.5 の小 marker が残り、 dragon sweep で
   // node bbox と数十 px² の実測 overlap を生む (mind-demo 61px² 事象)。
   if (!hasRenderedLabel(edge)) return null;
-  const color = toneColor(edge.tone);
+  const color = edgeColor(edge);
   // SSOT = spec.ts の computeLabelBBoxWorld (CAR-431 で render / layout / predict-bbox 3 箇所の
   // bbox 計算 drift を解消)。 pill h / w / padding / boxLeftX / boxTopY は本 helper 経由で取得、
   // <g transform="translate(labelX, labelY)"> 内 rect は相対座標なので world x/y を helper から
@@ -312,19 +334,22 @@ export function CdlEdgeLabelView({
       data-cdl-edge-label-text={edge.label}
       data-cdl-edge-sub-text={edge.sub ?? ""}
     >
-      <rect
-        data-cdl-role="edge-label-bg"
-        x={boxLeftX}
-        y={boxTopY}
-        width={boxW}
-        height={boxH}
-        rx={10}
-        fill="var(--cdl-label-bg, #ffffff)"
-        stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
-        strokeOpacity={active ? 0.9 : 0.55}
-        strokeWidth={1.5}
-        opacity={active ? 1 : 0.92}
-      />
+      {/* 下地は既定で敷く。 丸い下地は箱と同じ形なので、 罫の細い図では外せるようにした (#618) */}
+      {edge.labelPlate !== false && (
+        <rect
+          data-cdl-role="edge-label-bg"
+          x={boxLeftX}
+          y={boxTopY}
+          width={boxW}
+          height={boxH}
+          rx={10}
+          fill="var(--cdl-label-bg, #ffffff)"
+          stroke={active ? color : "var(--cdl-divider, #d4d4d8)"}
+          strokeOpacity={active ? 0.9 : 0.55}
+          strokeWidth={1.5}
+          opacity={active ? 1 : 0.92}
+        />
+      )}
       <text
         data-cdl-role="edge-label"
         x={textX}

package/src/render/stage.tsx

@@ -144,6 +144,13 @@ export function CdlStage({
         // 倍率は SVG 要素そのものに載せる。 中身を包む `<g>` を作らないので、
         // 倍率 1 / 未指定の DOM は従来と 1 byte も変わらない。
         data-cdl-scale={diagramScale === 1 ? undefined : diagramScale}
+        // どの配色で描くか (#1553)。 cdl は色の値を持たず、名前だけを出す。
+        // 消費側 (dragon の theme 等) が名前を見て変数の値を決める。
+        //
+        // **ここでは空文字を弾かない**。 公開経路は `CdlDiagramView` だけで、必ず組み立てを
+        // 通るため、空文字は `layout` が既に落としている。 ここにも守りを置くと、
+        // どの入力でも通らない分岐が残る
+        data-cdl-palette={laid.palette}
       >
         <defs>
           {/* CAR-643 = cdl は geometry only。 shadow / border effect の filter は cdl SVG 内に

package/src/render/template-fields.ts

@@ -61,6 +61,8 @@ type 読まない欄 =
   | "journeyData"
   // 行頭の印 (#578)。 字ではなく形なので、状態から値を差し込む対象にならない
   | "rowMarks"
+  // 1 行おきの縞 (#1553)。 敷くか敷かないかの真偽値で、字を差し込む先が無い
+  | "rowStripe"
   // 時系列のやり取りの中身 (#578)。 種別が内側で解決するので、ここでは差し込まない
   | "sequenceData";
 

package/src/types.ts

@@ -134,6 +134,9 @@ export type Side = "top" | "right" | "bottom" | "left";
  */
 export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
 
+/** 辺の役目 (#618)。 `main` = 図の主となる道 */
+export type EdgeRole = "main";
+
 /**
  * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
  *
@@ -348,6 +351,16 @@ export type CdlNode = {
    * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
    */
   rowMarks?: readonly (RowMark | null)[];
+  /**
+   * 行に 1 行おきの縞を敷くか (#1553)。
+   *
+   * 表の箱は小さい字が密に並ぶので、行を横に追う時の目印が無い。
+   * 色を増やさずに、面を 1 行おきに変えて追えるようにする。
+   *
+   * **既定では敷かない**。 `er` が設計の形で立てた実体だけが持つ。
+   * クラス図も同じ `storage` を使うが、持ち物と振る舞いは行頭の印で既に分かれている。
+   */
+  rowStripe?: boolean;
   /**
    * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
    *
@@ -637,6 +650,21 @@ export type CdlEdge = {
   side?: Side;
   /** visual style、 default "solid" */
   style?: EdgeStyle;
+  /**
+   * 辺の役目 (#618)。 書かなければ従来どおり tone の色で引く。
+   *
+   * `main` を書いた辺だけ「いま」 の色 (`--cdl-now`) で引く。 図の中で 1 本の道を
+   * 目立たせ、 どこから読むかを決めるための口。 すべての辺に書くと差が消えるので、
+   * 主となる 1 本 (または 1 続き) にだけ書く。
+   */
+  role?: EdgeRole;
+  /**
+   * 名前の下地を敷くか (#618)。 書かなければ敷く (従来どおり)。
+   *
+   * 丸い下地は箱と同じ形なので、 名前が小さな箱に見える。 罫の細い図では外したほうが
+   * 線と名前の区別が付く。
+   */
+  labelPlate?: boolean;
   /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
   head?: EdgeHead;
   /**
@@ -2489,6 +2517,17 @@ export type CdlDiagram = {
    * 既定は `"extract"` = 付け忘れても検知が緩まない向き。
    */
   structuredData?: "extract" | "exclude";
+  /**
+   * この図をどの配色で描くか (#1553)。 書かない図は消費側の既定で描かれる。
+   *
+   * **cdl は色の値を持たない**。 名前を `data-cdl-palette` として markup に出すだけで、
+   * 実際の値は消費側 (dragon の theme 等) が名前を見て決める。 値を engine に持たせると、
+   * 消費側が配色を変えるたびに engine の release が要る。
+   *
+   * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-palette]` が
+   * 既定の図にも当たる。
+   */
+  palette?: string;
   /**
    * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
    *
@@ -2693,6 +2732,8 @@ export type BBox = {
 export type LaidDiagram = {
   id: string;
   topic: string;
+  /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
+  palette?: string;
   viewBox: { x: number; y: number; w: number; h: number };
   /**
    * 図全体の倍率 (`CdlViewport.scale` を正規化した値)。