seat-editor 3.2.8 → 3.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/app/constant.js +149 -0
  2. package/dist/app/only-view/page.jsx +7 -2
  3. package/dist/components/layer-v3/index.jsx +2 -2
  4. package/dist/components/layer-v4/constant.d.ts +48 -0
  5. package/dist/components/layer-v4/constant.js +74 -0
  6. package/dist/components/layer-v4/index.jsx +125 -118
  7. package/dist/features/board-v3/board-slice.d.ts +1 -0
  8. package/dist/features/board-v3/board-slice.js +27 -27
  9. package/dist/features/board-v3/index.jsx +40 -34
  10. package/dist/features/panel/index.jsx +23 -29
  11. package/dist/features/panel/panel-slice.js +1 -5
  12. package/dist/features/panel/selected-group.jsx +4 -0
  13. package/dist/features/view-only-3/index.d.ts +2 -0
  14. package/dist/features/view-only-3/index.jsx +12 -8
  15. package/package.json +1 -1
package/dist/app/constant.js CHANGED
@@ -3212,6 +3212,155 @@ export const test1 = [
3212
3212
  areas: null,
3213
3213
  sections: null,
3214
3214
  },
3215
+ {
3216
+ uuid: "d088bba0-e990-410e-aea9-08548175a0b9-23424234",
3217
+ uuid_rsvp: null,
3218
+ code: "V1",
3219
+ name: "VIP 1",
3220
+ capacity: 8,
3221
+ pax: null,
3222
+ req_pax: null,
3223
+ total_pax: null,
3224
+ total_req_pax: null,
3225
+ status_bg_color: null,
3226
+ status_name: null,
3227
+ status_color: null,
3228
+ status_icon: null,
3229
+ title: null,
3230
+ firstname: null,
3231
+ lastname: null,
3232
+ ranks: null,
3233
+ tags: null,
3234
+ rank_sp: null,
3235
+ rank_ts: null,
3236
+ start_date: null,
3237
+ end_date: null,
3238
+ start_time: null,
3239
+ end_time: null,
3240
+ walk_in: null,
3241
+ dp_amount: null,
3242
+ dp_status: null,
3243
+ online_payment: null,
3244
+ rsvp_type: null,
3245
+ rsvp_input: null,
3246
+ is_reserved: 0,
3247
+ is_hold: 0,
3248
+ is_overtime: 0,
3249
+ is_upcoming: 0,
3250
+ conflicted: 0,
3251
+ is_late: 0,
3252
+ properties: {
3253
+ x: 200,
3254
+ y: 109.07066345214844,
3255
+ id: 175396573893433,
3256
+ fill: "#bca16a",
3257
+ tags: [
3258
+ {
3259
+ gap: "8",
3260
+ key: "table",
3261
+ items: [
3262
+ {
3263
+ type: "text",
3264
+ value: "VIP 2",
3265
+ },
3266
+ ],
3267
+ direction: "column",
3268
+ },
3269
+ {
3270
+ gap: "8",
3271
+ key: "pax",
3272
+ items: [
3273
+ {
3274
+ type: "icon",
3275
+ value: "people",
3276
+ },
3277
+ {
3278
+ type: "text",
3279
+ value: "0/8",
3280
+ },
3281
+ ],
3282
+ offsetX: "3",
3283
+ offsetY: "1",
3284
+ direction: "flex",
3285
+ },
3286
+ {
3287
+ gap: "2",
3288
+ key: "rsvp_time",
3289
+ items: [
3290
+ {
3291
+ type: "text",
3292
+ value: "18:00",
3293
+ fontWeight: "bold",
3294
+ textDecoration: "underline",
3295
+ },
3296
+ {
3297
+ type: "text",
3298
+ value: "19:00",
3299
+ },
3300
+ {
3301
+ type: "text",
3302
+ value: "22:00",
3303
+ },
3304
+ ],
3305
+ direction: "column",
3306
+ offsetY: -25,
3307
+ },
3308
+ ],
3309
+ shape: "square",
3310
+ width: 50,
3311
+ height: 80,
3312
+ labels: [
3313
+ {
3314
+ x: 0,
3315
+ y: 4,
3316
+ label: "V 1",
3317
+ fontSize: 12,
3318
+ fontColor: "#0d0c0c",
3319
+ },
3320
+ ],
3321
+ opacity: 0.5,
3322
+ rotation: 0,
3323
+ seatCount: 0,
3324
+ uuid_table: "d088bba0-e990-410e-aea9-08548175a0b9",
3325
+ },
3326
+ image_mapping: [
3327
+ {
3328
+ x: 102.2516241245301,
3329
+ y: 56.33927640274972,
3330
+ id: 1753965911529,
3331
+ src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965909936935262_BOI HT.png",
3332
+ image: "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965909936935262_BOI HT.png",
3333
+ shape: "background",
3334
+ width: 1080.4444427490234,
3335
+ height: 719,
3336
+ },
3337
+ {
3338
+ x: 0,
3339
+ y: 0,
3340
+ id: 1766992965422,
3341
+ fill: "#ffffff",
3342
+ shape: "backgroundColor",
3343
+ width: 0,
3344
+ height: 0,
3345
+ },
3346
+ ],
3347
+ upcomings: [
3348
+ {
3349
+ time: "18:00",
3350
+ uuid: "9d5504a8-0f35-4027-8fff-c33235acfef0",
3351
+ },
3352
+ {
3353
+ time: "19:00",
3354
+ uuid: "ab7eb02b-1c4b-4e13-9ad8-122c891376db",
3355
+ },
3356
+ {
3357
+ time: "22:00",
3358
+ uuid: "0d925aad-70a1-441c-943b-51ebed06ee0f",
3359
+ },
3360
+ ],
3361
+ areas: null,
3362
+ sections: null,
3363
+ },
3215
3364
  ];
3216
3365
  export const test4 = [
3217
3366
  {
package/dist/app/only-view/page.jsx CHANGED
@@ -189,7 +189,7 @@ const TouchScrollDetect = () => {
189
189
  -
190
190
  </button>
191
191
  </div>
192
- <LayerView refs={refLayer} statusKey="status" privilegedTags={[
192
+ <LayerView refs={refLayer} statusKey="is_hold" privilegedTags={[
193
193
  {
194
194
  key: "table",
195
195
  items: ["text", "icon"],
@@ -209,12 +209,17 @@ const TouchScrollDetect = () => {
209
209
  {
210
210
  key: 0,
211
211
  properties: { fill: "white" },
212
+ className: "blink-2",
212
213
  },
213
214
  ]} eventMatchTable={[
214
215
  {
215
216
  event: "mouseenter",
216
217
  properties: { fill: "red" },
217
218
  },
219
+ {
220
+ event: "dragenter",
221
+ properties: { fill: "blue" },
222
+ },
218
223
  {
219
224
  event: "selected",
220
225
  properties: { fill: "white" },
@@ -230,7 +235,7 @@ const TouchScrollDetect = () => {
230
235
  },
231
236
  ]} viewStyles={{
232
237
  paddingTop: 200,
233
- }}/>
238
+ }} disabled={false}/>
234
239
  </div>
235
240
  </div>
236
241
  </div>);
package/dist/components/layer-v3/index.jsx CHANGED
@@ -6,7 +6,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
6
6
  const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
7
7
  const renderShape = (item) => {
8
8
  var _a, _b, _c, _d, _e, _f;
9
- const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 10, } = item;
9
+ const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
10
10
  const commonProps = {
11
11
  fill,
12
12
  opacity,
@@ -77,7 +77,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
77
77
  case "circle":
78
78
  return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
79
79
  <g transform={`rotate(${rotation}, 0, 0)`}>
80
- <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...omit(commonProps, "opacity")}/>
80
+ <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
81
81
  <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
82
82
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
83
83
  var _a, _b, _c, _d, _e, _f, _g;
package/dist/components/layer-v4/constant.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ export declare const tagsDummy: (name: string) => ({
2
+ gap: string;
3
+ key: string;
4
+ items: {
5
+ type: string;
6
+ value: string;
7
+ }[];
8
+ direction: string;
9
+ offsetX?: undefined;
10
+ offsetY?: undefined;
11
+ } | {
12
+ gap: string;
13
+ key: string;
14
+ items: {
15
+ type: string;
16
+ value: string;
17
+ }[];
18
+ offsetX: string;
19
+ offsetY: string;
20
+ direction: string;
21
+ } | {
22
+ gap: string;
23
+ key: string;
24
+ items: ({
25
+ type: string;
26
+ value: string;
27
+ fontWeight: string;
28
+ textDecoration: string;
29
+ } | {
30
+ type: string;
31
+ value: string;
32
+ fontWeight?: undefined;
33
+ textDecoration?: undefined;
34
+ })[];
35
+ direction: string;
36
+ offsetY: number;
37
+ offsetX?: undefined;
38
+ })[];
39
+ export declare const PRIVILEGED_TAGS: {
40
+ CURRENT_TIME: {
41
+ key: string;
42
+ items: string[];
43
+ }[];
44
+ NEXT_3_RESERVATION: {
45
+ key: string;
46
+ items: string[];
47
+ }[];
48
+ };
package/dist/components/layer-v4/constant.js ADDED
@@ -0,0 +1,74 @@
1
+ export const tagsDummy = (name) => [
2
+ {
3
+ gap: "8",
4
+ key: "table",
5
+ items: [
6
+ {
7
+ type: "text",
8
+ value: name,
9
+ },
10
+ ],
11
+ direction: "column",
12
+ },
13
+ {
14
+ gap: "8",
15
+ key: "pax",
16
+ items: [
17
+ {
18
+ type: "icon",
19
+ value: "people",
20
+ },
21
+ {
22
+ type: "text",
23
+ value: "0/8",
24
+ },
25
+ ],
26
+ offsetX: "3",
27
+ offsetY: "1",
28
+ direction: "flex",
29
+ },
30
+ {
31
+ gap: "2",
32
+ key: "rsvp_time",
33
+ items: [
34
+ {
35
+ type: "text",
36
+ value: "18:00",
37
+ fontWeight: "bold",
38
+ textDecoration: "underline",
39
+ },
40
+ {
41
+ type: "text",
42
+ value: "19:00",
43
+ },
44
+ {
45
+ type: "text",
46
+ value: "22:00",
47
+ },
48
+ ],
49
+ direction: "column",
50
+ offsetY: -25,
51
+ },
52
+ ];
53
+ export const PRIVILEGED_TAGS = {
54
+ CURRENT_TIME: [
55
+ {
56
+ key: "table",
57
+ items: ["text", "icon"],
58
+ },
59
+ {
60
+ key: "pax",
61
+ items: ["text", "icon"],
62
+ },
63
+ ],
64
+ NEXT_3_RESERVATION: [
65
+ {
66
+ key: "table",
67
+ items: ["text"],
68
+ },
69
+ {
70
+ key: "rsvp_time",
71
+ items: ["text"],
72
+ },
73
+ ],
74
+ };
package/dist/components/layer-v4/index.jsx CHANGED
@@ -1,118 +1,128 @@
1
1
  "use client";
2
2
  import { isEmpty, omit } from "lodash";
3
3
  import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
4
+ import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
5
+ import { useAppSelector } from "@/hooks/use-redux";
4
6
  const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }) => {
7
+ const { isShowTagType } = useAppSelector((state) => state.board);
8
+ const showLabels = !(["type-1", "type-2"].includes(isShowTagType)) && !iconTags;
5
9
  const renderShape = (item) => {
6
10
  var _a, _b, _c, _d, _e, _f;
7
11
  const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, } = item;
8
- const renderTags = (tags) => {
9
- const gapBetweenTags = Number(gapTags || 20);
10
- const defaultFontSize = Number(fontSize || 12);
11
- // Hitung total tinggi semua grup tag (buat center vertikal)
12
- const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.find((p) => p.key === tag.key)).reduce((sum, tag) => {
13
- var _a;
14
- const items = tag.items || [];
15
- const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
16
- const tagHeight = isColumn
17
- ? items.length * defaultFontSize +
18
- (items.length - 1) * (Number(tag.gap) || 2)
19
- : defaultFontSize; // horizontal = 1 line
20
- return sum + tagHeight + gapBetweenTags;
21
- }, 0)) - gapBetweenTags;
22
- const startY = Number(height) / 3 - totalTagHeight / 3; // titik awal supaya semua di tengah
23
- let currentY = startY;
24
- return tags
25
- .filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.find((p) => p.key === tag.key))
26
- .map((tag, tagIndex) => {
27
- var _a;
28
- const itemsPriv = privilegedTags[tagIndex].items;
29
- const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
30
- ? "column"
31
- : "flex";
32
- const gap = Number(tag.gap || 2);
33
- const items = tag.items || [];
34
- const fontSize = Number(defaultFontSize);
35
- const isColumn = direction === "column";
36
- const groupHeight = isColumn
37
- ? items.length * fontSize + (items.length - 1) * gap
38
- : fontSize;
39
- const centerX = width / 2;
40
- const centerY = currentY + groupHeight;
41
- // naikkan posisi Y untuk grup berikutnya
42
- currentY += groupHeight + gapBetweenTags;
43
- // kumpulkan elemen yang akan dirender (bisa mix text + icon)
44
- const elements = items
45
- .filter((item) => itemsPriv.includes(item.type))
46
- .map((item, i) => {
47
- var _a, _b;
48
- const offsetY = isColumn
49
- ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
50
- : 0;
51
- const offsetX = !isColumn
52
- ? i * (fontSize + gap) -
53
- ((items.length - 1) * (fontSize + gap)) / 2
54
- : 0;
55
- const posX = centerX + offsetX + Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
56
- const posY = centerY + offsetY + Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
57
- const renderSymbol = (symbol) => {
58
- if (!symbol)
59
- return null;
60
- const { position = "right", size = (item === null || item === void 0 ? void 0 : item.fontSize) || 12, gap: symbolGap = 0, } = symbol;
61
- let offsetSymbolX = 0;
62
- let offsetSymbolY = 0;
63
- switch (position) {
64
- case "right":
65
- offsetSymbolX = size + symbolGap;
66
- break;
67
- case "left":
68
- offsetSymbolX = -(size + symbolGap);
69
- break;
70
- case "top":
71
- offsetSymbolY = -(size + symbolGap);
72
- break;
73
- case "bottom":
74
- offsetSymbolY = size + symbolGap;
75
- break;
76
- case "right-top":
77
- offsetSymbolX = size + symbolGap;
78
- offsetSymbolY = -(size / 4);
79
- break;
80
- case "right-bottom":
81
- offsetSymbolX = size + symbolGap;
82
- offsetSymbolY = size / 4;
83
- break;
84
- case "left-top":
85
- offsetSymbolX = -size - symbolGap;
86
- offsetSymbolY = -(size / 4);
87
- break;
88
- case "left-bottom":
89
- offsetSymbolX = -size - symbolGap;
90
- offsetSymbolY = size / 4;
91
- break;
12
+ const renderTags = (data) => {
13
+ const tags = data !== null && data !== void 0 ? data : tagsDummy("tes");
14
+ const privileged = (privilegedTags !== null && privilegedTags !== void 0 ? privilegedTags : isShowTagType === "type-1") ? PRIVILEGED_TAGS["CURRENT_TIME"] : isShowTagType === "type-2" ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"] : undefined;
15
+ if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
16
+ const gapBetweenTags = Number(gapTags || 20);
17
+ const defaultFontSize = Number(fontSize || 12);
18
+ // Hitung total tinggi semua grup tag (buat center vertikal)
19
+ const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
20
+ var _a;
21
+ const items = tag.items || [];
22
+ const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
23
+ const tagHeight = isColumn
24
+ ? items.length * defaultFontSize +
25
+ (items.length - 1) * (Number(tag.gap) || 2)
26
+ : defaultFontSize; // horizontal = 1 line
27
+ return sum + tagHeight + gapBetweenTags;
28
+ }, 0)) - gapBetweenTags;
29
+ const startY = Number(height) / 3 - totalTagHeight / 3; // titik awal supaya semua di tengah
30
+ let currentY = startY;
31
+ return tags
32
+ .filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key))
33
+ .map((tag, tagIndex) => {
34
+ var _a;
35
+ const itemsPriv = privileged[tagIndex].items;
36
+ const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
37
+ ? "column"
38
+ : "flex";
39
+ const gap = Number(tag.gap || 2);
40
+ const items = tag.items || [];
41
+ const fontSize = Number(defaultFontSize);
42
+ const isColumn = direction === "column";
43
+ const groupHeight = isColumn
44
+ ? items.length * fontSize + (items.length - 1) * gap
45
+ : fontSize;
46
+ const centerX = width / 2;
47
+ const centerY = currentY + groupHeight;
48
+ // naikkan posisi Y untuk grup berikutnya
49
+ currentY += groupHeight + gapBetweenTags;
50
+ // kumpulkan elemen yang akan dirender (bisa mix text + icon)
51
+ const elements = items
52
+ .filter((item) => itemsPriv.includes(item.type))
53
+ .map((item, i) => {
54
+ var _a, _b;
55
+ const offsetY = isColumn
56
+ ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
57
+ : 0;
58
+ const offsetX = !isColumn
59
+ ? i * (fontSize + gap) -
60
+ ((items.length - 1) * (fontSize + gap)) / 2
61
+ : 0;
62
+ const posX = centerX + offsetX + Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
63
+ const posY = centerY + offsetY + Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
64
+ const renderSymbol = (symbol) => {
65
+ if (!symbol)
66
+ return null;
67
+ const { position = "right", size = (item === null || item === void 0 ? void 0 : item.fontSize) || 12, gap: symbolGap = 0, } = symbol;
68
+ let offsetSymbolX = 0;
69
+ let offsetSymbolY = 0;
70
+ switch (position) {
71
+ case "right":
72
+ offsetSymbolX = size + symbolGap;
73
+ break;
74
+ case "left":
75
+ offsetSymbolX = -(size + symbolGap);
76
+ break;
77
+ case "top":
78
+ offsetSymbolY = -(size + symbolGap);
79
+ break;
80
+ case "bottom":
81
+ offsetSymbolY = size + symbolGap;
82
+ break;
83
+ case "right-top":
84
+ offsetSymbolX = size + symbolGap;
85
+ offsetSymbolY = -(size / 4);
86
+ break;
87
+ case "right-bottom":
88
+ offsetSymbolX = size + symbolGap;
89
+ offsetSymbolY = size / 4;
90
+ break;
91
+ case "left-top":
92
+ offsetSymbolX = -size - symbolGap;
93
+ offsetSymbolY = -(size / 4);
94
+ break;
95
+ case "left-bottom":
96
+ offsetSymbolX = -size - symbolGap;
97
+ offsetSymbolY = size / 4;
98
+ break;
99
+ }
100
+ return (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
101
+ <tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotate} ${posX} ${posY})`}>
102
+ {symbol.value}
103
+ </tspan>
104
+ </g>);
105
+ };
106
+ if (item.type === "icon") {
107
+ const iconTag = iconTags === null || iconTags === void 0 ? void 0 : iconTags.find((icon) => icon.key === item.value);
108
+ if (!iconTag)
109
+ return null;
110
+ return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
111
+ {iconTag.icon}
112
+ </g>);
113
+ }
114
+ if (item.type === "text") {
115
+ return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={(Number(defaultFontSize) * 3) / 4}>
116
+ {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
117
+ </text>);
92
118
  }
93
- return (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
94
- <tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotate} ${posX} ${posY})`}>
95
- {symbol.value}
96
- </tspan>
97
- </g>);
98
- };
99
- if (item.type === "icon") {
100
- const iconTag = iconTags === null || iconTags === void 0 ? void 0 : iconTags.find((icon) => icon.key === item.value);
101
- if (!iconTag)
102
- return null;
103
- return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
104
- {iconTag.icon}
105
- </g>);
106
- }
107
- if (item.type === "text") {
108
- return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={(Number(defaultFontSize) * 3) / 4}>
109
- {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
110
- </text>);
111
- }
112
- return null;
119
+ return null;
120
+ });
121
+ return (<g key={`group-${tagIndex}`} pointerEvents="none">
122
+ {elements}
123
+ </g>);
113
124
  });
114
- return <g key={`group-${tagIndex}`} pointerEvents="none">{elements}</g>;
115
- });
125
+ }
116
126
  };
117
127
  let commonProps = {
118
128
  fill,
@@ -238,12 +248,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
238
248
  unhighlightGroup(group);
239
249
  }}>
240
250
  <g transform={`rotate(${rotation}, 0,0)`}>
241
- <rect key={`${id}-rect`} width={width} height={height} fill={fill}
242
- // className="blink-2"
243
- {...omit(item, ["x", "y", "label", "points"])} {...commonProps}/>
244
-
251
+ <rect key={`${id}-rect`} width={width} height={height} fill={fill} rx={radius} {...omit(item, ["x", "y", "label", "points"])} {...commonProps}/>
245
252
  {renderTags(tags)}
246
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
253
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`} pointerEvents="none">
247
254
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
248
255
  var _a, _b, _c, _d, _e, _f, _g;
249
256
  const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
@@ -309,7 +316,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
309
316
  <g transform={`rotate(${-rotation}, 0, 0)`}>
310
317
  <circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
311
318
  {renderTags(tags)}
312
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
319
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
313
320
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
314
321
  var _a, _b, _c, _d, _e, _f, _g;
315
322
  const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
@@ -390,7 +397,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
390
397
  </g>
391
398
 
392
399
  {renderTags(tags)}
393
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
400
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
394
401
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
395
402
  var _a, _b, _c, _d;
396
403
  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={transformRotate}>
@@ -529,7 +536,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
529
536
  {seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill}/>))}
530
537
  </g>
531
538
  {renderTags(tags)}
532
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
539
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
533
540
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
534
541
  var _a, _b, _c, _d, _e, _f, _g;
535
542
  const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
@@ -647,7 +654,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
647
654
  <g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
648
655
  {[...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (<circle key={`${id}-seat-${i}`} id={`seat-${id}`} cx={cx} cy={cy} r={r} fill={seatFill}/>))}
649
656
  </g>
650
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
657
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
651
658
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
652
659
  var _a, _b, _c, _d, _e, _f, _g;
653
660
  const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
@@ -767,7 +774,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
767
774
  {seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill="white"/>))}
768
775
  </g>
769
776
  {renderTags(tags)}
770
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
777
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
771
778
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
772
779
  var _a, _b, _c, _d, _e, _f, _g;
773
780
  const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
@@ -911,7 +918,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
911
918
  {seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (<rect x={x} y={y} key={`${id}-seat-${i}`} id={`seat-${id}`} height={height} width={width} rx={radius / 4} fill={seatFill}/>))}
912
919
  </g>
913
920
  {renderTags(tags)}
914
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
921
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
915
922
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
916
923
  var _a, _b, _c, _d, _e, _f, _g;
917
924
  const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
@@ -972,7 +979,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
972
979
  <g transform={`rotate(${rotation}, 0, 0)`}>
973
980
  <image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
974
981
  {renderTags(tags)}
975
- {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
982
+ {showLabels && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
976
983
  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
977
984
  var _a, _b, _c, _d;
978
985
  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={transformRotate}>
package/dist/features/board-v3/board-slice.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface InitialState {
11
11
  historyChanges: any[];
12
12
  pointer: number;
13
13
  updateBy: "global" | "local";
14
+ isShowTagType: "default" | "type-1" | "type-2";
14
15
  }
15
16
  export declare const addComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/addComponent">, removeComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeComponent">, updateComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/updateComponent">, setBackgroundColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/setBackgroundColor">, removeExtraComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeExtraComponent">;
16
17
  declare const _default: import("redux").Reducer<InitialState>;
package/dist/features/board-v3/board-slice.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { createSlice, current } from "@reduxjs/toolkit";
2
+ import { forEach } from "lodash";
2
3
  const initialState = {
3
4
  components: [],
4
5
  backgroundColor: "#FFFFFF",
@@ -8,12 +9,16 @@ const initialState = {
8
9
  historyChanges: [],
9
10
  pointer: 0,
10
11
  updateBy: "global",
12
+ isShowTagType: "default",
11
13
  };
12
14
  const MAX_HISTORY_CHANGES = 20;
13
15
  const boardSlice = createSlice({
14
16
  name: "board",
15
17
  initialState,
16
18
  reducers: {
19
+ setTagType: (state, action) => {
20
+ state.isShowTagType = action.payload;
21
+ },
17
22
  setUpdateBy: (state, action) => {
18
23
  state.updateBy = action.payload;
19
24
  },
@@ -48,10 +53,6 @@ const boardSlice = createSlice({
48
53
  // components: [...state.components],
49
54
  // extraComponents: [...state.extraComponents],
50
55
  // });
51
- if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
52
- state.historyChanges.shift();
53
- }
54
- state.pointer += 1;
55
56
  if (index !== -1) {
56
57
  // Update component biasa
57
58
  state.components[index] = Object.assign(Object.assign({}, state.components[index]), action.payload);
@@ -60,10 +61,14 @@ const boardSlice = createSlice({
60
61
  // Update extraComponent
61
62
  state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), action.payload);
62
63
  }
63
- // state.historyChanges.push({
64
- // components: [...state.components],
65
- // extraComponents: [...state.extraComponents],
66
- // });
64
+ state.historyChanges.push({
65
+ components: [...state.components],
66
+ extraComponents: [...state.extraComponents],
67
+ });
68
+ if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
69
+ state.historyChanges.shift();
70
+ }
71
+ state.pointer += 1;
67
72
  },
68
73
  updateComponentsBulk: (state, action) => {
69
74
  const updates = action.payload;
@@ -89,25 +94,20 @@ const boardSlice = createSlice({
89
94
  }
90
95
  state.pointer += 1;
91
96
  },
92
- // updateAllComponents: (state, action) => {
93
- // const allComponents = action.payload;
94
- // forEach(allComponents, (component) => {
95
- // const index = state.components.findIndex(
96
- // (c) => c.id === component.id
97
- // );
98
- // if (index !== -1) {
99
- // state.components[index] = {
100
- // ...state.components[index],
101
- // ...component,
102
- // };
103
- // }
104
- // });
105
- // state.historyChanges.push(state.components);
106
- // if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
107
- // state.historyChanges.shift();
108
- // }
109
- // state.pointer += 1
110
- // },
97
+ updateSelectedGroupComponent: (state, action) => {
98
+ const allComponents = action.payload;
99
+ forEach(allComponents, (component) => {
100
+ const index = state.components.findIndex((c) => c.id === component.id);
101
+ if (index !== -1) {
102
+ state.components[index] = Object.assign(Object.assign({}, state.components[index]), component);
103
+ }
104
+ });
105
+ state.historyChanges.push(state.components);
106
+ if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
107
+ state.historyChanges.shift();
108
+ }
109
+ state.pointer += 1;
110
+ },
111
111
  setBackgroundColor: (state, action) => {
112
112
  state.backgroundColor = action.payload;
113
113
  },
package/dist/features/board-v3/index.jsx CHANGED
@@ -8,7 +8,7 @@ import ModalPreview from "../../components/modal-preview";
8
8
  import LayerView from "../view-only-3";
9
9
  import { isEqual, debounce } from "lodash";
10
10
  import { ZoomIn, ZoomOut } from "lucide-react";
11
- import { Button } from "antd";
11
+ import { Button, Radio } from "antd";
12
12
  import { getAttributeElement, getAttributeElements } from "./resize-element";
13
13
  import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
14
14
  const toolElement = ["square", "circle", "table-seat-circle"];
@@ -66,7 +66,7 @@ const BoardTemplate = ({ refs }) => {
66
66
  //polygon
67
67
  const polygonElementRef = useRef([]);
68
68
  const isOnMakePolygonRef = useRef(false);
69
- const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, } = useAppSelector((state) => state.board);
69
+ const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, updateBy, isShowTagType } = useAppSelector((state) => state.board);
70
70
  const { selectionLines } = useAppSelector((state) => state.panel);
71
71
  const [selectedLines, setSelectedLines] = useState(null);
72
72
  useEffect(() => {
@@ -214,19 +214,15 @@ const BoardTemplate = ({ refs }) => {
214
214
  const updateComponentsAttribute = (components) => {
215
215
  if (!components.length)
216
216
  return;
217
- // const isExtra = components?.filter((item) => item?.shape === "polygon");
218
- // if (isExtra) {
219
- // const nextExtra = updateManyComponents(
220
- // extraComponentsState,
221
- // components,
222
- // setExtraComponentsState
223
- // );
224
- // dispatch({ type: "board/setUpdateBy", payload: "local" });
225
- // queueUpdateComponents(nextExtra);
226
- // }
217
+ const nextExtraComponents = updateManyComponents(extraComponentsState, components, setExtraComponentsState);
218
+ if (nextExtraComponents) {
219
+ queueUpdateComponents(nextExtraComponents);
220
+ }
227
221
  const nextComponents = updateManyComponents(componentsState, components, setComponentsState);
222
+ if (nextComponents) {
223
+ queueUpdateComponents(nextComponents);
224
+ }
228
225
  dispatch({ type: "board/setUpdateBy", payload: "local" });
229
- // queueUpdateExtraComponents(nextComponents);
230
226
  };
231
227
  const addComponents = (component) => {
232
228
  const index = extraComponentsState.findIndex((c) => (c === null || c === void 0 ? void 0 : c.shape) === "bounding-box");
@@ -1077,7 +1073,7 @@ const BoardTemplate = ({ refs }) => {
1077
1073
  }
1078
1074
  };
1079
1075
  const pointerHandleUp = (e) => {
1080
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
1076
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
1081
1077
  updateSelectionGuides(svg, {
1082
1078
  x: 0,
1083
1079
  y: 0,
@@ -1352,13 +1348,6 @@ const BoardTemplate = ({ refs }) => {
1352
1348
  });
1353
1349
  const newDataComponent = results.map((r) => r.newDataComponent);
1354
1350
  const dataSelection = results.map((r) => r.newDataSelection);
1355
- // const currentRotation = getRotation(
1356
- // (selectionLines?.children[0] as SVGGraphicsElement)?.transform
1357
- // ?.baseVal
1358
- // );
1359
- // rotationSelectionRef.current = currentRotation;
1360
- const sizeSelection = getSvgElementSize((_q = selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.children[0]) === null || _q === void 0 ? void 0 : _q.children[0]);
1361
- // const newBoxSelection = getGlobalBBox(svg, selectionLines);
1362
1351
  updateComponentsAttribute(newDataComponent);
1363
1352
  const newDataSelection = {
1364
1353
  x: Math.min(...dataSelection.map((d) => d.x)),
@@ -1381,19 +1370,14 @@ const BoardTemplate = ({ refs }) => {
1381
1370
  });
1382
1371
  setSelectedLines(newDataSelection);
1383
1372
  dataElementSelectionGroupRef.current = newDataComponent;
1384
- // // remove ghost element
1385
- // svgRef.current
1386
- // ?.querySelectorAll("#ghost-element-has-selection")
1387
- // .forEach((el) => el.remove());
1388
1373
  hadSelectionRef.current = false;
1389
1374
  }
1390
1375
  //MOVE SELECTION BOX UP
1391
1376
  if (downOutResizePositionAndInSelectionBox &&
1392
1377
  !shiftActive &&
1393
1378
  !isRotateSelectionBox) {
1394
- const selectionLines = (_r = svgRef.current) === null || _r === void 0 ? void 0 : _r.querySelector("#selection-lines");
1395
1379
  isResizeSelectionRef.current = false;
1396
- const results = (_s = dataElementSelectionGroupRef.current) === null || _s === void 0 ? void 0 : _s.map((item) => {
1380
+ const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
1397
1381
  const { g, element, inner } = getAttributeElement(svg, item.id);
1398
1382
  const { x, y } = getTranslate(g);
1399
1383
  const getBBox = getGlobalBBox(svg, g);
@@ -1431,17 +1415,11 @@ const BoardTemplate = ({ refs }) => {
1431
1415
  payload: null,
1432
1416
  });
1433
1417
  setSelectedLines(newDataSelection);
1434
- // if (newDataSelection?.height?.id) {
1435
- // newDataSelection.height = newDataSelection.height.id;
1436
- // }
1437
- // if (newDataSelection?.x) {
1438
- // setSelectedLines(newDataSelection);
1439
- // }
1440
1418
  dataElementSelectionGroupRef.current = newDataComponent;
1441
1419
  hadSelectionRef.current = false;
1442
1420
  }
1443
1421
  //DELETE GHOST ELEMENT BISA MEMBU
1444
- (_t = svgRef.current) === null || _t === void 0 ? void 0 : _t.querySelectorAll("#ghost-element").forEach((el) => el.remove());
1422
+ (_r = svgRef.current) === null || _r === void 0 ? void 0 : _r.querySelectorAll("#ghost-element").forEach((el) => el.remove());
1445
1423
  //UPDATE DATASET TO STATE IF MOVEk
1446
1424
  // if (releaseGroupRef.current) return;
1447
1425
  if ((isMightMove &&
@@ -1500,9 +1478,37 @@ const BoardTemplate = ({ refs }) => {
1500
1478
  //lin helper from start to move
1501
1479
  }
1502
1480
  };
1481
+ const handleCheckPreview = (e) => {
1482
+ const type = e.target.value;
1483
+ if (type === "type-1") {
1484
+ dispatch({
1485
+ type: "board/setTagType",
1486
+ payload: type,
1487
+ });
1488
+ }
1489
+ if (type === "type-2") {
1490
+ dispatch({
1491
+ type: "board/setTagType",
1492
+ payload: type,
1493
+ });
1494
+ }
1495
+ if (type === "default") {
1496
+ dispatch({
1497
+ type: "board/setTagType",
1498
+ payload: type,
1499
+ });
1500
+ }
1501
+ };
1503
1502
  return (<>
1504
1503
  <ModalPreview>
1505
1504
  <LayerView statusKey="status"/>
1505
+ <div className="flex gap-2 mt-2">
1506
+ <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
1507
+ <Radio value="default">Default</Radio>
1508
+ <Radio value="type-1">Type 1</Radio>
1509
+ <Radio value="type-2">Type 2</Radio>
1510
+ </Radio.Group>
1511
+ </div>
1506
1512
  </ModalPreview>
1507
1513
  <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
1508
1514
  <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
package/dist/features/panel/index.jsx CHANGED
@@ -43,7 +43,6 @@ const ControlPanels = (props) => {
43
43
  let values = Form.useWatch([], form);
44
44
  useEffect(() => {
45
45
  if (selectedComponent) {
46
- console.log("selectedComponent", selectedComponent);
47
46
  const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
48
47
  const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
49
48
  (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
@@ -56,7 +55,6 @@ const ControlPanels = (props) => {
56
55
  form.setFieldsValue(selectedComponent);
57
56
  }
58
57
  else if (selectedGroup) {
59
- console.log("selectedGroup", selectedGroup);
60
58
  if (show)
61
59
  setOpen(true);
62
60
  if (!show)
@@ -67,32 +65,24 @@ const ControlPanels = (props) => {
67
65
  const firstValue = arr[0][key];
68
66
  return arr.every((item) => item[key] === firstValue);
69
67
  }
70
- const isSameAllWidth = isSameAllByKey(selectedGroup, "width");
71
- const isSameAllHeight = isSameAllByKey(selectedGroup, "height");
72
- const isSameX = isSameAllByKey(selectedGroup, "x");
73
- const isSameY = isSameAllByKey(selectedGroup, "y");
74
- const isSameFill = isSameAllByKey(selectedGroup, "fill");
75
- const isSameStroke = isSameAllByKey(selectedGroup, "stroke");
76
- const isSameOpacity = isSameAllByKey(selectedGroup, "opacity");
77
- const isSampeRotation = isSameAllByKey(selectedGroup, "rotation");
78
- const isSameStrokeWidth = isSameAllByKey(selectedGroup, "strokeWidth");
79
- console.log({
80
- isSameAllWidth,
81
- isSameAllHeight,
82
- isSameX,
83
- isSameY,
84
- isSameFill,
85
- isSameStroke,
86
- isSameOpacity,
87
- isSampeRotation,
88
- isSameStrokeWidth,
68
+ function getValueIfSame(arr, key) {
69
+ return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
70
+ }
71
+ form.setFieldsValue({
72
+ width: getValueIfSame(selectedGroup, "width"),
73
+ height: getValueIfSame(selectedGroup, "height"),
74
+ x: getValueIfSame(selectedGroup, "x"),
75
+ y: getValueIfSame(selectedGroup, "y"),
76
+ fill: getValueIfSame(selectedGroup, "fill"),
77
+ stroke: getValueIfSame(selectedGroup, "stroke"),
78
+ opacity: getValueIfSame(selectedGroup, "opacity"),
79
+ rotation: getValueIfSame(selectedGroup, "rotation"),
80
+ strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
81
+ radius: getValueIfSame(selectedGroup, "radius"),
89
82
  });
90
- form.setFieldsValue(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isSameAllWidth ? { width: selectedGroup[0].width } : undefined)), (isSameAllHeight ? { height: selectedGroup[0].height } : undefined)), (isSameX ? { x: selectedGroup[0].x } : undefined)), (isSameY ? { y: selectedGroup[0].y } : undefined)), (isSameFill ? { fill: selectedGroup[0].fill } : undefined)), (isSameStroke ? { stroke: selectedGroup[0].stroke } : undefined)), (isSameOpacity ? { opacity: selectedGroup[0].opacity } : undefined)), (isSampeRotation ? { rotation: selectedGroup[0].rotation } : undefined)), (isSameStrokeWidth
91
- ? { strokeWidth: selectedGroup[0].strokeWidth }
92
- : {})));
83
+ const values = form.getFieldsValue();
93
84
  }
94
85
  else {
95
- console.log("selectedGroup", selectedGroup);
96
86
  setOpen(false);
97
87
  }
98
88
  }, [selectedComponent, selectedGroup, show]);
@@ -140,7 +130,11 @@ const ControlPanels = (props) => {
140
130
  }, 300));
141
131
  const debounceSyncDataSelectedGroup = useRef(debounce((data) => {
142
132
  dispatch({
143
- type: "board/updateAllComponents",
133
+ type: "panel/updateSelectedGroup",
134
+ payload: data,
135
+ });
136
+ dispatch({
137
+ type: "board/updateComponentsBulk",
144
138
  payload: data,
145
139
  });
146
140
  dispatch({ type: "board/setFlagChange", payload: true });
@@ -178,8 +172,8 @@ const ControlPanels = (props) => {
178
172
  debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
179
173
  }
180
174
  if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
181
- const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, } = newValues;
182
- const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {}))));
175
+ const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, } = newValues;
176
+ const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {}))));
183
177
  let minX = Infinity;
184
178
  let minY = Infinity;
185
179
  let maxX = -Infinity;
@@ -216,7 +210,7 @@ const ControlPanels = (props) => {
216
210
  const renderFormPanel = () => {
217
211
  switch (tool.active) {
218
212
  case "select":
219
- return (<SelectToolForm action={action} tranform={transform}/>);
213
+ return <SelectToolForm action={action} tranform={transform}/>;
220
214
  case "square":
221
215
  case "circle":
222
216
  return <SquareToolForm />;
package/dist/features/panel/panel-slice.js CHANGED
@@ -31,11 +31,7 @@ export const panelSlice = createSlice({
31
31
  state.selectedGroup = action.payload;
32
32
  },
33
33
  updateSelectedGroup: (state, action) => {
34
- state.selectedGroup = Object.assign({}, action.payload);
35
- state.history.push(state.selectedGroup);
36
- if (state.history.length > 20) {
37
- state.history.shift();
38
- }
34
+ state.selectedGroup = action.payload;
39
35
  },
40
36
  setSelectionLines: (state, action) => {
41
37
  state.selectionLines = action.payload;
package/dist/features/panel/selected-group.jsx CHANGED
@@ -12,6 +12,9 @@ const SelectedGroup = () => {
12
12
  <Form.Item label="Height" name="height" className="w-full">
13
13
  <InputNumber suffix="px"/>
14
14
  </Form.Item>
15
+ <Form.Item label="Radius" name={"radius"} className="w-full">
16
+ <InputNumber step={1} max={1} min={0}/>
17
+ </Form.Item>
15
18
  </Flex>
16
19
  <Flex gap={2}>
17
20
  <Form.Item label="Position X" name="x" className="w-full">
@@ -39,6 +42,7 @@ const SelectedGroup = () => {
39
42
  <Form.Item label="opacity" name={"opacity"} className="w-full">
40
43
  <InputNumber step={0.1} max={1} min={0}/>
41
44
  </Form.Item>
45
+
42
46
  </Flex>
43
47
  </div>
44
48
  </div>
package/dist/features/view-only-3/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export type TableGhost = {
9
9
  export type TableMatchKey = {
10
10
  key: string | number;
11
11
  properties: PropertiesProps;
12
+ className?: string;
12
13
  };
13
14
  export type TableMatchEvent = {
14
15
  event: EventHandleType;
@@ -76,6 +77,7 @@ export interface LayerViewProps<TMeta = undefined> {
76
77
  paddingRight?: number;
77
78
  paddingBottom?: number;
78
79
  };
80
+ disabled?: boolean;
79
81
  }
80
82
  declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
81
83
  export default LayerView;
package/dist/features/view-only-3/index.jsx CHANGED
@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
5
5
  import Layers from "../../components/layer-v4";
6
6
  import { getTranslate } from "../board-v3/utils";
7
7
  const LayerView = (props) => {
8
- const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, } = props;
8
+ const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled } = props;
9
9
  const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
10
10
  const tableGhost = useRef(null);
11
11
  const hoverUnderghostId = useRef(null);
@@ -186,10 +186,10 @@ const LayerView = (props) => {
186
186
  // height: maxY + paddingY + (maxY + paddingY) * 0.5,
187
187
  // };
188
188
  return {
189
- minX: minX - ((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop),
190
- minY: minY - ((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingLeft),
191
- width: maxX + ((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingRight),
192
- height: maxY + ((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingBottom),
189
+ minX: minX - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
190
+ minY: minY - (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingLeft) || 0),
191
+ width: maxX + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingRight) || 0),
192
+ height: maxY + (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingBottom) || 0),
193
193
  };
194
194
  }, [componentsEditor, extraComponentsEditor]);
195
195
  const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -200,7 +200,7 @@ const LayerView = (props) => {
200
200
  let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
201
201
  if (tableMatchKey) {
202
202
  const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
203
- finalProps = Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties);
203
+ finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className });
204
204
  }
205
205
  return finalProps;
206
206
  });
@@ -514,6 +514,8 @@ const LayerView = (props) => {
514
514
  return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
515
515
  overflow: "auto",
516
516
  WebkitOverflowScrolling: "touch",
517
+ filter: disabled ? "grayscale(100%)" : "none",
518
+ pointerEvents: disabled ? "none" : "auto",
517
519
  }} {...props.containerProps}>
518
520
  {/* {isDragging?.current && (
519
521
  <div className="absolute bottom-1/2 left-1 flex gap-4 z-[10]">
@@ -533,18 +535,20 @@ const LayerView = (props) => {
533
535
  width: "100%",
534
536
  height: "100%",
535
537
  // overflow: "visible",
538
+ pointerEvents: disabled ? "none" : "auto",
536
539
  }} contentStyle={{
537
540
  width: "100%",
538
541
  height: "100%",
542
+ pointerEvents: disabled ? "none" : "auto",
539
543
  }}>
540
544
  <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%"
541
545
  // scale={5}
542
546
  overflow="hidden" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
543
547
  background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
544
548
  display: "block",
545
- pointerEvents: "all",
549
+ pointerEvents: disabled ? "none" : "all",
546
550
  touchAction: "none",
547
- userSelect: "none",
551
+ userSelect: "none"
548
552
  }} {...props.svgProps}>
549
553
  {hasBoundingBox && (<defs>
550
554
  <clipPath id="contentCrop">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.2.8",
3
+ "version": "3.2.10",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",