@cardenelabs/cdl 0.5.0

package/src/render/nodes.tsx

@@ -0,0 +1,319 @@
+import type { JSX } from "react";
+import { ActorNode } from "../kinds/actor";
+import { CardNode } from "../kinds/card";
+import { EventNode } from "../kinds/event";
+import { FunctionNode } from "../kinds/function";
+import { StorageNode } from "../kinds/storage";
+import { GenericNode } from "../kinds/generic";
+import { DynShapeNode } from "../kinds/dyn-shape";
+import { ChartLineNode } from "../kinds/chart-line";
+import { ChartPieNode } from "../kinds/chart-pie";
+import { ChartBarNode } from "../kinds/chart-bar";
+import { GanttNode } from "../kinds/gantt";
+import { MindMapNode } from "../kinds/mind-map";
+import { MindRadialNode } from "../kinds/mind-radial";
+import { FunnelNode } from "../kinds/funnel";
+import { QuadrantNode } from "../kinds/quadrant";
+import { TreeNode as TreeHierarchyNode } from "../kinds/tree";
+import { UserJourneyNode } from "../kinds/user-journey";
+import {
+  ShapeFileNode,
+  ShapeFolderNode,
+  ShapeCloudNode,
+  ShapeCylinderNode,
+  ShapeHexagonNode,
+  ShapeDiamondNode,
+  ShapeStackNode,
+  ShapePersonNode,
+} from "../kinds/shape-basement";
+import {
+  ShapeWindowNode,
+  ShapeTerminalNode,
+  ShapeCodeBlockNode,
+  ShapeKanbanCardNode,
+  ShapeMessageBubbleNode,
+  ShapeGearNode,
+} from "../kinds/shape-software";
+import {
+  ShapeServerRackNode,
+  ShapeNetworkNodeNode,
+  ShapeMobileDeviceNode,
+  ShapeIotSensorNode,
+  ShapeRobotArmNode,
+  ShapeSatelliteNode,
+} from "../kinds/shape-hardware";
+import {
+  ShapeSmartContractNode,
+  ShapeBlockchainBlockNode,
+  ShapeRpcNodeNode,
+  ShapeWalletNode,
+  ShapeNftNode,
+  ShapeTokenNode,
+  ShapeBlockchainNode,
+  ShapeBitcoinChainNode,
+  ShapeEthereumChainNode,
+  ShapeBlockchainNodeNode,
+} from "../kinds/shape-blockchain";
+import {
+  ShapeBankNode,
+  ShapeTrustBankNode,
+  ShapePaymentProviderNode,
+  ShapeCreditCardNode,
+  ShapeBrokerageNode,
+  ShapeExchangeNode,
+  ShapeAtmNode,
+} from "../kinds/shape-finance";
+import {
+  ShapeWebsiteNode,
+  ShapeStorefrontNode,
+  ShapeWarehouseNode,
+  ShapeOnlineShopNode,
+  ShapeCdnEdgeNode,
+  ShapeApiGatewayNode,
+} from "../kinds/shape-commerce";
+import {
+  ShapeAuditorNode,
+  ShapeRegulatorNode,
+  ShapeNotaryNode,
+  ShapeLawyerNode,
+  ShapeTraderNode,
+  ShapeCustomerServiceNode,
+} from "../kinds/shape-people";
+import type { LaidNode } from "../types";
+import { interpolate, resolveNumericAttr } from "./utils";
+
+export function CdlNodeView({
+  node,
+  active,
+  progress,
+  stateValues,
+  currentPhaseId,
+}: {
+  node: LaidNode;
+  active: boolean;
+  progress: number;
+  stateValues: Record<string, string>;
+  currentPhaseId: string | undefined;
+}): JSX.Element {
+  const value = node.value ? interpolate(node.value, stateValues) : undefined;
+  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
+  // visual binding = wBind / hBind の template を stateValues で resolve、 layout の
+  // static w/h を fallback として保持。 signal 値変化で node の描画寸法がリアルタイム変化する
+  // (arc-intro 相当の 「slider で bar が伸びる」 UX の foundation)。
+  const boundW = node.wBind ? resolveNumericAttr(node.wBind, stateValues, node.w) : node.w;
+  const boundH = node.hBind ? resolveNumericAttr(node.hBind, stateValues, node.h) : node.h;
+  const boundOpacity =
+    node.opacity !== undefined
+      ? Math.min(1, Math.max(0, resolveNumericAttr(node.opacity, stateValues, 1)))
+      : undefined;
+  // conditional visibility: visibleIf template を評価、 falsy or unresolved なら非表示
+  // (unresolved = `{missingSig}` そのままなら typo と判断、 fail-safe に hidden 側倒す)
+  if (node.visibleIf) {
+    const resolved = interpolate(node.visibleIf, stateValues).trim().toLowerCase();
+    const unresolved = /^\{\w+(?:[.\[][^}]*)?\}$/.test(resolved) || /\{\w+(?:[.\[][^}]*)?\}/.test(resolved);
+    const falsy = resolved === "" || resolved === "0" || resolved === "false" || resolved === "null" || resolved === "undefined" || resolved === "nan";
+    if (falsy || unresolved) {
+      return <g data-cdl-node={node.id} data-cdl-hidden="true" style={{ display: "none" }} />;
+    }
+  }
+  const resolvedNode: LaidNode = {
+    ...node,
+    title: interpolate(node.title, stateValues),
+    subtitle: node.subtitle ? interpolate(node.subtitle, stateValues) : node.subtitle,
+    eyebrow: node.eyebrow ? interpolate(node.eyebrow, stateValues) : node.eyebrow,
+    w: boundW,
+    h: boundH,
+  };
+  // storage の rows 数値ハイライト ... 「現在 phase に tween がある」 ときだけ
+  const highlightRows = active && currentPhaseId !== undefined;
+
+  // wrapper <g> に data-cdl-* attribute を付与 (dom-verify.ts の DOM scrape の足場)。
+  // data-cdl-node = node id、 data-cdl-kind = kind、 data-cdl-active = "true"/"false"、
+  // data-cdl-cx / data-cdl-cy / data-cdl-w / data-cdl-h = layout 計算値 (実 boundingBox と照合)
+  const inner = (() => {
+    switch (node.kind) {
+      case "dyn-rect":
+      case "dyn-circle":
+      case "dyn-arc":
+      case "dyn-wave":
+      case "dyn-polygon":
+        return <DynShapeNode node={resolvedNode} active={active} stateValues={stateValues} />;
+      case "actor":
+        return <ActorNode node={resolvedNode} active={active} value={value} />;
+      case "function":
+        return <FunctionNode node={resolvedNode} active={active} />;
+      case "storage":
+        return <StorageNode node={resolvedNode} active={active} rows={rows} highlightRows={highlightRows} />;
+      case "event":
+        return <EventNode node={resolvedNode} active={active} progress={progress} />;
+      case "card":
+        return <CardNode node={resolvedNode} active={active} />;
+      case "chart-line":
+        return <ChartLineNode node={resolvedNode} active={active} />;
+      case "chart-pie":
+        return <ChartPieNode node={resolvedNode} active={active} />;
+      case "chart-bar":
+        return <ChartBarNode node={resolvedNode} active={active} />;
+      case "gantt-timeline":
+        return <GanttNode node={resolvedNode} active={active} />;
+      case "mind-map":
+        return <MindMapNode node={resolvedNode} active={active} />;
+      case "mind-radial":
+        return <MindRadialNode node={resolvedNode} active={active} />;
+      case "funnel-stages":
+        return <FunnelNode node={resolvedNode} active={active} />;
+      case "quadrant-matrix":
+        return <QuadrantNode node={resolvedNode} active={active} />;
+      case "tree-hierarchy":
+        return <TreeHierarchyNode node={resolvedNode} active={active} />;
+      case "journey-map":
+        return <UserJourneyNode node={resolvedNode} active={active} />;
+      case "shape-file":
+        return <ShapeFileNode node={resolvedNode} active={active} />;
+      case "shape-folder":
+        return <ShapeFolderNode node={resolvedNode} active={active} />;
+      case "shape-cloud":
+        return <ShapeCloudNode node={resolvedNode} active={active} />;
+      case "shape-cylinder":
+        return <ShapeCylinderNode node={resolvedNode} active={active} />;
+      case "shape-hexagon":
+        return <ShapeHexagonNode node={resolvedNode} active={active} />;
+      case "shape-diamond":
+        return <ShapeDiamondNode node={resolvedNode} active={active} />;
+      case "shape-stack":
+        return <ShapeStackNode node={resolvedNode} active={active} />;
+      case "shape-person":
+        return <ShapePersonNode node={resolvedNode} active={active} />;
+      case "shape-window":
+        return <ShapeWindowNode node={resolvedNode} active={active} />;
+      case "shape-terminal":
+        return <ShapeTerminalNode node={resolvedNode} active={active} />;
+      case "shape-code-block":
+        return <ShapeCodeBlockNode node={resolvedNode} active={active} />;
+      case "shape-kanban-card":
+        return <ShapeKanbanCardNode node={resolvedNode} active={active} />;
+      case "shape-message-bubble":
+        return <ShapeMessageBubbleNode node={resolvedNode} active={active} />;
+      case "shape-gear":
+        return <ShapeGearNode node={resolvedNode} active={active} />;
+      case "shape-server-rack":
+        return <ShapeServerRackNode node={resolvedNode} active={active} />;
+      case "shape-network-node":
+        return <ShapeNetworkNodeNode node={resolvedNode} active={active} />;
+      case "shape-mobile-device":
+        return <ShapeMobileDeviceNode node={resolvedNode} active={active} />;
+      case "shape-iot-sensor":
+        return <ShapeIotSensorNode node={resolvedNode} active={active} />;
+      case "shape-robot-arm":
+        return <ShapeRobotArmNode node={resolvedNode} active={active} />;
+      case "shape-satellite":
+        return <ShapeSatelliteNode node={resolvedNode} active={active} />;
+      case "shape-smart-contract":
+        return <ShapeSmartContractNode node={resolvedNode} active={active} />;
+      case "shape-blockchain-block":
+        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} />;
+      case "shape-rpc-node":
+        return <ShapeRpcNodeNode node={resolvedNode} active={active} />;
+      case "shape-wallet":
+        return <ShapeWalletNode node={resolvedNode} active={active} />;
+      case "shape-nft":
+        return <ShapeNftNode node={resolvedNode} active={active} />;
+      case "shape-token":
+        return <ShapeTokenNode node={resolvedNode} active={active} />;
+      case "shape-blockchain":
+        return <ShapeBlockchainNode node={resolvedNode} active={active} />;
+      case "shape-bitcoin-chain":
+        return <ShapeBitcoinChainNode node={resolvedNode} active={active} />;
+      case "shape-ethereum-chain":
+        return <ShapeEthereumChainNode node={resolvedNode} active={active} />;
+      case "shape-blockchain-node":
+        return <ShapeBlockchainNodeNode node={resolvedNode} active={active} />;
+      case "shape-bank":
+        return <ShapeBankNode node={resolvedNode} active={active} />;
+      case "shape-trust-bank":
+        return <ShapeTrustBankNode node={resolvedNode} active={active} />;
+      case "shape-payment-provider":
+        return <ShapePaymentProviderNode node={resolvedNode} active={active} />;
+      case "shape-credit-card":
+        return <ShapeCreditCardNode node={resolvedNode} active={active} />;
+      case "shape-brokerage":
+        return <ShapeBrokerageNode node={resolvedNode} active={active} />;
+      case "shape-exchange":
+        return <ShapeExchangeNode node={resolvedNode} active={active} />;
+      case "shape-atm":
+        return <ShapeAtmNode node={resolvedNode} active={active} />;
+      case "shape-website":
+        return <ShapeWebsiteNode node={resolvedNode} active={active} />;
+      case "shape-storefront":
+        return <ShapeStorefrontNode node={resolvedNode} active={active} />;
+      case "shape-warehouse":
+        return <ShapeWarehouseNode node={resolvedNode} active={active} />;
+      case "shape-online-shop":
+        return <ShapeOnlineShopNode node={resolvedNode} active={active} />;
+      case "shape-cdn-edge":
+        return <ShapeCdnEdgeNode node={resolvedNode} active={active} />;
+      case "shape-api-gateway":
+        return <ShapeApiGatewayNode node={resolvedNode} active={active} />;
+      case "shape-auditor":
+        return <ShapeAuditorNode node={resolvedNode} active={active} />;
+      case "shape-regulator":
+        return <ShapeRegulatorNode node={resolvedNode} active={active} />;
+      case "shape-notary":
+        return <ShapeNotaryNode node={resolvedNode} active={active} />;
+      case "shape-lawyer":
+        return <ShapeLawyerNode node={resolvedNode} active={active} />;
+      case "shape-trader":
+        return <ShapeTraderNode node={resolvedNode} active={active} />;
+      case "shape-customer-service":
+        return <ShapeCustomerServiceNode node={resolvedNode} active={active} />;
+      default:
+        // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
+        return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} />;
+    }
+  })();
+  // node bounding box を node.w/h に固定するための invisible rect。
+  // cloud kind の 5 circle 重ねや diamond / cylinder のような特殊 shape では、
+  // <g> の getBoundingClientRect() が shape の実 outline に追従して node.w/h と乖離する。
+  // 透明 rect を node bbox 範囲ぴったりに置くことで <g> の bbox を node.w/h に anchor する。
+  // render-time offset: layout 計算後の position を X/Y shift、 edges は base position 参照
+  // (radial 配置 / free-form 移動用、 signal template で reactive 変化も可能)
+  const offsetX = node.renderOffsetX !== undefined ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
+  const offsetY = node.renderOffsetY !== undefined ? resolveNumericAttr(node.renderOffsetY, stateValues, 0) : 0;
+  const hasOffset = offsetX !== 0 || offsetY !== 0;
+  return (
+    <g
+      data-cdl-node={node.id}
+      data-cdl-kind={node.kind}
+      data-cdl-lane={node.lane}
+      data-cdl-active={active ? "true" : "false"}
+      data-cdl-cx={node.cx}
+      data-cdl-cy={node.cy}
+      data-cdl-w={node.w}
+      data-cdl-h={node.h}
+      data-cdl-title={resolvedNode.title}
+      data-cdl-subtitle={resolvedNode.subtitle ?? ""}
+      data-cdl-eyebrow={resolvedNode.eyebrow ?? ""}
+      data-cdl-offset-x={offsetX || undefined}
+      data-cdl-offset-y={offsetY || undefined}
+      transform={hasOffset ? `translate(${offsetX}, ${offsetY})` : undefined}
+      opacity={boundOpacity}
+      data-cdl-tone={node.tone}
+      style={{ transition: "opacity 120ms ease-out, transform 200ms ease-out" }}
+    >
+      <rect
+        // 実寸の枠 (#390)。 `data-cdl-w/h` は layout の静的値で、 `wBind` / `hBind` の縮小や
+        // `renderOffsetX/Y` の移動を含まない。 実 DOM で「行が枠に収まっているか」 を測る側は
+        // この要素を見る。
+        data-cdl-frame=""
+        x={resolvedNode.cx - resolvedNode.w / 2}
+        y={resolvedNode.cy - resolvedNode.h / 2}
+        width={resolvedNode.w}
+        height={resolvedNode.h}
+        fill="none"
+        stroke="none"
+        pointerEvents="none"
+      />
+      {inner}
+    </g>
+  );
+}