seat-editor 3.4.7 → 3.5.0

package/dist/app/graph-view/page.jsx

@@ -0,0 +1,445 @@
+"use client";
+import { useState, useRef, useCallback } from "react";
+const GRID_SIZE = 20;
+const NODE_WIDTH = 120;
+const NODE_HEIGHT = 50;
+const snap = (v) => Math.round(v / GRID_SIZE) * GRID_SIZE;
+const getRectEdge = (from, to) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const angle = Math.atan2(dy, dx);
+    const absCos = Math.abs(Math.cos(angle));
+    const absSin = Math.abs(Math.sin(angle));
+    const offset = (NODE_HEIGHT / 2) * absCos <= (NODE_WIDTH / 2) * absSin
+        ? NODE_HEIGHT / 2 / absSin
+        : NODE_WIDTH / 2 / absCos;
+    return {
+        x: snap(from.x + Math.cos(angle) * offset),
+        y: snap(from.y + Math.sin(angle) * offset),
+    };
+};
+// Build orthogonal path through waypoints
+const buildPath = (points) => {
+    if (points.length < 2)
+        return "";
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const midX = snap((prev.x + curr.x) / 2);
+        if (i === points.length - 1) {
+            d += ` H ${midX} V ${curr.y} H ${curr.x}`;
+        }
+        else {
+            d += ` H ${midX} V ${curr.y} H ${curr.x}`;
+        }
+    }
+    return d;
+};
+// Generate default waypoints between two nodes
+const defaultWaypoints = (start, end) => {
+    const midX = snap((start.x + end.x) / 2);
+    const midY = snap((start.y + end.y) / 2);
+    return [{ x: midX, y: midY }];
+};
+const NODE_COLORS = [
+    { bg: "#1e293b", border: "#38bdf8", text: "#e0f2fe" },
+    { bg: "#1e1b2e", border: "#a78bfa", text: "#ede9fe" },
+    { bg: "#0f2720", border: "#34d399", text: "#d1fae5" },
+    { bg: "#2d1515", border: "#f87171", text: "#fee2e2" },
+    { bg: "#1a1a10", border: "#fbbf24", text: "#fef9c3" },
+];
+let nodeCounter = 3;
+const initialNodes = [
+    { id: "1", x: 100, y: 160, label: "Start", colorIdx: 2 },
+    { id: "2", x: 380, y: 260, label: "Process", colorIdx: 0 },
+    { id: "3", x: 660, y: 160, label: "End", colorIdx: 3 },
+];
+export default function DrawIO() {
+    const [nodes, setNodes] = useState(initialNodes);
+    const [edges, setEdges] = useState(() => {
+        const e1start = getRectEdge(initialNodes[0], initialNodes[1]);
+        const e1end = getRectEdge(initialNodes[1], initialNodes[0]);
+        const e2start = getRectEdge(initialNodes[1], initialNodes[2]);
+        const e2end = getRectEdge(initialNodes[2], initialNodes[1]);
+        return [
+            {
+                id: "e1",
+                from: "1",
+                to: "2",
+                waypoints: defaultWaypoints(e1start, e1end),
+            },
+            {
+                id: "e2",
+                from: "2",
+                to: "3",
+                waypoints: defaultWaypoints(e2start, e2end),
+            },
+        ];
+    });
+    const [draggingNode, setDraggingNode] = useState(null);
+    const [draggingWP, setDraggingWP] = useState(null); // { edgeId, index }
+    const [connecting, setConnecting] = useState(null);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const [selectedEdge, setSelectedEdge] = useState(null);
+    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+    const [showGrid, setShowGrid] = useState(true);
+    const svgRef = useRef(null);
+    const getSVGPoint = useCallback((e) => {
+        const rect = svgRef.current.getBoundingClientRect();
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        const pt = getSVGPoint(e);
+        setMousePos(pt);
+        if (draggingNode) {
+            const snappedX = snap(pt.x - draggingNode.offsetX);
+            const snappedY = snap(pt.y - draggingNode.offsetY);
+            setNodes((prev) => prev.map((n) => n.id === draggingNode.id ? Object.assign(Object.assign({}, n), { x: snappedX, y: snappedY }) : n));
+        }
+        if (draggingWP) {
+            setEdges((prev) => prev.map((ed) => {
+                if (ed.id !== draggingWP.edgeId)
+                    return ed;
+                const newWP = ed.waypoints.map((wp, i) => i === draggingWP.index ? { x: snap(pt.x), y: snap(pt.y) } : wp);
+                return Object.assign(Object.assign({}, ed), { waypoints: newWP });
+            }));
+        }
+    }, [draggingNode, draggingWP, getSVGPoint]);
+    const handleMouseUp = useCallback(() => {
+        setDraggingNode(null);
+        setDraggingWP(null);
+    }, []);
+    const handleNodeMouseDown = (e, nodeId) => {
+        e.stopPropagation();
+        if (connecting)
+            return;
+        const pt = getSVGPoint(e);
+        const node = nodes.find((n) => n.id === nodeId);
+        setDraggingNode({
+            id: nodeId,
+            offsetX: pt.x - node.x,
+            offsetY: pt.y - node.y,
+        });
+        setSelectedNode(nodeId);
+        setSelectedEdge(null);
+    };
+    const handleWaypointMouseDown = (e, edgeId, index) => {
+        e.stopPropagation();
+        setDraggingWP({ edgeId, index });
+        setSelectedEdge(edgeId);
+        setSelectedNode(null);
+    };
+    // Add waypoint on edge double-click
+    const handleEdgeDoubleClick = (e, edgeId) => {
+        e.stopPropagation();
+        const pt = getSVGPoint(e);
+        setEdges((prev) => prev.map((ed) => {
+            if (ed.id !== edgeId)
+                return ed;
+            // Insert waypoint near click position
+            const newWP = [...ed.waypoints, { x: snap(pt.x), y: snap(pt.y) }];
+            // Sort by proximity to path order (simple: by x if mostly horizontal)
+            return Object.assign(Object.assign({}, ed), { waypoints: newWP });
+        }));
+    };
+    // Remove waypoint on right-click
+    const handleWaypointRightClick = (e, edgeId, index) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setEdges((prev) => prev.map((ed) => {
+            if (ed.id !== edgeId)
+                return ed;
+            if (ed.waypoints.length <= 1)
+                return ed; // keep at least 1
+            return Object.assign(Object.assign({}, ed), { waypoints: ed.waypoints.filter((_, i) => i !== index) });
+        }));
+    };
+    const handleConnectStart = (e, nodeId) => {
+        e.stopPropagation();
+        setConnecting({ fromId: nodeId });
+        setSelectedNode(null);
+        setSelectedEdge(null);
+    };
+    const handleConnectEnd = (e, nodeId) => {
+        e.stopPropagation();
+        if (connecting && connecting.fromId !== nodeId) {
+            const exists = edges.find((ed) => (ed.from === connecting.fromId && ed.to === nodeId) ||
+                (ed.from === nodeId && ed.to === connecting.fromId));
+            if (!exists) {
+                const fromNode = nodes.find((n) => n.id === connecting.fromId);
+                const toNode = nodes.find((n) => n.id === nodeId);
+                const start = getRectEdge(fromNode, toNode);
+                const end = getRectEdge(toNode, fromNode);
+                setEdges((prev) => [
+                    ...prev,
+                    {
+                        id: `e${Date.now()}`,
+                        from: connecting.fromId,
+                        to: nodeId,
+                        waypoints: defaultWaypoints(start, end),
+                    },
+                ]);
+            }
+        }
+        setConnecting(null);
+    };
+    const addNode = () => {
+        nodeCounter++;
+        setNodes((prev) => [
+            ...prev,
+            {
+                id: String(nodeCounter),
+                x: snap(120 + Math.random() * 380),
+                y: snap(80 + Math.random() * 220),
+                label: `Node ${nodeCounter}`,
+                colorIdx: Math.floor(Math.random() * NODE_COLORS.length),
+            },
+        ]);
+    };
+    const deleteSelected = () => {
+        if (selectedNode) {
+            setNodes((prev) => prev.filter((n) => n.id !== selectedNode));
+            setEdges((prev) => prev.filter((e) => e.from !== selectedNode && e.to !== selectedNode));
+            setSelectedNode(null);
+        }
+        if (selectedEdge) {
+            setEdges((prev) => prev.filter((e) => e.id !== selectedEdge));
+            setSelectedEdge(null);
+        }
+    };
+    const renameSelected = () => {
+        if (!selectedNode)
+            return;
+        const node = nodes.find((n) => n.id === selectedNode);
+        const label = window.prompt("Rename node:", node.label);
+        if (label)
+            setNodes((prev) => prev.map((n) => (n.id === selectedNode ? Object.assign(Object.assign({}, n), { label }) : n)));
+    };
+    return (<div style={{
+            width: "100vw",
+            height: "100vh",
+            background: "#0a0e1a",
+            display: "flex",
+            flexDirection: "column",
+            fontFamily: "'IBM Plex Mono', monospace",
+            color: "#94a3b8",
+        }}>
+      {/* Toolbar */}
+      <div style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "10px 20px",
+            background: "#0f1629",
+            borderBottom: "1px solid #1e2d4a",
+            flexShrink: 0,
+        }}>
+        <span style={{
+            color: "#38bdf8",
+            fontWeight: 700,
+            fontSize: 15,
+            marginRight: 16,
+            letterSpacing: 2,
+        }}>
+          ◈ DIAGRAM
+        </span>
+        {[
+            { label: "+ Node", action: addNode, color: "#34d399" },
+            {
+                label: "✎ Rename",
+                action: renameSelected,
+                color: "#fbbf24",
+                disabled: !selectedNode,
+            },
+            {
+                label: "✕ Delete",
+                action: deleteSelected,
+                color: "#f87171",
+                disabled: !selectedNode && !selectedEdge,
+            },
+        ].map((btn) => (<button key={btn.label} onClick={btn.action} disabled={btn.disabled} style={{
+                background: "transparent",
+                border: `1px solid ${btn.disabled ? "#1e2d4a" : btn.color}`,
+                color: btn.disabled ? "#2d3f5a" : btn.color,
+                padding: "5px 14px",
+                borderRadius: 4,
+                cursor: btn.disabled ? "default" : "pointer",
+                fontSize: 12,
+                fontFamily: "inherit",
+                letterSpacing: 1,
+            }}>
+            {btn.label}
+          </button>))}
+        <label style={{
+            marginLeft: "auto",
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 12,
+            cursor: "pointer",
+        }}>
+          <input type="checkbox" checked={showGrid} onChange={(e) => setShowGrid(e.target.checked)}/>{" "}
+          Grid
+        </label>
+        {connecting && (<span style={{ color: "#a78bfa", fontSize: 12, marginLeft: 8 }}>
+            ⟳ Click target node… (ESC)
+          </span>)}
+      </div>
+
+      {/* Hint bar */}
+      <div style={{
+            padding: "4px 20px",
+            fontSize: 11,
+            color: "#2d3f5a",
+            background: "#0a0e1a",
+            borderBottom: "1px solid #111827",
+        }}>
+        Drag nodes · ⊕ to connect · Double-click edge to add waypoint · Drag
+        waypoint ● to reshape · Right-click waypoint to remove
+      </div>
+
+      {/* SVG Canvas */}
+      <svg ref={svgRef} style={{ flex: 1, cursor: connecting ? "crosshair" : "default" }} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onClick={() => {
+            setSelectedNode(null);
+            setSelectedEdge(null);
+            if (connecting)
+                setConnecting(null);
+        }} tabIndex={0} onKeyDown={(e) => e.key === "Escape" && setConnecting(null)}>
+        <defs>
+          <pattern id="sg" width={GRID_SIZE} height={GRID_SIZE} patternUnits="userSpaceOnUse">
+            <path d={`M ${GRID_SIZE} 0 L 0 0 0 ${GRID_SIZE}`} fill="none" stroke="#111827" strokeWidth={0.5}/>
+          </pattern>
+          <pattern id="bg" width={GRID_SIZE * 5} height={GRID_SIZE * 5} patternUnits="userSpaceOnUse">
+            <rect width={GRID_SIZE * 5} height={GRID_SIZE * 5} fill="url(#sg)"/>
+            <path d={`M ${GRID_SIZE * 5} 0 L 0 0 0 ${GRID_SIZE * 5}`} fill="none" stroke="#1a2540" strokeWidth={1}/>
+          </pattern>
+          <marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
+            <path d="M 0 0 L 8 3 L 0 6 Z" fill="#38bdf8" opacity={0.8}/>
+          </marker>
+          <marker id="arrow-sel" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
+            <path d="M 0 0 L 8 3 L 0 6 Z" fill="#a78bfa"/>
+          </marker>
+          <marker id="arrow-preview" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
+            <path d="M 0 0 L 8 3 L 0 6 Z" fill="#a78bfa" opacity={0.8}/>
+          </marker>
+          <filter id="glow">
+            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+            <feMerge>
+              <feMergeNode in="coloredBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+
+        {showGrid && <rect width="100%" height="100%" fill="url(#bg)"/>}
+
+        {/* Edges */}
+        {edges.map((edge) => {
+            const fromNode = nodes.find((n) => n.id === edge.from);
+            const toNode = nodes.find((n) => n.id === edge.to);
+            if (!fromNode || !toNode)
+                return null;
+            const start = getRectEdge(fromNode, toNode);
+            const end = getRectEdge(toNode, fromNode);
+            const allPoints = [start, ...edge.waypoints, end];
+            const pathD = buildPath(allPoints);
+            const isSelected = selectedEdge === edge.id;
+            return (<g key={edge.id}>
+              {/* Invisible thick hit area */}
+              <path d={pathD} stroke="transparent" strokeWidth={12} fill="none" style={{ cursor: "pointer" }} onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectedEdge(edge.id);
+                    setSelectedNode(null);
+                }} onDoubleClick={(e) => handleEdgeDoubleClick(e, edge.id)}/>
+
+              {/* Glow when selected */}
+              {isSelected && (<path d={pathD} stroke="#a78bfa" strokeWidth={6} fill="none" opacity={0.15}/>)}
+
+              {/* Main line */}
+              <path d={pathD} stroke={isSelected ? "#a78bfa" : "#38bdf8"} strokeWidth={isSelected ? 2 : 1.5} fill="none" opacity={0.85} markerEnd={isSelected ? "url(#arrow-sel)" : "url(#arrow)"} style={{ pointerEvents: "none" }}/>
+
+              {/* Waypoints — always show, highlight when edge selected */}
+              {edge.waypoints.map((wp, i) => (<g key={i}>
+                  {/* Outer ring */}
+                  <circle cx={wp.x} cy={wp.y} r={isSelected ? 8 : 5} fill={isSelected ? "#1e1b2e" : "#0a0e1a"} stroke={isSelected ? "#a78bfa" : "#38bdf8"} strokeWidth={isSelected ? 2 : 1} style={{ cursor: "grab" }} onMouseDown={(e) => handleWaypointMouseDown(e, edge.id, i)} onContextMenu={(e) => handleWaypointRightClick(e, edge.id, i)}/>
+                  {/* Inner dot */}
+                  <circle cx={wp.x} cy={wp.y} r={isSelected ? 3 : 2} fill={isSelected ? "#a78bfa" : "#38bdf8"} style={{ pointerEvents: "none" }}/>
+                </g>))}
+
+              {/* Midpoint handles between waypoints (for adding new WP) */}
+              {isSelected &&
+                    allPoints.slice(0, -1).map((pt, i) => {
+                        const next = allPoints[i + 1];
+                        const mx = snap((pt.x + next.x) / 2);
+                        const my = snap((pt.y + next.y) / 2);
+                        return (<circle key={`mid-${i}`} cx={mx} cy={my} r={4} fill="#1e1b2e" stroke="#a78bfa" strokeWidth={1} strokeDasharray="2 2" style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                                e.stopPropagation();
+                                // Insert new waypoint at this midpoint
+                                setEdges((prev) => prev.map((ed) => {
+                                    if (ed.id !== edge.id)
+                                        return ed;
+                                    const newWP = [...ed.waypoints];
+                                    // Insert after i-1 (offset by 1 for start point)
+                                    newWP.splice(i, 0, { x: mx, y: my });
+                                    return Object.assign(Object.assign({}, ed), { waypoints: newWP });
+                                }));
+                                setDraggingWP({ edgeId: edge.id, index: i });
+                            }}/>);
+                    })}
+            </g>);
+        })}
+
+        {/* Preview line while connecting */}
+        {connecting &&
+            (() => {
+                const fromNode = nodes.find((n) => n.id === connecting.fromId);
+                if (!fromNode)
+                    return null;
+                const start = getRectEdge(fromNode, mousePos);
+                const pathD = buildPath([
+                    start,
+                    { x: snap(mousePos.x), y: snap(mousePos.y) },
+                ]);
+                return (<path d={pathD} stroke="#a78bfa" strokeWidth={1.5} fill="none" strokeDasharray="6 3" markerEnd="url(#arrow-preview)" opacity={0.8}/>);
+            })()}
+
+        {/* Nodes */}
+        {nodes.map((node) => {
+            const c = NODE_COLORS[node.colorIdx % NODE_COLORS.length];
+            const isSelected = selectedNode === node.id;
+            const hw = NODE_WIDTH / 2;
+            const hh = NODE_HEIGHT / 2;
+            return (<g key={node.id} transform={`translate(${node.x}, ${node.y})`} onMouseDown={(e) => handleNodeMouseDown(e, node.id)} onMouseUp={(e) => connecting && handleConnectEnd(e, node.id)} style={{
+                    cursor: (draggingNode === null || draggingNode === void 0 ? void 0 : draggingNode.id) === node.id ? "grabbing" : "grab",
+                }}>
+              {isSelected && (<rect x={-hw - 4} y={-hh - 4} width={NODE_WIDTH + 8} height={NODE_HEIGHT + 8} fill="none" stroke={c.border} strokeWidth={1} rx={6} opacity={0.4} filter="url(#glow)"/>)}
+
+              <rect x={-hw} y={-hh} width={NODE_WIDTH} height={NODE_HEIGHT} fill={c.bg} stroke={c.border} strokeWidth={isSelected ? 2 : 1} rx={4} filter={isSelected ? "url(#glow)" : "none"}/>
+
+              <rect x={-hw} y={-hh} width={NODE_WIDTH} height={3} fill={c.border} rx={4} opacity={0.8}/>
+
+              <text textAnchor="middle" dominantBaseline="middle" y={2} fill={c.text} fontSize={12} fontFamily="'IBM Plex Mono', monospace" fontWeight={500} style={{ pointerEvents: "none", userSelect: "none" }}>
+                {node.label}
+              </text>
+
+              {/* Connect button */}
+              <g transform={`translate(${hw - 2}, ${-hh - 8})`} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                    e.stopPropagation();
+                    handleConnectStart(e, node.id);
+                }}>
+                <circle r={7} fill="#0a0e1a" stroke={c.border} strokeWidth={1}/>
+                <text textAnchor="middle" dominantBaseline="middle" fill={c.border} fontSize={10} fontWeight={700} style={{ pointerEvents: "none" }}>
+                  ⊕
+                </text>
+              </g>
+            </g>);
+        })}
+      </svg>
+
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
+        * { box-sizing: border-box; }
+      `}</style>
+    </div>);
+}