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.
@@ -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;
@@ -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 < 2 && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Button
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 < 2 && (<Flex gap={2} className="w-full">
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
- return (_createElement("g", Object.assign({}, item, { key: `icon-${tagIndex}-${i}`, transform: `translate(${posX - 10}, ${posY - 10})` }), iconTag.icon));
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: (Number(defaultFontSize) * 3) / 4 }),
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 = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
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 = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
542
- const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
543
- const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
544
- const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
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 = (_f = [
687
+ const seats = (_g = [
686
688
  ...topSeats,
687
689
  ...bottomSeats,
688
690
  ...leftSeats,
689
691
  ...rightSeats,
690
- ]) === null || _f === void 0 ? void 0 : _f.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
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
- return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
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={(Number(defaultFontSize) * 3) / 4}>
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 = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
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 = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
598
- const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
599
- const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
600
- const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
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 = (_f = [
759
+ const seats = (_g = [
758
760
  ...topSeats,
759
761
  ...bottomSeats,
760
762
  ...leftSeats,
761
763
  ...rightSeats,
762
- ]) === null || _f === void 0 ? void 0 : _f.map((seat) => (Object.assign(Object.assign({}, seat), { d: arcByDirection({
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 "@/components/form-tools/label";
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 "@/components/form-tools/label";
7
+ import SectionLabel from "../../components/form-tools/label";
8
8
  const { Option } = Select;
9
9
  const SelectedGroup = () => {
10
10
  var _a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.4.5",
3
+ "version": "3.4.7",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",