seat-editor 1.3.9 → 1.3.10

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 (74) 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 -220
  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 +4 -1
  20. package/dist/components/layer/index.js +184 -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/board-slice.d.ts +2 -1
  26. package/dist/features/board/board-slice.js +5 -1
  27. package/dist/features/board/index.d.ts +1 -1
  28. package/dist/features/board/{index.jsx → index.js} +69 -147
  29. package/dist/features/navbar/index.d.ts +1 -1
  30. package/dist/features/navbar/index.js +6 -0
  31. package/dist/features/package/index.d.ts +2 -1
  32. package/dist/features/package/{index.jsx → index.js} +3 -8
  33. package/dist/features/panel/index.d.ts +1 -1
  34. package/dist/features/panel/{index.jsx → index.js} +7 -15
  35. package/dist/features/panel/select-tool.d.ts +1 -1
  36. package/dist/features/panel/{select-tool.jsx → select-tool.js} +7 -16
  37. package/dist/features/panel/square-circle-tool.d.ts +1 -1
  38. package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js} +2 -4
  39. package/dist/features/panel/table-seat-circle.d.ts +1 -1
  40. package/dist/features/panel/table-seat-circle.js +9 -0
  41. package/dist/features/panel/text-tool.d.ts +1 -1
  42. package/dist/features/panel/text-tool.js +7 -0
  43. package/dist/features/panel/upload-tool.d.ts +1 -1
  44. package/dist/features/panel/{upload-tool.jsx → upload-tool.js} +2 -16
  45. package/dist/features/side-tool/index.d.ts +3 -1
  46. package/dist/features/side-tool/index.js +201 -0
  47. package/dist/features/theme/theme-slice.d.ts +12 -0
  48. package/dist/features/theme/theme-slice.js +15 -0
  49. package/dist/features/view/index.d.ts +1 -1
  50. package/dist/features/view/{index.jsx → index.js} +50 -45
  51. package/dist/libs/rootReducer.d.ts +2 -0
  52. package/dist/libs/rootReducer.js +2 -0
  53. package/dist/libs/store.d.ts +2 -0
  54. package/dist/provider/antd-provider.d.ts +1 -0
  55. package/dist/provider/antd-provider.js +43 -0
  56. package/dist/provider/redux-provider.d.ts +1 -1
  57. package/dist/provider/{redux-provider.jsx → redux-provider.js} +2 -1
  58. package/dist/provider/store-provider.d.ts +3 -2
  59. package/dist/provider/store-provider.js +9 -0
  60. package/dist/seat-editor.css +1 -1
  61. package/package.json +1 -1
  62. package/dist/app/new-board/page.jsx +0 -12
  63. package/dist/app/page.jsx +0 -13
  64. package/dist/components/button-tools/index.jsx +0 -17
  65. package/dist/components/form-tools/label.jsx +0 -44
  66. package/dist/components/form-tools/shape.jsx +0 -43
  67. package/dist/components/layer/index.jsx +0 -254
  68. package/dist/components/modal-preview/index.jsx +0 -11
  69. package/dist/features/navbar/index.jsx +0 -5
  70. package/dist/features/panel/table-seat-circle.jsx +0 -31
  71. package/dist/features/panel/text-tool.jsx +0 -22
  72. package/dist/features/side-tool/index.jsx +0 -211
  73. package/dist/provider/antd-provider.jsx +0 -30
  74. package/dist/provider/store-provider.jsx +0 -10
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: "w-full h-screen flex 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";
@@ -14,7 +15,6 @@ const SeatEditor = () => {
14
15
  const [shadowRect, setShadowRect] = useState(null);
15
16
  const [showModal, setShowModal] = useState(false);
16
17
  const [dragOffset, setDragOffset] = useState(null);
17
- console.log({ rectangles });
18
18
  const [zoom, setZoom] = useState(1);
19
19
  const [resizeDirection, setResizeDirection] = useState(null);
20
20
  const [images, setImages] = useState([]);
@@ -29,15 +29,12 @@ const SeatEditor = () => {
29
29
  const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
30
30
  if (!file)
31
31
  return;
32
- console.log({ file });
33
32
  const reader = new FileReader();
34
33
  reader.onload = () => {
35
34
  const img = document.createElement("img");
36
35
  img.src = reader.result;
37
- console.log({ img });
38
36
  let width = img.width > widthWorkspace ? img.width / 2 : img.width;
39
37
  let height = img.height > heightWorkspace ? img.height / 2 : img.height;
40
- console.log({ width, height }, img.width, img.height);
41
38
  img.onload = () => {
42
39
  setRectangles((prev) => [
43
40
  ...prev,
@@ -287,7 +284,6 @@ const SeatEditor = () => {
287
284
  }
288
285
  };
289
286
  const exportJSON = () => {
290
- console.log({ rectangles, images });
291
287
  // const json = JSON.stringify(rectangles, null, 2);
292
288
  // const blob = new Blob([json], { type: "application/json" });
293
289
  // const link = document.createElement("a");
@@ -297,219 +293,85 @@ const SeatEditor = () => {
297
293
  // link.click();
298
294
  // document.body.removeChild(link);
299
295
  };
300
- return (<div className="flex h-screen w-full">
301
- {/* Toolbar */}
302
- <div className="w-16 bg-gray-800 text-white flex flex-col items-center py-4 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="w-full flex items-center 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="absolute border-dashed border-2 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="w-full h-full relative">
360
- <img src={rect.src} alt="custom" className="w-full h-full object-cover" draggable={false}/>
361
- <div className="absolute left-0 right-0 flex items-center justify-center" style={{
362
- top: "10%",
363
- height: "20%",
364
- backgroundColor: rect.highlightColor || "transparent",
365
- }}>
366
- <span className="text-white font-bold text-xs absolute" style={{
367
- top: "10%",
368
- left: "50%",
369
- }}>
370
- {rect.table}
371
- </span>
372
- </div>
373
- <span className="text-xs text-white flex items-center justify-center absolute 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="absolute left-0 right-0 flex items-center justify-center" style={{
382
- top: "40%",
383
- height: "20%",
384
- backgroundColor: rect.highlightColor || "transparent",
385
- }}>
386
- <span className="text-white font-bold text-xs">
387
- {rect.status}
388
- </span>
389
- </div>
390
- </div>)}
391
- {rect.shape === "image" && (<img src={rect.src} alt="custom" className="w-full h-full object-cover" draggable={false}/>)}
392
- {rect.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
393
- top: "10%",
394
- height: "20%",
395
- }}>
396
- <span className="text-white font-bold text-xs">
397
- {rect.table}
398
- </span>
399
- </div>)}
400
- {rect.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
401
- top: "40%",
402
- height: "20%",
403
- backgroundColor: rect.highlightColor || "transparent",
404
- }}>
405
- <span className="text-white font-bold text-xs">
406
- {rect.status}
407
- </span>
408
- </div>)}
409
-
410
- {/* Bottom Text */}
411
- <div className="absolute bottom-2 left-0 right-0 text-center text-white 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="absolute w-3 h-3 bg-white border 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="absolute w-3 h-3 bg-white border 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="absolute w-3 h-3 bg-white border 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="absolute w-3 h-3 bg-white border 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="flex gap-4 items-center">
455
- <div className="flex flex-col">
456
- <p className="mb-2 font-semibold">Change Color:</p>
457
- <SketchPicker color={selectedRectangle.color} onChangeComplete={(color) => updateRectangle({ color: color.hex })}/>
458
- </div>
459
- <div className="flex flex-col">
460
- <p className="mt-4 mb-2 font-semibold">Live Preview:</p>
461
- <div className="relative borderflex items-center 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="absolute left-0 right-0 flex items-center justify-center" style={{
472
- top: "10%",
473
- height: "20%",
474
- }}>
475
- <span className="text-white font-bold text-xs">
476
- {selectedRectangle.status}sfsdf
477
- </span>
478
- </div>)}
479
- {selectedRectangle.shape === "vip-seat" && (<div className="absolute left-0 right-0 flex items-center justify-center" style={{
480
- top: "40%",
481
- height: "20%",
482
- backgroundColor: selectedRectangle.highlightColor || "transparent",
483
- }}>
484
- <span className="text-white font-bold text-xs">
485
- {selectedRectangle.status} dsdsd
486
- </span>
487
- </div>)}
488
- </div>
489
- </div>
490
- </div>
491
-
492
- {/* Preview Section */}
493
-
494
- <p className="mt-4 mb-2 font-semibold">Edit Text:</p>
495
- <Input value={selectedRectangle.pax} onChange={(e) => updateRectangle({ pax: e.target.value })}/>
496
- <p className="mt-4 mb-2 font-semibold">Edit Label:</p>
497
- <Input value={selectedRectangle.table} onChange={(e) => updateRectangle({ table: e.target.value })}/>
498
- <p className="mt-4 mb-2 font-semibold">Edit Highlight:</p>
499
- <Input value={selectedRectangle.status} onChange={(e) => updateRectangle({ status: e.target.value })}/>
500
- {/* Rotation Controls */}
501
- <p className="mt-4 mb-2 font-semibold">Rotate:</p>
502
- <div className="flex gap-4 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>);
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" })] })] })) })] }));
514
376
  };
515
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, 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="bg-gray-100 p-6 text-gray-800">
38
- <div className="h-[400px] bg-white mt-4 rounded p-4 shadow">
39
- <p>Scroll this page with 1 or 2 fingers.</p>
40
- </div>
41
- <LayerView statusKey="status" defaultBackground="#000000"/>
42
- <div className="sticky top-0 bg-white z-10 py-2">
43
- {scrollType === "one" && (<p className="text-blue-600 font-medium">👆 One-finger scroll</p>)}
44
- {scrollType === "two" && (<p className="text-green-600 font-medium">✌️ Two-finger scroll</p>)}
45
- {scrollType === "other" && (<p className="text-red-600 font-medium">
46
- 🖐️ {fingerCount} fingers on screen
47
- </p>)}
48
- </div>
49
-
50
- <div className="h-[200px] bg-white mt-4 rounded p-4 shadow">
51
- <p>Scroll this page with 1 or 2 fingers.</p>
52
- </div>
53
- </div>);
38
+ return (_jsxs("div", { id: "scroll-container", className: "bg-gray-100 p-6 text-gray-800", children: [_jsx("div", { className: "h-[400px] bg-white mt-4 rounded p-4 shadow", children: _jsx("p", { children: "Scroll this page with 1 or 2 fingers." }) }), _jsx(LayerView, { statusKey: "status", defaultBackground: "#000000" }), _jsxs("div", { className: "sticky top-0 bg-white z-10 py-2", children: [scrollType === "one" && (_jsx("p", { className: "text-blue-600 font-medium", children: "\uD83D\uDC46 One-finger scroll" })), scrollType === "two" && (_jsx("p", { className: "text-green-600 font-medium", children: "\u270C\uFE0F Two-finger scroll" })), scrollType === "other" && (_jsxs("p", { className: "text-red-600 font-medium", children: ["\uD83D\uDD90\uFE0F ", fingerCount, " fingers on screen"] }))] }), _jsx("div", { className: "h-[200px] bg-white mt-4 rounded p-4 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: "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,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: "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 }) })] })] }));
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="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/layer/index.d.ts CHANGED
@@ -11,6 +11,9 @@ interface LayersProps {
11
11
  selectedTableColor?: string;
12
12
  style?: any;
13
13
  mode?: "view" | "edit";
14
+ onTouchStart?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>, items: any) => void;
15
+ onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
16
+ onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
14
17
  }
15
- declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: LayersProps) => import("react").JSX.Element;
18
+ declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
16
19
  export default Layers;