seat-editor 1.4.31 → 1.4.33

package/dist/app/layout.d.ts

@@ -3,4 +3,4 @@ import "./globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: Readonly<{
     children: React.ReactNode;
-}>): import("react").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -1 +1 @@
-export default function NewBoard(): import("react").JSX.Element;
+export default function NewBoard(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import SeatEditor from "../../features/package";
+import { constantData } from "../constant";
+export default function NewBoard() {
+    const [initialValue, setInitialValue] = useState([]);
+    const [viewOnly, setViewOnly] = useState(true);
+    console.log("constantData", constantData);
+    useEffect(() => {
+        setInitialValue(constantData);
+    }, []);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex flex-col relative justify-center", children: [_jsx("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: () => setViewOnly(!viewOnly), children: viewOnly ? "Edit Mode" : "View Mode" }), _jsx("div", { className: "flex-1 h-full", children: _jsx(SeatEditor, { componentProps: initialValue, viewOnly: viewOnly, mappingKey: "properties", onCurrentStateChange: (setState) => {
+                            var _a;
+                            console.log("setState", setState);
+                            setInitialValue((_a = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _a !== void 0 ? _a : []);
+                        }, extraComponentProps: [], defaultBackground: "#ffffff", 
+                        // dragOnly={true}
+                        statusKey: "status", action: (action) => __awaiter(this, void 0, void 0, function* () {
+                            console.log("action", action);
+                        }) }) })] }) }));
+}

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

@@ -1,8 +1,19 @@
 "use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { useEffect, useState } from "react";
+import SeatEditor from "../../features/package";
 import { constantData } from "../constant";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
+    const [viewOnly, setViewOnly] = useState(true);
     console.log("constantData", constantData);
     useEffect(() => {
         setInitialValue(constantData);
@@ -26,23 +37,20 @@ export default function NewBoard() {
           }}
         /> */}
         {/* </div> */}
-        {/* <div className="flex-1 h-full">
-          <SeatEditor
-            componentProps={initialValue}
-            mappingKey="properties"
-            onCurrentStateChange={(setState: any) => {
-              console.log("setState", setState);
-              setInitialValue(setState?.components??[]);
-            }}
-            extraComponentProps={[]}
-            defaultBackground="#ffffff"
-            // dragOnly={true}
-            statusKey="status"
-            action={async (action: any) => {
-              console.log("action", action);
-            }}
-          />
-          </div> */}
+        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
+          {viewOnly ? "Edit Mode" : "View Mode"}
+        </button>
+        <div className="flex-1 h-full">
+          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} mappingKey="properties" onCurrentStateChange={(setState) => {
+            var _a;
+            console.log("setState", setState);
+            setInitialValue((_a = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _a !== void 0 ? _a : []);
+        }} extraComponentProps={[]} defaultBackground="#ffffff" 
+    // dragOnly={true}
+    statusKey="status" action={(action) => __awaiter(this, void 0, void 0, function* () {
+            console.log("action", action);
+        })}/>
+          </div>
 
       </div>
     </>);

package/dist/app/old-board/page.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-declare const SeatEditor: () => React.JSX.Element;
+declare const SeatEditor: () => import("react/jsx-runtime").JSX.Element;
 export default SeatEditor;

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

@@ -0,0 +1,377 @@
+"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);
+    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 (_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.d.ts

@@ -1,2 +1,2 @@
-declare const TouchScrollDetect: () => import("react").JSX.Element;
+declare const TouchScrollDetect: () => import("react/jsx-runtime").JSX.Element;
 export default TouchScrollDetect;

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

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(LayerView, { statusKey: "status", defaultBackground: "#000000", componentProps: dataDummy, extraComponentProps: [] }));
+};
+export default TouchScrollDetect;

package/dist/app/page.d.ts

@@ -1,2 +1,2 @@
-declare const TableEditor: () => import("react").JSX.Element;
+declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;

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.d.ts

@@ -7,5 +7,5 @@ interface ButtonToolsProps {
     }>;
     popoverProps?: PopoverProps;
 }
-declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonTools;

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.d.ts

@@ -1,2 +1,2 @@
-declare const SectionLabel: () => import("react").JSX.Element;
+declare const SectionLabel: () => import("react/jsx-runtime").JSX.Element;
 export default SectionLabel;

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.d.ts

@@ -1,2 +1,2 @@
-declare const SectionShape: () => import("react").JSX.Element;
+declare const SectionShape: () => import("react/jsx-runtime").JSX.Element;
 export default SectionShape;