seat-editor 3.4.7 → 3.5.0

package/dist/app/constant.d.ts

@@ -308,7 +308,7 @@ export declare const test4: ({
         tags: ({
             key: string;
             items: ({
-                type: TagType;
+                type: string;
                 value: string;
                 fontSize: number;
                 fontWeight: number;

package/dist/app/graph-view/page.d.ts

@@ -0,0 +1 @@
+export default function DrawIO(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,343 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { style: {
+            width: "100vw",
+            height: "100vh",
+            background: "#0a0e1a",
+            display: "flex",
+            flexDirection: "column",
+            fontFamily: "'IBM Plex Mono', monospace",
+            color: "#94a3b8",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "10px 20px",
+                    background: "#0f1629",
+                    borderBottom: "1px solid #1e2d4a",
+                    flexShrink: 0,
+                }, children: [_jsx("span", { style: {
+                            color: "#38bdf8",
+                            fontWeight: 700,
+                            fontSize: 15,
+                            marginRight: 16,
+                            letterSpacing: 2,
+                        }, children: "\u25C8 DIAGRAM" }), [
+                        { 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) => (_jsx("button", { 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,
+                        }, children: btn.label }, btn.label))), _jsxs("label", { style: {
+                            marginLeft: "auto",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            fontSize: 12,
+                            cursor: "pointer",
+                        }, children: [_jsx("input", { type: "checkbox", checked: showGrid, onChange: (e) => setShowGrid(e.target.checked) }), " ", "Grid"] }), connecting && (_jsx("span", { style: { color: "#a78bfa", fontSize: 12, marginLeft: 8 }, children: "\u27F3 Click target node\u2026 (ESC)" }))] }), _jsx("div", { style: {
+                    padding: "4px 20px",
+                    fontSize: 11,
+                    color: "#2d3f5a",
+                    background: "#0a0e1a",
+                    borderBottom: "1px solid #111827",
+                }, children: "Drag nodes \u00B7 \u2295 to connect \u00B7 Double-click edge to add waypoint \u00B7 Drag waypoint \u25CF to reshape \u00B7 Right-click waypoint to remove" }), _jsxs("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), children: [_jsxs("defs", { children: [_jsx("pattern", { id: "sg", width: GRID_SIZE, height: GRID_SIZE, patternUnits: "userSpaceOnUse", children: _jsx("path", { d: `M ${GRID_SIZE} 0 L 0 0 0 ${GRID_SIZE}`, fill: "none", stroke: "#111827", strokeWidth: 0.5 }) }), _jsxs("pattern", { id: "bg", width: GRID_SIZE * 5, height: GRID_SIZE * 5, patternUnits: "userSpaceOnUse", children: [_jsx("rect", { width: GRID_SIZE * 5, height: GRID_SIZE * 5, fill: "url(#sg)" }), _jsx("path", { d: `M ${GRID_SIZE * 5} 0 L 0 0 0 ${GRID_SIZE * 5}`, fill: "none", stroke: "#1a2540", strokeWidth: 1 })] }), _jsx("marker", { id: "arrow", markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: "auto", children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#38bdf8", opacity: 0.8 }) }), _jsx("marker", { id: "arrow-sel", markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: "auto", children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#a78bfa" }) }), _jsx("marker", { id: "arrow-preview", markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: "auto", children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#a78bfa", opacity: 0.8 }) }), _jsxs("filter", { id: "glow", children: [_jsx("feGaussianBlur", { stdDeviation: "3", result: "coloredBlur" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "coloredBlur" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), showGrid && _jsx("rect", { width: "100%", height: "100%", fill: "url(#bg)" }), 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 (_jsxs("g", { children: [_jsx("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) }), isSelected && (_jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 6, fill: "none", opacity: 0.15 })), _jsx("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" } }), edge.waypoints.map((wp, i) => (_jsxs("g", { children: [_jsx("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) }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSelected ? 3 : 2, fill: isSelected ? "#a78bfa" : "#38bdf8", style: { pointerEvents: "none" } })] }, i))), 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 (_jsx("circle", { 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 });
+                                            } }, `mid-${i}`));
+                                    })] }, edge.id));
+                    }), 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 (_jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", markerEnd: "url(#arrow-preview)", opacity: 0.8 }));
+                        })(), 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 (_jsxs("g", { 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",
+                            }, children: [isSelected && (_jsx("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)" })), _jsx("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" }), _jsx("rect", { x: -hw, y: -hh, width: NODE_WIDTH, height: 3, fill: c.border, rx: 4, opacity: 0.8 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", y: 2, fill: c.text, fontSize: 12, fontFamily: "'IBM Plex Mono', monospace", fontWeight: 500, style: { pointerEvents: "none", userSelect: "none" }, children: node.label }), _jsxs("g", { transform: `translate(${hw - 2}, ${-hh - 8})`, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                                        e.stopPropagation();
+                                        handleConnectStart(e, node.id);
+                                    }, children: [_jsx("circle", { r: 7, fill: "#0a0e1a", stroke: c.border, strokeWidth: 1 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: c.border, fontSize: 10, fontWeight: 700, style: { pointerEvents: "none" }, children: "\u2295" })] })] }, node.id));
+                    })] }), _jsx("style", { children: `
+        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
+        * { box-sizing: border-box; }
+      ` })] }));
+}