seat-editor 3.6.7 → 3.6.9

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

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState, useImperativeHandle, useCa
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v5";
-import { createTableGhost, getGlobalBBox, } from "../board-v3/utils";
+import { createTableGhost, getGlobalBBox, getTranslate, } from "../board-v3/utils";
 import { Spin } from "antd";
 import { rotatePoint, renderElements } from "./utils";
 import { useConnectionGraph } from "./use-connection-graph";
@@ -12,14 +12,22 @@ import { ConnectHandle } from "./connect-handle";
 import { getAttributeElement } from "../board-v3/resize-element";
 const LayerView = (props) => {
     var _a, _b, _c, _d;
-    const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
+    const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, mappingKey, statusKey, defaultBackground, defaultBoundingBox, 
+    // iconTags,
+    tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
         select: true,
         move: true,
         switch: true,
         drop: true,
         rightClick: true,
         double: true,
-    }, isConnectEdge = true, isSelectNode = true, onMakeSelection } = props;
+        selection: true,
+        grapConnection: true,
+        viewGraph: true,
+        dragTable: true,
+        selectNode: true,
+        connectingNode: true
+    }, onMakeSelection, } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -37,6 +45,7 @@ const LayerView = (props) => {
     const [scale, setScale] = useState(1);
     const [selectedTable, setSelectedTable] = useState(null);
     const dataElementSelectionGroupRef = useRef([]);
+    const [selectedLines, setSelectedLines] = useState(null);
     const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps, } = useAppSelector((state) => state.board);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const { loading } = useAppSelector((state) => state.panel);
@@ -108,6 +117,10 @@ const LayerView = (props) => {
         }
         return data;
     };
+    const handleUnSelectComponent = () => {
+        setSelectedLines(null);
+        dataElementSelectionGroupRef.current = [];
+    };
     const handleDoubleClick = (items, e) => {
         const find = componentsEditor.find((item) => {
             var _a;
@@ -203,46 +216,31 @@ const LayerView = (props) => {
             height: maxY,
         };
     }, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
-    const [fingerCount, setFingerCount] = useState(0);
-    useEffect(() => {
-        const container = document.getElementById("workspace");
-        const handleTouchStart = (e) => setFingerCount(e.touches.length);
-        const handleTouchEnd = () => setFingerCount(0);
-        if (container) {
-            container.addEventListener("touchstart", handleTouchStart);
-            container.addEventListener("touchend", handleTouchEnd);
-        }
-        return () => {
-            if (container) {
-                container.removeEventListener("touchstart", handleTouchStart);
-                container.removeEventListener("touchend", handleTouchEnd);
-            }
-        };
-    }, []);
-    const handleTableEvent = (event, type) => {
-        var _a;
-        event.preventDefault();
-        const elementTarget = event.target;
-        if (!elementTarget)
-            return;
-        const group = elementTarget.closest("g[data-id]");
-        if (!group)
-            return;
-        try {
-            const tableId = JSON.parse(group.getAttribute("data-id") || "{}");
-            const dragEvent = event;
-            const dataTransfer = JSON.parse(((_a = dragEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("application/json")) || "{}");
-            const data = {
-                targetTable: originalData({ id: tableId, type: "find" }),
-                sourceTable: originalData({ dataParams: dataTransfer, type: "get" }),
-            };
-            if (type === "drop")
-                onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop) && onDrop(event, data);
-        }
-        catch (err) {
-            console.error("Invalid data-id JSON:", err);
-        }
-    };
+    // const handleTableEvent = (
+    //   event: React.MouseEvent<SVGSVGElement>,
+    //   type: EventHandleType
+    // ) => {
+    //   event.preventDefault();
+    //   const elementTarget = event.target as SVGElement | null;
+    //   if (!elementTarget) return;
+    //   const group = elementTarget.closest("g[data-id]");
+    //   if (!group) return;
+    //   try {
+    //     const tableId = JSON.parse(group.getAttribute("data-id") || "{}");
+    //     const dragEvent = event as React.DragEvent<SVGSVGElement>;
+    //     const dataTransfer = JSON.parse(
+    //       dragEvent.dataTransfer?.getData("application/json") || "{}"
+    //     );
+    //     // const data = {
+    //     //   targetTable: originalData({ id: tableId, type: "find" }),
+    //     //   sourceTable: originalData({ dataParams: dataTransfer, type: "get" }),
+    //     // };
+    //     // if (type === "drop")
+    //     //   onDrop && actionPrivileged?.drop && onDrop(event, data);
+    //   } catch (err) {
+    //     console.error("Invalid data-id JSON:", err);
+    //   }
+    // };
     const getSvgCoords = (e) => {
         var _a;
         const svg = svgRef.current;
@@ -256,9 +254,13 @@ const LayerView = (props) => {
     const clickTimerRef = useRef(null);
     const ignoreNextRef = useRef(false);
     const DOUBLE_DELAY = 250;
+    useEffect(() => {
+        if (!(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection)) {
+            setSelectedLines(null);
+        }
+    }, [actionPrivileged]);
     const handlePointerDown = (e) => {
-        var _a;
-        console.log("handlePointerDown", e);
+        var _a, _b, _c;
         const svg = svgRef.current;
         if (!e.isPrimary || !svg)
             return;
@@ -270,7 +272,15 @@ const LayerView = (props) => {
         const targetGroup = e.target.closest("g[data-id]");
         const { clientX, clientY } = e;
         const hitPoint = document.elementFromPoint(clientX, clientY);
-        const makeSelection = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
+        const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
+        const makeSelection = downOutTable && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
+        const hadSelection = dataElementSelectionGroupRef.current.length > 0;
+        const downInOutSelection = hadSelection && makeSelection;
+        if (downOutTable) {
+            if (graph.connecting) {
+                graph.cancelConnect();
+            }
+        }
         if (makeSelection) {
             const boxSelection = createTableGhost({
                 x,
@@ -283,78 +293,72 @@ const LayerView = (props) => {
             });
             (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
         }
+        if (downInOutSelection) {
+            handleUnSelectComponent();
+        }
         setPanningGroup(true);
-        // if (!targetGroup) {
-        //   setTooltip((prev) => ({ ...prev, visible: false }));
-        //   return;
-        // }
-        // let ghost = targetGroup.cloneNode(true) as SVGGElement;
-        // const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
-        // const allowedDrag =
-        //   (!props?.dragTableBlockKey
-        //     ? true
-        //     : !props?.dragTableBlockKey?.some((_) => {
-        //         const dataRaw: any = originalData({ id: ghostId, type: "find" });
-        //         return _.value === dataRaw?.[_.key];
-        //       })) &&
-        //   actionPrivileged?.move &&
-        //   actionPrivileged?.switch;
-        // if (ghostAttributes) {
-        //   Object.keys(ghostAttributes).forEach((key) =>
-        //     ghost.setAttribute(key, ghostAttributes[key])
-        //   );
-        // }
-        // ghost.setAttribute("opacity", "0.5");
-        // ghost.setAttribute("pointer-events", "none");
-        // ghost.setAttribute("stroke-width", "1");
-        // svg.appendChild(ghost);
-        // tableGhost.current = ghost;
-        // const startBox = getTranslate(targetGroup);
-        // const groupCTM = targetGroup.getCTM();
-        // if (!groupCTM) {
-        //   setTooltip((prev) => ({ ...prev, visible: false }));
-        //   return;
-        // }
-        // const offset = { x: x - startBox.x, y: y - startBox.y };
+        if (!targetGroup) {
+            setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+            return;
+        }
+        let ghost = targetGroup.cloneNode(true);
+        const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+        const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
+            ? true
+            : !((_b = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _b === void 0 ? void 0 : _b.some((_) => {
+                const dataRaw = originalData({ id: ghostId, type: "find" });
+                return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
+            }))) &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable);
+        if (ghostAttributes) {
+            Object.keys(ghostAttributes).forEach((key) => ghost.setAttribute(key, ghostAttributes[key]));
+        }
+        if (allowedDrag) {
+            (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData("application/json", JSON.stringify(ghostId));
+            const dataRaw = originalData({ id: ghostId, type: "find" });
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable) && (props === null || props === void 0 ? void 0 : props.onDragTable) && props.onDragTable(e, dataRaw);
+        }
+        ghost.setAttribute("opacity", "0.5");
+        ghost.setAttribute("pointer-events", "none");
+        ghost.setAttribute("stroke-width", "1");
+        svg.appendChild(ghost);
+        tableGhost.current = ghost;
+        const startBox = getTranslate(targetGroup);
+        const groupCTM = targetGroup.getCTM();
+        if (!groupCTM) {
+            setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+            return;
+        }
+        const offset = { x: x - startBox.x, y: y - startBox.y };
         const pointerMoveGhost = (ev) => {
-            // console.log({ makeSelection });
-            // if (allowedDrag) {
-            //   isDragging.current = true;
-            //   const p = svg.createSVGPoint();
-            //   p.x = ev.clientX;
-            //   p.y = ev.clientY;
-            //   const dx = ev.clientX - startX;
-            //   const dy = ev.clientY - startY;
-            //   onPanning(ev);
-            //   if (!hasMoved && Math.sqrt(dx * dx + dy * dy) > 0) {
-            //     hasMoved = true;
-            //   }
-            //   ghost.style.display = "none";
-            //   const elemUnderPointer = document.elementFromPoint(
-            //     ev.clientX,
-            //     ev.clientY
-            //   );
-            //   ghost.style.display = "";
-            //   const hoveredGroup = elemUnderPointer?.closest(
-            //     "g[data-id]"
-            //   ) as SVGGElement | null;
-            //   const dataHoveredGhostId = JSON.parse(
-            //     hoveredGroup?.getAttribute("data-id") || "{}"
-            //   );
-            //   const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
-            //   if (dataHoveredGhostId !== dataGhostId)
-            //     hoverUnderghostId.current = dataHoveredGhostId;
-            //   const posSVG = p.matrixTransform(svg.getScreenCTM()?.inverse());
-            //   ghost.setAttribute(
-            //     "transform",
-            //     `translate(${posSVG.x - offset.x}, ${posSVG.y - offset.y})`
-            //   );
-            // }
+            var _a;
+            if (allowedDrag) {
+                isDragging.current = true;
+                const p = svg.createSVGPoint();
+                p.x = ev.clientX;
+                p.y = ev.clientY;
+                const dx = ev.clientX - startX;
+                const dy = ev.clientY - startY;
+                onPanning(ev);
+                if (!hasMoved && Math.sqrt(dx * dx + dy * dy) > 0) {
+                    hasMoved = true;
+                }
+                ghost.style.display = "none";
+                const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
+                ghost.style.display = "";
+                const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
+                const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
+                const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
+                if (dataHoveredGhostId !== dataGhostId)
+                    hoverUnderghostId.current = dataHoveredGhostId;
+                const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+                ghost.setAttribute("transform", `translate(${posSVG.x - offset.x}, ${posSVG.y - offset.y})`);
+            }
             const pt = svg.createSVGPoint();
             pt.x = ev.clientX;
             pt.y = ev.clientY;
             const pos = pt.matrixTransform(svg.getScreenCTM().inverse());
-            const onMakeSelectionBox = (ev) => {
+            const onMakeSelectionBox = () => {
                 var _a, _b;
                 let selectionBoxGhost = svg.querySelector("#selection-box-ghost");
                 const selX = Math.min(pos.x, x);
@@ -395,11 +399,11 @@ const LayerView = (props) => {
                 dataElementSelectionGroupRef.current = selectedComps;
             };
             if (makeSelection)
-                onMakeSelectionBox(ev);
+                onMakeSelectionBox();
         };
         pointerMoveGhost(e.nativeEvent);
         const pointerHandleUp = (e) => {
-            var _a, _b;
+            var _a, _b, _c;
             if (targetGroup) {
                 const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
                 isDragging.current = false;
@@ -435,11 +439,46 @@ const LayerView = (props) => {
                     clickTimerRef.current = null;
                 }, DOUBLE_DELAY);
             }
-            if (makeSelection) {
-                const allTableInSelection = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((d) => d.id);
-                const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => { var _a, _b; return ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id) && (allTableInSelection === null || allTableInSelection === void 0 ? void 0 : allTableInSelection.includes((_b = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _b === void 0 ? void 0 : _b.id)); });
+            if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
+                const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
+                    var _a, _b;
+                    return ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id) &&
+                        (allTableInSelection === null || allTableInSelection === void 0 ? void 0 : allTableInSelection.includes((_b = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _b === void 0 ? void 0 : _b.id));
+                });
                 onMakeSelection && onMakeSelection(filterTableInSelection);
-                (_b = svg.querySelector("#selection-box-ghost")) === null || _b === void 0 ? void 0 : _b.remove();
+                let xs = [];
+                let ys = [];
+                let x2 = [];
+                let y2 = [];
+                dataElementSelectionGroupRef.current.forEach((element) => {
+                    const activeId = element.id;
+                    const { g } = getAttributeElement(svg, String(activeId));
+                    const { x, y } = getTranslate(g);
+                    const { width, height } = getGlobalBBox(svg, g);
+                    xs.push(x);
+                    ys.push(y);
+                    x2.push(x + width);
+                    y2.push(y + height);
+                });
+                const selectionBox = {
+                    x: Math.min(...xs),
+                    y: Math.min(...ys),
+                    width: Math.max(...x2) - Math.min(...xs),
+                    height: Math.max(...y2) - Math.min(...ys),
+                    stroke: "red",
+                    shape: "selection-box",
+                    fill: "transparent",
+                    id: `${Date.now()}`,
+                    rotation: 0,
+                };
+                function hasInvalidNumber(obj) {
+                    return Object.values(obj).some((v) => typeof v === "number" && !Number.isFinite(v));
+                }
+                if (!hasInvalidNumber(selectionBox)) {
+                    setSelectedLines(selectionBox);
+                }
+                (_c = svg.querySelector("#selection-box-ghost")) === null || _c === void 0 ? void 0 : _c.remove();
             }
             setPanningGroup(false);
             tableGhost.current = null;
@@ -562,7 +601,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, statusKey), [componentsEditor, mappingKey, tableMatchKey, statusKey]);
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting), [componentsEditor, mappingKey, tableMatchKey, statusKey, graph.connecting]);
     return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }} {...props.containerProps}>
       {loading && (<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">
           {(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
@@ -570,7 +609,9 @@ const LayerView = (props) => {
 
       <TransformWrapper 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}>
         <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }} contentStyle={{ width: "100%", height: "100%" }}>
-          <svg 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")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} onMouseMove={(e) => graph.onMouseMove(e)} onMouseUp={() => graph.onMouseUp()} onClick={(e) => {
+          <svg 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")}
+    onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} onMouseMove={(e) => graph.onMouseMove(e)} onMouseUp={() => graph.onMouseUp()} onClick={(e) => {
             // if (!graph.draggingAnchor) graph.clearSelection();
             // if (graph.connecting) graph.cancelConnect();
         }} style={{
@@ -588,20 +629,24 @@ const LayerView = (props) => {
               </defs>)}
 
             <g id="main-layer" clipPath="url(#contentCrop)">
-              <Layers components={[...extraComponentsEditor, ...renderedElements]} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable} privilegedTags={privilegedTags}/>
+              <Layers components={[...extraComponentsEditor, ...renderedElements]} selectedTable={selectedTable} 
+    // iconTags={iconTags}
+    eventMatchTable={eventMatchTable} privilegedTags={privilegedTags} selectionLines={selectedLines}/>
             </g>
 
-            <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={isConnectEdge} selectedNodeId={graph.selectedNode} isSelectNode={isSelectNode}/>
+            <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;
             const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
-            return (<ConnectHandle key={item.id} 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) => {
+            return (<ConnectHandle key={item.id} 
+            // 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) => {
                     if (graph.draggingAnchor)
                         graph.updateAnchor(nodeId, clickPos);
                     else
                         graph.endConnect(nodeId, clickPos);
-                }} isConnectEdge={isConnectEdge} onSelectNode={graph.selectNode} isSelectNode={isSelectNode} onSelectEdge={graph.selectEdge} edges={graph.edges}/>);
+                }} isConnectEdge={actionPrivileged.connectingNode} onSelectNode={graph.selectNode} isSelectNode={actionPrivileged.selectNode} onSelectEdge={graph.selectEdge} edges={graph.edges}/>);
         })}
           </svg>
 

package/dist/features/view-only-5/use-connection-graph.js

@@ -49,7 +49,7 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
                 },
             ];
         });
-        setConnecting(null);
+        // setConnecting(null);
     }, [connecting]);
     const cancelConnect = useCallback(() => setConnecting(null), []);
     // ── Drag endpoint ────────────────────────────────────────────────

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

@@ -49,4 +49,10 @@ export declare const buildPath: (points: {
     x: number;
     y: number;
 }[]) => string;
-export declare const renderElements: (elementEditor: ComponentProps[], mappingKey?: string, tableMatchKey?: TableMatchKey[], statusKey?: string) => ComponentProps[];
+export declare const renderElements: (elementEditor: ComponentProps[], mappingKey?: string, tableMatchKey?: TableMatchKey[], connecting?: {
+    fromId: string;
+    fromPos: {
+        x: number;
+        y: number;
+    };
+} | null) => ComponentProps[];

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

@@ -38,13 +38,15 @@ export const buildPath = (points) => {
     if (points.length < 2)
         return "";
     const start = points[0];
+    if (!start)
+        return "";
     const end = points[points.length - 1];
     if (points.length === 2) {
         // Quadratic bezier — 1 control point di tengah, digeser tegak lurus
-        const mx = (start.x + end.x) / 2;
-        const my = (start.y + end.y) / 2;
-        const dx = end.x - start.x;
-        const dy = end.y - start.y;
+        const mx = ((start === null || start === void 0 ? void 0 : start.x) + (end === null || end === void 0 ? void 0 : end.x)) / 2;
+        const my = ((start === null || start === void 0 ? void 0 : start.y) + (end === null || end === void 0 ? void 0 : end.y)) / 2;
+        const dx = end.x - (start === null || start === void 0 ? void 0 : start.x);
+        const dy = end.y - (start === null || start === void 0 ? void 0 : start.y);
         const dist = Math.sqrt(dx * dx + dy * dy);
         const bend = Math.min(dist * 0.35, 80);
         // Control point tegak lurus dari midpoint
@@ -65,15 +67,21 @@ export const buildPath = (points) => {
     return d;
 };
 // ─── renderElements ──────────────────────────────────────────────────────────
-export const renderElements = (elementEditor, mappingKey, tableMatchKey, statusKey) => {
+export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting) => {
     return elementEditor.map((editorItem) => {
+        var _a;
         const isUsingMapping = mappingKey &&
             typeof editorItem[mappingKey] === "object" &&
             editorItem[mappingKey] !== null;
         let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
         if (tableMatchKey) {
-            const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
-            finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className });
+            const tableMatch = tableMatchKey.find((item) => {
+                const hasKey = Object.keys(editorItem).some((key) => key == item.key);
+                if (hasKey)
+                    return item.value == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[item.key]);
+            });
+            const fill = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) == (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id) ? "#7239EA" : (_a = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties.fill) !== null && _a !== void 0 ? _a : finalProps === null || finalProps === void 0 ? void 0 : finalProps.fill;
+            finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { fill: fill, className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className, element: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.element });
         }
         return finalProps;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.6.7",
+  "version": "3.6.9",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",