seat-editor 3.0.2 → 3.0.3

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 (99) hide show
  1. package/dist/app/constant.d.ts +1 -1
  2. package/dist/app/layout.d.ts +1 -1
  3. package/dist/app/{layout.jsx → layout.js} +2 -7
  4. package/dist/app/new-board/page.d.ts +1 -1
  5. package/dist/app/new-board/page.js +33 -0
  6. package/dist/app/old-board/page.d.ts +1 -2
  7. package/dist/app/old-board/{page.jsx → page.js} +82 -215
  8. package/dist/app/only-view/chair.d.ts +1 -1
  9. package/dist/app/only-view/chair.js +2 -10
  10. package/dist/app/only-view/page.d.ts +1 -1
  11. package/dist/app/only-view/page.js +78 -0
  12. package/dist/app/only-view/user.d.ts +1 -1
  13. package/dist/app/only-view/user.js +2 -10
  14. package/dist/app/page.d.ts +1 -1
  15. package/dist/app/page.js +8 -0
  16. package/dist/app/test/page.d.ts +1 -2
  17. package/dist/app/test/{page.jsx → page.js} +3 -5
  18. package/dist/app/v2/page.d.ts +1 -1
  19. package/dist/app/v2/page.js +8 -0
  20. package/dist/components/button-tools/index.d.ts +1 -1
  21. package/dist/components/button-tools/index.js +11 -0
  22. package/dist/components/form-tools/label.d.ts +1 -1
  23. package/dist/components/form-tools/label.js +7 -0
  24. package/dist/components/form-tools/shape.d.ts +1 -1
  25. package/dist/components/form-tools/shape.js +25 -0
  26. package/dist/components/input/number-indicator.d.ts +1 -1
  27. package/dist/components/input/{number-indicator.jsx → number-indicator.js} +2 -11
  28. package/dist/components/joystick/index.d.ts +1 -2
  29. package/dist/components/joystick/{index.jsx → index.js} +13 -14
  30. package/dist/components/layer/index.d.ts +1 -1
  31. package/dist/components/layer/index.js +295 -0
  32. package/dist/components/layer-v2/index.d.ts +1 -1
  33. package/dist/components/layer-v2/index.js +282 -0
  34. package/dist/components/layer-v3/index.d.ts +1 -1
  35. package/dist/components/layer-v3/{index.jsx → index.js} +102 -242
  36. package/dist/components/layer-v4/index.d.ts +3 -3
  37. package/dist/components/layer-v4/{index.jsx → index.js} +81 -158
  38. package/dist/components/lib/index.d.ts +1 -1
  39. package/dist/components/lib/{index.jsx → index.js} +2 -7
  40. package/dist/components/modal-preview/index.d.ts +1 -1
  41. package/dist/components/modal-preview/index.js +10 -0
  42. package/dist/features/board/index.d.ts +1 -1
  43. package/dist/features/board/{index.jsx → index.js} +31 -90
  44. package/dist/features/board-v2/index.d.ts +1 -2
  45. package/dist/features/board-v2/{index.jsx → index.js} +39 -101
  46. package/dist/features/board-v3/index copy.d.ts +1 -2
  47. package/dist/features/board-v3/{index copy.jsx → index copy.js } +50 -128
  48. package/dist/features/board-v3/index.d.ts +1 -2
  49. package/dist/features/board-v3/{index.jsx → index.js} +32 -110
  50. package/dist/features/navbar/index.d.ts +1 -1
  51. package/dist/features/navbar/index.js +6 -0
  52. package/dist/features/package/index.d.ts +1 -1
  53. package/dist/features/package/{index.jsx → index.js} +6 -16
  54. package/dist/features/panel/index.d.ts +1 -1
  55. package/dist/features/panel/{index.jsx → index.js} +7 -25
  56. package/dist/features/panel/select-tool.d.ts +1 -1
  57. package/dist/features/panel/{select-tool.jsx → select-tool.js} +10 -23
  58. package/dist/features/panel/selected-group.d.ts +1 -1
  59. package/dist/features/panel/selected-group.js +7 -0
  60. package/dist/features/panel/square-circle-tool.d.ts +1 -1
  61. package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js} +2 -4
  62. package/dist/features/panel/table-seat-circle.d.ts +1 -1
  63. package/dist/features/panel/table-seat-circle.js +9 -0
  64. package/dist/features/panel/table-seat-square.d.ts +1 -1
  65. package/dist/features/panel/table-seat-square.js +9 -0
  66. package/dist/features/panel/text-tool.d.ts +1 -1
  67. package/dist/features/panel/text-tool.js +7 -0
  68. package/dist/features/panel/upload-tool.d.ts +1 -1
  69. package/dist/features/panel/{upload-tool.jsx → upload-tool.js} +2 -24
  70. package/dist/features/side-tool/index.d.ts +1 -1
  71. package/dist/features/side-tool/{index.jsx → index.js} +98 -120
  72. package/dist/features/view-only/index.d.ts +1 -1
  73. package/dist/features/view-only/{index.jsx → index.js} +31 -38
  74. package/dist/features/view-only-2/index.d.ts +1 -1
  75. package/dist/features/view-only-2/{index.jsx → index.js} +13 -16
  76. package/dist/features/view-only-3/index.d.ts +3 -3
  77. package/dist/features/view-only-3/{index.jsx → index.js} +27 -46
  78. package/dist/provider/antd-provider.js +43 -0
  79. package/dist/provider/redux-provider.d.ts +1 -1
  80. package/dist/provider/{redux-provider.jsx → redux-provider.js} +2 -1
  81. package/dist/provider/store-provider.d.ts +1 -1
  82. package/dist/provider/{store-provider.jsx → store-provider.js} +2 -3
  83. package/package.json +1 -1
  84. package/dist/app/new-board/page.jsx +0 -55
  85. package/dist/app/only-view/page.jsx +0 -101
  86. package/dist/app/page.jsx +0 -13
  87. package/dist/app/v2/page.jsx +0 -13
  88. package/dist/components/button-tools/index.jsx +0 -17
  89. package/dist/components/form-tools/label.jsx +0 -44
  90. package/dist/components/form-tools/shape.jsx +0 -66
  91. package/dist/components/layer/index.jsx +0 -383
  92. package/dist/components/layer-v2/index.jsx +0 -370
  93. package/dist/components/modal-preview/index.jsx +0 -11
  94. package/dist/features/navbar/index.jsx +0 -5
  95. package/dist/features/panel/selected-group.jsx +0 -47
  96. package/dist/features/panel/table-seat-circle.jsx +0 -31
  97. package/dist/features/panel/table-seat-square.jsx +0 -46
  98. package/dist/features/panel/text-tool.jsx +0 -26
  99. package/dist/provider/antd-provider.jsx +0 -46
package/dist/app/constant.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Position, Shape, TagType } from "@/dto/table";
1
+ import { Position, Shape, TagType } from "../dto/table";
2
2
  export declare const constantData: {
3
3
  properties: {
4
4
  id: number;
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,33 @@
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 { extraComponent } from "../constant";
6
+ import { data4 } from "../constant";
7
+ export default function NewBoard() {
8
+ const [initialValue, setInitialValue] = useState([]);
9
+ const [extraComponents, setExtraComponents] = useState([]);
10
+ const [backgroundColor, setBackgroundColor] = useState("#000000");
11
+ const [viewOnly, setViewOnly] = useState(true);
12
+ useEffect(() => {
13
+ setInitialValue(data4);
14
+ setExtraComponents(extraComponent);
15
+ }, []);
16
+ 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: {
17
+ component: true,
18
+ extraComponent: true,
19
+ }, mappingKey: "properties", onCurrentStateChange: (setState) => {
20
+ var _a, _b, _c, _d;
21
+ if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
22
+ setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
23
+ }
24
+ if (setState === null || setState === void 0 ? void 0 : setState.backgroundColor) {
25
+ setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
26
+ }
27
+ if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
28
+ setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
29
+ }
30
+ }, extraComponentProps: extraComponents, defaultBackground: backgroundColor,
31
+ // dragOnly={true}
32
+ statusKey: "status" }) })] }) }));
33
+ }
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/chair.d.ts CHANGED
@@ -1 +1 @@
1
- export function ChairIcon(): import("react").JSX.Element;
1
+ export function ChairIcon(): import("react/jsx-runtime").JSX.Element;
package/dist/app/only-view/chair.js CHANGED
@@ -1,12 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  export const ChairIcon = () => {
2
- return (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
3
- <g clip-path="url(#clip0_3019_14165)">
4
- <path d="M15.9717 7.5339V4.70339C15.9717 3.07627 14.7076 2.5 13.5189 2.5H6.46226C5.27359 2.5 4.00943 3.07627 4.00943 4.70339V7.5339C3.14151 7.73729 2.5 8.4322 2.5 9.27966V13.822C2.5 15.161 3.5 15.6864 4.48113 15.7373V16.8898C4.48113 17.2288 4.78302 17.5 5.16038 17.5H5.85849C6.23585 17.5 6.53774 17.2288 6.53774 16.8898V15.7373H13.4623V16.8898C13.4623 17.2288 13.7642 17.5 14.1415 17.5H14.8396C15.217 17.5 15.5189 17.2288 15.5189 16.8898V15.7373C16.9717 15.6695 17.5 14.7203 17.5 13.822V9.26271C17.4623 8.4322 16.8208 7.72034 15.9717 7.5339ZM4.68868 4.70339C4.68868 3.31356 5.80189 3.09322 6.46226 3.09322H13.5189C14.1792 3.09322 15.2925 3.29661 15.2925 4.68644V7.4661C14.2736 7.55085 13.4623 8.31356 13.4623 9.26271V9.68644H6.51887V9.26271C6.51887 8.31356 5.70755 7.55085 4.68868 7.4661V4.70339ZM13.4434 10.2966V12.3983H6.51887V10.2966H13.4434ZM5.85849 16.8898H5.16038V15.7373H5.85849V16.8898ZM14.8208 16.8898H14.1226V15.7373H14.8208V16.8898ZM16.8208 13.822H16.8019C16.8019 14.4153 16.5566 15.1441 15.3302 15.1441H14.8208H14.1226H5.85849H5.16038H4.65094C3.99057 15.1441 3.17925 14.9237 3.17925 13.822V9.26271C3.17925 8.6017 3.78302 8.05932 4.51887 8.05932C5.25472 8.05932 5.85849 8.6017 5.85849 9.26271V12.7034C5.85849 12.8729 6.00943 13.0085 6.19811 13.0085H13.8019C13.9906 13.0085 14.1415 12.8729 14.1415 12.7034V9.26271C14.1415 8.6017 14.7453 8.05932 15.4811 8.05932C16.217 8.05932 16.8208 8.6017 16.8208 9.26271V13.822Z" fill="#347ADB" stroke="#347ADB" stroke-width="0.8"/>
5
- </g>
6
- <defs>
7
- <clipPath id="clip0_3019_14165">
8
- <rect width="16.6667" height="16.6667" fill="white" transform="translate(1.66675 1.6665)"/>
9
- </clipPath>
10
- </defs>
11
- </svg>);
3
+ return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { "clip-path": "url(#clip0_3019_14165)", children: _jsx("path", { d: "M15.9717 7.5339V4.70339C15.9717 3.07627 14.7076 2.5 13.5189 2.5H6.46226C5.27359 2.5 4.00943 3.07627 4.00943 4.70339V7.5339C3.14151 7.73729 2.5 8.4322 2.5 9.27966V13.822C2.5 15.161 3.5 15.6864 4.48113 15.7373V16.8898C4.48113 17.2288 4.78302 17.5 5.16038 17.5H5.85849C6.23585 17.5 6.53774 17.2288 6.53774 16.8898V15.7373H13.4623V16.8898C13.4623 17.2288 13.7642 17.5 14.1415 17.5H14.8396C15.217 17.5 15.5189 17.2288 15.5189 16.8898V15.7373C16.9717 15.6695 17.5 14.7203 17.5 13.822V9.26271C17.4623 8.4322 16.8208 7.72034 15.9717 7.5339ZM4.68868 4.70339C4.68868 3.31356 5.80189 3.09322 6.46226 3.09322H13.5189C14.1792 3.09322 15.2925 3.29661 15.2925 4.68644V7.4661C14.2736 7.55085 13.4623 8.31356 13.4623 9.26271V9.68644H6.51887V9.26271C6.51887 8.31356 5.70755 7.55085 4.68868 7.4661V4.70339ZM13.4434 10.2966V12.3983H6.51887V10.2966H13.4434ZM5.85849 16.8898H5.16038V15.7373H5.85849V16.8898ZM14.8208 16.8898H14.1226V15.7373H14.8208V16.8898ZM16.8208 13.822H16.8019C16.8019 14.4153 16.5566 15.1441 15.3302 15.1441H14.8208H14.1226H5.85849H5.16038H4.65094C3.99057 15.1441 3.17925 14.9237 3.17925 13.822V9.26271C3.17925 8.6017 3.78302 8.05932 4.51887 8.05932C5.25472 8.05932 5.85849 8.6017 5.85849 9.26271V12.7034C5.85849 12.8729 6.00943 13.0085 6.19811 13.0085H13.8019C13.9906 13.0085 14.1415 12.8729 14.1415 12.7034V9.26271C14.1415 8.6017 14.7453 8.05932 15.4811 8.05932C16.217 8.05932 16.8208 8.6017 16.8208 9.26271V13.822Z", fill: "#347ADB", stroke: "#347ADB", "stroke-width": "0.8" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3019_14165", children: _jsx("rect", { width: "16.6667", height: "16.6667", fill: "white", transform: "translate(1.66675 1.6665)" }) }) })] }));
12
4
  };
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.js ADDED
@@ -0,0 +1,78 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import LayerView from "@/features/view-only-3";
4
+ import { useState, useRef } from "react";
5
+ import { data4 } from "../constant";
6
+ import { ChairIcon } from "./chair";
7
+ import { UserIcon } from "./user";
8
+ import { Modal } from "antd";
9
+ import JsonView from '@uiw/react-json-view';
10
+ const Card = (item) => {
11
+ const handleDragStart = (e) => {
12
+ // Jangan preventDefault di drag start
13
+ e.dataTransfer.setData("application/json", JSON.stringify(item));
14
+ e.dataTransfer.effectAllowed = "move";
15
+ };
16
+ return (_jsxs("div", { className: "h-40 bg-gray-400 shadow-lg rounded-lg p-4 m-4", "data-table": JSON.stringify(item), draggable: true, onContextMenu: (e) => e.preventDefault(), onDragStart: handleDragStart, onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Card Title" }), _jsx("p", { className: "text-gray-600", children: item === null || item === void 0 ? void 0 : item.name })] }));
17
+ };
18
+ const TouchScrollDetect = () => {
19
+ const refLayer = useRef(null);
20
+ const [open, setOpen] = useState(false);
21
+ const [table, setTable] = useState(null);
22
+ const handleZoomIn = () => {
23
+ var _a, _b;
24
+ (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomIn(0.1);
25
+ };
26
+ const handleZoomOut = () => {
27
+ var _a, _b;
28
+ (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomOut();
29
+ };
30
+ const handleSwitch = (e, data) => {
31
+ setOpen(!open);
32
+ setTable(data);
33
+ };
34
+ const handleDrop = (e, data) => {
35
+ e.preventDefault();
36
+ setOpen(!open);
37
+ setTable(data);
38
+ };
39
+ const handleSelectTable = (item) => {
40
+ setOpen(!open);
41
+ setTable(item);
42
+ };
43
+ const renderModal = () => {
44
+ return (_jsx(Modal, { open: open, onCancel: () => setOpen(false), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px] overflow-auto", children: _jsx(JsonView, { value: table }) }) }));
45
+ };
46
+ return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4", children: data4.map((item, index) => (_jsx(Card, Object.assign({}, item), index))) }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1 flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "status", defaultBackground: "#000000", mappingKey: "properties", componentProps: data4, onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
47
+ handleSelectTable(component);
48
+ }, dragTableBlockKey: [
49
+ {
50
+ key: "is_lock",
51
+ value: 1,
52
+ },
53
+ ], tableMatchKey: [
54
+ {
55
+ key: 0,
56
+ properties: { fill: "white" },
57
+ },
58
+ ], eventMatchTable: [
59
+ {
60
+ event: "mouseenter",
61
+ properties: { fill: "red" },
62
+ },
63
+ {
64
+ event: "selected",
65
+ properties: { fill: "white" },
66
+ },
67
+ ], iconTags: [
68
+ {
69
+ icon: _jsx(ChairIcon, {}),
70
+ key: "chair",
71
+ },
72
+ {
73
+ icon: _jsx(UserIcon, {}),
74
+ key: "user",
75
+ },
76
+ ] })] })] })] }));
77
+ };
78
+ export default TouchScrollDetect;
package/dist/app/only-view/user.d.ts CHANGED
@@ -1 +1 @@
1
- export function UserIcon(): import("react").JSX.Element;
1
+ export function UserIcon(): import("react/jsx-runtime").JSX.Element;
package/dist/app/only-view/user.js CHANGED
@@ -1,12 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  export const UserIcon = () => {
2
- return (<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
3
- <path d="M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z" fill="#5E6278"/>
4
- <path d="M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z" fill="#5E6278"/>
5
- <path opacity="0.3" d="M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z" fill="#5E6278"/>
6
- <path opacity="0.3" d="M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z" fill="#5E6278"/>
7
- <g opacity="0.3">
8
- <path d="M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z" fill="#5E6278"/>
9
- <path d="M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z" fill="#5E6278"/>
10
- </g>
11
- </svg>);
3
+ return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z", fill: "#5E6278" }), _jsx("path", { d: "M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z", fill: "#5E6278" }), _jsx("path", { opacity: "0.3", d: "M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z", fill: "#5E6278" }), _jsxs("g", { opacity: "0.3", children: [_jsx("path", { d: "M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z", fill: "#5E6278" }), _jsx("path", { d: "M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z", fill: "#5E6278" })] })] }));
12
4
  };
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;