seat-editor 3.4.7 → 3.5.0

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v3";
@@ -7,8 +7,8 @@ import { isEmpty, isPlainObject, isUndefined } from "lodash";
 import ModalPreview from "../../components/modal-preview";
 import LayerView from "../view-only-3";
 import { isEqual, debounce } from "lodash";
-import { ZoomIn, ZoomOut } from "lucide-react";
-import { Button, Radio } from "antd";
+import { Command, ZoomIn, ZoomOut } from "lucide-react";
+import { Button, Flex, Radio, Tag } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 const toolElement = ["square", "circle", "table-seat-circle"];
@@ -69,24 +69,94 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     //boundingbox
     const isInialBoundingBox = useRef(false);
     const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const { selectionLines } = useAppSelector((state) => state.panel);
     const [selectedLines, setSelectedLines] = useState(null);
     useEffect(() => {
         if (activeTool === "select" || activeTool !== "select") {
             handleUnSelectComponent();
         }
+        if (activeTool !== "polygon") {
+            isOnMakePolygonRef.current = false;
+            polygonElementRef.current = [];
+        }
     }, [activeTool]);
+    // useEffect(() => {
+    //   if (selectionLines) {
+    //     setSelectedLines(selectionLines);
+    //     const idSelected = dataElementSelectionGroupRef.current.map(
+    //       (item) => item.id
+    //     );
+    //     const newSelectionData = [
+    //       ...componentsState,
+    //       ...extraComponentsState,
+    //     ].filter((comp) => idSelected.includes(comp.id));
+    //     dataElementSelectionGroupRef.current = newSelectionData;
+    //   }
+    // }, [selectionLines]);
     useEffect(() => {
-        if (selectionLines) {
-            setSelectedLines(selectionLines);
-            const idSelected = dataElementSelectionGroupRef.current.map((item) => item.id);
-            const newSelectionData = [
-                ...componentsState,
-                ...extraComponentsState,
-            ].filter((comp) => idSelected.includes(comp.id));
-            dataElementSelectionGroupRef.current = newSelectionData;
+        var _a;
+        if (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.id) {
+            const boxCurrentLines = {
+                x: selectedLines.x,
+                y: selectedLines.y,
+                width: selectedLines.width,
+                height: selectedLines.height,
+            };
+            const singleIdSelection = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+            if (singleIdSelection) {
+                const { g } = (_a = getAttributeElements(svgRef.current, [
+                    String(singleIdSelection),
+                ])) === null || _a === void 0 ? void 0 : _a[0];
+                const size = getGlobalBBox(svgRef.current, g);
+                const box = Object.assign({}, size);
+                if (!isEqual(box, boxCurrentLines)) {
+                    setSelectedLines((prev) => (Object.assign(Object.assign({}, prev), box)));
+                    updateSelectionBox(svgRef.current, box);
+                }
+            }
+            const groupIdSelection = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item.id);
+            if ((groupIdSelection === null || groupIdSelection === void 0 ? void 0 : groupIdSelection.length) > 0) {
+                const allBox = groupIdSelection === null || groupIdSelection === void 0 ? void 0 : groupIdSelection.map((id) => {
+                    var _a;
+                    const { g } = (_a = getAttributeElements(svgRef.current, [String(id)])) === null || _a === void 0 ? void 0 : _a[0];
+                    const translate = getTranslate(g);
+                    const size = getGlobalBBox(svgRef.current, g);
+                    return Object.assign({}, size);
+                });
+                const boxGroup = {
+                    x: Math.min(...allBox.map((b) => b.x)),
+                    y: Math.min(...allBox.map((b) => b.y)),
+                    width: Math.max(...allBox.map((b) => b.x + b.width)) -
+                        Math.min(...allBox.map((b) => b.x)),
+                    height: Math.max(...allBox.map((b) => b.y + b.height)) -
+                        Math.min(...allBox.map((b) => b.y)),
+                };
+                if (!isEqual(boxGroup, boxCurrentLines)) {
+                    setSelectedLines((prev) => (Object.assign(Object.assign({}, prev), boxGroup)));
+                    updateSelectionBox(svgRef.current, boxGroup);
+                }
+            }
+            // console.log("haduhhh kenak lagi");
+            // const selection = svgRef.current?.querySelector(
+            //   `g[data-selection="selection-${selectedLines.id}"]`
+            // );
+            // const rect = selection?.querySelector("rect");
+            // const g = getTranslate(selection as SVGGElement);
+            // const { width, height } = getSvgElementSize(rect as SVGRectElement);
+            // const getBBox = {
+            //   x: g.x,
+            //   y: g.y,
+            //   width,
+            //   height,
+            // };
+            // console.log({ getBBox, selectedLines });
+            // if (!isEqual(getBBox, selectedLines)) {
+            //   setSelectedLines(getBBox);
+            //   updateSelectionBox(svgRef.current, getBBox);
+            // }
         }
-    }, [selectionLines]);
+    }, [componentsState, extraComponentsState, selectedLines]);
     useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (hasInitialized)
@@ -187,6 +257,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 isSyncingFromRedux.current = true;
                 setExtraComponentsState(extraComponentsProps !== null && extraComponentsProps !== void 0 ? extraComponentsProps : []);
             }
+            if (!isEqual(selectedGroup, dataElementSelectionGroupRef.current)) {
+                dataElementSelectionGroupRef.current = selectedGroup !== null && selectedGroup !== void 0 ? selectedGroup : [];
+            }
             dispatch({ type: "board/setFlagChange", payload: false });
         }
     }, [componentsProps, extraComponentsProps, selectedComponentProps]);
@@ -236,7 +309,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         point.x = e.clientX;
         point.y = e.clientY;
         const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
-        return { x: transformed.x, y: transformed.y };
+        return { x: Math.round(transformed.x), y: Math.round(transformed.y) };
     };
     const getCursorStyle = () => {
         if (activeTool === "select" && moveComponent.current) {
@@ -274,6 +347,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     };
     const handleUnSelectComponent = () => {
         dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
         setSelectedComponent(null);
         setSelectedLines(null);
         dispatch({ type: "panel/setShow", payload: false });
@@ -316,7 +390,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         };
     }, [dataElementSelectionGroupRef.current]);
     const handlePointerDown = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const shiftActive = e.shiftKey;
         if (activeTool === "grab") {
             return;
@@ -383,13 +457,16 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         if (targetRotate) {
             isRotatingRef.current = true;
         }
-        const targetSelectionBox = e.target.closest("g[id='selection-lines']");
+        let positionSelection = null;
+        if (activeTool === "select") {
+            positionSelection = (_e = (_d = e.target.closest(`polyline[data-position]`)) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.position;
+        }
         // RESIZE
         const targetGroup = e.target.closest("g[data-id]");
         const targetPointPolygon = e.target.closest("circle[data-point]");
         // TARGET ELEMENT
         let idTargetElement = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
-        const selectionTarget = (_e = (_d = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.replace("selection-", "");
+        const selectionTarget = (_g = (_f = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _f === void 0 ? void 0 : _f.selection) === null || _g === void 0 ? void 0 : _g.replace("selection-", "");
         const activeId = selectionTarget !== null && selectionTarget !== void 0 ? selectionTarget : idTargetElement;
         const isInSelectionTarget = !isUndefined(selectionTarget);
         const isInTargetElement = !isPlainObject(idTargetElement);
@@ -397,7 +474,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const { g } = getAttributeElement(svg, activeId);
         if (targetGroup && shiftActive) {
             const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
-            const currentSelection = (_f = dataElementSelectionGroupRef.current) !== null && _f !== void 0 ? _f : [];
+            const currentSelection = (_h = dataElementSelectionGroupRef.current) !== null && _h !== void 0 ? _h : [];
+            if (currentSelection.length == 0 && selectedComponent) {
+                currentSelection.push(selectedComponent);
+            }
             const alreadySelected = currentSelection.some((comp) => comp.id == activeId);
             let newSelection;
             if (alreadySelected) {
@@ -414,7 +494,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const hitPoint = document.elementFromPoint(clientX, clientY);
         // CHECK FOR HIT ON SVG FOR SELECTION BOX
         // MAKE AND UNMAKE SELECTION BOX START ------
-        const hadSelectionBox = ((_g = dataElementSelectionGroupRef.current) === null || _g === void 0 ? void 0 : _g.length) > 0 && !isSingleSelection;
+        const hadSelectionBox = ((_j = dataElementSelectionGroupRef.current) === null || _j === void 0 ? void 0 : _j.length) > 0 && !isSingleSelection;
         const downInSelectionBox = hadSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg";
         const downOutSelectionBox = hadSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
         const downBeforeHasSelectionBox = !downInSelectionBox &&
@@ -452,7 +532,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 shape: nameShapeSelectionBoxGhost,
                 id: idSelectionBoxGhost,
             });
-            (_h = svgRef.current) === null || _h === void 0 ? void 0 : _h.appendChild(boxSelection);
+            (_k = svgRef.current) === null || _k === void 0 ? void 0 : _k.appendChild(boxSelection);
         }
         // MAKE AND UNMAKE SELECTION BOX END ------
         // RESIZE SELECTION BOX
@@ -498,7 +578,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             const newPolygon = {
                 id: `${Date.now()}`,
                 shape: "polygon",
-                fill: "red",
+                fill: "#ef0606",
                 points: [{ x, y }],
                 rotation: 0,
             };
@@ -515,6 +595,19 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             });
             isOnMakePolygonRef.current = true;
         }
+        if (activeTool !== "polygon" && isOnMakePolygonRef.current) {
+            isOnMakePolygonRef.current = false;
+            setSelectedComponent(null);
+            dispatch({
+                type: "panel/setSelectedComponent",
+                payload: null,
+            });
+            dispatch({
+                type: "panel/setSelectedGroup",
+                payload: null,
+            });
+            polygonElementRef.current = null;
+        }
         // const selectionLines = svgRef.current?.querySelector(
         //   "#selection-lines"
         // ) as SVGGElement;
@@ -531,9 +624,51 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             pt.x = ev.clientX;
             pt.y = ev.clientY;
             const pos = pt.matrixTransform(svg.getScreenCTM().inverse());
+            // RESIZE BOUNDARIES
+            const onResizeBoundaries = (pos) => {
+                var _a, _b;
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                const rectBoundaries = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#bounding-box");
+                const rect = (_b = rectBoundaries === null || rectBoundaries === void 0 ? void 0 : rectBoundaries.children) === null || _b === void 0 ? void 0 : _b[0];
+                const oldSel = {
+                    x: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.x,
+                    y: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.y,
+                    width: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.width,
+                    height: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.height,
+                };
+                let newWidth = oldSel.width;
+                let newHeight = oldSel.height;
+                let newX = oldSel.x;
+                let newY = oldSel.y;
+                if (positionSelection === "right-boundaries") {
+                    newWidth = oldSel.width + dx;
+                    newHeight = oldSel.height;
+                }
+                else if (positionSelection === "bottom-boundaries") {
+                    newWidth = oldSel.width;
+                    newHeight = oldSel.height + dy;
+                }
+                else if (positionSelection === "left-boundaries") {
+                    newWidth = oldSel.width - dx;
+                    newHeight = oldSel.height;
+                    newX = oldSel.x + dx;
+                }
+                else if (positionSelection === "top-boundaries") {
+                    newWidth = oldSel.width;
+                    newHeight = oldSel.height - dy;
+                    newY = oldSel.y + dy;
+                }
+                rect === null || rect === void 0 ? void 0 : rect.setAttribute("width", `${Math.round(newWidth)}`);
+                rect === null || rect === void 0 ? void 0 : rect.setAttribute("height", `${Math.round(newHeight)}`);
+                rectBoundaries === null || rectBoundaries === void 0 ? void 0 : rectBoundaries.setAttribute("transform", `translate(${Math.round(newX)}, ${Math.round(newY)})`);
+            };
+            if (positionSelection) {
+                onResizeBoundaries(pos);
+            }
             //RESIZE POLYGON
             const onResizePolygon = (pos) => {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 const dx = pos.x - x;
                 const dy = pos.y - y;
                 const { inner, element } = getAttributeElement(svg, activeId);
@@ -547,10 +682,21 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const points = element === null || element === void 0 ? void 0 : element.getAttribute("points");
                 let arrayPoints = pointsStringToArray(points);
                 const pointsStart = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) || [];
-                arrayPoints[index] = {
-                    x: ((_a = pointsStart[index]) === null || _a === void 0 ? void 0 : _a.x) + localDx,
-                    y: ((_b = pointsStart[index]) === null || _b === void 0 ? void 0 : _b.y) + localDy,
-                };
+                const isLastOrStartingPoint = index === 0 || index === arrayPoints.length - 1;
+                if (isLastOrStartingPoint) {
+                    const newPoint = {
+                        x: Math.round(((_a = pointsStart[index]) === null || _a === void 0 ? void 0 : _a.x) + localDx),
+                        y: Math.round(((_b = pointsStart[index]) === null || _b === void 0 ? void 0 : _b.y) + localDy),
+                    };
+                    arrayPoints[0] = newPoint;
+                    arrayPoints[arrayPoints.length - 1] = newPoint;
+                }
+                else {
+                    arrayPoints[index] = {
+                        x: Math.round(((_c = pointsStart[index]) === null || _c === void 0 ? void 0 : _c.x) + localDx),
+                        y: Math.round(((_d = pointsStart[index]) === null || _d === void 0 ? void 0 : _d.y) + localDy),
+                    };
+                }
                 const newPointsAttr = arrayToSvgPointsAttr(arrayPoints);
                 element === null || element === void 0 ? void 0 : element.setAttribute("points", newPointsAttr);
             };
@@ -601,7 +747,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 circleHelper === null || circleHelper === void 0 ? void 0 : circleHelper.setAttribute("cy", `${y2}`);
                 (_c = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children) === null || _c === void 0 ? void 0 : _c[0].setAttribute("transform", `rotate(${newAngle}, 0, 0)`);
                 const { tx, ty } = stabilizeRotation(x0, y0, w0, h0, 0, newAngle);
-                selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("transform", `translate(${tx}, ${ty}) `);
+                selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("transform", `translate(${Math.round(tx)}, ${Math.round(ty)}) `);
                 // ROTATE ALL ELEMENT IN SELECTION
                 const allID = (_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.map((el) => String(el.id));
                 const deltaAngle = newAngle - 0;
@@ -623,8 +769,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     const nx = cx + dx * cosA - dy * sinA;
                     const ny = cy + dx * sinA + dy * cosA;
                     g.setAttribute("data-is-rotating", "1");
-                    inner.setAttribute("transform", `rotate(${normalizeAngle(rotateBefore + deltaAngle)}, 0, 0)`);
-                    g.setAttribute("transform", `translate(${nx}, ${ny})`);
+                    inner.setAttribute("transform", `rotate(${Math.round(normalizeAngle(rotateBefore + deltaAngle))}, 0, 0)`);
+                    g.setAttribute("transform", `translate(${Math.round(nx)}, ${Math.round(ny)})`);
                 });
             };
             if (isRotateSelectionBox) {
@@ -710,6 +856,36 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                                 seatGroup,
                             });
                         }
+                        else if ((elementOld === null || elementOld === void 0 ? void 0 : elementOld.shape) === "table-seat-half-square") {
+                            resizeSeatSide({
+                                seatsPositions: elementOld.seatPositions,
+                                r: 10,
+                                newElement,
+                                openSpace: elementOld.openSpace,
+                                seats,
+                                seatGroup,
+                            });
+                        }
+                        else if ((elementOld === null || elementOld === void 0 ? void 0 : elementOld.shape) === "table-seat-rect-square") {
+                            resizeSeatRectSquare({
+                                seatsPositions: elementOld.seatPositions,
+                                r: 10,
+                                newElement,
+                                openSpace: elementOld.openSpace,
+                                seats,
+                                seatGroup,
+                            });
+                        }
+                        else if ((elementOld === null || elementOld === void 0 ? void 0 : elementOld.shape) === "table-seat-rect-circle") {
+                            resizeSeatRectCircle({
+                                seatsPositions: elementOld.seatPositions,
+                                r: 10,
+                                newElement,
+                                openSpace: elementOld.openSpace,
+                                seats,
+                                seatGroup,
+                            });
+                        }
                     }
                     applyResizeToSvgElement(element, g, newElement);
                 });
@@ -728,7 +904,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     const { g } = getAttributeElement(svg, String(item.id));
                     const newX = pos.x - x;
                     const newY = pos.y - y;
-                    g.setAttribute("transform", `translate(${item.x + newX}, ${item.y + newY})`);
+                    const translateX = Math.round(item.x + newX);
+                    const translateY = Math.round(item.y + newY);
+                    g.setAttribute("transform", `translate(${translateX}, ${translateY})`);
                 });
                 const newX = pos.x - x;
                 const newY = pos.y - y;
@@ -802,10 +980,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const selY = Math.min(pos.y, y);
                 const selW = Math.abs(pos.x - x);
                 const selH = Math.abs(pos.y - y);
-                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("x", String(selX));
-                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("y", String(selY));
-                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("width", String(selW));
-                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("height", String(selH));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("x", String(Math.round(selX)));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("y", String(Math.round(selY)));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("width", String(Math.round(selW)));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("height", String(Math.round(selH)));
             };
             if (isInitialCreateBoundingBox) {
                 onCreateBoudingBox();
@@ -853,7 +1031,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
                 const svg = svgRef.current;
                 const { g, element, seats, seatGroup } = getAttributeElement(svg, activeId);
-                const isZeroRotate = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.rotation) === 0 && !(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape.includes("circle"));
+                const isZeroRotate = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.rotation) === 0 &&
+                    !(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape.includes("circle"));
                 const elementSelect = {
                     x: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x,
                     y: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y,
@@ -1041,7 +1220,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 circleHelper === null || circleHelper === void 0 ? void 0 : circleHelper.setAttribute("cx", `${x2}`);
                 circleHelper === null || circleHelper === void 0 ? void 0 : circleHelper.setAttribute("cy", `${y2}`);
                 // rotate di local space
-                inner.setAttribute("transform", `rotate(${newAngle}, 0, 0)`);
+                inner.setAttribute("transform", `rotate(${Math.round(newAngle)}, 0, 0)`);
                 // stabilize translate
                 const { tx, ty } = selectedComponent.shape === "polygon"
                     ? stabilizeTranslateOnRotate({
@@ -1052,7 +1231,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         ty: selectedComponent.y,
                     })
                     : stabilizeRotation(selectedComponent.x, selectedComponent.y, selectedComponent.width, selectedComponent.height, selectedComponent.rotation, newAngle);
-                g.setAttribute("transform", `translate(${tx}, ${ty})`);
+                g.setAttribute("transform", `translate(${Math.round(tx)}, ${Math.round(ty)})`);
                 updateSelectionGuides(svg, boxSelection, {
                     vLeft: "v-left",
                     vCenter: "v-center",
@@ -1061,7 +1240,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     hCenter: "h-center",
                     hBottom: "h-bottom",
                 });
-                ghostRotateElement.current = newAngle;
+                ghostRotateElement.current = Math.round(newAngle);
                 updateSelectionBox(svg, boxSelection, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, true);
             };
             if (targetRotate && !isRotateSelectionBox)
@@ -1082,7 +1261,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const isMatchWithSelection = activeId === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
                 const { g } = getAttributeElement(svg, activeId);
                 const boxSelection = getGlobalBBox(svg, g);
-                g === null || g === void 0 ? void 0 : g.setAttribute("transform", `translate(${newX}, ${newY})`);
+                g === null || g === void 0 ? void 0 : g.setAttribute("transform", `translate(${Math.round(newX)}, ${Math.round(newY)})`);
                 updateSelectionGuides(svg, boxSelection, {
                     vLeft: "v-left",
                     vCenter: "v-center",
@@ -1105,7 +1284,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             }
         };
         const pointerHandleUp = (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             updateSelectionGuides(svg, {
                 x: 0,
                 y: 0,
@@ -1124,26 +1303,15 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 //show
                 dispatch({ type: "panel/setShow", payload: true });
             }
-            if (targetPointPolygon && targetGroup) {
-                const { element } = getAttributeElement(svg, targetGroup.dataset.id);
-                const points = element === null || element === void 0 ? void 0 : element.getAttribute("points");
-                const pointsArray = pointsStringToArray(points);
-                const findById = [...componentsState, ...extraComponentsState].find((c) => c.id == targetGroup.dataset.id);
-                const newDataComponent = Object.assign(Object.assign({}, findById), { points: pointsArray });
-                updateComponentAttribute(newDataComponent);
-                setSelectedComponent(newDataComponent);
-                dispatch({
-                    type: "panel/setSelectedComponent",
-                    payload: newDataComponent,
-                });
-                dispatch({
-                    type: "panel/setSelectedGroup",
-                    payload: null,
-                });
-            }
             //POLYGON
-            const isInitialPolyGon = activeTool === "polygon" && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
-            if (isInitialPolyGon) {
+            const isInitialPolygon = activeTool === "polygon" && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
+            // console.log({ isInitialPolygon})
+            // if(!isInitialPolygon){
+            //   polygonElementRef.current = [];
+            //   setSelectedComponent(null);
+            //   svg.querySelector("#polyline-helper")?.setAttribute("opacity", "0");
+            // }
+            if (isInitialPolygon) {
                 const closing = isClosingPolygon(x, y, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points);
                 const newCoord = closing
                     ? {
@@ -1154,7 +1322,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const newPoints = Object.assign(Object.assign({}, selectedComponent), { points: [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, newCoord] });
                 (_c = svg.querySelector("#polyline-helper")) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
                 if (closing && ((_d = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) === null || _d === void 0 ? void 0 : _d.length) > 2) {
-                    const { g, inner } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
+                    const { inner } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
                     const { height, width } = getGlobalBBox(svg, inner);
                     isOnMakePolygonRef.current = false;
                     setSelectedComponent(null);
@@ -1165,10 +1333,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     polygonElementRef.current = [];
                     addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width, height }));
                     (_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
-                    const polyline = svg.querySelector("#polyline-helper");
                     (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
                 }
                 else {
+                    console.log("gak closing");
                     setSelectedComponent(newPoints);
                     dispatch({
                         type: "panel/setSelectedComponent",
@@ -1223,7 +1391,6 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 (_h = svgRef.current) === null || _h === void 0 ? void 0 : _h.querySelectorAll("#ghost-element-create").forEach((el) => el.remove());
                 isCreateElementRef.current = false;
             }
-            // CREATE POLYGON
             const hasSelectedOneElement = !isEmpty(selectedComponent) &&
                 onResizeSelectionRef.current &&
                 downAtResizePosition;
@@ -1299,6 +1466,24 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 //LOGIC FOR SET SHOW
                 dispatch({ type: "panel/setShow", payload: true });
             }
+            // CREATE POLYGON
+            if (targetPointPolygon && targetGroup) {
+                const { element } = getAttributeElement(svg, targetGroup.dataset.id);
+                const points = element === null || element === void 0 ? void 0 : element.getAttribute("points");
+                const pointsArray = pointsStringToArray(points);
+                const findById = [...componentsState, ...extraComponentsState].find((c) => c.id == targetGroup.dataset.id);
+                const newDataComponent = Object.assign(Object.assign({}, findById), { points: pointsArray });
+                updateComponentAttribute(newDataComponent);
+                setSelectedComponent(newDataComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newDataComponent,
+                });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null,
+                });
+            }
             //UPDATE DATASET TO STATE IF RESIZE
             if (isMightResizeElement) {
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
@@ -1335,8 +1520,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 let y2 = [];
                 allElementSelectionGroup.forEach((element) => {
                     const activeId = element.id;
-                    const { g, inner, element: el, } = getAttributeElement(svg, String(activeId));
-                    const { x, y, width, height } = getGlobalBBox(svg, g);
+                    const { g } = getAttributeElement(svg, String(activeId));
+                    const { x, y } = getTranslate(g);
+                    const { width, height } = getGlobalBBox(svg, g);
                     xs.push(x);
                     ys.push(y);
                     x2.push(x + width);
@@ -1400,10 +1586,29 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 (_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;
             }
+            // RESIZE BOUNDARIES
+            if (positionSelection) {
+                const boundariesRectElement = (_q = svgRef.current) === null || _q === void 0 ? void 0 : _q.querySelector("#bounding-box");
+                const { g, element } = getAttributeElement(svg, String(boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.id));
+                const { x, y } = getTranslate(g);
+                const { width, height } = getGlobalBBox(svg, element);
+                dispatch({
+                    type: "board/setBoundingBox",
+                    payload: {
+                        x,
+                        y,
+                        width,
+                        height,
+                        id: `${Date.now()}`,
+                        shape: "bounding-box",
+                        fill: "transparent",
+                    },
+                });
+            }
             //RESIZE SELECTION BOX UP
             if (downAtResizePositionAndHasSelectionBox || isRotateSelectionBox) {
                 isResizeSelectionRef.current = false;
-                const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
+                const results = (_r = dataElementSelectionGroupRef.current) === null || _r === void 0 ? void 0 : _r.map((item) => {
                     const { g, element, inner, points } = getAttributeElement(svg, String(item.id));
                     const { x, y } = getTranslate(g);
                     const { width, height } = getSvgElementSize(element);
@@ -1451,7 +1656,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 !shiftActive &&
                 !isRotateSelectionBox) {
                 isResizeSelectionRef.current = false;
-                const results = (_r = dataElementSelectionGroupRef.current) === null || _r === void 0 ? void 0 : _r.map((item) => {
+                const results = (_s = dataElementSelectionGroupRef.current) === null || _s === void 0 ? void 0 : _s.map((item) => {
                     const { g } = getAttributeElement(svg, String(item.id));
                     const { x, y } = getTranslate(g);
                     const getBBox = getGlobalBBox(svg, g);
@@ -1493,7 +1698,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 hadSelectionRef.current = false;
             }
             //DELETE GHOST ELEMENT BISA MEMBU
-            (_s = svgRef.current) === null || _s === void 0 ? void 0 : _s.querySelectorAll("#ghost-element").forEach((el) => el.remove());
+            (_t = svgRef.current) === null || _t === void 0 ? void 0 : _t.querySelectorAll("#ghost-element").forEach((el) => el.remove());
             //UPDATE DATASET TO STATE IF MOVEk
             // if (releaseGroupRef.current) return;
             if ((isMightMove &&
@@ -1525,7 +1730,6 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         window.addEventListener("pointermove", pointerHandleMove);
         window.addEventListener("pointerup", pointerHandleUp);
     };
-    const positionRef = useRef({ x: 0, y: 0 });
     const handlePointerMove = (e) => {
         const svg = svgRef.current;
         const pt = svg.createSVGPoint();
@@ -1545,10 +1749,12 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         if (isOnMakePolygonRef === null || isOnMakePolygonRef === void 0 ? void 0 : isOnMakePolygonRef.current) {
             const polylineHelper = svg === null || svg === void 0 ? void 0 : svg.querySelector("#polyline-helper");
             // const startPoint =
+            if (selectedComponent) {
+                const newPoints = [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, { x: pos.x, y: pos.y }];
+                const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
+                polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
+            }
             //   selectedComponent?.points[selectedComponent?.points?.length - 1];
-            const newPoints = [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, { x: pos.x, y: pos.y }];
-            const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
-            polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
             //lin helper from start to move
         }
     };
@@ -1573,6 +1779,78 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             });
         }
     };
+    const singleSelectionTable = useAppSelector((state) => state.panel.selectedComponent);
+    const groupSelection = useAppSelector((state) => state.panel.selectedGroup);
+    const footerInfoList = useMemo(() => {
+        return [
+            {
+                key: "none",
+                title: "Click & Drag",
+                desc: "to select, move, or resize objects",
+                active: 1,
+            },
+            {
+                title: "Shift + Click",
+                desc: "to add/remove objects from selection",
+                value: 1,
+            },
+        ];
+    }, []);
+    const [isShiftPressed, setIsShiftPressed] = useState(false);
+    const handleUndo = () => {
+        dispatch({ type: "board/undoHistory" });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setShow", payload: false });
+    };
+    const handleRedo = () => {
+        dispatch({ type: "board/redoHistory" });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setShow", payload: false });
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "d") {
+                e.preventDefault(); // 🔥 ini penting
+                e.stopPropagation();
+                handleUnSelectComponent();
+            }
+            if (e.key === "Shift") {
+                setIsShiftPressed(true);
+            }
+            const isModifier = e.metaKey || e.ctrlKey;
+            const key = e.key.toLowerCase();
+            // UNDO
+            if (isModifier && key === "z" && !e.shiftKey) {
+                e.preventDefault();
+                handleUndo();
+            }
+            // REDO (Cmd+Shift+Z / Ctrl+Shift+Z)
+            if (isModifier && key === "z" && e.shiftKey) {
+                e.preventDefault();
+                handleRedo();
+            }
+            // REDO alternative (Ctrl+Y - Windows)
+            if (e.ctrlKey && key === "y") {
+                e.preventDefault();
+                handleRedo();
+            }
+        };
+        const handleKeyUp = (e) => {
+            if (e.key === "Shift") {
+                setIsShiftPressed(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, []);
+    const hasSelectionBox = !isEmpty(selectedLines);
+    // console.log({ selectedComponent, polygonElementRef, componentsState,selectedComponent})
     return (<>
       <ModalPreview>
         <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
@@ -1584,19 +1862,35 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         }} defaultBoundingBox={boundingBox}/>
         <div className="flex gap-2 mt-2">
           <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
-            <Radio value="default">Default</Radio>
-            <Radio value="type-1">Type 1</Radio>
-            <Radio value="type-2">Type 2</Radio>
+            <Radio value="default">Event Layout</Radio>
+            <Radio value="type-1">Layout View</Radio>
+            <Radio value="type-2">Next 3 Reservation</Radio>
           </Radio.Group>
         </div>
       </ModalPreview>
       <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
+        <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10">
           <div className="flex gap-2">
             <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
             <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
           </div>
         </div>
+        <div className="w-full bg-white absolute bottom-0 left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300">
+          Select{" "}
+          <Tag color={isShiftPressed ? "red" : "lime"}>
+            {footerInfoList[hasSelectionBox ? 1 : 0]["title"]}
+          </Tag>{" "}
+          {footerInfoList[hasSelectionBox ? 1 : 0]["desc"]}
+          {hasSelectionBox && (<>
+              <Tag color="lime">
+                <Flex>
+                  <Command size={16}/>D
+                </Flex>
+              </Tag>
+              to deselect
+            </>)}{" "}
+          | Table Total <Tag color="volcano">{componentsState === null || componentsState === void 0 ? void 0 : componentsState.length}</Tag>
+        </div>
         <TransformWrapper ref={transformRef} 
     // limitToBounds={true}
     panning={{
@@ -1614,7 +1908,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     // centerZoomedOut={true}
     // onTransformed={handleTransformed}
     minScale={0.1} // sangat kecil = bisa zoom out jauh
-     maxScale={1000} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
+     maxScale={2} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
           {/* {scale !== 1 && ( */}
           {/* <div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10"> */}
           {/* {renderMiniMap()} */}