seat-editor 3.6.49 → 3.6.51

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

@@ -44,7 +44,7 @@ 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, showConnection, renderedElements, groupSelection, connectionMatchKey, isSelectNode }) => {
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAnchor, mousePos, isConnectEdge, getNodeById, onSelectEdge, onDeleteEdge, onStartDragWaypoint, onInsertWaypoint, onRemoveWaypoint, onStartDragAnchor, selectedNodeId, showConnection, renderedElements, groupSelection, connectionMatchKey, isSelectNode, }) => {
     const [hoveredEdge, setHoveredEdge] = useState(null);
     const tableMatchConnectionKey = useMemo(() => renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.filter((el) => {
         if (connectionMatchKey) {
@@ -52,14 +52,12 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         }
         return true;
     }), [renderedElements, connectionMatchKey]);
-    const nodeHighlightMap = useMemo(() => {
-        if (!selectedEdge)
-            return new Map();
-        const sel = edges.find((e) => e.id === selectedEdge);
-        if (!sel)
-            return new Map();
-        return floodFill([sel.from, sel.to], edges);
-    }, [selectedEdge, edges]);
+    // const nodeHighlightMap = useMemo<Map<string, number>>(() => {
+    //   if (!selectedEdge) return new Map();
+    //   const sel = edges.find((e) => e.id === selectedEdge);
+    //   if (!sel) return new Map();
+    //   return floodFill([sel.from, sel.to], edges);
+    // }, [selectedEdge, edges]);
     const nodeHighlightMapByNode = useMemo(() => {
         if (selectedNodeId || connecting) {
             return floodFill([selectedNodeId], edges);
@@ -133,25 +131,51 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
         })}
 
       {/* Node highlight flood fill */}
-      {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
-            var _a, _b, _c;
-            const node = getNodeById(nodeId);
-            if (!node)
-                return null;
-            const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
-            const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
-            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}/>
-            <g transform={`translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`}>
-              {/* <circle r={7} fill={color} opacity={0.9} />
+      {/* {Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
+          const node = getNodeById(nodeId);
+          if (!node) return null;
+          const w = node.width ?? NODE_WIDTH;
+          const h = node.height ?? NODE_HEIGHT;
+          const rotation = node.rotation ?? 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}
+              />
+              <g
+                transform={`translate(${w / 2 + padding - 2}, ${
+                  -h / 2 - padding
+                })`}
+              >
+                {/* <circle r={7} fill={color} opacity={0.9} />
                 <text
                   textAnchor="middle"
                   dominantBaseline="middle"
@@ -163,9 +187,10 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                 >
                   {level}
                 </text> */}
+      {/* </g>
             </g>
-          </g>);
-        })}
+          );
+        })} */}
 
       {Array.from(nodeHighlightMapByNode.entries()).map(([nodeId, level]) => {
             var _a, _b, _c;
@@ -210,7 +235,11 @@ 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) => { var _a, _b; 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) === edge.to || ((_b = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : el.id) === edge.from; });
+            const connectionMatch = tableMatchConnectionKey === null || tableMatchConnectionKey === void 0 ? void 0 : tableMatchConnectionKey.some((el) => {
+                var _a, _b;
+                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) === edge.to ||
+                    ((_b = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : el.id) === edge.from;
+            });
             // const fromLevel = nodeHighlightMap.get(edge.from);
             // const toLevel = nodeHighlightMap.get(edge.to);
             const isStillConnectingProcess = (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.from || (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) === edge.to;
@@ -281,15 +310,18 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
             {/* )} */}
 
             {/* Waypoints */}
-            {((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (<g key={`wp-${i}`}>
-                <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)}/>
-                <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" }}/>
-                <circle cx={wp.x} cy={wp.y} r={isSel ? 3 : 2} fill={isSel ? "#a78bfa" : "#38bdf8"} style={{ pointerEvents: "none" }}/>
-              </g>))}
+            {!isSelectNode &&
+                    isConnectEdge &&
+                    ((_a = edge.waypoints) !== null && _a !== void 0 ? _a : []).map((wp, i) => (<g key={`wp-${i}`}>
+                  <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)}/>
+                  <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" }}/>
+                  <circle cx={wp.x} cy={wp.y} r={isSel ? 3 : 2} fill={isSel ? "#a78bfa" : "#38bdf8"} style={{ pointerEvents: "none" }}/>
+                </g>))}
 
             {/* Midpoint insert handles */}
             {isSel &&
-                    (isConnectEdge && !isSelectNode) &&
+                    isConnectEdge &&
+                    !isSelectNode &&
                     allPoints.slice(0, -1).map((pt, i) => {
                         var _a;
                         const next = allPoints[i + 1];
@@ -307,15 +339,39 @@ export const ConnectionLayer = ({ edges, selectedEdge, connecting, draggingAncho
                     })}
 
             {/* DEL badge */}
-            {isSel && (isConnectEdge && !isSelectNode) && (<g onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteEdge(edge.id);
-                    }} style={{ cursor: "pointer" }}>
-                <rect x={midX - 16} y={midY - 10} width={32} height={18} rx={4} fill="#1e1b2e" stroke="#a78bfa" strokeWidth={1} opacity={0.95}/>
-                <text x={midX} y={midY} textAnchor="middle" dominantBaseline="middle" fill="#a78bfa" fontSize={9} fontFamily="monospace" fontWeight={600}>
-                  DEL
-                </text>
-              </g>)}
+            {/* {isSel && (isConnectEdge && !isSelectNode) && (
+                  <g
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteEdge(edge.id);
+                    }}
+                    style={{ cursor: "pointer" }}
+                  >
+                    <rect
+                      x={midX - 16}
+                      y={midY - 10}
+                      width={32}
+                      height={18}
+                      rx={4}
+                      fill="#1e1b2e"
+                      stroke="#a78bfa"
+                      strokeWidth={1}
+                      opacity={0.95}
+                    />
+                    <text
+                      x={midX}
+                      y={midY}
+                      textAnchor="middle"
+                      dominantBaseline="middle"
+                      fill="#a78bfa"
+                      fontSize={9}
+                      fontFamily="monospace"
+                      fontWeight={600}
+                    >
+                      DEL
+                    </text>
+                  </g>
+                )} */}
           </g>);
         })}
 

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

@@ -127,5 +127,5 @@ export interface LayerViewProps<TMeta = undefined> {
         selectionGroup?: boolean;
     };
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

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

@@ -269,7 +269,8 @@ const LayerView = (props) => {
     }, [actionPrivileged]);
     const timerRef = useRef(null);
     const handlePointerDown = (e) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
+        const shiftActive = e.shiftKey;
         const svg = svgRef.current;
         if (!e.isPrimary || !svg)
             return;
@@ -288,11 +289,31 @@ const LayerView = (props) => {
         const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
         const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
         const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
+        const targetSelection = e.target.closest("g[id='selection-lines']");
         if (downOutTable || (!targetGroup && !targetSelectionGroup)) {
             if (graph.connecting) {
                 graph.cancelConnect();
             }
         }
+        let idTargetElement = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
+        const selectionTarget = (_b = (_a = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.replace("selection-", "");
+        const activeId = selectionTarget !== null && selectionTarget !== void 0 ? selectionTarget : idTargetElement;
+        if (targetGroup && shiftActive) {
+            const findById = renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.find((comp) => comp.id == activeId);
+            const currentSelection = (_c = dataElementSelectionGroupRef.current) !== null && _c !== void 0 ? _c : [];
+            if (currentSelection.length == 0 && findById) {
+                currentSelection.push(findById);
+            }
+            const alreadySelected = currentSelection.some((comp) => comp.id == activeId);
+            let newSelection;
+            if (alreadySelected) {
+                newSelection = currentSelection.filter((comp) => comp.id != activeId);
+            }
+            else {
+                newSelection = [...currentSelection, findById];
+            }
+            dataElementSelectionGroupRef.current = newSelection;
+        }
         if (makeSelection) {
             const boxSelection = createTableGhost({
                 x,
@@ -303,9 +324,9 @@ const LayerView = (props) => {
                 shape: "selection-box",
                 id: "selection-box-ghost",
             });
-            (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
+            (_d = svgRef.current) === null || _d === void 0 ? void 0 : _d.appendChild(boxSelection);
         }
-        if (downInOutSelection || hasSelectionDownOutSelection || unSelectAll) {
+        if ((downInOutSelection || hasSelectionDownOutSelection || unSelectAll) && !shiftActive) {
             handleUnSelectComponent();
         }
         if (unSelectAll) {
@@ -341,7 +362,7 @@ const LayerView = (props) => {
         const ghostId = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : 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((_) => {
+            : !((_e = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _e === void 0 ? void 0 : _e.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);
@@ -349,7 +370,7 @@ const LayerView = (props) => {
             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));
+            (_f = e.dataTransfer) === null || _f === void 0 ? void 0 : _f.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) &&
@@ -442,7 +463,43 @@ const LayerView = (props) => {
         };
         pointerMoveGhost(e.nativeEvent);
         const pointerHandleUp = (e) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
+            if (shiftActive) {
+                const allElementSelectionGroup = dataElementSelectionGroupRef.current;
+                // HITUNG BOUNDING BOX
+                let xs = [];
+                let ys = [];
+                let x2 = [];
+                let y2 = [];
+                allElementSelectionGroup.forEach((element) => {
+                    const activeId = element.id;
+                    const { g } = getAttributeElement(svg, String(activeId));
+                    const { x, y, 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,
+                };
+                setSelectedLines(selectionBox);
+                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));
+                });
+                onMakeSelection && onMakeSelection(filterTableInSelection);
+            }
             if (targetGroup && !hadSelection) {
                 const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
                 isDragging.current = false;
@@ -490,10 +547,10 @@ const LayerView = (props) => {
                 setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
             }
             if (makeSelection &&
-                ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                ((_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
                 e.button === 0 &&
                 !targetSelectionGroup) {
-                const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
+                const allTableInSelection = (_c = dataElementSelectionGroupRef.current) === null || _c === void 0 ? void 0 : _c.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) &&
@@ -531,13 +588,13 @@ const LayerView = (props) => {
                 if (!hasInvalidNumber(selectionBox)) {
                     setSelectedLines(selectionBox);
                 }
-                (_c = svg.querySelector("#selection-box-ghost")) === null || _c === void 0 ? void 0 : _c.remove();
+                (_d = svg.querySelector("#selection-box-ghost")) === null || _d === void 0 ? void 0 : _d.remove();
             }
             if (makeSelection &&
-                ((_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.length) === 0 &&
+                ((_e = dataElementSelectionGroupRef.current) === null || _e === void 0 ? void 0 : _e.length) === 0 &&
                 e.button === 0 &&
                 targetSelectionGroup) {
-                (_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
+                (_f = svg.querySelector("#selection-box-ghost")) === null || _f === void 0 ? void 0 : _f.remove();
                 setSelectedLines(null);
             }
             setPanningGroup(false);
@@ -619,15 +676,10 @@ const LayerView = (props) => {
     // ─── Node helper ──────────────────────────────────────────────────────────
     const getNodeById = useCallback((id) => {
         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 ((_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;
-        });
+        const comp = renderedElements.find((c) => { var _a; return ((_a = c[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : c.id) === id; });
         if (!comp)
             return null;
-        const v = mappingKey ? comp[mappingKey] : comp;
+        const v = comp;
         const w = (_a = v.width) !== null && _a !== void 0 ? _a : 100;
         const h = (_b = v.height) !== null && _b !== void 0 ? _b : 50;
         const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
@@ -665,7 +717,43 @@ 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, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup), [
+    const stillHoldShift = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        if (stillHoldShift.current && dataElementSelectionGroupRef.current) {
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "none");
+        }
+        if (!stillHoldShift.current && dataElementSelectionGroupRef.current) {
+            const selectionLines = (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#selection-lines");
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "all");
+        }
+    }, [stillHoldShift.current, dataElementSelectionGroupRef.current]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            var _a, _b;
+            // setPressedKey(e.key);
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#selection-lines");
+            if (e.key === "Shift") {
+                stillHoldShift.current = true;
+                selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "none");
+            }
+        };
+        const handleKeyUp = () => {
+            var _a;
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            stillHoldShift.current = false;
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "all");
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [dataElementSelectionGroupRef.current]);
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey, displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.selectionGroup, graph.selectedNode), [
         componentsEditor,
         mappingKey,
         tableMatchKey,
@@ -676,6 +764,7 @@ const LayerView = (props) => {
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
         graph.edges,
         connectionMatchKey,
+        graph.selectedNode
     ]);
     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")}