seat-editor 3.6.7 → 3.6.8
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/dist/app/graph-view-new/page.js +100 -12
- package/dist/app/graph-view-new/page.jsx +105 -19
- package/dist/app/graph-view-new/test.d.ts +0 -0
- package/dist/app/graph-view-new/test.js +0 -0
- package/dist/app/graph-view-new/test.jsx +0 -0
- package/dist/components/layer-v5/icons.d.ts +1 -0
- package/dist/components/layer-v5/icons.js +2 -0
- package/dist/components/layer-v5/icons.jsx +3 -0
- package/dist/components/layer-v5/index.d.ts +4 -1
- package/dist/components/layer-v5/index.js +203 -228
- package/dist/components/layer-v5/index.jsx +234 -272
- package/dist/features/view-only-5/connect-handle.d.ts +7 -0
- package/dist/features/view-only-5/connect-handle.js +10 -7
- package/dist/features/view-only-5/connect-handle.jsx +11 -7
- package/dist/features/view-only-5/connection-layer.d.ts +0 -1
- package/dist/features/view-only-5/connection-layer.js +7 -5
- package/dist/features/view-only-5/connection-layer.jsx +7 -5
- package/dist/features/view-only-5/index.d.ts +13 -4
- package/dist/features/view-only-5/index.js +168 -123
- package/dist/features/view-only-5/index.jsx +169 -124
- package/dist/features/view-only-5/use-connection-graph.js +1 -1
- package/dist/features/view-only-5/utils.d.ts +7 -1
- package/dist/features/view-only-5/utils.js +15 -7
- package/package.json +1 -1
|
@@ -1,164 +1,193 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { isEmpty, omit } from "lodash";
|
|
3
|
-
import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
|
|
4
|
-
import {
|
|
5
|
-
import { useAppSelector } from "../../hooks/use-redux";
|
|
6
|
-
import { RsvpIcons } from "../../features/board-v3/icons";
|
|
3
|
+
import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
|
|
4
|
+
// import { RsvpIcons } from "../../features/board-v3/icons";
|
|
7
5
|
import { getBoundingBoxFromPoints } from "../layer-v3/utils";
|
|
6
|
+
import { LabelItem } from "../layer-v3";
|
|
7
|
+
import { TrashIcon } from "lucide-react";
|
|
8
|
+
import React from "react";
|
|
8
9
|
const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
"late",
|
|
12
|
-
"overtime",
|
|
13
|
-
"overlapping",
|
|
14
|
-
"hold",
|
|
15
|
-
"reserved",
|
|
16
|
-
"armchair",
|
|
17
|
-
"cheque",
|
|
18
|
-
"people",
|
|
19
|
-
];
|
|
20
|
-
const dummyIconTags = iconNames === null || iconNames === void 0 ? void 0 : iconNames.map((item) => {
|
|
21
|
-
const Icon = RsvpIcons === null || RsvpIcons === void 0 ? void 0 : RsvpIcons[item];
|
|
22
|
-
return {
|
|
23
|
-
key: item,
|
|
24
|
-
icon: <Icon />,
|
|
25
|
-
};
|
|
26
|
-
});
|
|
27
|
-
const getIconFromId = (data) => {
|
|
28
|
-
const id = String(data);
|
|
29
|
-
let hash = 0;
|
|
30
|
-
for (let i = 0; i < id.length; i++) {
|
|
31
|
-
hash += id.charCodeAt(i);
|
|
32
|
-
}
|
|
33
|
-
return iconNames[hash % iconNames.length];
|
|
34
|
-
};
|
|
35
|
-
const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
|
|
36
|
-
const { isShowTagType } = useAppSelector((state) => state.board);
|
|
37
|
-
const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
|
|
10
|
+
const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, selectionLines, }) => {
|
|
11
|
+
// const { isShowTagType } = useAppSelector((state) => state.board);
|
|
38
12
|
const renderShape = (item) => {
|
|
39
|
-
var _a, _b, _c, _d, _e, _f
|
|
40
|
-
const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags,
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
13
|
+
var _a, _b, _c, _d, _e, _f;
|
|
14
|
+
const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, points, seatPositions, radius, element, } = item;
|
|
15
|
+
const showLabels = !element;
|
|
16
|
+
// const fontSizeFromLabel = labels?.[0]?.fontSize;
|
|
17
|
+
// const renderTags = (data) => {
|
|
18
|
+
// const tags =
|
|
19
|
+
// data ?? tagsDummy(labels?.[0]?.label || "Table", getIconFromId(id));
|
|
20
|
+
// const privileged = !isEmpty(privilegedTags)
|
|
21
|
+
// ? privilegedTags
|
|
22
|
+
// : isShowTagType === "type-1"
|
|
23
|
+
// ? PRIVILEGED_TAGS["CURRENT_TIME"]
|
|
24
|
+
// : isShowTagType === "type-2"
|
|
25
|
+
// ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
|
|
26
|
+
// : undefined;
|
|
27
|
+
// if (tags && tags?.length > 0) {
|
|
28
|
+
// const scaleDefault = Number(fontSize || fontSizeFromLabel || 12) / 12;
|
|
29
|
+
// const gapBetweenTags = Number(gapTags || 20) * scaleDefault;
|
|
30
|
+
// const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
|
|
31
|
+
// // Hitung total tinggi semua grup tag (buat center vertikal)
|
|
32
|
+
// const totalTagHeight =
|
|
33
|
+
// tags
|
|
34
|
+
// ?.filter((tag) => privileged?.find((p) => p.key === tag.key))
|
|
35
|
+
// .reduce((sum, tag) => {
|
|
36
|
+
// const items = tag.items || [];
|
|
37
|
+
// const isColumn = tag.direction?.includes("column");
|
|
38
|
+
// const tagHeight = isColumn
|
|
39
|
+
// ? items.length * defaultFontSize + 2 * (Number(tag.gap) || 2)
|
|
40
|
+
// : defaultFontSize; // horizontal = 1 line
|
|
41
|
+
// return sum + tagHeight + gapBetweenTags;
|
|
42
|
+
// }, 0) - gapBetweenTags;
|
|
43
|
+
// const startY = Number(height) / 4 - totalTagHeight / 3; // titik awal supaya semua di tengah
|
|
44
|
+
// let currentY = startY;
|
|
45
|
+
// return tags
|
|
46
|
+
// .filter((tag) => privileged?.find((p) => p.key === tag.key))
|
|
47
|
+
// .map((tag: Tag, tagIndex: number) => {
|
|
48
|
+
// const itemsPriv = privileged[tagIndex].items;
|
|
49
|
+
// const direction = tag.direction?.includes("column")
|
|
50
|
+
// ? "column"
|
|
51
|
+
// : "flex";
|
|
52
|
+
// const gap = Number(tag.gap || 2) * scaleDefault;
|
|
53
|
+
// const items = tag.items || [];
|
|
54
|
+
// const fontSize = Number(defaultFontSize);
|
|
55
|
+
// const isColumn = direction === "column";
|
|
56
|
+
// const groupHeight = isColumn
|
|
57
|
+
// ? items.length * fontSize + 2 * gap
|
|
58
|
+
// : fontSize;
|
|
59
|
+
// const centerX = width / 2;
|
|
60
|
+
// const centerY = currentY + groupHeight;
|
|
61
|
+
// // naikkan posisi Y untuk grup berikutnya
|
|
62
|
+
// currentY += groupHeight + gapBetweenTags;
|
|
63
|
+
// const elements = items
|
|
64
|
+
// .filter((item) => itemsPriv.includes(item.type))
|
|
65
|
+
// .map((item: Item, i: number) => {
|
|
66
|
+
// const offsetY = isColumn
|
|
67
|
+
// ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
|
|
68
|
+
// : 0;
|
|
69
|
+
// const offsetX = !isColumn
|
|
70
|
+
// ? i * (fontSize + gap) - (1 * (fontSize + gap)) / 2
|
|
71
|
+
// : 0;
|
|
72
|
+
// const posX = centerX + offsetX + Number(tag.offsetX ?? 0);
|
|
73
|
+
// const posY = centerY + offsetY + Number(tag.offsetY ?? 0);
|
|
74
|
+
// const renderSymbol = (symbol) => {
|
|
75
|
+
// if (!symbol) return null;
|
|
76
|
+
// const {
|
|
77
|
+
// position = "right",
|
|
78
|
+
// size = item?.fontSize || Number(fontSize),
|
|
79
|
+
// gap: symbolGap = 0,
|
|
80
|
+
// } = symbol;
|
|
81
|
+
// const sizeFont = item?.fontSize || Number(fontSize) / 3;
|
|
82
|
+
// let offsetSymbolX = 0;
|
|
83
|
+
// let offsetSymbolY = 0;
|
|
84
|
+
// switch (position) {
|
|
85
|
+
// case "right":
|
|
86
|
+
// offsetSymbolX = size + symbolGap;
|
|
87
|
+
// break;
|
|
88
|
+
// case "left":
|
|
89
|
+
// offsetSymbolX = -(size + symbolGap);
|
|
90
|
+
// break;
|
|
91
|
+
// case "top":
|
|
92
|
+
// offsetSymbolY = -(size + symbolGap);
|
|
93
|
+
// break;
|
|
94
|
+
// case "bottom":
|
|
95
|
+
// offsetSymbolY = size + symbolGap;
|
|
96
|
+
// break;
|
|
97
|
+
// case "right-top":
|
|
98
|
+
// offsetSymbolX = size + symbolGap;
|
|
99
|
+
// offsetSymbolY = -(size / 4);
|
|
100
|
+
// break;
|
|
101
|
+
// case "right-bottom":
|
|
102
|
+
// offsetSymbolX = size + symbolGap;
|
|
103
|
+
// offsetSymbolY = size / 4;
|
|
104
|
+
// break;
|
|
105
|
+
// case "left-top":
|
|
106
|
+
// offsetSymbolX = -size - symbolGap;
|
|
107
|
+
// offsetSymbolY = -(size / 4);
|
|
108
|
+
// break;
|
|
109
|
+
// case "left-bottom":
|
|
110
|
+
// offsetSymbolX = -size - symbolGap;
|
|
111
|
+
// offsetSymbolY = size / 4;
|
|
112
|
+
// break;
|
|
113
|
+
// }
|
|
114
|
+
// return (
|
|
115
|
+
// <tspan
|
|
116
|
+
// {...symbol}
|
|
117
|
+
// key={`symbol-${tagIndex}-${i}`}
|
|
118
|
+
// x={posX + offsetSymbolX}
|
|
119
|
+
// y={posY + offsetSymbolY}
|
|
120
|
+
// textAnchor="middle"
|
|
121
|
+
// dominantBaseline="middle"
|
|
122
|
+
// fontSize={`${sizeFont}px`}
|
|
123
|
+
// >
|
|
124
|
+
// {symbol.value}
|
|
125
|
+
// </tspan>
|
|
126
|
+
// );
|
|
127
|
+
// };
|
|
128
|
+
// if (item.type === "icon") {
|
|
129
|
+
// const icons = iconTags ?? dummyIconTags;
|
|
130
|
+
// const iconTag = icons?.find(
|
|
131
|
+
// (icon) => icon.key === item.value
|
|
132
|
+
// );
|
|
133
|
+
// if (!iconTag) return null;
|
|
134
|
+
// const scale = defaultFontSize / 12;
|
|
135
|
+
// return (
|
|
136
|
+
// <g
|
|
137
|
+
// {...item}
|
|
138
|
+
// key={`icon-${tagIndex}-${i}`}
|
|
139
|
+
// transform={`translate(${posX - defaultFontSize}, ${
|
|
140
|
+
// posY - defaultFontSize / 2
|
|
141
|
+
// }) scale(${scale})`}
|
|
142
|
+
// >
|
|
143
|
+
// {iconTag.icon}
|
|
144
|
+
// </g>
|
|
145
|
+
// );
|
|
146
|
+
// }
|
|
147
|
+
// if (item.type === "text") {
|
|
148
|
+
// return (
|
|
149
|
+
// <text
|
|
150
|
+
// {...item}
|
|
151
|
+
// key={`text-${tagIndex}-${i}`}
|
|
152
|
+
// x={posX}
|
|
153
|
+
// y={posY}
|
|
154
|
+
// textAnchor="middle"
|
|
155
|
+
// dominantBaseline="middle"
|
|
156
|
+
// fontSize={defaultFontSize}
|
|
157
|
+
// >
|
|
158
|
+
// {item.value} {renderSymbol(item?.symbol)}
|
|
159
|
+
// </text>
|
|
160
|
+
// );
|
|
161
|
+
// }
|
|
162
|
+
// return null;
|
|
163
|
+
// });
|
|
164
|
+
// return (
|
|
165
|
+
// <g key={`group-${tagIndex}`} pointerEvents="none">
|
|
166
|
+
// {elements}
|
|
167
|
+
// </g>
|
|
168
|
+
// );
|
|
169
|
+
// });
|
|
170
|
+
// }
|
|
171
|
+
// };
|
|
172
|
+
const renderIcon = () => {
|
|
173
|
+
var _a, _b;
|
|
174
|
+
const icon = element === null || element === void 0 ? void 0 : element.icon;
|
|
175
|
+
const offsetX = Number((_a = element === null || element === void 0 ? void 0 : element.offsetX) !== null && _a !== void 0 ? _a : 0);
|
|
176
|
+
const offsetY = Number((_b = element === null || element === void 0 ? void 0 : element.offsetY) !== null && _b !== void 0 ? _b : 0);
|
|
177
|
+
const defaultFontSize = Number(fontSize || 12);
|
|
178
|
+
const posX = width / 2 + (offsetX !== null && offsetX !== void 0 ? offsetX : defaultFontSize);
|
|
179
|
+
const posY = height / 2 + (offsetY !== null && offsetY !== void 0 ? offsetY : defaultFontSize);
|
|
180
|
+
const centerLabelX = width / 2;
|
|
181
|
+
const centetLabelY = height / 2;
|
|
182
|
+
const newLabelProps = Object.assign(Object.assign({}, labelProps), { height: centetLabelY - defaultFontSize });
|
|
183
|
+
return (<>
|
|
184
|
+
<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${centerLabelX}, ${centetLabelY})`}>
|
|
185
|
+
<LabelItem {...newLabelProps}/>
|
|
186
|
+
</g>
|
|
187
|
+
<g transform={`rotate(${-rotation}, ${centerLabelX}, ${centetLabelY}) translate(${posX - defaultFontSize}, ${posY}) scale(${defaultFontSize / 12})`}>
|
|
188
|
+
{icon ? icon : <TrashIcon />}
|
|
189
|
+
</g>
|
|
190
|
+
</>);
|
|
162
191
|
};
|
|
163
192
|
let commonProps = {
|
|
164
193
|
fill,
|
|
@@ -244,6 +273,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
244
273
|
delete group.dataset.dragEnterCount;
|
|
245
274
|
};
|
|
246
275
|
const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
|
|
276
|
+
const labelProps = {
|
|
277
|
+
labels,
|
|
278
|
+
id,
|
|
279
|
+
width,
|
|
280
|
+
height,
|
|
281
|
+
commonProps,
|
|
282
|
+
rotation,
|
|
283
|
+
};
|
|
247
284
|
switch (shape) {
|
|
248
285
|
case "square":
|
|
249
286
|
return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`} style={{ pointerEvents: "all" }} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
|
|
@@ -297,21 +334,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
297
334
|
"tags",
|
|
298
335
|
"seatCount",
|
|
299
336
|
])} {...commonProps}/>
|
|
300
|
-
{
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
304
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
305
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
306
|
-
return (<text pointerEvents="none" {...omit(commonProps, [
|
|
307
|
-
"opacity",
|
|
308
|
-
"stroke",
|
|
309
|
-
"strokeWidth",
|
|
310
|
-
])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
|
|
311
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
312
|
-
</text>);
|
|
313
|
-
})}
|
|
314
|
-
</g>)}
|
|
337
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
338
|
+
<LabelItem {...labelProps}/>
|
|
339
|
+
</g>) : (renderIcon())}
|
|
315
340
|
</g>
|
|
316
341
|
</g>);
|
|
317
342
|
case "polygon":
|
|
@@ -389,26 +414,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
389
414
|
"tags",
|
|
390
415
|
"seatCount",
|
|
391
416
|
])}/>
|
|
392
|
-
{
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
396
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
397
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
398
|
-
return (<text {...omit(commonProps, [
|
|
399
|
-
"opacity",
|
|
400
|
-
"stroke",
|
|
401
|
-
"strokeWidth",
|
|
402
|
-
])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
|
|
403
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
404
|
-
</text>);
|
|
405
|
-
})}
|
|
406
|
-
</g>)}
|
|
417
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
418
|
+
<LabelItem {...labelProps}/>
|
|
419
|
+
</g>) : (renderIcon())}
|
|
407
420
|
</g>
|
|
408
421
|
</g>);
|
|
409
422
|
case "table-seat-circle": {
|
|
410
423
|
const seatCount = item.seatCount;
|
|
411
|
-
const openSpace = (
|
|
424
|
+
const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
|
|
412
425
|
// LOCAL SPACE (tanpa x,y)
|
|
413
426
|
const centerX = width / 2;
|
|
414
427
|
const centerY = height / 2;
|
|
@@ -477,15 +490,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
477
490
|
{seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
478
491
|
</g>
|
|
479
492
|
|
|
480
|
-
{
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
var _a, _b, _c, _d;
|
|
484
|
-
return (<text key={`${id}-label-${index}`} x={width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} 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}>
|
|
485
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
486
|
-
</text>);
|
|
487
|
-
})}
|
|
488
|
-
</g>)}
|
|
493
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
494
|
+
<LabelItem {...labelProps}/>
|
|
495
|
+
</g>) : (renderIcon())}
|
|
489
496
|
</g>
|
|
490
497
|
</g>);
|
|
491
498
|
}
|
|
@@ -623,21 +630,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
623
630
|
<g key={`${id}-seats`} data-seat={`${id}-seats`}>
|
|
624
631
|
{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} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
625
632
|
</g>
|
|
626
|
-
{
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
630
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
631
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
632
|
-
return (<text {...omit(commonProps, [
|
|
633
|
-
"opacity",
|
|
634
|
-
"stroke",
|
|
635
|
-
"strokeWidth",
|
|
636
|
-
])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
|
|
637
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
638
|
-
</text>);
|
|
639
|
-
})}
|
|
640
|
-
</g>)}
|
|
633
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
634
|
+
<LabelItem {...labelProps}/>
|
|
635
|
+
</g>) : (renderIcon())}
|
|
641
636
|
</g>
|
|
642
637
|
</g>);
|
|
643
638
|
}
|
|
@@ -645,10 +640,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
645
640
|
const openSpace = item.openSpace || 0; // from 0 to 0.9
|
|
646
641
|
const r = 10;
|
|
647
642
|
const seatPositions = item.seatPositions;
|
|
648
|
-
const topCount = (
|
|
649
|
-
const bottomCount = (
|
|
650
|
-
const leftCount = (
|
|
651
|
-
const rightCount = (
|
|
643
|
+
const topCount = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
|
|
644
|
+
const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
|
|
645
|
+
const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
|
|
646
|
+
const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
|
|
652
647
|
// split seats evenly on top and bottom
|
|
653
648
|
const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
|
|
654
649
|
const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
|
|
@@ -743,26 +738,15 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
743
738
|
"tags",
|
|
744
739
|
"seatCount",
|
|
745
740
|
])}/>
|
|
746
|
-
{renderTags(tags)}
|
|
741
|
+
{/* {renderTags(tags)} */}
|
|
747
742
|
|
|
748
743
|
{/* Seats */}
|
|
749
744
|
<g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
|
|
750
745
|
{[...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} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
751
746
|
</g>
|
|
752
|
-
{showLabels
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
756
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
757
|
-
return (<text {...omit(commonProps, [
|
|
758
|
-
"opacity",
|
|
759
|
-
"stroke",
|
|
760
|
-
"strokeWidth",
|
|
761
|
-
])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
|
|
762
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
763
|
-
</text>);
|
|
764
|
-
})}
|
|
765
|
-
</g>)}
|
|
747
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
748
|
+
<LabelItem {...labelProps}/>
|
|
749
|
+
</g>) : (renderIcon())}
|
|
766
750
|
</g>
|
|
767
751
|
</g>);
|
|
768
752
|
}
|
|
@@ -812,12 +796,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
812
796
|
radius: seatRadius,
|
|
813
797
|
spacing: spacingHeight,
|
|
814
798
|
}).map((cy) => ({ cx: width - seatRadius * 0.1, cy, id: "right" }));
|
|
815
|
-
const seats = (
|
|
799
|
+
const seats = (_f = [
|
|
816
800
|
...topSeats,
|
|
817
801
|
...bottomSeats,
|
|
818
802
|
...leftSeats,
|
|
819
803
|
...rightSeats,
|
|
820
|
-
]) === null ||
|
|
804
|
+
]) === null || _f === void 0 ? void 0 : _f.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
|
|
821
805
|
cx: seat.cx,
|
|
822
806
|
cy: seat.cy,
|
|
823
807
|
r: seatRadius,
|
|
@@ -875,21 +859,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
875
859
|
<g key={`${id}-seats`} data-seat={`${id}-seats`}>
|
|
876
860
|
{seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill={seatFill} className={item === null || item === void 0 ? void 0 : item.className}/>))}
|
|
877
861
|
</g>
|
|
878
|
-
{
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
882
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
883
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
884
|
-
return (<text {...omit(commonProps, [
|
|
885
|
-
"opacity",
|
|
886
|
-
"stroke",
|
|
887
|
-
"strokeWidth",
|
|
888
|
-
])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
|
|
889
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
890
|
-
</text>);
|
|
891
|
-
})}
|
|
892
|
-
</g>)}
|
|
862
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
863
|
+
<LabelItem {...labelProps}/>
|
|
864
|
+
</g>) : (renderIcon())}
|
|
893
865
|
</g>
|
|
894
866
|
</g>);
|
|
895
867
|
}
|
|
@@ -1026,21 +998,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
1026
998
|
<g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
|
|
1027
999
|
{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}/>))}
|
|
1028
1000
|
</g>
|
|
1029
|
-
{
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
1033
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
1034
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
1035
|
-
return (<text {...omit(commonProps, [
|
|
1036
|
-
"opacity",
|
|
1037
|
-
"stroke",
|
|
1038
|
-
"strokeWidth",
|
|
1039
|
-
])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
|
|
1040
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
1041
|
-
</text>);
|
|
1042
|
-
})}
|
|
1043
|
-
</g>)}
|
|
1001
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
1002
|
+
<LabelItem {...labelProps}/>
|
|
1003
|
+
</g>) : (renderIcon())}
|
|
1044
1004
|
</g>
|
|
1045
1005
|
</g>);
|
|
1046
1006
|
}
|
|
@@ -1087,15 +1047,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
1087
1047
|
}}>
|
|
1088
1048
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
1089
1049
|
<image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
|
|
1090
|
-
{
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
var _a, _b, _c, _d;
|
|
1094
|
-
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}>
|
|
1095
|
-
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
1096
|
-
</text>);
|
|
1097
|
-
})}
|
|
1098
|
-
</g>)}
|
|
1050
|
+
{showLabels ? (<g data-text={`${id}-text`} transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
1051
|
+
<LabelItem {...labelProps}/>
|
|
1052
|
+
</g>) : (renderIcon())}
|
|
1099
1053
|
</g>
|
|
1100
1054
|
</g>);
|
|
1101
1055
|
case "background":
|
|
@@ -1113,6 +1067,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
1113
1067
|
}
|
|
1114
1068
|
};
|
|
1115
1069
|
let date = new Date();
|
|
1116
|
-
|
|
1070
|
+
const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
|
|
1071
|
+
return (<g key={`${date}`}>
|
|
1072
|
+
{components === null || components === void 0 ? void 0 : components.map(renderShape)}
|
|
1073
|
+
{!isEmpty(selectionLines) && (<g key={`selection-${Date.now()}`} id="selection-lines" transform={`translate(${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.x) - 5},${(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.y) - 5})`}>
|
|
1074
|
+
<g transform={`rotate(${0}, 0,0)`}>
|
|
1075
|
+
<rect width={selectionLines.width + 10} height={selectionLines.height + 10} fill="none" stroke="#4a90e2" strokeWidth={1} strokeDasharray={"4 2"} id="rect-box-selection"/>
|
|
1076
|
+
</g>
|
|
1077
|
+
</g>)}
|
|
1078
|
+
</g>);
|
|
1117
1079
|
};
|
|
1118
1080
|
export default Layers;
|