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.
- package/dist/features/board-v3/board-slice.js +12 -0
- package/dist/features/board-v3/index.js +41 -21
- package/dist/features/board-v3/index.jsx +60 -22
- package/dist/features/panel/index.js +27 -14
- package/dist/features/panel/index.jsx +27 -14
- package/dist/features/panel/selected-group.js +1 -1
- package/dist/features/panel/selected-group.jsx +3 -0
- package/dist/features/panel/upload-tool.js +20 -3
- package/dist/features/panel/upload-tool.jsx +20 -3
- package/dist/features/panel/utils.js +4 -2
- package/dist/features/view-only-3/index.js +6 -3
- package/dist/features/view-only-3/index.jsx +19 -3
- package/dist/provider/antd-provider.js +3 -0
- package/dist/provider/antd-provider.jsx +3 -0
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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
|
|
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,
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
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
|
-
|
|
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
|
|
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,
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
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
|
-
|
|
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,
|
|
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) =>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
:
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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,
|
|
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) =>
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
:
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
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 ||
|
|
56
|
-
|
|
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" &&
|
|
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 ||
|
|
55
|
-
|
|
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" &&
|
|
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 /
|
|
502
|
-
y: newY /
|
|
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 && (
|
|
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 /
|
|
501
|
-
y: newY /
|
|
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>
|