seat-editor 3.1.13 → 3.1.15
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/constant.d.ts +122 -1
- package/dist/app/constant.js +157 -0
- package/dist/app/only-view/page.jsx +4 -2
- package/dist/components/layer-v4/index.jsx +77 -73
- package/package.json +1 -1
package/dist/app/constant.d.ts
CHANGED
|
@@ -100,6 +100,127 @@ export declare const data3: {
|
|
|
100
100
|
is_fdc: number;
|
|
101
101
|
max_pax_fdc: number;
|
|
102
102
|
}[];
|
|
103
|
+
export declare const test1: {
|
|
104
|
+
uuid: string;
|
|
105
|
+
uuid_rsvp: string;
|
|
106
|
+
code: string;
|
|
107
|
+
name: string;
|
|
108
|
+
capacity: number;
|
|
109
|
+
pax: {
|
|
110
|
+
adults: number;
|
|
111
|
+
};
|
|
112
|
+
req_pax: {
|
|
113
|
+
adults: number;
|
|
114
|
+
};
|
|
115
|
+
total_pax: number;
|
|
116
|
+
total_req_pax: number;
|
|
117
|
+
status_bg_color: string;
|
|
118
|
+
status_name: string;
|
|
119
|
+
status_color: string;
|
|
120
|
+
status_icon: string;
|
|
121
|
+
title: string;
|
|
122
|
+
firstname: string;
|
|
123
|
+
lastname: string;
|
|
124
|
+
ranks: {
|
|
125
|
+
name: string;
|
|
126
|
+
image: string;
|
|
127
|
+
}[];
|
|
128
|
+
tags: any;
|
|
129
|
+
rank_sp: string;
|
|
130
|
+
rank_ts: string;
|
|
131
|
+
start_date: string;
|
|
132
|
+
end_date: string;
|
|
133
|
+
start_time: string;
|
|
134
|
+
end_time: string;
|
|
135
|
+
walk_in: number;
|
|
136
|
+
dp_amount: string;
|
|
137
|
+
dp_status: number;
|
|
138
|
+
online_payment: number;
|
|
139
|
+
rsvp_type: number;
|
|
140
|
+
rsvp_input: number;
|
|
141
|
+
is_reserved: number;
|
|
142
|
+
is_hold: number;
|
|
143
|
+
is_overtime: number;
|
|
144
|
+
is_upcoming: number;
|
|
145
|
+
conflicted: number;
|
|
146
|
+
is_late: number;
|
|
147
|
+
properties: {
|
|
148
|
+
x: number;
|
|
149
|
+
y: number;
|
|
150
|
+
id: number;
|
|
151
|
+
fill: string;
|
|
152
|
+
tags: ({
|
|
153
|
+
gap: string;
|
|
154
|
+
key: string;
|
|
155
|
+
items: {
|
|
156
|
+
type: string;
|
|
157
|
+
value: string;
|
|
158
|
+
}[];
|
|
159
|
+
direction: string;
|
|
160
|
+
offsetX?: undefined;
|
|
161
|
+
offsetY?: undefined;
|
|
162
|
+
} | {
|
|
163
|
+
gap: string;
|
|
164
|
+
key: string;
|
|
165
|
+
items: {
|
|
166
|
+
type: string;
|
|
167
|
+
value: string;
|
|
168
|
+
}[];
|
|
169
|
+
offsetX: string;
|
|
170
|
+
offsetY: string;
|
|
171
|
+
direction: string;
|
|
172
|
+
})[];
|
|
173
|
+
shape: string;
|
|
174
|
+
width: number;
|
|
175
|
+
height: number;
|
|
176
|
+
labels: {
|
|
177
|
+
x: number;
|
|
178
|
+
y: number;
|
|
179
|
+
label: string;
|
|
180
|
+
fontSize: number;
|
|
181
|
+
fontColor: string;
|
|
182
|
+
}[];
|
|
183
|
+
opacity: number;
|
|
184
|
+
rotation: number;
|
|
185
|
+
seatCount: number;
|
|
186
|
+
uuid_table: string;
|
|
187
|
+
};
|
|
188
|
+
image_mapping: ({
|
|
189
|
+
x: number;
|
|
190
|
+
y: number;
|
|
191
|
+
id: number;
|
|
192
|
+
src: string;
|
|
193
|
+
image: string;
|
|
194
|
+
shape: string;
|
|
195
|
+
width: number;
|
|
196
|
+
height: number;
|
|
197
|
+
fill?: undefined;
|
|
198
|
+
} | {
|
|
199
|
+
x: number;
|
|
200
|
+
y: number;
|
|
201
|
+
id: number;
|
|
202
|
+
fill: string;
|
|
203
|
+
shape: string;
|
|
204
|
+
width: number;
|
|
205
|
+
height: number;
|
|
206
|
+
src?: undefined;
|
|
207
|
+
image?: undefined;
|
|
208
|
+
})[];
|
|
209
|
+
upcomings: {
|
|
210
|
+
time: string;
|
|
211
|
+
uuid: string;
|
|
212
|
+
}[];
|
|
213
|
+
areas: {
|
|
214
|
+
name: string;
|
|
215
|
+
uuid: string;
|
|
216
|
+
}[];
|
|
217
|
+
sections: {
|
|
218
|
+
icon: string;
|
|
219
|
+
name: string;
|
|
220
|
+
uuid: string;
|
|
221
|
+
image: any;
|
|
222
|
+
}[];
|
|
223
|
+
}[];
|
|
103
224
|
export declare const test4: ({
|
|
104
225
|
x: number;
|
|
105
226
|
y: number;
|
|
@@ -161,7 +282,7 @@ export declare const test4: ({
|
|
|
161
282
|
stroke: string;
|
|
162
283
|
strokeWidth: number;
|
|
163
284
|
text: string;
|
|
164
|
-
shape:
|
|
285
|
+
shape: string;
|
|
165
286
|
width: number;
|
|
166
287
|
height: number;
|
|
167
288
|
gapTags: number;
|
package/dist/app/constant.js
CHANGED
|
@@ -3062,6 +3062,163 @@ export const data3 = [
|
|
|
3062
3062
|
max_pax_fdc: 0,
|
|
3063
3063
|
},
|
|
3064
3064
|
];
|
|
3065
|
+
export const test1 = [
|
|
3066
|
+
{
|
|
3067
|
+
"uuid": "d088bba0-e990-410e-aea9-08548175a0b9",
|
|
3068
|
+
"uuid_rsvp": "3cf2c40b-4741-417b-ae39-5c1e648f2c02",
|
|
3069
|
+
"code": "V1",
|
|
3070
|
+
"name": "VIP 1",
|
|
3071
|
+
"capacity": 8,
|
|
3072
|
+
"pax": {
|
|
3073
|
+
"adults": 2
|
|
3074
|
+
},
|
|
3075
|
+
"req_pax": {
|
|
3076
|
+
"adults": 8
|
|
3077
|
+
},
|
|
3078
|
+
"total_pax": 2,
|
|
3079
|
+
"total_req_pax": 8,
|
|
3080
|
+
"status_bg_color": "#F6F6F6",
|
|
3081
|
+
"status_name": "Booked",
|
|
3082
|
+
"status_color": "#F9D500",
|
|
3083
|
+
"status_icon": "check",
|
|
3084
|
+
"title": "Mr",
|
|
3085
|
+
"firstname": "Mail",
|
|
3086
|
+
"lastname": "",
|
|
3087
|
+
"ranks": [
|
|
3088
|
+
{
|
|
3089
|
+
"name": "Reg",
|
|
3090
|
+
"image": "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/rsvp/1755064935470041622_regular.png"
|
|
3091
|
+
}
|
|
3092
|
+
],
|
|
3093
|
+
"tags": null,
|
|
3094
|
+
"rank_sp": "25",
|
|
3095
|
+
"rank_ts": "20",
|
|
3096
|
+
"start_date": "2026-02-05",
|
|
3097
|
+
"end_date": "2026-02-05",
|
|
3098
|
+
"start_time": "2000-01-01T15:00:00Z",
|
|
3099
|
+
"end_time": "2000-01-01T18:00:00Z",
|
|
3100
|
+
"walk_in": 0,
|
|
3101
|
+
"dp_amount": "0",
|
|
3102
|
+
"dp_status": 0,
|
|
3103
|
+
"online_payment": 0,
|
|
3104
|
+
"rsvp_type": 0,
|
|
3105
|
+
"rsvp_input": 2,
|
|
3106
|
+
"is_reserved": 0,
|
|
3107
|
+
"is_hold": 0,
|
|
3108
|
+
"is_overtime": 0,
|
|
3109
|
+
"is_upcoming": 1,
|
|
3110
|
+
"conflicted": 1,
|
|
3111
|
+
"is_late": 1,
|
|
3112
|
+
"properties": {
|
|
3113
|
+
"x": 359.7921676635742,
|
|
3114
|
+
"y": 109.07066345214844,
|
|
3115
|
+
"id": 1753965738978,
|
|
3116
|
+
"fill": "#bca16a",
|
|
3117
|
+
"tags": [
|
|
3118
|
+
{
|
|
3119
|
+
"gap": "2",
|
|
3120
|
+
"key": "table",
|
|
3121
|
+
"items": [
|
|
3122
|
+
{
|
|
3123
|
+
"type": "text",
|
|
3124
|
+
"value": "VIP 1"
|
|
3125
|
+
},
|
|
3126
|
+
{
|
|
3127
|
+
"type": "icon",
|
|
3128
|
+
"value": "check"
|
|
3129
|
+
}
|
|
3130
|
+
],
|
|
3131
|
+
"direction": "column"
|
|
3132
|
+
},
|
|
3133
|
+
{
|
|
3134
|
+
"gap": "8",
|
|
3135
|
+
"key": "pax",
|
|
3136
|
+
"items": [
|
|
3137
|
+
{
|
|
3138
|
+
"type": "text",
|
|
3139
|
+
"value": "8/2"
|
|
3140
|
+
},
|
|
3141
|
+
{
|
|
3142
|
+
"type": "icon",
|
|
3143
|
+
"value": "trash"
|
|
3144
|
+
}
|
|
3145
|
+
],
|
|
3146
|
+
"offsetX": "3",
|
|
3147
|
+
"offsetY": "1",
|
|
3148
|
+
"direction": "flex"
|
|
3149
|
+
},
|
|
3150
|
+
{
|
|
3151
|
+
"gap": "2",
|
|
3152
|
+
"key": "rsvp_time",
|
|
3153
|
+
"items": [
|
|
3154
|
+
{
|
|
3155
|
+
"type": "text",
|
|
3156
|
+
"value": "21:30"
|
|
3157
|
+
}
|
|
3158
|
+
],
|
|
3159
|
+
"direction": "column"
|
|
3160
|
+
}
|
|
3161
|
+
],
|
|
3162
|
+
"shape": "square",
|
|
3163
|
+
"width": 50,
|
|
3164
|
+
"height": 80,
|
|
3165
|
+
"labels": [
|
|
3166
|
+
{
|
|
3167
|
+
"x": 0,
|
|
3168
|
+
"y": 4,
|
|
3169
|
+
"label": "V 1",
|
|
3170
|
+
"fontSize": 12,
|
|
3171
|
+
"fontColor": "#0d0c0c"
|
|
3172
|
+
}
|
|
3173
|
+
],
|
|
3174
|
+
"opacity": 0.5,
|
|
3175
|
+
"rotation": 0,
|
|
3176
|
+
"seatCount": 0,
|
|
3177
|
+
"uuid_table": "d088bba0-e990-410e-aea9-08548175a0b9"
|
|
3178
|
+
},
|
|
3179
|
+
"image_mapping": [
|
|
3180
|
+
{
|
|
3181
|
+
"x": 102.2516241245301,
|
|
3182
|
+
"y": 56.33927640274972,
|
|
3183
|
+
"id": 1753965911529,
|
|
3184
|
+
"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",
|
|
3185
|
+
"image": "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965909936935262_BOI HT.png",
|
|
3186
|
+
"shape": "background",
|
|
3187
|
+
"width": 1080.4444427490234,
|
|
3188
|
+
"height": 719
|
|
3189
|
+
},
|
|
3190
|
+
{
|
|
3191
|
+
"x": 0,
|
|
3192
|
+
"y": 0,
|
|
3193
|
+
"id": 1766992965422,
|
|
3194
|
+
"fill": "#ffffff",
|
|
3195
|
+
"shape": "backgroundColor",
|
|
3196
|
+
"width": 0,
|
|
3197
|
+
"height": 0
|
|
3198
|
+
}
|
|
3199
|
+
],
|
|
3200
|
+
"upcomings": [
|
|
3201
|
+
{
|
|
3202
|
+
"time": "21:30",
|
|
3203
|
+
"uuid": "6ed56ef9-37c3-4442-8fc3-05b74875e504"
|
|
3204
|
+
}
|
|
3205
|
+
],
|
|
3206
|
+
"areas": [
|
|
3207
|
+
{
|
|
3208
|
+
"name": "Floor",
|
|
3209
|
+
"uuid": "549cefc4-6581-4bfc-974b-ba395c28fc18"
|
|
3210
|
+
}
|
|
3211
|
+
],
|
|
3212
|
+
"sections": [
|
|
3213
|
+
{
|
|
3214
|
+
"icon": "",
|
|
3215
|
+
"name": "Dining Only",
|
|
3216
|
+
"uuid": "4cf5b676-e77e-43d6-943a-22446a7f02dd",
|
|
3217
|
+
"image": null
|
|
3218
|
+
}
|
|
3219
|
+
]
|
|
3220
|
+
}
|
|
3221
|
+
];
|
|
3065
3222
|
export const test4 = [
|
|
3066
3223
|
{
|
|
3067
3224
|
x: 359.7921676635742,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import LayerView from "@/features/view-only-3";
|
|
3
3
|
import { useState, useRef } from "react";
|
|
4
|
-
import { data4 } from "../constant";
|
|
4
|
+
import { data4, test1 } from "../constant";
|
|
5
5
|
import { ChairIcon } from "./chair";
|
|
6
6
|
import { UserIcon } from "./user";
|
|
7
7
|
import { Modal } from "antd";
|
|
@@ -184,7 +184,9 @@ const TouchScrollDetect = () => {
|
|
|
184
184
|
<button className="p-4 bg-gray-400" onClick={() => handleZoomIn()}>+</button>
|
|
185
185
|
<button className="p-4 bg-gray-400" onClick={() => handleZoomOut()}>-</button>
|
|
186
186
|
</div>
|
|
187
|
-
<LayerView refs={refLayer} statusKey="status" privilegedTags={["pax", "table"]}
|
|
187
|
+
<LayerView refs={refLayer} statusKey="status" privilegedTags={["pax", "table"]}
|
|
188
|
+
// defaultBackground="#000000"
|
|
189
|
+
mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
|
|
188
190
|
handleSelectTable(component);
|
|
189
191
|
}} dragTableBlockKey={[
|
|
190
192
|
{
|
|
@@ -7,8 +7,8 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
7
7
|
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
8
|
const renderTags = (tags) => {
|
|
9
9
|
var _a;
|
|
10
|
-
const gapBetweenTags = gapTags || 0;
|
|
11
|
-
const defaultFontSize = fontSize || 12;
|
|
10
|
+
const gapBetweenTags = Number(gapTags || 0);
|
|
11
|
+
const defaultFontSize = Number(fontSize || 12);
|
|
12
12
|
// Hitung total tinggi semua grup tag (buat center vertikal)
|
|
13
13
|
const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.reduce((sum, tag) => {
|
|
14
14
|
var _a;
|
|
@@ -20,14 +20,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
20
20
|
: defaultFontSize; // horizontal = 1 line
|
|
21
21
|
return sum + tagHeight + gapBetweenTags;
|
|
22
22
|
}, 0)) - gapBetweenTags;
|
|
23
|
-
const startY = height / 2 - totalTagHeight / 2; // titik awal supaya semua di tengah
|
|
23
|
+
const startY = Number(height) / 2 - totalTagHeight / 2; // titik awal supaya semua di tengah
|
|
24
24
|
let currentY = startY;
|
|
25
25
|
return (_a = tags.filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.includes(tag.key))) === null || _a === void 0 ? void 0 : _a.map((tag, tagIndex) => {
|
|
26
26
|
var _a;
|
|
27
27
|
const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column")) ? "column" : "flex";
|
|
28
|
-
const gap = Number(tag.gap
|
|
28
|
+
const gap = Number(tag.gap || 2);
|
|
29
29
|
const items = tag.items || [];
|
|
30
|
-
const fontSize = defaultFontSize;
|
|
30
|
+
const fontSize = Number(defaultFontSize);
|
|
31
31
|
const isColumn = direction === "column";
|
|
32
32
|
const groupHeight = isColumn
|
|
33
33
|
? items.length * fontSize + (items.length - 1) * gap
|
|
@@ -45,8 +45,8 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
45
45
|
const offsetX = !isColumn
|
|
46
46
|
? i * (fontSize + gap) - ((items.length - 1) * (fontSize + gap)) / 2
|
|
47
47
|
: 0;
|
|
48
|
-
const posX = centerX + offsetX + ((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
|
|
49
|
-
const posY = centerY + offsetY + ((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
|
|
48
|
+
const posX = centerX + offsetX + (Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0));
|
|
49
|
+
const posY = centerY + offsetY + (Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0));
|
|
50
50
|
const renderSymbol = (symbol) => {
|
|
51
51
|
if (!symbol)
|
|
52
52
|
return null;
|
|
@@ -302,20 +302,20 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
302
302
|
<g transform={`rotate(${-rotation}, 0, 0)`}>
|
|
303
303
|
<circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
|
|
304
304
|
{renderTags(tags)}
|
|
305
|
-
<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
305
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
306
306
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
307
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
308
|
+
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
309
|
+
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
310
|
+
return (<text {...omit(commonProps, [
|
|
311
|
+
"opacity",
|
|
312
|
+
"stroke",
|
|
313
|
+
"strokeWidth",
|
|
314
|
+
])} 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">
|
|
315
315
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
316
316
|
</text>);
|
|
317
|
-
|
|
318
|
-
</g>
|
|
317
|
+
})}
|
|
318
|
+
</g>)}
|
|
319
319
|
</g>
|
|
320
320
|
</g>);
|
|
321
321
|
case "table-seat-circle": {
|
|
@@ -383,14 +383,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
383
383
|
</g>
|
|
384
384
|
|
|
385
385
|
{renderTags(tags)}
|
|
386
|
-
<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
386
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
387
387
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
388
|
-
|
|
389
|
-
|
|
388
|
+
var _a, _b, _c, _d;
|
|
389
|
+
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}>
|
|
390
390
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
391
391
|
</text>);
|
|
392
|
-
|
|
393
|
-
</g>
|
|
392
|
+
})}
|
|
393
|
+
</g>)}
|
|
394
394
|
</g>
|
|
395
395
|
</g>);
|
|
396
396
|
}
|
|
@@ -521,20 +521,21 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
521
521
|
<g key={`${id}-seats`} data-seat={`${id}-seats`}>
|
|
522
522
|
{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}/>))}
|
|
523
523
|
</g>
|
|
524
|
-
|
|
524
|
+
{renderTags(tags)}
|
|
525
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
525
526
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
527
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
528
|
+
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
529
|
+
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
530
|
+
return (<text {...omit(commonProps, [
|
|
531
|
+
"opacity",
|
|
532
|
+
"stroke",
|
|
533
|
+
"strokeWidth",
|
|
534
|
+
])} 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">
|
|
534
535
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
535
536
|
</text>);
|
|
536
|
-
|
|
537
|
-
</g>
|
|
537
|
+
})}
|
|
538
|
+
</g>)}
|
|
538
539
|
</g>
|
|
539
540
|
</g>);
|
|
540
541
|
}
|
|
@@ -639,21 +640,20 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
639
640
|
<g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
|
|
640
641
|
{[...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}/>))}
|
|
641
642
|
</g>
|
|
642
|
-
|
|
643
|
-
<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
643
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
644
644
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
645
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
646
|
+
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
647
|
+
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
648
|
+
return (<text {...omit(commonProps, [
|
|
649
|
+
"opacity",
|
|
650
|
+
"stroke",
|
|
651
|
+
"strokeWidth",
|
|
652
|
+
])} 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">
|
|
653
653
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
654
654
|
</text>);
|
|
655
|
-
|
|
656
|
-
</g>
|
|
655
|
+
})}
|
|
656
|
+
</g>)}
|
|
657
657
|
</g>
|
|
658
658
|
</g>);
|
|
659
659
|
}
|
|
@@ -759,20 +759,21 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
759
759
|
<g key={`${id}-seats`} data-seat={`${id}-seats`}>
|
|
760
760
|
{seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (<path key={`${id}-seat-${i}`} id={`seat-${id}`} d={d} fill="white"/>))}
|
|
761
761
|
</g>
|
|
762
|
-
|
|
762
|
+
{renderTags(tags)}
|
|
763
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
763
764
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
765
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
766
|
+
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
767
|
+
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
768
|
+
return (<text {...omit(commonProps, [
|
|
769
|
+
"opacity",
|
|
770
|
+
"stroke",
|
|
771
|
+
"strokeWidth",
|
|
772
|
+
])} 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">
|
|
772
773
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
773
774
|
</text>);
|
|
774
|
-
|
|
775
|
-
</g>
|
|
775
|
+
})}
|
|
776
|
+
</g>)}
|
|
776
777
|
</g>
|
|
777
778
|
</g>);
|
|
778
779
|
}
|
|
@@ -902,20 +903,21 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
902
903
|
<g key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
|
|
903
904
|
{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}/>))}
|
|
904
905
|
</g>
|
|
905
|
-
|
|
906
|
+
{renderTags(tags)}
|
|
907
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
906
908
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
909
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
910
|
+
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
911
|
+
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
912
|
+
return (<text {...omit(commonProps, [
|
|
913
|
+
"opacity",
|
|
914
|
+
"stroke",
|
|
915
|
+
"strokeWidth",
|
|
916
|
+
])} 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">
|
|
915
917
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
916
918
|
</text>);
|
|
917
|
-
|
|
918
|
-
</g>
|
|
919
|
+
})}
|
|
920
|
+
</g>)}
|
|
919
921
|
</g>
|
|
920
922
|
</g>);
|
|
921
923
|
}
|
|
@@ -962,14 +964,16 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
962
964
|
}}>
|
|
963
965
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
964
966
|
<image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
|
|
965
|
-
|
|
967
|
+
{renderTags(tags)}
|
|
968
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
969
|
+
|
|
966
970
|
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
967
|
-
|
|
968
|
-
|
|
971
|
+
var _a, _b, _c, _d;
|
|
972
|
+
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}>
|
|
969
973
|
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
970
974
|
</text>);
|
|
971
|
-
|
|
972
|
-
</g>
|
|
975
|
+
})}
|
|
976
|
+
</g>)}
|
|
973
977
|
</g>
|
|
974
978
|
</g>);
|
|
975
979
|
case "background":
|