seat-editor 2.0.0 → 2.1.1

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

@@ -1,863 +0,0 @@
-"use client";
-import React, { 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-v3";
-import { throttle } from "lodash";
-import ModalPreview from "../../components/modal-preview";
-import LayerView from "../view";
-import { isEqual, debounce } from "lodash";
-import { ZoomIn, ZoomOut } from "lucide-react";
-import { Button } from "antd";
-const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
-    const dispatch = useAppDispatch();
-    const theme = useAppSelector((state) => state.theme);
-    const transformRef = useRef(null);
-    const containerRef = useRef(null);
-    const [widthBoard, setWidthBoard] = useState(20000);
-    const [heightBoard, setHeightBoard] = useState(20000);
-    const svgRef = useRef(null);
-    const [shadowShape, setShadowShape] = useState([]);
-    const [startPoint, setStartPoint] = useState(null);
-    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-    // const [moveComponent, setMoveComponent] = useState(false);
-    const [scale, setScale] = useState(1);
-    const 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 / scale,
-        height: 50 / scale,
-        shape: activeTool,
-        id: Date.now(),
-        fill,
-        rotation: activeTool === "diamond" ? 45 : 0,
-        seatCount: activeTool === "table-seat-circle" ? 6 : 0,
-        openSpace: activeTool === "table-seat-circle" ? 0 : undefined,
-        seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
-        text: activeTool === "text" ? "Text" : "",
-        fontColor: activeTool === "text" ? "#DADADA" : undefined,
-        points: [],
-    });
-    const getCoords = (e) => {
-        const svgRect = svgRef.current.getBoundingClientRect();
-        if ("touches" in e) {
-            return {
-                x: e.touches[0].clientX,
-                y: e.touches[0].clientY,
-            };
-        }
-        return {
-            x: e.clientX - svgRect.x,
-            y: e.clientY - svgRect.y,
-        };
-    };
-    const handleMouseDown = (e, item, direction) => {
-        if (!item && !direction) {
-            if (["node", "select"].includes(activeTool)) {
-                setSelectedComponent(null);
-                dispatch({ type: "panel/setSelectedComponent", payload: null });
-            }
-            return;
-        }
-        if (["node", "select"].includes(activeTool) && item && !direction) {
-            const coords = getCoords(e);
-            // startPos.current = { x: e.clientX, y: e.clientY };
-            // const rectBox = (e?.target as HTMLElement).getBoundingClientRect();
-            if (activeTool === "node") {
-                moveComponent.current = true;
-                isDragging.current = false;
-                dispatch({ type: "panel/setShow", payload: false });
-                // dispatch({
-                //   type: "tool/setActiveTool",
-                //   payload: "node",
-                // });
-            }
-            if (activeTool === "select") {
-                isDragging.current = true;
-                moveComponent.current = false;
-                dispatch({ type: "panel/setShow", payload: true });
-            }
-            const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-            setDragOffset({
-                x: coords.x - rectBox.left + ((item === null || item === void 0 ? void 0 : item.strokeWidth) || 0),
-                y: coords.y - rectBox.top + ((item === null || item === void 0 ? void 0 : item.strokeWidth) || 0),
-            });
-            setSelectedComponent(item);
-            dispatch({
-                type: "panel/setSelectedComponent",
-                payload: item,
-            });
-            // const handleMouseMove = (event: MouseEvent) => {
-            //   const dx = Math.abs(event.clientX - startPos.current.x);
-            //   const dy = Math.abs(event.clientY - startPos.current.y);
-            //   if (dx > 1 || dy > 1) {
-            //     if (!moveComponent.current && item) {
-            //       dispatch({ type: "panel/setSelectedComponent", payload: item });
-            //       setSelectedComponent(item);
-            //     }
-            //     moveComponent.current = true;
-            //   }
-            // };
-            // const handleMouseUp = () => {
-            //   document.removeEventListener("mousemove", handleMouseMove);
-            //   document.removeEventListener("mouseup", handleMouseUp);
-            //   if (moveComponent.current) {
-            //     moveComponent.current = false;
-            //   } else {
-            //     isDragging.current = true;
-            //     moveComponent.current = false;
-            //     setResizeDirection(direction);
-            //     if (item) {
-            //       dispatch({ type: "panel/setSelectedComponent", payload: item });
-            //       dispatch({ type: "panel/setShow", payload: true });
-            //       setSelectedComponent(item);
-            //     }
-            //   }
-            // };
-            // Pasang ke `document` agar global
-            // document.addEventListener("mousemove", handleMouseMove);
-            // document.addEventListener("mouseup", handleMouseUp);
-        }
-        // if(activeTool === "select" && item && !direction) {
-        //   dispatch({
-        //     type: "tool/setActiveTool",
-        //     payload: "node",
-        //   });
-        // }
-        if (activeTool === "select" && direction) {
-            setResizeDirection(direction);
-        }
-    };
-    const handleMouseEnter = () => {
-        if (![
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool))
-            return;
-    };
-    const handleMouseLeave = () => {
-        if (![
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool))
-            return;
-        setShadowShape([]);
-    };
-    const handleMouseClick = (e) => {
-        if (["select", "node"].includes(activeTool) && selectedComponent) {
-            handleUnSelectComponent();
-            return;
-        }
-        if (![
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool)) {
-            return;
-        }
-        const { x, y } = getSvgCoords(e);
-        setStartPoint({ x, y });
-        handleAddComponent(createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor));
-    };
-    const throttledDispatch = useCallback(throttle((component) => {
-        // dispatch({
-        //   type: "board/updateComponent",
-        //   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 - 50 - positionX) / scale;
-            const currentY = (coords.y + workspaceRect.top - positionY) / scale;
-            const { x, y, width, height } = selectedComponent;
-            let newShape = Object.assign({}, selectedComponent);
-            switch (resizeDirection) {
-                case "top-left":
-                    newShape.width = width + (x - currentX);
-                    newShape.height = height + (y - currentY);
-                    newShape.x = currentX;
-                    newShape.y = currentY;
-                    break;
-                case "top-right":
-                    newShape.width = currentX - newShape.x;
-                    newShape.height = newShape.height + (newShape.y - currentY);
-                    newShape.y = currentY;
-                    break;
-                case "bottom-left":
-                    newShape.width += newShape.x - currentX;
-                    newShape.height = currentY - newShape.y;
-                    newShape.x = currentX;
-                    break;
-                case "bottom-right":
-                    newShape.width = currentX - newShape.x;
-                    newShape.height = currentY - newShape.y;
-                    break;
-                case "left":
-                    newShape.width += newShape.x - currentX;
-                    newShape.x = currentX;
-                    break;
-                case "right":
-                    newShape.width = currentX - newShape.x;
-                    break;
-                case "top": {
-                    newShape.height += newShape.y - currentY;
-                    newShape.y = currentY;
-                    break;
-                }
-                case "bottom":
-                    newShape.height = currentY - newShape.y;
-                    break;
-                default:
-                    break;
-            }
-            requestAnimationFrame(() => {
-                setComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), newShape);
-                        }
-                        return component;
-                    });
-                });
-                setExtraComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), newShape);
-                        }
-                        return component;
-                    });
-                });
-                setSelectedComponent(newShape);
-            });
-            debouncedSyncToReduxSelected(newShape);
-        }
-    };
-    const handleMouseUp = () => {
-        if (["select", "node"].includes(activeTool) && selectedComponent) {
-            setResizeDirection(null);
-            moveComponent.current = false;
-        }
-    };
-    // useEffect(() => {
-    //   if (containerRef.current) {
-    //     setWidthBoard(containerRef.current.offsetWidth);
-    //     setHeightBoard(containerRef.current.offsetHeight);
-    //   }
-    // }, [
-    //   containerRef?.current?.offsetWidth,
-    //   containerRef?.current?.offsetHeight,
-    //   viewOnly,
-    // ]);
-    const handleUnSelectComponent = () => {
-        dispatch({ type: "panel/setSelectedComponent", payload: null });
-        setSelectedComponent(null);
-    };
-    // const handleTouchStart = (
-    //   e: React.TouchEvent<
-    //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-    //   >,
-    //   items: any,
-    //   direction?: string
-    // ) => {
-    //   if (activeTool === "node" && !direction && items) {
-    //     // dispatch({ type: "panel/setShow", payload: false });
-    //     // setMoveComponent(true);
-    //     moveComponent.current = true;
-    //     isTouching.current = true;
-    //     // dispatch({ type: "panel/setSelectedComponent", payload: item });
-    //     onSelectComponent && onSelectComponent(items);
-    //     dispatch({ type: "panel/setSelectedComponent", payload: items });
-    //     setSelectedComponent(items);
-    //     // selectedComponentRef.current = items;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     const pt = svg.createSVGPoint();
-    //     if (!svg) return;
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-    //     screenCTMRef.current = svg.getScreenCTM()?.inverse() || null;
-    //     setDragOffset({
-    //       x: cursorpt.x - items.x,
-    //       y: cursorpt.y - items.y,
-    //     });
-    //     // dragOffset.current = {
-    //     //   x: cursorpt.x - items.x,
-    //     //   y: cursorpt.y - items.y
-    //     // }
-    //   } else if (activeTool === "select" && direction) {
-    //     setResizeDirection(direction);
-    //     // setIsDragging(true);
-    //     // setMoveComponent(true);
-    //     moveComponent.current = true;
-    //     isDragging.current = true;
-    //     isTouching.current = true;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     const pt = svg.createSVGPoint();
-    //     if (!svg) return;
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-    //     screenCTMRef.current = svg.getScreenCTM()?.inverse() || null;
-    //     setDragOffset({
-    //       x: cursorpt.x - items.x,
-    //       y: cursorpt.y - items.y,
-    //     });
-    //     // dragOffset.current = {
-    //     //   x: cursorpt.x - items.x,
-    //     //   y: cursorpt.y - items.y
-    //     // }
-    //   }
-    // };
-    // const handleTouchMove = (
-    //   e: React.TouchEvent<
-    //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-    //   >
-    // ) => {
-    //   if (
-    //     activeTool === "node" &&
-    //     moveComponent &&
-    //     isTouching.current &&
-    //     !resizeDirection
-    //   ) {
-    //     isDragging.current = true;
-    //     moveComponent.current = true;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     if (!svg) return;
-    //     const pt = svg.createSVGPoint();
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(screenCTMRef.current);
-    //     requestAnimationFrame(() => {
-    //       if (selectedComponent?.shape != "background") {
-    //         setComponentsState((prev) => {
-    //           return prev.map((component) => {
-    //             if (component.id === selectedComponent.id) {
-    //               return {
-    //                 ...component,
-    //                 x: cursorpt.x - dragOffset?.x,
-    //                 y: cursorpt.y - dragOffset?.y,
-    //               };
-    //             }
-    //             return component;
-    //           });
-    //         });
-    //       }
-    //       if (selectedComponent?.shape == "background") {
-    //         setExtraComponentsState((prev) => {
-    //           return prev.map((component) => {
-    //             if (component.id === selectedComponent.id) {
-    //               return {
-    //                 ...component,
-    //                 x: cursorpt.x - dragOffset?.x,
-    //                 y: cursorpt.y - dragOffset?.y,
-    //               };
-    //             }
-    //             return component;
-    //           });
-    //         });
-    //       }
-    //       setSelectedComponent({
-    //         ...selectedComponent,
-    //         x: cursorpt.x - dragOffset?.x,
-    //         y: cursorpt.y - dragOffset?.y,
-    //       });
-    //     });
-    //     // updateComponentRef({
-    //     //   ...(typeof selectedComponent === "object" && selectedComponent !== null
-    //     //     ? selectedComponent
-    //     //     : {}),
-    //     //   x: cursorpt.x - dragOffset?.current.x,
-    //     //   y: cursorpt.y - dragOffset?.current.y,
-    //     // });
-    //   } else if (
-    //     activeTool === "select" &&
-    //     moveComponent.current &&
-    //     isTouching.current &&
-    //     resizeDirection
-    //   ) {
-    //     // setIsDragging(true);
-    //     isDragging.current = true;
-    //     const touch = e.touches[0];
-    //     const svg = e.currentTarget.ownerSVGElement;
-    //     if (!svg) return;
-    //     const pt = svg.createSVGPoint();
-    //     pt.x = touch.clientX;
-    //     pt.y = touch.clientY;
-    //     const cursorpt = pt.matrixTransform(screenCTMRef.current);
-    //     let newShape = { ...selectedComponent };
-    //     switch (resizeDirection) {
-    //       case "top-left":
-    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
-    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
-    //         newShape.x = cursorpt.x;
-    //         newShape.y = cursorpt.y;
-    //         break;
-    //       case "top-right":
-    //         newShape.width = cursorpt.x - newShape.x;
-    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
-    //         newShape.y = cursorpt.y;
-    //         break;
-    //       case "bottom-left":
-    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
-    //         newShape.height = cursorpt.y - newShape.y;
-    //         newShape.x = cursorpt.x;
-    //         break;
-    //       case "bottom-right":
-    //         newShape.width = cursorpt.x - newShape.x;
-    //         newShape.height = cursorpt.y - newShape.y;
-    //         break;
-    //       case "top-center":
-    //         newShape.height = newShape.height + (newShape.y - cursorpt.y);
-    //         newShape.y = cursorpt.y;
-    //         break;
-    //       case "bottom-center":
-    //         newShape.height = cursorpt.y - newShape.y;
-    //         break;
-    //       case "right-center":
-    //         newShape.width = cursorpt.x - newShape.x;
-    //         break;
-    //       case "left-center":
-    //         newShape.width = newShape.width + (newShape.x - cursorpt.x);
-    //         newShape.x = cursorpt.x;
-    //         break;
-    //       default:
-    //         break;
-    //     }
-    //     // updateComponentRef({
-    //     //   ...(typeof selectedComponent === "object" && selectedComponent !== null
-    //     //     ? selectedComponent
-    //     //     : {}),
-    //     //   ...newShape,
-    //     // });
-    //     requestAnimationFrame(() => {
-    //       setComponentsState((prev) => {
-    //         return prev.map((component) => {
-    //           if (component.id === selectedComponent.id) {
-    //             return {
-    //               ...component,
-    //               ...newShape,
-    //             };
-    //           }
-    //           return component;
-    //         });
-    //       });
-    //       setExtraComponentsState((prev) => {
-    //         return prev.map((component) => {
-    //           if (component.id === selectedComponent.id) {
-    //             return {
-    //               ...component,
-    //               ...newShape,
-    //             };
-    //           }
-    //           return component;
-    //         });
-    //       });
-    //       setSelectedComponent({
-    //         ...selectedComponent,
-    //         ...newShape,
-    //       });
-    //     });
-    //     debouncedSyncToReduxSelected(newShape);
-    //   }
-    // };
-    // const handleTouchEnd = () => {
-    //   // setMoveComponent(false);
-    //   // setIsDragging(false);
-    //   moveComponent.current = false;
-    //   isDragging.current = false;
-    //   isTouching.current = false;
-    //   setResizeDirection(null);
-    // };
-    const getCursorStyle = () => {
-        if (activeTool === "select" && moveComponent.current) {
-            return "grabbing";
-        }
-        else if (activeTool === "select" && resizeDirection) {
-            return "grab";
-        }
-        else if (activeTool === "grab") {
-            return "grab";
-        }
-        else if (activeTool === "ruler") {
-            return "crosshair";
-        }
-    };
-    const renderMiniMap = () => {
-        return (<MiniMap width={250} height={250}>
-        <div className="w-full h-full">
-          <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",
-            }}>
-            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} 
-        // onClick={handleSelectComponent}
-        onMouseDown={handleMouseDown} 
-        // onMouseUp={handleMouseUp}
-        // onBlur={handleUnSelectComponent}
-        selectedComponent={selectedComponent}/>
-          </svg>
-        </div>
-      </MiniMap>);
-    };
-    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);
-        // }
-    };
-    const [touch, setTouch] = useState(false);
-    const onTouchStartLine = () => {
-        setTouch(true);
-    };
-    const onTouchEndLine = () => {
-        setTouch(false);
-    };
-    return (<>
-      <ModalPreview>
-        <LayerView statusKey="status"/>
-      </ModalPreview>
-      {touch && <Button onClick={() => setTouch(false)}>Stop Touch</Button>}
-      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
-          <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
-            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
-          </div>
-        </div>
-        <TransformWrapper ref={transformRef} panning={{ disabled: ["node", "select"].includes(activeTool) }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={0.1} // sangat kecil = bisa zoom out jauh
-     maxScale={1000} initialScale={1} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
-          {scale !== 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
-              {renderMiniMap()}
-            </div>)}
-          <TransformComponent wrapperStyle={{
-            width: "100%",
-            height: "100%",
-        }} contentStyle={{
-            width: "20000px", height: "20000px"
-        }}>
-            <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",
-        }}>
-              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
-            cursor: getCursorStyle(),
-        }} 
-    // onClick={handleSelectComponent}
-    onMouseDown={handleMouseDown} 
-    // onMouseUp={handleMouseUp}
-    // onBlur={handleUnSelectComponent}
-    selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={handleMouseDown}/>
-              {/* <polygon
-          points={nodes.map((n) => `${n.x},${n.y}`).join(" ")}
-          fill="transparent"
-          stroke="blue"
-        /> */}
-              {/* Nodes */}
-              {/* {nodes.map((node, index) => (
-          <circle
-            key={index}
-            cx={node.x}
-            cy={node.y}
-            r={10}
-            fill="red"
-            onMouseDown={onTouchStartLine}
-            onTouchStart={onTouchStartLine}
-            onTouchEnd={onTouchEndLine}
-          />
-        ))} */}
-              {activeTool === "ruler" && (<>
-                  <g id="horizontal-ruler">
-                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
-                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
-                            <text x={i * 50} y="15">
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                  <g id="vertical-ruler">
-                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
-                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
-                            <text x="15" y={i * 50}>
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                </>)}
-              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
-                  {/* Vertical lines */}
-                  {Array.from({ length: widthBoard / (10 * scale) }, (_, i) => (<line key={`v-${i}`} x1={i * 10 * scale} y1={0} x2={i * 10 * scale} y2={heightBoard}/>))}
-
-                  {/* Horizontal lines */}
-                  {Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10 * scale} x2={widthBoard} y2={i * 10 * scale}/>))}
-                </g>)}
-            </svg>
-          </TransformComponent>
-        </TransformWrapper>
-      </div>
-    </>);
-};
-export default BoardTemplate;