seat-editor 2.1.0 → 2.1.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.
Files changed (85) hide show
  1. package/dist/app/layout.d.ts +1 -1
  2. package/dist/app/{layout.jsx → layout.js} +2 -7
  3. package/dist/app/new-board/page.d.ts +1 -1
  4. package/dist/app/new-board/page.js +34 -0
  5. package/dist/app/old-board/page.d.ts +1 -2
  6. package/dist/app/old-board/{page.jsx → page.js} +82 -215
  7. package/dist/app/only-view/page.d.ts +1 -1
  8. package/dist/app/only-view/{page.jsx → page.js} +2 -1
  9. package/dist/app/page.d.ts +1 -1
  10. package/dist/app/page.js +8 -0
  11. package/dist/app/test/page.d.ts +1 -2
  12. package/dist/app/test/{page.jsx → page.js} +3 -5
  13. package/dist/app/v2/page.d.ts +1 -1
  14. package/dist/app/v2/page.js +8 -0
  15. package/dist/components/button-tools/index.d.ts +1 -1
  16. package/dist/components/button-tools/index.js +11 -0
  17. package/dist/components/form-tools/label.d.ts +1 -1
  18. package/dist/components/form-tools/label.js +7 -0
  19. package/dist/components/form-tools/shape.d.ts +1 -1
  20. package/dist/components/form-tools/shape.js +25 -0
  21. package/dist/components/input/number-indicator.d.ts +1 -1
  22. package/dist/components/input/{number-indicator.jsx → number-indicator.js} +2 -11
  23. package/dist/components/joystick/index.d.ts +1 -2
  24. package/dist/components/joystick/{index.jsx → index.js} +13 -14
  25. package/dist/components/layer/index.d.ts +1 -1
  26. package/dist/components/layer/index.js +295 -0
  27. package/dist/components/layer-v2/index.d.ts +1 -1
  28. package/dist/components/layer-v2/index.js +282 -0
  29. package/dist/components/layer-v3/index.d.ts +1 -1
  30. package/dist/components/layer-v3/index.js +337 -0
  31. package/dist/components/lib/index.d.ts +1 -1
  32. package/dist/components/lib/{index.jsx → index.js} +2 -7
  33. package/dist/components/modal-preview/index.d.ts +1 -1
  34. package/dist/components/modal-preview/index.js +10 -0
  35. package/dist/features/board/index.d.ts +1 -1
  36. package/dist/features/board/{index.jsx → index.js} +31 -90
  37. package/dist/features/board-v2/index.d.ts +1 -2
  38. package/dist/features/board-v2/{index.jsx → index.js} +39 -101
  39. package/dist/features/board-v3/index.d.ts +1 -2
  40. package/dist/features/board-v3/{index.jsx → index.js} +42 -120
  41. package/dist/features/navbar/index.d.ts +1 -1
  42. package/dist/features/navbar/index.js +6 -0
  43. package/dist/features/package/index.d.ts +1 -1
  44. package/dist/features/package/{index.jsx → index.js} +6 -16
  45. package/dist/features/panel/index.d.ts +1 -1
  46. package/dist/features/panel/{index.jsx → index.js} +8 -16
  47. package/dist/features/panel/select-tool.d.ts +1 -1
  48. package/dist/features/panel/{select-tool.jsx → select-tool.js} +8 -20
  49. package/dist/features/panel/square-circle-tool.d.ts +1 -1
  50. package/dist/features/panel/{square-circle-tool.jsx → square-circle-tool.js} +2 -4
  51. package/dist/features/panel/table-seat-circle.d.ts +1 -1
  52. package/dist/features/panel/table-seat-circle.js +9 -0
  53. package/dist/features/panel/text-tool.d.ts +1 -1
  54. package/dist/features/panel/text-tool.js +7 -0
  55. package/dist/features/panel/upload-tool.d.ts +1 -1
  56. package/dist/features/panel/{upload-tool.jsx → upload-tool.js} +2 -24
  57. package/dist/features/side-tool/index.d.ts +1 -1
  58. package/dist/features/side-tool/{index.jsx → index.js} +98 -120
  59. package/dist/features/view/index.d.ts +1 -1
  60. package/dist/features/view/{index.jsx → index.js} +31 -38
  61. package/dist/features/view-only/index.d.ts +1 -1
  62. package/dist/features/view-only/{index.jsx → index.js} +31 -38
  63. package/dist/features/view-only-2/index.d.ts +1 -1
  64. package/dist/features/view-only-2/{index.jsx → index.js} +13 -16
  65. package/dist/provider/antd-provider.js +43 -0
  66. package/dist/provider/redux-provider.d.ts +1 -1
  67. package/dist/provider/{redux-provider.jsx → redux-provider.js} +2 -1
  68. package/dist/provider/store-provider.d.ts +1 -1
  69. package/dist/provider/{store-provider.jsx → store-provider.js} +2 -3
  70. package/dist/seat-editor.css +1 -1
  71. package/package.json +1 -1
  72. package/dist/app/new-board/page.jsx +0 -56
  73. package/dist/app/page.jsx +0 -13
  74. package/dist/app/v2/page.jsx +0 -13
  75. package/dist/components/button-tools/index.jsx +0 -17
  76. package/dist/components/form-tools/label.jsx +0 -44
  77. package/dist/components/form-tools/shape.jsx +0 -66
  78. package/dist/components/layer/index.jsx +0 -383
  79. package/dist/components/layer-v2/index.jsx +0 -370
  80. package/dist/components/layer-v3/index.jsx +0 -418
  81. package/dist/components/modal-preview/index.jsx +0 -11
  82. package/dist/features/navbar/index.jsx +0 -5
  83. package/dist/features/panel/table-seat-circle.jsx +0 -31
  84. package/dist/features/panel/text-tool.jsx +0 -26
  85. package/dist/provider/antd-provider.jsx +0 -46
@@ -1,418 +0,0 @@
1
- "use client";
2
- import { useRef } from "react";
3
- import { isArray, isEmpty, omit } from "lodash";
4
- import clsx from "clsx";
5
- const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style,
6
- // onTouchEnd,
7
- // onTouchMove,
8
- onTouchStart, }) => {
9
- const refItemTemp = useRef(null);
10
- const handleOnHover = (item) => {
11
- if (mode === "edit") {
12
- refItemTemp.current = item;
13
- }
14
- };
15
- function rectToPolygonPoints(x, y, width, height) {
16
- const topLeft = [x, y];
17
- const topRight = [x + width, y];
18
- const bottomRight = [x + width, y + height];
19
- const bottomLeft = [x, y + height];
20
- const points = [topLeft, topRight, bottomRight, bottomLeft]
21
- .map((point) => point.join(","))
22
- .join(" ");
23
- return points;
24
- }
25
- function rectToPolygonNodes(x, y, width, height) {
26
- const points = [
27
- { x: x, y: y },
28
- { x: x + width, y: y },
29
- { x: x + width, y: y + height },
30
- { x: x, y: y + height },
31
- ];
32
- return points;
33
- }
34
- const renderShadowShape = (item) => {
35
- var _a;
36
- const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, points, } = item;
37
- const commonProps = { fill, opacity };
38
- switch (shape) {
39
- case "square":
40
- case "polygon":
41
- const pointsFormat = !isEmpty(points)
42
- ? points
43
- : rectToPolygonPoints(x, y, width, height);
44
- return <polygon key={id} points={pointsFormat} {...commonProps}/>;
45
- case "circle":
46
- return (<circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} {...commonProps}/>);
47
- case "diamond":
48
- return (<rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps}/>);
49
- case "table-seat-circle": {
50
- const seatCount = item.seatCount;
51
- const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
52
- const centerX = x + width / 2;
53
- const centerY = y + height / 2;
54
- const baseSize = Math.min(width, height);
55
- const radius = baseSize / 2; // jarak kursi dari pusat
56
- const seatRadius = baseSize / 6; // ukuran kursi
57
- const fullAngle = 2 * Math.PI;
58
- const availableAngle = fullAngle * (1 - openSpace);
59
- const angleStart = (fullAngle - availableAngle) / 2;
60
- const angleStep = availableAngle / seatCount;
61
- const seatInsetFactor = 0.3;
62
- const seatCircles = Array.from({ length: seatCount }, (_, i) => {
63
- const angle = angleStart + i * angleStep;
64
- const inset = seatRadius * seatInsetFactor; // default 0.3
65
- const cx = centerX + (radius - inset) * Math.cos(angle);
66
- const cy = centerY + (radius - inset) * Math.sin(angle);
67
- return { cx, cy };
68
- });
69
- return (<g key={id} transform={`rotate(${rotation} ${centerX} ${centerY})`}>
70
- {/* Meja */}
71
- <circle cx={centerX} cy={centerY} r={radius - 15} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity}/>
72
-
73
- {/* Label */}
74
- {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
75
- var _a, _b, _c, _d;
76
- return (<text key={`${id}-label-${index}`} x={centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={centerY + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${centerX} ${centerY})`} onClick={(e) => {
77
- e.stopPropagation();
78
- onClick && onClick(item);
79
- }}>
80
- {_ === null || _ === void 0 ? void 0 : _.label}
81
- </text>);
82
- })}
83
-
84
- {/* Kursi */}
85
- <g fill="#e6b9c0" opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} stroke="#c49ba3" strokeWidth="1">
86
- {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
87
- </g>
88
- </g>);
89
- }
90
- case "table-seat-square": {
91
- const seatCount = item.seatCount || 6;
92
- const openSpace = item.openSpace || 0; // from 0 to 0.9
93
- const seatRadius = width / 6;
94
- // split seats evenly on top and bottom
95
- const seatCountPerSide = Math.ceil(seatCount / 2);
96
- const availableWidth = width * (1 - openSpace);
97
- const startX = x + (width * openSpace) / 2;
98
- const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
99
- const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
100
- cx: startX + i * spacing,
101
- cy: y - seatRadius * 1.5,
102
- }));
103
- const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
104
- (_, i) => ({
105
- cx: startX + i * spacing,
106
- cy: y + height + seatRadius * 1.5,
107
- }));
108
- return (<g key={id}>
109
- {/* Square Table */}
110
- <rect x={x} y={y} width={width} height={height} {...commonProps}/>
111
-
112
- {/* Seats */}
113
- <g fill="#e6b9c0" fillOpacity="0.5" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
114
- {[...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius}/>))}
115
- </g>
116
- </g>);
117
- }
118
- case "text":
119
- return (<g key={id} onClick={() => {
120
- onClick && onClick(item);
121
- }}>
122
- <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity}/>
123
- <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={height * 0.6} opacity={opacity}>
124
- {text}
125
- </text>
126
- </g>);
127
- case "ruler":
128
- return (<g key={id}>
129
- <rect x={x - (window.innerWidth * 3) / 2} y={y} width={window.innerWidth * 3} height={1} fill="black"/>
130
- <rect x={x} y={y - (window.innerHeight * 3) / 2} width={1} height={window.innerHeight * 3} fill="black"/>
131
- </g>);
132
- default:
133
- return null;
134
- }
135
- };
136
- const renderShape = (item) => {
137
- var _a;
138
- const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, } = item;
139
- const commonProps = {
140
- fill,
141
- opacity,
142
- stroke,
143
- strokeWidth,
144
- onMouseDown: (e) => {
145
- onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, item || refItemTemp.current);
146
- },
147
- onMouseEnter: (e) => {
148
- // e.stopPropagation();
149
- handleOnHover === null || handleOnHover === void 0 ? void 0 : handleOnHover(item);
150
- },
151
- onClick: (e) => {
152
- // e.stopPropagation();
153
- onClick === null || onClick === void 0 ? void 0 : onClick(item);
154
- },
155
- onMouseUp: (e) => {
156
- // e.stopPropagation();
157
- onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
158
- },
159
- onBlur: (e) => {
160
- // e.stopPropagation();
161
- onBlur === null || onBlur === void 0 ? void 0 : onBlur();
162
- },
163
- // onTouchMove: (
164
- // e: React.TouchEvent<
165
- // SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
166
- // >
167
- // ) => {
168
- // // e.stopPropagation();
169
- // onTouchMove?.(e);
170
- // },
171
- onTouchStart: (e) => {
172
- // e.stopPropagation();
173
- onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e, item);
174
- },
175
- // onTouchEnd: (
176
- // e: React.TouchEvent<
177
- // SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
178
- // >
179
- // ) => {
180
- // // e.stopPropagation();
181
- // onTouchEnd?.(e);
182
- // },
183
- onDoubleClick: (e) => {
184
- // e.stopPropagation();
185
- onClick === null || onClick === void 0 ? void 0 : onClick(item);
186
- },
187
- };
188
- switch (shape) {
189
- case "square":
190
- case "polygon":
191
- const pointsFormat = !isEmpty(points)
192
- ? points
193
- : rectToPolygonPoints(x, y, width, height);
194
- return (<g key={id}>
195
- <polygon {...commonProps} key={id} points={pointsFormat}/>
196
- </g>);
197
- // return (
198
- // <g key={id}>
199
- // <rect
200
- // key={id}
201
- // x={x}
202
- // y={y}
203
- // width={width}
204
- // height={height}
205
- // fill={selectedTableColor ?? fill}
206
- // style={{
207
- // cursor: mode === "view" ? "pointer" : "default",
208
- // ...style,
209
- // }}
210
- // opacity={id === selectedComponent?.id ? 0.5 : opacity}
211
- // {...omit(commonProps, "opacity")}
212
- // transform={`rotate(${rotation} ${x + width / 2} ${
213
- // y + height / 2
214
- // })`}
215
- // />
216
- // {labels?.map((_: any, index: number) => {
217
- // return (
218
- // <text
219
- // {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])}
220
- // key={`${id}-label-${index}`}
221
- // x={x + width / 2 + (_?.x ?? 0)}
222
- // y={y + height / 2 + (_?.y ?? 0)}
223
- // fill={_?.fontColor ?? "black"}
224
- // fontSize={`${_?.fontSize ?? 10}px`}
225
- // fontWeight="bold"
226
- // textAnchor="middle"
227
- // dominantBaseline="middle"
228
- // transform={`rotate(${rotation} ${x + width / 2} ${
229
- // y + height / 2
230
- // })`}
231
- // onClick={(e) => {
232
- // e.stopPropagation();
233
- // onClick&& onClick(item);
234
- // }}
235
- // >
236
- // {_?.label}
237
- // </text>
238
- // );
239
- // })}
240
- // </g>
241
- // );
242
- case "circle":
243
- return (<g key={id}>
244
- <circle key={id} cx={x + width / 2} cy={y + height / 2} r={Math.min(width, height) / 2} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} {...omit(commonProps, "opacity")}/>
245
- {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
246
- var _a, _b, _c, _d;
247
- return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`} onClick={(e) => {
248
- e.stopPropagation();
249
- onClick && onClick(item);
250
- }}>
251
- {_ === null || _ === void 0 ? void 0 : _.label}
252
- </text>);
253
- })}
254
- </g>);
255
- case "diamond":
256
- return (<g key={id}>
257
- <rect key={id} x={x} y={y} width={width} height={height} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
258
- <text x={x + width / 2} y={y + height / 2} fill={fontColor !== null && fontColor !== void 0 ? fontColor : "black"} fontSize={`${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
259
- {label}
260
- </text>
261
- </g>);
262
- case "table-seat-circle": {
263
- const seatCount = item.seatCount;
264
- const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
265
- const centerX = x + width / 2;
266
- const centerY = y + height / 2;
267
- const baseSize = Math.min(width, height);
268
- const radius = baseSize / 2; // jarak kursi dari pusat
269
- const seatRadius = baseSize / 6; // ukuran kursi
270
- const fullAngle = 2 * Math.PI;
271
- const availableAngle = fullAngle * (1 - openSpace);
272
- const angleStart = (fullAngle - availableAngle) / 2;
273
- const angleStep = availableAngle / seatCount;
274
- const seatInsetFactor = 0.3;
275
- const seatCircles = Array.from({ length: seatCount }, (_, i) => {
276
- const angle = angleStart + i * angleStep;
277
- const inset = seatRadius * seatInsetFactor; // default 0.3
278
- const cx = centerX + (radius - inset) * Math.cos(angle);
279
- const cy = centerY + (radius - inset) * Math.sin(angle);
280
- return { cx, cy };
281
- });
282
- return (<g key={id} transform={`rotate(${rotation} ${centerX} ${centerY})`}>
283
- {/* Meja */}
284
- <circle cx={centerX} cy={centerY} r={radius - 15} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity}/>
285
-
286
- {/* Label */}
287
- {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
288
- var _a, _b, _c, _d;
289
- return (<text key={`${id}-label-${index}`} x={centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={centerY + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${centerX} ${centerY})`} onClick={(e) => {
290
- e.stopPropagation();
291
- onClick && onClick(item);
292
- }}>
293
- {_ === null || _ === void 0 ? void 0 : _.label}
294
- </text>);
295
- })}
296
-
297
- {/* Kursi */}
298
- <g fill="#e6b9c0" opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} stroke="#c49ba3" strokeWidth="1">
299
- {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
300
- </g>
301
- </g>);
302
- }
303
- case "table-seat-square": {
304
- const seatCount = item.seatCount || 6;
305
- const openSpace = item.openSpace || 0; // from 0 to 0.9
306
- const seatRadius = width / 6;
307
- // split seats evenly on top and bottom
308
- const seatCountPerSide = Math.ceil(seatCount / 2);
309
- const availableWidth = width * (1 - openSpace);
310
- const startX = x + (width * openSpace) / 2;
311
- const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
312
- const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
313
- cx: startX + i * spacing,
314
- cy: y - seatRadius * 1.5,
315
- }));
316
- const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
317
- (_, i) => ({
318
- cx: startX + i * spacing,
319
- cy: y + height + seatRadius * 1.5,
320
- }));
321
- return (<g key={id} transform={`rotate(${rotation}, ${x}, ${y})`}>
322
- {/* Square Table */}
323
- <rect x={x} y={y} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
324
- <text x={x + width / 2} y={y + height / 2} fill={fontColor !== null && fontColor !== void 0 ? fontColor : "black"} fontSize={`${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
325
- {label}
326
- </text>
327
- {/* Seats */}
328
- <g fill="#e6b9c0" fillOpacity="0.5" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
329
- {[...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius}/>))}
330
- </g>
331
- </g>);
332
- }
333
- case "text":
334
- return (<g key={id}>
335
- <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity} onClick={(e) => {
336
- e.stopPropagation();
337
- onClick && onClick(item);
338
- }}/>
339
- <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
340
- {text}
341
- </text>
342
- </g>);
343
- case "image-table":
344
- case "background":
345
- return (<g key={id} onClick={() => {
346
- onClick && onClick(item);
347
- }}>
348
- <image href={src} x={x} y={y} width={width} height={height} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`} {...commonProps}/>
349
- {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
350
- var _a, _b, _c, _d;
351
- return (<text key={index} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
352
- {_ === null || _ === void 0 ? void 0 : _.label}
353
- </text>);
354
- })}
355
- </g>);
356
- default:
357
- return <g key={id}/>;
358
- }
359
- };
360
- let date = new Date();
361
- const nodesRaw = !isEmpty(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes) && isArray(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes)
362
- ? selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes
363
- : rectToPolygonNodes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height);
364
- const polylinePoints = [...nodesRaw, nodesRaw[0]]
365
- .map((n) => `${n.x},${n.y}`)
366
- .join(" ");
367
- return (<g key={`${date}`}>
368
- {components === null || components === void 0 ? void 0 : components.map(renderShape)}
369
- {shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape)}
370
- {selectedComponent && activeTool === "select" && (<>
371
- {nodesRaw.map((p1, index) => {
372
- const p2 = nodesRaw[(index + 1) % nodesRaw.length]; // sisi berikutnya (wrap ke awal)
373
- const side = index === 0
374
- ? "top"
375
- : index === 1
376
- ? "right"
377
- : index === 2
378
- ? "bottom"
379
- : "left";
380
- return (<polyline key={index} points={`${p1.x},${p1.y} ${p2.x},${p2.y}`} fill="none" stroke="transparent" strokeWidth={5} className={clsx([
381
- {
382
- "cursor-ns-resize": side === "top" || side === "bottom",
383
- "cursor-ew-resize": side === "left" || side === "right",
384
- },
385
- ])} onMouseDown={(e) => {
386
- e.stopPropagation();
387
- if (side === "top" || side === "bottom") {
388
- onMouseDown(e, selectedComponent, side); // misal "top" / "bottom"
389
- }
390
- else if (side === "left" || side === "right") {
391
- onMouseDown(e, selectedComponent, side);
392
- }
393
- }}/>);
394
- })}
395
- {nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw.map((node, index) => {
396
- const corner = index === 0
397
- ? "top-left"
398
- : index === 1
399
- ? "top-right"
400
- : index === 2
401
- ? "bottom-right"
402
- : "bottom-left";
403
- return (<rect key={index} x={node.x - 10} y={node.y - 10} width={20} height={20} fill="transparent" className={clsx([
404
- {
405
- "cursor-nwse-resize": corner === "top-left" || corner === "bottom-right",
406
- "cursor-nesw-resize": corner === "top-right" || corner === "bottom-left",
407
- },
408
- ])} onMouseDown={(e) => {
409
- e.stopPropagation();
410
- onMouseDown(e, selectedComponent, corner);
411
- }}/>);
412
- })}
413
- <polyline points={polylinePoints} fill="none" stroke="blue" strokeWidth={1}/>
414
- </>)}
415
-
416
- </g>);
417
- };
418
- export default Layers;
@@ -1,11 +0,0 @@
1
- "use client";
2
- import { Modal } from "antd";
3
- import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
4
- const ModalPreview = ({ children }) => {
5
- const { isPreview } = useAppSelector((state) => state.tool);
6
- const dispatch = useAppDispatch();
7
- return (<Modal open={isPreview} onCancel={() => dispatch({ type: "tool/setTooglePreview", payload: false })} width={700} title="Preview Board" centered footer={null}>
8
- <div className="flex flex-col p-4 h-[500px]">{children}</div>
9
- </Modal>);
10
- };
11
- export default ModalPreview;
@@ -1,5 +0,0 @@
1
- "use client";
2
- const Navbar = () => {
3
- return <div>Navbar</div>;
4
- };
5
- export default Navbar;
@@ -1,31 +0,0 @@
1
- "use client";
2
- import { ColorPicker, Flex, Form, InputNumber } from "antd";
3
- import SectionLabel from "../../components/form-tools/label";
4
- import SectionShape from "../../components/form-tools/shape";
5
- const SeatCircle = () => {
6
- return (<>
7
- <div className="py-2">
8
- <h1 className="heading-s"> Round table</h1>
9
- <Flex>
10
- <Form.Item name="seatCount" label="Seat Count" className="w-full">
11
- <InputNumber />
12
- </Form.Item>
13
- <Form.Item name="openSpace" label="Open Space" className="w-full">
14
- <InputNumber max={1} min={0} step={0.1}/>
15
- </Form.Item>
16
-
17
- </Flex>
18
- <Flex gap={2}>
19
- <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
20
- <ColorPicker allowClear format="hex" defaultFormat="hex"/>
21
- </Form.Item>
22
- <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
23
- <ColorPicker allowClear format="hex" defaultFormat="hex"/>
24
- </Form.Item>
25
- </Flex>
26
- <SectionShape />
27
- <SectionLabel />
28
- </div>
29
- </>);
30
- };
31
- export default SeatCircle;
@@ -1,26 +0,0 @@
1
- "use client";
2
- import { ColorPicker, Form, Input, InputNumber } from "antd";
3
- const TextTool = () => {
4
- return (<div className="py-2">
5
- <Form.Item label="Name" name="shape" className="w-full hidden">
6
- <Input defaultValue={"text"}/>
7
- </Form.Item>
8
-
9
- <Form.Item name="text" label="Text">
10
- <Input />
11
- </Form.Item>
12
- <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
13
- <ColorPicker allowClear format="hex" defaultFormat="hex"/>
14
- </Form.Item>
15
- <Form.Item name={"x"} label="X">
16
- <InputNumber />
17
- </Form.Item>
18
- <Form.Item name={"y"} label="Y">
19
- <InputNumber />
20
- </Form.Item>
21
- <Form.Item name={"fontSize"} label="Size">
22
- <InputNumber suffix="px"/>
23
- </Form.Item>
24
- </div>);
25
- };
26
- export default TextTool;
@@ -1,46 +0,0 @@
1
- "use client";
2
- import { useEffect } from "react";
3
- import { ConfigProvider } from "antd";
4
- import { AntdRegistry } from "@ant-design/nextjs-registry";
5
- import { useAppSelector, useAppDispatch } from "../hooks/use-redux";
6
- export const AntdProvider = ({ children, themeColor }) => {
7
- const dispatch = useAppDispatch();
8
- const theme = useAppSelector((state) => state.theme);
9
- useEffect(() => {
10
- if (themeColor !== theme.primaryColor) {
11
- dispatch({
12
- type: "theme/setPrimaryColor",
13
- payload: themeColor
14
- });
15
- }
16
- }, [themeColor]);
17
- return (<AntdRegistry>
18
- <ConfigProvider theme={{
19
- token: {
20
- colorPrimary: themeColor,
21
- },
22
- // token: {
23
- // colorPrimary: theme.theme["--primary-color"],
24
- // colorPrimaryBorderHover: theme.theme["--primary-color"],
25
- // fontFamily: "var(--font-inter), sans-serif",
26
- // colorError: theme.theme["--danger"],
27
- // controlOutlineWidth: 4,
28
- // controlOutline: theme.theme["--surface-color"],
29
- // colorBgContainerDisabled: "var(--netral-03)",
30
- // colorTextPlaceholder: "var(--netral-06)",
31
- // },
32
- components: {
33
- Form: {
34
- labelFontSize: 14,
35
- fontWeightStrong: 500,
36
- itemMarginBottom: 12,
37
- },
38
- Button: {
39
- colorPrimary: themeColor
40
- }
41
- },
42
- }}>
43
- {children}
44
- </ConfigProvider>
45
- </AntdRegistry>);
46
- };