@cardenelabs/cdl 0.42.0 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/lanes.ts

@@ -219,7 +219,20 @@ export function expandLaneGapsForEdgeLabels(
   // 修正 = edge が跨ぐ全ての隣接 lane 対に対して、 その edge の labelBoxW を要求する。
   // label が span 内のどの対に置かれても収まることを保証する (routing 前なので
   // 実際の label x は未定、 保守的に全対へ課す)。
-  const requiredBoxWByPair = new Array<number>(Math.max(0, sortedByX.length - 1)).fill(0);
+  //
+  // **要求は 2 種類に分ける** (`#789`)。 起点にできる位置が違うため。
+  //
+  // | 辺の形 | label が入りうる場所 | 起点 |
+  // |---|---|---|
+  // | 隣り合う 2 lane を発着 | 発着の 2 lane の内側と その間 | node の縁 |
+  // | 2 対以上を跨ぐ | 途中の lane の内側にも入りうる | lane の縁 |
+  //
+  // Axis 64 (`lane-border-clearance`) は **発着以外の lane** の border を貫くことだけを見る
+  // (`allowedLanes`)。 隣り合う辺の label が入るのは発着の 2 lane に閉じるので判定の対象外に
+  // なり、 node の縁を起点にしても新しい違反にならない。 跨ぐ辺は途中の lane を貫きうるので
+  // lane の縁のまま残す。
+  const requiredBoxWAdjacent = new Array<number>(Math.max(0, sortedByX.length - 1)).fill(0);
+  const requiredBoxWSpanning = new Array<number>(Math.max(0, sortedByX.length - 1)).fill(0);
   for (const edge of edges) {
     const fromLane = nodeById.get(edge.from)?.lane;
     const toLane = nodeById.get(edge.to)?.lane;
@@ -231,11 +244,27 @@ export function expandLaneGapsForEdgeLabels(
     if (labelBoxW === 0) continue;
     const lo = Math.min(fi, ti);
     const hi = Math.max(fi, ti);
+    const 要求 = hi - lo === 1 ? requiredBoxWAdjacent : requiredBoxWSpanning;
     for (let pair = lo; pair < hi; pair++) {
-      if (labelBoxW > requiredBoxWByPair[pair]!) requiredBoxWByPair[pair] = labelBoxW;
+      if (labelBoxW > 要求[pair]!) 要求[pair] = labelBoxW;
     }
   }
 
+  /**
+   * lane の中で最も広い node の半幅。 node を 1 つも持たない lane は 0。
+   *
+   * 最大で取るのは、 一番広い node の縁から数えないと label がその node に被るため。
+   *
+   * **0 になる lane は `requiredBoxWAdjacent` の分岐に入らない**。 隣り合う要求が立つのは
+   * 発着の node が両 lane に居る edge がある時だけで、 その時どちらの lane も node を持つ。
+   * 使う側で 0 を除ける必要はない。
+   */
+  const 箱の半幅 = new Map<string, number>();
+  for (const n of nodes) {
+    const 今 = 箱の半幅.get(n.lane) ?? 0;
+    if (n.w / 2 > 今) 箱の半幅.set(n.lane, n.w / 2);
+  }
+
   // 各 隣接対が必要とする pitch (lane 中心間距離) を求め、 その最大値に全対を揃える。
   //
   // pitch を対ごとではなく全体で揃える理由 (Issue #202)。
@@ -250,26 +279,34 @@ export function expandLaneGapsForEdgeLabels(
   for (let i = 0; i < sortedByX.length - 1; i++) {
     const lane = sortedByX[i]!;
     const rightLane = sortedByX[i + 1]!;
-    const halfSum = lane.width / 2 + rightLane.width / 2;
+    const laneHalfSum = lane.width / 2 + rightLane.width / 2;
+    const nodeHalfSum = (箱の半幅.get(lane.id) ?? 0) + (箱の半幅.get(rightLane.id) ?? 0);
     const currentPitch = rightLane.x + rightLane.width / 2 - (lane.x + lane.width / 2);
-    const maxLabelBoxW = requiredBoxWByPair[i]!;
+    const 隣 = requiredBoxWAdjacent[i]!;
+    const 跨 = requiredBoxWSpanning[i]!;
     // edge が跨がない対は label 収納の要求がない。 下限を課さず現状の pitch を維持する。
     // author が意図的に lane を重ねた図 (resolveOverlaps が y 軸 shift で解消する edge case) を
     // engine が勝手に引き離さないため。
-    if (maxLabelBoxW === 0) {
+    if (隣 === 0 && 跨 === 0) {
       requiredPitchByPair.push(currentPitch);
       continue;
     }
-    const requiredGap = maxLabelBoxW + CLEARANCE_NODE_LABEL * 2 + EDGE_STUB_OUT * 2;
-    requiredPitchByPair.push(Math.max(currentPitch, requiredGap + halfSum));
+    // 上乗せ (node と label の余白 + 経路の突き出し) は どちらの起点でも同じ。
+    const 上乗せ = CLEARANCE_NODE_LABEL * 2 + EDGE_STUB_OUT * 2;
+    const 隣の要求 = 隣 === 0 ? 0 : 隣 + 上乗せ + nodeHalfSum;
+    const 跨の要求 = 跨 === 0 ? 0 : 跨 + 上乗せ + laneHalfSum;
+    requiredPitchByPair.push(Math.max(currentPitch, 隣の要求, 跨の要求));
   }
   // 整数に切り上げる。 pitch は label 幅から決まり、 label 幅は 1 文字あたりの送り幅
   // (1.08 em 等) × font size で出すため小数になる。 その小数がそのまま lane の x に乗り、
-  // node 中心 → edge label の x へ順に伝わって、 図全体の座標が非整数になっていた
-  // (実測 = dragon catalog 412 図で subpixel warn 936 件、 うち 9 割超が x 軸)。
+  // node 中心 → edge label の x へ順に伝わって、 図全体の座標が非整数になる。
+  //
+  // 元の根拠は「非整数座標は SVG が subpixel で描くので輪郭がにじむ」 だったが、 にじみは
+  // device pixel で起きるのに world 座標を見ていたため、 それを測っていた軸 33 は `#783` で
+  // 畳んだ。 切り上げ自体は残す = 座標が整数に揃うと図全体の値が読みやすく、 外すと 444 枚
+  // すべての lane の x が動く一方で得るものが無い。
   //
-  // SVG は非整数座標を subpixel で描くため線や文字の輪郭がにじむ。 切り上げなので
-  // label 収納に必要な幅は必ず確保される (切り捨てると label がはみ出す)。
+  // 切り上げなので label 収納に必要な幅は必ず確保される (切り捨てると label がはみ出す)。
   const targetPitch = Math.ceil(Math.max(...requiredPitchByPair));
 
   // 先頭 lane の x を固定し (viewBox 原点維持)、 以降を targetPitch 間隔で再配置する。

package/src/visual-validate.ts

@@ -3062,22 +3062,50 @@ function runAxes(
   // 縦横比 1.4 なので 1 度も拾われず、 縦横比が最大の図 (比 8.0、 幅 1535 world) は 15.8px で
   // 十分読めた。 文字が小さい上位 20 枚のうち縦横比が拾ったのは 5 枚だけ (`#785`)。
   //
-  // 幅の **下限** は見ない。 viewBox width が小さいほど倍率が上がって読みやすくなるので、
+  // 幅の **下限** は見ない。 寸法が小さいほど倍率が上がって読みやすくなるので、
   // 「幅が小さい = 識別不能」 は成り立たない。 以前 400 world 未満を warn にしていた頃に
   // 発火した 17 件は全て単体部品の図 (271-390 world) で、 幅 375px の携帯では 1.0-1.38 倍に
   // 拡大される最も読みやすい部類だった。
   //
+  // `#785` は幅だけを見ていた。 図は `preserveAspectRatio="xMidYMid meet"` で器に収まるよう
+  // 中で縮むため、 **横が余っていても縦が足りなければ縦が倍率を決める**。 下流の見本帳を
+  // 画面で測ると 28 回のうち 27 回は縦が効いており、 幅から出す見込みは縦が長い図で
+  // 2.4-2.5 倍に外れていた (実測 = 1255×1700 の図が見込み 19.3px に対し実測 8.2px、
+  // 875×1256 の図が 27.7px に対し 11.0px)。 順位も逆を向く = 2190×2904 の図は見込みで
+  // 14 枚中 9 位だが実測は最下位だった。 `#793` で倍率の下限に置き換えた。
+  //
   // 描画不能な寸法 (0 / 負値 / 非有限) は別に拾う。 倍率は 0 幅で無限大になり、 負値で
   // 符号が反転して比較が素通りするため、 割る前に弾く。
   // ───────────────────────────────────────────────────────────
   //
   /**
-   * 判定に使う親要素の幅 (px)。 書き出しの窓 1600px から左右の余白を引いた実測の見当。
+   * 判定に使う器の幅 (px)。 下流の見本帳の拡大表示を画面で測った値から導く。
+   *
+   * 拡大表示の枠は `min(1200px, 94vw)` で、 中身は 1px の縁と 24px の余白の内側に描かれる。
+   * 画面が 1280px 以上なら 1200 が効くので、 そこから縁 2 枚と余白 2 枚を引く。
+   * 得られる 1150px は画面での実測と一致する。
    *
-   * **実際の親幅は呼び出し側が決める**。 engine はそれを知らないので、 判定の基準として
+   * **実際の器は呼び出し側が決める**。 engine はそれを知らないので、 判定の基準として
    * 1 つ選ぶ。 選んだ値そのものが閾値の意味を決めるため、 定数として出す。
    */
-  const RESPONSIVE_REF_CONTAINER_PX = 1100;
+  const RESPONSIVE_REF_FRAME_W_PX = 1200;
+  const RESPONSIVE_REF_FRAME_BORDER_PX = 1;
+  const RESPONSIVE_REF_FRAME_PAD_PX = 24;
+  const RESPONSIVE_REF_CONTAINER_W_PX =
+    RESPONSIVE_REF_FRAME_W_PX - RESPONSIVE_REF_FRAME_BORDER_PX * 2 - RESPONSIVE_REF_FRAME_PAD_PX * 2;
+  /**
+   * 判定に使う器の高さ (px)。 同じ拡大表示の高さの頭打ち (`90vh − 180px`) を、
+   * 基準の画面の高さ 900px で評価した値。
+   *
+   * **高さを見ないと判定にならない** (`#793`)。 図は `preserveAspectRatio="xMidYMid meet"` で
+   * 器に収まるよう中で縮むため、 横が余っていても縦が足りなければ縦が倍率を決める。
+   * 画面での実測 28 回のうち 27 回は縦が効いていた。
+   */
+  const RESPONSIVE_REF_VIEWPORT_H_PX = 900;
+  const RESPONSIVE_REF_FRAME_H_RATIO = 0.9;
+  const RESPONSIVE_REF_CHROME_H_PX = 180;
+  const RESPONSIVE_REF_CONTAINER_H_PX =
+    RESPONSIVE_REF_VIEWPORT_H_PX * RESPONSIVE_REF_FRAME_H_RATIO - RESPONSIVE_REF_CHROME_H_PX;
   /**
    * 画面上で読めると見なす文字の下限 (px)。
    *
@@ -3093,9 +3121,6 @@ function runAxes(
    * ほぼ全ての図が境を割る。 最も多く出る文字で見る。
    */
   const RESPONSIVE_BASE_FONT_WORLD = 22;
-  /** 上の 3 つから導く viewBox width の上限。 数を直接書かない。 */
-  const RESPONSIVE_MAX_VIEWBOX_W =
-    (RESPONSIVE_BASE_FONT_WORLD * RESPONSIVE_REF_CONTAINER_PX) / RESPONSIVE_MIN_ON_SCREEN_FONT_PX;
   const vbResp = laid.viewBox;
   if (
     !(vbResp.w > 0) ||
@@ -3108,15 +3133,28 @@ function runAxes(
       `viewBox 寸法 ${vbResp.w}×${vbResp.h} が描画不能 (正の有限値である必要がある)`,
       "warn",
     );
-  } else if (vbResp.w > RESPONSIVE_MAX_VIEWBOX_W) {
-    const 画面上の字 = (RESPONSIVE_BASE_FONT_WORLD * RESPONSIVE_REF_CONTAINER_PX) / vbResp.w;
-    push(
-      "responsive-viewport",
-      `viewBox width ${vbResp.w} が上限 ${RESPONSIVE_MAX_VIEWBOX_W.toFixed(0)} 超え ` +
-        `(親幅 ${RESPONSIVE_REF_CONTAINER_PX}px で箱の題が ${画面上の字.toFixed(1)}px、 ` +
-        `下限 ${RESPONSIVE_MIN_ON_SCREEN_FONT_PX}px)`,
-      "warn",
-    );
+  } else {
+    // 器に収めた時に効く倍率。 `xMidYMid meet` は縦横の小さい方に合わせる。
+    const 横の倍率 = RESPONSIVE_REF_CONTAINER_W_PX / vbResp.w;
+    const 縦の倍率 = RESPONSIVE_REF_CONTAINER_H_PX / vbResp.h;
+    const 倍率 = Math.min(横の倍率, 縦の倍率);
+    const 画面上の字 = RESPONSIVE_BASE_FONT_WORLD * 倍率;
+    if (画面上の字 < RESPONSIVE_MIN_ON_SCREEN_FONT_PX) {
+      // **効いた辺を出す**。 出さないと、 幅を削っても直らない図で書き手が幅を削り続ける
+      // (実測 = 1255×1700 の図は幅を半分にしても縦が効いたまま)。
+      const 効く辺 = 横の倍率 <= 縦の倍率 ? "横" : "縦";
+      const 収まる寸法 =
+        効く辺 === "横"
+          ? `幅 ${((RESPONSIVE_REF_CONTAINER_W_PX * RESPONSIVE_BASE_FONT_WORLD) / RESPONSIVE_MIN_ON_SCREEN_FONT_PX).toFixed(0)} 以下`
+          : `高さ ${((RESPONSIVE_REF_CONTAINER_H_PX * RESPONSIVE_BASE_FONT_WORLD) / RESPONSIVE_MIN_ON_SCREEN_FONT_PX).toFixed(0)} 以下`;
+      push(
+        "responsive-viewport",
+        `viewBox ${vbResp.w}×${vbResp.h} は器 ${RESPONSIVE_REF_CONTAINER_W_PX}×${RESPONSIVE_REF_CONTAINER_H_PX}px で ` +
+          `${倍率.toFixed(3)} 倍に縮み、 箱の題が ${画面上の字.toFixed(1)}px になる ` +
+          `(下限 ${RESPONSIVE_MIN_ON_SCREEN_FONT_PX}px、 倍率を決めたのは ${効く辺}、 ${収まる寸法}にすると届く)`,
+        "warn",
+      );
+    }
   }
 
   // ───────────────────────────────────────────────────────────