seat-editor 3.6.7 → 3.6.8

package/dist/features/view-only-5/connect-handle.d.ts

@@ -25,6 +25,13 @@ type Props = {
         from: string;
         to: string;
     }[];
+    connecting: {
+        fromId: string;
+        fromPos: {
+            x: number;
+            y: number;
+        };
+    } | null;
 };
 export declare const ConnectHandle: React.FC<Props>;
 export {};

package/dist/features/view-only-5/connect-handle.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// connect-handle.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 // 4 titik per sisi dalam local space
 const getLocalAnchors = (w, h) => {
     const hw = w / 2;
@@ -24,7 +23,7 @@ const nearestAnchor = (lx, ly, anchors) => {
     }
     return best;
 };
-export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges }) => {
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, }) => {
     const hw = width / 2;
     const hh = height / 2;
     const [hovered, setHovered] = useState(false);
@@ -53,15 +52,19 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
         };
     };
+    useEffect(() => {
+        if (!isActiveSelectEdge) {
+            onSelectEdge && onSelectEdge("");
+            onSelectEdge && onSelectNode("");
+        }
+    }, [isActiveSelectEdge]);
     const handlePointerDown = (e) => {
         e.stopPropagation();
         const local = toLocalPos(e);
         const snapped = nearestAnchor(local.x, local.y, anchors);
         const worldPos = toWorld(snapped.x, snapped.y);
-        console.log({ isActiveSelectEdge });
         if (isActiveSelectEdge) {
-            const findEdge = edges.find(e => e.from === nodeId || e.to === nodeId);
-            console.log({ findEdge });
+            const findEdge = edges.find((e) => e.from === nodeId || e.to === nodeId);
             onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
             onSelectNode(nodeId);
             return;
@@ -78,7 +81,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
                     cursor: isConnectEdge ? "crosshair" : "pointer",
                     pointerEvents: isConnectEdge ? "all" : "none",
                 }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onPointerDown: (e) => {
-                    console.log({ isConnectEdge, isSelectNode });
+                    // console.log({ isConnectEdge, isSelectNode });
                     // console.log({ isConnectEdge, isSelectNode })
                     // if (!isConnectEdge ) return;
                     // if (!isSelectNode) return;

package/dist/features/view-only-5/connect-handle.jsx

@@ -1,5 +1,4 @@
-// connect-handle.tsx
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // 4 titik per sisi dalam local space
 const getLocalAnchors = (w, h) => {
     const hw = w / 2;
@@ -23,7 +22,7 @@ const nearestAnchor = (lx, ly, anchors) => {
     }
     return best;
 };
-export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges }) => {
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isConnecting, isDraggingAnchor, onStartConnect, onEndConnect, isConnectEdge, onSelectNode, isSelectNode, onSelectEdge, edges, connecting, }) => {
     const hw = width / 2;
     const hh = height / 2;
     const [hovered, setHovered] = useState(false);
@@ -52,15 +51,19 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
         };
     };
+    useEffect(() => {
+        if (!isActiveSelectEdge) {
+            onSelectEdge && onSelectEdge("");
+            onSelectEdge && onSelectNode("");
+        }
+    }, [isActiveSelectEdge]);
     const handlePointerDown = (e) => {
         e.stopPropagation();
         const local = toLocalPos(e);
         const snapped = nearestAnchor(local.x, local.y, anchors);
         const worldPos = toWorld(snapped.x, snapped.y);
-        console.log({ isActiveSelectEdge });
         if (isActiveSelectEdge) {
-            const findEdge = edges.find(e => e.from === nodeId || e.to === nodeId);
-            console.log({ findEdge });
+            const findEdge = edges.find((e) => e.from === nodeId || e.to === nodeId);
             onSelectEdge(findEdge === null || findEdge === void 0 ? void 0 : findEdge.id);
             onSelectNode(nodeId);
             return;
@@ -82,7 +85,7 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
             cursor: isConnectEdge ? "crosshair" : "pointer",
             pointerEvents: isConnectEdge ? "all" : "none",
         }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onPointerDown={(e) => {
-            console.log({ isConnectEdge, isSelectNode });
+            // console.log({ isConnectEdge, isSelectNode });
             // console.log({ isConnectEdge, isSelectNode })
             // if (!isConnectEdge ) return;
             // if (!isSelectNode) return;
@@ -92,5 +95,6 @@ export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, isC
       {/* Anchor dots — muncul saat hover atau active */}
       {((hovered && isConnectEdge) || isActive) &&
             anchors.map((a, i) => (<circle key={i} cx={a.x} cy={a.y} r={3} fill={isActive ? "#a78bfa" : "#38bdf8"} opacity={0.5} style={{ pointerEvents: "none" }}/>))}
+      
     </g>);
 };

package/dist/features/view-only-5/connection-layer.d.ts

@@ -27,7 +27,6 @@ type Props = {
     onRemoveWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
     onStartDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
     isConnectEdge: boolean;
-    isSelectNode: boolean;
     selectedNodeId: string | null;
 };
 export declare const ConnectionLayer: React.FC<Props>;

package/dist/features/view-only-5/connection-layer.js

@@ -52,9 +52,9 @@ const quadraticMidpoint = (from, to) => {
         y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
     };
 };
-export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, isSelectNode, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    console.log({ selectedEdge });
+    // console.log({ selectedEdge})
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -138,12 +138,13 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 const fromLevel = nodeHighlightMap.get(edge.from);
                 const toLevel = nodeHighlightMap.get(edge.to);
                 const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-                console.log({ isInNetwork, fromLevel, toLevel }, selectedEdge, !isSel && !isInNetwork);
                 const networkColor = isInNetwork
                     ? getLevelColor(Math.max(fromLevel, toLevel))
                     : "#38bdf8";
                 const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
                 const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+                // const currentConnection = 
+                const isNotRing1 = connecting && ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to);
                 return (_jsxs("g", { children: [_jsx("path", { d: pathD, stroke: "transparent", strokeWidth: 14, fill: "none", style: { cursor: "pointer" }, onClick: (e) => {
                                 e.stopPropagation();
                                 onSelectEdge(edge.id);
@@ -151,7 +152,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                                 ? "#a78bfa"
                                 : isInNetwork && selectedEdge
                                     ? networkColor
-                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9, strokeLinecap: "round", style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#38bdf8", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
+                                    : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: (selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 0.9, strokeLinecap: "round", style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#38bdf8", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
                                         e.stopPropagation();
                                         onStartDragAnchor(e, edge.id, "from");
                                     } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 6, fill: isDraggingFrom ? "#a78bfa" : "#38bdf8", stroke: "#0f172a", strokeWidth: 1.5, style: { pointerEvents: "none" } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 2.5, fill: "#0f172a", style: { pointerEvents: "none" } })] })), isSel && (_jsxs("g", { children: [isDraggingTo && (_jsx("circle", { cx: toPos.x, cy: toPos.y, r: 12, fill: "#22c55e", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
@@ -175,8 +176,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                             }, style: { cursor: "pointer" }, children: [_jsx("rect", { x: midX - 16, y: midY - 10, width: 32, height: 18, rx: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, opacity: 0.95 }), _jsx("text", { x: midX, y: midY, textAnchor: "middle", dominantBaseline: "middle", fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", fontWeight: 600, children: "DEL" })] }))] }, edge.id));
             }), connecting &&
                 (() => {
+                    var _a, _b;
                     const pts = computePoints(connecting.fromPos, mousePos, []);
                     const pathD = buildPath(pts);
-                    return (_jsxs("g", { children: [_jsx("circle", { cx: connecting.fromPos.x, cy: connecting.fromPos.y, r: 4, fill: "#a78bfa", stroke: "#0f172a", strokeWidth: 0.8, opacity: 0.9, style: { pointerEvents: "none" } }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", strokeLinecap: "round", opacity: 0.8, style: { pointerEvents: "none" } })] }));
+                    return (_jsxs("g", { children: [_jsx("circle", { cx: (_a = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _a === void 0 ? void 0 : _a.x, cy: (_b = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _b === void 0 ? void 0 : _b.y, r: 4, fill: "#a78bfa", stroke: "#0f172a", strokeWidth: 0.8, opacity: 0.9, style: { pointerEvents: "none" } }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", strokeLinecap: "round", opacity: 0.8, style: { pointerEvents: "none" } })] }));
                 })(), draggingAnchor && (_jsx("text", { x: mousePos.x + 14, y: mousePos.y - 8, fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", opacity: 0.8, style: { pointerEvents: "none", userSelect: "none" }, children: "klik node tujuan" }))] }));
 };

package/dist/features/view-only-5/connection-layer.jsx

@@ -51,9 +51,9 @@ const quadraticMidpoint = (from, to) => {
         y: mt * mt * from.y + 2 * mt * t * cpy + t * t * to.y,
     };
 };
-export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, isSelectNode, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    console.log({ selectedEdge });
+    // console.log({ selectedEdge})
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -162,12 +162,13 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const fromLevel = nodeHighlightMap.get(edge.from);
             const toLevel = nodeHighlightMap.get(edge.to);
             const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-            console.log({ isInNetwork, fromLevel, toLevel }, selectedEdge, !isSel && !isInNetwork);
             const networkColor = isInNetwork
                 ? getLevelColor(Math.max(fromLevel, toLevel))
                 : "#38bdf8";
             const isDraggingFrom = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "from";
             const isDraggingTo = (draggingAnchor === null || draggingAnchor === void 0 ? void 0 : draggingAnchor.edgeId) === edge.id && draggingAnchor.side === "to";
+            // const currentConnection = 
+            const isNotRing1 = connecting && ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.from && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== edge.to);
             return (<g key={edge.id}>
             {/* Hit area */}
             <path d={pathD} stroke="transparent" strokeWidth={14} fill="none" style={{ cursor: "pointer" }} onClick={(e) => {
@@ -183,7 +184,7 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                     ? "#a78bfa"
                     : isInNetwork && selectedEdge
                         ? networkColor
-                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
+                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={(selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
 
             {/* FROM dot */}
             {isSel && (<g>
@@ -249,10 +250,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
       {/* Preview saat connecting */}
       {connecting &&
             (() => {
+                var _a, _b;
                 const pts = computePoints(connecting.fromPos, mousePos, []);
                 const pathD = buildPath(pts);
                 return (<g>
-              <circle cx={connecting.fromPos.x} cy={connecting.fromPos.y} r={4} fill="#a78bfa" stroke="#0f172a" strokeWidth={0.8} opacity={0.9} style={{ pointerEvents: "none" }}/>
+              <circle cx={(_a = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _a === void 0 ? void 0 : _a.x} cy={(_b = connecting === null || connecting === void 0 ? void 0 : connecting.fromPos) === null || _b === void 0 ? void 0 : _b.y} r={4} fill="#a78bfa" stroke="#0f172a" strokeWidth={0.8} opacity={0.9} style={{ pointerEvents: "none" }}/>
               <path d={pathD} stroke="#a78bfa" strokeWidth={1.5} fill="none" strokeDasharray="6 3" strokeLinecap="round" opacity={0.8} style={{ pointerEvents: "none" }}/>
             </g>);
             })()}

package/dist/features/view-only-5/index.d.ts

@@ -8,9 +8,14 @@ export type TableGhost = {
     event: EventHandleType;
 };
 export type TableMatchKey = {
-    key: string | number;
+    value: string | number;
+    key: string;
     properties?: PropertiesProps;
     className?: string;
+    element?: {
+        icon: React.JSX.Element;
+        props: SVGAttributes<SVGElement>;
+    };
 };
 export type TableMatchEvent = {
     event: EventHandleType;
@@ -86,17 +91,21 @@ export interface LayerViewProps<TMeta = undefined> {
     viewOnly?: boolean;
     actionPrivileged?: {
         select?: boolean;
-        move?: boolean;
-        switch?: boolean;
-        drop?: boolean;
         rightClick?: boolean;
         double?: boolean;
+        selection?: boolean;
+        grapConnection?: boolean;
+        viewGraph?: boolean;
+        dragTable?: boolean;
+        selectNode?: boolean;
+        connectingNode?: boolean;
     };
     onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
     keyNode?: string;
     isConnectEdge?: boolean;
     isSelectNode?: boolean;
     onMakeSelection?: (component: ComponentProps<TMeta>[]) => void;
+    onDragTable?: (e: React.PointerEvent<SVGSVGElement>, component: ComponentProps<TMeta>) => void;
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;