npm - seat-editor - Versions diffs - 1.2.3 → 1.2.5 - Mend

seat-editor 1.2.3 → 1.2.5

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 (66) hide show

package/dist/app/layout.d.ts +1 -1
package/dist/app/{layout.jsx → layout.js} +2 -7
package/dist/app/new-board/page.d.ts +1 -1
package/dist/app/new-board/page.js +7 -0
package/dist/app/old-board/page.d.ts +1 -2
package/dist/app/old-board/{page.jsx → page.js} +82 -215
package/dist/app/only-view/constant.js +26 -26
package/dist/app/only-view/page.d.ts +1 -1
package/dist/app/only-view/page.js +16 -0
package/dist/app/only-view/page.jsx +10 -1
package/dist/app/page.d.ts +1 -1
package/dist/app/page.js +8 -0
package/dist/components/button-tools/index.d.ts +1 -1
package/dist/components/button-tools/index.js +11 -0
package/dist/components/form-tools/label.d.ts +1 -1
package/dist/components/form-tools/label.js +7 -0
package/dist/components/form-tools/shape.d.ts +1 -1
package/dist/components/form-tools/shape.js +7 -0
package/dist/components/input/number-indicator.d.ts +1 -1
package/dist/components/input/{number-indicator.jsx → number-indicator.js} +2 -11
package/dist/components/layer/index.d.ts +1 -1
package/dist/components/layer/index.js +157 -0
package/dist/components/layer/index.jsx +1 -0
package/dist/components/lib/index.d.ts +1 -1
package/dist/components/lib/{index.jsx → index.js} +2 -7
package/dist/components/modal-preview/index.d.ts +1 -1
package/dist/components/modal-preview/index.js +10 -0
package/dist/features/board/index.d.ts +1 -1
package/dist/features/board/{index.jsx → index.js} +24 -37
package/dist/features/navbar/index.d.ts +1 -1
package/dist/features/navbar/index.js +6 -0
package/dist/features/package/index.d.ts +1 -1
package/dist/features/package/{index.jsx → index.js} +2 -7
package/dist/features/panel/index.d.ts +1 -1
package/dist/features/panel/{index.jsx → index.js} +9 -17
package/dist/features/panel/select-tool.d.ts +1 -1
package/dist/features/panel/{select-tool.jsx → select-tool.js} +7 -16
package/dist/features/panel/square-circle-tool.d.ts +1 -1
package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js} +2 -4
package/dist/features/panel/table-seat-circle.d.ts +1 -1
package/dist/features/panel/table-seat-circle.js +9 -0
package/dist/features/panel/text-tool.d.ts +1 -1
package/dist/features/panel/text-tool.js +7 -0
package/dist/features/panel/upload-tool.d.ts +1 -1
package/dist/features/panel/{upload-tool.jsx → upload-tool.js} +2 -16
package/dist/features/side-tool/index.d.ts +1 -1
package/dist/features/side-tool/{index.jsx → index.js} +66 -80
package/dist/features/view/index.d.ts +5 -7
package/dist/features/view/index.js +139 -0
package/dist/features/view/index.jsx +16 -11
package/dist/provider/antd-provider.js +27 -0
package/dist/provider/redux-provider.d.ts +1 -1
package/dist/provider/{redux-provider.jsx → redux-provider.js} +2 -1
package/dist/provider/store-provider.d.ts +1 -1
package/dist/provider/{store-provider.jsx → store-provider.js} +2 -3
package/package.json +2 -2
package/dist/app/new-board/page.jsx +0 -12
package/dist/app/page.jsx +0 -13
package/dist/components/button-tools/index.jsx +0 -17
package/dist/components/form-tools/label.jsx +0 -44
package/dist/components/form-tools/shape.jsx +0 -43
package/dist/components/modal-preview/index.jsx +0 -11
package/dist/features/navbar/index.jsx +0 -5
package/dist/features/panel/table-seat-circle.jsx +0 -31
package/dist/features/panel/text-tool.jsx +0 -22
package/dist/provider/antd-provider.jsx +0 -30

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

@@ -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.jsx → layout.js} RENAMED Viewed

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import localFont from "next/font/local";
 import "./globals.css";
 import { Layout } from "antd";
@@ -17,11 +18,5 @@ export const metadata = {
     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>);
+    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 CHANGED Viewed

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

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

@@ -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.d.ts CHANGED Viewed

@@ -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.jsx → page.js} RENAMED Viewed

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState } from "react";
+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";
@@ -297,219 +298,85 @@ const SeatEditor = () => {
         // 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>);
+    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/constant.js CHANGED Viewed

@@ -23,7 +23,7 @@ export const dummyImage = [
 ];
 export const dataDummy = [
     {
-        status: 1,
+        status: 2,
         properties: {
             x: 128,
             y: 103,
@@ -47,31 +47,31 @@ export const dataDummy = [
             ],
         },
     },
-    // {
-    //   status: 1,
-    //   properties: {
-    //     x: 205,
-    //     y: 103,
-    //     width: 61,
-    //     height: 91,
-    //     shape: "square",
-    //     id: 1747388375808,
-    //     fill: "#bca16a",
-    //     rotation: 0,
-    //     seatCount: 0,
-    //     text: "",
-    //     opacity: 0.5,
-    //     labels: [
-    //       {
-    //         label: "V2",
-    //         fontColor: "#0d0c0c",
-    //         x: 0,
-    //         fontSize: 20,
-    //         y: 8,
-    //       },
-    //     ],
-    //   },
-    // },
+    {
+        status: 1,
+        properties: {
+            x: 205,
+            y: 103,
+            width: 61,
+            height: 91,
+            shape: "square",
+            id: 1747388375808,
+            fill: "#bca16a",
+            rotation: 0,
+            seatCount: 0,
+            text: "",
+            opacity: 0.5,
+            labels: [
+                {
+                    label: "V2",
+                    fontColor: "#0d0c0c",
+                    x: 0,
+                    fontSize: 20,
+                    y: 8,
+                },
+            ],
+        },
+    },
     // {
     //   status: 1,
     //   properties: {

package/dist/app/only-view/page.d.ts CHANGED Viewed

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import LayerView from "@/features/view/index";
+import { dataDummy, dummyImage } from "./constant";
+const OnlyView = () => {
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative justify-center items-center", children: _jsx(LayerView, { componentProps: dataDummy, mappingKey: "properties", extraComponentProps: dummyImage, statusKey: "status", colorMatchKey: [
+                    {
+                        color: "red",
+                        key: "1",
+                    },
+                    {
+                        color: "blue",
+                        key: "2",
+                    }
+                ] }) }) }));
+};
+export default OnlyView;

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

@@ -3,7 +3,16 @@ import { dataDummy, dummyImage } from "./constant";
 const OnlyView = () => {
     return (<>
       <div className="w-full h-screen flex relative justify-center items-center">
-        <LayerView componentProps={dataDummy} mappingKey="properties" extraComponentProps={dummyImage} statusKey="status"/>
+        <LayerView componentProps={dataDummy} mappingKey="properties" extraComponentProps={dummyImage} statusKey="status" colorMatchKey={[
+            {
+                color: "red",
+                key: "1",
+            },
+            {
+                color: "blue",
+                key: "2",
+            }
+        ]}/>
       </div>
     </>);
 };

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberIndicator;

package/dist/components/input/{number-indicator.jsx → number-indicator.js} RENAMED Viewed

@@ -1,4 +1,5 @@
 "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";
@@ -21,16 +22,6 @@ const NumberIndicator = ({ name, defaultValue, onChange }) => {
         form.setFieldsValue({ [name]: value + 1 });
         onChange(value + 1);
     };
-    return (<Flex gap={2}>
-      <Button onClick={handlePrev}>
-        <ArrowLeft />
-      </Button>
-      <Form.Item name={name} noStyle>
-      <Input className="flex text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
-      </Form.Item>
-      <Button onClick={handleNext}>
-        <ArrowRight />
-      </Button>
-    </Flex>);
+    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;

package/dist/components/layer/index.d.ts CHANGED Viewed

@@ -10,5 +10,5 @@ interface LayersProps {
     selectedTable?: any;
     selectedTableColor?: string;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;