seat-editor 2.1.2 → 3.0.0

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

@@ -1,70 +1,222 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, } from "react";
-import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
+import { useCallback, useEffect, 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";
-import { throttle } from "lodash";
+import { isEmpty, isPlainObject, isUndefined, throttle } from "lodash";
 import ModalPreview from "../../components/modal-preview";
-import LayerView from "../view";
+import LayerView from "../view-only-2";
 import { isEqual, debounce } from "lodash";
 import { ZoomIn, ZoomOut } from "lucide-react";
 import { Button } from "antd";
+import { getAttributeElement, getAttributeElements } from "./resize-element";
+import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSingleComponent, } from "./utils";
+const toolElement = ["square", "circle", "table-seat-circle"];
+const idSelectionBoxGhost = "selection-box-ghost";
+const nameShapeSelectionBoxGhost = "selection-box";
 const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
     const dispatch = useAppDispatch();
-    const theme = useAppSelector((state) => state.theme);
     const transformRef = useRef(null);
     const containerRef = useRef(null);
+    const releaseGroupRef = useRef(false);
+    const dataSetGhost = useRef(null);
     const [widthBoard, setWidthBoard] = useState(20000);
     const [heightBoard, setHeightBoard] = useState(20000);
     const svgRef = useRef(null);
     const [shadowShape, setShadowShape] = useState([]);
-    const [startPoint, setStartPoint] = useState(null);
-    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-    // const [moveComponent, setMoveComponent] = useState(false);
     const [scale, setScale] = useState(1);
+    const [boardSize, setBoardSize] = useState({ width: 20100, height: 20100 });
+    const [minCoords, setMinCoords] = useState({ x: -200, y: -200 });
+    const [hasInitialized, setHasInitialzed] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const activeTool = useAppSelector((state) => state.tool.active);
     const grid = useAppSelector((state) => state.tool.grid);
     const lockBackground = useAppSelector((state) => state.tool.lockBackground);
-    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, } = useAppSelector((state) => state.board);
-    const isTouching = useRef(false);
+    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, } = useAppSelector((state) => state.board);
+    const { selectionLines } = useAppSelector((state) => state.panel);
+    const [selectedLines, setSelectedLines] = useState([]);
+    useEffect(() => {
+        if (activeTool === "select" || activeTool !== "select") {
+            handleUnSelectComponent();
+        }
+    }, [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(() => {
         var _a;
         if (activeTool !== ((_a = shadowShape[0]) === null || _a === void 0 ? void 0 : _a.shape)) {
             setShadowShape([]);
         }
     }, [activeTool]);
-    // const [isDragging, setIsDragging] = useState(false);
     const [resizeDirection, setResizeDirection] = useState(null);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
-    const screenCTMRef = useRef(null);
-    const dragIndex = useRef(null);
     const [componentsState, setComponentsState] = useState([]);
     const [extraComponentsState, setExtraComponentsState] = useState([]);
     const [selectedComponent, setSelectedComponent] = useState(null);
     const isSyncingFromRedux = useRef(false);
-    const startPos = useRef({ x: 0, y: 0 });
     const isDragging = useRef(false);
     const moveComponent = useRef(false);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (hasInitialized)
+            return;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        // let widthMinX = 0;
+        // let heightMinY = 0;
+        componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.forEach((_) => {
+            var _a, _b, _c, _d;
+            let values = _;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            // if (minX === _.x) {
+            //   widthMinX = _.width;
+            // }
+            // if (minY === _.y) {
+            //   heightMinY = _.height;
+            // }
+        });
+        extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.forEach((values) => {
+            var _a, _b;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            // if (minX === values.x) {
+            //   widthMinX = values.width;
+            // }
+            // if (minY === values.y) {
+            //   heightMinY = values.height;
+            // }
+        });
+        let backgroundHasOne = false;
+        if ((extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.length) === 1 &&
+            ((_b = (_a = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
+            backgroundHasOne = true;
+            minX = (_c = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _c === void 0 ? void 0 : _c.x;
+            minY = (_d = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _d === void 0 ? void 0 : _d.y;
+            maxX = (_e = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _e === void 0 ? void 0 : _e.width;
+            maxY = (_f = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _f === void 0 ? void 0 : _f.height;
+            // if (minX === extraComponentsProps?.[0]?.x) {
+            //   widthMinX = extraComponentsProps?.[0]?.width;
+            // }
+            // if (minY === extraComponentsProps?.[0]?.y) {
+            //   heightMinY = extraComponentsProps?.[0]?.height;
+            // }
+        }
+        if ((extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.length) < 1 &&
+            ["background", "text"].includes((_g = componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
+            minX = minX - minX * 0.5;
+            minY = minY - minY * 0.5;
+        }
+        if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
+            (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(-minX, -minY, scale);
+            setHasInitialzed(true);
+        }
+        // }
+        // if (!backgroundHasOne) {
+        //   setMinCoords({ x: minX - minX * 0.5, y: minY - minY * 0.5 });
+        // }
+        // if(maxX > boardSize.width){
+        //   setBoardSize((prev) => ({ ...prev, width: maxX }));
+        // }
+        // if(maxY > boardSize.height){
+        //   setBoardSize((prev) => ({ ...prev, height: maxY }));
+        // }
+        // return {
+        //   minX: backgroundHasOne ? minX : minX - minX * 0.5,
+        //   minY: backgroundHasOne ? minY : minY - minY * 0.5,
+        //   width: maxX,
+        //   height: maxY,
+        // };
+    }, [componentsProps, extraComponentsProps]);
     const debouncedSyncToReduxSelected = useRef(debounce((data) => {
         throttledDispatch(data);
     }, 300)).current;
-    const debouncedSyncComponents = useRef(debounce((data) => {
+    const updateQueue = useRef([]);
+    const isFlushing = useRef(false);
+    const updateFlushToRedux = () => {
+        if (isFlushing.current)
+            return;
+        isFlushing.current = true;
+        requestAnimationFrame(() => {
+            const batch = updateQueue.current;
+            updateQueue.current = [];
+            isFlushing.current = false;
+            dispatch({
+                type: "board/setNewComponents",
+                payload: batch === null || batch === void 0 ? void 0 : batch[0],
+            });
+        });
+    };
+    const queueUpdateComponents = (data) => {
         dispatch({
             type: "board/setNewComponents",
             payload: data,
         });
-    }, 300));
+    };
+    const queueUpdateExtraComponents = (data) => {
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: data,
+        });
+    };
     const debouncedSyncExtraComponents = useRef(debounce((data) => {
         dispatch({
             type: "board/setNewExtraComponents",
             payload: data,
         });
+    }, 1000));
+    const debouncedUpdateSelectedLines = useRef(debounce((data) => {
+        const id = data;
+        const { g } = getAttributeElement(svgRef.current, id);
+        const getBBox = getGlobalBBox(svgRef.current, g);
+        console.log("masukkk update");
+        setSelectedLines((prev) => (Object.assign(Object.assign({}, prev), getBBox)));
     }, 300));
     // Redux → Local
     useEffect(() => {
-        if (flagChange) {
+        if (flagChange && updateBy === "global") {
             if (!isEqual(componentsProps, componentsState)) {
                 isSyncingFromRedux.current = true;
                 setComponentsState(componentsProps !== null && componentsProps !== void 0 ? componentsProps : []);
@@ -76,44 +228,50 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             if (!isEqual(selectedComponentProps, selectedComponent)) {
                 isSyncingFromRedux.current = true;
                 setSelectedComponent(selectedComponentProps !== null && selectedComponentProps !== void 0 ? selectedComponentProps : []);
+                console.log("masukkk");
+                debouncedUpdateSelectedLines.current(selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.id);
             }
             dispatch({ type: "board/setFlagChange", payload: false });
         }
     }, [
         componentsProps,
         extraComponentsProps,
-        selectedComponentProps,
-        flagChange,
+        // selectedComponentProps,
+        // flagChange,
     ]);
-    // Local → Redux
-    useEffect(() => {
-        if (isSyncingFromRedux.current) {
-            isSyncingFromRedux.current = false;
+    const updateComponentAttribute = (component) => {
+        if (!component)
             return;
+        const updatedComponents = updateSingleComponent(componentsState, component, setComponentsState);
+        if (updatedComponents) {
+            dispatch({ type: "board/setUpdateBy", payload: "local" });
+            queueUpdateComponents(updatedComponents);
         }
-        if (!isEqual(componentsState, componentsProps) &&
-            !isEqual(componentsState, [])) {
-            debouncedSyncComponents.current(componentsState);
-        }
-        if (!isEqual(extraComponentsState, extraComponentsProps) &&
-            !isEqual(extraComponentsState, [])) {
-            debouncedSyncExtraComponents.current(extraComponentsState);
-        }
-    }, [componentsState, extraComponentsState]);
-    const handleAddComponent = (shape) => {
-        dispatch({
-            type: activeTool === "text"
-                ? "board/setExtraComponent"
-                : "board/addComponent",
-            payload: Object.assign(Object.assign({}, shape), { fill: theme === null || theme === void 0 ? void 0 : theme.primaryColor }),
-        });
-        const payload = Object.assign(Object.assign({}, shape), { fill: theme === null || theme === void 0 ? void 0 : theme.primaryColor });
-        if (activeTool === "text") {
-            setExtraComponentsState((prev) => [...prev, payload]);
+        const updatedExtra = updateSingleComponent(extraComponentsState, component, setExtraComponentsState);
+        if (updatedExtra) {
+            dispatch({ type: "board/setUpdateBy", payload: "local" });
+            queueUpdateExtraComponents(updatedExtra);
+            debouncedSyncExtraComponents.current(updatedExtra);
         }
-        else {
-            setComponentsState((prev) => [...prev, payload]);
+    };
+    const updateComponentsAttribute = (components) => {
+        if (!components.length)
+            return;
+        const isExtra = components === null || components === void 0 ? void 0 : components.filter((item) => (item === null || item === void 0 ? void 0 : item.shape) === "polygon");
+        if (isExtra) {
+            const nextExtra = updateManyComponents(extraComponentsState, components, setExtraComponentsState);
+            dispatch({ type: "board/setUpdateBy", payload: "local" });
+            queueUpdateComponents(nextExtra);
         }
+        const nextComponents = updateManyComponents(componentsState, components, setComponentsState);
+        dispatch({ type: "board/setUpdateBy", payload: "local" });
+        queueUpdateExtraComponents(nextComponents);
+    };
+    const addComponents = (components) => {
+        const newComponentState = [...extraComponentsState, components];
+        setExtraComponentsState(newComponentState);
+        dispatch({ type: "board/setUpdateBy", payload: "local" });
+        dispatch({ type: "board/setExtraComponent", payload: components });
     };
     const getSvgCoords = (e) => {
         var _a;
@@ -124,154 +282,6 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
         return { x: transformed.x, y: transformed.y };
     };
-    const createShape = (x, y, fill) => ({
-        x,
-        y,
-        width: 50 / scale,
-        height: 50 / scale,
-        shape: activeTool,
-        id: Date.now(),
-        fill,
-        rotation: activeTool === "diamond" ? 45 : 0,
-        seatCount: activeTool === "table-seat-circle" ? 6 : 0,
-        openSpace: activeTool === "table-seat-circle" ? 0 : undefined,
-        seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
-        text: activeTool === "text" ? "Text" : "",
-        fontColor: activeTool === "text" ? "#DADADA" : undefined,
-        points: [],
-    });
-    const getCoords = (e) => {
-        const svgRect = svgRef.current.getBoundingClientRect();
-        if ("touches" in e) {
-            return {
-                x: e.touches[0].clientX,
-                y: e.touches[0].clientY,
-            };
-        }
-        return {
-            x: e.clientX - svgRect.x,
-            y: e.clientY - svgRect.y,
-        };
-    };
-    const handleMouseDown = (e, item, direction) => {
-        if (!item && !direction) {
-            if (["node", "select"].includes(activeTool)) {
-                setSelectedComponent(null);
-                dispatch({ type: "panel/setSelectedComponent", payload: null });
-            }
-            return;
-        }
-        if (["node", "select"].includes(activeTool) && item && !direction) {
-            const coords = getCoords(e);
-            // startPos.current = { x: e.clientX, y: e.clientY };
-            // const rectBox = (e?.target as HTMLElement).getBoundingClientRect();
-            if (activeTool === "node") {
-                moveComponent.current = true;
-                isDragging.current = false;
-                dispatch({ type: "panel/setShow", payload: false });
-                // dispatch({
-                //   type: "tool/setActiveTool",
-                //   payload: "node",
-                // });
-            }
-            if (activeTool === "select") {
-                isDragging.current = true;
-                moveComponent.current = false;
-                dispatch({ type: "panel/setShow", payload: true });
-            }
-            const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-            setDragOffset({
-                x: coords.x - rectBox.left + ((item === null || item === void 0 ? void 0 : item.strokeWidth) || 0),
-                y: coords.y - rectBox.top + ((item === null || item === void 0 ? void 0 : item.strokeWidth) || 0),
-            });
-            setSelectedComponent(item);
-            dispatch({
-                type: "panel/setSelectedComponent",
-                payload: item,
-            });
-            // const handleMouseMove = (event: MouseEvent) => {
-            //   const dx = Math.abs(event.clientX - startPos.current.x);
-            //   const dy = Math.abs(event.clientY - startPos.current.y);
-            //   if (dx > 1 || dy > 1) {
-            //     if (!moveComponent.current && item) {
-            //       dispatch({ type: "panel/setSelectedComponent", payload: item });
-            //       setSelectedComponent(item);
-            //     }
-            //     moveComponent.current = true;
-            //   }
-            // };
-            // const handleMouseUp = () => {
-            //   document.removeEventListener("mousemove", handleMouseMove);
-            //   document.removeEventListener("mouseup", handleMouseUp);
-            //   if (moveComponent.current) {
-            //     moveComponent.current = false;
-            //   } else {
-            //     isDragging.current = true;
-            //     moveComponent.current = false;
-            //     setResizeDirection(direction);
-            //     if (item) {
-            //       dispatch({ type: "panel/setSelectedComponent", payload: item });
-            //       dispatch({ type: "panel/setShow", payload: true });
-            //       setSelectedComponent(item);
-            //     }
-            //   }
-            // };
-            // Pasang ke `document` agar global
-            // document.addEventListener("mousemove", handleMouseMove);
-            // document.addEventListener("mouseup", handleMouseUp);
-        }
-        // if(activeTool === "select" && item && !direction) {
-        //   dispatch({
-        //     type: "tool/setActiveTool",
-        //     payload: "node",
-        //   });
-        // }
-        if (activeTool === "select" && direction) {
-            setResizeDirection(direction);
-        }
-    };
-    const handleMouseEnter = () => {
-        if (![
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool))
-            return;
-    };
-    const handleMouseLeave = () => {
-        if (![
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool))
-            return;
-        setShadowShape([]);
-    };
-    const handleMouseClick = (e) => {
-        if (["select", "node"].includes(activeTool) && selectedComponent) {
-            handleUnSelectComponent();
-            return;
-        }
-        if (![
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool)) {
-            return;
-        }
-        const { x, y } = getSvgCoords(e);
-        setStartPoint({ x, y });
-        handleAddComponent(createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor));
-    };
     const throttledDispatch = useCallback(throttle((component) => {
         // dispatch({
         //   type: "board/updateComponent",
@@ -283,372 +293,6 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         });
     }, 16), // 16ms ≈ 60fps
     [dispatch]);
-    const handleMouseMove = (e) => {
-        var _a;
-        if ([
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-            "ruler",
-        ].includes(activeTool)) {
-            const { x, y } = getSvgCoords(e);
-            setShadowShape([createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor)]);
-            return;
-        }
-        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" && lockBackground)
-            return;
-        if (activeTool === "node" &&
-            selectedComponent &&
-            moveComponent.current &&
-            dragOffset &&
-            // !isTouching.current &&
-            !resizeDirection) {
-            const workspaceRect = e.currentTarget.getBoundingClientRect();
-            const coords = getCoords(e);
-            const newX = coords.x - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
-            const newY = coords.y - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
-            let newPosition = {
-                x: newX / scale,
-                y: newY / scale,
-            };
-            requestAnimationFrame(() => {
-                setComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), { x: newPosition.x, y: newPosition.y });
-                        }
-                        return component;
-                    });
-                });
-                setExtraComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), { x: newPosition.x, y: newPosition.y });
-                        }
-                        return component;
-                    });
-                });
-                setSelectedComponent((prev) => {
-                    return Object.assign(Object.assign({}, prev), { x: newPosition.x, y: newPosition.y });
-                });
-            });
-            debouncedSyncToReduxSelected(Object.assign(Object.assign({}, selectedComponent), newPosition));
-            return;
-        }
-        if (activeTool === "select" && resizeDirection) {
-            const coords = getCoords(e);
-            const workspaceRect = e.currentTarget.getBoundingClientRect();
-            const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
-            if (!instance)
-                return;
-            const { positionX, positionY } = instance.transformState;
-            const currentX = (coords.x + workspaceRect.left - 50 - positionX) / scale;
-            const currentY = (coords.y + workspaceRect.top - positionY) / scale;
-            const { x, y, width, height } = selectedComponent;
-            let newShape = Object.assign({}, selectedComponent);
-            switch (resizeDirection) {
-                case "top-left":
-                    newShape.width = width + (x - currentX);
-                    newShape.height = height + (y - currentY);
-                    newShape.x = currentX;
-                    newShape.y = currentY;
-                    break;
-                case "top-right":
-                    newShape.width = currentX - newShape.x;
-                    newShape.height = newShape.height + (newShape.y - currentY);
-                    newShape.y = currentY;
-                    break;
-                case "bottom-left":
-                    newShape.width += newShape.x - currentX;
-                    newShape.height = currentY - newShape.y;
-                    newShape.x = currentX;
-                    break;
-                case "bottom-right":
-                    newShape.width = currentX - newShape.x;
-                    newShape.height = currentY - newShape.y;
-                    break;
-                case "left":
-                    newShape.width += newShape.x - currentX;
-                    newShape.x = currentX;
-                    break;
-                case "right":
-                    newShape.width = currentX - newShape.x;
-                    break;
-                case "top": {
-                    newShape.height += newShape.y - currentY;
-                    newShape.y = currentY;
-                    break;
-                }
-                case "bottom":
-                    newShape.height = currentY - newShape.y;
-                    break;
-                default:
-                    break;
-            }
-            requestAnimationFrame(() => {
-                setComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), newShape);
-                        }
-                        return component;
-                    });
-                });
-                setExtraComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), newShape);
-                        }
-                        return component;
-                    });
-                });
-                setSelectedComponent(newShape);
-            });
-            debouncedSyncToReduxSelected(newShape);
-        }
-    };
-    const handleMouseUp = () => {
-        if (["select", "node"].includes(activeTool) && selectedComponent) {
-            setResizeDirection(null);
-            moveComponent.current = false;
-        }
-    };
-    // useEffect(() => {
-    //   if (containerRef.current) {
-    //     setWidthBoard(containerRef.current.offsetWidth);
-    //     setHeightBoard(containerRef.current.offsetHeight);
-    //   }
-    // }, [
-    //   containerRef?.current?.offsetWidth,
-    //   containerRef?.current?.offsetHeight,
-    //   viewOnly,
-    // ]);
-    const handleUnSelectComponent = () => {
-        dispatch({ type: "panel/setSelectedComponent", payload: null });
-        setSelectedComponent(null);
-    };
-    // const handleTouchStart = (
-    //   e: React.TouchEvent<
-    //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-    //   >,
-    //   items: any,
-    //   direction?: string
-    // ) => {
-    //   if (activeTool === "node" && !direction && items) {
-    //     // dispatch({ type: "panel/setShow", payload: false });
-    //     // setMoveComponent(true);
-    //     moveComponent.current = true;
-    //     isTouching.current = true;
-    //     // dispatch({ type: "panel/setSelectedComponent", payload: item });
-    //     onSelectComponent && onSelectComponent(items);
-    //     dispatch({ type: "panel/setSelectedComponent", payload: items });
-    //     setSelectedComponent(items);
-    //     // selectedComponentRef.current = items;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     const pt = svg.createSVGPoint();
-    //     if (!svg) return;
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-    //     screenCTMRef.current = svg.getScreenCTM()?.inverse() || null;
-    //     setDragOffset({
-    //       x: cursorpt.x - items.x,
-    //       y: cursorpt.y - items.y,
-    //     });
-    //     // dragOffset.current = {
-    //     //   x: cursorpt.x - items.x,
-    //     //   y: cursorpt.y - items.y
-    //     // }
-    //   } else if (activeTool === "select" && direction) {
-    //     setResizeDirection(direction);
-    //     // setIsDragging(true);
-    //     // setMoveComponent(true);
-    //     moveComponent.current = true;
-    //     isDragging.current = true;
-    //     isTouching.current = true;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     const pt = svg.createSVGPoint();
-    //     if (!svg) return;
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-    //     screenCTMRef.current = svg.getScreenCTM()?.inverse() || null;
-    //     setDragOffset({
-    //       x: cursorpt.x - items.x,
-    //       y: cursorpt.y - items.y,
-    //     });
-    //     // dragOffset.current = {
-    //     //   x: cursorpt.x - items.x,
-    //     //   y: cursorpt.y - items.y
-    //     // }
-    //   }
-    // };
-    // const handleTouchMove = (
-    //   e: React.TouchEvent<
-    //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-    //   >
-    // ) => {
-    //   if (
-    //     activeTool === "node" &&
-    //     moveComponent &&
-    //     isTouching.current &&
-    //     !resizeDirection
-    //   ) {
-    //     isDragging.current = true;
-    //     moveComponent.current = true;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     if (!svg) return;
-    //     const pt = svg.createSVGPoint();
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(screenCTMRef.current);
-    //     requestAnimationFrame(() => {
-    //       if (selectedComponent?.shape != "background") {
-    //         setComponentsState((prev) => {
-    //           return prev.map((component) => {
-    //             if (component.id === selectedComponent.id) {
-    //               return {
-    //                 ...component,
-    //                 x: cursorpt.x - dragOffset?.x,
-    //                 y: cursorpt.y - dragOffset?.y,
-    //               };
-    //             }
-    //             return component;
-    //           });
-    //         });
-    //       }
-    //       if (selectedComponent?.shape == "background") {
-    //         setExtraComponentsState((prev) => {
-    //           return prev.map((component) => {
-    //             if (component.id === selectedComponent.id) {
-    //               return {
-    //                 ...component,
-    //                 x: cursorpt.x - dragOffset?.x,
-    //                 y: cursorpt.y - dragOffset?.y,
-    //               };
-    //             }
-    //             return component;
-    //           });
-    //         });
-    //       }
-    //       setSelectedComponent({
-    //         ...selectedComponent,
-    //         x: cursorpt.x - dragOffset?.x,
-    //         y: cursorpt.y - dragOffset?.y,
-    //       });
-    //     });
-    //     // updateComponentRef({
-    //     //   ...(typeof selectedComponent === "object" && selectedComponent !== null
-    //     //     ? selectedComponent
-    //     //     : {}),
-    //     //   x: cursorpt.x - dragOffset?.current.x,
-    //     //   y: cursorpt.y - dragOffset?.current.y,
-    //     // });
-    //   } else if (
-    //     activeTool === "select" &&
-    //     moveComponent.current &&
-    //     isTouching.current &&
-    //     resizeDirection
-    //   ) {
-    //     // setIsDragging(true);
-    //     isDragging.current = true;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     if (!svg) return;
-    //     const pt = svg.createSVGPoint();
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(screenCTMRef.current);
-    //     let newShape = { ...selectedComponent };
-    //     switch (resizeDirection) {
-    //       case "top-left":
-    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
-    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
-    //         newShape.x = cursorpt.x;
-    //         newShape.y = cursorpt.y;
-    //         break;
-    //       case "top-right":
-    //         newShape.width = cursorpt.x - newShape.x;
-    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
-    //         newShape.y = cursorpt.y;
-    //         break;
-    //       case "bottom-left":
-    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
-    //         newShape.height = cursorpt.y - newShape.y;
-    //         newShape.x = cursorpt.x;
-    //         break;
-    //       case "bottom-right":
-    //         newShape.width = cursorpt.x - newShape.x;
-    //         newShape.height = cursorpt.y - newShape.y;
-    //         break;
-    //       case "top-center":
-    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
-    //         newShape.y = cursorpt.y;
-    //         break;
-    //       case "bottom-center":
-    //         newShape.height = cursorpt.y - newShape.y;
-    //         break;
-    //       case "right-center":
-    //         newShape.width = cursorpt.x - newShape.x;
-    //         break;
-    //       case "left-center":
-    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
-    //         newShape.x = cursorpt.x;
-    //         break;
-    //       default:
-    //         break;
-    //     }
-    //     // updateComponentRef({
-    //     //   ...(typeof selectedComponent === "object" && selectedComponent !== null
-    //     //     ? selectedComponent
-    //     //     : {}),
-    //     //   ...newShape,
-    //     // });
-    //     requestAnimationFrame(() => {
-    //       setComponentsState((prev) => {
-    //         return prev.map((component) => {
-    //           if (component.id === selectedComponent.id) {
-    //             return {
-    //               ...component,
-    //               ...newShape,
-    //             };
-    //           }
-    //           return component;
-    //         });
-    //       });
-    //       setExtraComponentsState((prev) => {
-    //         return prev.map((component) => {
-    //           if (component.id === selectedComponent.id) {
-    //             return {
-    //               ...component,
-    //               ...newShape,
-    //             };
-    //           }
-    //           return component;
-    //         });
-    //       });
-    //       setSelectedComponent({
-    //         ...selectedComponent,
-    //         ...newShape,
-    //       });
-    //     });
-    //     debouncedSyncToReduxSelected(newShape);
-    //   }
-    // };
-    // const handleTouchEnd = () => {
-    //   // setMoveComponent(false);
-    //   // setIsDragging(false);
-    //   moveComponent.current = false;
-    //   isDragging.current = false;
-    //   isTouching.current = false;
-    //   setResizeDirection(null);
-    // };
     const getCursorStyle = () => {
         if (activeTool === "select" && moveComponent.current) {
             return "grabbing";
@@ -663,19 +307,6 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             return "crosshair";
         }
     };
-    const renderMiniMap = () => {
-        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", 
-                    // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
-                    className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                        background: "#f5f5f5",
-                        display: "block",
-                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
-                        // onClick={handleSelectComponent}
-                        onMouseDown: handleMouseDown, 
-                        // onMouseUp={handleMouseUp}
-                        // onBlur={handleUnSelectComponent}
-                        selectedComponent: selectedComponent }) }) }) }));
-    };
     const handelZoomIn = () => {
         var _a;
         if (activeTool !== "grab") {
@@ -696,90 +327,1221 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         }
         (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomOut();
     };
-    // const handleSelectComponent = (item: Component) => {
-    //   if (activeTool === "select" && item) {
-    //     if (item.shape === "background") {
-    //       dispatch({ type: "panel/setSelectedComponent", payload: item });
-    //       setSelectedComponent(item);
-    //       return;
-    //     }
-    //     if (item.id === selectedComponent?.id) {
-    //       handleUnSelectComponent();
-    //       return;
-    //     }
-    //     dispatch({ type: "panel/setSelectedComponent", payload: item });
-    //     setSelectedComponent(item);
-    //     // setSelectedComponent(item);
-    //     throttledDispatch(item);
-    //   }
-    // };
-    // activeTool === "select" &&
-    //     moveComponent &&
-    //     isTouching.current &&
-    //     !resizeDirection
-    // const [nodes, setNodes] = useState([
-    //   { x: 80, y: 40 },
-    //   { x: 220, y: 40 },
-    //   { x: 260, y: 160 },
-    //   { x: 40, y: 160 },
-    // ]);
-    const addNode = () => {
-        // if (nodes.length < 30) {
-        //   const midIndex = Math.floor(nodes.length / 2);
-        //   const prev = nodes[midIndex - 1];
-        //   const curr = nodes[midIndex];
-        //   const newNode = {
-        //     x: (prev.x + curr.x) / 2,
-        //     y: (prev.y + curr.y) / 2,
-        //   };
-        //   const newNodes = [...nodes];
-        //   newNodes.splice(midIndex, 0, newNode);
-        //   setNodes(newNodes);
-        // }
+    // const [touch, setTouch] = useState(false);
+    const handleUnSelectComponent = () => {
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        setSelectedComponent(null);
+        setSelectedLines(null);
+        dispatch({ type: "panel/setShow", payload: false });
+        dataElementSelectionGroupRef.current = [];
     };
-    const removeNode = () => {
-        // if (nodes.length > 3) {
-        //   const midIndex = Math.floor(nodes.length / 2);
-        //   const newNodes = [...nodes];
-        //   newNodes.splice(midIndex, 1);
-        //   setNodes(newNodes);
+    const startAngleRef = useRef(0);
+    const startRotationRef = useRef(0);
+    const ghostRotateElement = useRef(0);
+    const isResizeRef = useRef(false);
+    const isResizeSelectionRef = useRef(false);
+    const selectionDataRef = useRef([]);
+    // const selectionElementsRef = useRef<any>([]);
+    // const selectionElementRawsRef = useRef<any>([]);
+    const hadSelectionRef = useRef(false);
+    //FLAGE EVERY HANDLE EVENT
+    //CREATE
+    const isCreateElementRef = useRef(false);
+    //RESIZE
+    const onResizeSelectionRef = useRef(false);
+    //ROTATE
+    const isRotatingRef = useRef(false);
+    const rotationSelectionRef = useRef(0);
+    //DRAG/MOVE
+    //SELECT
+    const isSelectingRef = useRef(false);
+    const activeIdSelectedRef = useRef(null);
+    //SELECTION
+    const selectionLinesRef = useRef(null);
+    const onMakeSelectionRef = useRef(false);
+    // const dataElementSelectionGroupRawRef = useRef<Element[]>([]);
+    const onMoveSelectionBoxRef = useRef(false);
+    const onResizeSelectionBoxRef = useRef(false);
+    const dataElementSelectionGroupRef = useRef([]);
+    //polygon
+    const isPolygonRef = useRef(false);
+    const polygonElementRef = useRef([]);
+    const isOnMakePolygonRef = useRef(false);
+    const startPointPolygonLineRef = useRef({ x: 0, y: 0 });
+    const handlePointerDown = (e) => {
+        var _a, _b, _c, _d, _e;
+        const shiftActive = e.shiftKey;
+        console.log("shiftActive", shiftActive);
+        const svg = svgRef.current;
+        if (!e.isPrimary)
+            return;
+        if (!svg)
+            return;
+        isDragging.current = false;
+        let hasMoved = false;
+        releaseGroupRef.current = false;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const { x, y } = getSvgCoords(e);
+        //CREATE ELEMENT
+        const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
+        if (isInitialCreateElemente) {
+            console.log("INITIAL CREATE ELEMENT");
+            const tables = createTableGhost({
+                x,
+                y,
+                width: 1,
+                height: 1,
+                fill: "red",
+                shape: activeTool,
+            });
+            // setGhostCreateElement(tables);
+            (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(tables);
+            isCreateElementRef.current = true;
+        }
+        const targetSelection = e.target.closest("g[id='selection-lines']");
+        //ROTATE
+        const targetRotate = e.target.closest("circle[data-role]");
+        if (targetRotate) {
+            console.log("TARGET ROTATE");
+            isRotatingRef.current = true;
+        }
+        // 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 = (_c = (_b = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _b === void 0 ? void 0 : _b.selection) === null || _c === void 0 ? void 0 : _c.replace("selection-", "");
+        const activeId = selectionTarget !== null && selectionTarget !== void 0 ? selectionTarget : idTargetElement;
+        const isInSelectionTarget = !isUndefined(selectionTarget);
+        const isInTargetElement = !isPlainObject(idTargetElement);
+        const isSingleSelection = isInSelectionTarget && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === activeId;
+        console.log("activeId", activeId);
+        const { g, inner } = getAttributeElement(svg, activeId);
+        if (targetGroup && shiftActive) {
+            const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
+            console.log("findById", findById, "HIT TARGET USING SHIFT");
+            const dataSelection = [...dataElementSelectionGroupRef.current, findById];
+            dataElementSelectionGroupRef.current = dataSelection;
+        }
+        const box = getGlobalBBox(svg, g);
+        const { x: initialXG, y: initialYG } = getTranslate(g);
+        const targetDragPosition = e.target.closest("circle[data-position]");
+        const { clientX, clientY } = e;
+        const hitPoint = document.elementFromPoint(clientX, clientY);
+        // CHECK FOR HIT ON SVG FOR SELECTION BOX
+        // MAKE AND UNMAKE SELECTION BOX START ------
+        const hadSelectionBox = ((_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.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 &&
+            (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg" &&
+            activeTool === "select";
+        const isRotateSelectionBox = targetRotate && hadSelectionBox;
+        let currentRotation = 0;
+        if (isRotateSelectionBox) {
+            console.log("LAGI ROTATE SELECTION BOX");
+            currentRotation = rotationSelectionRef.current;
+        }
+        //move tanpa ada selection single element dan bisa move juga ketika ada selection box
+        //JIKA PUNYA SELECTION TAPI DOWN DI ELEMENT LAIN
+        const downInMatchSelectionBox = downInSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg" && isInSelectionTarget;
+        if (downInSelectionBox) {
+            console.log("HIT IN SELECTION BOX");
+            hadSelectionRef.current = true;
+        }
+        if (downOutSelectionBox) {
+            console.log("HIT OUT SELECTION BOX");
+            hadSelectionRef.current = false;
+            onMoveSelectionBoxRef.current = false;
+            handleUnSelectComponent();
+        }
+        if (downBeforeHasSelectionBox) {
+            console.log("HIT BEFORE HAS SELECTION BOX");
+            // RELEASE SELECT
+            releaseGroupRef.current = true;
+            // MAKING SELECTION BOX DOWN
+            onMakeSelectionRef.current = true;
+            onMoveSelectionBoxRef.current = false;
+            handleUnSelectComponent();
+            const boxSelection = createTableGhost({
+                x,
+                y,
+                width: 1,
+                height: 1,
+                fill: "transparent",
+                shape: nameShapeSelectionBoxGhost,
+                id: idSelectionBoxGhost,
+            });
+            (_e = svgRef.current) === null || _e === void 0 ? void 0 : _e.appendChild(boxSelection);
+        }
+        // MAKE AND UNMAKE SELECTION BOX END ------
+        // RESIZE SELECTION BOX
+        const resizeSide = (targetDragPosition === null || targetDragPosition === void 0 ? void 0 : targetDragPosition.dataset.position) || "{}";
+        const downAtResizePosition = resizeSide !== "{}";
+        const downOutResizePosition = resizeSide === "{}";
+        //down in selection box (need check element didalammnya)
+        const downOutResizePositionAndInSelectionBox = downOutResizePosition &&
+            hadSelectionBox &&
+            !downOutSelectionBox &&
+            isInSelectionTarget &&
+            !isSingleSelection &&
+            !isInTargetElement;
+        const downAtResizePositionAndHasSelectionBox = downAtResizePosition && hadSelectionBox && !isRotateSelectionBox;
+        const isMightResizeElement = !isEmpty(selectedComponent) &&
+            downAtResizePosition &&
+            downAtResizePosition &&
+            !hadSelectionBox;
+        const isMightMove = activeId &&
+            !targetPointPolygon &&
+            isInTargetElement &&
+            !isMightResizeElement;
+        const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement;
+        console.log({ isMightResizeElement });
+        // if (
+        //   !downInMatchSelectionBox &&
+        //   !downAtResizePositionAndHasSelectionBox &&
+        //   !targetRotate &&
+        //   !isMightResizeElement &&
+        //   !targetPointPolygon &&
+        //   !isMightMove &&
+        //   !targetSelection
+        // ) {
+        //   console.log("MAUK UNSELET");
+        //   hadSelectionRef.current = false;
+        //   onMoveSelectionBoxRef.current = false;
+        //   handleUnSelectComponent();
+        //   selectionLinesRef.current = null;
         // }
+        if (downOutResizePositionAndInSelectionBox) {
+            console.log("DOWN OUT RESIZE POSITION AND IN SELECTION BOX");
+            onMoveSelectionBoxRef.current = true;
+        }
+        if (downAtResizePosition) {
+            console.log("DOWN AT RESIZE POSITION");
+            onResizeSelectionRef.current = true;
+        }
+        // targetGroup?.removeAttribute("transform");
+        const mousePositionInGroup = {
+            x: x - (box === null || box === void 0 ? void 0 : box.x),
+            y: y - (box === null || box === void 0 ? void 0 : box.y),
+        };
+        const offset = {
+            x: x - initialXG,
+            y: y - initialYG,
+        };
+        // create polygon
+        const isInitialPolyGon = activeTool === "polygon" && !isCreateElementRef.current;
+        if (isInitialPolyGon && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) !== "polygon") {
+            console.log("DOWN CREATE POLYGON");
+            const newPolygon = {
+                id: `${Date.now()}`,
+                shape: "polygon",
+                fill: "red",
+                points: [{ x, y }],
+                rotation: 0,
+            };
+            polygonElementRef.current = newPolygon;
+            // addComponents(newPolygon);
+            setSelectedComponent(newPolygon);
+            dispatch({
+                type: "panel/setSelectedComponent",
+                payload: newPolygon,
+            });
+            isOnMakePolygonRef.current = true;
+        }
+        // const selectionLines = svgRef.current?.querySelector(
+        //   "#selection-lines"
+        // ) as SVGGElement;
+        // const boxSelection = svgRef.current?.querySelector(
+        //   "#rect-box-selection"
+        // ) as SVGRectElement;
+        // const allElementInSelection = svgRef.current?.querySelectorAll(
+        //   "#ghost-element-has-selection"
+        // );
+        const pointerHandleMove = (ev) => {
+            var _a;
+            //SVG POINTER
+            const pt = svg.createSVGPoint();
+            pt.x = ev.clientX;
+            pt.y = ev.clientY;
+            const pos = pt.matrixTransform(svg.getScreenCTM().inverse());
+            //RESIZE POLYGON
+            const onResizePolygon = (pos) => {
+                var _a, _b;
+                console.log("on resize polygon");
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                const { g, inner, element } = getAttributeElement(svg, activeId);
+                const angleDeg = getRotation(inner.transform.baseVal); // 0–360
+                const angleRad = (angleDeg * Math.PI) / 180;
+                const cos = Math.cos(-angleRad);
+                const sin = Math.sin(-angleRad);
+                const localDx = dx * cos - dy * sin;
+                const localDy = dx * sin + dy * cos;
+                const index = Number(targetPointPolygon.getAttribute("id"));
+                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 newPointsAttr = arrayToSvgPointsAttr(arrayPoints);
+                element === null || element === void 0 ? void 0 : element.setAttribute("points", newPointsAttr);
+            };
+            if (targetPointPolygon && targetGroup) {
+                onResizePolygon(pos);
+            }
+            //ROTATE SELECTION BOX
+            const onRotateSelectionBox = (pos) => {
+                var _a, _b, _c, _d;
+                console.log("rotate selection");
+                const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+                const circleHelper = svg.querySelector("#circle-help");
+                const lineHelper = svg.querySelector("#line-help");
+                const inner = (_b = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children) === null || _b === void 0 ? void 0 : _b[0];
+                const x0 = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.x) || 0;
+                const y0 = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.y) || 0;
+                const w0 = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.width) || 0;
+                const h0 = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.height) || 0;
+                const bbox = getGlobalBBox(svg, inner);
+                const cx = bbox.x + bbox.width / 2;
+                const cy = bbox.y + bbox.height / 2;
+                //start center
+                const dx0 = x - cx;
+                const dy0 = y - cy;
+                // ✅ ANGLE DARI CENTER
+                const dx = pos.x - cx;
+                const dy = pos.y - cy;
+                //start angle
+                const startAngle = Math.atan2(dy0, dx0);
+                const currentAngle = Math.atan2(dy, dx);
+                const newAngle = normalizeAngle(0 + ((currentAngle - startAngle) * 180) / Math.PI);
+                const angle = (0 * Math.PI) / 180;
+                // helper line
+                const centerX = w0 / 2;
+                const centerY = h0 / 2;
+                const cos = Math.cos(angle);
+                const sin = Math.sin(angle);
+                // GLOBAL → LOCAL
+                const localDx = dx * cos + dy * sin;
+                const localDy = -dx * sin + dy * cos;
+                // helper (LOCAL SPACE)
+                const x2 = centerX + localDx;
+                const y2 = centerY + localDy;
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("x1", `${centerX}`);
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("y1", `${centerY}`);
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("x2", `${x2}`);
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("y2", `${y2}`);
+                circleHelper === null || circleHelper === void 0 ? void 0 : circleHelper.setAttribute("cx", `${x2}`);
+                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}) `);
+                // ROTATE ALL ELEMENT IN SELECTION
+                const allID = (_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.map((el) => el.id);
+                const deltaAngle = newAngle - 0;
+                const rad = (deltaAngle * Math.PI) / 180;
+                const cosA = Math.cos(rad);
+                const sinA = Math.sin(rad);
+                const allGroupsAtrribute = getAttributeElements(svg, allID);
+                allGroupsAtrribute.forEach(({ g, inner }, i) => {
+                    var _a;
+                    const el = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a[i];
+                    if (!el)
+                        return;
+                    const rotateBefore = normalizeAngle(el.rotation);
+                    const ex = el.x;
+                    const ey = el.y;
+                    // 🔑 ROTATE AROUND SELECTION CENTER
+                    const dx = ex - cx;
+                    const dy = ey - cy;
+                    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})`);
+                });
+            };
+            if (isRotateSelectionBox) {
+                onRotateSelectionBox(pos);
+            }
+            //RESIZE SELECTION BOX
+            const onResizeSelectionBox = (ev) => {
+                var _a, _b;
+                console.log("RESIZE SELECTION BOX");
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                isResizeSelectionRef.current = true;
+                const oldSel = {
+                    x: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.x,
+                    y: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.y,
+                    width: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.width,
+                    height: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.height,
+                };
+                const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
+                const allDataRealSelection = (_b = [
+                    ...componentsState,
+                    ...extraComponentsState,
+                ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
+                const allGroupsAttribute = getAttributeElements(svg, allID);
+                const resultSelection = resizeBox({
+                    box: oldSel,
+                    dx,
+                    dy,
+                    rotate: 0,
+                    handle: resizeSide,
+                });
+                updateSelectionBox(svg, resultSelection);
+                const scaleX = resultSelection.width / oldSel.width;
+                const scaleY = resultSelection.height / oldSel.height;
+                allGroupsAttribute.forEach(({ g, element, inner, seatGroup, seats }, i) => {
+                    var _a, _b;
+                    const activeId = JSON.parse(g === null || g === void 0 ? void 0 : g.getAttribute("data-id"));
+                    const elementOld = allDataRealSelection === null || allDataRealSelection === void 0 ? void 0 : allDataRealSelection.find((el) => el.id == activeId);
+                    const { x: translateX, y: translateY } = getTranslate(g);
+                    const newWidth = (elementOld === null || elementOld === void 0 ? void 0 : elementOld.width) * scaleX;
+                    const newHeight = (elementOld === null || elementOld === void 0 ? void 0 : elementOld.height) * scaleY;
+                    // Jarak relatif element dari pojok kiri atas selection (sebelum resize)
+                    const relativeX = (elementOld === null || elementOld === void 0 ? void 0 : elementOld.x) - oldSel.x;
+                    const relativeY = (elementOld === null || elementOld === void 0 ? void 0 : elementOld.y) - oldSel.y;
+                    // Jarak relatif baru (sesudah resize)
+                    const newX = resultSelection.x + relativeX * scaleX;
+                    const newY = resultSelection.y + relativeY * scaleY;
+                    const relativePoinst = ((_a = elementOld === null || elementOld === void 0 ? void 0 : elementOld.points) === null || _a === void 0 ? void 0 : _a.length) !== 0 &&
+                        ((_b = elementOld === null || elementOld === void 0 ? void 0 : elementOld.points) === null || _b === void 0 ? void 0 : _b.map((point) => {
+                            const { x, y } = point;
+                            const relativeX = x - oldSel.x;
+                            const relativeY = y - oldSel.y;
+                            return {
+                                x: resultSelection.x + relativeX * scaleX,
+                                y: resultSelection.y + relativeY * scaleY,
+                            };
+                        }));
+                    const newElement = {
+                        x: newX,
+                        y: newY,
+                        width: newWidth,
+                        height: newHeight,
+                        points: relativePoinst,
+                    };
+                    if (seats.length !== 0) {
+                        const seatsPositions = elementOld === null || elementOld === void 0 ? void 0 : elementOld.seatPositions;
+                        const openSpace = elementOld === null || elementOld === void 0 ? void 0 : elementOld.openSpace;
+                        if ((elementOld === null || elementOld === void 0 ? void 0 : elementOld.shape) === "table-seat-circle") {
+                            resizeSeatCircle({
+                                seatCount: elementOld === null || elementOld === void 0 ? void 0 : elementOld.seatCount,
+                                r: 10,
+                                openSpace,
+                                newElement,
+                                seats,
+                                seatGroup,
+                            });
+                        }
+                        else if ((elementOld === null || elementOld === void 0 ? void 0 : elementOld.shape) === "table-seat-square") {
+                            resizeSeatSquare({
+                                seatsPositions,
+                                r: 10,
+                                openSpace,
+                                newElement,
+                                seats,
+                                seatGroup,
+                            });
+                        }
+                    }
+                    applyResizeToSvgElement(element, g, newElement);
+                });
+            };
+            if (downAtResizePositionAndHasSelectionBox)
+                onResizeSelectionBox(ev);
+            //SELECTION BOX MOVE
+            const onMoveSelectionBox = () => {
+                var _a, _b;
+                console.log("move selection box");
+                const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
+                const allDataRealSelection = (_b = [
+                    ...componentsState,
+                    ...extraComponentsState,
+                ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
+                allDataRealSelection.forEach((item) => {
+                    const { g } = getAttributeElement(svg, item.id);
+                    const newX = pos.x - x;
+                    const newY = pos.y - y;
+                    g.setAttribute("transform", `translate(${item.x + newX}, ${item.y + newY})`);
+                });
+                const newX = pos.x - x;
+                const newY = pos.y - y;
+                updateSelectionBox(svg, {
+                    x: (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.x) + newX,
+                    y: (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.y) + newY,
+                    width: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.width,
+                    height: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.height,
+                });
+            };
+            if (downOutResizePositionAndInSelectionBox && !isRotateSelectionBox)
+                onMoveSelectionBox();
+            // MAKING SELECTION BOX MOVE
+            const onMakeSelectionBox = (ev) => {
+                var _a, _b;
+                console.log("lagi bikin selection box");
+                const svgSize = svg.getBoundingClientRect();
+                let selectionBoxGhost = svg.querySelector("#selection-box-ghost");
+                const selX = Math.min(pos.x, x);
+                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));
+                // FIND ALL COMPONENTS INSIDE SELECTION BOX
+                const allGroups = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("g[data-id]");
+                const selLeft = selX;
+                const selTop = selY;
+                const selectedIds = [...allGroups]
+                    .map((g) => JSON === null || JSON === void 0 ? void 0 : JSON.parse((g === null || g === void 0 ? void 0 : g.getAttribute("data-id")) || "{}"))
+                    .filter((d) => {
+                    const { g, element } = getAttributeElement(svg, d);
+                    const box = getGlobalBBox(svg, element);
+                    // console.log(
+                    //   box.x < selLeft + selW,
+                    //   "x",
+                    //   box.x + box.width > selLeft,
+                    //   "x2",
+                    //   box.y < selTop + selH,
+                    //   "y",
+                    //   box.y + box.height > selTop,
+                    //   "y2"
+                    // );
+                    return ((box === null || box === void 0 ? void 0 : box.x) < selLeft + selW &&
+                        (box === null || box === void 0 ? void 0 : box.x) + box.width > selLeft &&
+                        (box === null || box === void 0 ? void 0 : box.y) < selTop + selH &&
+                        (box === null || box === void 0 ? void 0 : box.y) + box.height > selTop);
+                })
+                    .map((d) => `${d}`);
+                if (selectedIds.length === 0)
+                    return;
+                const selectedComps = (_b = [...componentsState, ...extraComponentsState]
+                    .filter((c) => selectedIds.map(String).includes(String(c.id)))) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    const { g } = getAttributeElement(svg, item.id);
+                    const { x, y } = getTranslate(g);
+                    const box = getGlobalBBox(svg, g);
+                    return Object.assign(Object.assign({}, item), { 
+                        // x: box.x,
+                        // y: box.y,
+                        width: box.width, height: box.height });
+                });
+                dataElementSelectionGroupRef.current = selectedComps;
+            };
+            if (downBeforeHasSelectionBox)
+                onMakeSelectionBox(ev);
+            // CREATE GHOST ELEMENT ---
+            const onDrawNewElements = toolElement.includes(activeTool) && isCreateElementRef.current;
+            if (onDrawNewElements) {
+                const ghost = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#ghost-element-create");
+                if (!ghost)
+                    return;
+                const data = JSON.parse(ghost.getAttribute("data-table") || "{}");
+                const { x: ox, y: oy } = data;
+                // ---- HITUNG RECT BARU ----
+                const x1 = Math.min(ox, pos.x);
+                const y1 = Math.min(oy, pos.y);
+                const x2 = Math.max(ox, pos.x);
+                const y2 = Math.max(oy, pos.y);
+                const newX = x1;
+                const newY = y1;
+                const newW = x2 - x1;
+                const newH = y2 - y1;
+                // ---- RECT ----
+                if (["square", "table-seat-circle"].includes(activeTool)) {
+                    ghost.setAttribute("x", String(newX));
+                    ghost.setAttribute("y", String(newY));
+                    ghost.setAttribute("width", String(newW));
+                    ghost.setAttribute("height", String(newH));
+                }
+                // ---- CIRCLE (ambil dari bounding box) ----
+                if (activeTool === "circle") {
+                    const cx = newX + newW / 2;
+                    const cy = newY + newH / 2;
+                    const r = Math.min(newW, newH) / 2;
+                    ghost.setAttribute("cx", String(cx));
+                    ghost.setAttribute("cy", String(cy));
+                    ghost.setAttribute("r", String(r));
+                }
+                // ---- UPDATE DATA TABLE ----
+                ghost.setAttribute("data-table", JSON.stringify(Object.assign(Object.assign({}, data), { x: newX, y: newY, width: newW, height: newH })));
+            }
+            // RESIZE GHOST SINGLE ELEMENT ---
+            const onResize = (ev) => {
+                var _a, _b;
+                console.log("lagi resize single element");
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const svg = svgRef.current;
+                console.log({ svg, activeId });
+                const { g, element, inner, seats, seatGroup } = getAttributeElement(svg, activeId);
+                const elementSelect = {
+                    x: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x,
+                    y: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y,
+                    width: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width,
+                    height: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height,
+                    seatPositions: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.seatPositions,
+                    seatCount: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.seatCount,
+                    openSpace: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.openSpace,
+                    points: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points,
+                };
+                const oldSel = {
+                    x: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.x,
+                    y: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.y,
+                    width: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.width,
+                    height: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.height,
+                };
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                const resultSelection = resizeBox({
+                    box: oldSel,
+                    dx,
+                    dy,
+                    rotate: 0,
+                    handle: resizeSide,
+                });
+                updateSelectionBox(svg, resultSelection, activeId);
+                const scaleX = resultSelection.width / oldSel.width;
+                const scaleY = resultSelection.height / oldSel.height;
+                const newWidth = elementSelect.width * scaleX;
+                const newHeight = elementSelect.height * scaleY;
+                // Jarak relatif element dari pojok kiri atas selection (sebelum resize)
+                const relativeX = elementSelect.x - oldSel.x;
+                const relativeY = elementSelect.y - oldSel.y;
+                // Jarak relatif baru (sesudah resize)
+                const newX = resultSelection.x + relativeX * scaleX;
+                const newY = resultSelection.y + relativeY * scaleY;
+                const relativePoinst = ((_a = elementSelect === null || elementSelect === void 0 ? void 0 : elementSelect.points) === null || _a === void 0 ? void 0 : _a.length) !== 0 &&
+                    ((_b = elementSelect === null || elementSelect === void 0 ? void 0 : elementSelect.points) === null || _b === void 0 ? void 0 : _b.map((point) => {
+                        const { x, y } = point;
+                        const relativeX = x - oldSel.x;
+                        const relativeY = y - oldSel.y;
+                        return {
+                            x: resultSelection.x + relativeX * scaleX,
+                            y: resultSelection.y + relativeY * scaleY,
+                        };
+                    }));
+                const newElement = {
+                    x: newX,
+                    y: newY,
+                    width: newWidth,
+                    height: newHeight,
+                    points: relativePoinst,
+                };
+                if (seats.length !== 0) {
+                    if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-circle") {
+                        resizeSeatCircle({
+                            seatCount: elementSelect === null || elementSelect === void 0 ? void 0 : elementSelect.seatCount,
+                            r: 10,
+                            openSpace: elementSelect === null || elementSelect === void 0 ? void 0 : elementSelect.openSpace,
+                            newElement,
+                            seats,
+                            seatGroup,
+                        });
+                    }
+                    else if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-square") {
+                        resizeSeatSquare({
+                            seatsPositions: elementSelect.seatPositions,
+                            r: 10,
+                            newElement,
+                            openSpace: elementSelect.openSpace,
+                            seats,
+                            seatGroup,
+                        });
+                    }
+                }
+                applyResizeToSvgElement(element, g, newElement);
+                isResizeRef.current = true;
+            };
+            // const hasSelectedOneElement =
+            //   !isEmpty(selectedComponent) &&
+            //   onResizeSelectionRef.current &&
+            //   downAtResizePosition;
+            if (!isEmpty(selectedComponent) && isMightResizeElement)
+                onResize(ev);
+            //ROTATE
+            const onRotate = (ev) => {
+                console.log("rotate single element");
+                const svg = svgRef.current;
+                if (!svg || !selectedComponent)
+                    return;
+                const lineHelper = svg.querySelector("#line-help");
+                const circleHelper = svg.querySelector("#circle-help");
+                const { inner, g } = getAttributeElement(svg, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
+                if (!inner || !g)
+                    return;
+                // mouse → SVG space
+                // 🔴 GLOBAL BBOX (INI KUNCI)
+                const bbox = getGlobalBBox(svg, inner);
+                const boxSelection = getGlobalBBox(svg, g);
+                if (!bbox)
+                    return;
+                const cx = bbox.x + bbox.width / 2;
+                const cy = bbox.y + bbox.height / 2;
+                // vector awal & sekarang (GLOBAL)
+                const dx0 = x - cx;
+                const dy0 = y - cy;
+                const dx = pos.x - cx;
+                const dy = pos.y - cy;
+                const startAngle = Math.atan2(dy0, dx0);
+                const currentAngle = Math.atan2(dy, dx);
+                const newAngle = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.rotation) +
+                    ((currentAngle - startAngle) * 180) / Math.PI;
+                // helper line
+                console.log({ selectedLines }, "haduuuhh");
+                const centerX = selectedLines.width / 2;
+                const centerY = selectedLines.height / 2;
+                const angle = (0 * Math.PI) / 180;
+                const cos = Math.cos(angle);
+                const sin = Math.sin(angle);
+                // GLOBAL → LOCAL
+                const localDx = dx * cos + dy * sin;
+                const localDy = -dx * sin + dy * cos;
+                // helper (LOCAL SPACE)
+                const x2 = centerX + localDx;
+                const y2 = centerY + localDy;
+                console.log({ centerX, centerY, localDx, localDy });
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("x1", `${centerX}`);
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("y1", `${centerY}`);
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("x2", `${x2}`);
+                lineHelper === null || lineHelper === void 0 ? void 0 : lineHelper.setAttribute("y2", `${y2}`);
+                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)`);
+                // stabilize translate
+                const { tx, ty } = selectedComponent.shape === "polygon"
+                    ? stabilizeTranslateOnRotate({
+                        points: selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.points,
+                        oldAngle: selectedComponent.rotation,
+                        newAngle,
+                        tx: selectedComponent.x,
+                        ty: selectedComponent.y,
+                    })
+                    : stabilizeRotation(selectedComponent.x, selectedComponent.y, selectedComponent.width, selectedComponent.height, selectedComponent.rotation, newAngle);
+                g.setAttribute("transform", `translate(${tx}, ${ty})`);
+                ghostRotateElement.current = newAngle;
+                updateSelectionBox(svg, boxSelection, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, true);
+            };
+            if (targetRotate && !isRotateSelectionBox)
+                onRotate(ev);
+            const onMove = (ev) => {
+                console.log("movv");
+                // const selectionLines = svg.querySelector("#selection-lines");
+                const dx = ev.clientX - startX;
+                const dy = ev.clientY - startY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                //  onPanning(ev);
+                if (!hasMoved && distance > 0) {
+                    // only move ghost if the mouse has moved more than 5 pixels
+                    hasMoved = true;
+                }
+                const newX = pos.x - offset.x;
+                const newY = pos.y - offset.y;
+                // let activeId = JSON.parse(targetGroup?.getAttribute("data-id") || "{}");
+                const isMatchWithSelection = activeId === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
+                const { g } = getAttributeElement(svg, activeId);
+                console.log({ activeId });
+                g === null || g === void 0 ? void 0 : g.setAttribute("transform", `translate(${newX}, ${newY})`);
+                if (isMatchWithSelection) {
+                    const boxSelection = getGlobalBBox(svg, g);
+                    updateSelectionBox(svg, boxSelection, activeId);
+                }
+            };
+            const moveSingleElement = (isMightMove &&
+                !(!isEmpty(selectedComponent) && !isMightResizeElement) &&
+                !targetRotate) ||
+                (isMightMoveOneElementSelection && !isMightResizeElement) ||
+                (isMightMove && !isEmpty(selectedComponent) && !isMightResizeElement);
+            if (moveSingleElement) {
+                onMove(ev);
+            }
+        };
+        const pointerHandleUp = (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            //POLYGON RESIZE
+            if (targetSelection) {
+                console.log("KLIK UP SELECTION");
+                //show
+                dispatch({ type: "panel/setShow", payload: true });
+            }
+            if (targetPointPolygon && targetGroup) {
+                console.log("KLIK UP POINT POLYGON");
+                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,
+                });
+                selectionLinesRef.current = newDataComponent;
+            }
+            //POLYGON
+            const isInitialPolyGon = activeTool === "polygon" && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
+            if (isInitialPolyGon) {
+                console.log("Create polygon");
+                const closing = isClosingPolygon(x, y, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points);
+                const newCoord = closing
+                    ? {
+                        x: (_a = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points[0]) === null || _a === void 0 ? void 0 : _a.x,
+                        y: (_b = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points[0]) === null || _b === void 0 ? void 0 : _b.y,
+                    }
+                    : { x, y };
+                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, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
+                    const { height, width } = getGlobalBBox(svg, inner);
+                    isOnMakePolygonRef.current = false;
+                    setSelectedComponent(null);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: null,
+                    });
+                    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");
+                    // polyline?.remove();
+                    console.log({ polyline });
+                    (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
+                }
+                else {
+                    setSelectedComponent(newPoints);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: newPoints,
+                    });
+                    polygonElementRef.current = newPoints;
+                }
+            }
+            // ROTATE
+            if (targetRotate && !isRotateSelectionBox) {
+                console.log("KLIK UP ROTATE");
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const { g, inner, element } = getAttributeElement(svg, activeId);
+                const boxLines = getGlobalBBox(svg, g);
+                const findById = [...componentsState, ...extraComponentsState].find((c) => c.id === activeId);
+                const { x, y } = getTranslate(g);
+                const newDataComponent = Object.assign(Object.assign({}, findById), { x,
+                    y, rotation: ghostRotateElement.current });
+                const boxSelection = Object.assign(Object.assign(Object.assign({ 
+                    // x,
+                    // y,
+                    // width,
+                    // height,
+                    // rotation: ghostRotateElement.current,
+                    shape: "selection-box", id: `${Date.now()}` }, findById), boxLines), { rotation: 0 });
+                if (boxLines)
+                    setSelectedLines(boxSelection);
+                updateComponentAttribute(newDataComponent);
+                setSelectedComponent(newDataComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newDataComponent,
+                });
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: false });
+            }
+            //CREATE NEW ELEMENT
+            if (toolElement.includes(activeTool) && isCreateElementRef.current) {
+                console.log("CREATE new element");
+                const ghostElementNew = (_g = svgRef.current) === null || _g === void 0 ? void 0 : _g.querySelector("#ghost-element-create");
+                if (!ghostElementNew)
+                    return;
+                const dataOriginal = JSON.parse(ghostElementNew.getAttribute("data-table") || "{}");
+                const newComponent = Object.assign(Object.assign({ id: `${Date.now()}` }, dataOriginal), { seatCount: 4 });
+                const newExtraComponent = [...extraComponentsState, newComponent];
+                //ADD TO REDUX
+                setExtraComponentsState(newExtraComponent);
+                // setComponentsState(newComponentState);
+                addComponents(newComponent);
+                // syncFromLocalToRedux(newComponentState);
+                //REMOVE GHOST ELEMENT
+                (_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;
+            const idDataset = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.dataset.id;
+            const isSelectElement = !hasMoved &&
+                !releaseGroupRef.current &&
+                !targetRotate &&
+                !hasSelectedOneElement &&
+                idDataset &&
+                activeTool === "select";
+            if (isSelectElement) {
+                //KLIK UP
+                console.log("KLIK UP");
+                const findById = [...componentsState, ...extraComponentsState].find((component) => component.id === idDataset);
+                console.log({ findById });
+                if (!findById) {
+                    return;
+                }
+                const { g } = getAttributeElement(svg, idDataset);
+                if (shiftActive) {
+                    const allElementSelectionGroup = dataElementSelectionGroupRef.current;
+                    // HITUNG BOUNDING BOX
+                    let xs = [];
+                    let ys = [];
+                    let x2 = [];
+                    let y2 = [];
+                    allElementSelectionGroup.forEach((element) => {
+                        const activeId = element.id;
+                        const { g } = getAttributeElement(svg, activeId);
+                        const { x, y, width, height } = getGlobalBBox(svg, g);
+                        xs.push(x);
+                        ys.push(y);
+                        x2.push(x + width);
+                        y2.push(y + height);
+                    });
+                    const selectionBox = {
+                        x: Math.min(...xs),
+                        y: Math.min(...ys),
+                        width: Math.max(...x2) - Math.min(...xs),
+                        height: Math.max(...y2) - Math.min(...ys),
+                        stroke: "red",
+                        shape: "selection-box",
+                        fill: "transparent",
+                        id: `${Date.now()}`,
+                        rotation: 0,
+                    };
+                    selectionLinesRef.current = selectionBox;
+                    setSelectedLines(selectionBox);
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: allElementSelectionGroup,
+                    });
+                    setSelectedComponent(null);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: null,
+                    });
+                }
+                else {
+                    console.log("SELECT SINGLE ELEMENT");
+                    dataElementSelectionGroupRef.current = [];
+                    const boxGroup = getGlobalBBox(svg, g);
+                    let boxSelection = Object.assign(Object.assign(Object.assign({}, findById), boxGroup), { 
+                        // x,
+                        // y,
+                        // width,
+                        // height: height ,
+                        // width,
+                        // height,
+                        // x:boxGroup.x,
+                        // y:boxGroup.y,
+                        shape: "selection-box", rotation: 0 });
+                    console.log({ boxSelection });
+                    // if (findById?.shape === "polygon") {
+                    //   const boxGroup = getGlobalBBox(svg, g);
+                    //   boxSelection = {
+                    //     ...boxSelection,
+                    //     ...(boxGroup ? { x: boxGroup.x } : {}),
+                    //     ...(boxGroup ? { y: boxGroup.y } : {}),
+                    //     ...(boxGroup ? { width: boxGroup.width } : {}),
+                    //     ...(boxGroup ? { height: boxGroup.height } : {}),
+                    //     shape: "selection-box",
+                    //   };
+                    // }
+                    if ((boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.width) &&
+                        (boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.height)) {
+                        console.log({ boxSelection });
+                        setSelectedLines(boxSelection);
+                        setSelectedComponent(findById);
+                        dispatch({
+                            type: "panel/setSelectedComponent",
+                            payload: findById,
+                        });
+                        selectionLinesRef.current = boxSelection;
+                    }
+                }
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: true });
+            }
+            //UPDATE DATASET TO STATE IF RESIZE
+            if (isMightResizeElement) {
+                console.log("KLIK UP RESIZE SINGLE ELEMENT");
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const svg = svgRef.current;
+                const { g, element, points } = getAttributeElement(svg, activeId);
+                const selectionBox = getGlobalBBox(svg, g);
+                const { width, height } = getSvgElementSize(element);
+                const { x, y } = getTranslate(g);
+                const newSelectedComponent = Object.assign(Object.assign({}, selectedComponent), { x: x, y: y, width: width, height: height, points: points });
+                const newSelection = Object.assign({ shape: "selection-box", id: `${Date.now()}` }, selectionBox);
+                setSelectedLines(newSelection);
+                // dragGhostRef.current = false;
+                setSelectedComponent(newSelectedComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newSelectedComponent,
+                });
+                updateComponentAttribute(newSelectedComponent);
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: false });
+                // isResizeRef.current = false;
+            }
+            //MAKING SELECTION BOX UP
+            const isMakingSelectionBoxUp = downBeforeHasSelectionBox && activeTool === "select";
+            if (isMakingSelectionBoxUp
+            // &&
+            // !hadSelectionRef.current &&
+            // !isResizeSelectionRef.current
+            ) {
+                console.log("MAKING SELECTION BOX UP");
+                const allElementSelectionGroup = dataElementSelectionGroupRef.current;
+                let xs = [];
+                let ys = [];
+                let x2 = [];
+                let y2 = [];
+                allElementSelectionGroup.forEach((element) => {
+                    const activeId = element.id;
+                    const { g, inner, element: el } = getAttributeElement(svg, activeId);
+                    const { x, y, width, height } = getGlobalBBox(svg, g);
+                    xs.push(x);
+                    ys.push(y);
+                    x2.push(x + width);
+                    y2.push(y + height);
+                });
+                const selectionBox = {
+                    x: Math.min(...xs),
+                    y: Math.min(...ys),
+                    width: Math.max(...x2) - Math.min(...xs),
+                    height: Math.max(...y2) - Math.min(...ys),
+                    stroke: "red",
+                    shape: "selection-box",
+                    fill: "transparent",
+                    id: `${Date.now()}`,
+                    rotation: 0,
+                };
+                function hasInvalidNumber(obj) {
+                    return Object.values(obj).some((v) => typeof v === "number" && !Number.isFinite(v));
+                }
+                if (!hasInvalidNumber(selectionBox)) {
+                    selectionLinesRef.current = selectionBox;
+                    setSelectedLines(selectionBox);
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: allElementSelectionGroup,
+                    });
+                }
+                setSelectedComponent(null);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: null,
+                });
+                rotationSelectionRef.current = 0;
+                (_k = (_j = svgRef.current) === null || _j === void 0 ? void 0 : _j.querySelectorAll("#selection-box-ghost")) === null || _k === void 0 ? void 0 : _k.forEach((el) => el.remove());
+            }
+            //RESIZE SELECTION BOX UP
+            if (downAtResizePositionAndHasSelectionBox || isRotateSelectionBox) {
+                console.log("Resize selection and rotate selection");
+                const selectionLines = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelector("#selection-lines");
+                isResizeSelectionRef.current = false;
+                const results = (_m = dataElementSelectionGroupRef.current) === null || _m === void 0 ? void 0 : _m.map((item) => {
+                    const { g, element, inner, points } = getAttributeElement(svg, item.id);
+                    const { x, y } = getTranslate(g);
+                    const { width, height } = getSvgElementSize(element);
+                    const rotate = getRotation(inner.transform.baseVal);
+                    const selectionBox = getGlobalBBox(svg, g);
+                    console.log({ points });
+                    const newDataComponent = Object.assign(Object.assign({}, item), { points,
+                        x,
+                        y,
+                        width,
+                        height, rotation: rotate });
+                    const newDataSelection = Object.assign(Object.assign({}, newDataComponent), { x: selectionBox.x, y: selectionBox.y, width: selectionBox.width, height: selectionBox.height, shape: "selection-box", id: `${Date.now()}`, rotate: 0 });
+                    return {
+                        newDataComponent,
+                        newDataSelection,
+                    };
+                });
+                const newDataComponent = results.map((r) => r.newDataComponent);
+                const dataSelection = results.map((r) => r.newDataSelection);
+                // const currentRotation = getRotation(
+                //   (selectionLines?.children[0] as SVGGraphicsElement)?.transform
+                //     ?.baseVal
+                // );
+                // rotationSelectionRef.current = currentRotation;
+                const sizeSelection = getSvgElementSize((_o = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _o === void 0 ? void 0 : _o.children[0]);
+                // const newBoxSelection = getGlobalBBox(svg, selectionLines);
+                updateComponentsAttribute(newDataComponent);
+                const newDataSelection = {
+                    x: Math.min(...dataSelection.map((d) => d.x)),
+                    y: Math.min(...dataSelection.map((d) => d.y)),
+                    width: Math.max(...dataSelection.map((d) => d.x + d.width)) -
+                        Math.min(...dataSelection.map((d) => d.x)),
+                    height: Math.max(...dataSelection.map((d) => d.y + d.height)) -
+                        Math.min(...dataSelection.map((d) => d.y)),
+                    shape: "selection-box",
+                    id: `${Date.now()}`,
+                };
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: newDataComponent,
+                });
+                setSelectedComponent(null);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: null,
+                });
+                setSelectedLines(newDataSelection);
+                dataElementSelectionGroupRef.current = newDataComponent;
+                // // remove ghost element
+                // svgRef.current
+                //   ?.querySelectorAll("#ghost-element-has-selection")
+                //   .forEach((el) => el.remove());
+                hadSelectionRef.current = false;
+            }
+            //MOVE SELECTION BOX UP
+            if (downOutResizePositionAndInSelectionBox &&
+                !shiftActive &&
+                !isRotateSelectionBox) {
+                console.log("MOVE SELECTION BOX UP");
+                const selectionLines = (_p = svgRef.current) === null || _p === void 0 ? void 0 : _p.querySelector("#selection-lines");
+                isResizeSelectionRef.current = false;
+                const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
+                    const { g, element, inner } = getAttributeElement(svg, item.id);
+                    const { x, y } = getTranslate(g);
+                    const getBBox = getGlobalBBox(svg, g);
+                    const findComponent = [
+                        ...componentsState,
+                        ...extraComponentsState,
+                    ].find((c) => c.id === item.id);
+                    const newDataComponent = Object.assign(Object.assign({}, findComponent), { x,
+                        y });
+                    const newDataSelection = Object.assign({}, getBBox);
+                    return {
+                        newDataComponent,
+                        newDataSelection,
+                    };
+                });
+                const newDataComponent = results.map((r) => r.newDataComponent);
+                const dataSelection = results.map((r) => r.newDataSelection);
+                const newSelection = {
+                    x: Math.min(...dataSelection.map((d) => d.x)),
+                    y: Math.min(...dataSelection.map((d) => d.y)),
+                    width: Math.max(...dataSelection.map((d) => d.x + d.width)) -
+                        Math.min(...dataSelection.map((d) => d.x)),
+                    height: Math.max(...dataSelection.map((d) => d.y + d.height)) -
+                        Math.min(...dataSelection.map((d) => d.y)),
+                };
+                updateComponentsAttribute(newDataComponent);
+                const newDataSelection = Object.assign(Object.assign({}, newSelection), { shape: "selection-box", id: `${Date.now()}-from-move`, rotation: 0 });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: newDataComponent,
+                });
+                setSelectedComponent(null);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: null,
+                });
+                setSelectedLines(newDataSelection);
+                // if (newDataSelection?.height?.id) {
+                //   newDataSelection.height = newDataSelection.height.id;
+                // }
+                // if (newDataSelection?.x) {
+                //   setSelectedLines(newDataSelection);
+                // }
+                dataElementSelectionGroupRef.current = newDataComponent;
+                hadSelectionRef.current = false;
+            }
+            //DELETE GHOST ELEMENT BISA MEMBU
+            (_r = svgRef.current) === null || _r === void 0 ? void 0 : _r.querySelectorAll("#ghost-element").forEach((el) => el.remove());
+            dataSetGhost.current = null;
+            //UPDATE DATASET TO STATE IF MOVEk
+            // if (releaseGroupRef.current) return;
+            if ((isMightMove &&
+                !isMakingSelectionBoxUp &&
+                !isSelectElement &&
+                !isMightResizeElement) ||
+                isMightMoveOneElementSelection) {
+                console.log("MOVE ONE ELEMENT");
+                const findData = [...componentsState, ...extraComponentsState].find((item) => item.id == activeId);
+                const { g } = getAttributeElement(svg, activeId);
+                const bbox = getGlobalBBox(svg, g);
+                const bboxSelection = getTranslate(g);
+                const updateComponent = Object.assign(Object.assign({}, findData), { x: bboxSelection === null || bboxSelection === void 0 ? void 0 : bboxSelection.x, y: bboxSelection === null || bboxSelection === void 0 ? void 0 : bboxSelection.y });
+                const selectionLines = Object.assign(Object.assign(Object.assign({}, selectedLines), bbox), { shape: "selection-box" });
+                if (findData) {
+                    if (isSingleSelection) {
+                        setSelectedLines(selectionLines);
+                        setSelectedComponent(updateComponent);
+                        dispatch({
+                            type: "panel/updateSelectedComponent",
+                            payload: updateComponent,
+                        });
+                    }
+                    updateComponentAttribute(updateComponent);
+                }
+            }
+            window.removeEventListener("pointermove", pointerHandleMove);
+            window.removeEventListener("pointerup", pointerHandleUp);
+        };
+        window.addEventListener("pointermove", pointerHandleMove);
+        window.addEventListener("pointerup", pointerHandleUp);
     };
-    const [touch, setTouch] = useState(false);
-    const onTouchStartLine = () => {
-        setTouch(true);
-    };
-    const onTouchEndLine = () => {
-        setTouch(false);
+    const handlePointerMove = (e) => {
+        const svg = svgRef.current;
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const pos = pt.matrixTransform(svg.getScreenCTM().inverse());
+        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 =
+            //   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
+        }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), touch && _jsx(Button, { onClick: () => setTouch(false), children: "Stop Touch" }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 0.1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: [scale !== 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
-                                    width: "100%",
-                                    height: "100%",
-                                }, contentStyle: {
-                                    width: "20000px", height: "20000px"
-                                }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", 
-                                    // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
-                                    // className="h-screen"
-                                    onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, 
-                                    // onMouseEnter={handleMouseEnter}
-                                    // onMouseUp={handleEnd}
-                                    onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, onClick: (e) => {
-                                        e.stopPropagation();
-                                        handleMouseClick(e);
-                                    }, 
-                                    // onMouseLeave={handleMouseLeave}
-                                    xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
+                        // limitToBounds={true}
+                        panning: {
+                            disabled: [
+                                "node",
+                                "select",
+                                "square",
+                                "circle",
+                                "table-seat-circle",
+                            ].includes(activeTool),
+                        }, 
+                        // centerZoomedOut={true}
+                        // onTransformed={handleTransformed}
+                        minScale: 0.1, maxScale: 1000, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsxs(TransformComponent, { wrapperStyle: {
+                                width: "100%",
+                                height: "100%",
+                            }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: [isLoading && (_jsx("div", { className: "absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: "Loading..." })), _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
                                         background: backgroundColor,
                                         display: "block",
                                         cursor: activeTool === "ruler" ? "crosshair" : "auto",
                                         touchAction: "none",
-                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
+                                        pointerEvents: "all",
+                                        userSelect: "none",
+                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [
+                                                ...extraComponentsState,
+                                                ...componentsState,
+                                                polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
+                                            ], style: {
                                                 cursor: getCursorStyle(),
-                                            }, 
-                                            // onClick={handleSelectComponent}
-                                            onMouseDown: handleMouseDown, 
-                                            // onMouseUp={handleMouseUp}
-                                            // onBlur={handleUnSelectComponent}
-                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: i * 10 * scale, y1: 0, x2: i * 10 * scale, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10 * scale, x2: widthBoard, y2: i * 10 * scale }, `h-${i}`)))] }))] }) })] })] })] }));
+                                            }, selectedComponent: selectedComponent, selectionLines: selectedLines, activeTool: activeTool }), activeTool === "polygon" && (_jsx("polyline", { id: "polyline-helper", stroke: "#4a90e2", fill: "transparent", strokeWidth: 2 })), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: i * 10 * scale, y1: 0, x2: i * 10 * scale, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10 * scale, x2: widthBoard, y2: i * 10 * scale }, `h-${i}`)))] }))] })] }) })] })] }));
 };
 export default BoardTemplate;