@cardenelabs/cdl 0.17.1 → 0.18.1

package/dist/react.cjs

@@ -4037,6 +4037,8 @@ function layout(diag) {
     states: diag.states,
     phases: diag.phases,
     ...diag.derived ? { derived: diag.derived } : {},
+    // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
+    ...diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -4194,6 +4196,7 @@ var EDGE_HEADS = [
 ];
 var EDGE_HEAD_FILL_DEFAULT = "solid";
 var EDGE_HEAD_FILLS = ["solid", "hollow"];
+var EDGE_REVEAL_DEFAULT = "phase";
 
 // src/formula/evaluator.ts
 function evaluate(ast, ctxOrResolver) {
@@ -5573,6 +5576,7 @@ function labelTextOpacity(line) {
 function CdlEdgeView({
   edge,
   active,
+  drawing,
   progress,
   stateValues
 }) {
@@ -5597,6 +5601,7 @@ function CdlEdgeView({
       "data-cdl-from": edge.from,
       "data-cdl-to": edge.to,
       "data-cdl-active": active ? "true" : "false",
+      "data-cdl-drawing": drawing ? "true" : "false",
       "data-cdl-path-d": edge.d,
       "data-cdl-label-x": edge.labelX,
       "data-cdl-label-y": edge.labelY,
@@ -5628,6 +5633,7 @@ function CdlEdgeView({
           {
             edge,
             active,
+            drawing,
             progress,
             color,
             marker,
@@ -5655,6 +5661,7 @@ function CdlEdgeView({
 function SolidEdgePath({
   edge,
   active,
+  drawing,
   progress,
   color,
   marker,
@@ -5662,7 +5669,7 @@ function SolidEdgePath({
   dashed,
   stateValues
 }) {
-  const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
+  const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
   const defaultWidth = active ? 5 : 2.5;
   const boundWidth = edge.widthBind && stateValues ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth) : defaultWidth;
   const boundStroke = edge.strokeBind && stateValues ? interpolate(edge.strokeBind, stateValues) : color;
@@ -14197,6 +14204,36 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  const \u77E2\u5370\u306E\u51FA\u756A = react.useMemo(() => {
+    const \u521D\u51FA = /* @__PURE__ */ new Map();
+    laid.phases.forEach((p, i) => {
+      for (const id of p.activate ?? []) if (!\u521D\u51FA.has(id)) \u521D\u51FA.set(id, i);
+    });
+    const \u4ECA = currentPhase === void 0 ? -1 : laid.phases.findIndex((p) => p.id === currentPhase.id);
+    const \u96A0\u3059 = (laid.edgeReveal ?? EDGE_REVEAL_DEFAULT) !== "all";
+    return {
+      \u51FA\u308B\u304B: (edgeId) => {
+        if (!\u96A0\u3059) return true;
+        const first = \u521D\u51FA.get(edgeId);
+        if (first === void 0) return true;
+        return \u4ECA < 0 || \u4ECA >= first;
+      },
+      /*
+       * この段で初めて出るか (#584)。
+       *
+       * 起点から伸ばすのはこの段だけ。 光っているかで引くと、段をまたいで光り続ける図で
+       * 既に見えている線が毎段引き直される (実測 = 表の図で 3 本とも段が変わるたびに伸び直した)。
+       *
+       * **隠さない図でも初出は数える**。 `all` は「最初から見せる」 だけの指定で、
+       * 伸びる動きまで毎段繰り返してよいという意味ではない。
+       */
+      \u4F38\u3070\u3059\u304B: (edgeId) => {
+        const first = \u521D\u51FA.get(edgeId);
+        if (first === void 0) return false;
+        return \u4ECA === first;
+      }
+    };
+  }, [laid.phases, currentPhase, laid.edgeReveal]);
   const drawSet = new Set(currentPhase?.draw ?? []);
   const \u63CF\u304F\u9032\u307F = \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(progress, currentPhase?.drawRatio);
   const { lifelineStarts, uniformFooterTop } = react.useMemo(() => {
@@ -14356,7 +14393,17 @@ function CdlStage({
             },
             lane.id
           )),
-          laid.edges.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeView, { edge, active: activeSet.has(edge.id), progress, stateValues }, edge.id)),
+          laid.edges.filter((edge) => \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+            CdlEdgeView,
+            {
+              edge,
+              active: activeSet.has(edge.id),
+              drawing: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id),
+              progress,
+              stateValues
+            },
+            edge.id
+          )),
           laid.nodes.map((node) => {
             const \u63CF\u304F = drawSet.has(node.id);
             const view = /* @__PURE__ */ jsxRuntime.jsx(
@@ -14372,8 +14419,8 @@ function CdlStage({
             );
             return /* @__PURE__ */ jsxRuntime.jsx("g", { children: view }, node.id);
           }),
-          laid.edges.filter((edge) => Boolean(edge.dThrough)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
-          laid.edges.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+          laid.edges.filter((edge) => Boolean(edge.dThrough) && \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
+          laid.edges.filter((edge) => \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
             CdlEdgeLabelView,
             {
               edge,