seat-editor 3.5.33 → 3.5.45

package/dist/app/only-view/page.js

@@ -174,7 +174,9 @@ const TouchScrollDetect = () => {
                                         key: "rsvp_time",
                                         items: ["text", "icon"],
                                     },
-                                ], defaultBackground: "#000000", mappingKey: "properties", componentProps: [], onDoubleClick: (data) => console.log(data), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
+                                ], 
+                                // defaultBackground="#000000"
+                                mappingKey: "properties", componentProps: [], onDoubleClick: (data) => console.log(data), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
                                     handleSelectTable(component);
                                 }, dragTableBlockKey: [
                                     {
@@ -203,10 +205,18 @@ const TouchScrollDetect = () => {
                                         event: "dragenter",
                                         properties: { strokeWidth: 5 },
                                     },
+                                    // {
+                                    //   event: "selected",
+                                    //   properties: { strokeWidth: 5 },
+                                    // },
                                     {
-                                        event: "selected",
-                                        properties: { strokeWidth: 5 },
+                                        event: "hoverdragontable",
+                                        properties: {
+                                            strokeWidth: 5,
+                                            filter: "drop-shadow(0px 0px 5px red)",
+                                        },
                                     },
+                                    // hoverdragontable
                                 ], iconTags: [
                                     {
                                         icon: _jsx(ChairIcon, {}),

package/dist/app/only-view/page.jsx

@@ -198,7 +198,9 @@ const TouchScrollDetect = () => {
                 key: "rsvp_time",
                 items: ["text", "icon"],
             },
-        ]} defaultBackground="#000000" mappingKey="properties" componentProps={[]} onDoubleClick={(data) => console.log(data)} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
+        ]} 
+    // defaultBackground="#000000"
+    mappingKey="properties" componentProps={[]} onDoubleClick={(data) => console.log(data)} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
             handleSelectTable(component);
         }} dragTableBlockKey={[
             {
@@ -227,10 +229,18 @@ const TouchScrollDetect = () => {
                 event: "dragenter",
                 properties: { strokeWidth: 5 },
             },
+            // {
+            //   event: "selected",
+            //   properties: { strokeWidth: 5 },
+            // },
             {
-                event: "selected",
-                properties: { strokeWidth: 5 },
+                event: "hoverdragontable",
+                properties: {
+                    strokeWidth: 5,
+                    filter: "drop-shadow(0px 0px 5px red)",
+                },
             },
+            // hoverdragontable
         ]} iconTags={[
             {
                 icon: <ChairIcon />,

package/dist/components/form-tools/shape.js

@@ -55,7 +55,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
     return (_jsxs("div", { className: "py-2", children: [_jsxs("h1", { className: "heading-s", children: ["Shape ", (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.find((item) => item.value === shape)) === null || _a === void 0 ? void 0 : _a.label] }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
-                            const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                            const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
                             return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
                                                 ? `Circle Type 2 (only for 4 ${seatKey})`
                                                 : item.label })] }) }, item.value));

package/dist/components/form-tools/shape.jsx

@@ -59,7 +59,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
           <Form.Item label="Name" name="shape" className="w-full">
             <Select className="w-full">
               {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
-                const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
                 return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
                     <Flex gap={5} align="center" justify="between">
                       {item.icon}

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

@@ -30,6 +30,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             commonProps.stroke = "#ffa39e";
             commonProps.strokeWidth = 4;
         }
+        if (["image-table", "background"].includes(shape) && !src) {
+            commonProps.stroke = "#ffa39e";
+            commonProps.strokeWidth = 4;
+        }
         switch (shape) {
             case "square":
                 return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {

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

@@ -28,6 +28,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             commonProps.stroke = "#ffa39e";
             commonProps.strokeWidth = 4;
         }
+        if (["image-table", "background"].includes(shape) && !src) {
+            commonProps.stroke = "#ffa39e";
+            commonProps.strokeWidth = 4;
+        }
         switch (shape) {
             case "square":
                 return (<g key={id} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`}>

package/dist/dto/event-handler.d.ts

@@ -1 +1 @@
-export type EventHandleType = "dragover" | "dragleave" | "drop" | "dragend" | "mousemove" | "mouseleave" | "mouseenter" | "dragleave" | "dragenter" | "pointerover" | "mousedown" | "pointerup" | "pointerdown" | "pointermove" | "pointerup" | "touchstart" | "touchmove" | "touchend" | "selected";
+export type EventHandleType = "dragover" | "dragleave" | "drop" | "dragend" | "mousemove" | "mouseleave" | "mouseenter" | "dragleave" | "dragenter" | "pointerover" | "mousedown" | "pointerup" | "pointerdown" | "pointermove" | "pointerup" | "touchstart" | "touchmove" | "touchend" | "selected" | "hoverdragontable";

package/dist/features/board-v3/index.js

@@ -668,6 +668,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 type: "panel/setSelectedGroup",
                 payload: null,
             });
+            dispatch({ type: "panel/setSelectionLines", payload: null });
             polygonElementRef.current = null;
         }
         // const selectionLines = svgRef.current?.querySelector(
@@ -1526,6 +1527,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         type: "panel/setSelectedComponent",
                         payload: null,
                     });
+                    dispatch({ type: "panel/setSelectionLines", payload: null });
                 }
                 else {
                     dataElementSelectionGroupRef.current = [];
@@ -1654,6 +1656,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             if (isInitialCreateText) {
                 const ghost = svg.querySelector("#ghost-element-create");
                 const getBBox = getGlobalBBox(svg, ghost);
+                const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
                 const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
                 addComponents(text);
                 dispatch({
@@ -1669,6 +1672,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     type: "tool/setActiveTool",
                     payload: "select",
                 });
+                console.log({ selectionLines });
+                dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
+                setSelectedLines(selectionLines);
                 (_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
                 isCreateElementRef.current = false;
             }

package/dist/features/board-v3/index.jsx

@@ -667,6 +667,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 type: "panel/setSelectedGroup",
                 payload: null,
             });
+            dispatch({ type: "panel/setSelectionLines", payload: null });
             polygonElementRef.current = null;
         }
         // const selectionLines = svgRef.current?.querySelector(
@@ -1525,6 +1526,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         type: "panel/setSelectedComponent",
                         payload: null,
                     });
+                    dispatch({ type: "panel/setSelectionLines", payload: null });
                 }
                 else {
                     dataElementSelectionGroupRef.current = [];
@@ -1653,6 +1655,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             if (isInitialCreateText) {
                 const ghost = svg.querySelector("#ghost-element-create");
                 const getBBox = getGlobalBBox(svg, ghost);
+                const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
                 const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
                 addComponents(text);
                 dispatch({
@@ -1668,6 +1671,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     type: "tool/setActiveTool",
                     payload: "select",
                 });
+                console.log({ selectionLines });
+                dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
+                setSelectedLines(selectionLines);
                 (_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
                 isCreateElementRef.current = false;
             }

package/dist/features/panel/panel-slice.js

@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
+import { isEmpty } from "lodash";
 const initialState = {
     selectedComponent: null,
     history: [],
@@ -41,7 +42,12 @@ export const panelSlice = createSlice({
             state.selectedGroup = action.payload;
         },
         setSelectionLines: (state, action) => {
-            state.selectionLines = action.payload;
+            if (isEmpty(state.selectedComponent)) {
+                state.selectionLines = {};
+            }
+            else {
+                state.selectionLines = action.payload;
+            }
         }
     },
 });

package/dist/features/panel/polygon.js

@@ -14,6 +14,7 @@ const PolygonTool = () => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "panel/setSelectedGroup", payload: null });
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });

package/dist/features/panel/polygon.jsx

@@ -13,6 +13,7 @@ const PolygonTool = () => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "panel/setSelectedGroup", payload: null });
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });

package/dist/features/panel/text-tool.js

@@ -14,6 +14,7 @@ const TextTool = () => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "panel/setSelectedGroup", payload: null });
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });

package/dist/features/panel/text-tool.jsx

@@ -13,6 +13,7 @@ const TextTool = () => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "panel/setSelectedGroup", payload: null });
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });

package/dist/features/panel/upload-tool.js

@@ -174,6 +174,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "panel/setSelectedGroup", payload: null });
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -190,7 +191,7 @@ const UploadToolForm = (props) => {
     const isExtraComponent = extraComponents.some((item) => item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
     const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
     return (_jsxs("div", { className: "py-2", children: [_jsxs("h1", { className: "heading-s", children: ["Shape ", (_b = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.find((item) => item.value === shape)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Image"] }), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && !isExtraComponent && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
-                            const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                            const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
                             return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
                                                 ? `Circle Type 2 (only for 4 ${seatKey})`
                                                 : item.label })] }) }, item.value));

package/dist/features/panel/upload-tool.jsx

@@ -173,6 +173,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "panel/setSelectedGroup", payload: null });
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });
@@ -223,7 +224,7 @@ const UploadToolForm = (props) => {
           <Form.Item label="Name" name="shape" className="w-full">
             <Select className="w-full">
               {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
-                const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
                 return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
                     <Flex gap={5} align="center" justify="between">
                       {item.icon}

package/dist/features/side-tool/index.js

@@ -121,6 +121,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             type: "panel/setSelectedComponent",
             payload: null,
         });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const toggleGrid = () => {

package/dist/features/side-tool/index.jsx

@@ -120,6 +120,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             type: "panel/setSelectedComponent",
             payload: null,
         });
+        dispatch({ type: "panel/setSelectionLines", payload: null });
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const toggleGrid = () => {

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

@@ -317,6 +317,8 @@ const LayerView = (props) => {
             console.error("Invalid data-id JSON:", err);
         }
     };
+    const dataBeforeHoverRef = useRef([]);
+    let dataBeforeHoveredUnderGhost = [];
     const getSvgCoords = (e) => {
         var _a;
         const svg = svgRef.current;
@@ -406,6 +408,39 @@ const LayerView = (props) => {
                 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") || "{}");
+                const findEvent = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((item) => item.event === "hoverdragontable");
+                if (dataHoveredGhostId === hoverUnderghostId.current && findEvent) {
+                    const allKeyEvent = Object.keys(findEvent.properties);
+                    dataBeforeHoveredUnderGhost = allKeyEvent.map((key) => {
+                        return {
+                            key,
+                            value: hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute(key)
+                        };
+                    });
+                    Object.entries(findEvent.properties).forEach(([key, value]) => {
+                        var _a, _b, _c;
+                        (_c = (_b = (_a = hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute(key, value);
+                    });
+                }
+                if (dataHoveredGhostId !== hoverUnderghostId.current) {
+                    const dataPreview = hoverUnderghostId.current;
+                    const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
+                    if (hoveredBefore) {
+                        dataBeforeHoveredUnderGhost.forEach((item) => {
+                            var _a, _b, _c;
+                            (_c = (_b = (_a = hoveredBefore.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute(item.key, item.value);
+                        });
+                    }
+                }
+                if (findEvent && targetGroup) {
+                    // console
+                    const idTarget = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                    const targetElement = svg.querySelector(`g[data-id="${idTarget}"]`);
+                    Object.entries(findEvent.properties).forEach(([key, value]) => {
+                        var _a, _b, _c;
+                        (_c = (_b = (_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute(key, value);
+                    });
+                }
                 if (dataHoveredGhostId !== dataGhostId) {
                     hoverUnderghostId.current = dataHoveredGhostId;
                 }

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

@@ -316,6 +316,8 @@ const LayerView = (props) => {
             console.error("Invalid data-id JSON:", err);
         }
     };
+    const dataBeforeHoverRef = useRef([]);
+    let dataBeforeHoveredUnderGhost = [];
     const getSvgCoords = (e) => {
         var _a;
         const svg = svgRef.current;
@@ -405,6 +407,39 @@ const LayerView = (props) => {
                 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") || "{}");
+                const findEvent = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((item) => item.event === "hoverdragontable");
+                if (dataHoveredGhostId === hoverUnderghostId.current && findEvent) {
+                    const allKeyEvent = Object.keys(findEvent.properties);
+                    dataBeforeHoveredUnderGhost = allKeyEvent.map((key) => {
+                        return {
+                            key,
+                            value: hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute(key)
+                        };
+                    });
+                    Object.entries(findEvent.properties).forEach(([key, value]) => {
+                        var _a, _b, _c;
+                        (_c = (_b = (_a = hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute(key, value);
+                    });
+                }
+                if (dataHoveredGhostId !== hoverUnderghostId.current) {
+                    const dataPreview = hoverUnderghostId.current;
+                    const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
+                    if (hoveredBefore) {
+                        dataBeforeHoveredUnderGhost.forEach((item) => {
+                            var _a, _b, _c;
+                            (_c = (_b = (_a = hoveredBefore.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute(item.key, item.value);
+                        });
+                    }
+                }
+                if (findEvent && targetGroup) {
+                    // console
+                    const idTarget = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                    const targetElement = svg.querySelector(`g[data-id="${idTarget}"]`);
+                    Object.entries(findEvent.properties).forEach(([key, value]) => {
+                        var _a, _b, _c;
+                        (_c = (_b = (_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute(key, value);
+                    });
+                }
                 if (dataHoveredGhostId !== dataGhostId) {
                     hoverUnderghostId.current = dataHoveredGhostId;
                 }

package/package.json

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