seat-editor 3.1.15 → 3.1.17
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
CHANGED
|
@@ -157,6 +157,7 @@ export declare const test1: {
|
|
|
157
157
|
value: string;
|
|
158
158
|
}[];
|
|
159
159
|
direction: string;
|
|
160
|
+
fontSize: string;
|
|
160
161
|
offsetX?: undefined;
|
|
161
162
|
offsetY?: undefined;
|
|
162
163
|
} | {
|
|
@@ -169,6 +170,7 @@ export declare const test1: {
|
|
|
169
170
|
offsetX: string;
|
|
170
171
|
offsetY: string;
|
|
171
172
|
direction: string;
|
|
173
|
+
fontSize?: undefined;
|
|
172
174
|
})[];
|
|
173
175
|
shape: string;
|
|
174
176
|
width: number;
|
|
@@ -206,10 +208,7 @@ export declare const test1: {
|
|
|
206
208
|
src?: undefined;
|
|
207
209
|
image?: undefined;
|
|
208
210
|
})[];
|
|
209
|
-
upcomings:
|
|
210
|
-
time: string;
|
|
211
|
-
uuid: string;
|
|
212
|
-
}[];
|
|
211
|
+
upcomings: any[];
|
|
213
212
|
areas: {
|
|
214
213
|
name: string;
|
|
215
214
|
uuid: string;
|
package/dist/app/constant.js
CHANGED
|
@@ -3064,160 +3064,145 @@ export const data3 = [
|
|
|
3064
3064
|
];
|
|
3065
3065
|
export const test1 = [
|
|
3066
3066
|
{
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
},
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
},
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3067
|
+
uuid: "d088bba0-e990-410e-aea9-08548175a0b9",
|
|
3068
|
+
uuid_rsvp: "9a7b8a78-631f-41ad-8e01-25966ec8bf16",
|
|
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
3088
|
{
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
}
|
|
3089
|
+
name: "Reg",
|
|
3090
|
+
image: "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/rsvp/1755064935470041622_regular.png",
|
|
3091
|
+
},
|
|
3092
3092
|
],
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
{
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3093
|
+
tags: null,
|
|
3094
|
+
rank_sp: "25",
|
|
3095
|
+
rank_ts: "20",
|
|
3096
|
+
start_date: "2026-02-06",
|
|
3097
|
+
end_date: "2026-02-06",
|
|
3098
|
+
start_time: "2000-01-01T14:30:00Z",
|
|
3099
|
+
end_time: "2000-01-01T17:30: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: 0,
|
|
3111
|
+
is_late: 1,
|
|
3112
|
+
properties: {
|
|
3113
|
+
x: 460.7938358701509,
|
|
3114
|
+
y: 126.90873770878233,
|
|
3115
|
+
id: 1753965865493,
|
|
3116
|
+
fill: "#bca16a",
|
|
3117
|
+
tags: [
|
|
3118
|
+
{
|
|
3119
|
+
gap: "2",
|
|
3120
|
+
key: "table",
|
|
3121
|
+
items: [
|
|
3122
3122
|
{
|
|
3123
|
-
|
|
3124
|
-
|
|
3123
|
+
type: "text",
|
|
3124
|
+
value: "VIP 1",
|
|
3125
3125
|
},
|
|
3126
3126
|
{
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
}
|
|
3127
|
+
type: "icon",
|
|
3128
|
+
value: "chair",
|
|
3129
|
+
},
|
|
3130
3130
|
],
|
|
3131
|
-
|
|
3131
|
+
direction: "column",
|
|
3132
|
+
fontSize: "10"
|
|
3132
3133
|
},
|
|
3133
3134
|
{
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
|
|
3135
|
+
gap: "8",
|
|
3136
|
+
key: "pax",
|
|
3137
|
+
items: [
|
|
3137
3138
|
{
|
|
3138
|
-
|
|
3139
|
-
|
|
3139
|
+
type: "text",
|
|
3140
|
+
value: "1/1",
|
|
3140
3141
|
},
|
|
3141
3142
|
{
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
}
|
|
3143
|
+
type: "icon",
|
|
3144
|
+
value: "user",
|
|
3145
|
+
},
|
|
3145
3146
|
],
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3147
|
+
offsetX: "3",
|
|
3148
|
+
offsetY: "1",
|
|
3149
|
+
direction: "flex",
|
|
3149
3150
|
},
|
|
3151
|
+
],
|
|
3152
|
+
shape: "square",
|
|
3153
|
+
width: 50,
|
|
3154
|
+
height: 80,
|
|
3155
|
+
labels: [
|
|
3150
3156
|
{
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
"
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
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": [
|
|
3157
|
+
x: 0,
|
|
3158
|
+
y: 8,
|
|
3159
|
+
label: "V 1",
|
|
3160
|
+
fontSize: 12,
|
|
3161
|
+
fontColor: "#0d0c0c",
|
|
3162
|
+
},
|
|
3163
|
+
],
|
|
3164
|
+
opacity: 0.5,
|
|
3165
|
+
rotation: 0,
|
|
3166
|
+
seatCount: 0,
|
|
3167
|
+
uuid_table: "d088bba0-e990-410e-aea9-08548175a0b9",
|
|
3168
|
+
},
|
|
3169
|
+
image_mapping: [
|
|
3180
3170
|
{
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3171
|
+
x: 368,
|
|
3172
|
+
y: 77.54706573486328,
|
|
3173
|
+
id: 1753965986410,
|
|
3174
|
+
src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
|
|
3175
|
+
image: "/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
|
|
3176
|
+
shape: "background",
|
|
3177
|
+
width: 751.9405198530717,
|
|
3178
|
+
height: 715.6363664106889,
|
|
3189
3179
|
},
|
|
3190
3180
|
{
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
}
|
|
3181
|
+
x: 0,
|
|
3182
|
+
y: 0,
|
|
3183
|
+
id: 1769502386215,
|
|
3184
|
+
fill: "#ffffff",
|
|
3185
|
+
shape: "backgroundColor",
|
|
3186
|
+
width: 0,
|
|
3187
|
+
height: 0,
|
|
3188
|
+
},
|
|
3199
3189
|
],
|
|
3200
|
-
|
|
3190
|
+
upcomings: [],
|
|
3191
|
+
areas: [
|
|
3201
3192
|
{
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
}
|
|
3193
|
+
name: "Floor",
|
|
3194
|
+
uuid: "549cefc4-6581-4bfc-974b-ba395c28fc18",
|
|
3195
|
+
},
|
|
3205
3196
|
],
|
|
3206
|
-
|
|
3197
|
+
sections: [
|
|
3207
3198
|
{
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3199
|
+
icon: "",
|
|
3200
|
+
name: "Dining Only",
|
|
3201
|
+
uuid: "4cf5b676-e77e-43d6-943a-22446a7f02dd",
|
|
3202
|
+
image: null,
|
|
3203
|
+
},
|
|
3211
3204
|
],
|
|
3212
|
-
|
|
3213
|
-
{
|
|
3214
|
-
"icon": "",
|
|
3215
|
-
"name": "Dining Only",
|
|
3216
|
-
"uuid": "4cf5b676-e77e-43d6-943a-22446a7f02dd",
|
|
3217
|
-
"image": null
|
|
3218
|
-
}
|
|
3219
|
-
]
|
|
3220
|
-
}
|
|
3205
|
+
},
|
|
3221
3206
|
];
|
|
3222
3207
|
export const test4 = [
|
|
3223
3208
|
{
|
|
@@ -5,7 +5,7 @@ import { data4, test1 } from "../constant";
|
|
|
5
5
|
import { ChairIcon } from "./chair";
|
|
6
6
|
import { UserIcon } from "./user";
|
|
7
7
|
import { Modal } from "antd";
|
|
8
|
-
import JsonView from
|
|
8
|
+
import JsonView from "@uiw/react-json-view";
|
|
9
9
|
// import { dummyImage } from "./constant";
|
|
10
10
|
const dummyImage = [
|
|
11
11
|
{
|
|
@@ -121,8 +121,8 @@ const dummyImage = [
|
|
|
121
121
|
top: 3,
|
|
122
122
|
bottom: 3,
|
|
123
123
|
left: 3,
|
|
124
|
-
right: 3
|
|
125
|
-
}
|
|
124
|
+
right: 3,
|
|
125
|
+
},
|
|
126
126
|
},
|
|
127
127
|
];
|
|
128
128
|
const Card = (item) => {
|
|
@@ -167,7 +167,7 @@ const TouchScrollDetect = () => {
|
|
|
167
167
|
const renderModal = () => {
|
|
168
168
|
return (<Modal open={open} onCancel={() => setOpen(false)} width={700} title="Preview Board" centered footer={null}>
|
|
169
169
|
<div className="flex flex-col p-4 h-[500px] overflow-auto">
|
|
170
|
-
|
|
170
|
+
<JsonView value={table}/>
|
|
171
171
|
</div>
|
|
172
172
|
</Modal>);
|
|
173
173
|
};
|
|
@@ -180,11 +180,24 @@ const TouchScrollDetect = () => {
|
|
|
180
180
|
</div>
|
|
181
181
|
</div>
|
|
182
182
|
<div className="h-screen w-2/3 relative">
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
183
|
+
<div className="absolute top-1 right-1 flex gap-4 z-[10]">
|
|
184
|
+
<button className="p-4 bg-gray-400" onClick={() => handleZoomIn()}>
|
|
185
|
+
+
|
|
186
|
+
</button>
|
|
187
|
+
<button className="p-4 bg-gray-400" onClick={() => handleZoomOut()}>
|
|
188
|
+
-
|
|
189
|
+
</button>
|
|
190
|
+
</div>
|
|
191
|
+
<LayerView refs={refLayer} statusKey="status" privilegedTags={[
|
|
192
|
+
{
|
|
193
|
+
key: "table",
|
|
194
|
+
items: ["text", "icon"],
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
key: "pax",
|
|
198
|
+
items: ["text", "icon"],
|
|
199
|
+
},
|
|
200
|
+
]}
|
|
188
201
|
// defaultBackground="#000000"
|
|
189
202
|
mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
|
|
190
203
|
handleSelectTable(component);
|
|
@@ -15,7 +15,10 @@ interface LayersProps {
|
|
|
15
15
|
onHighlightGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
|
|
16
16
|
onForceRestoreGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
|
|
17
17
|
selectedTableColor?: string;
|
|
18
|
-
privilegedTags?:
|
|
18
|
+
privilegedTags?: {
|
|
19
|
+
key: string;
|
|
20
|
+
items: string[];
|
|
21
|
+
}[];
|
|
19
22
|
}
|
|
20
|
-
declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags }: LayersProps) => import("react").JSX.Element;
|
|
23
|
+
declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
|
|
21
24
|
export default Layers;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { isEmpty, omit } from "lodash";
|
|
3
3
|
import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
|
|
4
|
-
const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags }) => {
|
|
4
|
+
const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }) => {
|
|
5
5
|
const renderShape = (item) => {
|
|
6
6
|
var _a, _b, _c, _d, _e, _f;
|
|
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
|
-
|
|
10
|
-
const gapBetweenTags = Number(gapTags || 0);
|
|
9
|
+
const gapBetweenTags = Number(gapTags || 20);
|
|
11
10
|
const defaultFontSize = Number(fontSize || 12);
|
|
12
11
|
// Hitung total tinggi semua grup tag (buat center vertikal)
|
|
13
12
|
const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.reduce((sum, tag) => {
|
|
@@ -20,11 +19,16 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
20
19
|
: defaultFontSize; // horizontal = 1 line
|
|
21
20
|
return sum + tagHeight + gapBetweenTags;
|
|
22
21
|
}, 0)) - gapBetweenTags;
|
|
23
|
-
const startY = Number(height) /
|
|
22
|
+
const startY = Number(height) / 3 - totalTagHeight / 2; // titik awal supaya semua di tengah
|
|
24
23
|
let currentY = startY;
|
|
25
|
-
return
|
|
24
|
+
return tags
|
|
25
|
+
.filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.find((p) => p.key === tag.key))
|
|
26
|
+
.map((tag, tagIndex) => {
|
|
26
27
|
var _a;
|
|
27
|
-
const
|
|
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";
|
|
28
32
|
const gap = Number(tag.gap || 2);
|
|
29
33
|
const items = tag.items || [];
|
|
30
34
|
const fontSize = Number(defaultFontSize);
|
|
@@ -37,16 +41,19 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
37
41
|
// naikkan posisi Y untuk grup berikutnya
|
|
38
42
|
currentY += groupHeight + gapBetweenTags;
|
|
39
43
|
// kumpulkan elemen yang akan dirender (bisa mix text + icon)
|
|
40
|
-
const elements = items
|
|
44
|
+
const elements = items
|
|
45
|
+
.filter((item) => itemsPriv.includes(item.type))
|
|
46
|
+
.map((item, i) => {
|
|
41
47
|
var _a, _b;
|
|
42
48
|
const offsetY = isColumn
|
|
43
49
|
? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
|
|
44
50
|
: 0;
|
|
45
51
|
const offsetX = !isColumn
|
|
46
|
-
? i * (fontSize + gap) -
|
|
52
|
+
? i * (fontSize + gap) -
|
|
53
|
+
((items.length - 1) * (fontSize + gap)) / 2
|
|
47
54
|
: 0;
|
|
48
|
-
const posX = centerX + offsetX +
|
|
49
|
-
const posY = centerY + offsetY +
|
|
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);
|
|
50
57
|
const renderSymbol = (symbol) => {
|
|
51
58
|
if (!symbol)
|
|
52
59
|
return null;
|
|
@@ -84,23 +91,23 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
84
91
|
break;
|
|
85
92
|
}
|
|
86
93
|
return (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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>);
|
|
91
98
|
};
|
|
92
99
|
if (item.type === "icon") {
|
|
93
100
|
const iconTag = iconTags === null || iconTags === void 0 ? void 0 : iconTags.find((icon) => icon.key === item.value);
|
|
94
101
|
if (!iconTag)
|
|
95
102
|
return null;
|
|
96
103
|
return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
|
|
97
|
-
|
|
98
|
-
|
|
104
|
+
{iconTag.icon}
|
|
105
|
+
</g>);
|
|
99
106
|
}
|
|
100
107
|
if (item.type === "text") {
|
|
101
|
-
return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle"
|
|
102
|
-
|
|
103
|
-
|
|
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>);
|
|
104
111
|
}
|
|
105
112
|
return null;
|
|
106
113
|
});
|
|
@@ -303,7 +310,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
303
310
|
<circle key={id} cx={width / 2} cy={height / 2} r={Math.min(height, width) / 2} fill={fill} {...commonProps}/>
|
|
304
311
|
{renderTags(tags)}
|
|
305
312
|
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
306
|
-
|
|
313
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
307
314
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
308
315
|
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
309
316
|
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
@@ -312,10 +319,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
312
319
|
"stroke",
|
|
313
320
|
"strokeWidth",
|
|
314
321
|
])} 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
|
-
|
|
316
|
-
|
|
322
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
323
|
+
</text>);
|
|
317
324
|
})}
|
|
318
|
-
|
|
325
|
+
</g>)}
|
|
319
326
|
</g>
|
|
320
327
|
</g>);
|
|
321
328
|
case "table-seat-circle": {
|
|
@@ -384,13 +391,13 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
384
391
|
|
|
385
392
|
{renderTags(tags)}
|
|
386
393
|
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
387
|
-
|
|
394
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
388
395
|
var _a, _b, _c, _d;
|
|
389
396
|
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
|
-
|
|
391
|
-
|
|
397
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
398
|
+
</text>);
|
|
392
399
|
})}
|
|
393
|
-
|
|
400
|
+
</g>)}
|
|
394
401
|
</g>
|
|
395
402
|
</g>);
|
|
396
403
|
}
|
|
@@ -523,7 +530,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
523
530
|
</g>
|
|
524
531
|
{renderTags(tags)}
|
|
525
532
|
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
526
|
-
|
|
533
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
527
534
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
528
535
|
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
529
536
|
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
@@ -532,10 +539,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
532
539
|
"stroke",
|
|
533
540
|
"strokeWidth",
|
|
534
541
|
])} 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">
|
|
535
|
-
|
|
536
|
-
|
|
542
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
543
|
+
</text>);
|
|
537
544
|
})}
|
|
538
|
-
|
|
545
|
+
</g>)}
|
|
539
546
|
</g>
|
|
540
547
|
</g>);
|
|
541
548
|
}
|
|
@@ -641,7 +648,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
641
648
|
{[...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}/>))}
|
|
642
649
|
</g>
|
|
643
650
|
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
644
|
-
|
|
651
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
645
652
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
646
653
|
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
647
654
|
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
@@ -650,10 +657,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
650
657
|
"stroke",
|
|
651
658
|
"strokeWidth",
|
|
652
659
|
])} 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
|
-
|
|
654
|
-
|
|
660
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
661
|
+
</text>);
|
|
655
662
|
})}
|
|
656
|
-
|
|
663
|
+
</g>)}
|
|
657
664
|
</g>
|
|
658
665
|
</g>);
|
|
659
666
|
}
|
|
@@ -761,7 +768,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
761
768
|
</g>
|
|
762
769
|
{renderTags(tags)}
|
|
763
770
|
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
764
|
-
|
|
771
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
765
772
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
766
773
|
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
767
774
|
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
@@ -770,10 +777,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
770
777
|
"stroke",
|
|
771
778
|
"strokeWidth",
|
|
772
779
|
])} 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">
|
|
773
|
-
|
|
774
|
-
|
|
780
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
781
|
+
</text>);
|
|
775
782
|
})}
|
|
776
|
-
|
|
783
|
+
</g>)}
|
|
777
784
|
</g>
|
|
778
785
|
</g>);
|
|
779
786
|
}
|
|
@@ -905,7 +912,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
905
912
|
</g>
|
|
906
913
|
{renderTags(tags)}
|
|
907
914
|
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
908
|
-
|
|
915
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
909
916
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
910
917
|
const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
|
|
911
918
|
const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
|
|
@@ -914,10 +921,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
914
921
|
"stroke",
|
|
915
922
|
"strokeWidth",
|
|
916
923
|
])} 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">
|
|
917
|
-
|
|
918
|
-
|
|
924
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
925
|
+
</text>);
|
|
919
926
|
})}
|
|
920
|
-
|
|
927
|
+
</g>)}
|
|
921
928
|
</g>
|
|
922
929
|
</g>);
|
|
923
930
|
}
|
|
@@ -965,15 +972,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
965
972
|
<g transform={`rotate(${rotation}, 0, 0)`}>
|
|
966
973
|
<image href={src} width={width} height={height} transform={transformRotate} {...commonProps}/>
|
|
967
974
|
{renderTags(tags)}
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
975
|
+
{!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
|
|
976
|
+
{labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
971
977
|
var _a, _b, _c, _d;
|
|
972
978
|
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}>
|
|
973
|
-
|
|
974
|
-
|
|
979
|
+
{_ === null || _ === void 0 ? void 0 : _.label}
|
|
980
|
+
</text>);
|
|
975
981
|
})}
|
|
976
|
-
|
|
982
|
+
</g>)}
|
|
977
983
|
</g>
|
|
978
984
|
</g>);
|
|
979
985
|
case "background":
|