seat-editor 3.1.16 → 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.js
CHANGED
|
@@ -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,12 +1,11 @@
|
|
|
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
|
-
var _a;
|
|
10
9
|
const gapBetweenTags = Number(gapTags || 20);
|
|
11
10
|
const defaultFontSize = Number(fontSize || 12);
|
|
12
11
|
// Hitung total tinggi semua grup tag (buat center vertikal)
|
|
@@ -22,9 +21,14 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
22
21
|
}, 0)) - gapBetweenTags;
|
|
23
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" fontSize={Number(defaultFontSize) * 3 / 4}>
|
|
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":
|