seat-editor 3.4.5 → 3.4.7
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 +5 -0
- package/dist/app/constant.js +3 -0
- package/dist/components/form-tools/label.js +1 -1
- package/dist/components/form-tools/label.jsx +1 -1
- package/dist/components/layer-v4/index.js +13 -11
- package/dist/components/layer-v4/index.jsx +13 -11
- package/dist/features/panel/selected-group.js +1 -1
- package/dist/features/panel/selected-group.jsx +1 -1
- package/package.json +1 -1
package/dist/app/constant.d.ts
CHANGED
|
@@ -277,6 +277,7 @@ export declare const test4: ({
|
|
|
277
277
|
seatCount: number;
|
|
278
278
|
uuid_table: string;
|
|
279
279
|
gapTags: number;
|
|
280
|
+
fontSize: number;
|
|
280
281
|
stroke?: undefined;
|
|
281
282
|
strokeWidth?: undefined;
|
|
282
283
|
text?: undefined;
|
|
@@ -296,6 +297,7 @@ export declare const test4: ({
|
|
|
296
297
|
width: number;
|
|
297
298
|
height: number;
|
|
298
299
|
gapTags: number;
|
|
300
|
+
fontSize: number;
|
|
299
301
|
labels: {
|
|
300
302
|
x: number;
|
|
301
303
|
y: number;
|
|
@@ -421,6 +423,7 @@ export declare const data4: ({
|
|
|
421
423
|
rotation: number;
|
|
422
424
|
openSpace: number;
|
|
423
425
|
seatFill: string;
|
|
426
|
+
fontSize: number;
|
|
424
427
|
radius?: undefined;
|
|
425
428
|
seatCount?: undefined;
|
|
426
429
|
};
|
|
@@ -518,6 +521,7 @@ export declare const data4: ({
|
|
|
518
521
|
fontSize: number;
|
|
519
522
|
rotation: number;
|
|
520
523
|
}[];
|
|
524
|
+
fontSize?: undefined;
|
|
521
525
|
seatCount?: undefined;
|
|
522
526
|
};
|
|
523
527
|
uuid_table?: undefined;
|
|
@@ -576,6 +580,7 @@ export declare const data4: ({
|
|
|
576
580
|
seatCount: number;
|
|
577
581
|
openSpace?: undefined;
|
|
578
582
|
seatFill?: undefined;
|
|
583
|
+
fontSize?: undefined;
|
|
579
584
|
radius?: undefined;
|
|
580
585
|
};
|
|
581
586
|
uuid_table?: undefined;
|
package/dist/app/constant.js
CHANGED
|
@@ -3437,6 +3437,7 @@ export const test4 = [
|
|
|
3437
3437
|
seatCount: 0,
|
|
3438
3438
|
uuid_table: "d088bba0-e990-410e-aea9-08548175a0b9",
|
|
3439
3439
|
gapTags: 20,
|
|
3440
|
+
fontSize: 30,
|
|
3440
3441
|
},
|
|
3441
3442
|
},
|
|
3442
3443
|
{
|
|
@@ -3455,6 +3456,7 @@ export const test4 = [
|
|
|
3455
3456
|
height: 100,
|
|
3456
3457
|
gapTags: 20, //gap antara tags secara vertical,
|
|
3457
3458
|
// status: "hold",
|
|
3459
|
+
fontSize: 20,
|
|
3458
3460
|
labels: [
|
|
3459
3461
|
{
|
|
3460
3462
|
x: 0,
|
|
@@ -3617,6 +3619,7 @@ export const data4 = [
|
|
|
3617
3619
|
// seatCount: 10,
|
|
3618
3620
|
openSpace: 0.3,
|
|
3619
3621
|
seatFill: "#ed8989",
|
|
3622
|
+
fontSize: 50,
|
|
3620
3623
|
// seatPositions: {
|
|
3621
3624
|
// top: 3,
|
|
3622
3625
|
// bottom: 3,
|
|
@@ -9,7 +9,7 @@ const SectionLabel = () => {
|
|
|
9
9
|
if (Number.isNaN(num))
|
|
10
10
|
return 0;
|
|
11
11
|
return Math.min(360, Math.max(0, num));
|
|
12
|
-
} }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), fields.length
|
|
12
|
+
} }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), fields.length > 1 && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Button
|
|
13
13
|
// type="dashed"
|
|
14
14
|
, {
|
|
15
15
|
// type="dashed"
|
|
@@ -40,7 +40,7 @@ const SectionLabel = () => {
|
|
|
40
40
|
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
41
41
|
</Form.Item>
|
|
42
42
|
</Flex>
|
|
43
|
-
{fields.length
|
|
43
|
+
{fields.length > 1 && (<Flex gap={2} className="w-full">
|
|
44
44
|
<Button
|
|
45
45
|
// type="dashed"
|
|
46
46
|
onClick={() => remove(fields.indexOf(field))} className="w-full">
|
|
@@ -37,8 +37,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
37
37
|
const { isShowTagType } = useAppSelector((state) => state.board);
|
|
38
38
|
const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
|
|
39
39
|
const renderShape = (item) => {
|
|
40
|
-
var _a, _b, _c, _d, _e, _f;
|
|
40
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
41
41
|
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;
|
|
42
|
+
const fontSizeFromLabel = (_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.fontSize;
|
|
42
43
|
const renderTags = (data) => {
|
|
43
44
|
var _a;
|
|
44
45
|
const tags = data !== null && data !== void 0 ? data : tagsDummy(((_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.label) || "Table", getIconFromId(id));
|
|
@@ -51,7 +52,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
51
52
|
: undefined;
|
|
52
53
|
if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
|
|
53
54
|
const gapBetweenTags = Number(gapTags || 20);
|
|
54
|
-
const defaultFontSize = Number(fontSize || 12);
|
|
55
|
+
const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
|
|
55
56
|
// Hitung total tinggi semua grup tag (buat center vertikal)
|
|
56
57
|
const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
|
|
57
58
|
var _a;
|
|
@@ -139,10 +140,11 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
139
140
|
const iconTag = icons === null || icons === void 0 ? void 0 : icons.find((icon) => icon.key === item.value);
|
|
140
141
|
if (!iconTag)
|
|
141
142
|
return null;
|
|
142
|
-
|
|
143
|
+
const scale = defaultFontSize / 12;
|
|
144
|
+
return (_createElement("g", Object.assign({}, item, { key: `icon-${tagIndex}-${i}`, transform: `translate(${posX - defaultFontSize}, ${posY - defaultFontSize / 2}) scale(${scale})` }), iconTag.icon));
|
|
143
145
|
}
|
|
144
146
|
if (item.type === "text") {
|
|
145
|
-
return (_createElement("text", Object.assign({}, item, { key: `text-${tagIndex}-${i}`, x: posX, y: posY, textAnchor: "middle", dominantBaseline: "middle", fontSize:
|
|
147
|
+
return (_createElement("text", Object.assign({}, item, { key: `text-${tagIndex}-${i}`, x: posX, y: posY, textAnchor: "middle", dominantBaseline: "middle", fontSize: defaultFontSize }),
|
|
146
148
|
item.value,
|
|
147
149
|
" ",
|
|
148
150
|
renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)));
|
|
@@ -343,7 +345,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
343
345
|
}) }))] })] }, id));
|
|
344
346
|
case "table-seat-circle": {
|
|
345
347
|
const seatCount = item.seatCount;
|
|
346
|
-
const openSpace = (
|
|
348
|
+
const openSpace = (_b = item.openSpace) !== null && _b !== void 0 ? _b : 0;
|
|
347
349
|
// LOCAL SPACE (tanpa x,y)
|
|
348
350
|
const centerX = width / 2;
|
|
349
351
|
const centerY = height / 2;
|
|
@@ -538,10 +540,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
538
540
|
const openSpace = item.openSpace || 0; // from 0 to 0.9
|
|
539
541
|
const r = 10;
|
|
540
542
|
const seatPositions = item.seatPositions;
|
|
541
|
-
const topCount = (
|
|
542
|
-
const bottomCount = (
|
|
543
|
-
const leftCount = (
|
|
544
|
-
const rightCount = (
|
|
543
|
+
const topCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _c !== void 0 ? _c : 0;
|
|
544
|
+
const bottomCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _d !== void 0 ? _d : 0;
|
|
545
|
+
const leftCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _e !== void 0 ? _e : 0;
|
|
546
|
+
const rightCount = (_f = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _f !== void 0 ? _f : 0;
|
|
545
547
|
// split seats evenly on top and bottom
|
|
546
548
|
const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
|
|
547
549
|
const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
|
|
@@ -682,12 +684,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
682
684
|
radius: seatRadius,
|
|
683
685
|
spacing: spacingHeight,
|
|
684
686
|
}).map((cy) => ({ cx: width - seatRadius * 0.1, cy, id: "right" }));
|
|
685
|
-
const seats = (
|
|
687
|
+
const seats = (_g = [
|
|
686
688
|
...topSeats,
|
|
687
689
|
...bottomSeats,
|
|
688
690
|
...leftSeats,
|
|
689
691
|
...rightSeats,
|
|
690
|
-
]) === null ||
|
|
692
|
+
]) === null || _g === void 0 ? void 0 : _g.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
|
|
691
693
|
cx: seat.cx,
|
|
692
694
|
cy: seat.cy,
|
|
693
695
|
r: seatRadius,
|
|
@@ -35,8 +35,9 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
35
35
|
const { isShowTagType } = useAppSelector((state) => state.board);
|
|
36
36
|
const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
|
|
37
37
|
const renderShape = (item) => {
|
|
38
|
-
var _a, _b, _c, _d, _e, _f;
|
|
38
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
39
39
|
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;
|
|
40
|
+
const fontSizeFromLabel = (_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.fontSize;
|
|
40
41
|
const renderTags = (data) => {
|
|
41
42
|
var _a;
|
|
42
43
|
const tags = data !== null && data !== void 0 ? data : tagsDummy(((_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.label) || "Table", getIconFromId(id));
|
|
@@ -49,7 +50,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
49
50
|
: undefined;
|
|
50
51
|
if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
|
|
51
52
|
const gapBetweenTags = Number(gapTags || 20);
|
|
52
|
-
const defaultFontSize = Number(fontSize || 12);
|
|
53
|
+
const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
|
|
53
54
|
// Hitung total tinggi semua grup tag (buat center vertikal)
|
|
54
55
|
const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
|
|
55
56
|
var _a;
|
|
@@ -139,12 +140,13 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
139
140
|
const iconTag = icons === null || icons === void 0 ? void 0 : icons.find((icon) => icon.key === item.value);
|
|
140
141
|
if (!iconTag)
|
|
141
142
|
return null;
|
|
142
|
-
|
|
143
|
+
const scale = defaultFontSize / 12;
|
|
144
|
+
return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - defaultFontSize}, ${posY - defaultFontSize / 2}) scale(${scale})`}>
|
|
143
145
|
{iconTag.icon}
|
|
144
146
|
</g>);
|
|
145
147
|
}
|
|
146
148
|
if (item.type === "text") {
|
|
147
|
-
return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={
|
|
149
|
+
return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" fontSize={defaultFontSize}>
|
|
148
150
|
{item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
|
|
149
151
|
</text>);
|
|
150
152
|
}
|
|
@@ -371,7 +373,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
371
373
|
</g>);
|
|
372
374
|
case "table-seat-circle": {
|
|
373
375
|
const seatCount = item.seatCount;
|
|
374
|
-
const openSpace = (
|
|
376
|
+
const openSpace = (_b = item.openSpace) !== null && _b !== void 0 ? _b : 0;
|
|
375
377
|
// LOCAL SPACE (tanpa x,y)
|
|
376
378
|
const centerX = width / 2;
|
|
377
379
|
const centerY = height / 2;
|
|
@@ -594,10 +596,10 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
594
596
|
const openSpace = item.openSpace || 0; // from 0 to 0.9
|
|
595
597
|
const r = 10;
|
|
596
598
|
const seatPositions = item.seatPositions;
|
|
597
|
-
const topCount = (
|
|
598
|
-
const bottomCount = (
|
|
599
|
-
const leftCount = (
|
|
600
|
-
const rightCount = (
|
|
599
|
+
const topCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _c !== void 0 ? _c : 0;
|
|
600
|
+
const bottomCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _d !== void 0 ? _d : 0;
|
|
601
|
+
const leftCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _e !== void 0 ? _e : 0;
|
|
602
|
+
const rightCount = (_f = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _f !== void 0 ? _f : 0;
|
|
601
603
|
// split seats evenly on top and bottom
|
|
602
604
|
const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
|
|
603
605
|
const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
|
|
@@ -754,12 +756,12 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
|
|
|
754
756
|
radius: seatRadius,
|
|
755
757
|
spacing: spacingHeight,
|
|
756
758
|
}).map((cy) => ({ cx: width - seatRadius * 0.1, cy, id: "right" }));
|
|
757
|
-
const seats = (
|
|
759
|
+
const seats = (_g = [
|
|
758
760
|
...topSeats,
|
|
759
761
|
...bottomSeats,
|
|
760
762
|
...leftSeats,
|
|
761
763
|
...rightSeats,
|
|
762
|
-
]) === null ||
|
|
764
|
+
]) === null || _g === void 0 ? void 0 : _g.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
|
|
763
765
|
cx: seat.cx,
|
|
764
766
|
cy: seat.cy,
|
|
765
767
|
r: seatRadius,
|
|
@@ -5,7 +5,7 @@ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
|
|
|
5
5
|
import SeatCircle from "./table-seat-circle";
|
|
6
6
|
import SeatSquare from "./table-seat-square";
|
|
7
7
|
import { useAppSelector } from "../../hooks/use-redux";
|
|
8
|
-
import SectionLabel from "
|
|
8
|
+
import SectionLabel from "../../components/form-tools/label";
|
|
9
9
|
const { Option } = Select;
|
|
10
10
|
const SelectedGroup = () => {
|
|
11
11
|
var _a;
|
|
@@ -4,7 +4,7 @@ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
|
|
|
4
4
|
import SeatCircle from "./table-seat-circle";
|
|
5
5
|
import SeatSquare from "./table-seat-square";
|
|
6
6
|
import { useAppSelector } from "../../hooks/use-redux";
|
|
7
|
-
import SectionLabel from "
|
|
7
|
+
import SectionLabel from "../../components/form-tools/label";
|
|
8
8
|
const { Option } = Select;
|
|
9
9
|
const SelectedGroup = () => {
|
|
10
10
|
var _a;
|