seat-editor 2.1.0 → 2.1.2

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 (85) hide show
  1. package/dist/app/layout.d.ts +1 -1
  2. package/dist/app/{layout.jsx → layout.js} +2 -7
  3. package/dist/app/new-board/page.d.ts +1 -1
  4. package/dist/app/new-board/page.js +34 -0
  5. package/dist/app/old-board/page.d.ts +1 -2
  6. package/dist/app/old-board/{page.jsx → page.js} +82 -215
  7. package/dist/app/only-view/page.d.ts +1 -1
  8. package/dist/app/only-view/{page.jsx → page.js} +2 -1
  9. package/dist/app/page.d.ts +1 -1
  10. package/dist/app/page.js +8 -0
  11. package/dist/app/test/page.d.ts +1 -2
  12. package/dist/app/test/{page.jsx → page.js} +3 -5
  13. package/dist/app/v2/page.d.ts +1 -1
  14. package/dist/app/v2/page.js +8 -0
  15. package/dist/components/button-tools/index.d.ts +1 -1
  16. package/dist/components/button-tools/index.js +11 -0
  17. package/dist/components/form-tools/label.d.ts +1 -1
  18. package/dist/components/form-tools/label.js +7 -0
  19. package/dist/components/form-tools/shape.d.ts +1 -1
  20. package/dist/components/form-tools/shape.js +25 -0
  21. package/dist/components/input/number-indicator.d.ts +1 -1
  22. package/dist/components/input/{number-indicator.jsx → number-indicator.js} +2 -11
  23. package/dist/components/joystick/index.d.ts +1 -2
  24. package/dist/components/joystick/{index.jsx → index.js} +13 -14
  25. package/dist/components/layer/index.d.ts +1 -1
  26. package/dist/components/layer/index.js +295 -0
  27. package/dist/components/layer-v2/index.d.ts +1 -1
  28. package/dist/components/layer-v2/index.js +282 -0
  29. package/dist/components/layer-v3/index.d.ts +1 -1
  30. package/dist/components/layer-v3/index.js +337 -0
  31. package/dist/components/lib/index.d.ts +1 -1
  32. package/dist/components/lib/{index.jsx → index.js} +2 -7
  33. package/dist/components/modal-preview/index.d.ts +1 -1
  34. package/dist/components/modal-preview/index.js +10 -0
  35. package/dist/features/board/index.d.ts +1 -1
  36. package/dist/features/board/{index.jsx → index.js} +31 -90
  37. package/dist/features/board-v2/index.d.ts +1 -2
  38. package/dist/features/board-v2/{index.jsx → index.js} +39 -101
  39. package/dist/features/board-v3/index.d.ts +1 -2
  40. package/dist/features/board-v3/{index.jsx → index.js} +42 -120
  41. package/dist/features/navbar/index.d.ts +1 -1
  42. package/dist/features/navbar/index.js +6 -0
  43. package/dist/features/package/index.d.ts +1 -1
  44. package/dist/features/package/{index.jsx → index.js} +6 -16
  45. package/dist/features/panel/index.d.ts +1 -1
  46. package/dist/features/panel/{index.jsx → index.js} +8 -16
  47. package/dist/features/panel/select-tool.d.ts +1 -1
  48. package/dist/features/panel/{select-tool.jsx → select-tool.js} +8 -20
  49. package/dist/features/panel/square-circle-tool.d.ts +1 -1
  50. package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js} +2 -4
  51. package/dist/features/panel/table-seat-circle.d.ts +1 -1
  52. package/dist/features/panel/table-seat-circle.js +9 -0
  53. package/dist/features/panel/text-tool.d.ts +1 -1
  54. package/dist/features/panel/text-tool.js +7 -0
  55. package/dist/features/panel/upload-tool.d.ts +1 -1
  56. package/dist/features/panel/{upload-tool.jsx → upload-tool.js} +2 -24
  57. package/dist/features/side-tool/index.d.ts +1 -1
  58. package/dist/features/side-tool/{index.jsx → index.js} +98 -120
  59. package/dist/features/view/index.d.ts +1 -1
  60. package/dist/features/view/{index.jsx → index.js} +31 -38
  61. package/dist/features/view-only/index.d.ts +1 -1
  62. package/dist/features/view-only/{index.jsx → index.js} +31 -38
  63. package/dist/features/view-only-2/index.d.ts +1 -1
  64. package/dist/features/view-only-2/{index.jsx → index.js} +13 -16
  65. package/dist/provider/antd-provider.js +43 -0
  66. package/dist/provider/redux-provider.d.ts +1 -1
  67. package/dist/provider/{redux-provider.jsx → redux-provider.js} +2 -1
  68. package/dist/provider/store-provider.d.ts +1 -1
  69. package/dist/provider/{store-provider.jsx → store-provider.js} +2 -3
  70. package/dist/seat-editor.css +1 -1
  71. package/package.json +1 -1
  72. package/dist/app/new-board/page.jsx +0 -56
  73. package/dist/app/page.jsx +0 -13
  74. package/dist/app/v2/page.jsx +0 -13
  75. package/dist/components/button-tools/index.jsx +0 -17
  76. package/dist/components/form-tools/label.jsx +0 -44
  77. package/dist/components/form-tools/shape.jsx +0 -66
  78. package/dist/components/layer/index.jsx +0 -383
  79. package/dist/components/layer-v2/index.jsx +0 -370
  80. package/dist/components/layer-v3/index.jsx +0 -418
  81. package/dist/components/modal-preview/index.jsx +0 -11
  82. package/dist/features/navbar/index.jsx +0 -5
  83. package/dist/features/panel/table-seat-circle.jsx +0 -31
  84. package/dist/features/panel/text-tool.jsx +0 -26
  85. package/dist/provider/antd-provider.jsx +0 -46
package/dist/app/layout.d.ts CHANGED
@@ -3,4 +3,4 @@ import "./globals.css";
3
3
  export declare const metadata: Metadata;
4
4
  export default function RootLayout({ children, }: Readonly<{
5
5
  children: React.ReactNode;
6
- }>): import("react").JSX.Element;
6
+ }>): import("react/jsx-runtime").JSX.Element;
package/dist/app/{layout.jsx → layout.js} RENAMED
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  import localFont from "next/font/local";
2
3
  import "./globals.css";
3
4
  import { Layout } from "antd";
@@ -17,11 +18,5 @@ export const metadata = {
17
18
  description: "Generated by create next app",
18
19
  };
19
20
  export default function RootLayout({ children, }) {
20
- return (<html lang="en">
21
- <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
22
- <StoreProvider>
23
- <Layout>{children}</Layout>
24
- </StoreProvider>
25
- </body>
26
- </html>);
21
+ return (_jsx("html", { lang: "en", children: _jsx("body", { className: `${geistSans.variable} ${geistMono.variable} antialiased`, children: _jsx(StoreProvider, { children: _jsx(Layout, { children: children }) }) }) }));
27
22
  }
package/dist/app/new-board/page.d.ts CHANGED
@@ -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
@@ -0,0 +1,34 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { useEffect, useState } from "react";
4
+ import SeatEditor from "../../features/package";
5
+ import { data3 } from "../constant";
6
+ export default function NewBoard() {
7
+ const [initialValue, setInitialValue] = useState([]);
8
+ const [extraComponents, setExtraComponents] = useState([]);
9
+ const [backgroundColor, setBackgroundColor] = useState("#ffffff");
10
+ const [viewOnly, setViewOnly] = useState(true);
11
+ useEffect(() => {
12
+ setInitialValue(data3);
13
+ setExtraComponents([
14
+ {}
15
+ ]);
16
+ }, []);
17
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex flex-col relative justify-center", children: [_jsx("div", { className: "w-full h-[1000px] bg-white border-r border-gray-200" }), _jsx("div", { className: "flex-1 h-full", children: _jsx(SeatEditor, { componentProps: initialValue, viewOnly: false, dragOnly: true, deleteAutorized: {
18
+ component: true,
19
+ extraComponent: true,
20
+ }, mappingKey: "properties", onCurrentStateChange: (setState) => {
21
+ var _a, _b, _c, _d;
22
+ if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
23
+ setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
24
+ }
25
+ if (setState === null || setState === void 0 ? void 0 : setState.backgroundColor) {
26
+ setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
27
+ }
28
+ if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
29
+ setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
30
+ }
31
+ }, extraComponentProps: extraComponents, defaultBackground: backgroundColor,
32
+ // dragOnly={true}
33
+ statusKey: "status" }) })] }) }));
34
+ }
package/dist/app/old-board/page.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- import React from "react";
2
- declare const SeatEditor: () => React.JSX.Element;
1
+ declare const SeatEditor: () => import("react/jsx-runtime").JSX.Element;
3
2
  export default SeatEditor;
package/dist/app/old-board/{page.jsx → page.js} RENAMED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
- import React, { useState } from "react";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { useState } from "react";
3
4
  import { Button, Input, Modal } from "antd"; //tes commit
4
5
  // aduhuhhusd
5
6
  import { Square, MousePointer2, Move3D, Trash, CopyPlusIcon, ZoomInIcon, ZoomOutIcon, DownloadIcon, UploadIcon, Circle, PenIcon, Pencil, } from "lucide-react";
@@ -292,219 +293,85 @@ const SeatEditor = () => {
292
293
  // link.click();
293
294
  // document.body.removeChild(link);
294
295
  };
295
- return (<div className="flex h-screen w-full">
296
- {/* Toolbar */}
297
- <div className="w-16 bg-gray-800 text-white flex flex-col items-center py-4 space-y-4">
298
- {/* Select Tool */}
299
- <Button type={activeTool === "select" ? "primary" : "default"} shape="circle" icon={<MousePointer2 />} onClick={() => handleToolClick("select")}/>
300
- <Button type={activeTool === "circle" ? "primary" : "default"} shape="circle" icon={<Circle />} onClick={() => handleToolClick("circle")}/>
301
- <Button type={activeTool === "vip-seat" ? "primary" : "default"} shape="circle" icon={<PenIcon />} // Use any icon you prefer
302
- onClick={() => handleToolClick("vip-seat")}/>
303
- {/* Rectangle Tool */}
304
- <Button type={activeTool === "rectangle" ? "primary" : "default"} shape="circle" icon={<Square />} onClick={() => handleToolClick("rectangle")}/>
305
- {/* Node Tool */}
306
- <Button type={activeTool === "node" ? "primary" : "default"} shape="circle" icon={<Move3D />} onClick={() => handleToolClick("node")}/>
307
- <Button type={activeTool === "pen" ? "primary" : "default"} shape="circle" icon={<Pencil />} onClick={() => handleToolClick("pen")}/>
308
-
309
- {/* delete */}
310
- <Button type="default" shape="circle" icon={<Trash />} onClick={deleteSelectedRectangle}/>
311
- {/* duplicate */}
312
- <Button type="default" shape="circle" icon={<CopyPlusIcon />} // You can use a copy icon
313
- onClick={duplicateRectangle}/>
314
- {/* zoomIn/out */}
315
- <Button type="default" shape="circle" onClick={zoomIn} icon={<ZoomInIcon />}/>
316
- <Button type="default" shape="circle" onClick={zoomOut} icon={<ZoomOutIcon />}/>
317
- {/* {activeTool === "image" && ( */}
318
- <UploadIcon />
319
- <span>Image Seat</span>
320
- <input type="file" accept="image/*" onChange={handleImageUpload}/>
321
- <span>Background Image</span>
322
- <input type="file" accept="image/*" onChange={handleImageUploadBackground}/>
323
- {/* )} */}
324
- <Button shape="circle" icon={<DownloadIcon />} onClick={exportJSON}/>
325
- </div>
326
-
327
- {/* Workspace */}
328
- <div className="w-full flex items-center justify-center" id={"workspace"}>
329
- <div className={`bg-gray-900 relative ${getCursorStyle()} w-full h-screen `} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} style={{
330
- transform: `scale(${zoom})`,
331
- transformOrigin: "0 0",
332
- }}>
333
-
334
- {shadowRect && (<div className="absolute border-dashed border-2 border-blue-400" style={{
335
- left: shadowRect.x,
336
- top: shadowRect.y,
337
- width: shadowRect.width,
338
- height: shadowRect.height,
339
- backgroundColor: shadowRect.color,
340
- }}/>)}
341
- {/* Render rectangles */}
342
- {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
343
- ? "border-black"
344
- : "border-gray-300"}`} style={{
345
- left: rect.x,
346
- top: rect.y,
347
- width: rect.width,
348
- height: rect.height,
349
- backgroundColor: rect.color,
350
- transform: `rotate(${rect.rotation}deg)`,
351
- transformOrigin: "center",
352
- borderRadius: rect.shape === "circle" ? "100%" : "0%",
353
- }}>
354
- {rect.shape === "image-table" && (<div className="w-full h-full relative">
355
- <img src={rect.src} alt="custom" className="w-full h-full object-cover" draggable={false}/>
356
- <div className="absolute left-0 right-0 flex items-center justify-center" style={{
357
- top: "10%",
358
- height: "20%",
359
- backgroundColor: rect.highlightColor || "transparent",
360
- }}>
361
- <span className="text-white font-bold text-xs absolute" style={{
362
- top: "10%",
363
- left: "50%",
364
- }}>
365
- {rect.table}
366
- </span>
367
- </div>
368
- <span className="text-xs text-white flex items-center justify-center absolute w-full" style={{
369
- top: "85%",
370
- left: "50%",
371
- transform: "translate(-50%, -50%)",
372
- backgroundColor: rect.highlightColor || "transparent"
373
- }}>
374
- {rect.pax}
375
- </span>
376
- <div className="absolute left-0 right-0 flex items-center justify-center" style={{
377
- top: "40%",
378
- height: "20%",
379
- backgroundColor: rect.highlightColor || "transparent",
380
- }}>
381
- <span className="text-white font-bold text-xs">
382
- {rect.status}
383
- </span>
384
- </div>
385
- </div>)}
386
- {rect.shape === "image" && (<img src={rect.src} alt="custom" className="w-full h-full object-cover" draggable={false}/>)}
387
- {rect.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
388
- top: "10%",
389
- height: "20%",
390
- }}>
391
- <span className="text-white font-bold text-xs">
392
- {rect.table}
393
- </span>
394
- </div>)}
395
- {rect.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
396
- top: "40%",
397
- height: "20%",
398
- backgroundColor: rect.highlightColor || "transparent",
399
- }}>
400
- <span className="text-white font-bold text-xs">
401
- {rect.status}
402
- </span>
403
- </div>)}
404
-
405
- {/* Bottom Text */}
406
- <div className="absolute bottom-2 left-0 right-0 text-center text-white text-sm">
407
- {rect.shape === "vip-seat" ? "8 Pax" : ""}
408
- </div>
409
-
410
- {/* Resize Nodes */}
411
- {/* Resize Nodes (Only Show When in Node Mode and Item is Selected) */}
412
- {activeTool === "node" && (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id && (<>
413
- {/* Top Left */}
414
- <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
415
- top: -6,
416
- left: -6,
417
- cursor: "nwse-resize",
418
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
419
- }} onMouseDown={() => startResizing("top-left")}/>
420
- {/* Top Right */}
421
- <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
422
- top: -6,
423
- right: -6,
424
- cursor: "nesw-resize",
425
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
426
- }} onMouseDown={() => startResizing("top-right")}/>
427
- {/* Bottom Left */}
428
- <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
429
- bottom: -6,
430
- left: -6,
431
- cursor: "nesw-resize",
432
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
433
- }} onMouseDown={() => startResizing("bottom-left")}/>
434
- {/* Bottom Right */}
435
- <div className="absolute w-3 h-3 bg-white border border-gray-800" style={{
436
- bottom: -6,
437
- right: -6,
438
- cursor: "nwse-resize",
439
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
440
- }} onMouseDown={() => startResizing("bottom-right")}/>
441
- </>)}
442
- </div>))}
443
- </div>
444
- </div>
445
-
446
- {/* Rectangle Customization Modal */}
447
- <Modal open={showModal} onCancel={() => setShowModal(false)} onOk={() => setShowModal(false)} title="Edit Rectangle">
448
- {selectedRectangle && (<>
449
- <div className="flex gap-4 items-center">
450
- <div className="flex flex-col">
451
- <p className="mb-2 font-semibold">Change Color:</p>
452
- <SketchPicker color={selectedRectangle.color} onChangeComplete={(color) => updateRectangle({ color: color.hex })}/>
453
- </div>
454
- <div className="flex flex-col">
455
- <p className="mt-4 mb-2 font-semibold">Live Preview:</p>
456
- <div className="relative borderflex items-center justify-center" style={{
457
- width: selectedRectangle.width,
458
- height: selectedRectangle.height,
459
- margin: "0 auto",
460
- transform: `rotate(${selectedRectangle.rotation}deg)`,
461
- backgroundColor: selectedRectangle.color,
462
- transition: "all 0.3s ease",
463
- scale: "0.5",
464
- borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
465
- }}>
466
- {selectedRectangle.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
467
- top: "10%",
468
- height: "20%",
469
- }}>
470
- <span className="text-white font-bold text-xs">
471
- {selectedRectangle.status}sfsdf
472
- </span>
473
- </div>)}
474
- {selectedRectangle.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
475
- top: "40%",
476
- height: "20%",
477
- backgroundColor: selectedRectangle.highlightColor || "transparent",
478
- }}>
479
- <span className="text-white font-bold text-xs">
480
- {selectedRectangle.status} dsdsd
481
- </span>
482
- </div>)}
483
- </div>
484
- </div>
485
- </div>
486
-
487
- {/* Preview Section */}
488
-
489
- <p className="mt-4 mb-2 font-semibold">Edit Text:</p>
490
- <Input value={selectedRectangle.pax} onChange={(e) => updateRectangle({ pax: e.target.value })}/>
491
- <p className="mt-4 mb-2 font-semibold">Edit Label:</p>
492
- <Input value={selectedRectangle.table} onChange={(e) => updateRectangle({ table: e.target.value })}/>
493
- <p className="mt-4 mb-2 font-semibold">Edit Highlight:</p>
494
- <Input value={selectedRectangle.status} onChange={(e) => updateRectangle({ status: e.target.value })}/>
495
- {/* Rotation Controls */}
496
- <p className="mt-4 mb-2 font-semibold">Rotate:</p>
497
- <div className="flex gap-4 items-center">
498
- <Button onClick={() => rotateRectangle("left")}>
499
- ⟲ Rotate Left
500
- </Button>
501
- <span>{selectedRectangle.rotation}°</span>
502
- <Button onClick={() => rotateRectangle("right")}>
503
- ⟳ Rotate Right
504
- </Button>
505
- </div>
506
- </>)}
507
- </Modal>
508
- </div>);
296
+ 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: {
297
+ transform: `scale(${zoom})`,
298
+ transformOrigin: "0 0",
299
+ }, children: [shadowRect && (_jsx("div", { className: "absolute border-dashed border-2 border-blue-400", style: {
300
+ left: shadowRect.x,
301
+ top: shadowRect.y,
302
+ width: shadowRect.width,
303
+ height: shadowRect.height,
304
+ backgroundColor: shadowRect.color,
305
+ } })), 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
306
+ ? "border-black"
307
+ : "border-gray-300"}`, style: {
308
+ left: rect.x,
309
+ top: rect.y,
310
+ width: rect.width,
311
+ height: rect.height,
312
+ backgroundColor: rect.color,
313
+ transform: `rotate(${rect.rotation}deg)`,
314
+ transformOrigin: "center",
315
+ borderRadius: rect.shape === "circle" ? "100%" : "0%",
316
+ }, 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: {
317
+ top: "10%",
318
+ height: "20%",
319
+ backgroundColor: rect.highlightColor || "transparent",
320
+ }, children: _jsx("span", { className: "text-white font-bold text-xs absolute", style: {
321
+ top: "10%",
322
+ left: "50%",
323
+ }, children: rect.table }) }), _jsx("span", { className: "text-xs text-white flex items-center justify-center absolute w-full", style: {
324
+ top: "85%",
325
+ left: "50%",
326
+ transform: "translate(-50%, -50%)",
327
+ backgroundColor: rect.highlightColor || "transparent"
328
+ }, children: rect.pax }), _jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
329
+ top: "40%",
330
+ height: "20%",
331
+ backgroundColor: rect.highlightColor || "transparent",
332
+ }, 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: {
333
+ top: "10%",
334
+ height: "20%",
335
+ }, 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: {
336
+ top: "40%",
337
+ height: "20%",
338
+ backgroundColor: rect.highlightColor || "transparent",
339
+ }, 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: {
340
+ top: -6,
341
+ left: -6,
342
+ cursor: "nwse-resize",
343
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
344
+ }, onMouseDown: () => startResizing("top-left") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
345
+ top: -6,
346
+ right: -6,
347
+ cursor: "nesw-resize",
348
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
349
+ }, onMouseDown: () => startResizing("top-right") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
350
+ bottom: -6,
351
+ left: -6,
352
+ cursor: "nesw-resize",
353
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
354
+ }, onMouseDown: () => startResizing("bottom-left") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
355
+ bottom: -6,
356
+ right: -6,
357
+ cursor: "nwse-resize",
358
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
359
+ }, 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: {
360
+ width: selectedRectangle.width,
361
+ height: selectedRectangle.height,
362
+ margin: "0 auto",
363
+ transform: `rotate(${selectedRectangle.rotation}deg)`,
364
+ backgroundColor: selectedRectangle.color,
365
+ transition: "all 0.3s ease",
366
+ scale: "0.5",
367
+ borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
368
+ }, children: [selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
369
+ top: "10%",
370
+ height: "20%",
371
+ }, 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: {
372
+ top: "40%",
373
+ height: "20%",
374
+ backgroundColor: selectedRectangle.highlightColor || "transparent",
375
+ }, 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" })] })] })) })] }));
509
376
  };
510
377
  export default SeatEditor;
package/dist/app/only-view/page.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const TouchScrollDetect: () => import("react").JSX.Element;
1
+ declare const TouchScrollDetect: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default TouchScrollDetect;
package/dist/app/only-view/{page.jsx → page.js} RENAMED
@@ -1,4 +1,5 @@
1
1
  "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import LayerView from "@/features/view";
3
4
  import { useState, useEffect } from "react";
4
5
  import { dataDummy } from "./constant";
@@ -35,6 +36,6 @@ const TouchScrollDetect = () => {
35
36
  }
36
37
  };
37
38
  }, []);
38
- return (<LayerView statusKey="status" defaultBackground="#000000" componentProps={dataDummy} extraComponentProps={[]}/>);
39
+ return (_jsx(LayerView, { statusKey: "status", defaultBackground: "#000000", componentProps: dataDummy, extraComponentProps: [] }));
39
40
  };
40
41
  export default TouchScrollDetect;
package/dist/app/page.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const TableEditor: () => import("react").JSX.Element;
1
+ declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default TableEditor;
package/dist/app/page.js ADDED
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import Board from "../features/board-v3";
3
+ import SideTool from "../features/side-tool";
4
+ import ControlPanels from "../features/panel";
5
+ const TableEditor = () => {
6
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
7
+ };
8
+ export default TableEditor;
package/dist/app/test/page.d.ts CHANGED
@@ -1,2 +1 @@
1
- import React from "react";
2
- export default function DraggableRect(): React.JSX.Element;
1
+ export default function DraggableRect(): import("react/jsx-runtime").JSX.Element;
package/dist/app/test/{page.jsx → page.js} RENAMED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
- import React, { useRef, useState } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { useRef, useState } from "react";
3
4
  export default function DraggableRect() {
4
5
  const rectRef = useRef(null);
5
6
  const [pos, setPos] = useState({ x: 100, y: 100 });
@@ -38,8 +39,5 @@ export default function DraggableRect() {
38
39
  const handleEnd = () => {
39
40
  setDragging(false);
40
41
  };
41
- return (<svg width="100%" height="500" viewBox="0 0 800 600" style={{ border: "1px solid black", touchAction: "none" }} // important!
42
- onMouseMove={handleMove} onMouseUp={handleEnd} onTouchMove={handleMove} onTouchEnd={handleEnd}>
43
- <rect ref={rectRef} x={pos.x} y={pos.y} width="150" height="100" fill="tomato" onMouseDown={handleStart} onTouchStart={handleStart} style={{ cursor: "grab" }}/>
44
- </svg>);
42
+ return (_jsx("svg", { width: "100%", height: "500", viewBox: "0 0 800 600", style: { border: "1px solid black", touchAction: "none" }, onMouseMove: handleMove, onMouseUp: handleEnd, onTouchMove: handleMove, onTouchEnd: handleEnd, children: _jsx("rect", { ref: rectRef, x: pos.x, y: pos.y, width: "150", height: "100", fill: "tomato", onMouseDown: handleStart, onTouchStart: handleStart, style: { cursor: "grab" } }) }));
45
43
  }
package/dist/app/v2/page.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const TableEditor: () => import("react").JSX.Element;
1
+ declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default TableEditor;
package/dist/app/v2/page.js ADDED
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import Board from "../../features/board-v2";
3
+ import SideTool from "../../features/side-tool";
4
+ import ControlPanels from "../../features/panel";
5
+ const TableEditor = () => {
6
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
7
+ };
8
+ export default TableEditor;
package/dist/components/button-tools/index.d.ts CHANGED
@@ -7,5 +7,5 @@ interface ButtonToolsProps {
7
7
  }>;
8
8
  popoverProps?: PopoverProps;
9
9
  }
10
- declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
10
+ declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
11
11
  export default ButtonTools;
package/dist/components/button-tools/index.js ADDED
@@ -0,0 +1,11 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Button, Popover } from "antd";
4
+ const ButtonTools = (props) => {
5
+ const { buttonProps, items, popoverProps } = props;
6
+ if (items.length === 0) {
7
+ return (_jsx(Popover, Object.assign({ trigger: "hover" }, popoverProps, { children: _jsx(Button, Object.assign({}, buttonProps)) })));
8
+ }
9
+ 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)) }));
10
+ };
11
+ export default ButtonTools;
package/dist/components/form-tools/label.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const SectionLabel: () => import("react").JSX.Element;
1
+ declare const SectionLabel: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default SectionLabel;
package/dist/components/form-tools/label.js ADDED
@@ -0,0 +1,7 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
4
+ const SectionLabel = () => {
5
+ 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" })] }));
6
+ };
7
+ export default SectionLabel;
package/dist/components/form-tools/shape.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  declare const SectionShape: ({ allowChangeShape, }: {
2
2
  allowChangeShape?: boolean;
3
- }) => import("react").JSX.Element;
3
+ }) => import("react/jsx-runtime").JSX.Element;
4
4
  export default SectionShape;
package/dist/components/form-tools/shape.js ADDED
@@ -0,0 +1,25 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
4
+ const SectionShape = ({ allowChangeShape = true, }) => {
5
+ const optionsShape = [
6
+ {
7
+ value: "circle",
8
+ label: "Circle",
9
+ },
10
+ {
11
+ value: "square",
12
+ label: "Square",
13
+ },
14
+ {
15
+ value: "table-seat-circle",
16
+ label: "Table Seat Circle",
17
+ },
18
+ {
19
+ label: "Image Table",
20
+ value: "image-table",
21
+ },
22
+ ];
23
+ return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), allowChangeShape && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { options: optionsShape, className: "w-full" }) }) })), _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 }) })] })] }));
24
+ };
25
+ export default SectionShape;
package/dist/components/input/number-indicator.d.ts CHANGED
@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
3
3
  defaultValue?: number;
4
4
  onChange: (value: number) => void;
5
5
  }
6
- declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
6
+ declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
7
7
  export default NumberIndicator;
package/dist/components/input/{number-indicator.jsx → number-indicator.js} RENAMED
@@ -1,4 +1,5 @@
1
1
  "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useState, useEffect } from "react";
3
4
  import { Input, Button, Flex, Form } from "antd";
4
5
  import { ArrowRight, ArrowLeft } from "lucide-react";
@@ -21,16 +22,6 @@ const NumberIndicator = ({ name, defaultValue, onChange }) => {
21
22
  form.setFieldsValue({ [name]: value + 1 });
22
23
  onChange(value + 1);
23
24
  };
24
- return (<Flex gap={2}>
25
- <Button onClick={handlePrev}>
26
- <ArrowLeft />
27
- </Button>
28
- <Form.Item name={name} noStyle>
29
- <Input className="flex text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
30
- </Form.Item>
31
- <Button onClick={handleNext}>
32
- <ArrowRight />
33
- </Button>
34
- </Flex>);
25
+ 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, {}) })] }));
35
26
  };
36
27
  export default NumberIndicator;
package/dist/components/joystick/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import React from "react";
2
1
  type JoystickPosition = {
3
2
  x: number;
4
3
  y: number;
@@ -8,5 +7,5 @@ type JoystickProps = {
8
7
  onMove?: (pos: JoystickPosition) => void;
9
8
  onEnd?: () => void;
10
9
  };
11
- export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
10
+ export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
12
11
  export {};