seat-editor 1.4.21 → 1.4.23

package/dist/features/board/index.js

@@ -1,626 +0,0 @@
-"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";
-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 }) => {
-    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 { components: componentsProps, extraComponents: extraComponentsProps, flagChange, } = useAppSelector((state) => state.board);
-    const isTouching = useRef(false);
-    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 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);
-            }
-            if (!isEqual(extraComponentsProps, extraComponentsState)) {
-                isSyncingFromRedux.current = true;
-                setExtraComponentsState(extraComponentsProps);
-            }
-            if (!isEqual(selectedComponentProps, selectedComponent)) {
-                isSyncingFromRedux.current = true;
-                setSelectedComponent(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)) {
-            debouncedSyncComponents.current(componentsState);
-        }
-        if (!isEqual(extraComponentsState, extraComponentsProps)) {
-            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,
-    });
-    const handleMouseDown = (e, item, direction) => {
-        if (activeTool === "select" && direction) {
-            setResizeDirection(direction);
-            setIsDragging(true);
-        }
-        if (activeTool === "select" && !direction && !moveComponent) {
-            if (e) {
-                dispatch({ type: "panel/setShow", payload: false });
-                setMoveComponent(true);
-                setIsDragging(true);
-                // dispatch({ type: "panel/setSelectedComponent", payload: null });
-                // setSelectedComponent(null)
-                const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-                setDragOffset({
-                    x: e.clientX - rectBox.left,
-                    y: e.clientY - rectBox.top,
-                });
-            }
-        }
-    };
-    const handleMouseUp = () => {
-        if (activeTool === "select" && selectedComponent && (moveComponent || isDragging)) {
-            setMoveComponent(false);
-            dispatch({ type: "panel/setShow", payload: false });
-            dispatch({ type: "panel/setSelectedComponent", payload: null });
-            setSelectedComponent(null);
-            setIsDragging(false);
-            setResizeDirection(null);
-        }
-    };
-    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 (![
-            "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) => {
-        if ([
-            "square",
-            "circle",
-            "diamond",
-            "table-seat-circle",
-            "table-seat-square",
-            "text",
-        ].includes(activeTool)) {
-            const { x, y } = getSvgCoords(e);
-            setShadowShape([createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor)]);
-            return;
-        }
-        if (activeTool === "select" &&
-            selectedComponent &&
-            moveComponent &&
-            dragOffset &&
-            // !isTouching.current &&
-            !resizeDirection) {
-            const workspaceRect = e.currentTarget.getBoundingClientRect();
-            const newX = e.clientX - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
-            const newY = e.clientY - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
-            let newPosition = {
-                x: newX,
-                y: newY,
-            };
-            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 workspaceRect = e.currentTarget.getBoundingClientRect();
-            const currentX = e.clientX - workspaceRect.left;
-            const currentY = e.clientY - workspaceRect.top;
-            const { x, y, width, height } = selectedComponent;
-            let newShape = Object.assign({}, selectedComponent);
-            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;
-                    case "left-center":
-                        newShape.width += newShape.x - currentX;
-                        newShape.x = currentX;
-                        break;
-                    case "right-center":
-                        newShape.width = currentX - newShape.x;
-                        break;
-                    case "top-center":
-                        newShape.height += newShape.y - currentY;
-                        newShape.y = currentY;
-                        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;
-                }
-            }
-            // updateComponentRef({
-            //   ...(typeof selectedComponent === "object" && selectedComponent !== null
-            //     ? selectedComponent
-            //     : {}),
-            //   ...newShape,
-            // });
-            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 handleSelectComponent = (items) => {
-        if (activeTool === "select") {
-            setIsDragging(true);
-            setMoveComponent(false);
-            onSelectComponent && onSelectComponent(items);
-            setSelectedComponent(items);
-            dispatch({ type: "panel/setSelectedComponent", payload: items });
-            // selectedComponentRef.current = items;
-            dispatch({ type: "panel/setShow", payload: true });
-        }
-    };
-    useEffect(() => {
-        if (containerRef.current) {
-            setWidthBoard(containerRef.current.offsetWidth);
-            setHeightBoard(containerRef.current.offsetHeight);
-        }
-    });
-    const handleUnSelectComponent = () => {
-        dispatch({ type: "panel/setSelectedComponent", payload: null });
-        setSelectedComponent(null);
-        // selectedComponentRef.current = null;
-    };
-    const handleTouchStart = (e, items, direction) => {
-        var _a, _b, _c, _d;
-        if (activeTool === "select" && !direction) {
-            // dispatch({ type: "panel/setShow", payload: false });
-            setMoveComponent(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((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
-            screenCTMRef.current = ((_b = svg.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.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);
-            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((_c = svg.getScreenCTM()) === null || _c === void 0 ? void 0 : _c.inverse());
-            screenCTMRef.current = ((_d = svg.getScreenCTM()) === null || _d === void 0 ? void 0 : _d.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 [isMove, setIsMove] = useState(false);
-    const handleTouchMove = (e) => {
-        if (activeTool === "select" &&
-            moveComponent &&
-            isTouching.current &&
-            !resizeDirection) {
-            setIsDragging(true);
-            setIsMove(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 === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) != "background") {
-                    setComponentsState((prev) => {
-                        return prev.map((component) => {
-                            if (component.id === selectedComponent.id) {
-                                return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
-                            }
-                            return component;
-                        });
-                    });
-                }
-                if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) == "background") {
-                    setExtraComponentsState((prev) => {
-                        return prev.map((component) => {
-                            if (component.id === selectedComponent.id) {
-                                return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
-                            }
-                            return component;
-                        });
-                    });
-                }
-                setSelectedComponent(Object.assign(Object.assign({}, selectedComponent), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : 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 &&
-            isTouching.current &&
-            resizeDirection) {
-            setIsDragging(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 = Object.assign({}, 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 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(Object.assign(Object.assign({}, selectedComponent), newShape));
-            });
-            debouncedSyncToReduxSelected(newShape);
-        }
-    };
-    const handleTouchEnd = () => {
-        setMoveComponent(false);
-        setIsDragging(false);
-        isTouching.current = false;
-        setResizeDirection(null);
-    };
-    const getCursorStyle = () => {
-        if (activeTool === "select" && moveComponent) {
-            return "grabbing";
-        }
-        else if (activeTool === "select" && resizeDirection) {
-            return "grab";
-        }
-        else if (activeTool === "grab") {
-            return "grab";
-        }
-    };
-    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, onTouchStart: (e, item, direction) => handleTouchStart(e, item, direction), onTouchMove: (e) => handleTouchMove(e), onTouchEnd: handleTouchEnd }) }) }) }));
-    };
-    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();
-    };
-    // activeTool === "select" &&
-    //     moveComponent &&
-    //     isTouching.current &&
-    //     !resizeDirection
-    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", style: {
-                    cursor: getCursorStyle(),
-                }, 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: activeTool === "select" }, 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: _jsx("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onClick: (e) => {
-                                        e.stopPropagation();
-                                        handleMouseClick(e);
-                                    }, onMouseLeave: handleMouseLeave, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                                        background: backgroundColor,
-                                        display: "block",
-                                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], onClick: handleSelectComponent, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onBlur: handleUnSelectComponent, selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: (e, item, direction) => handleTouchStart(e, item, direction), onTouchMove: (e) => handleTouchMove(e), onTouchEnd: handleTouchEnd }) }) })] })] })] }));
-};
-export default BoardTemplate;

package/dist/features/navbar/index.js

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-const Navbar = () => {
-    return _jsx("div", { children: "Navbar" });
-};
-export default Navbar;