seat-editor 1.6.11 → 1.6.13

package/dist/app/old-board/page.jsx

@@ -1,510 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { Button, Input, Modal } from "antd"; //tes commit
-// aduhuhhusd
-import { Square, MousePointer2, Move3D, Trash, CopyPlusIcon, ZoomInIcon, ZoomOutIcon, DownloadIcon, UploadIcon, Circle, PenIcon, Pencil, } from "lucide-react";
-import { SketchPicker } from "react-color";
-const SeatEditor = () => {
-    var _a, _b;
-    const [activeTool, setActiveTool] = useState(null);
-    const [rectangles, setRectangles] = useState([]);
-    const [selectedRectangle, setSelectedRectangle] = useState(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [startPoint, setStartPoint] = useState(null);
-    const [shadowRect, setShadowRect] = useState(null);
-    const [showModal, setShowModal] = useState(false);
-    const [dragOffset, setDragOffset] = useState(null);
-    const [zoom, setZoom] = useState(1);
-    const [resizeDirection, setResizeDirection] = useState(null);
-    const [images, setImages] = useState([]);
-    const [penPaths, setPenPaths] = useState([]);
-    const [currentPath, setCurrentPath] = useState(null);
-    const [isDrawing, setIsDrawing] = useState(false);
-    // upload image
-    const widthWorkspace = ((_a = document.getElementById("workspace")) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-    const heightWorkspace = ((_b = document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
-    const handleImageUploadBackground = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return;
-        const reader = new FileReader();
-        reader.onload = () => {
-            const img = document.createElement("img");
-            img.src = reader.result;
-            let width = img.width > widthWorkspace ? img.width / 2 : img.width;
-            let height = img.height > heightWorkspace ? img.height / 2 : img.height;
-            img.onload = () => {
-                setRectangles((prev) => [
-                    ...prev,
-                    {
-                        id: rectangles.length + 1,
-                        x: 100,
-                        y: 100,
-                        width: width < 1 ? 100 : width,
-                        height: height < 1 ? 100 : height,
-                        rotation: 0,
-                        shape: "image",
-                        src: img.src,
-                    },
-                ]);
-            };
-        };
-        reader.readAsDataURL(file);
-    };
-    const handleImageUpload = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return;
-        const reader = new FileReader();
-        reader.onload = () => {
-            const img = document.createElement("img");
-            img.src = reader.result;
-            let width = img.width > widthWorkspace ? img.width / 2 : img.width;
-            let height = img.height > heightWorkspace ? img.height / 2 : img.height;
-            img.onload = () => {
-                setRectangles((prev) => [
-                    ...prev,
-                    {
-                        id: rectangles.length + 1,
-                        x: 100,
-                        y: 100,
-                        width: width < 1 ? 100 : width,
-                        height: height < 1 ? 100 : height,
-                        rotation: 0,
-                        shape: "image-table",
-                        src: img.src,
-                        pax: "4 Pax",
-                        highlightColor: "#C1443D",
-                        status: "SOLD",
-                        table: `V${rectangles.length + 1}`,
-                    },
-                ]);
-            };
-        };
-        reader.readAsDataURL(file);
-    };
-    // zoom in out
-    const zoomIn = () => setZoom((prev) => prev + 0.1);
-    const zoomOut = () => setZoom((prev) => Math.max(0.1, prev - 0.1));
-    const handleToolClick = (tool) => {
-        setActiveTool(tool);
-        setSelectedRectangle(null); // Deselect any rectangle when switching tools
-    };
-    // === Drawing Rectangle ===
-    const handleMouseDown = (e) => {
-        if (activeTool === "rectangle" ||
-            activeTool === "circle" ||
-            activeTool === "vip-seat") {
-            const rect = e.target.getBoundingClientRect();
-            setStartPoint({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-            setIsDragging(true);
-        }
-        if (activeTool === "pen") {
-            const rect = e.target.getBoundingClientRect();
-            const newPoint = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-            setCurrentPath({
-                id: penPaths.length + 1,
-                points: [newPoint],
-                color: "#fff", // Default white stroke
-                strokeWidth: 2, // Default stroke width
-            });
-            setIsDrawing(true);
-        }
-    };
-    //   rotate logic
-    const rotateRectangle = (direction) => {
-        if (selectedRectangle) {
-            const rotationChange = direction === "left" ? -5 : 5; // Rotate 5 degrees
-            const newRotation = (selectedRectangle.rotation + rotationChange) % 360;
-            setRectangles((prev) => prev.map((rect) => rect.id === selectedRectangle.id
-                ? Object.assign(Object.assign({}, rect), { rotation: newRotation }) : rect));
-            setSelectedRectangle((prev) => prev ? Object.assign(Object.assign({}, prev), { rotation: newRotation }) : null);
-        }
-    };
-    const handleMouseMove = (e) => {
-        // Resize logic for node tool
-        if (activeTool === "node" &&
-            isDragging &&
-            resizeDirection &&
-            selectedRectangle) {
-            const workspaceRect = e.currentTarget.getBoundingClientRect();
-            const currentX = e.clientX - workspaceRect.left;
-            const currentY = e.clientY - workspaceRect.top;
-            let newRect = Object.assign({}, selectedRectangle);
-            switch (resizeDirection) {
-                case "top-left":
-                    newRect.width += newRect.x - currentX;
-                    newRect.height =
-                        selectedRectangle.shape === "circle"
-                            ? newRect.width
-                            : newRect.height + (newRect.y - currentY);
-                    newRect.x = currentX;
-                    newRect.y =
-                        selectedRectangle.shape === "circle" ? newRect.y : currentY;
-                    break;
-                case "top-right":
-                    newRect.width = currentX - newRect.x;
-                    newRect.height =
-                        selectedRectangle.shape === "circle"
-                            ? newRect.width
-                            : newRect.height + (newRect.y - currentY);
-                    newRect.y =
-                        selectedRectangle.shape === "circle" ? newRect.y : currentY;
-                    break;
-                case "bottom-left":
-                    newRect.width += newRect.x - currentX;
-                    newRect.height =
-                        selectedRectangle.shape === "circle"
-                            ? newRect.width
-                            : currentY - newRect.y;
-                    newRect.x = currentX;
-                    break;
-                case "bottom-right":
-                    newRect.width = currentX - newRect.x;
-                    newRect.height =
-                        selectedRectangle.shape === "circle"
-                            ? newRect.width
-                            : currentY - newRect.y;
-                    break;
-            }
-            // Ensure width and height are always positive
-            newRect.width = Math.max(10, newRect.width);
-            newRect.height = Math.max(10, newRect.height);
-            setRectangles((prev) => prev.map((rect) => rect.id === selectedRectangle.id ? Object.assign({}, newRect) : rect));
-            setSelectedRectangle(newRect);
-        }
-        if ((activeTool === "rectangle" ||
-            activeTool === "circle" ||
-            activeTool === "vip-seat") &&
-            isDragging &&
-            startPoint) {
-            const rect = e.target.getBoundingClientRect();
-            const currentX = e.clientX - rect.left;
-            const currentY = e.clientY - rect.top;
-            // Update shadow rectangle dimensions dynamically
-            const newShadowRect = {
-                id: -1, // Temporary ID for preview
-                x: Math.min(startPoint.x, currentX),
-                y: Math.min(startPoint.y, currentY),
-                width: Math.abs(currentX - startPoint.x),
-                height: Math.abs(currentY - startPoint.y),
-                color: activeTool === "vip-seat" ? "#2D2D36" : "rgba(74, 144, 226, 0.4)", // Light blue with transparency
-                pax: "",
-                rotation: 0,
-                shape: activeTool === "vip-seat" ? "vip-seat" : activeTool, // Define shape type
-                highlightColor: activeTool === "vip-seat" ? "#C1443D" : undefined, // Red section in VIP
-                status: activeTool === "vip-seat" ? "SOLD" : undefined,
-                table: activeTool === "vip-seat" ? `V${rectangles.length + 1}` : undefined, // Table number for VIP
-            };
-            setShadowRect(newShadowRect);
-        }
-        // Dragging for select tool
-        if (activeTool === "select" &&
-            isDragging &&
-            selectedRectangle &&
-            dragOffset) {
-            const workspaceRect = e.currentTarget.getBoundingClientRect();
-            const newX = e.clientX - workspaceRect.left - dragOffset.x;
-            const newY = e.clientY - workspaceRect.top - dragOffset.y;
-            setRectangles((prev) => prev.map((rect) => rect.id === selectedRectangle.id
-                ? Object.assign(Object.assign({}, rect), { x: newX, y: newY }) : rect));
-        }
-    };
-    const handleMouseUp = () => {
-        setIsDragging(false);
-        setResizeDirection(null);
-        if ((activeTool === "rectangle" ||
-            activeTool === "circle" ||
-            activeTool === "vip-seat") &&
-            isDragging &&
-            shadowRect) {
-            // Finalize the rectangle on mouse release
-            const newRectangle = Object.assign(Object.assign({}, shadowRect), { id: rectangles.length + 1, color: "#4A90E2", pax: activeTool === "vip-seat" ? "4 Pax" : "Seat", highlightColor: activeTool === "vip-seat" ? "#C1443D" : undefined, status: activeTool === "vip-seat" ? "SOLD" : undefined, table: activeTool === "vip-seat" ? "V1" : undefined });
-            setRectangles([...rectangles, newRectangle]);
-            setImages((prev) => prev.map((img) => img.id === (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id)
-                ? Object.assign(Object.assign({}, img), { x: newRectangle.x, y: newRectangle.y }) : img));
-            setShadowRect(null); // Clear shadow preview
-            setIsDragging(false);
-            setStartPoint(null);
-        }
-    };
-    const handleRectangleMouseDown = (e, rect) => {
-        if (activeTool === "select" || activeTool === "node") {
-            setSelectedRectangle(rect);
-            const rectBox = e.target.getBoundingClientRect();
-            setDragOffset({
-                x: e.clientX - rectBox.left,
-                y: e.clientY - rectBox.top,
-            });
-            setIsDragging(true);
-        }
-    };
-    const handleRectangleDoubleClick = (rect) => {
-        if (activeTool === "select" || activeTool === "node") {
-            setSelectedRectangle(rect);
-            setShowModal(true);
-        }
-    };
-    const updateRectangle = (updates) => {
-        if (selectedRectangle) {
-            setRectangles((prev) => prev.map((rect) => rect.id === selectedRectangle.id ? Object.assign(Object.assign({}, rect), updates) : rect));
-            setSelectedRectangle((prev) => (prev ? Object.assign(Object.assign({}, prev), updates) : null));
-        }
-    };
-    const startResizing = (direction) => {
-        setResizeDirection(direction);
-        setIsDragging(true);
-    };
-    // Set the cursor style based on the active tool
-    const getCursorStyle = () => {
-        if (activeTool === "rectangle" ||
-            activeTool === "circle" ||
-            activeTool === "vip-seat")
-            return "cursor-crosshair";
-        if (activeTool === "select")
-            return "cursor-default";
-        if (activeTool === "node")
-            return "cursor-pointer";
-        return "cursor-default";
-    };
-    const deleteSelectedRectangle = () => {
-        if (selectedRectangle) {
-            setRectangles((prev) => prev.filter((rect) => rect.id !== selectedRectangle.id));
-            setSelectedRectangle(null);
-        }
-    };
-    //   duplicate
-    const duplicateRectangle = () => {
-        if (selectedRectangle) {
-            const newRectangle = Object.assign(Object.assign({}, selectedRectangle), { id: rectangles.length + 1, x: selectedRectangle.x + 20, y: selectedRectangle.y + 20 });
-            setRectangles([...rectangles, newRectangle]);
-        }
-    };
-    const exportJSON = () => {
-        // const json = JSON.stringify(rectangles, null, 2);
-        // const blob = new Blob([json], { type: "application/json" });
-        // const link = document.createElement("a");
-        // link.href = URL.createObjectURL(blob);
-        // link.download = "seat_layout.json";
-        // document.body.appendChild(link);
-        // link.click();
-        // document.body.removeChild(link);
-    };
-    return (<div className="flex h-screen w-full">
-      {/* Toolbar */}
-      <div className="w-16 bg-gray-800 text-white flex flex-col items-center py-4 space-y-4">
-        {/* Select Tool */}
-        <Button type={activeTool === "select" ? "primary" : "default"} shape="circle" icon={<MousePointer2 />} onClick={() => handleToolClick("select")}/>
-        <Button type={activeTool === "circle" ? "primary" : "default"} shape="circle" icon={<Circle />} onClick={() => handleToolClick("circle")}/>
-        <Button type={activeTool === "vip-seat" ? "primary" : "default"} shape="circle" icon={<PenIcon />} // Use any icon you prefer
-     onClick={() => handleToolClick("vip-seat")}/>
-        {/* Rectangle Tool */}
-        <Button type={activeTool === "rectangle" ? "primary" : "default"} shape="circle" icon={<Square />} onClick={() => handleToolClick("rectangle")}/>
-        {/* Node Tool */}
-        <Button type={activeTool === "node" ? "primary" : "default"} shape="circle" icon={<Move3D />} onClick={() => handleToolClick("node")}/>
-        <Button type={activeTool === "pen" ? "primary" : "default"} shape="circle" icon={<Pencil />} onClick={() => handleToolClick("pen")}/>
-
-        {/* delete */}
-        <Button type="default" shape="circle" icon={<Trash />} onClick={deleteSelectedRectangle}/>
-        {/* duplicate */}
-        <Button type="default" shape="circle" icon={<CopyPlusIcon />} // You can use a copy icon
-     onClick={duplicateRectangle}/>
-        {/* zoomIn/out */}
-        <Button type="default" shape="circle" onClick={zoomIn} icon={<ZoomInIcon />}/>
-        <Button type="default" shape="circle" onClick={zoomOut} icon={<ZoomOutIcon />}/>
-        {/* {activeTool === "image" && ( */}
-        <UploadIcon />
-        <span>Image Seat</span>
-        <input type="file" accept="image/*" onChange={handleImageUpload}/>
-        <span>Background Image</span>
-        <input type="file" accept="image/*" onChange={handleImageUploadBackground}/>
-        {/* )} */}
-        <Button shape="circle" icon={<DownloadIcon />} onClick={exportJSON}/>
-      </div>
-
-      {/* Workspace */}
-      <div className="w-full flex items-center justify-center" id={"workspace"}>
-        <div className={`bg-gray-900 relative ${getCursorStyle()} w-full h-screen `} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} style={{
-            transform: `scale(${zoom})`,
-            transformOrigin: "0 0",
-        }}>
-        
-          {shadowRect && (<div className="absolute border-dashed border-2 border-blue-400" style={{
-                left: shadowRect.x,
-                top: shadowRect.y,
-                width: shadowRect.width,
-                height: shadowRect.height,
-                backgroundColor: shadowRect.color,
-            }}/>)}
-          {/* Render rectangles */}
-          {rectangles.map((rect) => (<div key={rect.id} onMouseDown={(e) => handleRectangleMouseDown(e, rect)} onDoubleClick={() => handleRectangleDoubleClick(rect)} className={`absolute cursor-move border transition-transform ${(selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id
-                ? "border-black"
-                : "border-gray-300"}`} style={{
-                left: rect.x,
-                top: rect.y,
-                width: rect.width,
-                height: rect.height,
-                backgroundColor: rect.color,
-                transform: `rotate(${rect.rotation}deg)`,
-                transformOrigin: "center",
-                borderRadius: rect.shape === "circle" ? "100%" : "0%",
-            }}>
-              {rect.shape === "image-table" && (<div className="w-full h-full relative">
-                <img src={rect.src} alt="custom" className="w-full h-full object-cover" draggable={false}/>
-                  <div className="absolute left-0 right-0 flex items-center justify-center" style={{
-                    top: "10%",
-                    height: "20%",
-                    backgroundColor: rect.highlightColor || "transparent",
-                }}>
-                    <span className="text-white font-bold text-xs absolute" style={{
-                    top: "10%",
-                    left: "50%",
-                }}>
-                      {rect.table}
-                    </span>
-                  </div>
-                  <span className="text-xs text-white flex items-center justify-center absolute w-full" style={{
-                    top: "85%",
-                    left: "50%",
-                    transform: "translate(-50%, -50%)",
-                    backgroundColor: rect.highlightColor || "transparent"
-                }}>
-                    {rect.pax}
-                  </span>
-                  <div className="absolute left-0 right-0 flex items-center justify-center" style={{
-                    top: "40%",
-                    height: "20%",
-                    backgroundColor: rect.highlightColor || "transparent",
-                }}>
-                    <span className="text-white font-bold text-xs">
-                      {rect.status}
-                    </span>
-                  </div>
-                </div>)}
-              {rect.shape === "image" && (<img src={rect.src} alt="custom" className="w-full h-full object-cover" draggable={false}/>)}
-              {rect.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
-                    top: "10%",
-                    height: "20%",
-                }}>
-                  <span className="text-white font-bold text-xs">
-                    {rect.table}
-                  </span>
-                </div>)}
-              {rect.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
-                    top: "40%",
-                    height: "20%",
-                    backgroundColor: rect.highlightColor || "transparent",
-                }}>
-                  <span className="text-white font-bold text-xs">
-                    {rect.status}
-                  </span>
-                </div>)}
-
-              {/* Bottom Text */}
-              <div className="absolute bottom-2 left-0 right-0 text-center text-white text-sm">
-                {rect.shape === "vip-seat" ? "8 Pax" : ""}
-              </div>
-
-              {/* Resize Nodes */}
-              {/* Resize Nodes (Only Show When in Node Mode and Item is Selected) */}
-              {activeTool === "node" && (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id && (<>
-                  {/* Top Left */}
-                  <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
-                    top: -6,
-                    left: -6,
-                    cursor: "nwse-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("top-left")}/>
-                  {/* Top Right */}
-                  <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
-                    top: -6,
-                    right: -6,
-                    cursor: "nesw-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("top-right")}/>
-                  {/* Bottom Left */}
-                  <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
-                    bottom: -6,
-                    left: -6,
-                    cursor: "nesw-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("bottom-left")}/>
-                  {/* Bottom Right */}
-                  <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
-                    bottom: -6,
-                    right: -6,
-                    cursor: "nwse-resize",
-                    borderRadius: rect.shape === "circle" ? "50%" : "0%",
-                }} onMouseDown={() => startResizing("bottom-right")}/>
-                </>)}
-            </div>))}
-        </div>
-      </div>
-
-      {/* Rectangle Customization Modal */}
-      <Modal open={showModal} onCancel={() => setShowModal(false)} onOk={() => setShowModal(false)} title="Edit Rectangle">
-        {selectedRectangle && (<>
-            <div className="flex gap-4 items-center">
-              <div className="flex flex-col">
-                <p className="mb-2 font-semibold">Change Color:</p>
-                <SketchPicker color={selectedRectangle.color} onChangeComplete={(color) => updateRectangle({ color: color.hex })}/>
-              </div>
-              <div className="flex flex-col">
-                <p className="mt-4 mb-2 font-semibold">Live Preview:</p>
-                <div className="relative borderflex items-center justify-center" style={{
-                width: selectedRectangle.width,
-                height: selectedRectangle.height,
-                margin: "0 auto",
-                transform: `rotate(${selectedRectangle.rotation}deg)`,
-                backgroundColor: selectedRectangle.color,
-                transition: "all 0.3s ease",
-                scale: "0.5",
-                borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
-            }}>
-                  {selectedRectangle.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
-                    top: "10%",
-                    height: "20%",
-                }}>
-                      <span className="text-white font-bold text-xs">
-                        {selectedRectangle.status}sfsdf
-                      </span>
-                    </div>)}
-                  {selectedRectangle.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
-                    top: "40%",
-                    height: "20%",
-                    backgroundColor: selectedRectangle.highlightColor || "transparent",
-                }}>
-                      <span className="text-white font-bold text-xs">
-                        {selectedRectangle.status} dsdsd
-                      </span>
-                    </div>)}
-                </div>
-              </div>
-            </div>
-
-            {/* Preview Section */}
-
-            <p className="mt-4 mb-2 font-semibold">Edit Text:</p>
-            <Input value={selectedRectangle.pax} onChange={(e) => updateRectangle({ pax: e.target.value })}/>
-            <p className="mt-4 mb-2 font-semibold">Edit Label:</p>
-            <Input value={selectedRectangle.table} onChange={(e) => updateRectangle({ table: e.target.value })}/>
-            <p className="mt-4 mb-2 font-semibold">Edit Highlight:</p>
-            <Input value={selectedRectangle.status} onChange={(e) => updateRectangle({ status: e.target.value })}/>
-            {/* Rotation Controls */}
-            <p className="mt-4 mb-2 font-semibold">Rotate:</p>
-            <div className="flex gap-4 items-center">
-              <Button onClick={() => rotateRectangle("left")}>
-                ⟲ Rotate Left
-              </Button>
-              <span>{selectedRectangle.rotation}°</span>
-              <Button onClick={() => rotateRectangle("right")}>
-                ⟳ Rotate Right
-              </Button>
-            </div>
-          </>)}
-      </Modal>
-    </div>);
-};
-export default SeatEditor;

package/dist/app/only-view/page.jsx

@@ -1,40 +0,0 @@
-"use client";
-import LayerView from "@/features/view";
-import { useState, useEffect } from "react";
-import { dataDummy } from "./constant";
-const TouchScrollDetect = () => {
-    const [fingerCount, setFingerCount] = useState(0);
-    const [scrollType, setScrollType] = useState(""); // untuk kondisi tampilan
-    useEffect(() => {
-        const container = document.getElementById("scroll-container");
-        const handleTouchStart = (e) => {
-            const count = e.touches.length;
-            setFingerCount(count);
-            if (count === 1) {
-                setScrollType("one");
-            }
-            else if (count === 2) {
-                setScrollType("two");
-            }
-            else {
-                setScrollType("other");
-            }
-        };
-        const handleTouchEnd = () => {
-            setFingerCount(0);
-            setScrollType(""); // reset saat tidak ada sentuhan
-        };
-        if (container) {
-            container.addEventListener("touchstart", handleTouchStart);
-            container.addEventListener("touchend", handleTouchEnd);
-        }
-        return () => {
-            if (container) {
-                container.removeEventListener("touchstart", handleTouchStart);
-                container.removeEventListener("touchend", handleTouchEnd);
-            }
-        };
-    }, []);
-    return (<LayerView statusKey="status" defaultBackground="#000000" componentProps={dataDummy} extraComponentProps={[]}/>);
-};
-export default TouchScrollDetect;

package/dist/app/page.jsx

@@ -1,13 +0,0 @@
-import Board from "../features/board";
-import SideTool from "../features/side-tool";
-import ControlPanels from "../features/panel";
-const TableEditor = () => {
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool />
-        <Board />
-        <ControlPanels />
-      </div>
-    </>);
-};
-export default TableEditor;

package/dist/components/button-tools/index.jsx

@@ -1,17 +0,0 @@
-"use client";
-import { Button, Popover } from "antd";
-const ButtonTools = (props) => {
-    const { buttonProps, items, popoverProps } = props;
-    if (items.length === 0) {
-        return (<Popover trigger="hover" {...popoverProps}>
-        <Button {...buttonProps}/>
-      </Popover>);
-    }
-    return (<Popover content={<div>
-          <Button>Button 1</Button>
-          <Button>Button 2</Button>
-        </div>} trigger="click">
-      <Button {...buttonProps}/>
-    </Popover>);
-};
-export default ButtonTools;

package/dist/components/form-tools/label.jsx

@@ -1,44 +0,0 @@
-"use client";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
-const SectionLabel = () => {
-    return (<div className="py-2">
-      <h1 className="heading-s">Section Labeling</h1>
-      <Form.Item label="Labels in square" name={"labels"}>
-        <Form.List name="labels">
-          {(fields, { add, remove }) => (<>
-              {fields.map((field) => (<div key={field.key}>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "label"]} label="Text">
-                      <Input />
-                    </Form.Item>
-                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-                    </Form.Item>
-                  </Flex>
-                  <Flex gap={2}>
-                    <Form.Item name={[field.name, "x"]} label="X">
-                      <InputNumber />
-                    </Form.Item>
-                    <Form.Item name={[field.name, "y"]} label="Y">
-                      <InputNumber />
-                    </Form.Item>
-                    <Form.Item name={[field.name, "fontSize"]} label="Size">
-                      <InputNumber suffix="px"/>
-                    </Form.Item>
-                  </Flex>
-                </div>))}
-              <Flex gap={2}>
-                <Button type="primary" onClick={() => add()} className="btn btn-primary">
-                  Add
-                </Button>
-                <Button type="primary" onClick={() => remove(fields.length - 1)} className="btn btn-primary">
-                  Remove
-                </Button>
-              </Flex>
-            </>)}
-        </Form.List>
-      </Form.Item>
-      <div className="divider-dashed"/>
-    </div>);
-};
-export default SectionLabel;