seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,1678 @@
+"use client";
+import React, { useEffect, useImperativeHandle, 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 { isEmpty, isPlainObject, isUndefined } from "lodash";
+import ModalPreview from "../../components/modal-preview";
+import LayerView from "../view-only-3";
+import { isEqual, debounce } from "lodash";
+import { ZoomIn, ZoomOut } from "lucide-react";
+import { Button, Radio } from "antd";
+import { getAttributeElement, getAttributeElements } from "./resize-element";
+import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
+const toolElement = ["square", "circle", "table-seat-circle"];
+const idSelectionBoxGhost = "selection-box-ghost";
+const nameShapeSelectionBoxGhost = "selection-box";
+const BoardTemplate = ({ refs, loadingRender }) => {
+    const dispatch = useAppDispatch();
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
+    const activeTool = useAppSelector((state) => state.tool.active);
+    const grid = useAppSelector((state) => state.tool.grid);
+    const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const transformRef = useRef(null);
+    const svgRef = useRef(null);
+    const containerRef = useRef(null);
+    const releaseGroupRef = useRef(false);
+    useImperativeHandle(refs, () => ({
+        svgRef: svgRef === null || svgRef === void 0 ? void 0 : svgRef.current,
+        transformRef: transformRef === null || transformRef === void 0 ? void 0 : transformRef.current,
+        containerRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current,
+    }));
+    const widthBoardRef = useRef(20000);
+    const heightBoardRef = useRef(20000);
+    const widthBoard = widthBoardRef.current;
+    const heightBoard = heightBoardRef.current;
+    const [scale, setScale] = useState(1);
+    const boardSizeRef = useRef({ width: 20000, height: 20000 });
+    const boardSize = boardSizeRef.current;
+    const minCoordsRef = useRef({ x: 0, y: 0 });
+    const minCoords = minCoordsRef.current;
+    const [hasInitialized, setHasInitialzed] = useState(false);
+    const [componentsState, setComponentsState] = useState([]);
+    const [extraComponentsState, setExtraComponentsState] = useState([]);
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const isSyncingFromRedux = useRef(false);
+    const isDragging = useRef(false);
+    const moveComponent = useRef(false);
+    const ghostRotateElement = useRef(0);
+    const isResizeRef = useRef(false);
+    const isResizeSelectionRef = useRef(false);
+    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
+    //SELECTION
+    const onMakeSelectionRef = useRef(false);
+    const onMoveSelectionBoxRef = useRef(false);
+    const dataElementSelectionGroupRef = useRef([]);
+    //polygon
+    const polygonElementRef = useRef([]);
+    const isOnMakePolygonRef = useRef(false);
+    const { components: componentsProps, extraComponents: extraComponentsProps, boundingBox, flagChange, updateBy, isShowTagType, } = useAppSelector((state) => state.board);
+    const { selectionLines } = useAppSelector((state) => state.panel);
+    const [selectedLines, setSelectedLines] = useState(null);
+    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, _b, _c, _d, _e, _f, _g;
+        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((_, i) => {
+            let values = _;
+            if (values === null || values === void 0 ? void 0 : values.shape) {
+                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 (i === componentsProps.length - 1) {
+                minX = minX > 10 ? minX - 10 : minX;
+                minY = minY > 10 ? minY - 10 : minY;
+                maxX = maxX + 10;
+                maxY = maxY + 10;
+            }
+        });
+        extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.forEach((values, i) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (values === null || values === void 0 ? void 0 : values.shape) {
+                minX = Math.min(minX, values.x - ((_a = values === null || values === void 0 ? void 0 : values.width) !== null && _a !== void 0 ? _a : 0));
+                minY = Math.min(minY, values.y - ((_b = values === null || values === void 0 ? void 0 : values.height) !== null && _b !== void 0 ? _b : 0));
+                maxX = Math.max(maxX, values.x + ((_c = values === null || values === void 0 ? void 0 : values.width) !== null && _c !== void 0 ? _c : 0));
+                maxY = Math.max(maxY, values.y + ((_d = values === null || values === void 0 ? void 0 : values.height) !== null && _d !== void 0 ? _d : 0));
+            }
+            if ((_e = values === null || values === void 0 ? void 0 : values.shape) === null || _e === void 0 ? void 0 : _e.includes("polygon")) {
+                minX = Math.min(minX, (_f = values === null || values === void 0 ? void 0 : values.points) === null || _f === void 0 ? void 0 : _f.reduce((min, point) => Math.min(min, point.x), Infinity));
+                minY = Math.min(minY, (_g = values === null || values === void 0 ? void 0 : values.points) === null || _g === void 0 ? void 0 : _g.reduce((min, point) => Math.min(min, point.y), Infinity));
+                maxX = Math.max(maxX, (_h = values === null || values === void 0 ? void 0 : values.points) === null || _h === void 0 ? void 0 : _h.reduce((max, point) => Math.max(max, point.x), -Infinity));
+                maxY = Math.max(maxY, (_j = values === null || values === void 0 ? void 0 : values.points) === null || _j === void 0 ? void 0 : _j.reduce((max, point) => Math.max(max, point.y), -Infinity));
+            }
+        });
+        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 (
+        //   extraComponentsProps?.length < 1 &&
+        //   ["background", "text"].includes(componentsProps?.[0]?.shape)
+        // ) {
+        //   minX = minX;
+        //   minY = minY;
+        //   maxX = maxX;
+        //   maxY = maxY;
+        // }
+        const hasBoundingBox = !isEmpty(boundingBox);
+        if (hasBoundingBox) {
+            minX = boundingBox.x;
+            minY = boundingBox.y;
+        }
+        if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
+            // console.log("initialized");
+            (_g = transformRef.current) === null || _g === void 0 ? void 0 : _g.setTransform(-minX, -minY, scale);
+            setHasInitialzed(true);
+        }
+    }, [componentsProps, extraComponentsProps]);
+    const queueUpdateComponents = (data) => {
+        dispatch({
+            type: "board/updateComponentsBulk",
+            payload: data,
+        });
+    };
+    const queueUpdateExtraComponents = (data) => {
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: data,
+        });
+    };
+    const debouncedSyncExtraComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: data,
+        });
+    }, 1000));
+    // Redux → Local
+    useEffect(() => {
+        if (flagChange && updateBy === "global") {
+            if (!isEqual(selectedComponentProps, selectedComponent)) {
+                isSyncingFromRedux.current = true;
+                setSelectedComponent(selectedComponentProps !== null && selectedComponentProps !== void 0 ? selectedComponentProps : []);
+                setSelectedLines(selectionLines);
+            }
+            if (!isEqual(componentsProps, componentsState)) {
+                isSyncingFromRedux.current = true;
+                setComponentsState(componentsProps !== null && componentsProps !== void 0 ? componentsProps : []);
+            }
+            if (!isEqual(extraComponentsProps, extraComponentsState)) {
+                isSyncingFromRedux.current = true;
+                setExtraComponentsState(extraComponentsProps !== null && extraComponentsProps !== void 0 ? extraComponentsProps : []);
+            }
+            dispatch({ type: "board/setFlagChange", payload: false });
+        }
+    }, [componentsProps, extraComponentsProps, selectedComponentProps]);
+    const updateComponentAttribute = (component) => {
+        if (!component)
+            return;
+        const updatedComponents = updateSingleComponent(componentsState, component, setComponentsState);
+        if (updatedComponents) {
+            dispatch({ type: "board/setUpdateBy", payload: "local" });
+            queueUpdateComponents(updatedComponents);
+        }
+        const updatedExtra = updateSingleComponent(extraComponentsState, component, setExtraComponentsState);
+        if (updatedExtra) {
+            dispatch({ type: "board/setUpdateBy", payload: "local" });
+            queueUpdateComponents(updatedExtra);
+        }
+    };
+    const updateComponentsAttribute = (components) => {
+        if (!components.length)
+            return;
+        const nextExtraComponents = updateManyComponents(extraComponentsState, components, setExtraComponentsState);
+        if (nextExtraComponents) {
+            queueUpdateComponents(nextExtraComponents);
+        }
+        const nextComponents = updateManyComponents(componentsState, components, setComponentsState);
+        if (nextComponents) {
+            queueUpdateComponents(nextComponents);
+        }
+        dispatch({ type: "board/setUpdateBy", payload: "local" });
+    };
+    const addComponents = (component) => {
+        const index = extraComponentsState.findIndex((c) => (c === null || c === void 0 ? void 0 : c.shape) === "bounding-box");
+        const nextExtraComponents = index !== -1
+            ? extraComponentsState.map((item, i) => i === index ? component : item)
+            : [...extraComponentsState, component];
+        setExtraComponentsState(nextExtraComponents);
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: nextExtraComponents,
+        });
+        dispatch({ type: "board/setUpdateBy", payload: "local" });
+    };
+    const getSvgCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const point = svg.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: transformed.x, y: transformed.y };
+    };
+    const getCursorStyle = () => {
+        if (activeTool === "select" && moveComponent.current) {
+            return "grabbing";
+        }
+        else if (activeTool === "select") {
+            return "grab";
+        }
+        else if (activeTool === "grab") {
+            return "grab";
+        }
+        else if (activeTool === "ruler") {
+            return "crosshair";
+        }
+    };
+    const handelZoomIn = () => {
+        var _a;
+        if (activeTool !== "grab") {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "grab",
+            });
+        }
+        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomIn();
+    };
+    const handleZoomOut = () => {
+        var _a;
+        if (activeTool !== "grab") {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "grab",
+            });
+        }
+        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomOut();
+    };
+    const handleUnSelectComponent = () => {
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        setSelectedComponent(null);
+        setSelectedLines(null);
+        dispatch({ type: "panel/setShow", payload: false });
+        dataElementSelectionGroupRef.current = [];
+    };
+    const stillHoldShift = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        if (stillHoldShift.current && dataElementSelectionGroupRef.current) {
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "none");
+        }
+        if (!stillHoldShift.current && dataElementSelectionGroupRef.current) {
+            const selectionLines = (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#selection-lines");
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "all");
+        }
+    }, [stillHoldShift.current, dataElementSelectionGroupRef.current]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            var _a, _b;
+            // setPressedKey(e.key);
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#selection-lines");
+            if (e.key === "Shift") {
+                stillHoldShift.current = true;
+                selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "none");
+            }
+        };
+        const handleKeyUp = () => {
+            var _a;
+            const selectionLines = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#selection-lines");
+            stillHoldShift.current = false;
+            selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("pointer-events", "all");
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [dataElementSelectionGroupRef.current]);
+    const handlePointerDown = (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const shiftActive = e.shiftKey;
+        if (activeTool === "grab") {
+            return;
+        }
+        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;
+        const isInitialCreateBoundingBox = activeTool === "bounding-box";
+        const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
+        if (isInitialCreateElemente) {
+            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;
+        }
+        else if (isInitialCreateBoundingBox) {
+            const tables = createTableGhost({
+                x,
+                y,
+                width: 1,
+                height: 1,
+                fill: "transparent",
+                shape: activeTool,
+            });
+            (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.appendChild(tables);
+            isCreateElementRef.current = true;
+        }
+        else if (isInitialCreateText) {
+            const tables = createTableGhost({
+                x,
+                y,
+                width: 100 * scale,
+                height: 50 * scale,
+                fill: "#000000",
+                shape: activeTool,
+            });
+            (_c = svgRef.current) === null || _c === void 0 ? void 0 : _c.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) {
+            isRotatingRef.current = true;
+        }
+        const targetSelectionBox = e.target.closest("g[id='selection-lines']");
+        // RESIZE
+        const targetGroup = e.target.closest("g[data-id]");
+        const targetPointPolygon = e.target.closest("circle[data-point]");
+        // TARGET ELEMENT
+        let idTargetElement = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
+        const selectionTarget = (_e = (_d = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.replace("selection-", "");
+        const 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;
+        const { g } = getAttributeElement(svg, activeId);
+        if (targetGroup && shiftActive) {
+            const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
+            const currentSelection = (_f = dataElementSelectionGroupRef.current) !== null && _f !== void 0 ? _f : [];
+            const alreadySelected = currentSelection.some((comp) => comp.id == activeId);
+            let newSelection;
+            if (alreadySelected) {
+                newSelection = currentSelection.filter((comp) => comp.id != activeId);
+            }
+            else {
+                newSelection = [...currentSelection, findById];
+            }
+            dataElementSelectionGroupRef.current = newSelection;
+        }
+        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 = ((_g = dataElementSelectionGroupRef.current) === null || _g === void 0 ? void 0 : _g.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) {
+            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
+        if (downInSelectionBox) {
+            hadSelectionRef.current = true;
+        }
+        if (downOutSelectionBox) {
+            hadSelectionRef.current = false;
+            onMoveSelectionBoxRef.current = false;
+            handleUnSelectComponent();
+        }
+        if (downBeforeHasSelectionBox) {
+            // 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,
+            });
+            (_h = svgRef.current) === null || _h === void 0 ? void 0 : _h.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 &&
+            !isInitialCreateBoundingBox;
+        const downAtResizePositionAndHasSelectionBox = downAtResizePosition &&
+            hadSelectionBox &&
+            !isRotateSelectionBox &&
+            !isInitialCreateBoundingBox;
+        const isMightResizeElement = !isEmpty(selectedComponent) &&
+            downAtResizePosition &&
+            downAtResizePosition &&
+            !hadSelectionBox &&
+            !isInitialCreateBoundingBox;
+        const isMightMove = activeId &&
+            !targetPointPolygon &&
+            isInTargetElement &&
+            !isMightResizeElement &&
+            !isInitialCreateBoundingBox;
+        const isMightMoveOneElementSelection = isSingleSelection && !isMightResizeElement && !isInitialCreateBoundingBox;
+        if (downOutResizePositionAndInSelectionBox) {
+            onMoveSelectionBoxRef.current = true;
+        }
+        if (downAtResizePosition) {
+            onResizeSelectionRef.current = true;
+        }
+        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") {
+            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,
+            });
+            dispatch({
+                type: "panel/setSelectedGroup",
+                payload: null,
+            });
+            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;
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                const { 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;
+                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 = () => {
+                var _a, _b;
+                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,
+                    ...(lockBackground ? [] : 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, 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 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();
+            //SELECTION BOX MOVE
+            const onMoveSelectionBox = () => {
+                var _a, _b;
+                const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
+                const allDataRealSelection = (_b = [
+                    ...componentsState,
+                    ...(lockBackground ? [] : 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;
+                const selection = {
+                    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,
+                };
+                updateSelectionBox(svg, selection);
+                updateSelectionGuides(svg, selection, {
+                    vLeft: "v-left",
+                    vCenter: "v-center",
+                    vRight: "v-right",
+                    hTop: "h-top",
+                    hCenter: "h-center",
+                    hBottom: "h-bottom",
+                });
+            };
+            if (downOutResizePositionAndInSelectionBox && !isRotateSelectionBox)
+                onMoveSelectionBox();
+            // MAKING SELECTION BOX MOVE
+            const onMakeSelectionBox = (ev) => {
+                var _a, _b;
+                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 { element } = getAttributeElement(svg, d);
+                    const box = getGlobalBBox(svg, element);
+                    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,
+                    ...(lockBackground ? [] : 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);
+            const onCreateBoudingBox = () => {
+                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));
+            };
+            if (isInitialCreateBoundingBox) {
+                onCreateBoudingBox();
+            }
+            // CREATE GHOST ELEMENT ---
+            const onDrawNewElements = (toolElement.includes(activeTool) || activeTool === "bounding-box") &&
+                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", "bounding-box"].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 = () => {
+                var _a, _b;
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const svg = svgRef.current;
+                const { g, element, 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,
+                });
+                updateSelectionGuides(svg, resultSelection, {
+                    vLeft: "v-left",
+                    vCenter: "v-center",
+                    vRight: "v-right",
+                    hTop: "h-top",
+                    hCenter: "h-center",
+                    hBottom: "h-bottom",
+                });
+                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,
+                        });
+                    }
+                    else if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-half-square") {
+                        resizeSeatSide({
+                            seatsPositions: elementSelect.seatPositions,
+                            r: 10,
+                            newElement,
+                            openSpace: elementSelect.openSpace,
+                            seats,
+                            seatGroup,
+                        });
+                    }
+                    else if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-rect-square") {
+                        resizeSeatRectSquare({
+                            seatsPositions: elementSelect.seatPositions,
+                            r: 10,
+                            newElement,
+                            openSpace: elementSelect.openSpace,
+                            seats,
+                            seatGroup,
+                        });
+                    }
+                    else if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "table-seat-rect-circle") {
+                        resizeSeatRectCircle({
+                            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();
+            //ROTATE
+            const onRotate = () => {
+                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
+                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;
+                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})`);
+                updateSelectionGuides(svg, boxSelection, {
+                    vLeft: "v-left",
+                    vCenter: "v-center",
+                    vRight: "v-right",
+                    hTop: "h-top",
+                    hCenter: "h-center",
+                    hBottom: "h-bottom",
+                });
+                ghostRotateElement.current = newAngle;
+                updateSelectionBox(svg, boxSelection, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, true);
+            };
+            if (targetRotate && !isRotateSelectionBox)
+                onRotate();
+            const onMove = (ev) => {
+                // 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);
+                const boxSelection = getGlobalBBox(svg, g);
+                g === null || g === void 0 ? void 0 : g.setAttribute("transform", `translate(${newX}, ${newY})`);
+                updateSelectionGuides(svg, boxSelection, {
+                    vLeft: "v-left",
+                    vCenter: "v-center",
+                    vRight: "v-right",
+                    hTop: "h-top",
+                    hCenter: "h-center",
+                    hBottom: "h-bottom",
+                });
+                if (isMatchWithSelection) {
+                    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, _s;
+            updateSelectionGuides(svg, {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+            }, {
+                vLeft: "v-left",
+                vCenter: "v-center",
+                vRight: "v-right",
+                hTop: "h-top",
+                hCenter: "h-center",
+                hBottom: "h-bottom",
+            });
+            //POLYGON RESIZE
+            if (targetSelection) {
+                //show
+                dispatch({ type: "panel/setShow", payload: true });
+            }
+            if (targetPointPolygon && targetGroup) {
+                const { element } = getAttributeElement(svg, targetGroup.dataset.id);
+                const points = element === null || element === void 0 ? void 0 : element.getAttribute("points");
+                const pointsArray = pointsStringToArray(points);
+                const findById = [...componentsState, ...extraComponentsState].find((c) => c.id == targetGroup.dataset.id);
+                const newDataComponent = Object.assign(Object.assign({}, findById), { points: pointsArray });
+                updateComponentAttribute(newDataComponent);
+                setSelectedComponent(newDataComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newDataComponent,
+                });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null,
+                });
+            }
+            //POLYGON
+            const isInitialPolyGon = activeTool === "polygon" && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
+            if (isInitialPolyGon) {
+                const 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");
+                    (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
+                }
+                else {
+                    setSelectedComponent(newPoints);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: newPoints,
+                    });
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: null,
+                    });
+                    polygonElementRef.current = newPoints;
+                }
+            }
+            // ROTATE
+            if (targetRotate && !isRotateSelectionBox) {
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const { g } = 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({ shape: "selection-box", id: `${Date.now()}` }, findById), boxLines), { rotation: 0 });
+                if (boxLines)
+                    setSelectedLines(boxSelection);
+                updateComponentAttribute(newDataComponent);
+                setSelectedComponent(newDataComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newDataComponent,
+                });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null,
+                });
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: false });
+            }
+            //CREATE NEW ELEMENT
+            if (toolElement.includes(activeTool) && isCreateElementRef.current) {
+                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
+                const findById = [...componentsState, ...extraComponentsState].find((component) => component.id == idDataset);
+                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,
+                    };
+                    setSelectedLines(selectionBox);
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: allElementSelectionGroup,
+                    });
+                    setSelectedComponent(null);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: null,
+                    });
+                }
+                else {
+                    dataElementSelectionGroupRef.current = [];
+                    const boxGroup = getGlobalBBox(svg, g);
+                    let boxSelection = Object.assign(Object.assign(Object.assign({}, findById), boxGroup), { shape: "selection-box", rotation: 0 });
+                    if ((boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.width) && (boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.height)) {
+                        setSelectedLines(boxSelection);
+                        setSelectedComponent(findById);
+                        dispatch({
+                            type: "panel/setSelectedComponent",
+                            payload: findById,
+                        });
+                        dispatch({
+                            type: "panel/setSelectedGroup",
+                            payload: null,
+                        });
+                    }
+                }
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: true });
+            }
+            //UPDATE DATASET TO STATE IF RESIZE
+            if (isMightResizeElement) {
+                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,
+                });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: null,
+                });
+                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) {
+                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)) {
+                    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());
+                isCreateElementRef.current = false;
+            }
+            if (isInitialCreateBoundingBox) {
+                const ghost = svg.querySelector("#ghost-element-create");
+                const getBBox = getGlobalBBox(svg, ghost);
+                dispatch({
+                    type: "board/setBoundingBox",
+                    payload: Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "bounding-box", fill: "transparent" }),
+                });
+                (_m = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll("#ghost-element-create")) === null || _m === void 0 ? void 0 : _m.forEach((el) => el.remove());
+            }
+            if (isInitialCreateText) {
+                const ghost = svg.querySelector("#ghost-element-create");
+                const getBBox = getGlobalBBox(svg, ghost);
+                const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fill: "#000000", text: "Text", fontSize: 14 });
+                addComponents(text);
+                dispatch({
+                    type: "panel/setShow",
+                    payload: true,
+                });
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: text,
+                });
+                (_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
+                isCreateElementRef.current = false;
+            }
+            //RESIZE SELECTION BOX UP
+            if (downAtResizePositionAndHasSelectionBox || isRotateSelectionBox) {
+                isResizeSelectionRef.current = false;
+                const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.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);
+                    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);
+                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;
+                hadSelectionRef.current = false;
+            }
+            //MOVE SELECTION BOX UP
+            if (downOutResizePositionAndInSelectionBox &&
+                !shiftActive &&
+                !isRotateSelectionBox) {
+                isResizeSelectionRef.current = false;
+                const results = (_r = dataElementSelectionGroupRef.current) === null || _r === void 0 ? void 0 : _r.map((item) => {
+                    const { g } = 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);
+                dataElementSelectionGroupRef.current = newDataComponent;
+                hadSelectionRef.current = false;
+            }
+            //DELETE GHOST ELEMENT BISA MEMBU
+            (_s = svgRef.current) === null || _s === void 0 ? void 0 : _s.querySelectorAll("#ghost-element").forEach((el) => el.remove());
+            //UPDATE DATASET TO STATE IF MOVEk
+            // if (releaseGroupRef.current) return;
+            if ((isMightMove &&
+                !isMakingSelectionBoxUp &&
+                !isSelectElement &&
+                !isMightResizeElement) ||
+                isMightMoveOneElementSelection) {
+                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 positionRef = useRef({ x: 0, y: 0 });
+    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());
+        // const lineHorizontal = svg?.querySelector("#line-horizontal");
+        // const lineVertical = svg?.querySelector("#line-vertical");
+        // lineHorizontal?.setAttribute("x1", `${-10000}`);
+        // lineHorizontal?.setAttribute("x2", `${10000}`);
+        // lineHorizontal?.setAttribute("y1", `${pos.y}`);
+        // lineHorizontal?.setAttribute("y2", `${pos.y}`);
+        // lineVertical?.setAttribute("y1", `${-10000}`);
+        // lineVertical?.setAttribute("y2", `${10000}`);
+        // lineVertical?.setAttribute("x1", `${pos.x}`);
+        // lineVertical?.setAttribute("x2", `${pos.x}`);
+        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
+        }
+    };
+    const handleCheckPreview = (e) => {
+        const type = e.target.value;
+        if (type === "type-1") {
+            dispatch({
+                type: "board/setTagType",
+                payload: type,
+            });
+        }
+        if (type === "type-2") {
+            dispatch({
+                type: "board/setTagType",
+                payload: type,
+            });
+        }
+        if (type === "default") {
+            dispatch({
+                type: "board/setTagType",
+                payload: type,
+            });
+        }
+    };
+    return (<>
+      <ModalPreview>
+        <LayerView statusKey="status" loadingRender={loadingRender}/>
+        <div className="flex gap-2 mt-2">
+          <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
+            <Radio value="default">Default</Radio>
+            <Radio value="type-1">Type 1</Radio>
+            <Radio value="type-2">Type 2</Radio>
+          </Radio.Group>
+        </div>
+      </ModalPreview>
+      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
+        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
+          <div className="flex gap-2">
+            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
+            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
+          </div>
+        </div>
+        <TransformWrapper ref={transformRef} 
+    // limitToBounds={true}
+    panning={{
+            disabled: [
+                "node",
+                "select",
+                "square",
+                "circle",
+                "table-seat-circle",
+                "table-seat-square",
+                "bounding-box",
+            ].includes(activeTool),
+        }} 
+    // centerZoomedOut={true}
+    // onTransformed={handleTransformed}
+    minScale={0.1} // sangat kecil = bisa zoom out jauh
+     maxScale={1000} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
+          {/* {scale !== 1 && ( */}
+          {/* <div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10"> */}
+          {/* {renderMiniMap()} */}
+          {/* </div> */}
+          {/* )} */}
+          <TransformComponent wrapperStyle={{
+            width: "100%",
+            height: "100%",
+        }} contentStyle={{ width: boardSize.width, height: boardSize.height }}>
+            <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",
+            pointerEvents: "all",
+            userSelect: "none",
+        }}>
+              <Layers components={[
+            ...extraComponentsState,
+            ...componentsState,
+            polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
+            ...(!isEmpty(boundingBox) ? [boundingBox] : []),
+        ]} 
+    // style={{
+    //   cursor: getCursorStyle(),
+    // }}
+    selectedComponent={selectedComponent} selectionLines={selectedLines} activeTool={activeTool}/>
+              {/* <polygon
+          points={nodes.map((n) => `${n.x},${n.y}`).join(" ")}
+          fill="transparent"
+          stroke="blue"
+        /> */}
+              {/* Nodes */}
+              {/* {nodes.map((node, index) => (
+          <circle
+            key={index}
+            cx={node.x}
+            cy={node.y}
+            r={10}
+            fill="red"
+            onMouseDown={onTouchStartLine}
+            onTouchStart={onTouchStartLine}
+            onTouchEnd={onTouchEndLine}
+          />
+        ))} */}
+              {activeTool === "polygon" && (<polyline id="polyline-helper" stroke="#4a90e2" fill="transparent" strokeWidth={2}/>)}
+              {activeTool === "ruler" && (<>
+                  <g id="horizontal-ruler">
+                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
+                    <g stroke="#888" font-size="10" text-anchor="middle">
+                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
+                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
+                            <text x={i * 50} y="15">
+                              {i * 50}
+                            </text>
+                          </g>))}
+                    </g>
+                  </g>
+                  <g id="vertical-ruler">
+                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
+                    <g stroke="#888" font-size="10" text-anchor="middle">
+                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
+                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
+                            <text x="15" y={i * 50}>
+                              {i * 50}
+                            </text>
+                          </g>))}
+                    </g>
+                  </g>
+                </>)}
+              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
+                  {/* Vertical lines */}
+                  {Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (<line key={`v-${i}`} x1={i * 10 * scale} y1={0} x2={i * 10 * scale} y2={heightBoard / scale}/>))}
+
+                  {/* Horizontal lines */}
+                  {Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10 * scale} x2={widthBoard / scale} y2={i * 10 * scale}/>))}
+                </g>)}
+              <g id="selection-guides" stroke="#4A90E2" strokeWidth={1} pointerEvents="none">
+                {/* vertical */}
+                <line id="v-left"/>
+                <line id="v-center"/>
+                <line id="v-right"/>
+
+                {/* horizontal */}
+                <line id="h-top"/>
+                <line id="h-center"/>
+                <line id="h-bottom"/>
+              </g>
+            </svg>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </>);
+};
+export default BoardTemplate;