seat-editor 1.3.5 → 1.3.7

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 (64) 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 +7 -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 -17
  9. package/dist/app/page.d.ts +1 -1
  10. package/dist/app/page.js +8 -0
  11. package/dist/components/button-tools/index.d.ts +1 -1
  12. package/dist/components/button-tools/index.js +11 -0
  13. package/dist/components/form-tools/label.d.ts +1 -1
  14. package/dist/components/form-tools/label.js +7 -0
  15. package/dist/components/form-tools/shape.d.ts +1 -1
  16. package/dist/components/form-tools/shape.js +7 -0
  17. package/dist/components/input/number-indicator.d.ts +1 -1
  18. package/dist/components/input/{number-indicator.jsx → number-indicator.js} +2 -11
  19. package/dist/components/layer/index.d.ts +1 -1
  20. package/dist/components/layer/index.js +168 -0
  21. package/dist/components/lib/index.d.ts +1 -1
  22. package/dist/components/lib/{index.jsx → index.js} +2 -7
  23. package/dist/components/modal-preview/index.d.ts +1 -1
  24. package/dist/components/modal-preview/index.js +10 -0
  25. package/dist/features/board/index.d.ts +1 -1
  26. package/dist/features/board/{index.jsx → index.js} +24 -37
  27. package/dist/features/navbar/index.d.ts +1 -1
  28. package/dist/features/navbar/index.js +6 -0
  29. package/dist/features/package/index.d.ts +1 -1
  30. package/dist/features/package/{index.jsx → index.js} +2 -7
  31. package/dist/features/panel/index.d.ts +1 -1
  32. package/dist/features/panel/{index.jsx → index.js} +7 -15
  33. package/dist/features/panel/select-tool.d.ts +1 -1
  34. package/dist/features/panel/{select-tool.jsx → select-tool.js} +7 -16
  35. package/dist/features/panel/square-circle-tool.d.ts +1 -1
  36. package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js} +2 -4
  37. package/dist/features/panel/table-seat-circle.d.ts +1 -1
  38. package/dist/features/panel/table-seat-circle.js +9 -0
  39. package/dist/features/panel/text-tool.d.ts +1 -1
  40. package/dist/features/panel/text-tool.js +7 -0
  41. package/dist/features/panel/upload-tool.d.ts +1 -1
  42. package/dist/features/panel/{upload-tool.jsx → upload-tool.js} +2 -16
  43. package/dist/features/side-tool/index.d.ts +1 -1
  44. package/dist/features/side-tool/{index.jsx → index.js} +66 -80
  45. package/dist/features/view/index.d.ts +1 -1
  46. package/dist/features/view/{index.jsx → index.js} +31 -38
  47. package/dist/provider/antd-provider.js +27 -0
  48. package/dist/provider/redux-provider.d.ts +1 -1
  49. package/dist/provider/{redux-provider.jsx → redux-provider.js} +2 -1
  50. package/dist/provider/store-provider.d.ts +1 -1
  51. package/dist/provider/{store-provider.jsx → store-provider.js} +2 -3
  52. package/dist/seat-editor.css +1 -0
  53. package/package.json +1 -1
  54. package/dist/app/new-board/page.jsx +0 -12
  55. package/dist/app/page.jsx +0 -13
  56. package/dist/components/button-tools/index.jsx +0 -17
  57. package/dist/components/form-tools/label.jsx +0 -44
  58. package/dist/components/form-tools/shape.jsx +0 -43
  59. package/dist/components/layer/index.jsx +0 -254
  60. package/dist/components/modal-preview/index.jsx +0 -11
  61. package/dist/features/navbar/index.jsx +0 -5
  62. package/dist/features/panel/table-seat-circle.jsx +0 -31
  63. package/dist/features/panel/text-tool.jsx +0 -22
  64. package/dist/provider/antd-provider.jsx +0 -30
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,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import Board from "../../features/board";
3
+ import SideTool from "../../features/side-tool";
4
+ import ControlPanels from "../../features/panel";
5
+ export default function NewBoard() {
6
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: "tw-w-full tw-h-screen tw-flex tw-relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
7
+ }
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";
@@ -297,219 +298,85 @@ const SeatEditor = () => {
297
298
  // link.click();
298
299
  // document.body.removeChild(link);
299
300
  };
300
- return (<div className="tw-flex tw-h-screen tw-w-full">
301
- {/* Toolbar */}
302
- <div className="tw-w-16 tw-bg-gray-800 tw-text-white tw-flex tw-flex-col tw-items-center tw-py-4 tw-space-y-4">
303
- {/* Select Tool */}
304
- <Button type={activeTool === "select" ? "primary" : "default"} shape="circle" icon={<MousePointer2 />} onClick={() => handleToolClick("select")}/>
305
- <Button type={activeTool === "circle" ? "primary" : "default"} shape="circle" icon={<Circle />} onClick={() => handleToolClick("circle")}/>
306
- <Button type={activeTool === "vip-seat" ? "primary" : "default"} shape="circle" icon={<PenIcon />} // Use any icon you prefer
307
- onClick={() => handleToolClick("vip-seat")}/>
308
- {/* Rectangle Tool */}
309
- <Button type={activeTool === "rectangle" ? "primary" : "default"} shape="circle" icon={<Square />} onClick={() => handleToolClick("rectangle")}/>
310
- {/* Node Tool */}
311
- <Button type={activeTool === "node" ? "primary" : "default"} shape="circle" icon={<Move3D />} onClick={() => handleToolClick("node")}/>
312
- <Button type={activeTool === "pen" ? "primary" : "default"} shape="circle" icon={<Pencil />} onClick={() => handleToolClick("pen")}/>
313
-
314
- {/* delete */}
315
- <Button type="default" shape="circle" icon={<Trash />} onClick={deleteSelectedRectangle}/>
316
- {/* duplicate */}
317
- <Button type="default" shape="circle" icon={<CopyPlusIcon />} // You can use a copy icon
318
- onClick={duplicateRectangle}/>
319
- {/* zoomIn/out */}
320
- <Button type="default" shape="circle" onClick={zoomIn} icon={<ZoomInIcon />}/>
321
- <Button type="default" shape="circle" onClick={zoomOut} icon={<ZoomOutIcon />}/>
322
- {/* {activeTool === "image" && ( */}
323
- <UploadIcon />
324
- <span>Image Seat</span>
325
- <input type="file" accept="image/*" onChange={handleImageUpload}/>
326
- <span>Background Image</span>
327
- <input type="file" accept="image/*" onChange={handleImageUploadBackground}/>
328
- {/* )} */}
329
- <Button shape="circle" icon={<DownloadIcon />} onClick={exportJSON}/>
330
- </div>
331
-
332
- {/* Workspace */}
333
- <div className="tw-w-full tw-flex tw-items-center tw-justify-center" id={"workspace"}>
334
- <div className={`bg-gray-900 relative ${getCursorStyle()} w-full h-screen `} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} style={{
335
- transform: `scale(${zoom})`,
336
- transformOrigin: "0 0",
337
- }}>
338
-
339
- {shadowRect && (<div className="tw-absolute tw-border-dashed tw-border-2 tw-border-blue-400" style={{
340
- left: shadowRect.x,
341
- top: shadowRect.y,
342
- width: shadowRect.width,
343
- height: shadowRect.height,
344
- backgroundColor: shadowRect.color,
345
- }}/>)}
346
- {/* Render rectangles */}
347
- {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
348
- ? "border-black"
349
- : "border-gray-300"}`} style={{
350
- left: rect.x,
351
- top: rect.y,
352
- width: rect.width,
353
- height: rect.height,
354
- backgroundColor: rect.color,
355
- transform: `rotate(${rect.rotation}deg)`,
356
- transformOrigin: "center",
357
- borderRadius: rect.shape === "circle" ? "100%" : "0%",
358
- }}>
359
- {rect.shape === "image-table" && (<div className="tw-w-full tw-h-full tw-relative">
360
- <img src={rect.src} alt="custom" className="tw-w-full tw-h-full tw-object-cover" draggable={false}/>
361
- <div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
362
- top: "10%",
363
- height: "20%",
364
- backgroundColor: rect.highlightColor || "transparent",
365
- }}>
366
- <span className="tw-text-white tw-font-bold tw-text-xs tw-absolute" style={{
367
- top: "10%",
368
- left: "50%",
369
- }}>
370
- {rect.table}
371
- </span>
372
- </div>
373
- <span className="tw-text-xs tw-text-white tw-flex tw-items-center tw-justify-center tw-absolute tw-w-full" style={{
374
- top: "85%",
375
- left: "50%",
376
- transform: "translate(-50%, -50%)",
377
- backgroundColor: rect.highlightColor || "transparent"
378
- }}>
379
- {rect.pax}
380
- </span>
381
- <div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
382
- top: "40%",
383
- height: "20%",
384
- backgroundColor: rect.highlightColor || "transparent",
385
- }}>
386
- <span className="tw-text-white tw-font-bold tw-text-xs">
387
- {rect.status}
388
- </span>
389
- </div>
390
- </div>)}
391
- {rect.shape === "image" && (<img src={rect.src} alt="custom" className="tw-w-full tw-h-full tw-object-cover" draggable={false}/>)}
392
- {rect.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
393
- top: "10%",
394
- height: "20%",
395
- }}>
396
- <span className="tw-text-white tw-font-bold tw-text-xs">
397
- {rect.table}
398
- </span>
399
- </div>)}
400
- {rect.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
401
- top: "40%",
402
- height: "20%",
403
- backgroundColor: rect.highlightColor || "transparent",
404
- }}>
405
- <span className="tw-text-white tw-font-bold tw-text-xs">
406
- {rect.status}
407
- </span>
408
- </div>)}
409
-
410
- {/* Bottom Text */}
411
- <div className="tw-absolute tw-bottom-2 tw-left-0 tw-right-0 tw-text-center tw-text-white tw-text-sm">
412
- {rect.shape === "vip-seat" ? "8 Pax" : ""}
413
- </div>
414
-
415
- {/* Resize Nodes */}
416
- {/* Resize Nodes (Only Show When in Node Mode and Item is Selected) */}
417
- {activeTool === "node" && (selectedRectangle === null || selectedRectangle === void 0 ? void 0 : selectedRectangle.id) === rect.id && (<>
418
- {/* Top Left */}
419
- <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
420
- top: -6,
421
- left: -6,
422
- cursor: "nwse-resize",
423
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
424
- }} onMouseDown={() => startResizing("top-left")}/>
425
- {/* Top Right */}
426
- <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
427
- top: -6,
428
- right: -6,
429
- cursor: "nesw-resize",
430
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
431
- }} onMouseDown={() => startResizing("top-right")}/>
432
- {/* Bottom Left */}
433
- <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
434
- bottom: -6,
435
- left: -6,
436
- cursor: "nesw-resize",
437
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
438
- }} onMouseDown={() => startResizing("bottom-left")}/>
439
- {/* Bottom Right */}
440
- <div className="tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800" style={{
441
- bottom: -6,
442
- right: -6,
443
- cursor: "nwse-resize",
444
- borderRadius: rect.shape === "circle" ? "50%" : "0%",
445
- }} onMouseDown={() => startResizing("bottom-right")}/>
446
- </>)}
447
- </div>))}
448
- </div>
449
- </div>
450
-
451
- {/* Rectangle Customization Modal */}
452
- <Modal open={showModal} onCancel={() => setShowModal(false)} onOk={() => setShowModal(false)} title="Edit Rectangle">
453
- {selectedRectangle && (<>
454
- <div className="tw-flex tw-gap-4 tw-items-center">
455
- <div className="tw-flex tw-flex-col">
456
- <p className="tw-mb-2 tw-font-semibold">Change Color:</p>
457
- <SketchPicker color={selectedRectangle.color} onChangeComplete={(color) => updateRectangle({ color: color.hex })}/>
458
- </div>
459
- <div className="tw-flex tw-flex-col">
460
- <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Live Preview:</p>
461
- <div className="tw-relative tw-borderflex tw-items-center tw-justify-center" style={{
462
- width: selectedRectangle.width,
463
- height: selectedRectangle.height,
464
- margin: "0 auto",
465
- transform: `rotate(${selectedRectangle.rotation}deg)`,
466
- backgroundColor: selectedRectangle.color,
467
- transition: "all 0.3s ease",
468
- scale: "0.5",
469
- borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
470
- }}>
471
- {selectedRectangle.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
472
- top: "10%",
473
- height: "20%",
474
- }}>
475
- <span className="tw-text-white tw-font-bold tw-text-xs">
476
- {selectedRectangle.status}sfsdf
477
- </span>
478
- </div>)}
479
- {selectedRectangle.shape === "vip-seat" && (<div className="tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center" style={{
480
- top: "40%",
481
- height: "20%",
482
- backgroundColor: selectedRectangle.highlightColor || "transparent",
483
- }}>
484
- <span className="tw-text-white tw-font-bold tw-text-xs">
485
- {selectedRectangle.status} dsdsd
486
- </span>
487
- </div>)}
488
- </div>
489
- </div>
490
- </div>
491
-
492
- {/* Preview Section */}
493
-
494
- <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Edit Text:</p>
495
- <Input value={selectedRectangle.pax} onChange={(e) => updateRectangle({ pax: e.target.value })}/>
496
- <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Edit Label:</p>
497
- <Input value={selectedRectangle.table} onChange={(e) => updateRectangle({ table: e.target.value })}/>
498
- <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Edit Highlight:</p>
499
- <Input value={selectedRectangle.status} onChange={(e) => updateRectangle({ status: e.target.value })}/>
500
- {/* Rotation Controls */}
501
- <p className="tw-mt-4 tw-mb-2 tw-font-semibold">Rotate:</p>
502
- <div className="tw-flex tw-gap-4 tw-items-center">
503
- <Button onClick={() => rotateRectangle("left")}>
504
- ⟲ Rotate Left
505
- </Button>
506
- <span>{selectedRectangle.rotation}°</span>
507
- <Button onClick={() => rotateRectangle("right")}>
508
- ⟳ Rotate Right
509
- </Button>
510
- </div>
511
- </>)}
512
- </Modal>
513
- </div>);
301
+ return (_jsxs("div", { className: "tw-flex tw-h-screen tw-w-full", children: [_jsxs("div", { className: "tw-w-16 tw-bg-gray-800 tw-text-white tw-flex tw-flex-col tw-items-center tw-py-4 tw-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: "tw-w-full tw-flex tw-items-center tw-justify-center", id: "workspace", children: _jsxs("div", { className: `bg-gray-900 relative ${getCursorStyle()} w-full h-screen `, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: {
302
+ transform: `scale(${zoom})`,
303
+ transformOrigin: "0 0",
304
+ }, children: [shadowRect && (_jsx("div", { className: "tw-absolute tw-border-dashed tw-border-2 tw-border-blue-400", style: {
305
+ left: shadowRect.x,
306
+ top: shadowRect.y,
307
+ width: shadowRect.width,
308
+ height: shadowRect.height,
309
+ backgroundColor: shadowRect.color,
310
+ } })), 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
311
+ ? "border-black"
312
+ : "border-gray-300"}`, style: {
313
+ left: rect.x,
314
+ top: rect.y,
315
+ width: rect.width,
316
+ height: rect.height,
317
+ backgroundColor: rect.color,
318
+ transform: `rotate(${rect.rotation}deg)`,
319
+ transformOrigin: "center",
320
+ borderRadius: rect.shape === "circle" ? "100%" : "0%",
321
+ }, children: [rect.shape === "image-table" && (_jsxs("div", { className: "tw-w-full tw-h-full tw-relative", children: [_jsx("img", { src: rect.src, alt: "custom", className: "tw-w-full tw-h-full tw-object-cover", draggable: false }), _jsx("div", { className: "tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center", style: {
322
+ top: "10%",
323
+ height: "20%",
324
+ backgroundColor: rect.highlightColor || "transparent",
325
+ }, children: _jsx("span", { className: "tw-text-white tw-font-bold tw-text-xs tw-absolute", style: {
326
+ top: "10%",
327
+ left: "50%",
328
+ }, children: rect.table }) }), _jsx("span", { className: "tw-text-xs tw-text-white tw-flex tw-items-center tw-justify-center tw-absolute tw-w-full", style: {
329
+ top: "85%",
330
+ left: "50%",
331
+ transform: "translate(-50%, -50%)",
332
+ backgroundColor: rect.highlightColor || "transparent"
333
+ }, children: rect.pax }), _jsx("div", { className: "tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center", style: {
334
+ top: "40%",
335
+ height: "20%",
336
+ backgroundColor: rect.highlightColor || "transparent",
337
+ }, children: _jsx("span", { className: "tw-text-white tw-font-bold tw-text-xs", children: rect.status }) })] })), rect.shape === "image" && (_jsx("img", { src: rect.src, alt: "custom", className: "tw-w-full tw-h-full tw-object-cover", draggable: false })), rect.shape === "vip-seat" && (_jsx("div", { className: "tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center", style: {
338
+ top: "10%",
339
+ height: "20%",
340
+ }, children: _jsx("span", { className: "tw-text-white tw-font-bold tw-text-xs", children: rect.table }) })), rect.shape === "vip-seat" && (_jsx("div", { className: "tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center", style: {
341
+ top: "40%",
342
+ height: "20%",
343
+ backgroundColor: rect.highlightColor || "transparent",
344
+ }, children: _jsx("span", { className: "tw-text-white tw-font-bold tw-text-xs", children: rect.status }) })), _jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-0 tw-right-0 tw-text-center tw-text-white tw-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: "tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800", style: {
345
+ top: -6,
346
+ left: -6,
347
+ cursor: "nwse-resize",
348
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
349
+ }, onMouseDown: () => startResizing("top-left") }), _jsx("div", { className: "tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800", style: {
350
+ top: -6,
351
+ right: -6,
352
+ cursor: "nesw-resize",
353
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
354
+ }, onMouseDown: () => startResizing("top-right") }), _jsx("div", { className: "tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800", style: {
355
+ bottom: -6,
356
+ left: -6,
357
+ cursor: "nesw-resize",
358
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
359
+ }, onMouseDown: () => startResizing("bottom-left") }), _jsx("div", { className: "tw-absolute tw-w-3 tw-h-3 tw-bg-white tw-border tw-border-gray-800", style: {
360
+ bottom: -6,
361
+ right: -6,
362
+ cursor: "nwse-resize",
363
+ borderRadius: rect.shape === "circle" ? "50%" : "0%",
364
+ }, 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: "tw-flex tw-gap-4 tw-items-center", children: [_jsxs("div", { className: "tw-flex tw-flex-col", children: [_jsx("p", { className: "tw-mb-2 tw-font-semibold", children: "Change Color:" }), _jsx(SketchPicker, { color: selectedRectangle.color, onChangeComplete: (color) => updateRectangle({ color: color.hex }) })] }), _jsxs("div", { className: "tw-flex tw-flex-col", children: [_jsx("p", { className: "tw-mt-4 tw-mb-2 tw-font-semibold", children: "Live Preview:" }), _jsxs("div", { className: "tw-relative tw-borderflex tw-items-center tw-justify-center", style: {
365
+ width: selectedRectangle.width,
366
+ height: selectedRectangle.height,
367
+ margin: "0 auto",
368
+ transform: `rotate(${selectedRectangle.rotation}deg)`,
369
+ backgroundColor: selectedRectangle.color,
370
+ transition: "all 0.3s ease",
371
+ scale: "0.5",
372
+ borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
373
+ }, children: [selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center", style: {
374
+ top: "10%",
375
+ height: "20%",
376
+ }, children: _jsxs("span", { className: "tw-text-white tw-font-bold tw-text-xs", children: [selectedRectangle.status, "sfsdf"] }) })), selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "tw-absolute tw-left-0 tw-right-0 tw-flex tw-items-center tw-justify-center", style: {
377
+ top: "40%",
378
+ height: "20%",
379
+ backgroundColor: selectedRectangle.highlightColor || "transparent",
380
+ }, children: _jsxs("span", { className: "tw-text-white tw-font-bold tw-text-xs", children: [selectedRectangle.status, " dsdsd"] }) }))] })] })] }), _jsx("p", { className: "tw-mt-4 tw-mb-2 tw-font-semibold", children: "Edit Text:" }), _jsx(Input, { value: selectedRectangle.pax, onChange: (e) => updateRectangle({ pax: e.target.value }) }), _jsx("p", { className: "tw-mt-4 tw-mb-2 tw-font-semibold", children: "Edit Label:" }), _jsx(Input, { value: selectedRectangle.table, onChange: (e) => updateRectangle({ table: e.target.value }) }), _jsx("p", { className: "tw-mt-4 tw-mb-2 tw-font-semibold", children: "Edit Highlight:" }), _jsx(Input, { value: selectedRectangle.status, onChange: (e) => updateRectangle({ status: e.target.value }) }), _jsx("p", { className: "tw-mt-4 tw-mb-2 tw-font-semibold", children: "Rotate:" }), _jsxs("div", { className: "tw-flex tw-gap-4 tw-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" })] })] })) })] }));
514
381
  };
515
382
  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, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import LayerView from "@/features/view";
3
4
  import { useState, useEffect } from "react";
4
5
  const TouchScrollDetect = () => {
@@ -34,22 +35,6 @@ const TouchScrollDetect = () => {
34
35
  }
35
36
  };
36
37
  }, []);
37
- return (<div id="scroll-container" className="tw-bg-gray-100 tw-p-6 tw-text-gray-800">
38
- <div className="tw-h-[400px] tw-bg-white tw-mt-4 tw-rounded tw-p-4 tw-shadow">
39
- <p>Scroll this page with 1 or 2 fingers.</p>
40
- </div>
41
- <LayerView statusKey="status" defaultBackground="#000000"/>
42
- <div className="tw-sticky tw-top-0 tw-bg-white tw-z-10 tw-py-2">
43
- {scrollType === "one" && (<p className="tw-text-blue-600 tw-font-medium">👆 One-finger scroll</p>)}
44
- {scrollType === "two" && (<p className="tw-text-green-600 tw-font-medium">✌️ Two-finger scroll</p>)}
45
- {scrollType === "other" && (<p className="tw-text-red-600 tw-font-medium">
46
- 🖐️ {fingerCount} fingers on screen
47
- </p>)}
48
- </div>
49
-
50
- <div className="tw-h-[200px] tw-bg-white tw-mt-4 tw-rounded tw-p-4 tw-shadow">
51
- <p>Scroll this page with 1 or 2 fingers.</p>
52
- </div>
53
- </div>);
38
+ return (_jsxs("div", { id: "scroll-container", className: "tw-bg-gray-100 tw-p-6 tw-text-gray-800", children: [_jsx("div", { className: "tw-h-[400px] tw-bg-white tw-mt-4 tw-rounded tw-p-4 tw-shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) }), _jsx(LayerView, { statusKey: "status", defaultBackground: "#000000" }), _jsxs("div", { className: "tw-sticky tw-top-0 tw-bg-white tw-z-10 tw-py-2", children: [scrollType === "one" && (_jsx("p", { className: "tw-text-blue-600 tw-font-medium", children: "\uD83D\uDC46 One-finger scroll" })), scrollType === "two" && (_jsx("p", { className: "tw-text-green-600 tw-font-medium", children: "\u270C\uFE0F Two-finger scroll" })), scrollType === "other" && (_jsxs("p", { className: "tw-text-red-600 tw-font-medium", children: ["\uD83D\uDD90\uFE0F ", fingerCount, " fingers on screen"] }))] }), _jsx("div", { className: "tw-h-[200px] tw-bg-white tw-mt-4 tw-rounded tw-p-4 tw-shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) })] }));
54
39
  };
55
40
  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";
3
+ import SideTool from "../features/side-tool";
4
+ import ControlPanels from "../features/panel";
5
+ const TableEditor = () => {
6
+ return (_jsx(_Fragment, { children: _jsxs("div", { className: "tw-w-full tw-h-screen tw-flex tw-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: "tw-py-2", children: [_jsx("h1", { className: "tw-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: "tw-btn tw-btn-primary", children: "Add" }), _jsx(Button, { type: "primary", onClick: () => remove(fields.length - 1), className: "tw-btn tw-btn-primary", children: "Remove" })] })] })) }) }), _jsx("div", { className: "tw-divider-dashed" })] }));
6
+ };
7
+ export default SectionLabel;
package/dist/components/form-tools/shape.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const SectionShape: () => import("react").JSX.Element;
1
+ declare const SectionShape: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default SectionShape;
package/dist/components/form-tools/shape.js ADDED
@@ -0,0 +1,7 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { ColorPicker, Flex, Form, InputNumber } from "antd";
4
+ const SectionShape = () => {
5
+ return (_jsxs("div", { className: "tw-py-2", children: [_jsx("h1", { className: "tw-heading-s", children: "Shape" }), _jsxs(Flex, { gap: 2, className: "tw-w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "tw-w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "tw-w-full", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "tw-w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "tw-w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "tw-w-full", children: _jsx(InputNumber, {}) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "tw-w-full tw-", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "tw-w-full tw-", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "tw-w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "tw-w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0 }) })] })] }));
6
+ };
7
+ 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="tw-flex tw-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: "tw-flex tw-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/layer/index.d.ts CHANGED
@@ -12,5 +12,5 @@ interface LayersProps {
12
12
  style?: any;
13
13
  mode?: "view" | "edit";
14
14
  }
15
- declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: LayersProps) => import("react").JSX.Element;
15
+ declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: LayersProps) => import("react/jsx-runtime").JSX.Element;
16
16
  export default Layers;