@akiojin/gwt 4.2.0 → 4.3.0

package/src/web/client/src/components/graph/SynapticCanvas.tsx

@@ -0,0 +1,171 @@
+/**
+ * シナプティックキャンバス
+ *
+ * React Flowベースのブランチグラフ表示コンテナ
+ * パン/ズーム/ミニマップを提供
+ */
+
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type NodeMouseHandler,
+  BackgroundVariant,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import type { Branch } from "../../../../../types/api.js";
+import { BranchNode } from "./BranchNode";
+import { ClusterNode } from "./ClusterNode";
+import { SynapticEdge } from "./SynapticEdge";
+import { branchesToGraph, type GraphNode, type GraphEdge } from "./graphUtils";
+
+/** カスタムノードタイプ */
+const nodeTypes = {
+  branch: BranchNode,
+  cluster: ClusterNode,
+};
+
+/** カスタムエッジタイプ */
+const edgeTypes = {
+  synaptic: SynapticEdge,
+};
+
+interface SynapticCanvasProps {
+  branches: Branch[];
+  onNodeClick?: (branch: Branch | null) => void;
+  className?: string;
+}
+
+export function SynapticCanvas({
+  branches,
+  onNodeClick,
+  className,
+}: SynapticCanvasProps) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<GraphNode>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<GraphEdge>([]);
+  const [expandedClusters, setExpandedClusters] = useState<Set<string>>(
+    new Set(),
+  );
+  const [isLayouting, setIsLayouting] = useState(false);
+
+  // レイアウト計算
+  useEffect(() => {
+    if (branches.length === 0) return;
+
+    setIsLayouting(true);
+
+    // キャンバスサイズ（仮）
+    const width = 800;
+    const height = 600;
+
+    branchesToGraph(branches, expandedClusters, width, height)
+      .then(({ nodes: newNodes, edges: newEdges }) => {
+        setNodes(newNodes);
+        setEdges(newEdges);
+      })
+      .catch((error) => {
+        console.error("Failed to calculate graph layout:", error);
+      })
+      .finally(() => {
+        setIsLayouting(false);
+      });
+  }, [branches, expandedClusters, setNodes, setEdges]);
+
+  // ノードクリックハンドラ
+  const handleNodeClick: NodeMouseHandler<GraphNode> = useCallback(
+    (event, node) => {
+      if (node.data.isCluster) {
+        // クラスタノード: 展開/折りたたみ
+        setExpandedClusters((prev) => {
+          const next = new Set(prev);
+          if (next.has(node.id)) {
+            next.delete(node.id);
+          } else {
+            next.add(node.id);
+          }
+          return next;
+        });
+      } else {
+        // ブランチノード: 詳細パネル表示
+        onNodeClick?.(node.data.branch ?? null);
+      }
+    },
+    [onNodeClick],
+  );
+
+  // ミニマップのノードカラー
+  const minimapNodeColor = useCallback((node: GraphNode) => {
+    if (node.data.isCluster) {
+      return "hsl(var(--muted-foreground))";
+    }
+    if (node.data.branch?.worktreePath) {
+      return "hsl(var(--success))";
+    }
+    if (node.data.branch?.type === "local") {
+      return "hsl(var(--local))";
+    }
+    return "hsl(var(--remote))";
+  }, []);
+
+  return (
+    <div className={className} style={{ width: "100%", height: "100%" }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={handleNodeClick}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        fitViewOptions={{
+          padding: 0.2,
+          maxZoom: 1.5,
+        }}
+        minZoom={0.1}
+        maxZoom={2}
+        attributionPosition="bottom-left"
+        proOptions={{ hideAttribution: true }}
+        className="bg-gradient-to-br from-background via-background to-muted/20"
+      >
+        {/* 背景グリッド */}
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={20}
+          size={1}
+          color="hsl(var(--muted-foreground) / 0.15)"
+        />
+
+        {/* コントロール */}
+        <Controls
+          showInteractive={false}
+          className="!bg-card !border !border-border !shadow-md"
+        />
+
+        {/* ミニマップ */}
+        <MiniMap
+          nodeColor={minimapNodeColor}
+          maskColor="hsl(var(--background) / 0.8)"
+          className="!bg-card !border !border-border !shadow-md"
+        />
+      </ReactFlow>
+
+      {/* ローディングオーバーレイ */}
+      {isLayouting && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm">
+          <div className="flex items-center gap-2 rounded-lg bg-card px-4 py-2 shadow-lg">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            <span className="text-sm text-muted-foreground">
+              Calculating layout...
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/client/src/components/graph/SynapticEdge.tsx

@@ -0,0 +1,311 @@
+/**
+ * シナプスエッジコンポーネント
+ *
+ * 神経細胞の軸索（アクソン）をイメージした脈動するエッジ
+ * 神経伝達物質の放出と伝播を表現するアニメーション
+ */
+
+import React, { memo, useMemo } from "react";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath,
+  type EdgeProps,
+} from "@xyflow/react";
+import type { GraphEdge } from "./graphUtils";
+
+type SynapticEdgeProps = EdgeProps<GraphEdge>;
+
+export const SynapticEdge = memo(function SynapticEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: SynapticEdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25,
+  });
+
+  // エッジの長さに基づいてパーティクル数を調整
+  const edgeLength = useMemo(() => {
+    const dx = targetX - sourceX;
+    const dy = targetY - sourceY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }, [sourceX, sourceY, targetX, targetY]);
+
+  const particleCount = Math.max(2, Math.min(4, Math.floor(edgeLength / 100)));
+
+  return (
+    <>
+      {/* 外側グロー - 深い影 */}
+      <BaseEdge
+        id={`${id}-outer-glow`}
+        path={edgePath}
+        style={{
+          ...style,
+          strokeWidth: 12,
+          stroke: "hsl(185 100% 65% / 0.08)",
+          filter: "blur(8px)",
+        }}
+      />
+
+      {/* 中間グロー */}
+      <BaseEdge
+        id={`${id}-mid-glow`}
+        path={edgePath}
+        style={{
+          ...style,
+          strokeWidth: 6,
+          stroke: "hsl(185 100% 65% / 0.15)",
+          filter: "blur(4px)",
+        }}
+      />
+
+      {/* メインエッジ - 軸索 */}
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        {...(markerEnd ? { markerEnd } : {})}
+        style={{
+          ...style,
+          strokeWidth: 2,
+          stroke: "hsl(185 100% 65% / 0.5)",
+          strokeLinecap: "round",
+        }}
+      />
+
+      {/* 内側の明るいコア */}
+      <BaseEdge
+        id={`${id}-core`}
+        path={edgePath}
+        style={{
+          ...style,
+          strokeWidth: 1,
+          stroke: "hsl(185 100% 75% / 0.6)",
+          strokeLinecap: "round",
+        }}
+      />
+
+      {/* SVGアニメーション定義 */}
+      <EdgeLabelRenderer>
+        <svg
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            overflow: "visible",
+          }}
+        >
+          <defs>
+            {/* 神経伝達物質パルスグラデーション */}
+            <linearGradient
+              id={`vesicle-pulse-${id}`}
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="0%"
+            >
+              <stop offset="0%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.3;1"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="5%" stopColor="hsl(185 100% 70% / 0.3)">
+                <animate
+                  attributeName="offset"
+                  values="-0.25;1.05"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="10%" stopColor="hsl(185 100% 80%)">
+                <animate
+                  attributeName="offset"
+                  values="-0.2;1.1"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="15%" stopColor="hsl(185 100% 70% / 0.3)">
+                <animate
+                  attributeName="offset"
+                  values="-0.15;1.15"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="20%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.1;1.2"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+            </linearGradient>
+
+            {/* 二次パルス（シナプス間隙） */}
+            <linearGradient
+              id={`synapse-pulse-${id}`}
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="0%"
+            >
+              <stop offset="0%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.4;1"
+                  dur="3s"
+                  begin="0.8s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="8%" stopColor="hsl(310 85% 65% / 0.6)">
+                <animate
+                  attributeName="offset"
+                  values="-0.32;1.08"
+                  dur="3s"
+                  begin="0.8s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="16%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.24;1.16"
+                  dur="3s"
+                  begin="0.8s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+            </linearGradient>
+
+            {/* グロー効果フィルター */}
+            <filter
+              id={`glow-${id}`}
+              x="-50%"
+              y="-50%"
+              width="200%"
+              height="200%"
+            >
+              <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+              <feMerge>
+                <feMergeNode in="coloredBlur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+
+          {/* メインパルス */}
+          <path
+            d={edgePath}
+            fill="none"
+            stroke={`url(#vesicle-pulse-${id})`}
+            strokeWidth={4}
+            strokeLinecap="round"
+            filter={`url(#glow-${id})`}
+            style={{ mixBlendMode: "screen" }}
+          />
+
+          {/* セカンダリパルス（マゼンタ） */}
+          <path
+            d={edgePath}
+            fill="none"
+            stroke={`url(#synapse-pulse-${id})`}
+            strokeWidth={3}
+            strokeLinecap="round"
+            style={{ mixBlendMode: "screen" }}
+          />
+        </svg>
+      </EdgeLabelRenderer>
+
+      {/* 流れるパーティクル（神経伝達物質） - SVG animateMotion使用 */}
+      <EdgeLabelRenderer>
+        <svg
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            overflow: "visible",
+          }}
+        >
+          {Array.from({ length: particleCount }).map((_, i) => (
+            <circle
+              key={i}
+              r={3 - i * 0.3}
+              fill="hsl(185 100% 80%)"
+              opacity={0}
+            >
+              <animateMotion
+                dur={`${2 + i * 0.3}s`}
+                repeatCount="indefinite"
+                path={edgePath}
+                begin={`${i * 0.6}s`}
+              />
+              <animate
+                attributeName="opacity"
+                values="0;1;1;0"
+                keyTimes="0;0.1;0.9;1"
+                dur={`${2 + i * 0.3}s`}
+                repeatCount="indefinite"
+                begin={`${i * 0.6}s`}
+              />
+            </circle>
+          ))}
+        </svg>
+      </EdgeLabelRenderer>
+
+      {/* シナプス接合点グロー */}
+      <EdgeLabelRenderer>
+        <div
+          className="absolute"
+          style={{
+            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          }}
+        >
+          {/* 外側の拡散グロー */}
+          <div
+            className="absolute -inset-3 rounded-full opacity-30"
+            style={{
+              background:
+                "radial-gradient(circle, hsl(185 100% 65%) 0%, transparent 70%)",
+              animation: "synapse-spark 3s ease-in-out infinite",
+            }}
+          />
+          {/* 中心核 */}
+          <div
+            className="h-2 w-2 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle at 30% 30%, hsl(185 100% 80%), hsl(185 100% 60%))",
+              boxShadow:
+                "0 0 10px hsl(185 100% 65% / 0.8), 0 0 20px hsl(185 100% 65% / 0.4)",
+              animation: "vesicle-release 2s ease-in-out infinite",
+            }}
+          />
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+});