@cardenelabs/cdl 0.59.0 → 0.59.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.59.0",
+  "version": "0.59.1",
   "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/row-align.ts

@@ -133,6 +133,36 @@ export function displayWidth(text: string): number {
   return w;
 }
 
+/**
+ * 字を先頭から半角の桁数 (`displayWidth`) で `桁` に収まるだけ取り、取った字と残りに割る (#851)。
+ *
+ * 2 桁の字が境目をまたぐ時は、その字を残りの側に回す (取った側が `桁` を越えない)。
+ */
+export function 桁で割る(text: string, 桁: number): [string, string] {
+  let w = 0;
+  let 取った = "";
+  for (const ch of text) {
+    const code = ch.codePointAt(0) ?? 0;
+    const 字の桁 = code >= 0x20 && code <= 0x7e ? 1 : 2;
+    if (w + 字の桁 > 桁) break;
+    w += 字の桁;
+    取った += ch;
+  }
+  return [取った, text.slice(取った.length)];
+}
+
+/**
+ * 字が半角の桁数で `上限` を越える時、「上限 - 1」 桁に収まるだけの字に `…` を付けて返す (#851)。
+ *
+ * 読み出しは字数で省いていた。 上限の字数は英字の幅で決めてあり、和文は 1 字が英字のおよそ 2 倍の幅なので
+ * 上限の字数に届く前に枠からはみ出していた。 上限を半角の桁数と読み替えれば、ASCII だけの字は変更前の
+ * `length > 上限 ? slice(0, 上限 - 1) + "…"` と同じ所で省き、和文は半分の字数で省く。
+ */
+export function 桁で省く(text: string, 上限: number): string {
+  if (displayWidth(text) <= 上限) return text;
+  return `${桁で割る(text, 上限 - 1)[0]}…`;
+}
+
 /**
  * rows[] から最低限必要な node width を算出。
  * 左 padding + 左列 max 幅 + col gap + 右列 max 幅 + 右 padding。

package/src/render/interactive-panel.tsx

@@ -16,6 +16,7 @@ import {
 import type { Signal, Computed } from "../reactive";
 import { effect } from "../reactive";
 import { textWidth } from "../kinds/text-width";
+import { 桁で割る, 桁で省く } from "../kinds/row-align";
 
 /**
  * interactive primitive (input widget / formula / scroll trigger / event handler) を SVG diagram に
@@ -7510,7 +7511,7 @@ function KanbanBoardReadout({
                       style={{ userSelect: "none" }}
                     >
                       <title>{task.title}</title>
-                      {task.title.length > 18 ? `${task.title.slice(0, 17)}…` : task.title}
+                      {桁で省く(task.title, 18)}
                     </text>
                   </g>
                 );
@@ -7667,7 +7668,7 @@ function TimelineVerticalReadout({
                 style={{ userSelect: "none" }}
               >
                 <title>{ev.title}</title>
-                {ev.title.length > 38 ? `${ev.title.slice(0, 37)}…` : ev.title}
+                {桁で省く(ev.title, 38)}
               </text>
               {ev.description ? (
                 <text
@@ -7678,7 +7679,7 @@ function TimelineVerticalReadout({
                   style={{ userSelect: "none" }}
                 >
                   <title>{ev.description}</title>
-                  {ev.description.length > 44 ? `${ev.description.slice(0, 43)}…` : ev.description}
+                  {桁で省く(ev.description, 44)}
                 </text>
               ) : null}
             </g>
@@ -8036,7 +8037,7 @@ function StepProgressReadout({
                 style={{ userSelect: "none" }}
               >
                 <title>{s}</title>
-                {s.length > 10 ? `${s.slice(0, 9)}…` : s}
+                {桁で省く(s, 10)}
               </text>
             </g>
           );
@@ -8102,7 +8103,7 @@ function UserPresenceReadout({
                 fill="#0f172a"
                 style={{ userSelect: "none" }}
               >
-                {u.name.length > 24 ? `${u.name.slice(0, 23)}…` : u.name}
+                {桁で省く(u.name, 24)}
               </text>
               <text
                 x={width - 4}
@@ -8272,7 +8273,7 @@ function OrgChartMiniReadout({
                       style={{ userSelect: "none" }}
                     >
                       <title>{n.name}</title>
-                      {n.name.length > 10 ? `${n.name.slice(0, 9)}…` : n.name}
+                      {桁で省く(n.name, 10)}
                     </text>
                     {lvl < 2 && byLevel[lvl + 1]!.length > 0 ? (
                       <line
@@ -8887,7 +8888,7 @@ function FileDropzoneReadout({
             </text>
             <text x={54} y={34} fontSize={12} fontWeight={600} fill="#0f172a" style={{ userSelect: "none" }}>
               <title>{filename}</title>
-              {filename.length > 26 ? `${filename.slice(0, 25)}…` : filename}
+              {桁で省く(filename, 26)}
             </text>
             <text x={54} y={50} fontSize={10} fill="#64748b" style={{ userSelect: "none" }}>
               <字 k="readout.dropzone.uploaded" />
@@ -8972,7 +8973,7 @@ function LogStreamReadout({
         <rect x={0} y={0} width={width} height={height} fill="#0f172a" rx={4} />
         {shown.map((r, i) => {
           const y = 4 + i * rowH;
-          const displayMsg = r.msg.length > 24 ? `${r.msg.slice(0, 23)}…` : r.msg;
+          const displayMsg = 桁で省く(r.msg, 24);
           return (
             <g key={i} data-cdl-log-row={i}>
               <text x={6} y={y + 12} fontSize={9} fill="#94a3b8" fontFamily="monospace" style={{ userSelect: "none" }}>
@@ -9071,7 +9072,7 @@ function AlertBannerReadout({
           style={{ userSelect: "none" }}
         >
           <title>{message}</title>
-          {message.length > 32 ? `${message.slice(0, 31)}…` : message}
+          {桁で省く(message, 32)}
         </text>
       </svg>
     </div>
@@ -9144,7 +9145,7 @@ function ServiceHealthReadout({
                 style={{ userSelect: "none" }}
               >
                 <title>{s.name}</title>
-                {s.name.length > 10 ? `${s.name.slice(0, 9)}…` : s.name}
+                {桁で省く(s.name, 10)}
               </text>
             </g>
           );
@@ -9328,7 +9329,7 @@ function PricingTierReadout({
         </text>
         {features.slice(0, 3).map((f, i) => {
           const y = 96 + i * 18;
-          const displayF = f.length > 24 ? `${f.slice(0, 23)}…` : f;
+          const displayF = 桁で省く(f, 24);
           return (
             <g key={i} data-cdl-tier-feature={i}>
               <text x={16} y={y} fontSize={11} fill={colorAccent} style={{ userSelect: "none" }}>
@@ -9487,6 +9488,9 @@ function ArticlePreviewReadout({
   const width = 300;
   const height = 116;
   const thumbW = 80;
+  // 抜粋は 1 行 28 桁で 2 行に割る (#851)。 1 行目は収まるだけ置いて `…` を付けず、残りを 2 行目に続ける。
+  // 以前は 1 行目を 27 字と `…` で切り、2 行目を 29 字目から描いていたので、28 字目がどちらの行にも出なかった
+  const [抜粋の一行目, 抜粋の残り] = 桁で割る(excerpt, 28);
   return (
     <div className="cdl-ip-item cdl-ip-readout-article-preview" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
@@ -9518,14 +9522,14 @@ function ArticlePreviewReadout({
           style={{ userSelect: "none" }}
         >
           <title>{title}</title>
-          {title.length > 26 ? `${title.slice(0, 25)}…` : title}
+          {桁で省く(title, 26)}
         </text>
         <text x={thumbW + 20} y={44} fontSize={10} fill="#334155" style={{ userSelect: "none" }}>
           <title>{excerpt}</title>
-          {excerpt.length > 28 ? `${excerpt.slice(0, 27)}…` : excerpt}
+          {抜粋の一行目}
         </text>
         <text x={thumbW + 20} y={60} fontSize={10} fill="#334155" style={{ userSelect: "none" }}>
-          {excerpt.length > 56 ? `${excerpt.slice(28, 55)}…` : excerpt.slice(28, 56)}
+          {桁で省く(抜粋の残り, 28)}
         </text>
         <text x={thumbW + 20} y={height - 14} fontSize={10} fontWeight={600} fill="#64748b" style={{ userSelect: "none" }}>
           <字 k="readout.article.by" v={{ author }} />
@@ -9588,7 +9592,7 @@ function TocNavReadout({
         {shown.map((it, i) => {
           const y = 4 + i * rowH;
           const indent = 12 + it.level * 16;
-          const displayT = it.title.length > 30 ? `${it.title.slice(0, 29)}…` : it.title;
+          const displayT = 桁で省く(it.title, 30);
           return (
             <g key={i} data-cdl-toc-item={i}>
               {it.active ? (