seat-editor 3.6.26 → 3.6.28

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

@@ -1,14 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, } from "./utils";
-const LEVEL_COLORS = [
-    "#22c55e",
-    "#f59e0b",
-    "#f97316",
-    "#ef4444",
-    "#a78bfa",
-    "#38bdf8",
-];
+import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, rotatePoint, } from "./utils";
+const LEVEL_COLORS = ["#7239EA", "#3E97FF"];
 const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
 const floodFill = (seedIds, edges) => {
     const levelMap = new Map();
@@ -52,9 +45,14 @@ 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, 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, showConnection, renderedElements, groupSelection, connectionMatchKey, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    // console.log({ selectedEdge})
+    const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
+        if (connectionMatchKey) {
+            return (el === null || el === void 0 ? void 0 : el[connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.key]) === (connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.value);
+        }
+        return true;
+    }), [renderedElements, connectionMatchKey]);
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -105,6 +103,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         });
         return map;
     }, [edges, getNodeById, draggingAnchor, mousePos]);
+    if (!showConnection) {
+        return null;
+    }
     return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
                 var _a, _b, _c;
                 const node = getNodeById(nodeId);
@@ -115,7 +116,11 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
                 const color = getLevelColor(level);
                 const padding = 4;
-                return (_jsxs("g", { transform: `translate(${node.x}, ${node.y}) rotate(${rotation})`, style: { pointerEvents: "none" }, children: [_jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: 8, rx: 5, opacity: 0.08 }), _jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: level === 0 ? 2.5 : 1.5, strokeDasharray: level === 0 ? "none" : "5 3", rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsxs("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`, children: [_jsx("circle", { r: 7, fill: color, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: 7, fontFamily: "monospace", fontWeight: 700, style: { userSelect: "none" }, children: level })] })] }, `highlight-${nodeId}`));
+                if (level > 0)
+                    return null;
+                return (_jsxs("g", { transform: `translate(${node.x}, ${node.y}) rotate(${rotation})`, style: { pointerEvents: "none" }, children: [_jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: 8, rx: 5, opacity: 0.08 }), _jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: level === 0 ? 2.5 : 1.5, 
+                            // strokeDasharray={level === 0 ? "none" : "5 3"}
+                            rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsx("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})` })] }, `highlight-${nodeId}`));
             }), Array.from(nodeHighlightMapByNode.entries()).map(([nodeId, level]) => {
                 var _a, _b, _c;
                 const node = getNodeById(nodeId);
@@ -126,7 +131,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
                 const color = getLevelColor(level);
                 const padding = 4;
-                return (_jsxs("g", { transform: `translate(${node.x}, ${node.y}) rotate(${rotation})`, style: { pointerEvents: "none" }, children: [_jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: 8, rx: 5, opacity: 0.08 }), _jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: level === 0 ? 2.5 : 1.5, strokeDasharray: level === 0 ? "none" : "5 3", rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsxs("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`, children: [_jsx("circle", { r: 7, fill: color, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: 7, fontFamily: "monospace", fontWeight: 700, style: { userSelect: "none" }, children: level })] })] }, `highlight-${nodeId}`));
+                // console.log("nodeHighlightMapByNode", nodeId, level, color);
+                if (level > 1)
+                    return null;
+                return (_jsxs("g", { transform: `translate(${node.x}, ${node.y}) rotate(${rotation})`, style: { pointerEvents: "none" }, children: [_jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: 8, rx: 5, opacity: 0.08 }), _jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: level === 0 ? 2.5 : 1.5, 
+                            // strokeDasharray={level === 0 ? "none" : "5 3"}
+                            rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsx("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})` })] }, `highlight-${nodeId}`));
             }), edges.map((edge) => {
                 var _a;
                 const ep = edgePaths.get(edge.id);
@@ -135,30 +145,29 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
                 const isSel = selectedEdge === edge.id;
                 const isHov = hoveredEdge === edge.id;
+                const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
                 const fromLevel = nodeHighlightMap.get(edge.from);
                 const toLevel = nodeHighlightMap.get(edge.to);
-                const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-                const networkColor = isInNetwork
-                    ? getLevelColor(Math.max(fromLevel, toLevel))
-                    : "#38bdf8";
+                const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
+                    selectedNodeId === edge.to;
                 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);
-                            }, onMouseEnter: () => setHoveredEdge(edge.id), onMouseLeave: () => setHoveredEdge(null) }), (isSel || isHov) && (_jsx("path", { d: pathD, stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: 8, fill: "none", opacity: isSel ? 0.12 : 0.06, style: { pointerEvents: "none" } })), _jsx("path", { d: pathD, stroke: isSel
-                                ? "#a78bfa"
-                                : isInNetwork && selectedEdge
-                                    ? networkColor
-                                    : "#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) => {
+                            }, onMouseEnter: () => setHoveredEdge(edge.id), onMouseLeave: () => setHoveredEdge(null) }), (isSel || isHov) && (_jsx("path", { d: pathD, stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: 8, fill: "none", opacity: isSel ? 0.12 : 0.06, style: { pointerEvents: "none" } })), _jsx("path", { d: pathD, stroke: connectionMatch ? "#F1416C" : "#7239EA", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: isRing1 && selectedNodeId ? 1 : 0.3, strokeLinecap: "round", style: { pointerEvents: "none" } }), _jsxs("g", { children: [isDraggingFrom && (_jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 12, fill: "#7239EA", 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) => {
+                                    } }), _jsx("circle", { cx: fromPos.x, cy: fromPos.y, r: 3, fill: connectionMatch ? "#F1416C" : "#7239EA", 
+                                    // stroke="#0f172a"
+                                    // strokeWidth={1.5}
+                                    style: { pointerEvents: "none" } })] }), _jsxs("g", { children: [isDraggingTo && (_jsx("circle", { cx: toPos.x, cy: toPos.y, r: 12, fill: "#7239EA", opacity: 0.15, style: { pointerEvents: "none" } })), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 10, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => {
                                         e.stopPropagation();
                                         onStartDragAnchor(e, edge.id, "to");
-                                    } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 6, fill: isDraggingTo ? "#a78bfa" : "#22c55e", stroke: "#0f172a", strokeWidth: 1.5, style: { pointerEvents: "none" } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 2.5, fill: "#0f172a", style: { pointerEvents: "none" } })] })), ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (_jsxs("g", { children: [_jsx("circle", { cx: wp.x, cy: wp.y, r: 12, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => onStartDragWaypoint(e, edge.id, i), onContextMenu: (e) => onRemoveWaypoint(e, edge.id, i) }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 8 : 5, fill: isSel ? "#1e1b2e" : "#0f172a", stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: isSel ? 2 : 1.2, style: { pointerEvents: "none" } }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 3 : 2, fill: isSel ? "#a78bfa" : "#38bdf8", style: { pointerEvents: "none" } })] }, `wp-${i}`))), isSel &&
+                                    } }), _jsx("circle", { cx: toPos.x, cy: toPos.y, r: 3, fill: connectionMatch ? "#F1416C" : "#7239EA", 
+                                    // stroke="#0f172a"
+                                    // strokeWidth={1.5}
+                                    style: { pointerEvents: "none" } })] }), ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (_jsxs("g", { children: [_jsx("circle", { cx: wp.x, cy: wp.y, r: 12, fill: "transparent", style: { cursor: "grab" }, onMouseDown: (e) => onStartDragWaypoint(e, edge.id, i), onContextMenu: (e) => onRemoveWaypoint(e, edge.id, i) }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 8 : 5, fill: isSel ? "#1e1b2e" : "#0f172a", stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: isSel ? 2 : 1.2, style: { pointerEvents: "none" } }), _jsx("circle", { cx: wp.x, cy: wp.y, r: isSel ? 3 : 2, fill: isSel ? "#a78bfa" : "#38bdf8", style: { pointerEvents: "none" } })] }, `wp-${i}`))), isSel &&
                             isConnectEdge &&
                             allPoints.slice(0, -1).map((pt, i) => {
                                 var _a;
@@ -176,9 +185,43 @@ 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 findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : el.id) === connecting.fromId; });
+                    if (!findSourceTarget)
+                        return null;
+                    const { x, y, rotation, width, height } = findSourceTarget;
+                    const rotated = rotatePoint(width / 2, height / 2, rotation !== null && rotation !== void 0 ? rotation : 0);
+                    const w = width !== null && width !== void 0 ? width : NODE_WIDTH;
+                    const h = height !== null && height !== void 0 ? height : NODE_HEIGHT;
+                    const cx = x + rotated.x;
+                    const cy = y + rotated.y;
+                    // 3. Tentukan koordinat local space berdasarkan name/side
+                    let lx = 0;
+                    let ly = 0;
+                    const hw = w / 2;
+                    const hh = h / 2;
+                    if (connecting.fromPos.name === "top") {
+                        lx = 0;
+                        ly = -hh;
+                    }
+                    else if (connecting.fromPos.name === "right") {
+                        lx = hw;
+                        ly = 0;
+                    }
+                    else if (connecting.fromPos.name === "bottom") {
+                        lx = 0;
+                        ly = hh;
+                    }
+                    else if (connecting.fromPos.name === "left") {
+                        lx = -hw;
+                        ly = 0;
+                    }
+                    const rad = (rotation * Math.PI) / 180;
+                    const fromPos = {
+                        x: cx + lx * Math.cos(rad) - ly * Math.sin(rad),
+                        y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
+                    };
+                    const pts = computePoints(fromPos, mousePos, []);
                     const pathD = buildPath(pts);
-                    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" } })] }));
+                    return (_jsxs("g", { children: [_jsx("circle", { cx: fromPos === null || fromPos === void 0 ? void 0 : fromPos.x, cy: fromPos === null || fromPos === void 0 ? void 0 : 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" } })] }));
                 })(), 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

@@ -1,13 +1,6 @@
 import React, { useMemo, useState } from "react";
-import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, } from "./utils";
-const LEVEL_COLORS = [
-    "#22c55e",
-    "#f59e0b",
-    "#f97316",
-    "#ef4444",
-    "#a78bfa",
-    "#38bdf8",
-];
+import { buildPath, getRectEdge, GRID_SIZE, NODE_WIDTH, NODE_HEIGHT, snap, rotatePoint, } from "./utils";
+const LEVEL_COLORS = ["#7239EA", "#3E97FF"];
 const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
 const floodFill = (seedIds, edges) => {
     const levelMap = new Map();
@@ -51,9 +44,14 @@ 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, 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, showConnection, renderedElements, groupSelection, connectionMatchKey, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
-    // console.log({ selectedEdge})
+    const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
+        if (connectionMatchKey) {
+            return (el === null || el === void 0 ? void 0 : el[connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.key]) === (connectionMatchKey === null || connectionMatchKey === void 0 ? void 0 : connectionMatchKey.value);
+        }
+        return true;
+    }), [renderedElements, connectionMatchKey]);
     const nodeHighlightMap = useMemo(() => {
         if (!selectedEdge)
             return new Map();
@@ -104,6 +102,9 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         });
         return map;
     }, [edges, getNodeById, draggingAnchor, mousePos]);
+    if (!showConnection) {
+        return null;
+    }
     return (<g id="connection-layer">
       {/* Node highlight flood fill */}
       {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
@@ -116,14 +117,26 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
             const color = getLevelColor(level);
             const padding = 4;
+            if (level > 0)
+                return null;
             return (<g key={`highlight-${nodeId}`} transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`} style={{ pointerEvents: "none" }}>
             <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={8} rx={5} opacity={0.08}/>
-            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={level === 0 ? 2.5 : 1.5} strokeDasharray={level === 0 ? "none" : "5 3"} rx={5} opacity={level === 0 ? 1 : 0.75}/>
+            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={level === 0 ? 2.5 : 1.5} 
+            // strokeDasharray={level === 0 ? "none" : "5 3"}
+            rx={5} opacity={level === 0 ? 1 : 0.75}/>
             <g transform={`translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`}>
-              <circle r={7} fill={color} opacity={0.9}/>
-              <text textAnchor="middle" dominantBaseline="middle" fill="white" fontSize={7} fontFamily="monospace" fontWeight={700} style={{ userSelect: "none" }}>
-                {level}
-              </text>
+              {/* <circle r={7} fill={color} opacity={0.9} />
+                <text
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  fill="white"
+                  fontSize={7}
+                  fontFamily="monospace"
+                  fontWeight={700}
+                  style={{ userSelect: "none" }}
+                >
+                  {level}
+                </text> */}
             </g>
           </g>);
         })}
@@ -138,14 +151,27 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
             const color = getLevelColor(level);
             const padding = 4;
+            // console.log("nodeHighlightMapByNode", nodeId, level, color);
+            if (level > 1)
+                return null;
             return (<g key={`highlight-${nodeId}`} transform={`translate(${node.x}, ${node.y}) rotate(${rotation})`} style={{ pointerEvents: "none" }}>
             <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={8} rx={5} opacity={0.08}/>
-            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={level === 0 ? 2.5 : 1.5} strokeDasharray={level === 0 ? "none" : "5 3"} rx={5} opacity={level === 0 ? 1 : 0.75}/>
+            <rect x={-w / 2 - padding} y={-h / 2 - padding} width={w + padding * 2} height={h + padding * 2} fill="none" stroke={color} strokeWidth={level === 0 ? 2.5 : 1.5} 
+            // strokeDasharray={level === 0 ? "none" : "5 3"}
+            rx={5} opacity={level === 0 ? 1 : 0.75}/>
             <g transform={`translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`}>
-              <circle r={7} fill={color} opacity={0.9}/>
-              <text textAnchor="middle" dominantBaseline="middle" fill="white" fontSize={7} fontFamily="monospace" fontWeight={700} style={{ userSelect: "none" }}>
-                {level}
-              </text>
+              {/* <circle r={7} fill={color} opacity={0.9} />
+                <text
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  fill="white"
+                  fontSize={7}
+                  fontFamily="monospace"
+                  fontWeight={700}
+                  style={{ userSelect: "none" }}
+                >
+                  {level}
+                </text> */}
             </g>
           </g>);
         })}
@@ -159,16 +185,13 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             const { pathD, allPoints, fromPos, toPos, midX, midY } = ep;
             const isSel = selectedEdge === edge.id;
             const isHov = hoveredEdge === edge.id;
+            const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => el.id === edge.to || el.id === edge.from);
             const fromLevel = nodeHighlightMap.get(edge.from);
             const toLevel = nodeHighlightMap.get(edge.to);
-            const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
-            const networkColor = isInNetwork
-                ? getLevelColor(Math.max(fromLevel, toLevel))
-                : "#38bdf8";
+            const isRing1 = (selectedNodeId && selectedNodeId === edge.from) ||
+                selectedNodeId === edge.to;
             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) => {
@@ -180,33 +203,52 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             {(isSel || isHov) && (<path d={pathD} stroke={isSel ? "#a78bfa" : "#38bdf8"} strokeWidth={8} fill="none" opacity={isSel ? 0.12 : 0.06} style={{ pointerEvents: "none" }}/>)}
 
             {/* Curve */}
-            <path d={pathD} stroke={isSel
-                    ? "#a78bfa"
-                    : isInNetwork && selectedEdge
-                        ? networkColor
-                        : "#38bdf8"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill="none" opacity={(selectedEdge && !isSel && !isInNetwork) || isNotRing1 ? 0.2 : 0.9} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
+
+            <path d={pathD} stroke={connectionMatch ? "#F1416C" : "#7239EA"} strokeWidth={isSel ? 2 : isHov ? 2 : 1.5} fill={"none"} opacity={isRing1 && selectedNodeId ? 1 : 0.3} strokeLinecap="round" style={{ pointerEvents: "none" }}/>
 
             {/* FROM dot */}
-            {isSel && (<g>
-                {isDraggingFrom && (<circle cx={fromPos.x} cy={fromPos.y} r={12} fill="#38bdf8" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
+            {/* {isSel && ( */}
+              <g>
+                {isDraggingFrom && (<circle cx={fromPos.x} cy={fromPos.y} r={12} fill="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
                 <circle cx={fromPos.x} cy={fromPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
-                        e.stopPropagation();
-                        onStartDragAnchor(e, edge.id, "from");
-                    }}/>
-                <circle cx={fromPos.x} cy={fromPos.y} r={6} fill={isDraggingFrom ? "#a78bfa" : "#38bdf8"} stroke="#0f172a" strokeWidth={1.5} style={{ pointerEvents: "none" }}/>
-                <circle cx={fromPos.x} cy={fromPos.y} r={2.5} fill="#0f172a" style={{ pointerEvents: "none" }}/>
-              </g>)}
+                    e.stopPropagation();
+                    onStartDragAnchor(e, edge.id, "from");
+                }}/>
+                <circle cx={fromPos.x} cy={fromPos.y} r={3} fill={connectionMatch ? "#F1416C" : "#7239EA"} 
+            // stroke="#0f172a"
+            // strokeWidth={1.5}
+            style={{ pointerEvents: "none" }}/>
+                {/* <circle
+                  cx={fromPos.x}
+                  cy={fromPos.y}
+                  r={2.5}
+                  fill="#0f172a"
+                  style={{ pointerEvents: "none" }}
+                /> */}
+              </g>
+            {/* )} */}
 
             {/* TO dot */}
-            {isSel && (<g>
-                {isDraggingTo && (<circle cx={toPos.x} cy={toPos.y} r={12} fill="#22c55e" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
+            {/* {isSel && ( */}
+              <g>
+                {isDraggingTo && (<circle cx={toPos.x} cy={toPos.y} r={12} fill="#7239EA" opacity={0.15} style={{ pointerEvents: "none" }}/>)}
                 <circle cx={toPos.x} cy={toPos.y} r={10} fill="transparent" style={{ cursor: "grab" }} onMouseDown={(e) => {
-                        e.stopPropagation();
-                        onStartDragAnchor(e, edge.id, "to");
-                    }}/>
-                <circle cx={toPos.x} cy={toPos.y} r={6} fill={isDraggingTo ? "#a78bfa" : "#22c55e"} stroke="#0f172a" strokeWidth={1.5} style={{ pointerEvents: "none" }}/>
-                <circle cx={toPos.x} cy={toPos.y} r={2.5} fill="#0f172a" style={{ pointerEvents: "none" }}/>
-              </g>)}
+                    e.stopPropagation();
+                    onStartDragAnchor(e, edge.id, "to");
+                }}/>
+                <circle cx={toPos.x} cy={toPos.y} r={3} fill={connectionMatch ? "#F1416C" : "#7239EA"} 
+            // stroke="#0f172a"
+            // strokeWidth={1.5}
+            style={{ pointerEvents: "none" }}/>
+                {/* <circle
+                  cx={toPos.x}
+                  cy={toPos.y}
+                  r={2.5}
+                  fill="#0f172a"
+                  style={{ pointerEvents: "none" }}
+                /> */}
+              </g>
+            {/* )} */}
 
             {/* Waypoints */}
             {((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (<g key={`wp-${i}`}>
@@ -250,11 +292,45 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
       {/* Preview saat connecting */}
       {connecting &&
             (() => {
-                var _a, _b;
-                const pts = computePoints(connecting.fromPos, mousePos, []);
+                const findSourceTarget = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : el.id) === connecting.fromId; });
+                if (!findSourceTarget)
+                    return null;
+                const { x, y, rotation, width, height } = findSourceTarget;
+                const rotated = rotatePoint(width / 2, height / 2, rotation !== null && rotation !== void 0 ? rotation : 0);
+                const w = width !== null && width !== void 0 ? width : NODE_WIDTH;
+                const h = height !== null && height !== void 0 ? height : NODE_HEIGHT;
+                const cx = x + rotated.x;
+                const cy = y + rotated.y;
+                // 3. Tentukan koordinat local space berdasarkan name/side
+                let lx = 0;
+                let ly = 0;
+                const hw = w / 2;
+                const hh = h / 2;
+                if (connecting.fromPos.name === "top") {
+                    lx = 0;
+                    ly = -hh;
+                }
+                else if (connecting.fromPos.name === "right") {
+                    lx = hw;
+                    ly = 0;
+                }
+                else if (connecting.fromPos.name === "bottom") {
+                    lx = 0;
+                    ly = hh;
+                }
+                else if (connecting.fromPos.name === "left") {
+                    lx = -hw;
+                    ly = 0;
+                }
+                const rad = (rotation * Math.PI) / 180;
+                const fromPos = {
+                    x: cx + lx * Math.cos(rad) - ly * Math.sin(rad),
+                    y: cy + lx * Math.sin(rad) + ly * Math.cos(rad),
+                };
+                const pts = computePoints(fromPos, mousePos, []);
                 const pathD = buildPath(pts);
                 return (<g>
-              <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" }}/>
+              <circle cx={fromPos === null || fromPos === void 0 ? void 0 : fromPos.x} cy={fromPos === null || fromPos === void 0 ? void 0 : fromPos.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

@@ -114,6 +114,12 @@ export interface LayerViewProps<TMeta = undefined> {
         selection: Record<number, string[]>;
     };
     onHoldTable?: (e: React.PointerEvent<SVGSVGElement>, component: ComponentProps<TMeta>[]) => void;
+    showConnection?: boolean;
+    initialEdges?: EdgeType[];
+    connectionMatchKey?: {
+        key: string;
+        value: string | number;
+    };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

package/dist/features/view-only-5/index.js

@@ -29,7 +29,7 @@ const LayerView = (props) => {
         selectNode: false,
         connectingNode: false,
         dragTransferTable: false,
-    }, onMakeSelection, groupSelection, onHoldTable } = props;
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -288,7 +288,7 @@ const LayerView = (props) => {
         const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
         const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
         const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
-        if (downOutTable) {
+        if (downOutTable || (!targetGroup && !targetSelectionGroup)) {
             if (graph.connecting) {
                 graph.cancelConnect();
             }
@@ -618,11 +618,12 @@ const LayerView = (props) => {
     };
     // ─── Node helper ──────────────────────────────────────────────────────────
     const getNodeById = useCallback((id) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const comp = componentsEditor.find((item) => {
+            var _a, _b, _c;
             if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
-                return item[mappingKey].id == id;
-            return (item === null || item === void 0 ? void 0 : item.id) == id;
+                return (_b = (_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : item[mappingKey].id == id;
+            return (_c = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _c !== void 0 ? _c : item.id == id;
         });
         if (!comp)
             return null;
@@ -632,7 +633,7 @@ const LayerView = (props) => {
         const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
         const rotated = rotatePoint(w / 2, h / 2, rotation);
         return {
-            id: String(v.id),
+            id: (_d = v === null || v === void 0 ? void 0 : v[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _d !== void 0 ? _d : String(v.id),
             x: v.x + rotated.x,
             y: v.y + rotated.y,
             width: w,
@@ -649,6 +650,7 @@ const LayerView = (props) => {
         mappingKey,
         tableMatchKey,
         statusKey,
+        initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
     });
     // ─── Render ───────────────────────────────────────────────────────────────
     const hasBoundingBox = hasBoundingBoxRef.current;
@@ -661,7 +663,7 @@ const LayerView = (props) => {
     const viewBox = isValidBoundingBox
         ? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
         : "0 0 1000 1000";
-    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey), [
         componentsEditor,
         mappingKey,
         tableMatchKey,
@@ -670,6 +672,8 @@ const LayerView = (props) => {
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
+        graph.edges,
+        connectionMatchKey
     ]);
     return (_jsxs("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: { overflow: "auto", WebkitOverflowScrolling: "touch" } }, props.containerProps, { children: [loading && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx(TransformWrapper, Object.assign({ ref: transformRef, disablePadding: true, centerZoomedOut: true, panning: { disabled: panningGroup, wheelPanning: true }, wheel: { disabled: false }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: { width: "100%", height: "100%" }, contentStyle: { width: "100%", height: "100%" }, children: [_jsxs("svg", Object.assign({ id: "workspace", ref: svgRef, width: "100%", height: "100%", overflow: "hidden", viewBox: viewBox, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", onContextMenu: (e) => e.preventDefault(), 
                             // onDrop={(e) => handleTableEvent(e, "drop")}
@@ -683,17 +687,17 @@ const LayerView = (props) => {
                                 userSelect: "none",
                             } }, props.svgProps, { children: [_jsx("rect", { width: "100%", height: "100%", fill: "url(#biggrid)" }), hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", clipPath: "url(#contentCrop)", children: _jsx(Layers, { components: [...extraComponentsEditor, ...renderedElements], selectedTable: selectedTable, 
                                         // iconTags={iconTags}
-                                        eventMatchTable: eventMatchTable, privilegedTags: privilegedTags, selectionLines: selectedLines }) }), _jsx(ConnectionLayer, { edges: graph.edges, selectedEdge: graph.selectedEdge, connecting: graph.connecting, draggingAnchor: graph.draggingAnchor, mousePos: graph.mousePos, getNodeById: getNodeById, onSelectEdge: graph.selectEdge, onDeleteEdge: graph.deleteEdge, onStartDragWaypoint: graph.startDragWaypoint, onInsertWaypoint: graph.insertWaypoint, onRemoveWaypoint: graph.removeWaypoint, onStartDragAnchor: graph.startDragAnchor, isConnectEdge: actionPrivileged.connectingNode, selectedNodeId: graph.selectedNode }), renderedElements.map((item) => {
-                                    var _a, _b, _c, _d;
+                                        eventMatchTable: eventMatchTable, privilegedTags: privilegedTags, selectionLines: selectedLines }) }), _jsx(ConnectionLayer, { edges: graph.edges, selectedEdge: graph.selectedEdge, connecting: graph.connecting, draggingAnchor: graph.draggingAnchor, mousePos: graph.mousePos, getNodeById: getNodeById, onSelectEdge: graph.selectEdge, onDeleteEdge: graph.deleteEdge, onStartDragWaypoint: graph.startDragWaypoint, onInsertWaypoint: graph.insertWaypoint, onRemoveWaypoint: graph.removeWaypoint, onStartDragAnchor: graph.startDragAnchor, isConnectEdge: actionPrivileged.connectingNode, selectedNodeId: graph.selectedNode, showConnection: showConnection, renderedElements: renderedElements, groupSelection: groupSelection, connectionMatchKey: connectionMatchKey }), renderedElements.map((item) => {
+                                    var _a, _b, _c, _d, _e;
                                     const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
                                     return (_jsx(ConnectHandle, { 
                                         // isAnchor={true}
-                                        connecting: graph.connecting, cx: item.x + rotated.x, cy: item.y + rotated.y, width: (_b = item.width) !== null && _b !== void 0 ? _b : 100, height: (_c = item.height) !== null && _c !== void 0 ? _c : 50, rotation: (_d = item.rotation) !== null && _d !== void 0 ? _d : 0, nodeId: String(item.id), isConnecting: !!graph.connecting, isDraggingAnchor: !!graph.draggingAnchor, onStartConnect: (nodeId, clickPos) => graph.startConnect(nodeId, clickPos), onEndConnect: (nodeId, clickPos) => {
+                                        connecting: graph.connecting, cx: item.x + rotated.x, cy: item.y + rotated.y, width: (_b = item.width) !== null && _b !== void 0 ? _b : 100, height: (_c = item.height) !== null && _c !== void 0 ? _c : 50, rotation: (_d = item.rotation) !== null && _d !== void 0 ? _d : 0, nodeId: (_e = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _e !== void 0 ? _e : String(item.id), isConnecting: !!graph.connecting, isDraggingAnchor: !!graph.draggingAnchor, onStartConnect: (nodeId, clickPos) => graph.startConnect(nodeId, clickPos), onEndConnect: (nodeId, clickPos) => {
                                             if (graph.draggingAnchor)
                                                 graph.updateAnchor(nodeId, clickPos);
                                             else
                                                 graph.endConnect(nodeId, clickPos);
-                                        }, isConnectEdge: actionPrivileged.connectingNode, onSelectNode: graph.selectNode, isSelectNode: actionPrivileged.selectNode, onSelectEdge: graph.selectEdge, edges: graph.edges }, item.id));
+                                        }, isConnectEdge: actionPrivileged.connectingNode, onSelectNode: graph.selectNode, isSelectNode: actionPrivileged.selectNode, onSelectEdge: graph.selectEdge, edges: graph.edges, showConnection: showConnection }, item.id));
                                 })] })), tooltip.visible && (_jsx("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / scale})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children }))] }) }))] })));
 };
 export default LayerView;