seat-editor 3.6.7 → 3.6.9
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 +101 -13
- package/dist/app/graph-view-new/page.jsx +106 -20
- 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,161 +1,187 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { isEmpty, omit } from "lodash";
|
|
5
|
-
import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
|
|
6
|
-
import {
|
|
7
|
-
import { useAppSelector } from "../../hooks/use-redux";
|
|
8
|
-
import { RsvpIcons } from "../../features/board-v3/icons";
|
|
5
|
+
import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../layer-v3/utils";
|
|
6
|
+
// import { RsvpIcons } from "../../features/board-v3/icons";
|
|
9
7
|
import { getBoundingBoxFromPoints } from "../layer-v3/utils";
|
|
8
|
+
import { LabelItem } from "../layer-v3";
|
|
9
|
+
import { TrashIcon } from "lucide-react";
|
|
10
10
|
const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
"late",
|
|
14
|
-
"overtime",
|
|
15
|
-
"overlapping",
|
|
16
|
-
"hold",
|
|
17
|
-
"reserved",
|
|
18
|
-
"armchair",
|
|
19
|
-
"cheque",
|
|
20
|
-
"people",
|
|
21
|
-
];
|
|
22
|
-
const dummyIconTags = iconNames === null || iconNames === void 0 ? void 0 : iconNames.map((item) => {
|
|
23
|
-
const Icon = RsvpIcons === null || RsvpIcons === void 0 ? void 0 : RsvpIcons[item];
|
|
24
|
-
return {
|
|
25
|
-
key: item,
|
|
26
|
-
icon: _jsx(Icon, {}),
|
|
27
|
-
};
|
|
28
|
-
});
|
|
29
|
-
const getIconFromId = (data) => {
|
|
30
|
-
const id = String(data);
|
|
31
|
-
let hash = 0;
|
|
32
|
-
for (let i = 0; i < id.length; i++) {
|
|
33
|
-
hash += id.charCodeAt(i);
|
|
34
|
-
}
|
|
35
|
-
return iconNames[hash % iconNames.length];
|
|
36
|
-
};
|
|
37
|
-
const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
|
|
38
|
-
const { isShowTagType } = useAppSelector((state) => state.board);
|
|
39
|
-
const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
|
|
11
|
+
const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, selectionLines, }) => {
|
|
12
|
+
// const { isShowTagType } = useAppSelector((state) => state.board);
|
|
40
13
|
const renderShape = (item) => {
|
|
41
|
-
var _a, _b, _c, _d, _e, _f
|
|
42
|
-
const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags,
|
|
43
|
-
const
|
|
44
|
-
const
|
|
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
|
-
|
|
14
|
+
var _a, _b, _c, _d, _e, _f;
|
|
15
|
+
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;
|
|
16
|
+
const showLabels = !element;
|
|
17
|
+
// const fontSizeFromLabel = labels?.[0]?.fontSize;
|
|
18
|
+
// const renderTags = (data) => {
|
|
19
|
+
// const tags =
|
|
20
|
+
// data ?? tagsDummy(labels?.[0]?.label || "Table", getIconFromId(id));
|
|
21
|
+
// const privileged = !isEmpty(privilegedTags)
|
|
22
|
+
// ? privilegedTags
|
|
23
|
+
// : isShowTagType === "type-1"
|
|
24
|
+
// ? PRIVILEGED_TAGS["CURRENT_TIME"]
|
|
25
|
+
// : isShowTagType === "type-2"
|
|
26
|
+
// ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
|
|
27
|
+
// : undefined;
|
|
28
|
+
// if (tags && tags?.length > 0) {
|
|
29
|
+
// const scaleDefault = Number(fontSize || fontSizeFromLabel || 12) / 12;
|
|
30
|
+
// const gapBetweenTags = Number(gapTags || 20) * scaleDefault;
|
|
31
|
+
// const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
|
|
32
|
+
// // Hitung total tinggi semua grup tag (buat center vertikal)
|
|
33
|
+
// const totalTagHeight =
|
|
34
|
+
// tags
|
|
35
|
+
// ?.filter((tag) => privileged?.find((p) => p.key === tag.key))
|
|
36
|
+
// .reduce((sum, tag) => {
|
|
37
|
+
// const items = tag.items || [];
|
|
38
|
+
// const isColumn = tag.direction?.includes("column");
|
|
39
|
+
// const tagHeight = isColumn
|
|
40
|
+
// ? items.length * defaultFontSize + 2 * (Number(tag.gap) || 2)
|
|
41
|
+
// : defaultFontSize; // horizontal = 1 line
|
|
42
|
+
// return sum + tagHeight + gapBetweenTags;
|
|
43
|
+
// }, 0) - gapBetweenTags;
|
|
44
|
+
// const startY = Number(height) / 4 - totalTagHeight / 3; // titik awal supaya semua di tengah
|
|
45
|
+
// let currentY = startY;
|
|
46
|
+
// return tags
|
|
47
|
+
// .filter((tag) => privileged?.find((p) => p.key === tag.key))
|
|
48
|
+
// .map((tag: Tag, tagIndex: number) => {
|
|
49
|
+
// const itemsPriv = privileged[tagIndex].items;
|
|
50
|
+
// const direction = tag.direction?.includes("column")
|
|
51
|
+
// ? "column"
|
|
52
|
+
// : "flex";
|
|
53
|
+
// const gap = Number(tag.gap || 2) * scaleDefault;
|
|
54
|
+
// const items = tag.items || [];
|
|
55
|
+
// const fontSize = Number(defaultFontSize);
|
|
56
|
+
// const isColumn = direction === "column";
|
|
57
|
+
// const groupHeight = isColumn
|
|
58
|
+
// ? items.length * fontSize + 2 * gap
|
|
59
|
+
// : fontSize;
|
|
60
|
+
// const centerX = width / 2;
|
|
61
|
+
// const centerY = currentY + groupHeight;
|
|
62
|
+
// // naikkan posisi Y untuk grup berikutnya
|
|
63
|
+
// currentY += groupHeight + gapBetweenTags;
|
|
64
|
+
// const elements = items
|
|
65
|
+
// .filter((item) => itemsPriv.includes(item.type))
|
|
66
|
+
// .map((item: Item, i: number) => {
|
|
67
|
+
// const offsetY = isColumn
|
|
68
|
+
// ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
|
|
69
|
+
// : 0;
|
|
70
|
+
// const offsetX = !isColumn
|
|
71
|
+
// ? i * (fontSize + gap) - (1 * (fontSize + gap)) / 2
|
|
72
|
+
// : 0;
|
|
73
|
+
// const posX = centerX + offsetX + Number(tag.offsetX ?? 0);
|
|
74
|
+
// const posY = centerY + offsetY + Number(tag.offsetY ?? 0);
|
|
75
|
+
// const renderSymbol = (symbol) => {
|
|
76
|
+
// if (!symbol) return null;
|
|
77
|
+
// const {
|
|
78
|
+
// position = "right",
|
|
79
|
+
// size = item?.fontSize || Number(fontSize),
|
|
80
|
+
// gap: symbolGap = 0,
|
|
81
|
+
// } = symbol;
|
|
82
|
+
// const sizeFont = item?.fontSize || Number(fontSize) / 3;
|
|
83
|
+
// let offsetSymbolX = 0;
|
|
84
|
+
// let offsetSymbolY = 0;
|
|
85
|
+
// switch (position) {
|
|
86
|
+
// case "right":
|
|
87
|
+
// offsetSymbolX = size + symbolGap;
|
|
88
|
+
// break;
|
|
89
|
+
// case "left":
|
|
90
|
+
// offsetSymbolX = -(size + symbolGap);
|
|
91
|
+
// break;
|
|
92
|
+
// case "top":
|
|
93
|
+
// offsetSymbolY = -(size + symbolGap);
|
|
94
|
+
// break;
|
|
95
|
+
// case "bottom":
|
|
96
|
+
// offsetSymbolY = size + symbolGap;
|
|
97
|
+
// break;
|
|
98
|
+
// case "right-top":
|
|
99
|
+
// offsetSymbolX = size + symbolGap;
|
|
100
|
+
// offsetSymbolY = -(size / 4);
|
|
101
|
+
// break;
|
|
102
|
+
// case "right-bottom":
|
|
103
|
+
// offsetSymbolX = size + symbolGap;
|
|
104
|
+
// offsetSymbolY = size / 4;
|
|
105
|
+
// break;
|
|
106
|
+
// case "left-top":
|
|
107
|
+
// offsetSymbolX = -size - symbolGap;
|
|
108
|
+
// offsetSymbolY = -(size / 4);
|
|
109
|
+
// break;
|
|
110
|
+
// case "left-bottom":
|
|
111
|
+
// offsetSymbolX = -size - symbolGap;
|
|
112
|
+
// offsetSymbolY = size / 4;
|
|
113
|
+
// break;
|
|
114
|
+
// }
|
|
115
|
+
// return (
|
|
116
|
+
// <tspan
|
|
117
|
+
// {...symbol}
|
|
118
|
+
// key={`symbol-${tagIndex}-${i}`}
|
|
119
|
+
// x={posX + offsetSymbolX}
|
|
120
|
+
// y={posY + offsetSymbolY}
|
|
121
|
+
// textAnchor="middle"
|
|
122
|
+
// dominantBaseline="middle"
|
|
123
|
+
// fontSize={`${sizeFont}px`}
|
|
124
|
+
// >
|
|
125
|
+
// {symbol.value}
|
|
126
|
+
// </tspan>
|
|
127
|
+
// );
|
|
128
|
+
// };
|
|
129
|
+
// if (item.type === "icon") {
|
|
130
|
+
// const icons = iconTags ?? dummyIconTags;
|
|
131
|
+
// const iconTag = icons?.find(
|
|
132
|
+
// (icon) => icon.key === item.value
|
|
133
|
+
// );
|
|
134
|
+
// if (!iconTag) return null;
|
|
135
|
+
// const scale = defaultFontSize / 12;
|
|
136
|
+
// return (
|
|
137
|
+
// <g
|
|
138
|
+
// {...item}
|
|
139
|
+
// key={`icon-${tagIndex}-${i}`}
|
|
140
|
+
// transform={`translate(${posX - defaultFontSize}, ${
|
|
141
|
+
// posY - defaultFontSize / 2
|
|
142
|
+
// }) scale(${scale})`}
|
|
143
|
+
// >
|
|
144
|
+
// {iconTag.icon}
|
|
145
|
+
// </g>
|
|
146
|
+
// );
|
|
147
|
+
// }
|
|
148
|
+
// if (item.type === "text") {
|
|
149
|
+
// return (
|
|
150
|
+
// <text
|
|
151
|
+
// {...item}
|
|
152
|
+
// key={`text-${tagIndex}-${i}`}
|
|
153
|
+
// x={posX}
|
|
154
|
+
// y={posY}
|
|
155
|
+
// textAnchor="middle"
|
|
156
|
+
// dominantBaseline="middle"
|
|
157
|
+
// fontSize={defaultFontSize}
|
|
158
|
+
// >
|
|
159
|
+
// {item.value} {renderSymbol(item?.symbol)}
|
|
160
|
+
// </text>
|
|
161
|
+
// );
|
|
162
|
+
// }
|
|
163
|
+
// return null;
|
|
164
|
+
// });
|
|
165
|
+
// return (
|
|
166
|
+
// <g key={`group-${tagIndex}`} pointerEvents="none">
|
|
167
|
+
// {elements}
|
|
168
|
+
// </g>
|
|
169
|
+
// );
|
|
170
|
+
// });
|
|
171
|
+
// }
|
|
172
|
+
// };
|
|
173
|
+
const renderIcon = () => {
|
|
174
|
+
var _a, _b;
|
|
175
|
+
const icon = element === null || element === void 0 ? void 0 : element.icon;
|
|
176
|
+
const offsetX = Number((_a = element === null || element === void 0 ? void 0 : element.offsetX) !== null && _a !== void 0 ? _a : 0);
|
|
177
|
+
const offsetY = Number((_b = element === null || element === void 0 ? void 0 : element.offsetY) !== null && _b !== void 0 ? _b : 0);
|
|
178
|
+
const defaultFontSize = Number(fontSize || 12);
|
|
179
|
+
const posX = width / 2 + (offsetX !== null && offsetX !== void 0 ? offsetX : defaultFontSize);
|
|
180
|
+
const posY = height / 2 + (offsetY !== null && offsetY !== void 0 ? offsetY : defaultFontSize);
|
|
181
|
+
const centerLabelX = width / 2;
|
|
182
|
+
const centetLabelY = height / 2;
|
|
183
|
+
const newLabelProps = Object.assign(Object.assign({}, labelProps), { height: centetLabelY - defaultFontSize });
|
|
184
|
+
return (_jsxs(_Fragment, { children: [_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${centerLabelX}, ${centetLabelY})`, children: _jsx(LabelItem, Object.assign({}, newLabelProps)) }), _jsx("g", { transform: `rotate(${-rotation}, ${centerLabelX}, ${centetLabelY}) translate(${posX - defaultFontSize}, ${posY}) scale(${defaultFontSize / 12})`, children: icon ? icon : _jsx(TrashIcon, {}) })] }));
|
|
159
185
|
};
|
|
160
186
|
let commonProps = {
|
|
161
187
|
fill,
|
|
@@ -241,6 +267,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
241
267
|
delete group.dataset.dragEnterCount;
|
|
242
268
|
};
|
|
243
269
|
const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
|
|
270
|
+
const labelProps = {
|
|
271
|
+
labels,
|
|
272
|
+
id,
|
|
273
|
+
width,
|
|
274
|
+
height,
|
|
275
|
+
commonProps,
|
|
276
|
+
rotation,
|
|
277
|
+
};
|
|
244
278
|
switch (shape) {
|
|
245
279
|
case "square":
|
|
246
280
|
return (_jsx("g", { id: `${id}`, "data-id": id, transform: `translate(${x}, ${y})`, style: { pointerEvents: "all" }, onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
|
|
@@ -291,16 +325,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
291
325
|
"points",
|
|
292
326
|
"tags",
|
|
293
327
|
"seatCount",
|
|
294
|
-
]), commonProps), `${id}-rect`),
|
|
295
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
296
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
297
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
298
|
-
return (_createElement("text", Object.assign({ pointerEvents: "none" }, omit(commonProps, [
|
|
299
|
-
"opacity",
|
|
300
|
-
"stroke",
|
|
301
|
-
"strokeWidth",
|
|
302
|
-
]), { 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" }), _ === null || _ === void 0 ? void 0 : _.label));
|
|
303
|
-
}) }))] }) }, id));
|
|
328
|
+
]), commonProps), `${id}-rect`), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
304
329
|
case "polygon":
|
|
305
330
|
if (!points)
|
|
306
331
|
return null;
|
|
@@ -363,19 +388,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
363
388
|
"points",
|
|
364
389
|
"tags",
|
|
365
390
|
"seatCount",
|
|
366
|
-
])), id),
|
|
367
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
368
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
369
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
370
|
-
return (_createElement("text", Object.assign({}, omit(commonProps, [
|
|
371
|
-
"opacity",
|
|
372
|
-
"stroke",
|
|
373
|
-
"strokeWidth",
|
|
374
|
-
]), { 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" }), _ === null || _ === void 0 ? void 0 : _.label));
|
|
375
|
-
}) }))] })] }, id));
|
|
391
|
+
])), id), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] })] }, id));
|
|
376
392
|
case "table-seat-circle": {
|
|
377
393
|
const seatCount = item.seatCount;
|
|
378
|
-
const openSpace = (
|
|
394
|
+
const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
|
|
379
395
|
// LOCAL SPACE (tanpa x,y)
|
|
380
396
|
const centerX = width / 2;
|
|
381
397
|
const centerY = height / 2;
|
|
@@ -437,10 +453,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
437
453
|
"points",
|
|
438
454
|
"tags",
|
|
439
455
|
"seatCount",
|
|
440
|
-
]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }),
|
|
441
|
-
var _a, _b, _c, _d;
|
|
442
|
-
return (_jsx("text", { 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, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
|
|
443
|
-
}) }))] }) }, id));
|
|
456
|
+
]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
444
457
|
}
|
|
445
458
|
case "table-seat-rect-circle": {
|
|
446
459
|
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
|
|
@@ -569,25 +582,16 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
569
582
|
"points",
|
|
570
583
|
"tags",
|
|
571
584
|
"seatCount",
|
|
572
|
-
]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`),
|
|
573
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
574
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
575
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
576
|
-
return (_createElement("text", Object.assign({}, omit(commonProps, [
|
|
577
|
-
"opacity",
|
|
578
|
-
"stroke",
|
|
579
|
-
"strokeWidth",
|
|
580
|
-
]), { 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" }), _ === null || _ === void 0 ? void 0 : _.label));
|
|
581
|
-
}) }))] }) }, id));
|
|
585
|
+
]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
582
586
|
}
|
|
583
587
|
case "table-seat-square": {
|
|
584
588
|
const openSpace = item.openSpace || 0; // from 0 to 0.9
|
|
585
589
|
const r = 10;
|
|
586
590
|
const seatPositions = item.seatPositions;
|
|
587
|
-
const topCount = (
|
|
588
|
-
const bottomCount = (
|
|
589
|
-
const leftCount = (
|
|
590
|
-
const rightCount = (
|
|
591
|
+
const topCount = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
|
|
592
|
+
const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
|
|
593
|
+
const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
|
|
594
|
+
const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
|
|
591
595
|
// split seats evenly on top and bottom
|
|
592
596
|
const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
|
|
593
597
|
const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
|
|
@@ -678,16 +682,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
678
682
|
"points",
|
|
679
683
|
"tags",
|
|
680
684
|
"seatCount",
|
|
681
|
-
]))),
|
|
682
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
683
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
684
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
685
|
-
return (_createElement("text", Object.assign({}, omit(commonProps, [
|
|
686
|
-
"opacity",
|
|
687
|
-
"stroke",
|
|
688
|
-
"strokeWidth",
|
|
689
|
-
]), { 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" }), _ === null || _ === void 0 ? void 0 : _.label));
|
|
690
|
-
}) }))] }) }, id));
|
|
685
|
+
]))), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
691
686
|
}
|
|
692
687
|
case "table-seat-half-square": {
|
|
693
688
|
const openSpace = item.openSpace || 0;
|
|
@@ -735,12 +730,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
735
730
|
radius: seatRadius,
|
|
736
731
|
spacing: spacingHeight,
|
|
737
732
|
}).map((cy) => ({ cx: width - seatRadius * 0.1, cy, id: "right" }));
|
|
738
|
-
const seats = (
|
|
733
|
+
const seats = (_f = [
|
|
739
734
|
...topSeats,
|
|
740
735
|
...bottomSeats,
|
|
741
736
|
...leftSeats,
|
|
742
737
|
...rightSeats,
|
|
743
|
-
]) === null ||
|
|
738
|
+
]) === null || _f === void 0 ? void 0 : _f.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
|
|
744
739
|
cx: seat.cx,
|
|
745
740
|
cy: seat.cy,
|
|
746
741
|
r: seatRadius,
|
|
@@ -791,16 +786,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
791
786
|
"points",
|
|
792
787
|
"tags",
|
|
793
788
|
"seatCount",
|
|
794
|
-
]))), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`),
|
|
795
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
796
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
797
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
798
|
-
return (_createElement("text", Object.assign({}, omit(commonProps, [
|
|
799
|
-
"opacity",
|
|
800
|
-
"stroke",
|
|
801
|
-
"strokeWidth",
|
|
802
|
-
]), { 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" }), _ === null || _ === void 0 ? void 0 : _.label));
|
|
803
|
-
}) }))] }) }, id));
|
|
789
|
+
]))), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
804
790
|
}
|
|
805
791
|
case "table-seat-rect-square": {
|
|
806
792
|
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
|
|
@@ -928,16 +914,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
928
914
|
"points",
|
|
929
915
|
"tags",
|
|
930
916
|
"seatCount",
|
|
931
|
-
]))), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`),
|
|
932
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
933
|
-
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
934
|
-
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
935
|
-
return (_createElement("text", Object.assign({}, omit(commonProps, [
|
|
936
|
-
"opacity",
|
|
937
|
-
"stroke",
|
|
938
|
-
"strokeWidth",
|
|
939
|
-
]), { 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" }), _ === null || _ === void 0 ? void 0 : _.label));
|
|
940
|
-
}) }))] }) }, id));
|
|
917
|
+
]))), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
941
918
|
}
|
|
942
919
|
case "text":
|
|
943
920
|
return (_jsx("g", { onContextMenu: (e) => e.preventDefault(), "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", { width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", Object.assign({ x: width / 2, y: height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fill !== null && fill !== void 0 ? fill : fontColor, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6, opacity: opacity }, omit(commonProps, ["fill", "opacity"]), { children: text }))] }) }, id));
|
|
@@ -972,10 +949,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
972
949
|
e.preventDefault();
|
|
973
950
|
const group = e.currentTarget;
|
|
974
951
|
highlightGroup(group, "mousedown");
|
|
975
|
-
}, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("image", Object.assign({ href: src, width: width, height: height, transform: transformRotate }, commonProps)),
|
|
976
|
-
var _a, _b, _c, _d;
|
|
977
|
-
return (_jsx("text", { 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, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
|
|
978
|
-
}) }))] }) }, id));
|
|
952
|
+
}, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("image", Object.assign({ href: src, width: width, height: height, transform: transformRotate }, commonProps)), showLabels ? (_jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: _jsx(LabelItem, Object.assign({}, labelProps)) })) : (renderIcon())] }) }, id));
|
|
979
953
|
case "background":
|
|
980
954
|
return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), children: [_jsx("image", Object.assign({ href: src, x: x, y: y, width: width, height: height, transform: transformRotate }, commonProps)), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
981
955
|
var _a, _b, _c, _d;
|
|
@@ -986,6 +960,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
986
960
|
}
|
|
987
961
|
};
|
|
988
962
|
let date = new Date();
|
|
989
|
-
|
|
963
|
+
const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
|
|
964
|
+
return (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && (_jsx("g", { 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})`, children: _jsx("g", { transform: `rotate(${0}, 0,0)`, children: _jsx("rect", { width: selectionLines.width + 10, height: selectionLines.height + 10, fill: "none", stroke: "#4a90e2", strokeWidth: 1, strokeDasharray: "4 2", id: "rect-box-selection" }) }) }, `selection-${Date.now()}`))] }, `${date}`));
|
|
990
965
|
};
|
|
991
966
|
export default Layers;
|