seat-editor 3.5.62 → 3.5.64

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.
@@ -160,6 +160,18 @@ const boardSlice = createSlice({
160
160
  { components, extraComponents, boundingBox, backgroundColor },
161
161
  ];
162
162
  },
163
+ setScalingFontSize: (state, action) => {
164
+ state.components = state.components.map((component) => {
165
+ var _a, _b, _c, _d, _e, _f;
166
+ if (((_a = action.payload) === null || _a === void 0 ? void 0 : _a.type) === "type-1") {
167
+ return Object.assign(Object.assign({}, component), { fontSizeType1: (_c = (_b = action.payload) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1 });
168
+ }
169
+ if (((_d = action.payload) === null || _d === void 0 ? void 0 : _d.type) === "type-2") {
170
+ return Object.assign(Object.assign({}, component), { fontSizeType2: (_f = (_e = action.payload) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 1 });
171
+ }
172
+ return component;
173
+ });
174
+ },
163
175
  },
164
176
  });
165
177
  export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent, } = boardSlice.actions;
@@ -79,7 +79,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
79
79
  const [selectedLines, setSelectedLines] = useState(null);
80
80
  useEffect(() => {
81
81
  if (activeTool === "select" || activeTool !== "select") {
82
- (!["text", "polygon"].includes(selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.shape)) && handleUnSelectComponent();
82
+ !["text", "polygon"].includes(selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.shape) &&
83
+ handleUnSelectComponent();
83
84
  }
84
85
  if (activeTool !== "polygon") {
85
86
  isOnMakePolygonRef.current = false;
@@ -427,7 +428,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
427
428
  const idNewPolygonRef = useRef("");
428
429
  useEffect(() => {
429
430
  const id = idNewPolygonRef.current;
430
- const findById = extraComponentsState.find(item => item.id === id);
431
+ const findById = extraComponentsState.find((item) => item.id === id);
431
432
  if (findById) {
432
433
  const svg = svgRef.current;
433
434
  const { g } = getAttributeElement(svg, id);
@@ -1391,28 +1392,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1391
1392
  const newPoints = Object.assign(Object.assign({}, selectedComponent), { points: [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, newCoord] });
1392
1393
  (_c = svg.querySelector("#polyline-helper")) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
1393
1394
  if (closing && ((_d = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) === null || _d === void 0 ? void 0 : _d.length) > 2) {
1394
- const { inner, g } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
1395
+ const { inner } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
1395
1396
  const { height, width } = getGlobalBBox(svg, inner);
1396
1397
  isOnMakePolygonRef.current = false;
1397
1398
  polygonElementRef.current = [];
1398
- addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width, height }));
1399
- // setSelectedComponent(newPoints);
1400
- // setTimeout(() => {
1401
- // const boxGroup = getGlobalBBox(svg, g);
1402
- // let boxSelection = {
1403
- // ...newPoints,
1404
- // ...boxGroup,
1405
- // rotation: 0,
1406
- // shape: "selection-box",
1407
- // };
1408
- // setSelectedLines(boxSelection);
1409
- // },100)
1410
- // dispatch({
1411
- // type: "panel/setSelectedComponent",
1412
- // payload: newPoints,
1413
- // });
1414
- // dispatch({ type: "panel/setShow", payload: true });
1415
- // dispatch({ type: "tool/setActiveTool", payload: "select" });
1399
+ addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width,
1400
+ height, labels: [
1401
+ { label: "", x: 0, y: 0, fontSize: 12, fontColor: "#000000", rotation: 0 },
1402
+ ], opacity: 0.5, rotation: 0, strokeWidth: 0 }));
1416
1403
  (_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
1417
1404
  (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
1418
1405
  idNewPolygonRef.current = `${newPoints === null || newPoints === void 0 ? void 0 : newPoints.id}`;
@@ -1952,6 +1939,39 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1952
1939
  setCursor("auto");
1953
1940
  }
1954
1941
  }, [activeTool]);
1942
+ const scalingFontSize = [
1943
+ {
1944
+ label: "small",
1945
+ value: 0.5,
1946
+ },
1947
+ {
1948
+ label: "medium",
1949
+ value: 1,
1950
+ },
1951
+ {
1952
+ label: "large",
1953
+ value: 1.5,
1954
+ },
1955
+ ];
1956
+ // const handleClickButtonFontScaling = (value: number, type: string) => {
1957
+ // dispatch({
1958
+ // type: "board/setScalingFontSize",
1959
+ // payload: {
1960
+ // value,
1961
+ // type,
1962
+ // },
1963
+ // });
1964
+ // };
1965
+ // const valuesScalingFontSize = () => {
1966
+ // const pickOneSample = componentsState?.[0];
1967
+ // if (isShowTagType === "type-1") {
1968
+ // console.log({ pickOneSample });
1969
+ // return pickOneSample?.fontSizeType1;
1970
+ // }
1971
+ // if (isShowTagType === "type-2") {
1972
+ // return pickOneSample?.fontSizeType2;
1973
+ // }
1974
+ // };
1955
1975
  return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
1956
1976
  select: false,
1957
1977
  move: false,
@@ -78,7 +78,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
78
78
  const [selectedLines, setSelectedLines] = useState(null);
79
79
  useEffect(() => {
80
80
  if (activeTool === "select" || activeTool !== "select") {
81
- (!["text", "polygon"].includes(selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.shape)) && handleUnSelectComponent();
81
+ !["text", "polygon"].includes(selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.shape) &&
82
+ handleUnSelectComponent();
82
83
  }
83
84
  if (activeTool !== "polygon") {
84
85
  isOnMakePolygonRef.current = false;
@@ -426,7 +427,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
426
427
  const idNewPolygonRef = useRef("");
427
428
  useEffect(() => {
428
429
  const id = idNewPolygonRef.current;
429
- const findById = extraComponentsState.find(item => item.id === id);
430
+ const findById = extraComponentsState.find((item) => item.id === id);
430
431
  if (findById) {
431
432
  const svg = svgRef.current;
432
433
  const { g } = getAttributeElement(svg, id);
@@ -1390,28 +1391,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1390
1391
  const newPoints = Object.assign(Object.assign({}, selectedComponent), { points: [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, newCoord] });
1391
1392
  (_c = svg.querySelector("#polyline-helper")) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
1392
1393
  if (closing && ((_d = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) === null || _d === void 0 ? void 0 : _d.length) > 2) {
1393
- const { inner, g } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
1394
+ const { inner } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
1394
1395
  const { height, width } = getGlobalBBox(svg, inner);
1395
1396
  isOnMakePolygonRef.current = false;
1396
1397
  polygonElementRef.current = [];
1397
- addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width, height }));
1398
- // setSelectedComponent(newPoints);
1399
- // setTimeout(() => {
1400
- // const boxGroup = getGlobalBBox(svg, g);
1401
- // let boxSelection = {
1402
- // ...newPoints,
1403
- // ...boxGroup,
1404
- // rotation: 0,
1405
- // shape: "selection-box",
1406
- // };
1407
- // setSelectedLines(boxSelection);
1408
- // },100)
1409
- // dispatch({
1410
- // type: "panel/setSelectedComponent",
1411
- // payload: newPoints,
1412
- // });
1413
- // dispatch({ type: "panel/setShow", payload: true });
1414
- // dispatch({ type: "tool/setActiveTool", payload: "select" });
1398
+ addComponents(Object.assign(Object.assign({}, newPoints), { x: 0, y: 0, width,
1399
+ height, labels: [
1400
+ { label: "", x: 0, y: 0, fontSize: 12, fontColor: "#000000", rotation: 0 },
1401
+ ], opacity: 0.5, rotation: 0, strokeWidth: 0 }));
1415
1402
  (_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
1416
1403
  (_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
1417
1404
  idNewPolygonRef.current = `${newPoints === null || newPoints === void 0 ? void 0 : newPoints.id}`;
@@ -1951,8 +1938,42 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1951
1938
  setCursor("auto");
1952
1939
  }
1953
1940
  }, [activeTool]);
1941
+ const scalingFontSize = [
1942
+ {
1943
+ label: "small",
1944
+ value: 0.5,
1945
+ },
1946
+ {
1947
+ label: "medium",
1948
+ value: 1,
1949
+ },
1950
+ {
1951
+ label: "large",
1952
+ value: 1.5,
1953
+ },
1954
+ ];
1955
+ // const handleClickButtonFontScaling = (value: number, type: string) => {
1956
+ // dispatch({
1957
+ // type: "board/setScalingFontSize",
1958
+ // payload: {
1959
+ // value,
1960
+ // type,
1961
+ // },
1962
+ // });
1963
+ // };
1964
+ // const valuesScalingFontSize = () => {
1965
+ // const pickOneSample = componentsState?.[0];
1966
+ // if (isShowTagType === "type-1") {
1967
+ // console.log({ pickOneSample });
1968
+ // return pickOneSample?.fontSizeType1;
1969
+ // }
1970
+ // if (isShowTagType === "type-2") {
1971
+ // return pickOneSample?.fontSizeType2;
1972
+ // }
1973
+ // };
1954
1974
  return (<>
1955
1975
  <ModalPreview>
1976
+
1956
1977
  <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
1957
1978
  select: false,
1958
1979
  move: false,
@@ -1960,7 +1981,24 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
1960
1981
  drop: false,
1961
1982
  rightClick: false,
1962
1983
  }} defaultBoundingBox={boundingBox}/>
1963
- <div className="flex gap-2 mt-2">
1984
+ {/* {isShowTagType !== "default" && (
1985
+ <div className="flex gap-2 mt-2">
1986
+ {scalingFontSize?.map((item) => (
1987
+ <Button
1988
+ type="default"
1989
+ htmlType="button"
1990
+ onClick={() =>
1991
+ handleClickButtonFontScaling(item.value, isShowTagType)
1992
+ }
1993
+ >
1994
+ {item.label}
1995
+ </Button>
1996
+ ))}
1997
+ <span>{valuesScalingFontSize()}</span>
1998
+ <InputNumber prefix="x" value={valuesScalingFontSize()} />
1999
+ </div>
2000
+ )} */}
2001
+ <div className="flex gap-2 mt-2">
1964
2002
  <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
1965
2003
  <Radio value="default">Customer View</Radio>
1966
2004
  <Radio value="type-1">Layout View</Radio>
@@ -72,6 +72,7 @@ const ControlPanels = (props) => {
72
72
  }
73
73
  }, [tool, show]);
74
74
  useEffect(() => {
75
+ var _a;
75
76
  if (selectedComponent) {
76
77
  resetPlaceholders();
77
78
  const id = values === null || values === void 0 ? void 0 : values.id;
@@ -139,6 +140,8 @@ const ControlPanels = (props) => {
139
140
  key,
140
141
  showAllValueNotSame(selectedGroup, key),
141
142
  ]));
143
+ const allLabels = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => { var _a; return (_a = item.labels) === null || _a === void 0 ? void 0 : _a[0]; });
144
+ const fontSizeLabel = showAllValueNotSame(allLabels, "fontSize");
142
145
  // build values
143
146
  const values = Object.fromEntries(fields.map((key) => [
144
147
  key,
@@ -146,9 +149,12 @@ const ControlPanels = (props) => {
146
149
  ? bufferValueForm.value
147
150
  : getValueIfSame(selectedGroup, key),
148
151
  ]));
152
+ const valuesFontSizeSame = (allLabels === null || allLabels === void 0 ? void 0 : allLabels.every((item) => { var _a; return (item === null || item === void 0 ? void 0 : item.fontSize) === ((_a = allLabels[0]) === null || _a === void 0 ? void 0 : _a.fontSize); }))
153
+ ? (_a = allLabels[0]) === null || _a === void 0 ? void 0 : _a.fontSize
154
+ : undefined;
149
155
  // apply
150
- setPlaceholderBulk(placeholder);
151
- form.setFieldsValue(values);
156
+ setPlaceholderBulk(Object.assign(Object.assign({}, placeholder), { fontSizeLabel: fontSizeLabel }));
157
+ form.setFieldsValue(Object.assign(Object.assign({}, values), { fontSizeLabel: valuesFontSizeSame }));
152
158
  setGroupBufferSelected(selectedGroup);
153
159
  if (notSameGroup) {
154
160
  form.setFieldValue(`${bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key}`, getValueIfSame(selectedGroup, bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key));
@@ -243,19 +249,26 @@ const ControlPanels = (props) => {
243
249
  }
244
250
  if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
245
251
  isProgrammaticChange.current = false;
246
- const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, openSpace, } = newValues;
252
+ const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, openSpace, fontSizeLabel, } = newValues;
247
253
  const seatPositionsNew = (_c = Object.values(seatPositions)) === null || _c === void 0 ? void 0 : _c.some((item) => _.isNaN(item));
248
- const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: Number(opacity) / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatFill !== undefined ? { seatFill } : {})), (labels !== undefined ? { labels } : {})), (seatPositions !== undefined
249
- ? {
250
- seatPositions: seatPositionsNew
251
- ? getSeatPosition(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey])
252
- : seatPositions,
253
- }
254
- : {})), (seatCount !== undefined
255
- ? {
256
- seatCount: seatCount !== null && seatCount !== void 0 ? seatCount : getSeatCount(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey]),
257
- }
258
- : {})), (openSpace !== undefined ? { openSpace } : {}))));
254
+ const updatedGroup = selectedGroup.map((comp) => {
255
+ var _a;
256
+ return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: Number(opacity) / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined
257
+ ? {
258
+ seatPositions: seatPositionsNew
259
+ ? getSeatPosition(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey])
260
+ : seatPositions,
261
+ }
262
+ : {})), (seatCount !== undefined
263
+ ? {
264
+ seatCount: seatCount !== null && seatCount !== void 0 ? seatCount : getSeatCount(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey]),
265
+ }
266
+ : {})), (openSpace !== undefined ? { openSpace } : {})), (fontSizeLabel !== undefined
267
+ ? {
268
+ labels: ((_a = comp.labels) !== null && _a !== void 0 ? _a : []).map((label) => (Object.assign(Object.assign({}, label), { fontSize: fontSizeLabel }))),
269
+ }
270
+ : {})));
271
+ });
259
272
  let minX = Infinity;
260
273
  let minY = Infinity;
261
274
  let maxX = -Infinity;
@@ -71,6 +71,7 @@ const ControlPanels = (props) => {
71
71
  }
72
72
  }, [tool, show]);
73
73
  useEffect(() => {
74
+ var _a;
74
75
  if (selectedComponent) {
75
76
  resetPlaceholders();
76
77
  const id = values === null || values === void 0 ? void 0 : values.id;
@@ -138,6 +139,8 @@ const ControlPanels = (props) => {
138
139
  key,
139
140
  showAllValueNotSame(selectedGroup, key),
140
141
  ]));
142
+ const allLabels = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => { var _a; return (_a = item.labels) === null || _a === void 0 ? void 0 : _a[0]; });
143
+ const fontSizeLabel = showAllValueNotSame(allLabels, "fontSize");
141
144
  // build values
142
145
  const values = Object.fromEntries(fields.map((key) => [
143
146
  key,
@@ -145,9 +148,12 @@ const ControlPanels = (props) => {
145
148
  ? bufferValueForm.value
146
149
  : getValueIfSame(selectedGroup, key),
147
150
  ]));
151
+ const valuesFontSizeSame = (allLabels === null || allLabels === void 0 ? void 0 : allLabels.every((item) => { var _a; return (item === null || item === void 0 ? void 0 : item.fontSize) === ((_a = allLabels[0]) === null || _a === void 0 ? void 0 : _a.fontSize); }))
152
+ ? (_a = allLabels[0]) === null || _a === void 0 ? void 0 : _a.fontSize
153
+ : undefined;
148
154
  // apply
149
- setPlaceholderBulk(placeholder);
150
- form.setFieldsValue(values);
155
+ setPlaceholderBulk(Object.assign(Object.assign({}, placeholder), { fontSizeLabel: fontSizeLabel }));
156
+ form.setFieldsValue(Object.assign(Object.assign({}, values), { fontSizeLabel: valuesFontSizeSame }));
151
157
  setGroupBufferSelected(selectedGroup);
152
158
  if (notSameGroup) {
153
159
  form.setFieldValue(`${bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key}`, getValueIfSame(selectedGroup, bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key));
@@ -242,19 +248,26 @@ const ControlPanels = (props) => {
242
248
  }
243
249
  if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
244
250
  isProgrammaticChange.current = false;
245
- const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels, openSpace, } = newValues;
251
+ const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, openSpace, fontSizeLabel, } = newValues;
246
252
  const seatPositionsNew = (_c = Object.values(seatPositions)) === null || _c === void 0 ? void 0 : _c.some((item) => _.isNaN(item));
247
- const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: Number(opacity) / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatFill !== undefined ? { seatFill } : {})), (labels !== undefined ? { labels } : {})), (seatPositions !== undefined
248
- ? {
249
- seatPositions: seatPositionsNew
250
- ? getSeatPosition(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey])
251
- : seatPositions,
252
- }
253
- : {})), (seatCount !== undefined
254
- ? {
255
- seatCount: seatCount !== null && seatCount !== void 0 ? seatCount : getSeatCount(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey]),
256
- }
257
- : {})), (openSpace !== undefined ? { openSpace } : {}))));
253
+ const updatedGroup = selectedGroup.map((comp) => {
254
+ var _a;
255
+ return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity: Number(opacity) / 100 } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined
256
+ ? {
257
+ seatPositions: seatPositionsNew
258
+ ? getSeatPosition(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey])
259
+ : seatPositions,
260
+ }
261
+ : {})), (seatCount !== undefined
262
+ ? {
263
+ seatCount: seatCount !== null && seatCount !== void 0 ? seatCount : getSeatCount(shape, comp, comp === null || comp === void 0 ? void 0 : comp[seatKey]),
264
+ }
265
+ : {})), (openSpace !== undefined ? { openSpace } : {})), (fontSizeLabel !== undefined
266
+ ? {
267
+ labels: ((_a = comp.labels) !== null && _a !== void 0 ? _a : []).map((label) => (Object.assign(Object.assign({}, label), { fontSize: fontSizeLabel }))),
268
+ }
269
+ : {})));
270
+ });
258
271
  let minX = Infinity;
259
272
  let minY = Infinity;
260
273
  let maxX = -Infinity;
@@ -44,6 +44,6 @@ const SelectedGroup = ({ action, }) => {
44
44
  if (Number.isNaN(num))
45
45
  return null;
46
46
  return Math.min(100, Math.max(0, num));
47
- }, suffix: "%" }) })] })] })] }) }));
47
+ }, suffix: "%" }) }), _jsx(Form.Item, { label: "Font Size", name: "fontSizeLabel", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "fontSizeLabel", suffix: "px", style: { width: "100%" }, placeholder: placeholders["fontSizeLabel"] }) })] })] })] }) }));
48
48
  };
49
49
  export default SelectedGroup;
@@ -122,6 +122,9 @@ const SelectedGroup = ({ action, }) => {
122
122
  return Math.min(100, Math.max(0, num));
123
123
  }} suffix="%"/>
124
124
  </Form.Item>
125
+ <Form.Item label="Font Size" name={"fontSizeLabel"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
126
+ <InputNumber name={"fontSizeLabel"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["fontSizeLabel"]}/>
127
+ </Form.Item>
125
128
  </Flex>
126
129
  {/* {!allExtraComponent && <SectionLabel />} */}
127
130
  {/* </>
@@ -52,14 +52,30 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
52
52
  const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
53
53
  const defaultFormatValue = (width, height, src, id, x, y) => ({
54
54
  id: id ? String(id) : `${Date.now()}`,
55
- x: x || (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX) < 10 ? 10 : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX)),
56
- y: y || (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY) < 10 ? 10 : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY)),
55
+ x: x ||
56
+ (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX) < 10
57
+ ? 10
58
+ : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX)),
59
+ y: y ||
60
+ (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY) < 10
61
+ ? 10
62
+ : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY)),
57
63
  width: width < 1 ? 200 : width,
58
64
  height: height < 1 ? 200 : height,
59
65
  rotation: 0,
60
66
  shape: name,
61
67
  src,
62
68
  opacity: 1,
69
+ strokeWidth: 0,
70
+ labels: [
71
+ {
72
+ label: "",
73
+ x: 0,
74
+ y: 0,
75
+ rotation: 0,
76
+ fontSize: 12,
77
+ },
78
+ ],
63
79
  });
64
80
  const propsUpload = {
65
81
  name: "file",
@@ -190,7 +206,8 @@ const UploadToolForm = (props) => {
190
206
  const isExtraComponent = extraComponents.some((item) => item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
191
207
  const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
192
208
  return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Shape" }), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && !isExtraComponent && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
193
- const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
209
+ const disabled = item.value === "table-seat-rect-circle" &&
210
+ (maxSeat > 4 || maxSeat < 4);
194
211
  return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
195
212
  ? `Circle Type 2 (only for 4 ${seatKey})`
196
213
  : item.label })] }) }, item.value));
@@ -51,14 +51,30 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
51
51
  const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
52
52
  const defaultFormatValue = (width, height, src, id, x, y) => ({
53
53
  id: id ? String(id) : `${Date.now()}`,
54
- x: x || (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX) < 10 ? 10 : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX)),
55
- y: y || (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY) < 10 ? 10 : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY)),
54
+ x: x ||
55
+ (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX) < 10
56
+ ? 10
57
+ : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX)),
58
+ y: y ||
59
+ (Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY) < 10
60
+ ? 10
61
+ : Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY)),
56
62
  width: width < 1 ? 200 : width,
57
63
  height: height < 1 ? 200 : height,
58
64
  rotation: 0,
59
65
  shape: name,
60
66
  src,
61
67
  opacity: 1,
68
+ strokeWidth: 0,
69
+ labels: [
70
+ {
71
+ label: "",
72
+ x: 0,
73
+ y: 0,
74
+ rotation: 0,
75
+ fontSize: 12,
76
+ },
77
+ ],
62
78
  });
63
79
  const propsUpload = {
64
80
  name: "file",
@@ -223,7 +239,8 @@ const UploadToolForm = (props) => {
223
239
  <Form.Item label="Name" name="shape" className="w-full">
224
240
  <Select className="w-full">
225
241
  {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
226
- const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
242
+ const disabled = item.value === "table-seat-rect-circle" &&
243
+ (maxSeat > 4 || maxSeat < 4);
227
244
  return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
228
245
  <Flex gap={5} align="center" justify="between">
229
246
  {item.icon}
@@ -111,9 +111,10 @@ export function getTotalSeats(position) {
111
111
  return top + right + bottom + left;
112
112
  }
113
113
  export function isSameAllByKey(arr, key) {
114
+ var _a;
114
115
  if (!arr || arr.length === 0)
115
116
  return false;
116
- const firstValue = arr[0][key];
117
+ const firstValue = (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key];
117
118
  return arr.every((item) => (item === null || item === void 0 ? void 0 : item[key]) === firstValue);
118
119
  }
119
120
  export function getValueIfSame(arr, key) {
@@ -140,6 +141,7 @@ export function getAllValuesKey(arr, key) {
140
141
  .filter((value, index, self) => self.indexOf(value) === index);
141
142
  }
142
143
  export function showAllValueNotSame(arr, key) {
144
+ var _a;
143
145
  if (key === "opacity") {
144
146
  return !isSameAllByKey(arr, key)
145
147
  ? `${getAllValuesKey(arr, key)
@@ -149,7 +151,7 @@ export function showAllValueNotSame(arr, key) {
149
151
  }
150
152
  return !isSameAllByKey(arr, key)
151
153
  ? `${getAllValuesKey(arr, key)}`
152
- : `${arr[0][key]}`;
154
+ : `${(_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key]}`;
153
155
  }
154
156
  export const objectDataKlenik = [
155
157
  "width",
@@ -27,6 +27,7 @@ const LayerView = (props) => {
27
27
  x: 0,
28
28
  y: 0,
29
29
  visible: false,
30
+ isBottom: false
30
31
  });
31
32
  const isDragging = useRef(false);
32
33
  const [panningGroup, setPanningGroup] = useState(false);
@@ -497,10 +498,12 @@ const LayerView = (props) => {
497
498
  newY = relY;
498
499
  }
499
500
  const rightClick = e.button === 2 && !dataGroupEmty && allowTooltip;
501
+ const isBottom = relY > centerY;
500
502
  setTooltip({
501
- x: newX / scale,
502
- y: newY / scale,
503
+ x: newX / getScaleTransform,
504
+ y: newY / getScaleTransform,
503
505
  visible: rightClick,
506
+ isBottom
504
507
  });
505
508
  const findDayaById = originalData({ id: dataId, type: "find" });
506
509
  const now = Date.now();
@@ -683,6 +686,6 @@ const LayerView = (props) => {
683
686
  // pointerEvents: disabled ? "none" : "all",
684
687
  touchAction: "none",
685
688
  userSelect: "none",
686
- } }, props.svgProps, { children: [hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", clipPath: "url(#contentCrop)", children: _jsx(Layers, { components: componentsAll, selectedTable: selectedTable, iconTags: iconTags, eventMatchTable: eventMatchTable, privilegedTags: privilegedTags }) })] })), tooltip.visible && (_jsx("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / getScaleTransform})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children }))] }) }))] })));
689
+ } }, props.svgProps, { children: [hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", clipPath: "url(#contentCrop)", children: _jsx(Layers, { components: componentsAll, selectedTable: selectedTable, iconTags: iconTags, eventMatchTable: eventMatchTable, privilegedTags: privilegedTags }) })] })), tooltip.visible && (_jsxs("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / getScaleTransform}) ${tooltip.isBottom ? "translateY(-100%)" : ""}`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: [_jsxs("div", { className: "tooltip-content", children: [_jsx("h1", { children: "Tooltip" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" }), _jsx("p", { children: "test" })] }), tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children] }))] }) }))] })));
687
690
  };
688
691
  export default LayerView;
@@ -26,6 +26,7 @@ const LayerView = (props) => {
26
26
  x: 0,
27
27
  y: 0,
28
28
  visible: false,
29
+ isBottom: false
29
30
  });
30
31
  const isDragging = useRef(false);
31
32
  const [panningGroup, setPanningGroup] = useState(false);
@@ -496,10 +497,12 @@ const LayerView = (props) => {
496
497
  newY = relY;
497
498
  }
498
499
  const rightClick = e.button === 2 && !dataGroupEmty && allowTooltip;
500
+ const isBottom = relY > centerY;
499
501
  setTooltip({
500
- x: newX / scale,
501
- y: newY / scale,
502
+ x: newX / getScaleTransform,
503
+ y: newY / getScaleTransform,
502
504
  visible: rightClick,
505
+ isBottom
503
506
  });
504
507
  const findDayaById = originalData({ id: dataId, type: "find" });
505
508
  const now = Date.now();
@@ -706,7 +709,20 @@ const LayerView = (props) => {
706
709
  </g>
707
710
  {/* 🧠 Ghost universal */}
708
711
  </svg>
709
- {tooltip.visible && (<div className={`seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`} style={Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / getScaleTransform})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style)}>
712
+ {tooltip.visible && (<div className={`seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`} style={Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / getScaleTransform}) ${tooltip.isBottom ? "translateY(-100%)" : ""}`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style)}>
713
+ <div className="tooltip-content">
714
+ <h1>Tooltip</h1>
715
+ <p>test</p>
716
+ <p>test</p>
717
+ <p>test</p>
718
+ <p>test</p>
719
+ <p>test</p>
720
+ <p>test</p>
721
+ <p>test</p>
722
+ <p>test</p>
723
+ <p>test</p>
724
+
725
+ </div>
710
726
  {tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children}
711
727
  </div>)}
712
728
  </TransformComponent>
@@ -40,6 +40,9 @@ export const AntdProvider = ({ children, themeColor }) => {
40
40
  },
41
41
  Select: {
42
42
  optionHeight: 40,
43
+ },
44
+ Segmented: {
45
+ itemSelectedBg: "#000000"
43
46
  }
44
47
  },
45
48
  }, children: children }) }));
@@ -40,6 +40,9 @@ export const AntdProvider = ({ children, themeColor }) => {
40
40
  },
41
41
  Select: {
42
42
  optionHeight: 40,
43
+ },
44
+ Segmented: {
45
+ itemSelectedBg: "#000000"
43
46
  }
44
47
  },
45
48
  }}>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "seat-editor",
3
- "version": "3.5.62",
3
+ "version": "3.5.64",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",