seat-editor 1.3.4 → 1.3.6
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.
- package/add-tailwind-prefix.js +2 -2
- package/dist/app/layout.d.ts +1 -1
- package/dist/app/{layout.js → layout.jsx} +7 -2
- package/dist/app/new-board/page.d.ts +1 -1
- package/dist/app/new-board/page.jsx +12 -0
- package/dist/app/old-board/page.d.ts +2 -1
- package/dist/app/old-board/{page.js → page.jsx} +215 -82
- package/dist/app/only-view/page.d.ts +1 -1
- package/dist/app/only-view/{page.js → page.jsx} +17 -2
- package/dist/app/page.d.ts +1 -1
- package/dist/app/page.jsx +13 -0
- package/dist/components/button-tools/index.d.ts +1 -1
- package/dist/components/button-tools/index.jsx +17 -0
- package/dist/components/form-tools/label.d.ts +1 -1
- package/dist/components/form-tools/label.jsx +44 -0
- package/dist/components/form-tools/shape.d.ts +1 -1
- package/dist/components/form-tools/shape.jsx +43 -0
- package/dist/components/input/number-indicator.d.ts +1 -1
- package/dist/components/input/{number-indicator.js → number-indicator.jsx} +11 -2
- package/dist/components/layer/index.d.ts +1 -1
- package/dist/components/layer/index.jsx +254 -0
- package/dist/components/lib/index.d.ts +1 -1
- package/dist/components/lib/{index.js → index.jsx} +7 -2
- package/dist/components/modal-preview/index.d.ts +1 -1
- package/dist/components/modal-preview/index.jsx +11 -0
- package/dist/features/board/index.d.ts +1 -1
- package/dist/features/board/{index.js → index.jsx} +37 -24
- package/dist/features/navbar/index.d.ts +1 -1
- package/dist/features/navbar/index.jsx +5 -0
- package/dist/features/package/index.d.ts +1 -1
- package/dist/features/package/{index.js → index.jsx} +7 -2
- package/dist/features/panel/index.d.ts +1 -1
- package/dist/features/panel/{index.js → index.jsx} +15 -7
- package/dist/features/panel/select-tool.d.ts +1 -1
- package/dist/features/panel/{select-tool.js → select-tool.jsx} +16 -7
- package/dist/features/panel/square-circle-tool.d.ts +1 -1
- package/dist/features/panel/{square-circle-tool.js → square-circle-tool.jsx} +4 -2
- package/dist/features/panel/table-seat-circle.d.ts +1 -1
- package/dist/features/panel/table-seat-circle.jsx +31 -0
- package/dist/features/panel/text-tool.d.ts +1 -1
- package/dist/features/panel/text-tool.jsx +22 -0
- package/dist/features/panel/upload-tool.d.ts +1 -1
- package/dist/features/panel/{upload-tool.js → upload-tool.jsx} +16 -2
- package/dist/features/side-tool/index.d.ts +1 -1
- package/dist/features/side-tool/{index.js → index.jsx} +80 -66
- package/dist/features/view/index.d.ts +1 -1
- package/dist/features/view/{index.js → index.jsx} +38 -31
- package/dist/provider/antd-provider.jsx +30 -0
- package/dist/provider/redux-provider.d.ts +1 -1
- package/dist/provider/{redux-provider.js → redux-provider.jsx} +1 -2
- package/dist/provider/store-provider.d.ts +1 -1
- package/dist/provider/{store-provider.js → store-provider.jsx} +3 -2
- package/dist/seat-editor.css +1 -1
- package/package.json +3 -2
- package/remove-tailwind-prefix.js +2 -2
- package/dist/app/new-board/page.js +0 -7
- package/dist/app/page.js +0 -8
- package/dist/components/button-tools/index.js +0 -11
- package/dist/components/form-tools/label.js +0 -7
- package/dist/components/form-tools/shape.js +0 -7
- package/dist/components/layer/index.js +0 -168
- package/dist/components/modal-preview/index.js +0 -10
- package/dist/features/navbar/index.js +0 -6
- package/dist/features/panel/table-seat-circle.js +0 -9
- package/dist/features/panel/text-tool.js +0 -7
- package/dist/provider/antd-provider.js +0 -27
package/add-tailwind-prefix.js
CHANGED
|
@@ -23,12 +23,12 @@ function walk(dir, callback) {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
function addPrefix(content) {
|
|
26
|
-
return content.replace(/className="([^"]+)"/g, (_, classes) => {
|
|
26
|
+
return content.replace(/className="tw-([^"]+)"/g, (_, classes) => {
|
|
27
27
|
const updated = classes
|
|
28
28
|
.split(' ')
|
|
29
29
|
.map(cls => cls.startsWith(prefix) ? cls : `${prefix}${cls}`)
|
|
30
30
|
.join(' ');
|
|
31
|
-
return `className="
|
|
31
|
+
return `className="tw-${updated}"`;
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
|
package/dist/app/layout.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import localFont from "next/font/local";
|
|
3
2
|
import "./globals.css";
|
|
4
3
|
import { Layout } from "antd";
|
|
@@ -18,5 +17,11 @@ export const metadata = {
|
|
|
18
17
|
description: "Generated by create next app",
|
|
19
18
|
};
|
|
20
19
|
export default function RootLayout({ children, }) {
|
|
21
|
-
return (
|
|
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>);
|
|
22
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function NewBoard(): import("react
|
|
1
|
+
export default function NewBoard(): import("react").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import Board from "../../features/board";
|
|
2
|
+
import SideTool from "../../features/side-tool";
|
|
3
|
+
import ControlPanels from "../../features/panel";
|
|
4
|
+
export default function NewBoard() {
|
|
5
|
+
return (<>
|
|
6
|
+
<div className="tw-w-full tw-h-screen tw-flex tw-relative">
|
|
7
|
+
<SideTool />
|
|
8
|
+
<Board />
|
|
9
|
+
<ControlPanels />
|
|
10
|
+
</div>
|
|
11
|
+
</>);
|
|
12
|
+
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
3
|
-
import { useState } from "react";
|
|
2
|
+
import React, { useState } from "react";
|
|
4
3
|
import { Button, Input, Modal } from "antd"; //tes commit
|
|
5
4
|
// aduhuhhusd
|
|
6
5
|
import { Square, MousePointer2, Move3D, Trash, CopyPlusIcon, ZoomInIcon, ZoomOutIcon, DownloadIcon, UploadIcon, Circle, PenIcon, Pencil, } from "lucide-react";
|
|
@@ -298,85 +297,219 @@ const SeatEditor = () => {
|
|
|
298
297
|
// link.click();
|
|
299
298
|
// document.body.removeChild(link);
|
|
300
299
|
};
|
|
301
|
-
return (
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
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>);
|
|
381
514
|
};
|
|
382
515
|
export default SeatEditor;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TouchScrollDetect: () => import("react
|
|
1
|
+
declare const TouchScrollDetect: () => import("react").JSX.Element;
|
|
2
2
|
export default TouchScrollDetect;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
import LayerView from "@/features/view";
|
|
4
3
|
import { useState, useEffect } from "react";
|
|
5
4
|
const TouchScrollDetect = () => {
|
|
@@ -35,6 +34,22 @@ const TouchScrollDetect = () => {
|
|
|
35
34
|
}
|
|
36
35
|
};
|
|
37
36
|
}, []);
|
|
38
|
-
return (
|
|
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>);
|
|
39
54
|
};
|
|
40
55
|
export default TouchScrollDetect;
|
package/dist/app/page.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TableEditor: () => import("react
|
|
1
|
+
declare const TableEditor: () => import("react").JSX.Element;
|
|
2
2
|
export default TableEditor;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import Board from "../features/board";
|
|
2
|
+
import SideTool from "../features/side-tool";
|
|
3
|
+
import ControlPanels from "../features/panel";
|
|
4
|
+
const TableEditor = () => {
|
|
5
|
+
return (<>
|
|
6
|
+
<div className="tw-w-full tw-h-screen tw-flex tw-relative">
|
|
7
|
+
<SideTool />
|
|
8
|
+
<Board />
|
|
9
|
+
<ControlPanels />
|
|
10
|
+
</div>
|
|
11
|
+
</>);
|
|
12
|
+
};
|
|
13
|
+
export default TableEditor;
|
|
@@ -7,5 +7,5 @@ interface ButtonToolsProps {
|
|
|
7
7
|
}>;
|
|
8
8
|
popoverProps?: PopoverProps;
|
|
9
9
|
}
|
|
10
|
-
declare const ButtonTools: (props: ButtonToolsProps) => import("react
|
|
10
|
+
declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
|
|
11
11
|
export default ButtonTools;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button, Popover } from "antd";
|
|
3
|
+
const ButtonTools = (props) => {
|
|
4
|
+
const { buttonProps, items, popoverProps } = props;
|
|
5
|
+
if (items.length === 0) {
|
|
6
|
+
return (<Popover trigger="hover" {...popoverProps}>
|
|
7
|
+
<Button {...buttonProps}/>
|
|
8
|
+
</Popover>);
|
|
9
|
+
}
|
|
10
|
+
return (<Popover content={<div>
|
|
11
|
+
<Button>Button 1</Button>
|
|
12
|
+
<Button>Button 2</Button>
|
|
13
|
+
</div>} trigger="click">
|
|
14
|
+
<Button {...buttonProps}/>
|
|
15
|
+
</Popover>);
|
|
16
|
+
};
|
|
17
|
+
export default ButtonTools;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SectionLabel: () => import("react
|
|
1
|
+
declare const SectionLabel: () => import("react").JSX.Element;
|
|
2
2
|
export default SectionLabel;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
|
|
3
|
+
const SectionLabel = () => {
|
|
4
|
+
return (<div className="tw-py-2">
|
|
5
|
+
<h1 className="tw-heading-s">Section Labeling</h1>
|
|
6
|
+
<Form.Item label="Labels in square" name={"labels"}>
|
|
7
|
+
<Form.List name="labels">
|
|
8
|
+
{(fields, { add, remove }) => (<>
|
|
9
|
+
{fields.map((field) => (<div key={field.key}>
|
|
10
|
+
<Flex gap={2}>
|
|
11
|
+
<Form.Item name={[field.name, "label"]} label="Text">
|
|
12
|
+
<Input />
|
|
13
|
+
</Form.Item>
|
|
14
|
+
<Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
|
|
15
|
+
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
16
|
+
</Form.Item>
|
|
17
|
+
</Flex>
|
|
18
|
+
<Flex gap={2}>
|
|
19
|
+
<Form.Item name={[field.name, "x"]} label="X">
|
|
20
|
+
<InputNumber />
|
|
21
|
+
</Form.Item>
|
|
22
|
+
<Form.Item name={[field.name, "y"]} label="Y">
|
|
23
|
+
<InputNumber />
|
|
24
|
+
</Form.Item>
|
|
25
|
+
<Form.Item name={[field.name, "fontSize"]} label="Size">
|
|
26
|
+
<InputNumber suffix="px"/>
|
|
27
|
+
</Form.Item>
|
|
28
|
+
</Flex>
|
|
29
|
+
</div>))}
|
|
30
|
+
<Flex gap={2}>
|
|
31
|
+
<Button type="primary" onClick={() => add()} className="tw-btn tw-btn-primary">
|
|
32
|
+
Add
|
|
33
|
+
</Button>
|
|
34
|
+
<Button type="primary" onClick={() => remove(fields.length - 1)} className="tw-btn tw-btn-primary">
|
|
35
|
+
Remove
|
|
36
|
+
</Button>
|
|
37
|
+
</Flex>
|
|
38
|
+
</>)}
|
|
39
|
+
</Form.List>
|
|
40
|
+
</Form.Item>
|
|
41
|
+
<div className="tw-divider-dashed"/>
|
|
42
|
+
</div>);
|
|
43
|
+
};
|
|
44
|
+
export default SectionLabel;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const SectionShape: () => import("react
|
|
1
|
+
declare const SectionShape: () => import("react").JSX.Element;
|
|
2
2
|
export default SectionShape;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { ColorPicker, Flex, Form, InputNumber } from "antd";
|
|
3
|
+
const SectionShape = () => {
|
|
4
|
+
return (<div className="tw-py-2">
|
|
5
|
+
<h1 className="tw-heading-s">Shape</h1>
|
|
6
|
+
<Flex gap={2} className="tw-w-full">
|
|
7
|
+
<Form.Item label="Width" name="width" className="tw-w-full">
|
|
8
|
+
<InputNumber suffix="px"/>
|
|
9
|
+
</Form.Item>
|
|
10
|
+
<Form.Item label="Height" name="height" className="tw-w-full">
|
|
11
|
+
<InputNumber suffix="px"/>
|
|
12
|
+
</Form.Item>
|
|
13
|
+
</Flex>
|
|
14
|
+
<Flex gap={2}>
|
|
15
|
+
<Form.Item label="Position X" name="x" className="tw-w-full">
|
|
16
|
+
<InputNumber />
|
|
17
|
+
</Form.Item>
|
|
18
|
+
<Form.Item label="Position Y" name="y" className="tw-w-full">
|
|
19
|
+
<InputNumber />
|
|
20
|
+
</Form.Item>
|
|
21
|
+
<Form.Item label="Rotation" name="rotation" className="tw-w-full">
|
|
22
|
+
<InputNumber />
|
|
23
|
+
</Form.Item>
|
|
24
|
+
</Flex>
|
|
25
|
+
<Flex gap={2}>
|
|
26
|
+
<Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="tw-w-full tw-">
|
|
27
|
+
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
28
|
+
</Form.Item>
|
|
29
|
+
<Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="tw-w-full tw-">
|
|
30
|
+
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
31
|
+
</Form.Item>
|
|
32
|
+
</Flex>
|
|
33
|
+
<Flex>
|
|
34
|
+
<Form.Item label="Stroke Width" name={"strokeWidth"} className="tw-w-full">
|
|
35
|
+
<InputNumber />
|
|
36
|
+
</Form.Item>
|
|
37
|
+
<Form.Item label="opacity" name={"opacity"} className="tw-w-full">
|
|
38
|
+
<InputNumber step={0.1} max={1} min={0}/>
|
|
39
|
+
</Form.Item>
|
|
40
|
+
</Flex>
|
|
41
|
+
</div>);
|
|
42
|
+
};
|
|
43
|
+
export default SectionShape;
|
|
@@ -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
|
|
6
|
+
declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
|
|
7
7
|
export default NumberIndicator;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
import { useState, useEffect } from "react";
|
|
4
3
|
import { Input, Button, Flex, Form } from "antd";
|
|
5
4
|
import { ArrowRight, ArrowLeft } from "lucide-react";
|
|
@@ -22,6 +21,16 @@ const NumberIndicator = ({ name, defaultValue, onChange }) => {
|
|
|
22
21
|
form.setFieldsValue({ [name]: value + 1 });
|
|
23
22
|
onChange(value + 1);
|
|
24
23
|
};
|
|
25
|
-
return (
|
|
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>);
|
|
26
35
|
};
|
|
27
36
|
export default NumberIndicator;
|
|
@@ -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
|
|
15
|
+
declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: LayersProps) => import("react").JSX.Element;
|
|
16
16
|
export default Layers;
|