seat-editor 1.4.20 → 1.4.21

package/dist/features/board/index.jsx

@@ -0,0 +1,654 @@
+"use client";
+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 (<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} onTouchStart={(e, item, direction) => handleTouchStart(e, item, direction)} onTouchMove={(e) => handleTouchMove(e)} onTouchEnd={handleTouchEnd}/>
+          </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();
+    };
+    // activeTool === "select" &&
+    //     moveComponent &&
+    //     isTouching.current &&
+    //     !resizeDirection
+    return (<>
+      <ModalPreview>
+        <LayerView statusKey="status"/>
+      </ModalPreview>
+      <div className="relative w-full h-screen flex-1 overflow-hidden" style={{
+            cursor: getCursorStyle(),
+        }} 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: activeTool === "select" }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh
+     maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding>
+          {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%",
+            overflow: "hidden",
+        }} contentStyle={{
+            width: "100%",
+            height: "100%",
+        }}>
+            <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",
+        }}>
+              <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}/>
+            </svg>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </>);
+};
+export default BoardTemplate;

package/dist/features/navbar/index.jsx

@@ -0,0 +1,5 @@
+"use client";
+const Navbar = () => {
+    return <div>Navbar</div>;
+};
+export default Navbar;