seat-editor 2.1.2 → 3.0.0

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

@@ -0,0 +1,2073 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+import Layers from "../../components/layer-v3";
+import { isEmpty, throttle } from "lodash";
+import ModalPreview from "../../components/modal-preview";
+import LayerView from "../view-only-2";
+import { isEqual, debounce } from "lodash";
+import { ZoomIn, ZoomOut } from "lucide-react";
+import { Button } from "antd";
+import { getAttributeElement, getAttributeElements } from "./resize-element";
+const EXPAND_THRESHOLD = 200;
+const EXPAND_AMOUNT = 1000;
+const toolElement = ["square", "circle", "table-seat-circle"];
+const idSelectionBoxGhost = "selection-box-ghost";
+const nameShapeSelectionBoxGhost = "selection-box";
+function matrixToXYWH({ x0, y0, w0, h0, scaleX, scaleY, a0x, a0y }) {
+    const widthReal = w0 * scaleX;
+    const heightReal = h0 * scaleY;
+    const xReal = a0x + (x0 - a0x) * scaleX;
+    const yReal = a0y + (y0 - a0y) * scaleY;
+    return { x: xReal, y: yReal, width: widthReal, height: heightReal };
+}
+const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
+    var _a;
+    const dispatch = useAppDispatch();
+    const theme = useAppSelector((state) => state.theme);
+    const transformRef = useRef(null);
+    const instance = (_a = transformRef === null || transformRef === void 0 ? void 0 : transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
+    const context = instance === null || instance === void 0 ? void 0 : instance.getContext();
+    const containerRef = useRef(null);
+    const releaseGroupRef = useRef(false);
+    const dragGhostRef = useRef(false);
+    const dataSetGhost = useRef(null);
+    const ghostRef = useRef(null);
+    const [widthBoard, setWidthBoard] = useState(20000);
+    const [heightBoard, setHeightBoard] = useState(20000);
+    const [panningGroup, setPanningGroup] = useState(false);
+    const svgRef = useRef(null);
+    const [shadowShape, setShadowShape] = useState([]);
+    const [startPoint, setStartPoint] = useState(null);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    // const [moveComponent, setMoveComponent] = useState(false);
+    const [scale, setScale] = useState(1);
+    const [boardSize, setBoardSize] = useState({ width: 10000, height: 10000 });
+    const [minCoords, setMinCoords] = useState({ x: -100, y: -100 });
+    const lastPos = useRef({ x: 0, y: 0 });
+    const [hasInitialized, setHasInitialzed] = useState(false);
+    const extendBy = 2000; // seberapa banyak canvas ditambah saat pan ke tepi
+    const buffer = 100; //
+    const [isLoading, setIsLoading] = useState(false);
+    const activeTool = useAppSelector((state) => state.tool.active);
+    const grid = useAppSelector((state) => state.tool.grid);
+    const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, } = useAppSelector((state) => state.board);
+    const { selectionLines } = useAppSelector((state) => state.panel);
+    useEffect(() => {
+        if (selectionLines) {
+            setSelectedLines(selectionLines);
+            const idSelected = dataElementSelectionGroupRef.current.map((item) => item.id);
+            const newSelectionData = [
+                ...componentsState,
+                ...extraComponentsState,
+            ].filter((comp) => idSelected.includes(comp.id));
+            dataElementSelectionGroupRef.current = newSelectionData;
+        }
+    }, [selectionLines]);
+    useEffect(() => {
+        var _a;
+        if (activeTool !== ((_a = shadowShape[0]) === null || _a === void 0 ? void 0 : _a.shape)) {
+            setShadowShape([]);
+        }
+    }, [activeTool]);
+    const minPosision = useMemo(() => {
+        var _a, _b;
+        const minX = (_a = context === null || context === void 0 ? void 0 : context.state) === null || _a === void 0 ? void 0 : _a.positionX;
+        const minY = (_b = context === null || context === void 0 ? void 0 : context.state) === null || _b === void 0 ? void 0 : _b.positionY;
+        return { minX, minY };
+    }, [context]);
+    // useEffect(() => {
+    //   if (flagChange) {
+    //     setComponentsState(componentsProps);
+    //     setExtraComponentsState(extraComponentsProps);
+    //   }
+    // }, [context]);
+    // const [isDragging, setIsDragging] = useState(false);
+    const [resizeDirection, setResizeDirection] = useState(null);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
+    const screenCTMRef = useRef(null);
+    const dragIndex = useRef(null);
+    const [componentsState, setComponentsState] = useState([]);
+    const [extraComponentsState, setExtraComponentsState] = useState([]);
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const [selectedLines, setSelectedLines] = useState([]);
+    const isSyncingFromRedux = useRef(false);
+    const startPos = useRef({ x: 0, y: 0 });
+    const isDragging = useRef(false);
+    const moveComponent = useRef(false);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (hasInitialized)
+            return;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.forEach((_) => {
+            var _a, _b, _c, _d;
+            let values = _;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.forEach((values) => {
+            var _a, _b;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        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 === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.length) < 1 &&
+            ["background", "text"].includes((_g = componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
+            minX = minX - minX * 0.5;
+            minY = minY - minY * 0.5;
+        }
+        if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
+            setMinCoords({ x: minX - 200, y: minY - 100 });
+            (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(minX - 100, minY - 100, scale);
+            setHasInitialzed(true);
+        }
+        // }
+        // if (!backgroundHasOne) {
+        //   setMinCoords({ x: minX - minX * 0.5, y: minY - minY * 0.5 });
+        // }
+        // if(maxX > boardSize.width){
+        //   setBoardSize((prev) => ({ ...prev, width: maxX }));
+        // }
+        // if(maxY > boardSize.height){
+        //   setBoardSize((prev) => ({ ...prev, height: maxY }));
+        // }
+        // return {
+        //   minX: backgroundHasOne ? minX : minX - minX * 0.5,
+        //   minY: backgroundHasOne ? minY : minY - minY * 0.5,
+        //   width: maxX,
+        //   height: maxY,
+        // };
+    }, [componentsProps, extraComponentsProps]);
+    const debouncedSyncToReduxSelected = useRef(debounce((data) => {
+        throttledDispatch(data);
+    }, 300)).current;
+    const updateQueue = useRef([]);
+    const isFlushing = useRef(false);
+    const updateFlushToRedux = () => {
+        if (isFlushing.current)
+            return;
+        isFlushing.current = true;
+        requestAnimationFrame(() => {
+            const batch = updateQueue.current;
+            updateQueue.current = [];
+            isFlushing.current = false;
+            dispatch({
+                type: "board/setNewComponents",
+                payload: batch === null || batch === void 0 ? void 0 : batch[0],
+            });
+        });
+    };
+    const queueUpdateComponents = (data) => {
+        dispatch({
+            type: "board/setNewComponents",
+            payload: data,
+        });
+    };
+    // const debouncedSyncComponents = useRef(
+    //   debounce((data) => {
+    //     dispatch({
+    //       type: "board/setNewComponents",
+    //       payload: data,
+    //     });
+    //   }, 0)
+    // );
+    const debouncedSyncExtraComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: data,
+        });
+    }, 300));
+    // Redux → Local
+    useEffect(() => {
+        if (flagChange && updateBy === "global") {
+            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 : []);
+            }
+            if (!isEqual(selectedComponentProps, selectedComponent)) {
+                isSyncingFromRedux.current = true;
+                setSelectedComponent(selectedComponentProps !== null && selectedComponentProps !== void 0 ? selectedComponentProps : []);
+            }
+            dispatch({ type: "board/setFlagChange", payload: false });
+        }
+    }, [
+        componentsProps,
+        extraComponentsProps,
+        // selectedComponentProps,
+        // flagChange,
+    ]);
+    // Local → Redux
+    // const syncFromLocalToRedux = (
+    //   newComponentState?: any,
+    //   newExtraComponentState?: any
+    // ) => {
+    //   console.log("MAU SYNC DARI LOCAL KE REDUX", newComponentState);
+    //   if (
+    //     !isEmpty(newComponentState) &&
+    //     !isEqual(newComponentState, componentsProps)
+    //   ) {
+    //     dispatch({ type: "board/setUpdateBy", payload: "local" });
+    //     queueUpdateComponents(newComponentState);
+    //   }
+    //   if (
+    //     !isEmpty(newExtraComponentState) &&
+    //     !isEqual(newExtraComponentState, extraComponentsProps)
+    //   ) {
+    //     debouncedSyncExtraComponents.current(newExtraComponentState);
+    //   }
+    //   if (
+    //     !isEqual(componentsState, componentsProps) &&
+    //     !isEqual(componentsState, []) &&
+    //     isEmpty(newComponentState)
+    //   ) {
+    //     dispatch({ type: "board/setUpdateBy", payload: "local" });
+    //     queueUpdateComponents(componentsState);
+    //   }
+    //   if (
+    //     !isEqual(extraComponentsState, extraComponentsProps) &&
+    //     !isEqual(extraComponentsState, []) &&
+    //     isEmpty(newExtraComponentState)
+    //   ) {
+    //     debouncedSyncExtraComponents.current(extraComponentsState);
+    //   }
+    // };
+    const updateComponentAttribute = (component) => {
+        console.log("MAU UPDATE COMPONENT", component);
+        if (!component)
+            return;
+        const previousComponent = componentsState.find((item) => item.id == (component === null || component === void 0 ? void 0 : component.id));
+        const previousExtraComponent = extraComponentsState.find((item) => item.id == (component === null || component === void 0 ? void 0 : component.id));
+        const isNotEqualPreviousComponent = !isEqual(previousComponent, component);
+        const isNotEqualPreviousExtraComponent = !isEqual(previousExtraComponent, component);
+        if (previousComponent && isNotEqualPreviousComponent) {
+            // update local state
+            const newComponent = componentsState.map((item) => {
+                if (item.id === (component === null || component === void 0 ? void 0 : component.id)) {
+                    return Object.assign(Object.assign({}, item), component);
+                }
+                return item;
+            });
+            setComponentsState(newComponent);
+            // update redux
+            dispatch({ type: "board/setUpdateBy", payload: "local" });
+            queueUpdateComponents(newComponent);
+        }
+        if (previousExtraComponent && isNotEqualPreviousExtraComponent) {
+            // update local state
+            const newExtraComponent = extraComponentsState.map((item) => {
+                if (item.id === component.id) {
+                    return Object.assign(Object.assign({}, item), component);
+                }
+                return item;
+            });
+            setExtraComponentsState(newExtraComponent);
+            // update redux
+            debouncedSyncExtraComponents.current(newExtraComponent);
+        }
+    };
+    const updateComponentsAttribute = (components) => {
+        // if(components.length === 0) return
+        console.log("MAU SYNC DARI LOCAL KE REDUX MANY", components);
+        const newComponents = components.map((item) => {
+            const previousComponent = componentsState.find((comp) => comp.id === (item === null || item === void 0 ? void 0 : item.id));
+            if (previousComponent) {
+                return Object.assign(Object.assign({}, previousComponent), item);
+            }
+            return item;
+        });
+        const newComponentState = componentsState.map((item) => {
+            const updatedItem = newComponents.find((comp) => comp.id === item.id);
+            return updatedItem ? Object.assign(Object.assign({}, item), updatedItem) : item;
+        });
+        setComponentsState(newComponentState);
+        dispatch({ type: "board/setUpdateBy", payload: "local" });
+        queueUpdateComponents(newComponentState);
+    };
+    const addComponents = (components) => {
+        const newComponentState = [...extraComponentsState, components];
+        // setComponentsState(newComponentState);
+        setExtraComponentsState(newComponentState);
+        dispatch({ type: "board/setUpdateBy", payload: "local" });
+        dispatch({ type: "board/setExtraComponent", payload: components });
+    };
+    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 throttledDispatch = useCallback(throttle((component) => {
+        // dispatch({
+        //   type: "board/updateComponent",
+        //   payload: component,
+        // });
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: component,
+        });
+    }, 16), // 16ms ≈ 60fps
+    [dispatch]);
+    const getCursorStyle = () => {
+        if (activeTool === "select" && moveComponent.current) {
+            return "grabbing";
+        }
+        else if (activeTool === "select" && resizeDirection) {
+            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 [touch, setTouch] = useState(false);
+    function createTableGhost({ x, y, width, height, fill, shape, id = "ghost-element-create", }) {
+        // buat group dulu
+        const SVG_NS = "http://www.w3.org/2000/svg";
+        let el = null;
+        // tambahkan rectangle
+        if (shape === "square" ||
+            shape === "table-seat-circle" ||
+            shape === "selection-box") {
+            el = document.createElementNS(SVG_NS, "rect");
+            el.setAttribute("id", id);
+            el.setAttribute("x", x);
+            el.setAttribute("y", y);
+            el.setAttribute("width", width);
+            el.setAttribute("height", height);
+            el.setAttribute("fill", fill);
+            el.setAttribute("stroke", "blue");
+            el.setAttribute("data-table", JSON.stringify({
+                x,
+                y,
+                width,
+                height,
+                shape,
+                fill,
+                stroke: "blue",
+                rotation: 0,
+            }));
+        }
+        else if (shape === "circle") {
+            el = document.createElementNS(SVG_NS, "circle");
+            el.setAttribute("id", id);
+            el.setAttribute("cx", x);
+            el.setAttribute("cy", y);
+            el.setAttribute("r", Math.min(width, height) / 2);
+            el.setAttribute("fill", fill);
+            el.setAttribute("stroke", "blue");
+            el.setAttribute("data-table", JSON.stringify({
+                x,
+                y,
+                width,
+                height,
+                shape,
+                fill,
+                stroke: "blue",
+                rotation: 0,
+            }));
+        }
+        return el;
+    }
+    const handleUnSelectComponent = () => {
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        setSelectedComponent(null);
+        setSelectedLines(null);
+        dispatch({ type: "panel/setShow", payload: false });
+    };
+    const startAngleRef = useRef(0);
+    const startRotationRef = useRef(0);
+    const ghostRotateElement = useRef(0);
+    const isResizeRef = useRef(false);
+    const isResizeSelectionRef = useRef(false);
+    const selectionDataRef = useRef([]);
+    // const selectionElementsRef = useRef<any>([]);
+    // const selectionElementRawsRef = useRef<any>([]);
+    const hadSelectionRef = useRef(false);
+    //FLAGE EVERY HANDLE EVENT
+    //CREATE
+    const isCreateElementRef = useRef(false);
+    //RESIZE
+    const onResizeSelectionRef = useRef(false);
+    //ROTATE
+    const isRotatingRef = useRef(false);
+    const rotationSelectionRef = useRef(0);
+    //DRAG/MOVE
+    //SELECT
+    const isSelectingRef = useRef(false);
+    const activeIdSelectedRef = useRef(null);
+    //SELECTION
+    const selectionLinesRef = useRef(null);
+    const onMakeSelectionRef = useRef(false);
+    // const dataElementSelectionGroupRawRef = useRef<Element[]>([]);
+    const onMoveSelectionBoxRef = useRef(false);
+    const onResizeSelectionBoxRef = useRef(false);
+    const dataElementSelectionGroupRef = useRef([]);
+    //polygon
+    const isPolygonRef = useRef(false);
+    const polygonElementRef = useRef([]);
+    const isOnMakePolygonRef = useRef(false);
+    const startPointPolygonLineRef = useRef({ x: 0, y: 0 });
+    // useEffect(() => {
+    //   if(dataElementSelectionGroupRawRef.current.length > 0){
+    //     const newElementSelectionGroupWar = []
+    //     const selectAll  = svgRef.current?.querySelectorAll(`[data-table]`)
+    //     selectAll?.forEach((el: any) => {
+    //       const data = JSON.parse(el.getAttribute("data-table"))
+    //       dataElementSelectionGroupRawRef.current.forEach((item: any) => {
+    //         const dataItem = JSON.parse(item.getAttribute("data-table"))
+    //         if(dataItem.id === data.id){
+    //           newElementSelectionGroupWar.push(el)
+    //         }
+    //       })
+    //     })
+    //     console.log(newElementSelectionGroupWar,dataElementSelectionGroupRawRef.current,selectAll,"masukk")
+    //     dataElementSelectionGroupRawRef.current = newElementSelectionGroupWar
+    //   }
+    // },[componentsState])
+    const handlePointerDown = (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const shiftActive = e.shiftKey;
+        console.log("shiftActive", shiftActive);
+        const svg = svgRef.current;
+        if (!e.isPrimary)
+            return;
+        if (!svg)
+            return;
+        isDragging.current = false;
+        let hasMoved = false;
+        releaseGroupRef.current = false;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const { x, y } = getSvgCoords(e);
+        //CREATE ELEMENT
+        const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
+        if (isInitialCreateElemente) {
+            const tables = createTableGhost({
+                x,
+                y,
+                width: 1,
+                height: 1,
+                fill: "red",
+                shape: activeTool,
+            });
+            // setGhostCreateElement(tables);
+            (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(tables);
+            isCreateElementRef.current = true;
+        }
+        const targetSelection = e.target.closest("g[id='selection-lines']");
+        //ROTATE
+        const targetRotate = e.target.closest("circle[data-role]");
+        if (targetRotate) {
+            isRotatingRef.current = true;
+        }
+        // RESIZE
+        const targetGroup = e.target.closest("g[data-id]");
+        const targetPointPolygon = e.target.closest("circle[data-point]");
+        let idTarget = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
+        const selectionTarget = (_c = (_b = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _b === void 0 ? void 0 : _b.selection) === null || _c === void 0 ? void 0 : _c.replace("selection-", "");
+        const activeId = selectionTarget !== null && selectionTarget !== void 0 ? selectionTarget : idTarget;
+        const { g, inner } = getAttributeElement(svg, activeId);
+        if (targetGroup && shiftActive) {
+            const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
+            console.log("findById", findById);
+            const dataSelection = [...dataElementSelectionGroupRef.current, findById];
+            dataElementSelectionGroupRef.current = dataSelection;
+        }
+        const box = getGlobalBBox(svg, g);
+        const { x: initialXG, y: initialYG } = getTranslate(g);
+        const targetDragPosition = e.target.closest("circle[data-position]");
+        const { clientX, clientY } = e;
+        const allGroups = (_d = svgRef.current) === null || _d === void 0 ? void 0 : _d.querySelectorAll("g[data-id]");
+        // cari elemen group dengan data-table
+        // ambil elemen yang benar-benar ada di bawah pointer
+        const data = JSON.parse(((_e = ghostRef.current) === null || _e === void 0 ? void 0 : _e.getAttribute("data-table")) || "{}");
+        const cx = data.x + data.width / 2;
+        const cy = data.y + data.height / 2;
+        const dx = x - cx;
+        const dy = y - cy;
+        startAngleRef.current = Math.atan2(dy, dx); // simpan angle awal
+        startRotationRef.current = data.rotation || 0; // rotation existing
+        const hitPoint = document.elementFromPoint(clientX, clientY);
+        // CHECK FOR HIT ON SVG FOR SELECTION BOX
+        // MAKE AND UNMAKE SELECTION BOX START ------
+        const hadSelectionBox = ((_f = dataElementSelectionGroupRef.current) === null || _f === void 0 ? void 0 : _f.length) > 0;
+        console.log(dataElementSelectionGroupRef.current, "dataElementSelectionGroupRef.current");
+        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";
+        const isRotateSelectionBox = targetRotate && hadSelectionBox;
+        let currentRotation = 0;
+        if (isRotateSelectionBox) {
+            currentRotation = rotationSelectionRef.current;
+        }
+        const isMightMove = !hadSelectionBox && activeId && !targetPointPolygon;
+        //JIKA PUNYA SELECTION TAPI DOWN DI ELEMENT LAIN
+        const downInMatchSelectionBox = downInSelectionBox &&
+            (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg" &&
+            ((_g = dataElementSelectionGroupRef.current) === null || _g === void 0 ? void 0 : _g.some((data) => (data === null || data === void 0 ? void 0 : data.id) === activeId));
+        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 === "{}";
+        const downOutResizePositionAndInSelectionBox = downOutResizePosition && hadSelectionBox && !downOutSelectionBox;
+        const downAtResizePositionAndHasSelectionBox = downAtResizePosition && hadSelectionBox && !isRotateSelectionBox;
+        const isMightResizeElement = !isEmpty(selectedComponent) &&
+            downAtResizePosition &&
+            downAtResizePosition &&
+            !hadSelectionBox;
+        if (!downInMatchSelectionBox &&
+            !downAtResizePositionAndHasSelectionBox &&
+            !targetRotate &&
+            !isMightResizeElement &&
+            !targetPointPolygon &&
+            !isMightMove &&
+            !targetSelection) {
+            console.log("MAUK UNSELET");
+            hadSelectionRef.current = false;
+            onMoveSelectionBoxRef.current = false;
+            handleUnSelectComponent();
+            selectionLinesRef.current = null;
+        }
+        if (downOutResizePositionAndInSelectionBox) {
+            onMoveSelectionBoxRef.current = true;
+        }
+        if (downAtResizePosition) {
+            onResizeSelectionRef.current = true;
+        }
+        // targetGroup?.removeAttribute("transform");
+        const mousePositionInGroup = {
+            x: x - (box === null || box === void 0 ? void 0 : box.x),
+            y: y - (box === null || box === void 0 ? void 0 : box.y),
+        };
+        const offset = {
+            x: x - initialXG,
+            y: y - initialYG,
+        };
+        // create polygon
+        const isInitialPolyGon = activeTool === "polygon" && !isCreateElementRef.current;
+        if (isInitialPolyGon && (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) !== "polygon") {
+            const newPolygon = {
+                id: `${Date.now()}`,
+                shape: "polygon",
+                fill: "red",
+                points: [{ x, y }],
+                rotation: 0,
+            };
+            polygonElementRef.current = newPolygon;
+            // addComponents(newPolygon);
+            setSelectedComponent(newPolygon);
+            dispatch({
+                type: "panel/setSelectedComponent",
+                payload: newPolygon,
+            });
+            isOnMakePolygonRef.current = true;
+        }
+        const selectionLines = (_j = svgRef.current) === null || _j === void 0 ? void 0 : _j.querySelector("#selection-lines");
+        const boxSelection = (_k = svgRef.current) === null || _k === void 0 ? void 0 : _k.querySelector("#rect-box-selection");
+        // const allElementInSelection = svgRef.current?.querySelectorAll(
+        //   "#ghost-element-has-selection"
+        // );
+        const pointerMoveGhost = (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) => {
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                const { g, inner, element } = getAttributeElement(svg, activeId);
+                const index = Number(targetPointPolygon.getAttribute("id"));
+                const points = element === null || element === void 0 ? void 0 : element.getAttribute("points");
+                let arrayPoints = pointsStringToArray(points);
+                arrayPoints[index] = { x: x + dx, y: y + dy };
+                // targetPointPolygon.setAttribute("cx", `${x + dx}`);
+                // targetPointPolygon.setAttribute("cy", `${y + dy}`);
+                // targetPointPolygon.setAttribute("x", `${x + dx}`);
+                // targetPointPolygon.setAttribute("y", `${y + dy}`);
+                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, _e;
+                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 rect = svg.querySelector("#selection-lines");
+                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 = currentRotation + ((currentAngle - startAngle) * 180) / Math.PI;
+                const angle = (currentRotation * 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, currentRotation, 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 allDataRealSelection = (_e = [
+                    ...componentsState,
+                    ...extraComponentsState,
+                ]) === null || _e === void 0 ? void 0 : _e.filter((el) => allID.includes(el.id));
+                const deltaAngle = newAngle - currentRotation;
+                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 = el.rotation;
+                    const ex = el.x;
+                    const ey = el.y;
+                    // 🔑 ROTATE AROUND SELECTION CENTER
+                    const dx = ex - cx;
+                    const dy = ey - cy;
+                    // const angle = ((newAngle - currentRotation) * Math.PI) / 180;
+                    // const cos = Math.cos(angle);
+                    // const sin = Math.sin(angle);
+                    const nx = cx + dx * cosA - dy * sinA;
+                    const ny = cy + dx * sinA + dy * cosA;
+                    g.setAttribute("data-is-rotating", "1");
+                    inner.setAttribute("transform", `rotate(${rotateBefore + deltaAngle}, 0, 0)`);
+                    g.setAttribute("transform", `translate(${nx}, ${ny})`);
+                });
+            };
+            if (isRotateSelectionBox) {
+                onRotateSelectionBox(pos);
+            }
+            //RESIZE SELECTION BOX
+            // const onResizeSelectionBox = (ev: MouseEvent) => {
+            //   // ... (ambil data awal sama seperti kode kamu)
+            //   console.log("RESIZE SELECTION BOX");
+            //   const selectionLines = svg.querySelector("#selection-lines");
+            //   const innerSelection = selectionLines?.children?.[0];
+            //   const rotationSelection = getRotation((innerSelection as SVGGraphicsElement).transform.baseVal)
+            //   const angle = (rotationSelection * Math.PI) / 180;
+            //   const rect = innerSelection?.children?.[0];
+            //   const dx = pos.x - x;
+            //   const dy = pos.y - y;
+            //   // Konversi delta mouse ke Local Space agar sesuai dengan arah kotak miring
+            //   const deltaLocalX = dx * Math.cos(-angle) - dy * Math.sin(-angle);
+            //   const deltaLocalY = dx * Math.sin(-angle) + dy * Math.cos(-angle);
+            //   const gx: number = selectedLines?.x || 0;
+            //   const gy: number = selectedLines?.y || 0;
+            //   const gw: number = selectedLines?.width || 0;
+            //   const gh: number = selectedLines?.height || 0;
+            //   const oldSel = { x: gx, y: gy, width: gw, height: gh };
+            //   const rule = RESIZE_RULES[resizeSide];
+            //   const newWidth = Math.max(0, gw + rule.widthFactor * deltaLocalX);
+            //   const newHeight = Math.max(0, gh + rule.heightFactor * deltaLocalY);
+            //   // Ambil perpindahan lokal dari rule
+            //   const mlX = rule.moveLocalX(deltaLocalX, deltaLocalY);
+            //   const mlY = rule.moveLocalY(deltaLocalX, deltaLocalY);
+            //   // Konversi perpindahan lokal ke World Space (mx, my)
+            //   const mx = mlX * Math.cos(angle) - mlY * Math.sin(angle);
+            //   const my = mlX * Math.sin(angle) + mlY * Math.cos(angle);
+            //   // Objek Selection Baru (Penting: x dan y harus sinkron dengan mx, my)
+            //   const newSelection = {
+            //     x: gx + mx, 
+            //     y: gy + my,
+            //     width: newWidth,
+            //     height: newHeight,
+            //   };
+            //   // Update visual selection box
+            //   applyResizeWithRotation({
+            //     element: rect, group: selectionLines, resizeSide,
+            //     widthOriginal: gw, heightOriginal: gh,
+            //     deltaLocalX, deltaLocalY, xOriginal: gx, yOriginal: gy, angle,
+            //   });
+            //      const allID = dataElementSelectionGroupRef.current?.map(
+            //     (el: any) => el.id
+            //   );
+            //   const allDataRealSelection = [
+            //     ...componentsState,
+            //     ...extraComponentsState,
+            //   ]?.filter((el: any) => allID.includes(el.id));
+            //   const allGroupsAttribute = getAttributeElements(svg, allID);
+            //   // Update elemen-elemen di dalamnya
+            //   allGroupsAttribute.forEach(({ g, element, inner }, i) => {
+            //     const updated = mapElementToResize(
+            //         allDataRealSelection[i], 
+            //         oldSel, // selection box lama
+            //         newSelection, // selection box baru
+            //         angle
+            //     );
+            //     applyResizeToSvgElement(element, g, updated, inner);
+            //   });
+            // };
+            const onResizeSelectionBox = (ev) => {
+                var _a, _b, _c, _d;
+                console.log("RESIZE SELECTION BOX");
+                const selectionLines = svg.querySelector("#selection-lines");
+                const innerSelection = (_a = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children) === null || _a === void 0 ? void 0 : _a[0];
+                const rect = (_b = innerSelection === null || innerSelection === void 0 ? void 0 : innerSelection.children) === null || _b === void 0 ? void 0 : _b[0];
+                const rotationSelection = getRotation(innerSelection.transform.baseVal);
+                isResizeSelectionRef.current = true;
+                const gx = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.x) || 0;
+                const gy = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.y) || 0;
+                const gw = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.width) || 0;
+                const gh = (selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.height) || 0;
+                const oldSel = { x: gx, y: gy, width: gw, height: gh };
+                //Selection Resize
+                //angle
+                const angle = (rotationSelection * Math.PI) / 180;
+                //delta mouse di screen
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                //conversi ke local space (rotate balik)
+                const consA = Math.cos(-angle);
+                const sinA = Math.sin(-angle);
+                const deltaLocalX = dx * consA - dy * sinA;
+                const deltaLocalY = dx * sinA + dy * consA;
+                applyResizeWithRotation({
+                    element: rect,
+                    group: selectionLines,
+                    resizeSide,
+                    widthOriginal: gw,
+                    heightOriginal: gh,
+                    deltaLocalX,
+                    deltaLocalY,
+                    xOriginal: gx,
+                    yOriginal: gy,
+                    angle,
+                });
+                //end Resize selection
+                const allID = (_c = dataElementSelectionGroupRef.current) === null || _c === void 0 ? void 0 : _c.map((el) => el.id);
+                const allDataRealSelection = (_d = [
+                    ...componentsState,
+                    ...extraComponentsState,
+                ]) === null || _d === void 0 ? void 0 : _d.filter((el) => allID.includes(el.id));
+                const allGroupsAttribute = getAttributeElements(svg, allID);
+                const isValidResizeSide = Boolean(resizeSide);
+                if (!isValidResizeSide)
+                    return;
+                const newSelection = calculateNewSelection(oldSel, pos, { x, y }, resizeSide, angle);
+                allGroupsAttribute.forEach(({ g, element, inner }, i) => {
+                    const updated = mapElementToResize(allDataRealSelection[i], oldSel, newSelection, angle);
+                    applyResizeToSvgElement(element, g, updated, inner);
+                });
+            };
+            if (downAtResizePositionAndHasSelectionBox)
+                onResizeSelectionBox(ev);
+            //SELECTION BOX MOVE
+            const onMoveSelectionBox = () => {
+                var _a, _b;
+                const selectionLines = svg.querySelector("#selection-lines");
+                const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
+                const allDataRealSelection = (_b = [
+                    ...componentsState,
+                    ...extraComponentsState,
+                ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
+                allDataRealSelection.forEach((item) => {
+                    const { g } = getAttributeElement(svg, item.id);
+                    const newX = pos.x - x;
+                    const newY = pos.y - y;
+                    g.setAttribute("transform", `translate(${item.x + newX}, ${item.y + newY})`);
+                });
+                const newX = pos.x - x;
+                const newY = pos.y - y;
+                selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("transform", `translate(${(selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.x) + newX}, ${(selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.y) + newY})`);
+            };
+            if (downOutResizePositionAndInSelectionBox && !isRotateSelectionBox)
+                onMoveSelectionBox();
+            // MAKING SELECTION BOX MOVE
+            const onMakeSelectionBox = (ev) => {
+                var _a, _b;
+                const svgSize = svg.getBoundingClientRect();
+                let selectionBoxGhost = svg.querySelector("#selection-box-ghost");
+                function rectIntersect(a, b) {
+                    return !(a.x + a.width < b.x ||
+                        a.x > b.x + b.width ||
+                        a.y + a.height < b.y ||
+                        a.y > b.y + b.height);
+                }
+                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 - svgSize.left;
+                const selTop = selY - svgSize.top;
+                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.x < selLeft + selW &&
+                        box.x + box.width > selLeft &&
+                        box.y < selTop + selH &&
+                        box.y + box.height > selTop);
+                })
+                    .map((d) => `${d}`);
+                if (selectedIds.length === 0)
+                    return;
+                const selectedComps = (_b = [...componentsState, ...extraComponentsState]
+                    .filter((c) => selectedIds.map(String).includes(String(c.id)))) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    const { element } = getAttributeElement(svg, item.id);
+                    const { x, y } = getTranslate(g);
+                    const box = getGlobalBBox(svg, element);
+                    return Object.assign(Object.assign({}, item), { x: box.x, y: box.y, width: box.width, height: box.height });
+                });
+                dataElementSelectionGroupRef.current = selectedComps;
+            };
+            if (downBeforeHasSelectionBox)
+                onMakeSelectionBox(ev);
+            // CREATE GHOST ELEMENT ---
+            const onDrawNewElements = toolElement.includes(activeTool) && isCreateElementRef.current;
+            if (onDrawNewElements) {
+                const ghost = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#ghost-element-create");
+                if (!ghost)
+                    return;
+                const data = JSON.parse(ghost.getAttribute("data-table") || "{}");
+                const { x: ox, y: oy } = data;
+                // ---- HITUNG RECT BARU ----
+                const x1 = Math.min(ox, pos.x);
+                const y1 = Math.min(oy, pos.y);
+                const x2 = Math.max(ox, pos.x);
+                const y2 = Math.max(oy, pos.y);
+                const newX = x1;
+                const newY = y1;
+                const newW = x2 - x1;
+                const newH = y2 - y1;
+                // ---- RECT ----
+                if (["square", "table-seat-circle"].includes(activeTool)) {
+                    ghost.setAttribute("x", String(newX));
+                    ghost.setAttribute("y", String(newY));
+                    ghost.setAttribute("width", String(newW));
+                    ghost.setAttribute("height", String(newH));
+                }
+                // ---- CIRCLE (ambil dari bounding box) ----
+                if (activeTool === "circle") {
+                    const cx = newX + newW / 2;
+                    const cy = newY + newH / 2;
+                    const r = Math.min(newW, newH) / 2;
+                    ghost.setAttribute("cx", String(cx));
+                    ghost.setAttribute("cy", String(cy));
+                    ghost.setAttribute("r", String(r));
+                }
+                // ---- UPDATE DATA TABLE ----
+                ghost.setAttribute("data-table", JSON.stringify(Object.assign(Object.assign({}, data), { x: newX, y: newY, width: newW, height: newH })));
+            }
+            // RESIZE GHOST SINGLE ELEMENT ---
+            function globalToLocal(px, py, tx, ty, angle) {
+                const rad = (angle * Math.PI) / 180;
+                // buang translate group A
+                let x = px - tx;
+                let y = py - ty;
+                // balik rotasi group B
+                const cos = Math.cos(-rad);
+                const sin = Math.sin(-rad);
+                return {
+                    x: x * cos - y * sin,
+                    y: x * sin + y * cos,
+                };
+            }
+            const onResize = (ev) => {
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const svg = svgRef.current;
+                const { g, element, inner, seats } = getAttributeElement(svg, activeId);
+                // ORIGINAL size sebelum resize
+                const rotate = getRotation(inner.transform.baseVal);
+                const widthOriginal = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width;
+                const heightOriginal = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height;
+                const xOriginal = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x;
+                const yOriginal = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y;
+                // Hitung pointer → local SVG coordinate
+                const co = svg.createSVGPoint();
+                co.x = ev.clientX;
+                co.y = ev.clientY;
+                const pos = co.matrixTransform(svg.getScreenCTM().inverse());
+                // 1. angle rotasi elemen
+                const angle = (rotate * Math.PI) / 180;
+                // 2. delta mouse di screen
+                const dx = pos.x - x;
+                const dy = pos.y - y;
+                // 3. konversi ke local space (rotate balik)
+                const cosA = Math.cos(-angle);
+                const sinA = Math.sin(-angle);
+                const deltaLocalX = dx * cosA - dy * sinA;
+                const deltaLocalY = dx * sinA + dy * cosA;
+                applyResizeWithRotation({
+                    element,
+                    group: g,
+                    resizeSide,
+                    widthOriginal,
+                    heightOriginal,
+                    deltaLocalX,
+                    deltaLocalY,
+                    xOriginal,
+                    yOriginal,
+                    angle,
+                    seats,
+                });
+                isResizeRef.current = true;
+            };
+            // const hasSelectedOneElement =
+            //   !isEmpty(selectedComponent) &&
+            //   onResizeSelectionRef.current &&
+            //   downAtResizePosition;
+            if (!isEmpty(selectedComponent) && isMightResizeElement)
+                onResize(ev);
+            //ROTATE
+            const onRotate = (ev) => {
+                var _a;
+                const svg = svgRef.current;
+                if (!svg || !selectedComponent)
+                    return;
+                const lineHelper = svg.querySelector("#line-help");
+                const circleHelper = svg.querySelector("#circle-help");
+                const rect = svg.querySelector("#selection-lines");
+                const { inner, g } = getAttributeElement(svg, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
+                if (!inner || !g)
+                    return;
+                // mouse → SVG space
+                const w0 = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width;
+                const h0 = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height;
+                // 🔴 GLOBAL BBOX (INI KUNCI)
+                const bbox = getGlobalBBox(svg, inner);
+                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 = w0 / 2;
+                const centerY = h0 / 2;
+                const angle = (selectedComponent.rotation * 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})`);
+                ghostRotateElement.current = newAngle;
+                rect === null || rect === void 0 ? void 0 : rect.setAttribute("transform", `translate(${tx}, ${ty})`);
+                (_a = rect === null || rect === void 0 ? void 0 : rect.children) === null || _a === void 0 ? void 0 : _a[0].setAttribute("transform", `rotate(${newAngle}, 0, 0)`);
+                // helpGroup?.setAttribute("transform", `rotate(${-newAngle}, 0, 0)`);
+                // rect?.setAttribute("visibility", "hidden");
+            };
+            if (targetRotate && !isRotateSelectionBox)
+                onRotate(ev);
+            const onMove = (ev) => {
+                var _a, _b;
+                // 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 === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
+                const selection = (_b = (_a = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.replace("selection-", "");
+                const { g } = getAttributeElement(svg, selection !== null && selection !== void 0 ? selection : activeId);
+                g === null || g === void 0 ? void 0 : g.setAttribute("transform", `translate(${newX}, ${newY})`);
+                // selectionLines?.setAttribute("transform", `translate(${newX}, ${newY})`);
+            };
+            if (isMightMove) {
+                onMove(ev);
+            }
+        };
+        const pointerHandleUp = (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            //POLYGON RESIZE
+            if (targetSelection) {
+                console.log("KLIK UP SELECTION");
+                //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,
+                });
+                selectionLinesRef.current = newDataComponent;
+            }
+            //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 ? selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points[0] : { x, y };
+                const newPoints = Object.assign(Object.assign({}, selectedComponent), { points: [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, newCoord] });
+                if (closing && ((_a = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) === null || _a === void 0 ? void 0 : _a.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 }));
+                    (_b = svg.querySelector("#selection-box-ghost")) === null || _b === void 0 ? void 0 : _b.remove();
+                    (_c = svg.querySelector("#polyline-helper")) === null || _c === void 0 ? void 0 : _c.remove();
+                }
+                else {
+                    setSelectedComponent(newPoints);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: newPoints,
+                    });
+                    polygonElementRef.current = newPoints;
+                }
+            }
+            // ROTATE
+            if (targetRotate && !isRotateSelectionBox) {
+                const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
+                const { g, inner, element } = getAttributeElement(svg, activeId);
+                const boxGroup = getGlobalBBox(svg, inner);
+                const findById = [...componentsState, ...extraComponentsState].find((c) => c.id === activeId);
+                const { width, height } = getSvgElementSize(element);
+                const { x, y } = getTranslate(g);
+                const newDataComponent = Object.assign(Object.assign({}, findById), { x,
+                    y, rotation: ghostRotateElement.current });
+                const boxSelection = {
+                    x,
+                    y,
+                    width,
+                    height,
+                    rotation: ghostRotateElement.current,
+                    shape: "selection-box",
+                    id: `${Date.now()}`,
+                };
+                if (boxGroup)
+                    setSelectedLines(boxSelection);
+                updateComponentAttribute(newDataComponent);
+                setSelectedComponent(newDataComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newDataComponent,
+                });
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: false });
+            }
+            //CREATE NEW ELEMENT
+            if (toolElement.includes(activeTool) && isCreateElementRef.current) {
+                const ghostElementNew = (_d = svgRef.current) === null || _d === void 0 ? void 0 : _d.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
+                (_e = svgRef.current) === null || _e === void 0 ? void 0 : _e.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";
+            // &&
+            // !hadSelectionBox;
+            console.log({ isSelectElement }, !hasMoved, !releaseGroupRef.current, !targetRotate, !hasSelectedOneElement, idDataset, activeTool, hadSelectionBox);
+            if (isSelectElement) {
+                //KLIK UP
+                console.log("KLIK UP");
+                const findById = [...componentsState, ...extraComponentsState].find((component) => component.id === idDataset);
+                if (!findById) {
+                    return;
+                }
+                const { g, inner, element } = getAttributeElement(svg, idDataset);
+                if (shiftActive) {
+                    const allElementSelectionGroup = dataElementSelectionGroupRef.current;
+                    // HITUNG BOUNDING BOX
+                    const xs = allElementSelectionGroup.map((c) => c.x);
+                    const ys = allElementSelectionGroup.map((c) => c.y);
+                    const x2 = allElementSelectionGroup.map((c) => c.x + c.width);
+                    const y2 = allElementSelectionGroup.map((c) => c.y + c.height);
+                    const selectionBox = {
+                        x: Math.min(...xs),
+                        y: Math.min(...ys),
+                        width: Math.max(...x2) - Math.min(...xs),
+                        height: Math.max(...y2) - Math.min(...ys),
+                        stroke: "red",
+                        shape: "selection-box",
+                        fill: "transparent",
+                        id: `${Date.now()}`,
+                        rotation: 0,
+                    };
+                    selectionLinesRef.current = selectionBox;
+                    setSelectedLines(selectionBox);
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: allElementSelectionGroup,
+                    });
+                    setSelectedComponent(null);
+                    dispatch({
+                        type: "panel/setSelectedComponent",
+                        payload: null,
+                    });
+                }
+                else {
+                    const boxGroup = getGlobalBBox(svg, inner);
+                    // const { x, y } = getTranslate(g);
+                    const targets = ["table-seat-square", "table-seat-circle"];
+                    const isNotRealSize = targets.includes(findById === null || findById === void 0 ? void 0 : findById.shape);
+                    let boxSelection = Object.assign(Object.assign({}, findById), { 
+                        // ...boxGroup,
+                        // x,
+                        // y,
+                        // width,
+                        // height: height ,
+                        // width,
+                        // height,
+                        // x:boxGroup.x,
+                        // y:boxGroup.y,
+                        shape: "selection-box" });
+                    if ((findById === null || findById === void 0 ? void 0 : findById.shape) === "polygon") {
+                        const boxGroup = getGlobalBBox(svg, g);
+                        boxSelection = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, boxSelection), (boxGroup ? { x: boxGroup.x } : {})), (boxGroup ? { y: boxGroup.y } : {})), (boxGroup ? { width: boxGroup.width } : {})), (boxGroup ? { height: boxGroup.height } : {})), { shape: "selection-box" });
+                    }
+                    if ((boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.x) &&
+                        (boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.y) &&
+                        (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,
+                        });
+                        selectionLinesRef.current = boxSelection;
+                    }
+                }
+                //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 } = getAttributeElement(svg, activeId);
+                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 });
+                const newSelection = Object.assign(Object.assign({}, selectedComponent), { x: x, y: y, width: width, height: height, shape: "selection-box", id: `${Date.now()}` });
+                setSelectedLines(newSelection);
+                // dragGhostRef.current = false;
+                setSelectedComponent(newSelectedComponent);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: newSelectedComponent,
+                });
+                updateComponentAttribute(newSelectedComponent);
+                //LOGIC FOR SET SHOW
+                dispatch({ type: "panel/setShow", payload: false });
+                // isResizeRef.current = false;
+            }
+            //MAKING SELECTION BOX UP
+            const isMakingSelectionBoxUp = downBeforeHasSelectionBox && activeTool === "select";
+            if (isMakingSelectionBoxUp
+            // &&
+            // !hadSelectionRef.current &&
+            // !isResizeSelectionRef.current
+            ) {
+                console.log("MAKING SELECTION BOX UP");
+                const allElementSelectionGroup = dataElementSelectionGroupRef.current;
+                // if(allElementSelectionGroup.length > 1){
+                const findAllPolygonGroup = allElementSelectionGroup.filter((c) => c.shape === "polygon");
+                // HITUNG BOUNDING BOX
+                let xs = allElementSelectionGroup.map((c) => c.x);
+                let ys = allElementSelectionGroup.map((c) => c.y);
+                let x2 = allElementSelectionGroup.map((c) => c.x + c.width);
+                let y2 = allElementSelectionGroup.map((c) => c.y + c.height);
+                findAllPolygonGroup.forEach((polygon) => {
+                    const { points } = polygon;
+                    for (let i = 0; i < points.numberOfItems; i++) {
+                        const point = points.getItem(i);
+                        xs.push(point.x);
+                        ys.push(point.y);
+                        x2.push(point.x);
+                        y2.push(point.y);
+                    }
+                });
+                const selectionBox = {
+                    x: Math.min(...xs),
+                    y: Math.min(...ys),
+                    width: Math.max(...x2) - Math.min(...xs),
+                    height: Math.max(...y2) - Math.min(...ys),
+                    stroke: "red",
+                    shape: "selection-box",
+                    fill: "transparent",
+                    id: `${Date.now()}`,
+                    rotation: 0,
+                };
+                function hasInvalidNumber(obj) {
+                    return Object.values(obj).some((v) => typeof v === "number" && !Number.isFinite(v));
+                }
+                if (!hasInvalidNumber(selectionBox)) {
+                    selectionLinesRef.current = selectionBox;
+                    setSelectedLines(selectionBox);
+                    dispatch({
+                        type: "panel/setSelectedGroup",
+                        payload: allElementSelectionGroup,
+                    });
+                }
+                setSelectedComponent(null);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: null,
+                });
+                rotationSelectionRef.current = 0;
+                (_g = (_f = svgRef.current) === null || _f === void 0 ? void 0 : _f.querySelectorAll("#selection-box-ghost")) === null || _g === void 0 ? void 0 : _g.forEach((el) => el.remove());
+            }
+            //RESIZE SELECTION BOX UP
+            if (downAtResizePositionAndHasSelectionBox || isRotateSelectionBox) {
+                const selectionLines = (_h = svgRef.current) === null || _h === void 0 ? void 0 : _h.querySelector("#selection-lines");
+                isResizeSelectionRef.current = false;
+                const results = (_j = dataElementSelectionGroupRef.current) === null || _j === void 0 ? void 0 : _j.map((item) => {
+                    const { g, element, inner } = getAttributeElement(svg, item.id);
+                    const { x, y } = getTranslate(g);
+                    const { width, height } = getSvgElementSize(element);
+                    const rotate = getRotation(inner.transform.baseVal);
+                    const getBBox = getGlobalBBox(svg, element);
+                    const newDataComponent = Object.assign(Object.assign({}, item), { x,
+                        y,
+                        width,
+                        height, rotation: rotate });
+                    const newDataSelection = Object.assign(Object.assign({}, newDataComponent), { x: getBBox.x, y: getBBox.y, width: getBBox.width, height: getBBox.height, shape: "selection-box", id: `${Date.now()}` });
+                    return {
+                        newDataComponent,
+                        newDataSelection,
+                    };
+                });
+                const newDataComponent = results.map((r) => r.newDataComponent);
+                // const dataSelection = results.map((r) => r.newDataSelection);
+                const linesSelection = getTranslate(selectionLines);
+                const currentRotation = getRotation((_l = (_k = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _k === void 0 ? void 0 : _k.transform) === null || _l === void 0 ? void 0 : _l.baseVal);
+                rotationSelectionRef.current = currentRotation;
+                const sizeSelection = getSvgElementSize((_m = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _m === void 0 ? void 0 : _m.children[0]);
+                updateComponentsAttribute(newDataComponent);
+                const newDataSelection = Object.assign(Object.assign(Object.assign({}, linesSelection), sizeSelection), { shape: "selection-box", id: `${Date.now()}`, rotation: currentRotation });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: newDataComponent,
+                });
+                setSelectedComponent(null);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: null,
+                });
+                setSelectedLines(newDataSelection);
+                dataElementSelectionGroupRef.current = newDataComponent;
+                // // remove ghost element
+                // svgRef.current
+                //   ?.querySelectorAll("#ghost-element-has-selection")
+                //   .forEach((el) => el.remove());
+                hadSelectionRef.current = false;
+            }
+            //MOVE SELECTION BOX UP
+            if (downOutResizePositionAndInSelectionBox &&
+                !shiftActive &&
+                !isRotateSelectionBox) {
+                console.log("MOVE SELECTION BOX UP");
+                const selectionLines = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelector("#selection-lines");
+                isResizeSelectionRef.current = false;
+                const results = (_p = dataElementSelectionGroupRef.current) === null || _p === void 0 ? void 0 : _p.map((item) => {
+                    const { g, element, inner } = getAttributeElement(svg, item.id);
+                    const { x, y } = getTranslate(g);
+                    const getBBox = getGlobalBBox(svg, element);
+                    const newDataComponent = Object.assign(Object.assign({}, item), { x,
+                        y });
+                    return {
+                        newDataComponent,
+                    };
+                });
+                const newDataComponent = results.map((r) => r.newDataComponent);
+                // const dataSelection = results.map((r) => r.newDataSelection);
+                const linesSelection = getTranslate(selectionLines);
+                const currentRotation = getRotation((_r = (_q = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _q === void 0 ? void 0 : _q.transform) === null || _r === void 0 ? void 0 : _r.baseVal);
+                rotationSelectionRef.current = currentRotation;
+                const sizeSelection = getSvgElementSize((_s = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _s === void 0 ? void 0 : _s.children[0]);
+                updateComponentsAttribute(newDataComponent);
+                const newDataSelection = Object.assign(Object.assign(Object.assign({}, linesSelection), sizeSelection), { shape: "selection-box", id: `${Date.now()}-from-move`, rotation: currentRotation });
+                dispatch({
+                    type: "panel/setSelectedGroup",
+                    payload: newDataComponent,
+                });
+                setSelectedComponent(null);
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: null,
+                });
+                if ((_t = newDataSelection === null || newDataSelection === void 0 ? void 0 : newDataSelection.height) === null || _t === void 0 ? void 0 : _t.id) {
+                    newDataSelection.height = newDataSelection.height.id;
+                }
+                if (newDataSelection === null || newDataSelection === void 0 ? void 0 : newDataSelection.x) {
+                    setSelectedLines(newDataSelection);
+                }
+                dataElementSelectionGroupRef.current = newDataComponent;
+                hadSelectionRef.current = false;
+            }
+            //DELETE GHOST ELEMENT BISA MEMBU
+            (_u = svgRef.current) === null || _u === void 0 ? void 0 : _u.querySelectorAll("#ghost-element").forEach((el) => el.remove());
+            dataSetGhost.current = null;
+            //UPDATE DATASET TO STATE IF MOVE
+            // if (releaseGroupRef.current) return;
+            if (isMightMove &&
+                !isMakingSelectionBoxUp &&
+                !isSelectElement &&
+                !isMightResizeElement) {
+                console.log("MOVE ONE ELEMENT");
+                // console.log({ idActive, datasetUp });
+                let activeId = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
+                const selection = (_w = (_v = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _v === void 0 ? void 0 : _v.selection) === null || _w === void 0 ? void 0 : _w.replace("selection-", "");
+                const activeIdSelection = selection !== null && selection !== void 0 ? selection : activeId;
+                const findData = [...componentsState, ...extraComponentsState].find((item) => item.id == activeIdSelection);
+                const { g } = getAttributeElement(svg, activeIdSelection);
+                const bbox = getTranslate(g);
+                const updateComponent = Object.assign(Object.assign({}, findData), { x: bbox === null || bbox === void 0 ? void 0 : bbox.x, y: bbox === null || bbox === void 0 ? void 0 : bbox.y });
+                const selectionLines = Object.assign(Object.assign({}, selectedLines), { x: bbox === null || bbox === void 0 ? void 0 : bbox.x, y: bbox === null || bbox === void 0 ? void 0 : bbox.y, shape: "selection-box" });
+                if (findData) {
+                    setSelectedLines(selectionLines);
+                    setSelectedComponent(updateComponent);
+                    dispatch({
+                        type: "panel/updateSelectedComponent",
+                        payload: updateComponent,
+                    });
+                    updateComponentAttribute(updateComponent);
+                }
+            }
+            window.removeEventListener("pointermove", pointerMoveGhost);
+            window.removeEventListener("pointerup", pointerHandleUp);
+        };
+        window.addEventListener("pointermove", pointerMoveGhost);
+        window.addEventListener("pointerup", pointerHandleUp);
+    };
+    const handlePointerMove = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const pos = pt.matrixTransform(svg.getScreenCTM().inverse());
+        if (isOnMakePolygonRef === null || isOnMakePolygonRef === void 0 ? void 0 : isOnMakePolygonRef.current) {
+            const polylineHelper = svg === null || svg === void 0 ? void 0 : svg.querySelector("#polyline-helper");
+            const startPoint = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points[((_a = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) === null || _a === void 0 ? void 0 : _a.length) - 1];
+            ;
+            const newPoints = [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, { x: pos.x, y: pos.y }];
+            const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
+            polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
+            //lin helper from start to move
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), touch && _jsx(Button, { onClick: () => setTouch(false), children: "Stop Touch" }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: {
+                            disabled: [
+                                "node",
+                                "select",
+                                "square",
+                                "circle",
+                                "table-seat-circle",
+                            ].includes(activeTool),
+                        }, centerZoomedOut: true, 
+                        // onTransformed={handleTransformed}
+                        minScale: 0.1, maxScale: 1000, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: [_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10" }), _jsxs(TransformComponent, { wrapperStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: [isLoading && (_jsx("div", { className: "absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: "Loading..." })), _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, 
+                                        // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
+                                        // className="h-screen"
+                                        // onMouseUp={handleMouseUp}
+                                        // onPointerMove={handleMouseMove}
+                                        onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, 
+                                        // onMouseEnter={handleMouseEnter}
+                                        // onMouseUp={handleEnd}
+                                        // onTouchMove={handleMouseMove}
+                                        // onTouchEnd={handleMouseUp}
+                                        // onClick={(e) => {
+                                        //   e.stopPropagation();
+                                        //   handleMouseClick(e);
+                                        // }}
+                                        // onMouseLeave={handleMouseLeave}
+                                        xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                                            // background: backgroundColor,
+                                            background: "black",
+                                            display: "block",
+                                            cursor: activeTool === "ruler" ? "crosshair" : "auto",
+                                            touchAction: "none",
+                                            pointerEvents: "all",
+                                            userSelect: "none",
+                                        }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [
+                                                    ...extraComponentsState,
+                                                    ...componentsState,
+                                                    polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
+                                                ], style: {
+                                                    cursor: getCursorStyle(),
+                                                }, 
+                                                // onClick={handleSelectComponent}
+                                                // onMouseDown={handleMouseDown}
+                                                // onMouseUp={handleMouseUp}
+                                                // onBlur={handleUnSelectComponent}
+                                                selectedComponent: selectedComponent, selectionLines: selectedLines, activeTool: activeTool }), activeTool === "polygon" && (_jsx("polyline", { id: "polyline-helper", stroke: "white", fill: "transparent", strokeWidth: 2 })), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: i * 10 * scale, y1: 0, x2: i * 10 * scale, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10 * scale, x2: widthBoard, y2: i * 10 * scale }, `h-${i}`)))] }))] })] })] })] })] }));
+};
+export default BoardTemplate;
+function getGlobalBBox(svg, el) {
+    var _a;
+    const bbox = el === null || el === void 0 ? void 0 : el.getBBox();
+    // matrix dari element ke screen pixel
+    const m = el === null || el === void 0 ? void 0 : el.getScreenCTM();
+    if (!m)
+        return null;
+    // matrix dari screen pixel ke svg user coords
+    const screenToSvg = (_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse();
+    if (!screenToSvg)
+        return null;
+    function transformPoint(x, y) {
+        const p = new DOMPoint(x, y)
+            .matrixTransform(m)
+            .matrixTransform(screenToSvg);
+        return { x: p.x, y: p.y };
+    }
+    const p1 = transformPoint(bbox.x, bbox.y);
+    const p2 = transformPoint(bbox.x + bbox.width, bbox.y);
+    const p3 = transformPoint(bbox.x + bbox.width, bbox.y + bbox.height);
+    const p4 = transformPoint(bbox.x, bbox.y + bbox.height);
+    const xs = [p1.x, p2.x, p3.x, p4.x];
+    const ys = [p1.y, p2.y, p3.y, p4.y];
+    // const rotation = Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI);
+    return {
+        x: Math.min(...xs),
+        y: Math.min(...ys),
+        width: Math.max(...xs) - Math.min(...xs),
+        height: Math.max(...ys) - Math.min(...ys),
+        // rotation
+    };
+}
+function localToWorld(dx, dy, angle) {
+    const cosR = Math.cos(angle);
+    const sinR = Math.sin(angle);
+    return {
+        x: dx * cosR - dy * sinR,
+        y: dx * sinR + dy * cosR,
+    };
+}
+export function getTranslate(el) {
+    if (!el)
+        return {
+            x: null,
+            y: null,
+        };
+    const t = el.getAttribute("transform") || "";
+    // cari pola translate( x , y )
+    const match = t.match(/translate\(\s*([-\d.]+)[ ,]+([-\d.]+)\s*\)/);
+    if (!match)
+        return { x: 0, y: 0 };
+    return {
+        x: parseFloat(match[1]),
+        y: parseFloat(match[2]),
+    };
+}
+export function getSize(el) {
+    const bbox = el.getBBox();
+    return {
+        width: bbox.width,
+        height: bbox.height,
+    };
+}
+function stabilizeRotation(tx, ty, W, H, oldAngle, newAngle) {
+    const cx = W / 2;
+    const cy = H / 2;
+    const oldA = (oldAngle * Math.PI) / 180;
+    const newA = (newAngle * Math.PI) / 180;
+    // old center global
+    const oldGx = tx + (cx * Math.cos(oldA) - cy * Math.sin(oldA));
+    const oldGy = ty + (cx * Math.sin(oldA) + cy * Math.cos(oldA));
+    // new center global
+    const newGx = tx + (cx * Math.cos(newA) - cy * Math.sin(newA));
+    const newGy = ty + (cx * Math.sin(newA) + cy * Math.cos(newA));
+    // delta shift
+    const dx = oldGx - newGx;
+    const dy = oldGy - newGy;
+    return { tx: tx + dx, ty: ty + dy };
+}
+const SNAP_RADIUS = 10;
+function isClosingPolygon(mouseX, mouseY, points) {
+    const p0 = points[0]; // titik awal
+    const dx = mouseX - p0.x;
+    const dy = mouseY - p0.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    return dist < SNAP_RADIUS;
+}
+function calculateNewSelection(oldSel, pos, // Mouse Position saat ini (World)
+startPos, // Mouse Position saat MouseDown (World)
+side, angleRad // Sudut rotasi selection saat ini
+) {
+    // 1. Hitung selisih mouse di layar (World Delta)
+    const dx = pos.x - startPos.x;
+    const dy = pos.y - startPos.y;
+    // 2. Proyeksikan ke sumbu kotak (Local Delta)
+    // Ini kunci agar narik miring tetap dihitung sebagai lebar/tinggi
+    const localDX = dx * Math.cos(-angleRad) - dy * Math.sin(-angleRad);
+    const localDY = dx * Math.sin(-angleRad) + dy * Math.cos(-angleRad);
+    const rule = RESIZE_RULES[side];
+    // 3. Hitung dimensi baru (selalu positif)
+    const width = Math.max(1, oldSel.width + (rule.widthFactor * localDX));
+    const height = Math.max(1, oldSel.height + (rule.heightFactor * localDY));
+    // 4. Hitung perpindahan Anchor (Local Space)
+    // Berapa banyak (x,y) harus bergeser agar sisi seberang diam
+    const mlX = rule.moveLocalX(localDX, localDY);
+    const mlY = rule.moveLocalY(localDX, localDY);
+    // 5. Putar balik perpindahan ke World Space
+    const worldMX = mlX * Math.cos(angleRad) - mlY * Math.sin(angleRad);
+    const worldMY = mlX * Math.sin(angleRad) + mlY * Math.cos(angleRad);
+    return {
+        x: oldSel.x + worldMX,
+        y: oldSel.y + worldMY,
+        width,
+        height
+    };
+}
+// function mapElementToResize(el: any, oldSel: any, newSel: any): any {
+//   const rx = (el.x - oldSel.x) / oldSel.width;
+//   const ry = (el.y - oldSel.y) / oldSel.height;
+//   const rw = el.width / oldSel.width;
+//   const rh = el.height / oldSel.height;
+//   return {
+//     ...el,
+//     x: newSel.x + rx * newSel.width,
+//     y: newSel.y + ry * newSel.height,
+//     width: rw * newSel.width,
+//     height: rh * newSel.height,
+//     rotation: el.rotation,
+//   };
+// }
+// function mapElementToResize(
+//   el: any,
+//   oldSel: any, // x, y, width, height original
+//   newSel: any, // x, y, width, height hasil resize
+//   angleRad: number
+// ) {
+//   // 1. Hitung jarak elemen dari pojok kiri atas (Top-Left) original di World Space
+//   const dx = el.x - oldSel.x;
+//   const dy = el.y - oldSel.y;
+//   // 2. UN-ROTATE: Ubah jarak World ke jarak Local (seolah-olah kotak tidak miring)
+//   const cosA = Math.cos(-angleRad);
+//   const sinA = Math.sin(-angleRad);
+//   const localX = dx * cosA - dy * sinA;
+//   const localY = dx * sinA + dy * cosA;
+//   // 3. SCALE: Hitung rasio perubahan ukuran
+//   const scaleX = newSel.width / oldSel.width || 1;
+//   const scaleY = newSel.height / oldSel.height || 1;
+//   // 4. Hitung posisi baru di Local Space
+//   const newLocalX = localX * scaleX;
+//   const newLocalY = localY * scaleY;
+//   // 5. RE-ROTATE: Kembalikan posisi lokal ke World Space sesuai rotasi saat ini
+//   const cosA2 = Math.cos(angleRad);
+//   const sinA2 = Math.sin(angleRad);
+//   const newDx = newLocalX * cosA2 - newLocalY * sinA2;
+//   const newDy = newLocalX * sinA2 + newLocalY * cosA2;
+//   return {
+//     ...el,
+//     x: newSel.x + newDx, // Posisi baru = Origin Baru + Jarak Baru yang sudah diputar
+//     y: newSel.y + newDy,
+//     width: el.width * scaleX,
+//     height: el.height * scaleY,
+//   };
+// }
+// function mapElementToResize(
+//   el: any,
+//   oldSel: any,
+//   newSel: any,
+//   angleRad: number // Sudut dari Selection Box
+// ) {
+//   // 1. Hitung Rasio Skala Selection Box
+//   const scaleX_Sel = newSel.width / oldSel.width || 1;
+//   const scaleY_Sel = newSel.height / oldSel.height || 1;
+//   // 2. Hitung Titik Pusat (Penting untuk rotasi)
+//   const cxOld = oldSel.x + oldSel.width / 2;
+//   const cyOld = oldSel.y + oldSel.height / 2;
+//   const cxNew = newSel.x + newSel.width / 2;
+//   const cyNew = newSel.y + newSel.height / 2;
+//   // 3. POSISI: Konversi Global -> Local -> Scale -> Global
+//   // Menggunakan fungsi toLocal dan toGlobal bawaan Anda
+//   const local = toLocal(el.x, el.y, cxOld, cyOld, angleRad);
+//   const newLocalX = local.x * scaleX_Sel;
+//   const newLocalY = local.y * scaleY_Sel;
+//   const global = toGlobal(newLocalX, newLocalY, cxNew, cyNew, angleRad);
+//   // 4. UKURAN: Proyeksi Skala berdasarkan perbedaan rotasi
+//   // Kita hitung seberapa besar pengaruh scaleX/Y seleksi terhadap lebar/tinggi elemen
+//   const elAngleRad = (el.rotation * Math.PI) / 180;
+//   const relativeAngle = elAngleRad - angleRad;
+//   const cosR = Math.abs(Math.cos(relativeAngle));
+//   const sinR = Math.abs(Math.sin(relativeAngle));
+//   // Menentukan skala elemen berdasarkan orientasinya terhadap selection box
+//   // Jika beda 90 derajat, scaleX elemen akan memakai scaleY seleksi
+//   const finalScaleX = (scaleX_Sel * cosR) + (scaleY_Sel * sinR);
+//   const finalScaleY = (scaleX_Sel * sinR) + (scaleY_Sel * cosR);
+//   const newWidth = el.width * finalScaleX;
+//   const newHeight = el.height * finalScaleY;
+//   return {
+//     ...el,
+//     x: global.x,
+//     y: global.y,
+//     width: newWidth,
+//     height: newHeight,
+//     // Update center point properti jika diperlukan
+//     cx: global.x + newWidth / 2,
+//     cy: global.y + newHeight / 2,
+//     rotation: el.rotation,
+//   };
+// }
+function mapElementToResize(el, oldSel, newSel, angleRad) {
+    // 1. Skala selection
+    const scaleX = newSel.width / oldSel.width || 1;
+    const scaleY = newSel.height / oldSel.height || 1;
+    // 2. Center selection
+    const cxOld = oldSel.x + oldSel.width / 2;
+    const cyOld = oldSel.y + oldSel.height / 2;
+    const cxNew = newSel.x + newSel.width / 2;
+    const cyNew = newSel.y + newSel.height / 2;
+    // 3. POSISI (rotate → scale → rotate back)
+    const local = toLocal(el.x, el.y, cxOld, cyOld, angleRad);
+    const scaledLocal = {
+        x: local.x * scaleX,
+        y: local.y * scaleY,
+    };
+    const global = toGlobal(scaledLocal.x, scaledLocal.y, cxNew, cyNew, angleRad);
+    // 4. UKURAN (TANPA trig / rotasi)
+    const newWidth = el.width * scaleX;
+    const newHeight = el.height * scaleY;
+    return Object.assign(Object.assign({}, el), { x: global.x, y: global.y, width: newWidth, height: newHeight, cx: global.x + newWidth / 2, cy: global.y + newHeight / 2, rotation: el.rotation });
+}
+export function getPolygonCenter(points) {
+    if (!points.length) {
+        return { cx: 0, cy: 0 };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of points) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    return {
+        cx: (minX + maxX) / 2,
+        cy: (minY + maxY) / 2,
+    };
+}
+function stabilizeTranslateOnRotate({ points, oldAngle, newAngle, tx, ty, }) {
+    // center polygon (bbox center)
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+    }
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    const r0 = (oldAngle * Math.PI) / 180;
+    const r1 = (newAngle * Math.PI) / 180;
+    const x0 = cx * Math.cos(r0) - cy * Math.sin(r0);
+    const y0 = cx * Math.sin(r0) + cy * Math.cos(r0);
+    const x1 = cx * Math.cos(r1) - cy * Math.sin(r1);
+    const y1 = cx * Math.sin(r1) + cy * Math.cos(r1);
+    return {
+        tx: tx + (x0 - x1),
+        ty: ty + (y0 - y1),
+    };
+}
+function pointsStringToArray(pointsStr) {
+    return pointsStr
+        .trim()
+        .split(/\s+/) // pisah antar titik
+        .map((pair) => {
+        const [x, y] = pair.split(",").map(Number);
+        return { x, y };
+    })
+        .filter((p) => !Number.isNaN(p.x) && !Number.isNaN(p.y));
+}
+function arrayToSvgPointsAttr(points) {
+    return points.map((p) => `${p.x},${p.y}`).join(" ");
+}
+function getSvgElementSize(el) {
+    if (el instanceof SVGRectElement) {
+        return {
+            width: el.width.baseVal.value,
+            height: el.height.baseVal.value,
+        };
+    }
+    if (el instanceof SVGCircleElement) {
+        const r = el.r.baseVal.value;
+        return {
+            width: r * 2,
+            height: r * 2,
+        };
+    }
+    if (el instanceof SVGEllipseElement) {
+        return {
+            width: el.rx.baseVal.value * 2,
+            height: el.ry.baseVal.value * 2,
+        };
+    }
+    return {
+        width: 0,
+        height: 0,
+    };
+}
+export function applyResizeToSvgElement(element, group, resize, inner) {
+    const tagName = element.tagName.toLowerCase();
+    console.log({ resize });
+    switch (tagName) {
+        case "rect":
+        case "image": {
+            element.setAttribute("width", String(resize.width));
+            element.setAttribute("height", String(resize.height));
+            // group.setAttribute("transform", `translate(${resize.x}, ${resize.y})`);
+            // 🔑 translate by CENTER, not top-left
+            group.setAttribute("transform", `translate(${resize.cx - resize.width / 2}, ${resize.cy - resize.height / 2})`);
+            break;
+        }
+        case "circle": {
+            const r = Math.min(resize.width, resize.height) / 2;
+            element.setAttribute("r", String(r));
+            element.setAttribute("cx", String(resize.width / 2));
+            element.setAttribute("cy", String(resize.height / 2));
+            group.setAttribute("transform", `translate(${resize.x}, ${resize.y})`);
+            // inner
+            break;
+        }
+        case "ellipse": {
+            element.setAttribute("rx", String(resize.width / 2));
+            element.setAttribute("ry", String(resize.height / 2));
+            break;
+        }
+        default: {
+            console.warn(`[applyResizeToSvgElement] Unsupported SVG tag: ${tagName}`);
+        }
+    }
+    // translate selalu di group
+}
+function applySelectionToSvg(selectionLines, boxSelection, sel) {
+    selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("transform", `translate(${sel.x}, ${sel.y})`);
+    boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.setAttribute("width", String(sel.width));
+    boxSelection === null || boxSelection === void 0 ? void 0 : boxSelection.setAttribute("height", String(sel.height));
+}
+function applySizeToSvgElement(element, width, height) {
+    const tag = element.tagName.toLowerCase();
+    if (tag === "rect" || tag === "image") {
+        console.log({ width, height });
+        element.setAttribute("width", String(width));
+        element.setAttribute("height", String(height));
+        return;
+    }
+    if (tag === "circle") {
+        const r = Math.max(0, Math.min(width, height) / 2);
+        element.setAttribute("r", String(r));
+        element.setAttribute("cx", String(width / 2));
+        element.setAttribute("cy", String(height / 2));
+        return;
+    }
+    if (tag === "ellipse") {
+        element.setAttribute("rx", String(width / 2));
+        element.setAttribute("ry", String(height / 2));
+        return;
+    }
+}
+const RESIZE_RULES = {
+    "bottom-right": {
+        widthFactor: 1,
+        heightFactor: 1,
+        moveLocalX: () => 0,
+        moveLocalY: () => 0,
+    },
+    "bottom-left": {
+        widthFactor: -1,
+        heightFactor: 1,
+        moveLocalX: (dx) => dx,
+        moveLocalY: () => 0,
+    },
+    "top-left": {
+        widthFactor: -1,
+        heightFactor: -1,
+        moveLocalX: (dx) => dx,
+        moveLocalY: (_, dy) => dy,
+    },
+    "top-right": {
+        widthFactor: 1,
+        heightFactor: -1,
+        moveLocalX: () => 0,
+        moveLocalY: (_, dy) => dy,
+    },
+    left: {
+        widthFactor: -1,
+        heightFactor: 0,
+        moveLocalX: (dx) => dx,
+        moveLocalY: () => 0,
+    },
+    right: {
+        widthFactor: 1,
+        heightFactor: 0,
+        moveLocalX: () => 0,
+        moveLocalY: () => 0,
+    },
+    top: {
+        widthFactor: 0,
+        heightFactor: -1,
+        moveLocalX: () => 0,
+        moveLocalY: (_, dy) => dy,
+    },
+    bottom: {
+        widthFactor: 0,
+        heightFactor: 1,
+        moveLocalX: () => 0,
+        moveLocalY: () => 0,
+    },
+};
+export function applyResizeWithRotation({ element, group, resizeSide, widthOriginal, heightOriginal, deltaLocalX, deltaLocalY, xOriginal, yOriginal, angle, seats, }) {
+    const rule = RESIZE_RULES[resizeSide];
+    let newWidth = widthOriginal;
+    let newHeight = heightOriginal;
+    if (rule.widthFactor !== 0) {
+        newWidth = widthOriginal + rule.widthFactor * deltaLocalX;
+    }
+    if (rule.heightFactor !== 0) {
+        newHeight = heightOriginal + rule.heightFactor * deltaLocalY;
+    }
+    // clamp
+    newWidth = Math.max(0, newWidth);
+    newHeight = Math.max(0, newHeight);
+    // 🔹 apply size (rect / circle / ellipse)
+    applySizeToSvgElement(element, newWidth, newHeight);
+    // 🔹 move anchor (kalau perlu)
+    const moveLocalX = rule.moveLocalX(deltaLocalX, deltaLocalY);
+    const moveLocalY = rule.moveLocalY(deltaLocalX, deltaLocalY);
+    if (moveLocalX !== 0 || moveLocalY !== 0) {
+        const { x: mx, y: my } = localToWorld(moveLocalX, moveLocalY, angle);
+        group.setAttribute("transform", `translate(${xOriginal + mx}, ${yOriginal + my})`);
+    }
+}
+function getRotation(transformList) {
+    for (let i = 0; i < (transformList === null || transformList === void 0 ? void 0 : transformList.numberOfItems); i++) {
+        const t = transformList.getItem(i);
+        if (t.type === SVGTransform.SVG_TRANSFORM_ROTATE) {
+            return t.angle;
+        }
+    }
+    return 0;
+}
+function toLocal(x, y, cx, cy, angle) {
+    const dx = x - cx;
+    const dy = y - cy;
+    const cos = Math.cos(-angle);
+    const sin = Math.sin(-angle);
+    return {
+        x: dx * cos - dy * sin,
+        y: dx * sin + dy * cos,
+    };
+}
+function toGlobal(lx, ly, cx, cy, angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return {
+        x: cx + lx * cos - ly * sin,
+        y: cy + lx * sin + ly * cos,
+    };
+}