seat-editor 3.3.35 → 3.3.37

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

@@ -0,0 +1,807 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+import Layers from "../../components/layer-v2";
+import { 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";
+const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
+    var _a, _b;
+    const dispatch = useAppDispatch();
+    const theme = useAppSelector((state) => state.theme);
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const [widthBoard, setWidthBoard] = useState(0);
+    const [heightBoard, setHeightBoard] = useState(0);
+    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 activeTool = useAppSelector((state) => state.tool.active);
+    const grid = useAppSelector((state) => state.tool.grid);
+    const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, } = useAppSelector((state) => state.board);
+    const isTouching = useRef(false);
+    useEffect(() => {
+        var _a;
+        if (activeTool !== ((_a = shadowShape[0]) === null || _a === void 0 ? void 0 : _a.shape)) {
+            setShadowShape([]);
+        }
+    }, [activeTool]);
+    // const [isDragging, setIsDragging] = useState(false);
+    const [resizeDirection, setResizeDirection] = useState(null);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
+    const screenCTMRef = useRef(null);
+    const dragIndex = useRef(null);
+    const [componentsState, setComponentsState] = useState([]);
+    const [extraComponentsState, setExtraComponentsState] = useState([]);
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const isSyncingFromRedux = useRef(false);
+    const startPos = useRef({ x: 0, y: 0 });
+    const isDragging = useRef(false);
+    const moveComponent = useRef(false);
+    const debouncedSyncToReduxSelected = useRef(debounce((data) => {
+        throttledDispatch(data);
+    }, 300)).current;
+    const debouncedSyncComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "board/setNewComponents",
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncExtraComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "board/setNewExtraComponents",
+            payload: data,
+        });
+    }, 300));
+    // Redux → Local
+    useEffect(() => {
+        if (flagChange) {
+            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
+    useEffect(() => {
+        if (isSyncingFromRedux.current) {
+            isSyncingFromRedux.current = false;
+            return;
+        }
+        if (!isEqual(componentsState, componentsProps) &&
+            !isEqual(componentsState, [])) {
+            debouncedSyncComponents.current(componentsState);
+        }
+        if (!isEqual(extraComponentsState, extraComponentsProps) &&
+            !isEqual(extraComponentsState, [])) {
+            debouncedSyncExtraComponents.current(extraComponentsState);
+        }
+    }, [componentsState, extraComponentsState]);
+    const handleAddComponent = (shape) => {
+        dispatch({
+            type: activeTool === "text"
+                ? "board/setExtraComponent"
+                : "board/addComponent",
+            payload: Object.assign(Object.assign({}, shape), { fill: theme === null || theme === void 0 ? void 0 : theme.primaryColor }),
+        });
+        const payload = Object.assign(Object.assign({}, shape), { fill: theme === null || theme === void 0 ? void 0 : theme.primaryColor });
+        if (activeTool === "text") {
+            setExtraComponentsState((prev) => [...prev, payload]);
+        }
+        else {
+            setComponentsState((prev) => [...prev, payload]);
+        }
+    };
+    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 createShape = (x, y, fill) => ({
+        x,
+        y,
+        width: 50,
+        height: 50,
+        shape: activeTool,
+        id: Date.now(),
+        fill,
+        rotation: activeTool === "diamond" ? 45 : 0,
+        seatCount: activeTool === "table-seat-circle" ? 6 : 0,
+        openSpace: activeTool === "table-seat-circle" ? 0 : undefined,
+        seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
+        text: activeTool === "text" ? "Text" : "",
+        fontColor: activeTool === "text" ? "#DADADA" : undefined,
+        points: [],
+    });
+    const getCoords = (e) => {
+        const svgRect = svgRef.current.getBoundingClientRect();
+        if ("touches" in e) {
+            return {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        return {
+            x: e.clientX - svgRect.x,
+            y: e.clientY - svgRect.y,
+        };
+    };
+    const handleMouseDown = (e, item, direction) => {
+        if (!item && !direction) {
+            if (["node", "select"].includes(activeTool)) {
+                setSelectedComponent(null);
+                dispatch({ type: "panel/setSelectedComponent", payload: null });
+            }
+            return;
+        }
+        if (["node", "select"].includes(activeTool) && item && !direction) {
+            const coords = getCoords(e);
+            // startPos.current = { x: e.clientX, y: e.clientY };
+            // const rectBox = (e?.target as HTMLElement).getBoundingClientRect();
+            if (activeTool === "node") {
+                moveComponent.current = true;
+                isDragging.current = false;
+                dispatch({ type: "panel/setShow", payload: false });
+                // dispatch({
+                //   type: "tool/setActiveTool",
+                //   payload: "node",
+                // });
+            }
+            if (activeTool === "select") {
+                isDragging.current = true;
+                moveComponent.current = false;
+                dispatch({ type: "panel/setShow", payload: true });
+            }
+            const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
+            setDragOffset({
+                x: coords.x - rectBox.left + ((item === null || item === void 0 ? void 0 : item.strokeWidth) || 0),
+                y: coords.y - rectBox.top + ((item === null || item === void 0 ? void 0 : item.strokeWidth) || 0),
+            });
+            setSelectedComponent(item);
+            dispatch({
+                type: "panel/setSelectedComponent",
+                payload: item,
+            });
+            // const handleMouseMove = (event: MouseEvent) => {
+            //   const dx = Math.abs(event.clientX - startPos.current.x);
+            //   const dy = Math.abs(event.clientY - startPos.current.y);
+            //   if (dx > 1 || dy > 1) {
+            //     if (!moveComponent.current && item) {
+            //       dispatch({ type: "panel/setSelectedComponent", payload: item });
+            //       setSelectedComponent(item);
+            //     }
+            //     moveComponent.current = true;
+            //   }
+            // };
+            // const handleMouseUp = () => {
+            //   document.removeEventListener("mousemove", handleMouseMove);
+            //   document.removeEventListener("mouseup", handleMouseUp);
+            //   if (moveComponent.current) {
+            //     moveComponent.current = false;
+            //   } else {
+            //     isDragging.current = true;
+            //     moveComponent.current = false;
+            //     setResizeDirection(direction);
+            //     if (item) {
+            //       dispatch({ type: "panel/setSelectedComponent", payload: item });
+            //       dispatch({ type: "panel/setShow", payload: true });
+            //       setSelectedComponent(item);
+            //     }
+            //   }
+            // };
+            // Pasang ke `document` agar global
+            // document.addEventListener("mousemove", handleMouseMove);
+            // document.addEventListener("mouseup", handleMouseUp);
+        }
+        // if(activeTool === "select" && item && !direction) {
+        //   dispatch({
+        //     type: "tool/setActiveTool",
+        //     payload: "node",
+        //   });
+        // }
+        if (activeTool === "select" && direction) {
+            setResizeDirection(direction);
+        }
+    };
+    const handleMouseEnter = () => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+    };
+    const handleMouseLeave = () => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+        setShadowShape([]);
+    };
+    const handleMouseClick = (e) => {
+        if (["select", "node"].includes(activeTool) && selectedComponent) {
+            handleUnSelectComponent();
+            return;
+        }
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool)) {
+            return;
+        }
+        const { x, y } = getSvgCoords(e);
+        setStartPoint({ x, y });
+        handleAddComponent(createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor));
+    };
+    const throttledDispatch = useCallback(throttle((component) => {
+        // dispatch({
+        //   type: "board/updateComponent",
+        //   payload: component,
+        // });
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: component,
+        });
+    }, 16), // 16ms ≈ 60fps
+    [dispatch]);
+    const handleMouseMove = (e) => {
+        var _a;
+        if ([
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+            "ruler",
+        ].includes(activeTool)) {
+            const { x, y } = getSvgCoords(e);
+            setShadowShape([createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor)]);
+            return;
+        }
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" && lockBackground)
+            return;
+        if (activeTool === "node" &&
+            selectedComponent &&
+            moveComponent.current &&
+            dragOffset &&
+            // !isTouching.current &&
+            !resizeDirection) {
+            const workspaceRect = e.currentTarget.getBoundingClientRect();
+            const coords = getCoords(e);
+            const newX = coords.x - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
+            const newY = coords.y - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
+            let newPosition = {
+                x: newX / scale,
+                y: newY / scale,
+            };
+            requestAnimationFrame(() => {
+                setComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), { x: newPosition.x, y: newPosition.y });
+                        }
+                        return component;
+                    });
+                });
+                setExtraComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), { x: newPosition.x, y: newPosition.y });
+                        }
+                        return component;
+                    });
+                });
+                setSelectedComponent((prev) => {
+                    return Object.assign(Object.assign({}, prev), { x: newPosition.x, y: newPosition.y });
+                });
+            });
+            debouncedSyncToReduxSelected(Object.assign(Object.assign({}, selectedComponent), newPosition));
+            return;
+        }
+        if (activeTool === "select" && resizeDirection) {
+            const coords = getCoords(e);
+            const workspaceRect = e.currentTarget.getBoundingClientRect();
+            const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
+            if (!instance)
+                return;
+            const { positionX, positionY } = instance.transformState;
+            const currentX = (coords.x - workspaceRect.left + 25 - positionX) / scale;
+            const currentY = (coords.y - workspaceRect.top + 25 - positionY) / scale;
+            const { x, y, width, height } = selectedComponent;
+            const relativeX = coords.x - workspaceRect.left;
+            const relativeY = coords.y - workspaceRect.top;
+            // 🧠 Ini posisi world (unscaled)
+            const worldX = (relativeX - positionX) / scale;
+            const worldY = (relativeY - positionY) / scale;
+            let newShape = Object.assign({}, selectedComponent);
+            if (!["table-seat-circle", "table-seat-square"].includes(selectedComponent.shape)) {
+                switch (resizeDirection) {
+                    case "top-left":
+                        // if (currentX < x || currentY < y) return;
+                        newShape.width = width + (x - currentX);
+                        newShape.height = height + (y - currentY);
+                        newShape.x = currentX;
+                        newShape.y = currentY;
+                        break;
+                    case "top-right":
+                        newShape.width = currentX - newShape.x;
+                        newShape.height = newShape.height + (newShape.y - currentY);
+                        newShape.y = currentY;
+                        break;
+                    case "bottom-left":
+                        newShape.width += newShape.x - currentX;
+                        newShape.height = currentY - newShape.y;
+                        newShape.x = currentX;
+                        break;
+                    case "bottom-right":
+                        newShape.width = currentX - newShape.x;
+                        newShape.height = currentY - newShape.y;
+                        break;
+                    case "left-center":
+                        newShape.width += newShape.x - currentX;
+                        newShape.x = currentX;
+                        break;
+                    case "right-center":
+                        newShape.width = currentX - newShape.x;
+                        break;
+                    case "top-center": {
+                        const delta = newShape.y - worldY;
+                        newShape.height += delta;
+                        newShape.y = worldY;
+                        break;
+                    }
+                    case "bottom-center":
+                        newShape.height = currentY - newShape.y;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            else if (["table-seat-circle", "table-seat-square"].includes(selectedComponent.shape)) {
+                switch (resizeDirection) {
+                    case "top-left":
+                        newShape.width = width + (x - currentX);
+                        newShape.height = height + (y - currentY);
+                        newShape.x = currentX;
+                        newShape.y = currentY;
+                        break;
+                    case "top-right":
+                        newShape.width = currentX - newShape.x;
+                        newShape.height = newShape.height + (newShape.y - currentY);
+                        newShape.y = currentY;
+                        break;
+                    case "bottom-left":
+                        newShape.width += newShape.x - currentX;
+                        newShape.height = currentY - newShape.y;
+                        newShape.x = currentX;
+                        break;
+                    case "bottom-right":
+                        newShape.width = currentX - newShape.x;
+                        newShape.height = currentY - newShape.y;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            requestAnimationFrame(() => {
+                setComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), newShape);
+                        }
+                        return component;
+                    });
+                });
+                setExtraComponentsState((prev) => {
+                    return prev.map((component) => {
+                        if (component.id === selectedComponent.id) {
+                            return Object.assign(Object.assign({}, component), newShape);
+                        }
+                        return component;
+                    });
+                });
+                setSelectedComponent(newShape);
+            });
+            debouncedSyncToReduxSelected(newShape);
+        }
+    };
+    const handleMouseUp = () => {
+        if (["select", "node"].includes(activeTool) && selectedComponent) {
+            setResizeDirection(null);
+            moveComponent.current = false;
+        }
+    };
+    useEffect(() => {
+        if (containerRef.current) {
+            setWidthBoard(containerRef.current.offsetWidth);
+            setHeightBoard(containerRef.current.offsetHeight);
+        }
+    }, [(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, (_b = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight, viewOnly]);
+    const handleUnSelectComponent = () => {
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        setSelectedComponent(null);
+    };
+    // const handleTouchStart = (
+    //   e: React.TouchEvent<
+    //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
+    //   >,
+    //   items: any,
+    //   direction?: string
+    // ) => {
+    //   if (activeTool === "node" && !direction && items) {
+    //     // dispatch({ type: "panel/setShow", payload: false });
+    //     // setMoveComponent(true);
+    //     moveComponent.current = true;
+    //     isTouching.current = true;
+    //     // dispatch({ type: "panel/setSelectedComponent", payload: item });
+    //     onSelectComponent && onSelectComponent(items);
+    //     dispatch({ type: "panel/setSelectedComponent", payload: items });
+    //     setSelectedComponent(items);
+    //     // selectedComponentRef.current = items;
+    //     const touch = e.touches[0];
+    //     const svg = e.currentTarget.ownerSVGElement;
+    //     const pt = svg.createSVGPoint();
+    //     if (!svg) return;
+    //     pt.x = touch.clientX;
+    //     pt.y = touch.clientY;
+    //     const cursorpt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
+    //     screenCTMRef.current = svg.getScreenCTM()?.inverse() || null;
+    //     setDragOffset({
+    //       x: cursorpt.x - items.x,
+    //       y: cursorpt.y - items.y,
+    //     });
+    //     // dragOffset.current = {
+    //     //   x: cursorpt.x - items.x,
+    //     //   y: cursorpt.y - items.y
+    //     // }
+    //   } else if (activeTool === "select" && direction) {
+    //     setResizeDirection(direction);
+    //     // setIsDragging(true);
+    //     // setMoveComponent(true);
+    //     moveComponent.current = true;
+    //     isDragging.current = true;
+    //     isTouching.current = true;
+    //     const touch = e.touches[0];
+    //     const svg = e.currentTarget.ownerSVGElement;
+    //     const pt = svg.createSVGPoint();
+    //     if (!svg) return;
+    //     pt.x = touch.clientX;
+    //     pt.y = touch.clientY;
+    //     const cursorpt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
+    //     screenCTMRef.current = svg.getScreenCTM()?.inverse() || null;
+    //     setDragOffset({
+    //       x: cursorpt.x - items.x,
+    //       y: cursorpt.y - items.y,
+    //     });
+    //     // dragOffset.current = {
+    //     //   x: cursorpt.x - items.x,
+    //     //   y: cursorpt.y - items.y
+    //     // }
+    //   }
+    // };
+    // const handleTouchMove = (
+    //   e: React.TouchEvent<
+    //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
+    //   >
+    // ) => {
+    //   if (
+    //     activeTool === "node" &&
+    //     moveComponent &&
+    //     isTouching.current &&
+    //     !resizeDirection
+    //   ) {
+    //     isDragging.current = true;
+    //     moveComponent.current = true;
+    //     const touch = e.touches[0];
+    //     const svg = e.currentTarget.ownerSVGElement;
+    //     if (!svg) return;
+    //     const pt = svg.createSVGPoint();
+    //     pt.x = touch.clientX;
+    //     pt.y = touch.clientY;
+    //     const cursorpt = pt.matrixTransform(screenCTMRef.current);
+    //     requestAnimationFrame(() => {
+    //       if (selectedComponent?.shape != "background") {
+    //         setComponentsState((prev) => {
+    //           return prev.map((component) => {
+    //             if (component.id === selectedComponent.id) {
+    //               return {
+    //                 ...component,
+    //                 x: cursorpt.x - dragOffset?.x,
+    //                 y: cursorpt.y - dragOffset?.y,
+    //               };
+    //             }
+    //             return component;
+    //           });
+    //         });
+    //       }
+    //       if (selectedComponent?.shape == "background") {
+    //         setExtraComponentsState((prev) => {
+    //           return prev.map((component) => {
+    //             if (component.id === selectedComponent.id) {
+    //               return {
+    //                 ...component,
+    //                 x: cursorpt.x - dragOffset?.x,
+    //                 y: cursorpt.y - dragOffset?.y,
+    //               };
+    //             }
+    //             return component;
+    //           });
+    //         });
+    //       }
+    //       setSelectedComponent({
+    //         ...selectedComponent,
+    //         x: cursorpt.x - dragOffset?.x,
+    //         y: cursorpt.y - dragOffset?.y,
+    //       });
+    //     });
+    //     // updateComponentRef({
+    //     //   ...(typeof selectedComponent === "object" && selectedComponent !== null
+    //     //     ? selectedComponent
+    //     //     : {}),
+    //     //   x: cursorpt.x - dragOffset?.current.x,
+    //     //   y: cursorpt.y - dragOffset?.current.y,
+    //     // });
+    //   } else if (
+    //     activeTool === "select" &&
+    //     moveComponent.current &&
+    //     isTouching.current &&
+    //     resizeDirection
+    //   ) {
+    //     // setIsDragging(true);
+    //     isDragging.current = true;
+    //     const touch = e.touches[0];
+    //     const svg = e.currentTarget.ownerSVGElement;
+    //     if (!svg) return;
+    //     const pt = svg.createSVGPoint();
+    //     pt.x = touch.clientX;
+    //     pt.y = touch.clientY;
+    //     const cursorpt = pt.matrixTransform(screenCTMRef.current);
+    //     let newShape = { ...selectedComponent };
+    //     switch (resizeDirection) {
+    //       case "top-left":
+    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
+    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
+    //         newShape.x = cursorpt.x;
+    //         newShape.y = cursorpt.y;
+    //         break;
+    //       case "top-right":
+    //         newShape.width = cursorpt.x - newShape.x;
+    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
+    //         newShape.y = cursorpt.y;
+    //         break;
+    //       case "bottom-left":
+    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
+    //         newShape.height = cursorpt.y - newShape.y;
+    //         newShape.x = cursorpt.x;
+    //         break;
+    //       case "bottom-right":
+    //         newShape.width = cursorpt.x - newShape.x;
+    //         newShape.height = cursorpt.y - newShape.y;
+    //         break;
+    //       case "top-center":
+    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
+    //         newShape.y = cursorpt.y;
+    //         break;
+    //       case "bottom-center":
+    //         newShape.height = cursorpt.y - newShape.y;
+    //         break;
+    //       case "right-center":
+    //         newShape.width = cursorpt.x - newShape.x;
+    //         break;
+    //       case "left-center":
+    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
+    //         newShape.x = cursorpt.x;
+    //         break;
+    //       default:
+    //         break;
+    //     }
+    //     // updateComponentRef({
+    //     //   ...(typeof selectedComponent === "object" && selectedComponent !== null
+    //     //     ? selectedComponent
+    //     //     : {}),
+    //     //   ...newShape,
+    //     // });
+    //     requestAnimationFrame(() => {
+    //       setComponentsState((prev) => {
+    //         return prev.map((component) => {
+    //           if (component.id === selectedComponent.id) {
+    //             return {
+    //               ...component,
+    //               ...newShape,
+    //             };
+    //           }
+    //           return component;
+    //         });
+    //       });
+    //       setExtraComponentsState((prev) => {
+    //         return prev.map((component) => {
+    //           if (component.id === selectedComponent.id) {
+    //             return {
+    //               ...component,
+    //               ...newShape,
+    //             };
+    //           }
+    //           return component;
+    //         });
+    //       });
+    //       setSelectedComponent({
+    //         ...selectedComponent,
+    //         ...newShape,
+    //       });
+    //     });
+    //     debouncedSyncToReduxSelected(newShape);
+    //   }
+    // };
+    // const handleTouchEnd = () => {
+    //   // setMoveComponent(false);
+    //   // setIsDragging(false);
+    //   moveComponent.current = false;
+    //   isDragging.current = false;
+    //   isTouching.current = false;
+    //   setResizeDirection(null);
+    // };
+    const getCursorStyle = () => {
+        if (activeTool === "select" && moveComponent.current) {
+            return "grabbing";
+        }
+        else if (activeTool === "select" && resizeDirection) {
+            return "grab";
+        }
+        else if (activeTool === "grab") {
+            return "grab";
+        }
+        else if (activeTool === "ruler") {
+            return "crosshair";
+        }
+    };
+    const renderMiniMap = () => {
+        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                        background: "#f5f5f5",
+                        display: "block",
+                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
+                        // onClick={handleSelectComponent}
+                        // onMouseDown={handleMouseDown}
+                        // onMouseUp={handleMouseUp}
+                        // onBlur={handleUnSelectComponent}
+                        selectedComponent: selectedComponent }) }) }) }));
+    };
+    const handelZoomIn = () => {
+        var _a;
+        if (activeTool !== "grab") {
+            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 handleSelectComponent = (item: Component) => {
+    //   if (activeTool === "select" && item) {
+    //     if (item.shape === "background") {
+    //       dispatch({ type: "panel/setSelectedComponent", payload: item });
+    //       setSelectedComponent(item);
+    //       return;
+    //     }
+    //     if (item.id === selectedComponent?.id) {
+    //       handleUnSelectComponent();
+    //       return;
+    //     }
+    //     dispatch({ type: "panel/setSelectedComponent", payload: item });
+    //     setSelectedComponent(item);
+    //     // setSelectedComponent(item);
+    //     throttledDispatch(item);
+    //   }
+    // };
+    // activeTool === "select" &&
+    //     moveComponent &&
+    //     isTouching.current &&
+    //     !resizeDirection
+    const [nodes, setNodes] = useState([
+        { x: 80, y: 40 },
+        { x: 220, y: 40 },
+        { x: 260, y: 160 },
+        { x: 40, y: 160 },
+    ]);
+    const addNode = () => {
+        if (nodes.length < 30) {
+            const midIndex = Math.floor(nodes.length / 2);
+            const prev = nodes[midIndex - 1];
+            const curr = nodes[midIndex];
+            const newNode = {
+                x: (prev.x + curr.x) / 2,
+                y: (prev.y + curr.y) / 2,
+            };
+            const newNodes = [...nodes];
+            newNodes.splice(midIndex, 0, newNode);
+            setNodes(newNodes);
+        }
+    };
+    const removeNode = () => {
+        if (nodes.length > 3) {
+            const midIndex = Math.floor(nodes.length / 2);
+            const newNodes = [...nodes];
+            newNodes.splice(midIndex, 1);
+            setNodes(newNodes);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut }), _jsx(Button, { onClick: addNode, children: "Add Node" }), _jsx(Button, { onClick: removeNode, children: "Remove Node" })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, children: [scale > 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                    overflow: "hidden",
+                                }, contentStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, 
+                                    // onMouseEnter={handleMouseEnter}
+                                    // onMouseUp={handleEnd}
+                                    onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleMouseClick(e);
+                                    }, 
+                                    // onMouseLeave={handleMouseLeave}
+                                    xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                                        background: backgroundColor,
+                                        display: "block",
+                                        cursor: activeTool === "ruler" ? "crosshair" : "auto",
+                                        touchAction: "none",
+                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
+                                                cursor: getCursorStyle(),
+                                            }, 
+                                            // onClick={handleSelectComponent}
+                                            onMouseDown: handleMouseDown, 
+                                            // onMouseUp={handleMouseUp}
+                                            // onBlur={handleUnSelectComponent}
+                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / 10 }, (_, i) => (_jsx("line", { x1: i * 10, y1: 0, x2: i * 10, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / 10 }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10, x2: widthBoard, y2: i * 10 }, `h-${i}`)))] }))] }) })] })] })] }));
+};
+export default BoardTemplate;