seat-editor 3.6.26 → 3.6.28

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

@@ -28,7 +28,7 @@ const LayerView = (props) => {
         selectNode: false,
         connectingNode: false,
         dragTransferTable: false,
-    }, onMakeSelection, groupSelection, onHoldTable } = props;
+    }, onMakeSelection, groupSelection, onHoldTable, showConnection, connectionMatchKey } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -287,7 +287,7 @@ const LayerView = (props) => {
         const downInOutSelection = hadSelection && makeSelection && e.button !== 2;
         const unSelectAll = hadSelection && e.button === 2 && targetGroup && !targetSelectionGroup;
         const hasSelectionDownOutSelection = !targetSelectionGroup && targetGroup && hadSelection;
-        if (downOutTable) {
+        if (downOutTable || (!targetGroup && !targetSelectionGroup)) {
             if (graph.connecting) {
                 graph.cancelConnect();
             }
@@ -617,11 +617,12 @@ const LayerView = (props) => {
     };
     // ─── Node helper ──────────────────────────────────────────────────────────
     const getNodeById = useCallback((id) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const comp = componentsEditor.find((item) => {
+            var _a, _b, _c;
             if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
-                return item[mappingKey].id == id;
-            return (item === null || item === void 0 ? void 0 : item.id) == id;
+                return (_b = (_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : item[mappingKey].id == id;
+            return (_c = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _c !== void 0 ? _c : item.id == id;
         });
         if (!comp)
             return null;
@@ -631,7 +632,7 @@ const LayerView = (props) => {
         const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
         const rotated = rotatePoint(w / 2, h / 2, rotation);
         return {
-            id: String(v.id),
+            id: (_d = v === null || v === void 0 ? void 0 : v[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _d !== void 0 ? _d : String(v.id),
             x: v.x + rotated.x,
             y: v.y + rotated.y,
             width: w,
@@ -648,6 +649,7 @@ const LayerView = (props) => {
         mappingKey,
         tableMatchKey,
         statusKey,
+        initialEdges: props === null || props === void 0 ? void 0 : props.initialEdges,
     });
     // ─── Render ───────────────────────────────────────────────────────────────
     const hasBoundingBox = hasBoundingBoxRef.current;
@@ -660,7 +662,7 @@ const LayerView = (props) => {
     const viewBox = isValidBoundingBox
         ? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
         : "0 0 1000 1000";
-    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection, graph.edges, connectionMatchKey), [
         componentsEditor,
         mappingKey,
         tableMatchKey,
@@ -669,6 +671,8 @@ const LayerView = (props) => {
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
         groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
+        graph.edges,
+        connectionMatchKey
     ]);
     return (<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">
@@ -702,19 +706,19 @@ const LayerView = (props) => {
     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={actionPrivileged.connectingNode} selectedNodeId={graph.selectedNode}/>
+            <ConnectionLayer edges={graph.edges} selectedEdge={graph.selectedEdge} connecting={graph.connecting} draggingAnchor={graph.draggingAnchor} mousePos={graph.mousePos} getNodeById={getNodeById} onSelectEdge={graph.selectEdge} onDeleteEdge={graph.deleteEdge} onStartDragWaypoint={graph.startDragWaypoint} onInsertWaypoint={graph.insertWaypoint} onRemoveWaypoint={graph.removeWaypoint} onStartDragAnchor={graph.startDragAnchor} isConnectEdge={actionPrivileged.connectingNode} selectedNodeId={graph.selectedNode} showConnection={showConnection} renderedElements={renderedElements} groupSelection={groupSelection} connectionMatchKey={connectionMatchKey}/>
 
             {renderedElements.map((item) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
             return (<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) => {
+            connecting={graph.connecting} cx={item.x + rotated.x} cy={item.y + rotated.y} width={(_b = item.width) !== null && _b !== void 0 ? _b : 100} height={(_c = item.height) !== null && _c !== void 0 ? _c : 50} rotation={(_d = item.rotation) !== null && _d !== void 0 ? _d : 0} nodeId={(_e = item === null || item === void 0 ? void 0 : item[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _e !== void 0 ? _e : String(item.id)} isConnecting={!!graph.connecting} isDraggingAnchor={!!graph.draggingAnchor} onStartConnect={(nodeId, clickPos) => graph.startConnect(nodeId, clickPos)} onEndConnect={(nodeId, clickPos) => {
                     if (graph.draggingAnchor)
                         graph.updateAnchor(nodeId, clickPos);
                     else
                         graph.endConnect(nodeId, clickPos);
-                }} isConnectEdge={actionPrivileged.connectingNode} onSelectNode={graph.selectNode} isSelectNode={actionPrivileged.selectNode} onSelectEdge={graph.selectEdge} edges={graph.edges}/>);
+                }} isConnectEdge={actionPrivileged.connectingNode} onSelectNode={graph.selectNode} isSelectNode={actionPrivileged.selectNode} onSelectEdge={graph.selectEdge} edges={graph.edges} showConnection={showConnection}/>);
         })}
           </svg>
 

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

@@ -11,8 +11,10 @@ export type UseConnectionGraphOptions = {
     mappingKey?: string;
     tableMatchKey?: TableMatchKey[];
     statusKey?: string;
+    showConnection?: boolean;
+    initialEdges?: EdgeType[];
 };
-export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }: UseConnectionGraphOptions) => {
+export declare const useConnectionGraph: ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, }: UseConnectionGraphOptions) => {
     edges: EdgeType[];
     setEdges: React.Dispatch<React.SetStateAction<EdgeType[]>>;
     selectedEdge: string;
@@ -22,6 +24,7 @@ export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange,
         fromPos: {
             x: number;
             y: number;
+            name: string;
         };
     };
     draggingAnchor: DraggingAnchor;
@@ -32,16 +35,19 @@ export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange,
     startConnect: (fromId: string, fromPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     endConnect: (toId: string, toPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     cancelConnect: () => void;
     startDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
     updateAnchor: (targetNodeId: string, newPos: {
         x: number;
         y: number;
+        name: string;
     }) => void;
     cancelDragAnchor: () => void;
     startDragWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;

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

@@ -1,8 +1,8 @@
 // use-connection-graph.ts
 import { useCallback, useEffect, useRef, useState } from "react";
-import { snap } from "./utils";
+import { rotatePoint, snap } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
-export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }) => {
+export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey, initialEdges, }) => {
     const components = useAppSelector((state) => state.board.components);
     const [edges, setEdges] = useState([]);
     const [selectedEdge, setSelectedEdge] = useState(null);
@@ -124,7 +124,7 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
             return Object.assign(Object.assign({}, ed), { waypoints: ed.waypoints.filter((_, i) => i !== index) });
         }));
     }, []);
-    // __ Select Table 
+    // __ Select Table
     const selectNode = useCallback((nodeId) => setSelectedNode(nodeId), []);
     // ── Select / delete ──────────────────────────────────────────────
     const selectEdge = useCallback((id) => setSelectedEdge(id), []);
@@ -168,6 +168,93 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
         });
         onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges, result);
     }, [edges]);
+    // initialize edges
+    useEffect(() => {
+        var _a;
+        if (initialEdges) {
+            //process initial edges
+            const allElements = components === null || components === void 0 ? void 0 : components.map((table) => {
+                if (mappingKey && (table === null || table === void 0 ? void 0 : table[mappingKey])) {
+                    return Object.assign({}, table);
+                }
+                return Object.assign({}, table);
+            });
+            // const findSourceTarget = allElements?.find(
+            //   (el) => el.id === connecting.fromId
+            // );
+            const transformAllEdges = (_a = initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.filter((edge) => (edge === null || edge === void 0 ? void 0 : edge.status) === 1)) === null || _a === void 0 ? void 0 : _a.map((edge) => {
+                const fromElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => el.id === edge.from);
+                if (!fromElement)
+                    return null;
+                const { x: fromX, y: fromY, rotation: fromRotation, width: fromWidth, height: fromHeight, } = fromElement;
+                const fromRotated = rotatePoint(fromWidth / 2, fromHeight / 2, fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0);
+                const fromCx = fromX + fromRotated.x;
+                const fromCy = fromY + fromRotated.y;
+                let fromLx = 0;
+                let fromLy = 0;
+                const fromHw = fromWidth / 2;
+                const fromHh = fromHeight / 2;
+                if (edge.fromPos.name === "top") {
+                    fromLx = 0;
+                    fromLy = -fromHh;
+                }
+                else if (connecting.fromPos.name === "right") {
+                    fromLx = fromHw;
+                    fromLy = 0;
+                }
+                else if (connecting.fromPos.name === "bottom") {
+                    fromLx = 0;
+                    fromLy = fromHh;
+                }
+                else if (connecting.fromPos.name === "left") {
+                    fromLx = -fromHw;
+                    fromLy = 0;
+                }
+                const rad = (fromRotation * Math.PI) / 180;
+                const fromPos = {
+                    x: fromCx + fromLx * Math.cos(rad) - fromLy * Math.sin(rad),
+                    y: fromCy + fromLx * Math.sin(rad) + fromLy * Math.cos(rad),
+                    name: edge.fromPos.name,
+                };
+                const toElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => el.id === edge.to);
+                if (!toElement)
+                    return null;
+                const { x: toX, y: toY, rotation: toRotation, width: toWidth, height: toHeight, } = toElement;
+                const toRotated = rotatePoint(toWidth / 2, toHeight / 2, toRotation !== null && toRotation !== void 0 ? toRotation : 0);
+                const toCx = toX + toRotated.x;
+                const toCy = toY + toRotated.y;
+                let toLx = 0;
+                let toLy = 0;
+                const toHw = toWidth / 2;
+                const toHh = toHeight / 2;
+                if (edge.toPos.name === "top") {
+                    toLx = 0;
+                    toLy = -toHh;
+                }
+                else if (edge.toPos.name === "right") {
+                    toLx = toHw;
+                    toLy = 0;
+                }
+                else if (edge.toPos.name === "bottom") {
+                    toLx = 0;
+                    toLy = toHh;
+                }
+                else if (edge.toPos.name === "left") {
+                    toLx = -toHw;
+                    toLy = 0;
+                }
+                const rad2 = (toRotation * Math.PI) / 180;
+                const toPos = {
+                    x: toCx + toLx * Math.cos(rad2) - toLy * Math.sin(rad2),
+                    y: toCy + toLx * Math.sin(rad2) + toLy * Math.cos(rad2),
+                    name: edge.toPos.name,
+                };
+                return Object.assign(Object.assign({}, edge), { from: fromElement.id, to: toElement.id, fromPos,
+                    toPos });
+            });
+            setEdges(transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null));
+        }
+    }, [initialEdges]);
     return {
         edges,
         setEdges,
@@ -191,6 +278,6 @@ export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, keyNode
         clearSelection,
         onMouseMove,
         onMouseUp,
-        selectNode
+        selectNode,
     };
 };

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

@@ -10,15 +10,18 @@ export type EdgeType = {
     fromPos?: {
         x: number;
         y: number;
+        name: string;
     };
     toPos?: {
         x: number;
         y: number;
+        name: string;
     };
     waypoints: {
         x: number;
         y: number;
     }[];
+    status?: number;
 };
 export type NodeType = {
     id: string;
@@ -59,4 +62,7 @@ export declare const renderElements: (elementEditor: ComponentProps[], mappingKe
     colorGroupSelection: string[];
     dataKey: string;
     selection: Record<number, string[]>;
+}, edges?: EdgeType[], connectionMatchKey?: {
+    key: string;
+    value: string | number;
 }) => ComponentProps[];

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

@@ -71,7 +71,11 @@ const findIndexByValue = (obj, targetValue) => {
     const foundEntry = Object.entries(obj).find(([_, values]) => values.includes(targetValue));
     return foundEntry ? Number(foundEntry[0]) : undefined;
 };
-export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection) => {
+export const renderElements = (elementEditor, mappingKey, tableMatchKey, connecting, groupSelection, edges, connectionMatchKey) => {
+    var _a;
+    const allIDFromIdConnection = ((_a = edges === null || edges === void 0 ? void 0 : edges.filter((edge) => edge.from === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) || edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId)
+    //bikin ed.to di merge dengan ed.from
+    )) === null || _a === void 0 ? void 0 : _a.map((edge) => edge.to === (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) ? edge.from : edge.to)) || [];
     return elementEditor.map((editorItem) => {
         var _a, _b;
         const isUsingMapping = mappingKey &&
@@ -84,9 +88,10 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
                 if (hasKey)
                     return item.value == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[item.key]);
             });
-            // console.log({ finalProps })
             const findIndexSelection = findIndexByValue(groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection, finalProps === null || finalProps === void 0 ? void 0 : finalProps[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]);
             let fill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.fill;
+            let stroke = finalProps === null || finalProps === void 0 ? void 0 : finalProps.stroke;
+            let seatFill = finalProps === null || finalProps === void 0 ? void 0 : finalProps.seatFill;
             if (findIndexSelection !== undefined) {
                 fill = groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection[findIndexSelection];
             }
@@ -94,13 +99,20 @@ export const renderElements = (elementEditor, mappingKey, tableMatchKey, connect
                 fill = (_b = tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties) === null || _b === void 0 ? void 0 : _b.fill;
             }
             if ((connecting === null || connecting === void 0 ? void 0 : connecting.fromId) == (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) {
-                fill = "#7239EA";
+                fill = "#F8F5FF";
+                stroke = "#5014D0";
+            }
+            if ((allIDFromIdConnection === null || allIDFromIdConnection === void 0 ? void 0 : allIDFromIdConnection.includes(finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) && (connecting === null || connecting === void 0 ? void 0 : connecting.fromId) !== (finalProps === null || finalProps === void 0 ? void 0 : finalProps.id)) {
+                fill = "#EEF6FF";
+                stroke = "#3E97FF";
+                seatFill = "#3E97FF";
+            }
+            finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { fill: fill, stroke, className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className, element: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.element });
+        }
+        if (connectionMatchKey) {
+            if (!(finalProps === null || finalProps === void 0 ? void 0 : finalProps[connectionMatchKey.key])) {
+                finalProps = Object.assign(Object.assign({}, finalProps), { [connectionMatchKey.key]: editorItem === null || editorItem === void 0 ? void 0 : editorItem[connectionMatchKey.key] });
             }
-            // fill =
-            //   connecting?.fromId == finalProps?.id
-            //     ? "#7239EA"
-            //     : tableMatch?.properties?.fill ?? 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,9 +1,12 @@
 {
   "name": "seat-editor",
-  "version": "3.6.26",
+  "version": "3.6.28",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "files": [
     "dist"
   ],