seat-editor 2.1.2 → 3.0.0

package/dist/features/package/index.js

@@ -6,7 +6,7 @@ import SideTool from "../side-tool";
 import ControlPanels from "../panel";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { isEqual } from "lodash";
-import LayerView from "../view";
+import LayerView from "../view-only";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
     const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized } = props;

package/dist/features/panel/index.js

@@ -13,18 +13,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { Form, Drawer, Input } from "antd";
+import { Form, Input } from "antd";
 import SelectToolForm from "./select-tool";
 import SquareToolForm from "./square-circle-tool";
 import SeatCircle from "./table-seat-circle";
 import UploadTool from "./upload-tool";
 import { debounce } from "lodash";
+import clsx from "clsx";
+import { getAttributeElement } from "../board-v3/resize-element";
+import { applyResizeToSvgElement, updateSelectionBox } from "../board-v3/utils";
 const ControlPanels = (props) => {
     const { action, responseMapping } = props;
     const dispatch = useAppDispatch();
     const theme = useAppSelector((state) => state.theme);
     const tool = useAppSelector((state) => state.tool);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const components = useAppSelector((state) => state.board.components);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const svgRef = useRef(null);
+    useEffect(() => {
+        svgRef.current = document.querySelectorAll("#workspace");
+    }, []);
     const { show } = useAppSelector((state) => state.panel);
     const [open, setOpen] = useState(false);
     const [form] = Form.useForm();
@@ -43,20 +53,48 @@ const ControlPanels = (props) => {
             }
             form.setFieldsValue(selectedComponent);
         }
+        else if (selectedGroup) {
+            if (show)
+                setOpen(true);
+            if (!show)
+                setOpen(false);
+            function isSameAllByKey(arr, key) {
+                if (!arr || arr.length === 0)
+                    return false;
+                const firstValue = arr[0][key];
+                return arr.every((item) => item[key] === firstValue);
+            }
+            const isSameAllWidth = isSameAllByKey(selectedGroup, "width");
+            const isSameAllHeight = isSameAllByKey(selectedGroup, "height");
+            const isSameX = isSameAllByKey(selectedGroup, "x");
+            const isSameY = isSameAllByKey(selectedGroup, "y");
+            const isSameFill = isSameAllByKey(selectedGroup, "fill");
+            const isSameStroke = isSameAllByKey(selectedGroup, "stroke");
+            const isSameOpacity = isSameAllByKey(selectedGroup, "opacity");
+            const isSampeRotation = isSameAllByKey(selectedGroup, "rotation");
+            const isSameStrokeWidth = isSameAllByKey(selectedGroup, "strokeWidth");
+            form.setFieldsValue(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isSameAllWidth ? { width: selectedGroup[0].width } : {})), (isSameAllHeight ? { height: selectedGroup[0].height } : {})), (isSameX ? { x: selectedGroup[0].x } : {})), (isSameY ? { y: selectedGroup[0].y } : {})), (isSameFill ? { fill: selectedGroup[0].fill } : {})), (isSameStroke ? { stroke: selectedGroup[0].stroke } : {})), (isSameOpacity ? { opacity: selectedGroup[0].opacity } : {})), (isSampeRotation ? { rotation: selectedGroup[0].rotation } : {})), (isSameStrokeWidth
+                ? { strokeWidth: selectedGroup[0].strokeWidth }
+                : {})));
+        }
         else {
             setOpen(false);
         }
-    }, [selectedComponent]);
+    }, [selectedComponent, selectedGroup, show]);
     useEffect(() => {
         if (tool.active === "background" || tool.active === "image-table") {
             setOpen(true);
         }
     }, [tool]);
     const createShape = (shape, ...props) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle"
-                ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA"
-                : undefined, text: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : "Text" : undefined, fontColor: shape === "text" ? (_m = (_l = props === null || props === void 0 ? void 0 : props[0]) === null || _l === void 0 ? void 0 : _l.fontColor) !== null && _m !== void 0 ? _m : "#DADADA" : undefined }));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill, seatCount: shape === "table-seat-circle" ? (_c = (_b = props === null || props === void 0 ? void 0 : props[0]) === null || _b === void 0 ? void 0 : _b.seatCount) !== null && _c !== void 0 ? _c : 6 : 0, openSpace: ["table-seat-circle", "table-seat-square"].includes(shape)
+                ? (_e = (_d = props === null || props === void 0 ? void 0 : props[0]) === null || _d === void 0 ? void 0 : _d.openSpace) !== null && _e !== void 0 ? _e : 0
+                : undefined, 
+            // seatFill: ["table-seat-circle", "table-seat-square"].includes(shape)
+            //   ? props?.[0]?.seatFill ?? "#DADADA"
+            //   : undefined,
+            text: shape === "text" ? (_g = (_f = props === null || props === void 0 ? void 0 : props[0]) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : "Text" : undefined, fontColor: shape === "text" ? (_j = (_h = props === null || props === void 0 ? void 0 : props[0]) === null || _h === void 0 ? void 0 : _h.fontColor) !== null && _j !== void 0 ? _j : "#DADADA" : undefined }));
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({
@@ -70,21 +108,61 @@ const ControlPanels = (props) => {
             payload: data,
         });
     }, 300));
+    const debouncedSyncSelectedSelectionLines = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/setSelectionLines",
+            payload: data,
+        });
+    }));
+    const debounceSyncSelectedGroup = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedGroup",
+            payload: data,
+        });
+    }, 300));
+    const debounceSyncDataSelectedGroup = useRef(debounce((data) => {
+        dispatch({
+            type: "board/updateAllComponents",
+            payload: data,
+        });
+    }, 300));
     const debouncedSyncForm = useRef(debounce(() => {
         dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
     }, 300));
+    const updateElement = (id, values) => {
+        var _a, _b, _c, _d, _e, _f;
+        console.log({ id, values });
+        let findElement = [...components, ...extraComponents].find((item) => item.id === id);
+        if (!findElement)
+            return;
+        const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
+        const newSelection = {
+            width: newElement.width,
+            height: newElement.height,
+            x: newElement.x,
+            y: newElement.y,
+        };
+        const { g, element, inner, seats, seatGroup } = getAttributeElement((_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1], id);
+        updateSelectionBox((_f = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _f === void 0 ? void 0 : _f[1], newSelection);
+        applyResizeToSvgElement(element, g, newElement);
+    };
     const handleChangeComponent = (values, allValues) => {
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
         const newValues = createShape(shape, restProps);
-        debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
-        // dispatch({
-        //   type: "board/updateComponent",
-        //   payload: {
-        //     ...(selectedComponent || {}),
-        //     ...newValues,
-        //   },
-        // });
-        if (shape !== (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
+        // console.log("debouncedSyncSelectedComponents","haduhh",allValues, values);
+        if (selectedComponent) {
+            updateElement(allValues.id, values);
+            debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
+            // dispatch({
+            //   type: "board/updateComponent",
+            //   payload: {
+            //     ...(selectedComponent || {}),
+            //     ...newValues,
+            //   },
+            // });
+            // if (shape !== selectedComponent?.shape) {
+            // console.log("debouncedSyncSelectedComponents","haduhh")
             debouncedSyncSelectedComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
             // dispatch({
             //   type: "panel/updateSelectedComponent",
@@ -93,6 +171,41 @@ const ControlPanels = (props) => {
             //     ...newValues,
             //   },
             // });
+            // }
+        }
+        if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {}))));
+            let minX = Infinity;
+            let minY = Infinity;
+            let maxX = -Infinity;
+            let maxY = -Infinity;
+            updatedGroup.forEach((comp) => {
+                minX = Math.min(minX, comp.x);
+                minY = Math.min(minY, comp.y);
+                maxX = Math.max(maxX, comp.x + comp.width);
+                maxY = Math.max(maxY, comp.y + comp.height);
+            });
+            const newSelectionGroup = {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                shape: "selection-box",
+                id: `${Date.now()}`,
+                fill: "transparent",
+                rotation: 0,
+                stroke: "red",
+            };
+            dispatch({
+                type: "panel/setSelectionLines",
+                payload: newSelectionGroup,
+            });
+            // dispatch({
+            //   type: "panel/updateSelectedGroup",
+            //   payload: updatedGroup,
+            // });
+            debounceSyncDataSelectedGroup.current(updatedGroup);
         }
         debouncedSyncForm.current();
     };
@@ -115,16 +228,13 @@ const ControlPanels = (props) => {
     };
     const handleClose = () => {
         setOpen(false);
+        // HIDE SEMENTARA
         dispatch({
             type: "panel/setShow",
             payload: false,
         });
     };
     // if(!show) return null
-    return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", styles: {
-            body: {
-                paddingBottom: 0,
-            },
-        }, children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
+    return (_jsx("div", { className: clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]"), children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
 };
 export default ControlPanels;

package/dist/features/panel/panel-slice.d.ts

@@ -4,12 +4,17 @@ export interface PanelState {
     history: any[];
     active: string;
     show: boolean;
+    selectedGroup: any;
+    selectionLines?: any;
 }
 export declare const panelSlice: import("@reduxjs/toolkit").Slice<PanelState, {
     setSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
     setUnSelectedComponent: (state: import("immer").WritableDraft<PanelState>) => void;
     updateSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
     setShow: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<boolean>) => void;
+    setSelectedGroup: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+    updateSelectedGroup: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+    setSelectionLines: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
 }, "panel", "panel", import("@reduxjs/toolkit").SliceSelectors<PanelState>>;
 export declare const setSelectedComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "panel/setSelectedComponent">, setUnSelectedComponent: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"panel/setUnSelectedComponent">, setShow: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "panel/setShow">;
 declare const _default: import("redux").Reducer<PanelState>;

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

@@ -4,6 +4,8 @@ const initialState = {
     history: [],
     active: "",
     show: false,
+    selectedGroup: null,
+    selectionLines: null,
 };
 export const panelSlice = createSlice({
     name: "panel",
@@ -24,6 +26,19 @@ export const panelSlice = createSlice({
         },
         setShow: (state, action) => {
             state.show = action.payload;
+        },
+        setSelectedGroup: (state, action) => {
+            state.selectedGroup = action.payload;
+        },
+        updateSelectedGroup: (state, action) => {
+            state.selectedGroup = Object.assign({}, action.payload);
+            state.history.push(state.selectedGroup);
+            if (state.history.length > 20) {
+                state.history.shift();
+            }
+        },
+        setSelectionLines: (state, action) => {
+            state.selectionLines = action.payload;
         }
     },
 });

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

@@ -3,12 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppSelector } from "../../hooks/use-redux";
 import SquareToolForm from "./square-circle-tool";
 import SeatCircle from "./table-seat-circle";
+import SeatSquare from "./table-seat-square";
 import UploadTool from "./upload-tool";
 import TextTool from "./text-tool";
+import SelectedGroup from "./selected-group";
 const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
     const components = useAppSelector((state) => state.board.components);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const SummaryComponents = () => {
         const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
             acc[item.shape] = (acc[item.shape] || 0) + 1;
@@ -32,6 +35,8 @@ const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
                 return _jsx(SquareToolForm, {});
             case "table-seat-circle":
                 return _jsx(SeatCircle, {});
+            case "table-seat-square":
+                return _jsx(SeatSquare, {});
             case "image-table":
             case "background":
                 return (_jsx(UploadTool, { action: action, responseMapping: responseMapping, name: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape, defaultValue: selectedComponent, type: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
@@ -43,6 +48,11 @@ const SelectToolForm = ({ title = "Title", action, responseMapping }) => {
                 return null;
         }
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent()] }));
+    const renderSelectionComponent = () => {
+        if (selectedGroup) {
+            return (_jsx(SelectedGroup, {}));
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent(), renderSelectionComponent()] }));
 };
 export default SelectToolForm;

package/dist/features/panel/selected-group.d.ts

@@ -0,0 +1,2 @@
+declare const SelectedGroup: () => import("react/jsx-runtime").JSX.Element;
+export default SelectedGroup;

package/dist/features/panel/selected-group.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+const SelectedGroup = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [_jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { max: 360, min: 0 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0 }) })] })] })] }) }));
+};
+export default SelectedGroup;

package/dist/features/panel/table-seat-square.d.ts

@@ -0,0 +1,2 @@
+declare const SeatSquare: () => import("react/jsx-runtime").JSX.Element;
+export default SeatSquare;

package/dist/features/panel/table-seat-square.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatSquare = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Square table" }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatSquare;

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2, Lock, LockOpen, Undo2, Redo2, } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, Lock, LockOpen, Undo2, Redo2, PenTool } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, message, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -28,11 +28,11 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             name: "Ruler",
             icon: _jsx(Ruler, {}),
         },
-        {
-            id: "node",
-            name: "Node Tool",
-            icon: _jsx(MousePointer2, {}),
-        },
+        // {
+        //   id: "node",
+        //   name: "Node Tool",
+        //   icon: <MousePointer2 />,
+        // },
     ];
     const actionsTools = [
         // {
@@ -82,6 +82,11 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             name: "Text",
             icon: _jsx(Type, {}),
         },
+        {
+            id: "polygon",
+            name: "Polygon Tool",
+            icon: _jsx(PenTool, {}),
+        }
         // {
         //   id: "background-color",
         //   name: "Background Color",
@@ -246,10 +251,12 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const handleUndo = () => {
         dispatch({ type: "board/undoHistory" });
         dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
     };
     const handleRedo = () => {
         dispatch({ type: "board/redoHistory" });
         dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
     };
     return (_jsxs("div", { className: "h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4", children: [tools === null || tools === void 0 ? void 0 : tools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
                     icon: tool.icon,

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

@@ -1,5 +1,4 @@
 "use client";
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";

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

@@ -1,5 +1,4 @@
 "use client";
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";

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

@@ -0,0 +1,68 @@
+import React, { CSSProperties, SVGAttributes } from "react";
+import { ReactZoomPanPinchRef, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from "react-zoom-pan-pinch";
+import { PropertiesProps } from "@/dto/table";
+import { EventHandleType } from "@/dto/event-handler";
+export type TableGhost = {
+    table: PropertiesProps;
+    event: EventHandleType;
+};
+export type TableMatchKey = {
+    key: string | number;
+    properties: PropertiesProps;
+};
+export type TableMatchEvent = {
+    event: EventHandleType;
+    properties: PropertiesProps;
+};
+export type ComponentProps = PropertiesProps | {
+    [key: string]: PropertiesProps | string | number | boolean | null | undefined;
+};
+export type OnCurrentStateChange = ({ components, extraComponents, }: {
+    components: ComponentProps[];
+    extraComponents: ComponentProps[];
+}) => void;
+export type TransformProps = React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchContentRef>>;
+export type RefLayerView = {
+    svgRef: SVGSVGElement;
+    transformRef: ReactZoomPanPinchRef;
+    containerRef: HTMLDivElement;
+    tableGhost: SVGGElement;
+    hoverUnderghost: ComponentProps;
+};
+export interface LayerViewProps {
+    componentProps?: ComponentProps[];
+    extraComponentProps?: ComponentProps[];
+    onCurrentStateChange?: OnCurrentStateChange;
+    onSelectComponent?: (component: ComponentProps) => void;
+    mappingKey?: string;
+    tableMatchKey?: TableMatchKey[];
+    eventMatchTable?: TableMatchEvent[];
+    statusKey: string;
+    defaultBackground?: string;
+    transformProps?: TransformProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    svgProps?: SVGAttributes<SVGSVGElement>;
+    ghostAttributes?: SVGAttributes<SVGGElement>;
+    iconTags?: {
+        icon: React.JSX.Element;
+        key: string;
+    }[];
+    tooltipProps?: {
+        className: string;
+        style: CSSProperties;
+        minWidth: number;
+    };
+    dragTableBlockKey: [
+        {
+            key: string;
+            value: string | number;
+        }
+    ];
+    onRightClick?: (e: MouseEvent, component: ComponentProps) => void;
+    allowTooltip?: boolean;
+    onDrop?: (e: React.MouseEvent<SVGSVGElement>, component: ComponentProps) => void;
+    onSwitch?: (e: MouseEvent, component: ComponentProps) => void;
+    refs?: React.ForwardedRef<RefLayerView>;
+}
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+export default LayerView;