seat-editor 3.6.19 → 3.6.21

package/dist/app/graph-view-new/page.js

@@ -162,5 +162,5 @@ export default function GraphView() {
                         colorGroupSelection: COLORS_SECTION,
                         dataKey: "uuid_table",
                         selection: selection
-                    } }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
+                    }, allowTooltip: true }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
 }

package/dist/app/graph-view-new/page.jsx

@@ -168,7 +168,7 @@ export default function GraphView() {
             colorGroupSelection: COLORS_SECTION,
             dataKey: "uuid_table",
             selection: selection
-        }}/>
+        }} allowTooltip={true}/>
         <div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
           <div id="table"/>
           <div className="rounded-lg bg-white p-4">

package/dist/components/layer-v5/index.js

@@ -2,7 +2,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isEmpty, omit } from "lodash";
-import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
+import { arcByDirection, distributeWithSpacing, } from "../layer-v3/utils";
 // import { RsvpIcons } from "../../features/board-v3/icons";
 import { getBoundingBoxFromPoints } from "../layer-v3/utils";
 import { LabelItem } from "../layer-v3";
@@ -960,7 +960,6 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
         }
     };
     let date = new Date();
-    const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
-    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && (_jsx("g", { id: "selection-lines", transform: `translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`, children: _jsx("g", { transform: `rotate(${0}, 0,0)`, children: _jsx("rect", { width: selectionLines.width + 10, height: selectionLines.height + 10, fill: "none", stroke: "#4a90e2", strokeWidth: 1, strokeDasharray: "4 2", id: "rect-box-selection" }) }) }, `selection-${Date.now()}`))] }, `${date}`));
+    return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && (_jsx("g", { id: "selection-lines", "data-selection": "selection-lines", transform: `translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`, children: _jsx("g", { transform: `rotate(${0}, 0,0)`, children: _jsx("rect", { width: selectionLines.width + 10, height: selectionLines.height + 10, fill: "transparent", stroke: "#4a90e2", strokeWidth: 1, strokeDasharray: "4 2", id: "rect-box-selection" }) }) }, `selection-${Date.now()}`))] }, `${date}`));
 };
 export default Layers;

package/dist/components/layer-v5/index.jsx

@@ -1,6 +1,6 @@
 "use client";
 import { isEmpty, omit } from "lodash";
-import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
+import { arcByDirection, distributeWithSpacing, } from "../layer-v3/utils";
 // import { RsvpIcons } from "../../features/board-v3/icons";
 import { getBoundingBoxFromPoints } from "../layer-v3/utils";
 import { LabelItem } from "../layer-v3";
@@ -1067,12 +1067,11 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
         }
     };
     let date = new Date();
-    const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
     return (<g key={`${date}`}>
       {components === null || components === void 0 ? void 0 : components.map(renderShape)}
-      {!isEmpty(selectionLines) && (<g key={`selection-${Date.now()}`} id="selection-lines" transform={`translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`}>
+      {!isEmpty(selectionLines) && (<g key={`selection-${Date.now()}`} id="selection-lines" data-selection="selection-lines" transform={`translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`}>
           <g transform={`rotate(${0}, 0,0)`}>
-            <rect width={selectionLines.width + 10} height={selectionLines.height + 10} fill="none" stroke="#4a90e2" strokeWidth={1} strokeDasharray={"4 2"} id="rect-box-selection"/>
+            <rect width={selectionLines.width + 10} height={selectionLines.height + 10} fill="transparent" stroke="#4a90e2" strokeWidth={1} strokeDasharray={"4 2"} id="rect-box-selection"/>
           </g>
         </g>)}
     </g>);

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

@@ -67,6 +67,7 @@ export interface LayerViewProps<TMeta = undefined> {
         style?: CSSProperties;
         minWidth?: number;
         children: React.ReactNode;
+        open: boolean;
     };
     dragTableBlockKey?: {
         key: string;

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

@@ -61,6 +61,9 @@ const LayerView = (props) => {
         }),
     }));
     const dispatch = useAppDispatch();
+    useEffect(() => {
+        setTooltip(Object.assign(Object.assign({}, tooltip), { visible: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open }));
+    }, [tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open]);
     useEffect(() => {
         if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
             dispatch({ type: "panel/setLoading", payload: true });
@@ -121,6 +124,7 @@ const LayerView = (props) => {
     const handleUnSelectComponent = () => {
         setSelectedLines(null);
         dataElementSelectionGroupRef.current = [];
+        onMakeSelection && onMakeSelection([]);
     };
     const handleDoubleClick = (items, e) => {
         const find = componentsEditor.find((item) => {
@@ -262,7 +266,6 @@ const LayerView = (props) => {
     }, [actionPrivileged]);
     const handlePointerDown = (e) => {
         var _a, _b, _c;
-        console.log("handlePointerDown");
         const svg = svgRef.current;
         if (!e.isPrimary || !svg)
             return;
@@ -272,13 +275,16 @@ const LayerView = (props) => {
         const startY = e.clientY;
         const { x, y } = getSvgCoords(e);
         const targetGroup = e.target.closest("g[data-id]");
+        const targetSelectionGroup = e.target.closest("g[data-selection]");
+        console.log({ targetGroup, targetSelectionGroup });
         const { clientX, clientY } = e;
         const hitPoint = document.elementFromPoint(clientX, clientY);
         const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
-        console.log(hitPoint, "hit", targetGroup);
         const makeSelection = (downOutTable || !targetGroup) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
         const hadSelection = dataElementSelectionGroupRef.current.length > 0;
-        const downInOutSelection = hadSelection && makeSelection;
+        const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
+        console.log({ hadSelection, makeSelection, downInOutSelection });
+        const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
         if (downOutTable) {
             if (graph.connecting) {
                 graph.cancelConnect();
@@ -296,11 +302,11 @@ const LayerView = (props) => {
             });
             (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
         }
-        if (downInOutSelection) {
+        if (downInOutSelection || hasSelectionDownOutSelection) {
             handleUnSelectComponent();
         }
         setPanningGroup(true);
-        if (!targetGroup && (props === null || props === void 0 ? void 0 : props.allowTooltip)) {
+        if (makeSelection && (props === null || props === void 0 ? void 0 : props.allowTooltip) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.visible)) {
             setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
             return;
         }
@@ -409,7 +415,7 @@ const LayerView = (props) => {
         pointerMoveGhost(e.nativeEvent);
         const pointerHandleUp = (e) => {
             var _a, _b, _c, _d, _e;
-            if (targetGroup) {
+            if (targetGroup && !hadSelection) {
                 const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
                 isDragging.current = false;
                 const svgSize = svg.getBoundingClientRect();
@@ -444,7 +450,18 @@ const LayerView = (props) => {
                     clickTimerRef.current = null;
                 }, DOUBLE_DELAY);
             }
-            if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if (hadSelection && targetSelectionGroup && e.button === 2) {
+                const svgSize = svg.getBoundingClientRect();
+                const relX = e.clientX - svgSize.left;
+                const relY = e.clientY - svgSize.top;
+                const centerX = svgSize.width / 2;
+                const centerY = svgSize.height / 2;
+                const newX = relX > centerX ? relX - widthTooltip : relX;
+                const newY = relY > centerY ? relY : relY;
+                const rightClick = e.button === 2 && allowTooltip;
+                setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
+            }
+            if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 && e.button === 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;

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

@@ -60,6 +60,9 @@ const LayerView = (props) => {
         }),
     }));
     const dispatch = useAppDispatch();
+    useEffect(() => {
+        setTooltip(Object.assign(Object.assign({}, tooltip), { visible: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open }));
+    }, [tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open]);
     useEffect(() => {
         if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
             dispatch({ type: "panel/setLoading", payload: true });
@@ -120,6 +123,7 @@ const LayerView = (props) => {
     const handleUnSelectComponent = () => {
         setSelectedLines(null);
         dataElementSelectionGroupRef.current = [];
+        onMakeSelection && onMakeSelection([]);
     };
     const handleDoubleClick = (items, e) => {
         const find = componentsEditor.find((item) => {
@@ -261,7 +265,6 @@ const LayerView = (props) => {
     }, [actionPrivileged]);
     const handlePointerDown = (e) => {
         var _a, _b, _c;
-        console.log("handlePointerDown");
         const svg = svgRef.current;
         if (!e.isPrimary || !svg)
             return;
@@ -271,13 +274,16 @@ const LayerView = (props) => {
         const startY = e.clientY;
         const { x, y } = getSvgCoords(e);
         const targetGroup = e.target.closest("g[data-id]");
+        const targetSelectionGroup = e.target.closest("g[data-selection]");
+        console.log({ targetGroup, targetSelectionGroup });
         const { clientX, clientY } = e;
         const hitPoint = document.elementFromPoint(clientX, clientY);
         const downOutTable = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
-        console.log(hitPoint, "hit", targetGroup);
         const makeSelection = (downOutTable || !targetGroup) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.selection);
         const hadSelection = dataElementSelectionGroupRef.current.length > 0;
-        const downInOutSelection = hadSelection && makeSelection;
+        const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
+        console.log({ hadSelection, makeSelection, downInOutSelection });
+        const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
         if (downOutTable) {
             if (graph.connecting) {
                 graph.cancelConnect();
@@ -295,11 +301,11 @@ const LayerView = (props) => {
             });
             (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
         }
-        if (downInOutSelection) {
+        if (downInOutSelection || hasSelectionDownOutSelection) {
             handleUnSelectComponent();
         }
         setPanningGroup(true);
-        if (!targetGroup && (props === null || props === void 0 ? void 0 : props.allowTooltip)) {
+        if (makeSelection && (props === null || props === void 0 ? void 0 : props.allowTooltip) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.visible)) {
             setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
             return;
         }
@@ -408,7 +414,7 @@ const LayerView = (props) => {
         pointerMoveGhost(e.nativeEvent);
         const pointerHandleUp = (e) => {
             var _a, _b, _c, _d, _e;
-            if (targetGroup) {
+            if (targetGroup && !hadSelection) {
                 const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
                 isDragging.current = false;
                 const svgSize = svg.getBoundingClientRect();
@@ -443,7 +449,18 @@ const LayerView = (props) => {
                     clickTimerRef.current = null;
                 }, DOUBLE_DELAY);
             }
-            if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if (hadSelection && targetSelectionGroup && e.button === 2) {
+                const svgSize = svg.getBoundingClientRect();
+                const relX = e.clientX - svgSize.left;
+                const relY = e.clientY - svgSize.top;
+                const centerX = svgSize.width / 2;
+                const centerY = svgSize.height / 2;
+                const newX = relX > centerX ? relX - widthTooltip : relX;
+                const newY = relY > centerY ? relY : relY;
+                const rightClick = e.button === 2 && allowTooltip;
+                setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
+            }
+            if (makeSelection && ((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 && e.button === 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;

package/package.json

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