seat-editor 1.2.35 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/add-tailwind-prefix.js +4 -2
- package/dist/app/new-board/page.js +1 -1
- package/dist/app/old-board/page.js +16 -16
- package/dist/app/only-view/page.js +1 -1
- package/dist/app/page.js +1 -1
- package/dist/components/form-tools/label.js +1 -1
- package/dist/components/form-tools/shape.js +1 -1
- package/dist/components/input/number-indicator.js +1 -1
- package/dist/components/lib/index.js +1 -1
- package/dist/components/modal-preview/index.js +1 -1
- package/dist/features/board/index.js +2 -2
- package/dist/features/package/index.js +1 -1
- package/dist/features/panel/index.js +1 -1
- package/dist/features/panel/select-tool.js +2 -2
- package/dist/features/panel/table-seat-circle.js +1 -1
- package/dist/features/panel/text-tool.js +1 -1
- package/dist/features/panel/upload-tool.js +1 -1
- package/dist/features/side-tool/index.js +1 -1
- package/dist/features/view/index.js +2 -2
- package/dist/seat-editor.css +1 -0
- package/dist/utils/injectCss.d.ts +1 -0
- package/dist/utils/injectCss.js +13 -0
- package/package.json +3 -2
- package/remove-tailwind-prefix.js +4 -2
package/add-tailwind-prefix.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
1
3
|
const fs = require('fs');
|
|
2
4
|
const path = require('path');
|
|
3
5
|
|
|
@@ -21,12 +23,12 @@ function walk(dir, callback) {
|
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
function addPrefix(content) {
|
|
24
|
-
return content.replace(/className="
|
|
26
|
+
return content.replace(/className="([^"]+)"/g, (_, classes) => {
|
|
25
27
|
const updated = classes
|
|
26
28
|
.split(' ')
|
|
27
29
|
.map(cls => cls.startsWith(prefix) ? cls : `${prefix}${cls}`)
|
|
28
30
|
.join(' ');
|
|
29
|
-
return `className="
|
|
31
|
+
return `className="${updated}"`;
|
|
30
32
|
});
|
|
31
33
|
}
|
|
32
34
|
|
|
@@ -3,5 +3,5 @@ import Board from "../../features/board";
|
|
|
3
3
|
import SideTool from "../../features/side-tool";
|
|
4
4
|
import ControlPanels from "../../features/panel";
|
|
5
5
|
export default function NewBoard() {
|
|
6
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className: "
|
|
6
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
|
|
7
7
|
}
|
|
@@ -298,10 +298,10 @@ const SeatEditor = () => {
|
|
|
298
298
|
// link.click();
|
|
299
299
|
// document.body.removeChild(link);
|
|
300
300
|
};
|
|
301
|
-
return (_jsxs("div", { className: "
|
|
301
|
+
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: {
|
|
302
302
|
transform: `scale(${zoom})`,
|
|
303
303
|
transformOrigin: "0 0",
|
|
304
|
-
}, children: [shadowRect && (_jsx("div", { className: "
|
|
304
|
+
}, children: [shadowRect && (_jsx("div", { className: "absolute border-dashed border-2 border-blue-400", style: {
|
|
305
305
|
left: shadowRect.x,
|
|
306
306
|
top: shadowRect.y,
|
|
307
307
|
width: shadowRect.width,
|
|
@@ -318,50 +318,50 @@ const SeatEditor = () => {
|
|
|
318
318
|
transform: `rotate(${rect.rotation}deg)`,
|
|
319
319
|
transformOrigin: "center",
|
|
320
320
|
borderRadius: rect.shape === "circle" ? "100%" : "0%",
|
|
321
|
-
}, children: [rect.shape === "image-table" && (_jsxs("div", { className: "
|
|
321
|
+
}, 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: {
|
|
322
322
|
top: "10%",
|
|
323
323
|
height: "20%",
|
|
324
324
|
backgroundColor: rect.highlightColor || "transparent",
|
|
325
|
-
}, children: _jsx("span", { className: "
|
|
325
|
+
}, children: _jsx("span", { className: "text-white font-bold text-xs absolute", style: {
|
|
326
326
|
top: "10%",
|
|
327
327
|
left: "50%",
|
|
328
|
-
}, children: rect.table }) }), _jsx("span", { className: "
|
|
328
|
+
}, children: rect.table }) }), _jsx("span", { className: "text-xs text-white flex items-center justify-center absolute w-full", style: {
|
|
329
329
|
top: "85%",
|
|
330
330
|
left: "50%",
|
|
331
331
|
transform: "translate(-50%, -50%)",
|
|
332
332
|
backgroundColor: rect.highlightColor || "transparent"
|
|
333
|
-
}, children: rect.pax }), _jsx("div", { className: "
|
|
333
|
+
}, children: rect.pax }), _jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
|
|
334
334
|
top: "40%",
|
|
335
335
|
height: "20%",
|
|
336
336
|
backgroundColor: rect.highlightColor || "transparent",
|
|
337
|
-
}, children: _jsx("span", { className: "
|
|
337
|
+
}, 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: {
|
|
338
338
|
top: "10%",
|
|
339
339
|
height: "20%",
|
|
340
|
-
}, children: _jsx("span", { className: "
|
|
340
|
+
}, 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: {
|
|
341
341
|
top: "40%",
|
|
342
342
|
height: "20%",
|
|
343
343
|
backgroundColor: rect.highlightColor || "transparent",
|
|
344
|
-
}, children: _jsx("span", { className: "
|
|
344
|
+
}, 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: {
|
|
345
345
|
top: -6,
|
|
346
346
|
left: -6,
|
|
347
347
|
cursor: "nwse-resize",
|
|
348
348
|
borderRadius: rect.shape === "circle" ? "50%" : "0%",
|
|
349
|
-
}, onMouseDown: () => startResizing("top-left") }), _jsx("div", { className: "
|
|
349
|
+
}, onMouseDown: () => startResizing("top-left") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
|
|
350
350
|
top: -6,
|
|
351
351
|
right: -6,
|
|
352
352
|
cursor: "nesw-resize",
|
|
353
353
|
borderRadius: rect.shape === "circle" ? "50%" : "0%",
|
|
354
|
-
}, onMouseDown: () => startResizing("top-right") }), _jsx("div", { className: "
|
|
354
|
+
}, onMouseDown: () => startResizing("top-right") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
|
|
355
355
|
bottom: -6,
|
|
356
356
|
left: -6,
|
|
357
357
|
cursor: "nesw-resize",
|
|
358
358
|
borderRadius: rect.shape === "circle" ? "50%" : "0%",
|
|
359
|
-
}, onMouseDown: () => startResizing("bottom-left") }), _jsx("div", { className: "
|
|
359
|
+
}, onMouseDown: () => startResizing("bottom-left") }), _jsx("div", { className: "absolute w-3 h-3 bg-white border border-gray-800", style: {
|
|
360
360
|
bottom: -6,
|
|
361
361
|
right: -6,
|
|
362
362
|
cursor: "nwse-resize",
|
|
363
363
|
borderRadius: rect.shape === "circle" ? "50%" : "0%",
|
|
364
|
-
}, onMouseDown: () => startResizing("bottom-right") })] }))] }, rect.id)))] }) }), _jsx(Modal, { open: showModal, onCancel: () => setShowModal(false), onOk: () => setShowModal(false), title: "Edit Rectangle", children: selectedRectangle && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "
|
|
364
|
+
}, onMouseDown: () => startResizing("bottom-right") })] }))] }, rect.id)))] }) }), _jsx(Modal, { open: showModal, onCancel: () => setShowModal(false), onOk: () => setShowModal(false), title: "Edit Rectangle", children: selectedRectangle && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "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: {
|
|
365
365
|
width: selectedRectangle.width,
|
|
366
366
|
height: selectedRectangle.height,
|
|
367
367
|
margin: "0 auto",
|
|
@@ -370,13 +370,13 @@ const SeatEditor = () => {
|
|
|
370
370
|
transition: "all 0.3s ease",
|
|
371
371
|
scale: "0.5",
|
|
372
372
|
borderRadius: selectedRectangle.shape === "circle" ? "100%" : "0%",
|
|
373
|
-
}, children: [selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "
|
|
373
|
+
}, children: [selectedRectangle.shape === "vip-seat" && (_jsx("div", { className: "absolute left-0 right-0 flex items-center justify-center", style: {
|
|
374
374
|
top: "10%",
|
|
375
375
|
height: "20%",
|
|
376
|
-
}, children: _jsxs("span", { className: "
|
|
376
|
+
}, 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: {
|
|
377
377
|
top: "40%",
|
|
378
378
|
height: "20%",
|
|
379
379
|
backgroundColor: selectedRectangle.highlightColor || "transparent",
|
|
380
|
-
}, children: _jsxs("span", { className: "
|
|
380
|
+
}, 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" })] })] })) })] }));
|
|
381
381
|
};
|
|
382
382
|
export default SeatEditor;
|
|
@@ -35,6 +35,6 @@ const TouchScrollDetect = () => {
|
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
}, []);
|
|
38
|
-
return (_jsxs("div", { id: "scroll-container", className: "
|
|
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." }) })] }));
|
|
39
39
|
};
|
|
40
40
|
export default TouchScrollDetect;
|
package/dist/app/page.js
CHANGED
|
@@ -3,6 +3,6 @@ import Board from "../features/board";
|
|
|
3
3
|
import SideTool from "../features/side-tool";
|
|
4
4
|
import ControlPanels from "../features/panel";
|
|
5
5
|
const TableEditor = () => {
|
|
6
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className: "
|
|
6
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
|
|
7
7
|
};
|
|
8
8
|
export default TableEditor;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
|
|
4
4
|
const SectionLabel = () => {
|
|
5
|
-
return (_jsxs("div", { className: "
|
|
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
6
|
};
|
|
7
7
|
export default SectionLabel;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { ColorPicker, Flex, Form, InputNumber } from "antd";
|
|
4
4
|
const SectionShape = () => {
|
|
5
|
-
return (_jsxs("div", { className: "
|
|
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
6
|
};
|
|
7
7
|
export default SectionShape;
|
|
@@ -22,6 +22,6 @@ const NumberIndicator = ({ name, defaultValue, onChange }) => {
|
|
|
22
22
|
form.setFieldsValue({ [name]: value + 1 });
|
|
23
23
|
onChange(value + 1);
|
|
24
24
|
};
|
|
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: "
|
|
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, {}) })] }));
|
|
26
26
|
};
|
|
27
27
|
export default NumberIndicator;
|
|
@@ -22,7 +22,7 @@ const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
|
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
}, [componentProps, extraComponentProps]);
|
|
25
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className: "
|
|
25
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
|
|
26
26
|
};
|
|
27
27
|
export default TableEditor;
|
|
28
28
|
export { LayerView };
|
|
@@ -5,6 +5,6 @@ import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
|
|
|
5
5
|
const ModalPreview = ({ children }) => {
|
|
6
6
|
const { isPreview } = useAppSelector((state) => state.tool);
|
|
7
7
|
const dispatch = useAppDispatch();
|
|
8
|
-
return (_jsx(Modal, { open: isPreview, onCancel: () => dispatch({ type: "tool/setTooglePreview", payload: false }), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "
|
|
8
|
+
return (_jsx(Modal, { open: isPreview, onCancel: () => dispatch({ type: "tool/setTooglePreview", payload: false }), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px]", children: children }) }));
|
|
9
9
|
};
|
|
10
10
|
export default ModalPreview;
|
|
@@ -270,7 +270,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
|
|
|
270
270
|
const handleUnSelectComponent = () => {
|
|
271
271
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
272
272
|
};
|
|
273
|
-
return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status", defaultBackground: "#ffffff" }) }), _jsx("div", { className: "
|
|
273
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status", defaultBackground: "#ffffff" }) }), _jsx("div", { className: "relative w-full h-screen flex-1", ref: containerRef, children: _jsx(TransformWrapper, { ref: transformRef, panning: { disabled: false }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true,
|
|
274
274
|
// doubleClick={{ step: 2, mode: "zoomIn" }}
|
|
275
275
|
disablePadding: true, children: _jsx(TransformComponent, { wrapperStyle: {
|
|
276
276
|
width: "100%",
|
|
@@ -279,7 +279,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
|
|
|
279
279
|
}, contentStyle: {
|
|
280
280
|
width: "100%",
|
|
281
281
|
height: "100%",
|
|
282
|
-
}, children: _jsx("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "
|
|
282
|
+
}, children: _jsx("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onClick: (e) => {
|
|
283
283
|
e.stopPropagation();
|
|
284
284
|
handleMouseClick(e);
|
|
285
285
|
}, onMouseLeave: handleMouseLeave,
|
|
@@ -36,6 +36,6 @@ const TableEditor = (props) => {
|
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
38
|
}, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
|
|
39
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className: "
|
|
39
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, { onSelectComponent: props.onSelectComponent }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] }) }));
|
|
40
40
|
};
|
|
41
41
|
export default TableEditor;
|
|
@@ -73,6 +73,6 @@ const ControlPanels = (props) => {
|
|
|
73
73
|
});
|
|
74
74
|
};
|
|
75
75
|
// if(!show) return null
|
|
76
|
-
return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", children: _jsx("div", { className: "
|
|
76
|
+
return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", children: _jsx("div", { className: "bg-white h-full max-h-screen overflow-y-auto w-[300px]", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onFinish: (values) => { }, onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
|
|
77
77
|
};
|
|
78
78
|
export default ControlPanels;
|
|
@@ -13,7 +13,7 @@ const SelectToolForm = ({ title = "Title" }) => {
|
|
|
13
13
|
acc[item.shape] = (acc[item.shape] || 0) + 1;
|
|
14
14
|
return acc;
|
|
15
15
|
}, {});
|
|
16
|
-
return (_jsxs("div", { className: "
|
|
16
|
+
return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [shape, ":"] }), " ", count] }, shape))) })] }));
|
|
17
17
|
};
|
|
18
18
|
const renderComponent = () => {
|
|
19
19
|
switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
|
|
@@ -31,6 +31,6 @@ const SelectToolForm = ({ title = "Title" }) => {
|
|
|
31
31
|
return null;
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
return (_jsxs("div", { className: "
|
|
34
|
+
return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent()] }));
|
|
35
35
|
};
|
|
36
36
|
export default SelectToolForm;
|
|
@@ -4,6 +4,6 @@ import { ColorPicker, Flex, Form, InputNumber } from "antd";
|
|
|
4
4
|
import SectionLabel from "../../components/form-tools/label";
|
|
5
5
|
import SectionShape from "../../components/form-tools/shape";
|
|
6
6
|
const SeatCircle = () => {
|
|
7
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { className: "
|
|
7
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
|
|
8
8
|
};
|
|
9
9
|
export default SeatCircle;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { ColorPicker, Form, Input, InputNumber } from "antd";
|
|
4
4
|
const TextTool = () => {
|
|
5
|
-
return (_jsxs("div", { className: "
|
|
5
|
+
return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "x", label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "y", label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }));
|
|
6
6
|
};
|
|
7
7
|
export default TextTool;
|
|
@@ -114,6 +114,6 @@ const UploadTool = ({ name, type, action, responseMapping, }) => {
|
|
|
114
114
|
}
|
|
115
115
|
}),
|
|
116
116
|
};
|
|
117
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Dragger, Object.assign({}, props, { children: [_jsx("p", { className: "
|
|
117
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Dragger, Object.assign({}, props, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
|
|
118
118
|
};
|
|
119
119
|
export default UploadTool;
|
|
@@ -135,7 +135,7 @@ const SideTool = () => {
|
|
|
135
135
|
payload: newArr
|
|
136
136
|
});
|
|
137
137
|
};
|
|
138
|
-
return (_jsxs("div", { className: "
|
|
138
|
+
return (_jsxs("div", { className: "h-screen left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4", children: [tools === null || tools === void 0 ? void 0 : tools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
|
|
139
139
|
icon: tool.icon,
|
|
140
140
|
type: "text",
|
|
141
141
|
name: tool.name,
|
|
@@ -147,7 +147,7 @@ const LayerView = (props) => {
|
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
149
|
}, []);
|
|
150
|
-
return (_jsx("div", Object.assign({ className: "
|
|
150
|
+
return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
|
|
151
151
|
height: "100vh",
|
|
152
152
|
overflow: "auto",
|
|
153
153
|
WebkitOverflowScrolling: "touch",
|
|
@@ -172,7 +172,7 @@ const LayerView = (props) => {
|
|
|
172
172
|
}, contentStyle: {
|
|
173
173
|
width: "100%",
|
|
174
174
|
height: "100%",
|
|
175
|
-
}, children: _jsx("svg", Object.assign({}, props.svgProps, { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "
|
|
175
|
+
}, children: _jsx("svg", Object.assign({}, props.svgProps, { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
|
|
176
176
|
background: "#000000",
|
|
177
177
|
display: "block",
|
|
178
178
|
pointerEvents: "auto",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background:#fff;--foreground:#171717;--primary-color:#181e49;--secondary-color:#f0f2f5;--background-color:#f5f5f5;--success-color:#63cc47;--netral-03:#ededed;--netral-04:#e0e0e0;--netral-05:#c2c2c2;--netral-06:#9e9e9e;--netral-07:#757575;--netral-08:#616161;--netral-09:#404040;--netral-10:#0a0a0a;--danger:#cb3a31;--accent:#ff9800;--info:#3267e3}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif}.custom-styles .excalidraw{--color-primary:#fcc6d9;--color-primary-darker:#f783ac;--color-primary-darkest:#e64980;--color-primary-light:#f2a9c4}.custom-styles .excalidraw.theme--dark{--color-primary:#d494aa;--color-primary-darker:#d64c7e;--color-primary-darkest:#e86e99;--color-primary-light:#dcbec9}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.ant-drawer-mask{background:none!important}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const injectSeatEditorCSS: () => void;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// src/utils/injectCss.ts
|
|
2
|
+
export const injectSeatEditorCSS = () => {
|
|
3
|
+
if (typeof document !== 'undefined') {
|
|
4
|
+
const id = '__seat-editor-css__';
|
|
5
|
+
if (!document.getElementById(id)) {
|
|
6
|
+
const link = document.createElement('link');
|
|
7
|
+
link.id = id;
|
|
8
|
+
link.rel = 'stylesheet';
|
|
9
|
+
link.href = '/node_modules/seat-editor/dist/seat-editor.css'; // atau dynamic import
|
|
10
|
+
document.head.appendChild(link);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
};
|
package/package.json
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
1
3
|
const fs = require('fs');
|
|
2
4
|
const path = require('path');
|
|
3
5
|
|
|
@@ -21,13 +23,13 @@ function walk(dir, callback) {
|
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
function removePrefix(content) {
|
|
24
|
-
const regex = new RegExp(`className="
|
|
26
|
+
const regex = new RegExp(`className="([^"]+)"`, 'g');
|
|
25
27
|
return content.replace(regex, (_, classes) => {
|
|
26
28
|
const updated = classes
|
|
27
29
|
.split(' ')
|
|
28
30
|
.map(cls => cls.startsWith(prefix) ? cls.slice(prefix.length) : cls)
|
|
29
31
|
.join(' ');
|
|
30
|
-
return `className="
|
|
32
|
+
return `className="${updated}"`;
|
|
31
33
|
});
|
|
32
34
|
}
|
|
33
35
|
|