@cardenelabs/cdl 0.18.1 → 0.20.0

package/dist/react.cjs

@@ -800,6 +800,54 @@ function buildDiagramAltText(topic, phase) {
   else if (body) parts.push(body);
   return parts.join(" ");
 }
+var \u6BB5\u306E\u4F4D\u7F6E = {
+  actor: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 86, size: 32 }, \u8AAC\u660E: { y: 140, size: 20 } },
+  function: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 86, size: 24 }, \u8AAC\u660E: { y: 126, size: 20 } },
+  event: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 88, size: 26 }, \u8AAC\u660E: { y: 128, size: 21 } },
+  card: { \u76EE\u5370: { y: 38, size: 18 }, \u540D\u524D: { y: 86, size: 24 }, \u8AAC\u660E: { y: 124, size: 21 } },
+  storage: {
+    \u76EE\u5370: { y: 38, size: 18 },
+    \u540D\u524D: { y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT },
+    \u8AAC\u660E: { y: 118, size: 20 }
+  }
+};
+var \u6C4E\u7528\u306E\u6BB5 = {
+  \u76EE\u5370: { y: 32, size: 17 },
+  \u540D\u524D: { y: GENERIC_TITLE_TOP, size: GENERIC_TITLE_FONT },
+  \u8AAC\u660E: { y: 96, size: 17 }
+};
+function \u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, hasRows) {
+  if (hasRows) return false;
+  if (kind === void 0) return false;
+  if (genericTextCentered(kind, false)) return false;
+  return kind in \u6BB5\u306E\u4F4D\u7F6E || rendersRows(kind);
+}
+function \u6BB5\u3092\u5F15\u304F(kind) {
+  const \u56FA\u6709 = \u6BB5\u306E\u4F4D\u7F6E[kind];
+  if (\u56FA\u6709) return \u56FA\u6709;
+  if (rendersRows(kind)) return \u6C4E\u7528\u306E\u6BB5;
+  return null;
+}
+function \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(kind, hasRows = false) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, hasRows)) return 0;
+  const \u6BB5 = \u6BB5\u3092\u5F15\u304F(kind);
+  if (!\u6BB5) return 0;
+  const \u4E0A\u3052\u308B = \u6BB5.\u540D\u524D.y - \u6BB5.\u76EE\u5370.y + (\u6BB5.\u76EE\u5370.size - \u6BB5.\u540D\u524D.size) * GLYPH_CAP_RATIO;
+  return Math.max(0, Math.round(\u4E0A\u3052\u308B));
+}
+function \u8AAC\u660E\u306A\u3057\u3067\u7E2E\u3080\u91CF(kind, hasRows = false) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, hasRows)) return 0;
+  const \u6BB5 = \u6BB5\u3092\u5F15\u304F(kind);
+  if (!\u6BB5) return 0;
+  return Math.max(0, \u6BB5.\u8AAC\u660E.y - \u6BB5.\u540D\u524D.y);
+}
+function \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(kind, \u6E80\u8F09h, \u4E2D\u8EAB) {
+  if (!\u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(kind, \u4E2D\u8EAB.hasRows)) return \u6E80\u8F09h;
+  if (\u4E2D\u8EAB.hasValue) return \u6E80\u8F09h;
+  const \u5F15\u304F = (\u4E2D\u8EAB.hasEyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(kind)) + (\u4E2D\u8EAB.hasSubtitle ? 0 : \u8AAC\u660E\u306A\u3057\u3067\u7E2E\u3080\u91CF(kind));
+  return Math.max(MIN_BOX_H, \u6E80\u8F09h - \u5F15\u304F);
+}
+var MIN_BOX_H = 44;
 
 // src/layout/footer-shape.ts
 var SHAPE_DRAW_UP_EXTENT = {
@@ -1964,35 +2012,35 @@ var TOKENS = {
   contain_pad: 28,
   // node sizes (kind ごと、 unified row h は engine が max() で算出)
   node: {
-    actor: { w: 340, h: 200 },
-    function: { w: 380, h: 170 },
+    actor: { w: 340, h: 165 },
+    function: { w: 380, h: 151 },
     storage: { w: 400, h: 240 },
-    event: { w: 360, h: 200 },
+    event: { w: 360, h: 156 },
     card: { w: 320, h: 150 },
     // 人系
-    person: { w: 280, h: 180 },
-    "user-group": { w: 320, h: 180 },
-    admin: { w: 280, h: 180 },
-    developer: { w: 280, h: 180 },
-    "external-user": { w: 300, h: 180 },
+    person: { w: 280, h: 116 },
+    "user-group": { w: 320, h: 116 },
+    admin: { w: 280, h: 116 },
+    developer: { w: 280, h: 116 },
+    "external-user": { w: 300, h: 116 },
     // インフラ
-    database: { w: 320, h: 200 },
-    cache: { w: 280, h: 160 },
-    queue: { w: 340, h: 140 },
-    "message-bus": { w: 380, h: 140 },
+    database: { w: 320, h: 172 },
+    cache: { w: 280, h: 116 },
+    queue: { w: 340, h: 116 },
+    "message-bus": { w: 380, h: 116 },
     cloud: { w: 320, h: 180 },
-    cdn: { w: 320, h: 160 },
+    cdn: { w: 320, h: 116 },
     // アプリ系
-    service: { w: 320, h: 180 },
-    api: { w: 320, h: 160 },
-    frontend: { w: 320, h: 180 },
-    backend: { w: 320, h: 180 },
-    webhook: { w: 320, h: 160 },
-    microservice: { w: 320, h: 180 },
+    service: { w: 320, h: 116 },
+    api: { w: 320, h: 116 },
+    frontend: { w: 320, h: 116 },
+    backend: { w: 320, h: 116 },
+    webhook: { w: 320, h: 116 },
+    microservice: { w: 320, h: 116 },
     // データ / 判定
-    signer: { w: 300, h: 180 },
-    oracle: { w: 320, h: 180 },
-    "merkle-tree": { w: 340, h: 220 },
+    signer: { w: 300, h: 116 },
+    oracle: { w: 320, h: 116 },
+    "merkle-tree": { w: 340, h: 116 },
     decision: { w: 300, h: 180 },
     // Chart 系 (CAR-994 Phase A) ... 1 node に datum 配列を持ち、 kind 内で SVG geometry 描画。
     // 実際の w/h は preset chart() が w/h override で指定 (default fallback は preset 未指定時のみ)。
@@ -2269,7 +2317,7 @@ function layoutEdges(diag, nodes, lanes = []) {
     for (const p of list) parallelGroupedIds.add(p.e.id);
   }
   const distributedInParallel = /* @__PURE__ */ new Set();
-  const FAN_LABEL_GAP = 20;
+  const FAN_LABEL_GAP = CLEARANCE_LABEL_LABEL;
   const computeEffectiveSides = (p) => {
     if (p.e.routing === "back-detour") {
       return { effFromSide: "top", effToSide: "top" };
@@ -2659,7 +2707,17 @@ function layoutEdges(diag, nodes, lanes = []) {
   const applyFanDispersion = (list, tracked) => {
     if (list.length < 2) return;
     const obstaclePatterns = new Set(list.map((r) => detectsBlockingObstacle(r.p)));
-    if (obstaclePatterns.size > 1) return;
+    if (obstaclePatterns.size > 1) {
+      const \u5F62\u3054\u3068 = /* @__PURE__ */ new Map();
+      for (const r of list) {
+        const \u5F62 = detectsBlockingObstacle(r.p);
+        \u5F62\u3054\u3068.set(\u5F62, [...\u5F62\u3054\u3068.get(\u5F62) ?? [], r]);
+      }
+      for (const \u540C\u3058\u5F62 of \u5F62\u3054\u3068.values()) {
+        if (\u540C\u3058\u5F62.length < list.length) applyFanDispersion(\u540C\u3058\u5F62, tracked);
+      }
+      return;
+    }
     if (list.some((r) => r.e.overlay)) return;
     const items = list.map((r) => ({
       r,
@@ -3752,7 +3810,8 @@ function autoStorageHeight(n, defaultH) {
   if (n.h != null) return n.h;
   const \u5370\u3042\u308A = n.rowMarks !== void 0;
   const \u547C\u3073\u540D\u306E\u5206 = \u5370\u3042\u308A && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
-  if (!n.rows || n.rows.length === 0) return 150 + \u547C\u3073\u540D\u306E\u5206;
+  const \u7E70\u308A\u4E0A\u3052 = n.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("storage");
+  if (!n.rows || n.rows.length === 0) return 115 + \u547C\u3073\u540D\u306E\u5206 - \u7E70\u308A\u4E0A\u3052;
   const \u5FC5\u8981 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
   if (\u5370\u3042\u308A) return \u5FC5\u8981 + \u547C\u3073\u540D\u306E\u5206;
   return Math.max(defaultH, \u5FC5\u8981);
@@ -3763,6 +3822,16 @@ function autoRowsWidth(n, defaultW) {
   const required = requiredRowsWidth(n.rows, n.kind);
   return Math.max(defaultW, required);
 }
+function \u7BB1\u306E\u9AD8\u3055(n, \u65E2\u5B9Ah) {
+  if (n.h != null) return n.h;
+  if (n.kind === "storage") return autoStorageHeight(n, \u65E2\u5B9Ah);
+  return \u4E2D\u8EAB\u304B\u3089\u51FA\u3059\u9AD8\u3055(n.kind, \u65E2\u5B9Ah, {
+    hasEyebrow: Boolean(n.eyebrow),
+    hasSubtitle: Boolean(n.subtitle),
+    hasValue: Boolean(n.value),
+    hasRows: (n.rows?.length ?? 0) > 0
+  });
+}
 function requiredStackGapForEdgeLabels(diag, allStacks) {
   const byId = new Map(diag.nodes.map((n) => [n.id, n]));
   const rankOf = new Map(allStacks.map((stack, i) => [stack, i]));
@@ -3792,7 +3861,7 @@ function layoutNodes(diag, lanes) {
   const rowH = /* @__PURE__ */ new Map();
   for (const stack of allStacks) {
     const nodesAtStack = diag.nodes.filter((n) => n.stack === stack);
-    const h = Math.max(...nodesAtStack.map((n) => autoStorageHeight(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u3055(n, NODE_SIZE[n.kind].h)));
     rowH.set(stack, h);
   }
   const rowCy = /* @__PURE__ */ new Map();
@@ -3845,8 +3914,8 @@ function layoutNodes(diag, lanes) {
     const cx = lane.x + lane.width / 2;
     const \u6BB5\u306E\u82AF = rowCy.get(n.stack);
     const \u6BB5\u306E\u9AD8\u3055 = rowH.get(n.stack);
-    const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
-    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? autoStorageHeight(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
+    const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0 || \u6BB5\u3092\u7A4D\u3080\u7BB1\u304B(n.kind, (n.rows?.length ?? 0) > 0);
+    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u3055(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
     const cy = \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
@@ -5887,7 +5956,8 @@ function ActorNode({ node, active, value }) {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("actor");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u7E70\u308A\u4E0A\u3052, size: 32 }, { hasEyebrow: Boolean(node.eyebrow) });
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -5922,13 +5992,13 @@ function ActorNode({ node, active, value }) {
       {
         "data-cdl-role": "node-row-divider",
         x1: 26,
-        y1: 110,
+        y1: 110 - \u7E70\u308A\u4E0A\u3052,
         x2: node.w - 26,
-        y2: 110,
+        y2: 110 - \u7E70\u308A\u4E0A\u3052,
         stroke: "var(--cdl-row-divider, #7e848e)"
       }
     ),
-    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 140, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 140 - \u7E70\u308A\u4E0A\u3052, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
     value && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -5953,7 +6023,8 @@ function CardNode({ node, active }) {
   }
   const compact = isCompactBox(node.h);
   const \u5C0F\u578B\u306B\u547C\u3073\u540D = compact && Boolean(node.subtitle);
-  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86;
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("card");
+  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86 - \u7E70\u308A\u4E0A\u3052;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -5990,7 +6061,7 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    !compact && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 124 - \u7E70\u308A\u4E0A\u3052, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
     \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -6251,7 +6322,8 @@ function EventNode({
   const accent = nodeAccent(node, "var(--cdl-tone-success, #4ea36a)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 88, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("event");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 88 - \u7E70\u308A\u4E0A\u3052, size: 26 }, { hasEyebrow: Boolean(node.eyebrow) });
   const scale = active ? 0.78 + 0.22 * progress : 0.92;
   const opacity = active ? 0.5 + 0.5 * progress : 0.65;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6293,7 +6365,7 @@ function EventNode({
           "text",
           {
             x: 26,
-            y: 128,
+            y: 128 - \u7E70\u308A\u4E0A\u3052,
             fontSize: 21,
             fill: "var(--cdl-text-dim, #5a6270)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
@@ -6309,7 +6381,8 @@ function FunctionNode({ node, active }) {
   const stroke = nodeAccent(node, active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-tone-teal, #2f8770)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("function");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: 86 - \u7E70\u308A\u4E0A\u3052, size: 24 }, { hasEyebrow: Boolean(node.eyebrow) });
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x} ${y})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -6341,7 +6414,7 @@ function FunctionNode({ node, active }) {
         children: node.title
       }
     ),
-    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 126, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("text", { x: 26, y: 126 - \u7E70\u308A\u4E0A\u3052, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
   ] });
 }
 var ROW_GLYPH_HALF = 7;
@@ -6376,7 +6449,8 @@ function StorageNode({
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow || rows.length > 0 ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("storage");
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE - \u7E70\u308A\u4E0A\u3052, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
   const splits = rows.map((r) => splitRow(r));
   const leftMaxWidth = splits.reduce((m, s) => Math.max(m, displayWidth(s.left)), 0);
   const rightColX = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX + STORAGE_COL_GAP_PX;
@@ -6413,7 +6487,7 @@ function StorageNode({
       {
         "data-cdl-role": "node-subtitle",
         x: ROW_PAD_X_PX,
-        y: SUBTITLE_BASELINE,
+        y: SUBTITLE_BASELINE - \u7E70\u308A\u4E0A\u3052,
         fontSize: SUBTITLE_FONT,
         fill: "var(--cdl-text-dim, #5a6270)",
         children: node.subtitle
@@ -6731,9 +6805,10 @@ function GenericNode({
   const textAnchor = centered ? "middle" : "start";
   const textX = centered ? w / 2 : 20;
   const cylinderShift = genericTextShift(node.kind);
+  const \u7E70\u308A\u4E0A\u3052 = node.eyebrow || centered ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052(node.kind, hasRows);
   const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
-  const titleY = genericTitleBaselineY(node.kind, h, hasRows);
-  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift;
+  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - \u7E70\u308A\u4E0A\u3052;
+  const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift - \u7E70\u308A\u4E0A\u3052;
   const iconX = centered ? w / 2 + 40 : w - 48;
   const iconY = centered ? h / 2 - 44 : 18 + cylinderShift;
   const dominantBaseline = centered ? "middle" : void 0;
@@ -8770,10 +8845,10 @@ function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
   if (typeof \u533A\u5207\u308A !== "function") return [...text];
   return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
 }
-function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u3055) {
+function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30552) {
   const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
   if (\u5019\u88DC.length === 0) return [];
-  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u3055 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30552 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
   const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
   const \u6B8B\u3059 = [...\u5019\u88DC];
   while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
@@ -9400,7 +9475,7 @@ function QuadrantNode({
 function \u7BB1\u306E\u6587\u5B57({
   \u884C,
   x,
-  \u7BB1\u306E\u9AD8\u3055,
+  \u7BB1\u306E\u9AD8\u3055: \u7BB1\u306E\u9AD8\u30552,
   fill,
   \u540D\u524D\u306E\u592A\u3055
 }) {
@@ -9409,7 +9484,7 @@ function \u7BB1\u306E\u6587\u5B57({
     {
       "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "tree-node-subtitle" : void 0,
       x,
-      y: \u7BB1\u306E\u9AD8\u3055 / 2 + r.dy,
+      y: \u7BB1\u306E\u9AD8\u30552 / 2 + r.dy,
       fontSize: r.fontSize,
       fontWeight: r.\u5F79\u5272 === "title" ? \u540D\u524D\u306E\u592A\u3055 : 500,
       textAnchor: "middle",