npm - seat-editor - Versions diffs - 3.3.13 → 3.3.14 - Mend

seat-editor 3.3.13 → 3.3.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/dist/app/constant.d.ts +1 -0
package/dist/app/constant.js +1 -0
package/dist/app/layout.d.ts +6 -0
package/dist/app/layout.jsx +27 -0
package/dist/app/new-board/page.jsx +55 -0
package/dist/app/old-board/page.d.ts +3 -0
package/dist/app/old-board/page.jsx +510 -0
package/dist/app/only-view/chair.d.ts +1 -0
package/dist/app/only-view/chair.js +12 -0
package/dist/app/only-view/constant.d.ts +60 -0
package/dist/app/only-view/constant.js +1336 -0
package/dist/app/only-view/page.jsx +248 -0
package/dist/app/only-view/user.d.ts +1 -0
package/dist/app/only-view/user.js +12 -0
package/dist/app/page.d.ts +2 -0
package/dist/app/page.jsx +13 -0
package/dist/app/test/page.d.ts +2 -0
package/dist/app/test/page.jsx +45 -0
package/dist/app/v2/page.d.ts +2 -0
package/dist/app/v2/page.jsx +13 -0
package/dist/components/button-tools/index.d.ts +11 -0
package/dist/components/button-tools/index.jsx +17 -0
package/dist/components/form-tools/label.d.ts +2 -0
package/dist/components/form-tools/label.jsx +63 -0
package/dist/components/form-tools/shape.d.ts +8 -0
package/dist/components/form-tools/shape.jsx +113 -0
package/dist/components/input/number-indicator.d.ts +7 -0
package/dist/components/input/number-indicator.jsx +36 -0
package/dist/components/joystick/index.d.ts +12 -0
package/dist/components/joystick/index.jsx +49 -0
package/dist/components/layer/index.d.ts +19 -0
package/dist/components/layer/index.jsx +383 -0
package/dist/components/layer-v2/index.d.ts +19 -0
package/dist/components/layer-v2/index.jsx +370 -0
package/dist/components/layer-v3/index.d.ts +13 -0
package/dist/components/layer-v3/index.jsx +631 -0
package/dist/components/layer-v3/utils.d.ts +19 -0
package/dist/components/layer-v3/utils.js +72 -0
package/dist/components/layer-v4/constant.d.ts +60 -0
package/dist/components/layer-v4/constant.js +93 -0
package/dist/components/layer-v4/index.d.ts +24 -0
package/dist/components/layer-v4/index.jsx +1046 -0
package/dist/components/lib/index.d.ts +8 -0
package/dist/components/lib/index.jsx +33 -0
package/dist/components/modal-preview/index.d.ts +4 -0
package/dist/components/modal-preview/index.jsx +11 -0
package/dist/dto/event-handler.d.ts +1 -0
package/dist/dto/event-handler.js +1 -0
package/dist/dto/table.d.ts +79 -0
package/dist/dto/table.js +1 -0
package/dist/features/board/board-slice.d.ts +14 -0
package/dist/features/board/board-slice.js +52 -0
package/dist/features/board/index.d.ts +6 -0
package/dist/features/board/index.jsx +725 -0
package/dist/features/board-v2/board-slice.d.ts +14 -0
package/dist/features/board-v2/board-slice.js +52 -0
package/dist/features/board-v2/index.d.ts +8 -0
package/dist/features/board-v2/index.jsx +869 -0
package/dist/features/board-v3/board-slice.d.ts +19 -0
package/dist/features/board-v3/board-slice.js +274 -0
package/dist/features/board-v3/constant.d.ts +5 -0
package/dist/features/board-v3/constant.js +5 -0
package/dist/features/board-v3/history-slice.d.ts +27 -0
package/dist/features/board-v3/history-slice.js +27 -0
package/dist/features/board-v3/icons.d.ts +4 -0
package/dist/features/board-v3/icons.jsx +100 -0
package/dist/features/board-v3/index.d.ts +16 -0
package/dist/features/board-v3/index.jsx +1678 -0
package/dist/features/board-v3/polygon.d.ts +28 -0
package/dist/features/board-v3/polygon.js +109 -0
package/dist/features/board-v3/rect.d.ts +9 -0
package/dist/features/board-v3/rect.js +152 -0
package/dist/features/board-v3/resize-element.d.ts +12 -0
package/dist/features/board-v3/resize-element.js +43 -0
package/dist/features/board-v3/utils.d.ts +180 -0
package/dist/features/board-v3/utils.js +1235 -0
package/dist/features/navbar/index.d.ts +2 -0
package/dist/features/navbar/index.jsx +5 -0
package/dist/features/panel/index.d.ts +6 -0
package/dist/features/panel/index.jsx +251 -0
package/dist/features/panel/panel-slice.d.ts +23 -0
package/dist/features/panel/panel-slice.js +46 -0
package/dist/features/panel/select-tool.d.ts +6 -0
package/dist/features/panel/select-tool.jsx +70 -0
package/dist/features/panel/selected-group.d.ts +2 -0
package/dist/features/panel/selected-group.jsx +93 -0
package/dist/features/panel/square-circle-tool.d.ts +2 -0
package/dist/features/panel/square-circle-tool.jsx +10 -0
package/dist/features/panel/table-seat-circle.d.ts +2 -0
package/dist/features/panel/table-seat-circle.jsx +36 -0
package/dist/features/panel/table-seat-square.d.ts +2 -0
package/dist/features/panel/table-seat-square.jsx +51 -0
package/dist/features/panel/text-tool.d.ts +2 -0
package/dist/features/panel/text-tool.jsx +57 -0
package/dist/features/panel/upload-tool.d.ts +10 -0
package/dist/features/panel/upload-tool.jsx +176 -0
package/dist/features/panel/utils.d.ts +5 -0
package/dist/features/panel/utils.js +47 -0
package/dist/features/side-tool/index.d.ts +8 -0
package/dist/features/side-tool/index.jsx +390 -0
package/dist/features/side-tool/side-tool-slice.d.ts +16 -0
package/dist/features/side-tool/side-tool-slice.js +28 -0
package/dist/features/theme/theme-slice.d.ts +12 -0
package/dist/features/theme/theme-slice.js +15 -0
package/dist/features/view-only/index.d.ts +19 -0
package/dist/features/view-only/index.jsx +205 -0
package/dist/features/view-only-2/index.d.ts +19 -0
package/dist/features/view-only-2/index.jsx +190 -0
package/dist/features/view-only-3/index.d.ts +89 -0
package/dist/features/view-only-3/index.jsx +590 -0
package/dist/features/view-only-3/utils.d.ts +1 -0
package/dist/features/view-only-3/utils.js +3 -0
package/dist/hooks/use-redux.d.ts +4 -0
package/dist/hooks/use-redux.js +3 -0
package/dist/index.js +10 -0
package/dist/libs/middleware.d.ts +2 -0
package/dist/libs/middleware.js +5 -0
package/dist/libs/rootReducer.d.ts +12 -0
package/dist/libs/rootReducer.js +14 -0
package/dist/libs/store.d.ts +18 -0
package/dist/libs/store.js +19 -0
package/dist/provider/antd-provider.d.ts +4 -0
package/dist/provider/antd-provider.jsx +46 -0
package/dist/provider/redux-provider.d.ts +3 -0
package/dist/provider/redux-provider.jsx +6 -0
package/dist/provider/store-provider.d.ts +4 -0
package/dist/provider/store-provider.jsx +10 -0
package/dist/utils/constant.d.ts +3 -0
package/dist/utils/constant.js +13 -0
package/dist/utils/format.d.ts +2 -0
package/dist/utils/format.js +29 -0
package/dist/utils/injectCss.d.ts +1 -0
package/dist/utils/injectCss.js +13 -0
package/dist/utils/regex.d.ts +3 -0
package/dist/utils/regex.js +3 -0
package/package.json +1 -1

package/dist/app/constant.d.ts CHANGED Viewed

@@ -630,4 +630,5 @@ export declare const dummyExtra6: {
     height: number;
     labels: {}[];
     seatCount: number;
+    shape: Shape;
 }[];

package/dist/app/constant.js CHANGED Viewed

@@ -5570,6 +5570,7 @@ export const dummyExtra6 = [
         height: 662,
         labels: [{}],
         seatCount: 0,
+        shape: "background",
     },
     // {
     //   x: 100,

package/dist/app/layout.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Metadata } from "next";
+import "./globals.css";
+export declare const metadata: Metadata;
+export default function RootLayout({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): import("react").JSX.Element;

package/dist/app/layout.jsx ADDED Viewed

@@ -0,0 +1,27 @@
+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 (<html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <StoreProvider>
+          <Layout>{children}</Layout>
+        </StoreProvider>
+      </body>
+    </html>);
+}

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

@@ -0,0 +1,55 @@
+"use client";
+import { useEffect, useState } from "react";
+import SeatEditor from "../../features/package";
+import { dummyExtra6 } from "../constant";
+export default function NewBoard() {
+    const [initialValue, setInitialValue] = useState([]);
+    const [extraComponents, setExtraComponents] = useState([]);
+    const [backgroundColor, setBackgroundColor] = useState("#000000");
+    const [viewOnly, setViewOnly] = useState(false);
+    useEffect(() => {
+        setInitialValue([]);
+        setExtraComponents(dummyExtra6);
+    }, []);
+    const handleUploadImage = (file) => {
+        const test = new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+        return test;
+    };
+    return (<>
+      <div className="w-full h-screen flex flex-col relative justify-center">
+        <div className="w-full h-[1000px] bg-white border-r border-gray-200">
+        </div>
+        {/* <button className="bg-blue-500 text-white px-4 py-2 rounded"
+          onClick={() => setViewOnly(!viewOnly)}
+        >
+          {viewOnly ? "Edit Mode ddd" : "View Mode"}
+        </button> */}
+        <div className="flex-1 h-full">
+          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly={true} deleteAutorized={{
+            component: true,
+            extraComponent: true,
+        }} action={handleUploadImage} mappingKey="properties" onCurrentStateChange={(setState) => {
+            var _a, _b, _c, _d;
+            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
+            }
+            if (setState === null || setState === void 0 ? void 0 : setState.backgroundColor) {
+                setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
+            }
+            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
+            }
+        }} extraComponentProps={dummyExtra6} defaultBackground={backgroundColor}
+    // dragOnly={true}
+    statusKey="status"/>
+          </div>
+      </div>
+    </>);
+}

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

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

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

@@ -0,0 +1,510 @@
+"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/chair.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export function ChairIcon(): import("react").JSX.Element;

package/dist/app/only-view/chair.js ADDED Viewed

@@ -0,0 +1,12 @@
+export const ChairIcon = () => {
+    return (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_3019_14165)">
+        <path d="M15.9717 7.5339V4.70339C15.9717 3.07627 14.7076 2.5 13.5189 2.5H6.46226C5.27359 2.5 4.00943 3.07627 4.00943 4.70339V7.5339C3.14151 7.73729 2.5 8.4322 2.5 9.27966V13.822C2.5 15.161 3.5 15.6864 4.48113 15.7373V16.8898C4.48113 17.2288 4.78302 17.5 5.16038 17.5H5.85849C6.23585 17.5 6.53774 17.2288 6.53774 16.8898V15.7373H13.4623V16.8898C13.4623 17.2288 13.7642 17.5 14.1415 17.5H14.8396C15.217 17.5 15.5189 17.2288 15.5189 16.8898V15.7373C16.9717 15.6695 17.5 14.7203 17.5 13.822V9.26271C17.4623 8.4322 16.8208 7.72034 15.9717 7.5339ZM4.68868 4.70339C4.68868 3.31356 5.80189 3.09322 6.46226 3.09322H13.5189C14.1792 3.09322 15.2925 3.29661 15.2925 4.68644V7.4661C14.2736 7.55085 13.4623 8.31356 13.4623 9.26271V9.68644H6.51887V9.26271C6.51887 8.31356 5.70755 7.55085 4.68868 7.4661V4.70339ZM13.4434 10.2966V12.3983H6.51887V10.2966H13.4434ZM5.85849 16.8898H5.16038V15.7373H5.85849V16.8898ZM14.8208 16.8898H14.1226V15.7373H14.8208V16.8898ZM16.8208 13.822H16.8019C16.8019 14.4153 16.5566 15.1441 15.3302 15.1441H14.8208H14.1226H5.85849H5.16038H4.65094C3.99057 15.1441 3.17925 14.9237 3.17925 13.822V9.26271C3.17925 8.6017 3.78302 8.05932 4.51887 8.05932C5.25472 8.05932 5.85849 8.6017 5.85849 9.26271V12.7034C5.85849 12.8729 6.00943 13.0085 6.19811 13.0085H13.8019C13.9906 13.0085 14.1415 12.8729 14.1415 12.7034V9.26271C14.1415 8.6017 14.7453 8.05932 15.4811 8.05932C16.217 8.05932 16.8208 8.6017 16.8208 9.26271V13.822Z" fill="#347ADB" stroke="#347ADB" stroke-width="0.8"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_3019_14165">
+          <rect width="16.6667" height="16.6667" fill="white" transform="translate(1.66675 1.6665)"/>
+        </clipPath>
+      </defs>
+    </svg>);
+};