seat-editor 3.6.6 → 3.6.8

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

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState, useImperativeHandle, useCallback,
 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";
@@ -13,14 +13,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);
@@ -38,6 +46,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);
@@ -109,6 +118,10 @@ const LayerView = (props) => {
         }
         return data;
     };
+    const handleUnSelectComponent = () => {
+        setSelectedLines(null);
+        dataElementSelectionGroupRef.current = [];
+    };
     const handleDoubleClick = (items, e) => {
         const find = componentsEditor.find((item) => {
             var _a;
@@ -204,46 +217,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;
@@ -257,9 +255,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;
@@ -271,7 +273,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,
@@ -284,78 +294,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);
@@ -396,11 +400,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;
@@ -436,11 +440,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;
@@ -563,8 +602,10 @@ 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]);
-    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"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, onMouseMove: (e) => graph.onMouseMove(e), onMouseUp: () => graph.onMouseUp(), onClick: (e) => {
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting), [componentsEditor, mappingKey, tableMatchKey, statusKey, graph.connecting]);
+    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")}
+                            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: {
@@ -572,15 +613,19 @@ const LayerView = (props) => {
                                 display: "block",
                                 touchAction: "none",
                                 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 }) }), _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: isConnectEdge, selectedNodeId: graph.selectedNode, isSelectNode: isSelectNode }), renderedElements.map((item) => {
+                            } }, 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;
                                     const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
-                                    return (_jsx(ConnectHandle, { 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 (_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) => {
                                             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 }, item.id));
+                                        }, isConnectEdge: actionPrivileged.connectingNode, onSelectNode: graph.selectNode, isSelectNode: actionPrivileged.selectNode, onSelectEdge: graph.selectEdge, edges: graph.edges }, 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;