@cardenelabs/cdl 0.69.0 → 0.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.69.0",
+  "version": "0.70.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/kinds/dyn-shape.tsx

@@ -137,11 +137,23 @@ function renderRect(
         clipPath={`url(#dyn-rect-clip-${node.id})`}
         style={{ transition: "all 200ms ease-out" }}
       />
-      {/* value label */}
+      {/*
+        読み取り値。 **箱の右端に揃える** (#870)。
+
+        中央に置くと、同じ帯の上下を繋ぐ矢印と必ず重なる。 矢印は受け手の上端の中央へ
+        真下から入り、読み取り値は上端の中央の真上に出るので、置き場所が同じになる。
+        利用側の 4 枚が 4 枚とも、矢印の先が数字の区切りに刺さって `10 ⯆ 10` に見えていた。
+
+        右端へ寄せると、中央の縦の通り道が空く。 矢印の側ではなく数字の側を動かすのは、
+        矢印の取り付き点が 2 本並んだ時の振り分けを既に持っており、そこへ別の理由で
+        ずらす条件を足すと両方が効いた時の位置が読めなくなるため。
+
+        揃える先を右にしたのは、箱の右上が空いている図が多いから (左上には枠の題が来る)。
+      */}
       <text
-        x={x + w / 2}
+        x={x + w}
         y={y - 6}
-        textAnchor="middle"
+        textAnchor="end"
         fontSize={11}
         fontFamily="monospace"
         fill="var(--cdl-text-dim, #5a6270)"