seat-editor 1.2.26 → 1.2.28

package/dist/app/layout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import localFont from "next/font/local";
+import "./globals.css";
+import { Layout } from "antd";
+import { StoreProvider } from "../provider/store-provider";
+const geistSans = localFont({
+    src: "./fonts/GeistVF.woff",
+    variable: "--font-geist-sans",
+    weight: "100 900",
+});
+const geistMono = localFont({
+    src: "./fonts/GeistMonoVF.woff",
+    variable: "--font-geist-mono",
+    weight: "100 900",
+});
+export const metadata = {
+    title: "Create Next App",
+    description: "Generated by create next app",
+};
+export default function RootLayout({ children, }) {
+    return (_jsx("html", { lang: "en", children: _jsx("body", { className: `${geistSans.variable} ${geistMono.variable} antialiased`, children: _jsx(StoreProvider, { children: _jsx(Layout, { children: children }) }) }) }));
+}

package/dist/app/new-board/page.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Board from "../../features/board";
+import SideTool from "../../features/side-tool";
+import ControlPanels from "../../features/panel";
+export default function NewBoard() {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
+}

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

@@ -0,0 +1,382 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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);
+    console.log({ rectangles });
+    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;
+        console.log({ file });
+        const reader = new FileReader();
+        reader.onload = () => {
+            const img = document.createElement("img");
+            img.src = reader.result;
+            console.log({ img });
+            let width = img.width > widthWorkspace ? img.width / 2 : img.width;
+            let height = img.height > heightWorkspace ? img.height / 2 : img.height;
+            console.log({ width, height }, img.width, 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 = () => {
+        console.log({ rectangles, images });
+        // 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 (_jsxs("div", { className: "flex h-screen w-full", children: [_jsxs("div", { className: "w-16 bg-gray-800 text-white flex flex-col items-center py-4 space-y-4", children: [_jsx(Button, { type: activeTool === "select" ? "primary" : "default", shape: "circle", icon: _jsx(MousePointer2, {}), onClick: () => handleToolClick("select") }), _jsx(Button, { type: activeTool === "circle" ? "primary" : "default", shape: "circle", icon: _jsx(Circle, {}), onClick: () => handleToolClick("circle") }), _jsx(Button, { type: activeTool === "vip-seat" ? "primary" : "default", shape: "circle", icon: _jsx(PenIcon, {}), onClick: () => handleToolClick("vip-seat") }), _jsx(Button, { type: activeTool === "rectangle" ? "primary" : "default", shape: "circle", icon: _jsx(Square, {}), onClick: () => handleToolClick("rectangle") }), _jsx(Button, { type: activeTool === "node" ? "primary" : "default", shape: "circle", icon: _jsx(Move3D, {}), onClick: () => handleToolClick("node") }), _jsx(Button, { type: activeTool === "pen" ? "primary" : "default", shape: "circle", icon: _jsx(Pencil, {}), onClick: () => handleToolClick("pen") }), _jsx(Button, { type: "default", shape: "circle", icon: _jsx(Trash, {}), onClick: deleteSelectedRectangle }), _jsx(Button, { type: "default", shape: "circle", icon: _jsx(CopyPlusIcon, {}), onClick: duplicateRectangle }), _jsx(Button, { type: "default", shape: "circle", onClick: zoomIn, icon: _jsx(ZoomInIcon, {}) }), _jsx(Button, { type: "default", shape: "circle", onClick: zoomOut, icon: _jsx(ZoomOutIcon, {}) }), _jsx(UploadIcon, {}), _jsx("span", { children: "Image Seat" }), _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUpload }), _jsx("span", { children: "Background Image" }), _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUploadBackground }), _jsx(Button, { shape: "circle", icon: _jsx(DownloadIcon, {}), onClick: exportJSON })] }), _jsx("div", { className: "w-full flex items-center justify-center", id: "workspace", children: _jsxs("div", { className: `bg-gray-900 relative ${getCursorStyle()} w-full h-screen `, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
+                        transform: `scale(${zoom})`,
+                        transformOrigin: "0 0",
+                    }, children: [shadowRect && (_jsx("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,
+                            } })), rectangles.map((rect) => (_jsxs("div", { 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%",
+                            }, children: [rect.shape === "image-table" && (_jsxs("div", { className: "w-full h-full relative", children: [_jsx("img", { src: rect.src, alt: "custom", className: "w-full h-full object-cover", draggable: false }), _jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                top: "10%",
+                                                height: "20%",
+                                                backgroundColor: rect.highlightColor || "transparent",
+                                            }, children: _jsx("span", { className: "text-white font-bold text-xs absolute", style: {
+                                                    top: "10%",
+                                                    left: "50%",
+                                                }, children: rect.table }) }), _jsx("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"
+                                            }, children: rect.pax }), _jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                top: "40%",
+                                                height: "20%",
+                                                backgroundColor: rect.highlightColor || "transparent",
+                                            }, children: _jsx("span", { className: "text-white font-bold text-xs", children: rect.status }) })] })), rect.shape === "image" && (_jsx("img", { src: rect.src, alt: "custom", className: "w-full h-full object-cover", draggable: false })), rect.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                        top: "10%",
+                                        height: "20%",
+                                    }, children: _jsx("span", { className: "text-white font-bold text-xs", children: rect.table }) })), rect.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                        top: "40%",
+                                        height: "20%",
+                                        backgroundColor: rect.highlightColor || "transparent",
+                                    }, children: _jsx("span", { className: "text-white font-bold text-xs", children: rect.status }) })), _jsx("div", { className: "absolute bottom-2 left-0 right-0 text-center text-white text-sm", children: rect.shape === "vip-seat" ? "8 Pax" : "" }), activeTool === "node" && (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id && (_jsxs(_Fragment, { children: [_jsx("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") }), _jsx("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") }), _jsx("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") }), _jsx("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") })] }))] }, rect.id)))] }) }), _jsx(Modal, { open: showModal, onCancel: () => setShowModal(false), onOk: () => setShowModal(false), title: "Edit Rectangle", children: selectedRectangle && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex gap-4 items-center", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "mb-2 font-semibold", children: "Change Color:" }), _jsx(SketchPicker, { color: selectedRectangle.color, onChangeComplete: (color) => updateRectangle({ color: color.hex }) })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Live Preview:" }), _jsxs("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%",
+                                            }, children: [selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                        top: "10%",
+                                                        height: "20%",
+                                                    }, children: _jsxs("span", { className: "text-white font-bold text-xs", children: [selectedRectangle.status, "sfsdf"] }) })), selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
+                                                        top: "40%",
+                                                        height: "20%",
+                                                        backgroundColor: selectedRectangle.highlightColor || "transparent",
+                                                    }, children: _jsxs("span", { className: "text-white font-bold text-xs", children: [selectedRectangle.status, " dsdsd"] }) }))] })] })] }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Edit Text:" }), _jsx(Input, { value: selectedRectangle.pax, onChange: (e) => updateRectangle({ pax: e.target.value }) }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Edit Label:" }), _jsx(Input, { value: selectedRectangle.table, onChange: (e) => updateRectangle({ table: e.target.value }) }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Edit Highlight:" }), _jsx(Input, { value: selectedRectangle.status, onChange: (e) => updateRectangle({ status: e.target.value }) }), _jsx("p", { className: "mt-4 mb-2 font-semibold", children: "Rotate:" }), _jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Button, { onClick: () => rotateRectangle("left"), children: "\u27F2 Rotate Left" }), _jsxs("span", { children: [selectedRectangle.rotation, "\u00B0"] }), _jsx(Button, { onClick: () => rotateRectangle("right"), children: "\u27F3 Rotate Right" })] })] })) })] }));
+};
+export default SeatEditor;

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LayerView from "@/features/view";
+import { useState, useEffect } from "react";
+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 (_jsxs("div", { id: "scroll-container", className: "h-screen overflow-y-scroll bg-gray-100 p-6 text-gray-800", children: [_jsx(LayerView, { statusKey: "status", defaultBackground: "#000000" }), _jsxs("div", { className: "sticky top-0 bg-white z-10 py-2", children: [scrollType === "one" && (_jsx("p", { className: "text-blue-600 font-medium", children: "\uD83D\uDC46 One-finger scroll" })), scrollType === "two" && (_jsx("p", { className: "text-green-600 font-medium", children: "\u270C\uFE0F Two-finger scroll" })), scrollType === "other" && (_jsxs("p", { className: "text-red-600 font-medium", children: ["\uD83D\uDD90\uFE0F ", fingerCount, " fingers on screen"] }))] }), _jsx("div", { className: "h-[2000px] bg-white mt-4 rounded p-4 shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) })] }));
+};
+export default TouchScrollDetect;

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

@@ -34,7 +34,10 @@ const TouchScrollDetect = () => {
             }
         };
     }, []);
-    return (<div id="scroll-container" className="h-screen overflow-y-scroll bg-gray-100 p-6 text-gray-800">
+    return (<div id="scroll-container" className="bg-gray-100 p-6 text-gray-800">
+      <div className="h-[400px] bg-white mt-4 rounded p-4 shadow">
+        <p>Scroll this page with 1 or 2 fingers.</p>
+      </div>
       <LayerView statusKey="status" defaultBackground="#000000"/>
       <div className="sticky top-0 bg-white z-10 py-2">
         {scrollType === "one" && (<p className="text-blue-600 font-medium">👆 One-finger scroll</p>)}
@@ -44,7 +47,7 @@ const TouchScrollDetect = () => {
           </p>)}
       </div>
 
-      <div className="h-[2000px] bg-white mt-4 rounded p-4 shadow">
+      <div className="h-[200px] bg-white mt-4 rounded p-4 shadow">
         <p>Scroll this page with 1 or 2 fingers.</p>
       </div>
     </div>);

package/dist/app/page.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Board from "../features/board";
+import SideTool from "../features/side-tool";
+import ControlPanels from "../features/panel";
+const TableEditor = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
+};
+export default TableEditor;

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Popover } from "antd";
+const ButtonTools = (props) => {
+    const { buttonProps, items, popoverProps } = props;
+    if (items.length === 0) {
+        return (_jsx(Popover, Object.assign({ trigger: "hover" }, popoverProps, { children: _jsx(Button, Object.assign({}, buttonProps)) })));
+    }
+    return (_jsx(Popover, { content: _jsxs("div", { children: [_jsx(Button, { children: "Button 1" }), _jsx(Button, { children: "Button 2" })] }), trigger: "click", children: _jsx(Button, Object.assign({}, buttonProps)) }));
+};
+export default ButtonTools;

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

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

package/dist/components/form-tools/shape.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+const SectionShape = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0 }) })] })] }));
+};
+export default SectionShape;

package/dist/components/input/number-indicator.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Input, Button, Flex, Form } from "antd";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+const NumberIndicator = ({ name, defaultValue, onChange }) => {
+    const [value, setValue] = useState(0);
+    const form = Form.useFormInstance();
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(defaultValue);
+            form.setFieldsValue({ [name]: defaultValue });
+        }
+    }, [defaultValue]);
+    const handlePrev = () => {
+        setValue(value - 1);
+        form.setFieldsValue({ [name]: value - 1 });
+        onChange(value - 1);
+    };
+    const handleNext = () => {
+        setValue(value + 1);
+        form.setFieldsValue({ [name]: value + 1 });
+        onChange(value + 1);
+    };
+    return (_jsxs(Flex, { gap: 2, children: [_jsx(Button, { onClick: handlePrev, children: _jsx(ArrowLeft, {}) }), _jsx(Form.Item, { name: name, noStyle: true, children: _jsx(Input, { className: "flex text-center", type: "number", value: value, name: name, onChange: (e) => setValue(parseInt(e.target.value)) }) }), _jsx(Button, { onClick: handleNext, children: _jsx(ArrowRight, {}) })] }));
+};
+export default NumberIndicator;