seat-editor 3.5.1 → 3.5.2
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 +5 -5
- package/dist/features/board-v3/index.js +39 -11
- package/dist/features/board-v3/index.jsx +45 -15
- package/dist/features/package/index.js +1 -1
- package/dist/features/package/index.jsx +1 -1
- package/dist/features/panel/select-tool.d.ts +1 -2
- package/dist/features/panel/select-tool.js +1 -32
- package/dist/features/panel/select-tool.jsx +1 -32
- package/dist/features/panel/selected-group.js +16 -11
- package/dist/features/panel/selected-group.jsx +71 -60
- package/package.json +1 -1
|
@@ -164,17 +164,17 @@ const boardSlice = createSlice({
|
|
|
164
164
|
if (currentPointer < totalHistory) {
|
|
165
165
|
state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
|
|
166
166
|
}
|
|
167
|
+
if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
|
|
168
|
+
state.historyChanges.shift();
|
|
169
|
+
}
|
|
170
|
+
state.pointer += 1;
|
|
171
|
+
state.extraComponents = action.payload.filter((item) => item.shape) || [];
|
|
167
172
|
state.historyChanges.push({
|
|
168
173
|
components: [...state.components],
|
|
169
174
|
extraComponents: [...state.extraComponents],
|
|
170
175
|
boundingBox: state.boundingBox,
|
|
171
176
|
backgroundColor: state.backgroundColor,
|
|
172
177
|
});
|
|
173
|
-
if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
|
|
174
|
-
state.historyChanges.shift();
|
|
175
|
-
}
|
|
176
|
-
state.pointer += 1;
|
|
177
|
-
state.extraComponents = action.payload.filter((item) => item.shape) || [];
|
|
178
178
|
},
|
|
179
179
|
setExtraComponent: (state, action) => {
|
|
180
180
|
const currentPointer = state.pointer;
|
|
@@ -9,7 +9,7 @@ import ModalPreview from "../../components/modal-preview";
|
|
|
9
9
|
import LayerView from "../view-only-3";
|
|
10
10
|
import { isEqual, debounce } from "lodash";
|
|
11
11
|
import { Command, ZoomIn, ZoomOut } from "lucide-react";
|
|
12
|
-
import { Button, Flex, Radio, Tag } from "antd";
|
|
12
|
+
import { Button, Flex, Radio, Slider, Tag, } from "antd";
|
|
13
13
|
import { getAttributeElement, getAttributeElements } from "./resize-element";
|
|
14
14
|
import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
|
|
15
15
|
const toolElement = ["square", "circle", "table-seat-circle"];
|
|
@@ -35,7 +35,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
35
35
|
const heightBoardRef = useRef(20000);
|
|
36
36
|
const widthBoard = widthBoardRef.current;
|
|
37
37
|
const heightBoard = heightBoardRef.current;
|
|
38
|
-
const [scale
|
|
38
|
+
const [scale] = useState(1);
|
|
39
|
+
const [zoom, setZoom] = useState(1);
|
|
39
40
|
const boardSizeRef = useRef({ width: 20000, height: 20000 });
|
|
40
41
|
const boardSize = boardSizeRef.current;
|
|
41
42
|
const minCoordsRef = useRef({ x: 0, y: 0 });
|
|
@@ -327,24 +328,47 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
327
328
|
}
|
|
328
329
|
};
|
|
329
330
|
const handelZoomIn = () => {
|
|
330
|
-
var _a;
|
|
331
|
+
var _a, _b, _c, _d;
|
|
331
332
|
if (activeTool !== "grab") {
|
|
332
333
|
dispatch({
|
|
333
334
|
type: "tool/setActiveTool",
|
|
334
335
|
payload: "grab",
|
|
335
336
|
});
|
|
336
337
|
}
|
|
337
|
-
|
|
338
|
+
const step = 0.2;
|
|
339
|
+
const maxScale = 2;
|
|
340
|
+
const currentScale = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale;
|
|
341
|
+
const nextScale = Math.round(currentScale / step) * step + step;
|
|
342
|
+
const finalScale = Number(Math.min(nextScale, maxScale).toFixed(2));
|
|
343
|
+
setZoom(finalScale);
|
|
344
|
+
(_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalScale);
|
|
338
345
|
};
|
|
339
346
|
const handleZoomOut = () => {
|
|
340
|
-
var _a;
|
|
347
|
+
var _a, _b, _c, _d;
|
|
348
|
+
if (activeTool !== "grab") {
|
|
349
|
+
dispatch({
|
|
350
|
+
type: "tool/setActiveTool",
|
|
351
|
+
payload: "grab",
|
|
352
|
+
});
|
|
353
|
+
}
|
|
354
|
+
const step = 0.2;
|
|
355
|
+
const currentScale = ((_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale) || 1;
|
|
356
|
+
const nextScale = Math.floor((currentScale - step) / step) * step;
|
|
357
|
+
const finalStep = Number(Math.max(nextScale, step).toFixed(2));
|
|
358
|
+
setZoom(finalStep);
|
|
359
|
+
(_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalStep);
|
|
360
|
+
};
|
|
361
|
+
const handleChageZoom = (value) => {
|
|
362
|
+
var _a, _b, _c;
|
|
341
363
|
if (activeTool !== "grab") {
|
|
342
364
|
dispatch({
|
|
343
365
|
type: "tool/setActiveTool",
|
|
344
366
|
payload: "grab",
|
|
345
367
|
});
|
|
346
368
|
}
|
|
347
|
-
|
|
369
|
+
const scale = Number(value.toFixed(2));
|
|
370
|
+
setZoom(scale);
|
|
371
|
+
(_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setTransform((_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.instance.transformState.positionX, (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionY, scale);
|
|
348
372
|
};
|
|
349
373
|
const handleUnSelectComponent = () => {
|
|
350
374
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
@@ -1337,7 +1361,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1337
1361
|
(_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
|
|
1338
1362
|
}
|
|
1339
1363
|
else {
|
|
1340
|
-
console.log("gak closing");
|
|
1364
|
+
// console.log("gak closing");
|
|
1341
1365
|
setSelectedComponent(newPoints);
|
|
1342
1366
|
dispatch({
|
|
1343
1367
|
type: "panel/setSelectedComponent",
|
|
@@ -1751,7 +1775,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1751
1775
|
const polylineHelper = svg === null || svg === void 0 ? void 0 : svg.querySelector("#polyline-helper");
|
|
1752
1776
|
// const startPoint =
|
|
1753
1777
|
if (selectedComponent) {
|
|
1754
|
-
const newPoints = [
|
|
1778
|
+
const newPoints = [
|
|
1779
|
+
...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points,
|
|
1780
|
+
{ x: pos.x, y: pos.y },
|
|
1781
|
+
];
|
|
1755
1782
|
const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
|
|
1756
1783
|
polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
|
|
1757
1784
|
}
|
|
@@ -1851,14 +1878,15 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1851
1878
|
};
|
|
1852
1879
|
}, []);
|
|
1853
1880
|
const hasSelectionBox = !isEmpty(selectedLines);
|
|
1854
|
-
// console.log({ selectedComponent, polygonElementRef, componentsState,selectedComponent})
|
|
1855
1881
|
return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
|
|
1856
1882
|
select: false,
|
|
1857
1883
|
move: false,
|
|
1858
1884
|
switch: false,
|
|
1859
1885
|
drop: false,
|
|
1860
1886
|
rightClick: false,
|
|
1861
|
-
}, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Event Layout" }), _jsx(Radio, { value: "type-1", children: "Layout View" }), _jsx(Radio, { value: "type-2", children: "Next 3 Reservation" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-
|
|
1887
|
+
}, defaultBoundingBox: boundingBox }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Event Layout" }), _jsx(Radio, { value: "type-1", children: "Layout View" }), _jsx(Radio, { value: "type-2", children: "Next 3 Reservation" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden mt-[78px]", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-[118px] left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2 w-[500px] justify-between", children: [_jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut }), _jsx(Slider, { value: zoom, min: 0.2, max: 2, step: 0.2, className: "w-full", tooltip: {
|
|
1888
|
+
open: false,
|
|
1889
|
+
}, onChange: handleChageZoom }), _jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn })] }) }), _jsxs("div", { className: "w-full bg-white absolute bottom-[78px] left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300", children: ["Select", " ", _jsx(Tag, { color: isShiftPressed ? "red" : "lime", children: footerInfoList[hasSelectionBox ? 1 : 0]["title"] }), " ", footerInfoList[hasSelectionBox ? 1 : 0]["desc"], hasSelectionBox && (_jsxs(_Fragment, { children: [_jsx(Tag, { color: "lime", children: _jsxs(Flex, { children: [_jsx(Command, { size: 16 }), "D"] }) }), "to deselect"] })), " ", "| Table Total ", _jsx(Tag, { color: "volcano", children: componentsState === null || componentsState === void 0 ? void 0 : componentsState.length })] }), _jsx(TransformWrapper, { ref: transformRef,
|
|
1862
1890
|
// limitToBounds={true}
|
|
1863
1891
|
panning: {
|
|
1864
1892
|
disabled: [
|
|
@@ -1874,7 +1902,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1874
1902
|
},
|
|
1875
1903
|
// centerZoomedOut={true}
|
|
1876
1904
|
// onTransformed={handleTransformed}
|
|
1877
|
-
minScale: 0.
|
|
1905
|
+
minScale: 0.2, maxScale: 2, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
|
|
1878
1906
|
width: "100%",
|
|
1879
1907
|
height: "100%",
|
|
1880
1908
|
}, contentStyle: { width: boardSize.width, height: boardSize.height }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
|
|
@@ -8,7 +8,7 @@ import ModalPreview from "../../components/modal-preview";
|
|
|
8
8
|
import LayerView from "../view-only-3";
|
|
9
9
|
import { isEqual, debounce } from "lodash";
|
|
10
10
|
import { Command, ZoomIn, ZoomOut } from "lucide-react";
|
|
11
|
-
import { Button, Flex, Radio, Tag } from "antd";
|
|
11
|
+
import { Button, Flex, Radio, Slider, Tag, } from "antd";
|
|
12
12
|
import { getAttributeElement, getAttributeElements } from "./resize-element";
|
|
13
13
|
import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
|
|
14
14
|
const toolElement = ["square", "circle", "table-seat-circle"];
|
|
@@ -34,7 +34,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
34
34
|
const heightBoardRef = useRef(20000);
|
|
35
35
|
const widthBoard = widthBoardRef.current;
|
|
36
36
|
const heightBoard = heightBoardRef.current;
|
|
37
|
-
const [scale
|
|
37
|
+
const [scale] = useState(1);
|
|
38
|
+
const [zoom, setZoom] = useState(1);
|
|
38
39
|
const boardSizeRef = useRef({ width: 20000, height: 20000 });
|
|
39
40
|
const boardSize = boardSizeRef.current;
|
|
40
41
|
const minCoordsRef = useRef({ x: 0, y: 0 });
|
|
@@ -326,24 +327,47 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
326
327
|
}
|
|
327
328
|
};
|
|
328
329
|
const handelZoomIn = () => {
|
|
329
|
-
var _a;
|
|
330
|
+
var _a, _b, _c, _d;
|
|
330
331
|
if (activeTool !== "grab") {
|
|
331
332
|
dispatch({
|
|
332
333
|
type: "tool/setActiveTool",
|
|
333
334
|
payload: "grab",
|
|
334
335
|
});
|
|
335
336
|
}
|
|
336
|
-
|
|
337
|
+
const step = 0.2;
|
|
338
|
+
const maxScale = 2;
|
|
339
|
+
const currentScale = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale;
|
|
340
|
+
const nextScale = Math.round(currentScale / step) * step + step;
|
|
341
|
+
const finalScale = Number(Math.min(nextScale, maxScale).toFixed(2));
|
|
342
|
+
setZoom(finalScale);
|
|
343
|
+
(_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalScale);
|
|
337
344
|
};
|
|
338
345
|
const handleZoomOut = () => {
|
|
339
|
-
var _a;
|
|
346
|
+
var _a, _b, _c, _d;
|
|
347
|
+
if (activeTool !== "grab") {
|
|
348
|
+
dispatch({
|
|
349
|
+
type: "tool/setActiveTool",
|
|
350
|
+
payload: "grab",
|
|
351
|
+
});
|
|
352
|
+
}
|
|
353
|
+
const step = 0.2;
|
|
354
|
+
const currentScale = ((_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance.transformState.scale) || 1;
|
|
355
|
+
const nextScale = Math.floor((currentScale - step) / step) * step;
|
|
356
|
+
const finalStep = Number(Math.max(nextScale, step).toFixed(2));
|
|
357
|
+
setZoom(finalStep);
|
|
358
|
+
(_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform((_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionX, (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.instance.transformState.positionY, finalStep);
|
|
359
|
+
};
|
|
360
|
+
const handleChageZoom = (value) => {
|
|
361
|
+
var _a, _b, _c;
|
|
340
362
|
if (activeTool !== "grab") {
|
|
341
363
|
dispatch({
|
|
342
364
|
type: "tool/setActiveTool",
|
|
343
365
|
payload: "grab",
|
|
344
366
|
});
|
|
345
367
|
}
|
|
346
|
-
|
|
368
|
+
const scale = Number(value.toFixed(2));
|
|
369
|
+
setZoom(scale);
|
|
370
|
+
(_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.setTransform((_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.instance.transformState.positionX, (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.instance.transformState.positionY, scale);
|
|
347
371
|
};
|
|
348
372
|
const handleUnSelectComponent = () => {
|
|
349
373
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
@@ -1336,7 +1360,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1336
1360
|
(_f = svg.querySelector("#polyline-helper")) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0");
|
|
1337
1361
|
}
|
|
1338
1362
|
else {
|
|
1339
|
-
console.log("gak closing");
|
|
1363
|
+
// console.log("gak closing");
|
|
1340
1364
|
setSelectedComponent(newPoints);
|
|
1341
1365
|
dispatch({
|
|
1342
1366
|
type: "panel/setSelectedComponent",
|
|
@@ -1750,7 +1774,10 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1750
1774
|
const polylineHelper = svg === null || svg === void 0 ? void 0 : svg.querySelector("#polyline-helper");
|
|
1751
1775
|
// const startPoint =
|
|
1752
1776
|
if (selectedComponent) {
|
|
1753
|
-
const newPoints = [
|
|
1777
|
+
const newPoints = [
|
|
1778
|
+
...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points,
|
|
1779
|
+
{ x: pos.x, y: pos.y },
|
|
1780
|
+
];
|
|
1754
1781
|
const points = newPoints.map((item) => `${item.x},${item.y}`).join(" ");
|
|
1755
1782
|
polylineHelper === null || polylineHelper === void 0 ? void 0 : polylineHelper.setAttribute("points", points);
|
|
1756
1783
|
}
|
|
@@ -1850,7 +1877,6 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1850
1877
|
};
|
|
1851
1878
|
}, []);
|
|
1852
1879
|
const hasSelectionBox = !isEmpty(selectedLines);
|
|
1853
|
-
// console.log({ selectedComponent, polygonElementRef, componentsState,selectedComponent})
|
|
1854
1880
|
return (<>
|
|
1855
1881
|
<ModalPreview>
|
|
1856
1882
|
<LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
|
|
@@ -1868,14 +1894,18 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1868
1894
|
</Radio.Group>
|
|
1869
1895
|
</div>
|
|
1870
1896
|
</ModalPreview>
|
|
1871
|
-
<div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
|
|
1872
|
-
<div className="absolute bottom-
|
|
1873
|
-
<div className="flex gap-2">
|
|
1874
|
-
<Button icon={<ZoomIn />} onClick={handelZoomIn}/>
|
|
1897
|
+
<div className="relative w-full h-screen flex-1 overflow-hidden mt-[78px]" ref={containerRef}>
|
|
1898
|
+
<div className="absolute bottom-[118px] left-1/2 transform -translate-x-1/2 z-10">
|
|
1899
|
+
<div className="flex gap-2 w-[500px] justify-between">
|
|
1875
1900
|
<Button icon={<ZoomOut />} onClick={handleZoomOut}/>
|
|
1901
|
+
|
|
1902
|
+
<Slider value={zoom} min={0.2} max={2} step={0.2} className="w-full" tooltip={{
|
|
1903
|
+
open: false,
|
|
1904
|
+
}} onChange={handleChageZoom}/>
|
|
1905
|
+
<Button icon={<ZoomIn />} onClick={handelZoomIn}/>
|
|
1876
1906
|
</div>
|
|
1877
1907
|
</div>
|
|
1878
|
-
<div className="w-full bg-white absolute bottom-
|
|
1908
|
+
<div className="w-full bg-white absolute bottom-[78px] left-1/2 transform -translate-x-1/2 z-10 p-1 flex justify-start items-center gap-2 border-t border-gray-300">
|
|
1879
1909
|
Select{" "}
|
|
1880
1910
|
<Tag color={isShiftPressed ? "red" : "lime"}>
|
|
1881
1911
|
{footerInfoList[hasSelectionBox ? 1 : 0]["title"]}
|
|
@@ -1907,7 +1937,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1907
1937
|
}}
|
|
1908
1938
|
// centerZoomedOut={true}
|
|
1909
1939
|
// onTransformed={handleTransformed}
|
|
1910
|
-
minScale={0.
|
|
1940
|
+
minScale={0.2} // sangat kecil = bisa zoom out jauh
|
|
1911
1941
|
maxScale={2} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
|
|
1912
1942
|
{/* {scale !== 1 && ( */}
|
|
1913
1943
|
{/* <div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10"> */}
|
|
@@ -172,6 +172,6 @@ const TableEditor = (props) => {
|
|
|
172
172
|
switch: false,
|
|
173
173
|
drop: false,
|
|
174
174
|
rightClick: false,
|
|
175
|
-
} }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx("div", { className: "absolute top-0 left-0 w-full bg-white
|
|
175
|
+
} }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx("div", { className: "absolute top-0 left-0 w-full bg-white p-[20px] z-[51] border-b border-gray-200", children: props.header ? (props.header) : (_jsx("div", { className: "text-xl font-bold h-[38px] leading-[38px] flex ", children: "Navbar" })) }), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
|
|
176
176
|
};
|
|
177
177
|
export default TableEditor;
|
|
@@ -179,7 +179,7 @@ const TableEditor = (props) => {
|
|
|
179
179
|
{loading && !isPreview && (<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center">
|
|
180
180
|
{(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
|
|
181
181
|
</div>)}
|
|
182
|
-
<div className="absolute top-0 left-0 w-full bg-white
|
|
182
|
+
<div className="absolute top-0 left-0 w-full bg-white p-[20px] z-[51] border-b border-gray-200">
|
|
183
183
|
{props.header ? (props.header) : (<div className="text-xl font-bold h-[38px] leading-[38px] flex ">
|
|
184
184
|
Navbar
|
|
185
185
|
</div>)}
|
|
@@ -8,40 +8,9 @@ import UploadTool from "./upload-tool";
|
|
|
8
8
|
import TextTool from "./text-tool";
|
|
9
9
|
import SelectedGroup from "./selected-group";
|
|
10
10
|
import PolygonTool from "./polygon";
|
|
11
|
-
const SelectToolForm = ({
|
|
12
|
-
const components = useAppSelector((state) => state.board.components);
|
|
11
|
+
const SelectToolForm = ({ action, tranform }) => {
|
|
13
12
|
const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
|
|
14
|
-
const extraComponents = useAppSelector((state) => state.board.extraComponents);
|
|
15
13
|
const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
|
|
16
|
-
// const SummaryComponents = () => {
|
|
17
|
-
// const countByShape: Record<string, number> = components?.reduce(
|
|
18
|
-
// (acc: any, item: any) => {
|
|
19
|
-
// acc[item.shape] = (acc[item.shape] || 0) + 1;
|
|
20
|
-
// return acc;
|
|
21
|
-
// },
|
|
22
|
-
// {}
|
|
23
|
-
// );
|
|
24
|
-
// const variableFormatToString = (variable: string) => {
|
|
25
|
-
// return variable
|
|
26
|
-
// .replace(/-/g, " ")
|
|
27
|
-
// .replace(/\b\w/g, (char) => char.toUpperCase());
|
|
28
|
-
// };
|
|
29
|
-
// return (
|
|
30
|
-
// <div className="flex flex-col">
|
|
31
|
-
// <h1 className="heading-s">{title}</h1>
|
|
32
|
-
// <div className="flex flex-col gap-2 mt-5">
|
|
33
|
-
// {Object.entries(countByShape).map(([shape, count]) => (
|
|
34
|
-
// <div key={shape}>
|
|
35
|
-
// <span className="font-bold">
|
|
36
|
-
// {variableFormatToString(shape)}:
|
|
37
|
-
// </span>{" "}
|
|
38
|
-
// {count}
|
|
39
|
-
// </div>
|
|
40
|
-
// ))}
|
|
41
|
-
// </div>
|
|
42
|
-
// </div>
|
|
43
|
-
// );
|
|
44
|
-
// };
|
|
45
14
|
const renderComponent = () => {
|
|
46
15
|
switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
|
|
47
16
|
case "square":
|
|
@@ -7,40 +7,9 @@ import UploadTool from "./upload-tool";
|
|
|
7
7
|
import TextTool from "./text-tool";
|
|
8
8
|
import SelectedGroup from "./selected-group";
|
|
9
9
|
import PolygonTool from "./polygon";
|
|
10
|
-
const SelectToolForm = ({
|
|
11
|
-
const components = useAppSelector((state) => state.board.components);
|
|
10
|
+
const SelectToolForm = ({ action, tranform }) => {
|
|
12
11
|
const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
|
|
13
|
-
const extraComponents = useAppSelector((state) => state.board.extraComponents);
|
|
14
12
|
const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
|
|
15
|
-
// const SummaryComponents = () => {
|
|
16
|
-
// const countByShape: Record<string, number> = components?.reduce(
|
|
17
|
-
// (acc: any, item: any) => {
|
|
18
|
-
// acc[item.shape] = (acc[item.shape] || 0) + 1;
|
|
19
|
-
// return acc;
|
|
20
|
-
// },
|
|
21
|
-
// {}
|
|
22
|
-
// );
|
|
23
|
-
// const variableFormatToString = (variable: string) => {
|
|
24
|
-
// return variable
|
|
25
|
-
// .replace(/-/g, " ")
|
|
26
|
-
// .replace(/\b\w/g, (char) => char.toUpperCase());
|
|
27
|
-
// };
|
|
28
|
-
// return (
|
|
29
|
-
// <div className="flex flex-col">
|
|
30
|
-
// <h1 className="heading-s">{title}</h1>
|
|
31
|
-
// <div className="flex flex-col gap-2 mt-5">
|
|
32
|
-
// {Object.entries(countByShape).map(([shape, count]) => (
|
|
33
|
-
// <div key={shape}>
|
|
34
|
-
// <span className="font-bold">
|
|
35
|
-
// {variableFormatToString(shape)}:
|
|
36
|
-
// </span>{" "}
|
|
37
|
-
// {count}
|
|
38
|
-
// </div>
|
|
39
|
-
// ))}
|
|
40
|
-
// </div>
|
|
41
|
-
// </div>
|
|
42
|
-
// );
|
|
43
|
-
// };
|
|
44
13
|
const renderComponent = () => {
|
|
45
14
|
switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
|
|
46
15
|
case "square":
|
|
@@ -13,22 +13,27 @@ const SelectedGroup = () => {
|
|
|
13
13
|
const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
|
|
14
14
|
const allShapeSelected = selectedGroup.map((item) => item.shape);
|
|
15
15
|
const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
|
|
16
|
-
|
|
17
|
-
const sameShape = [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
].includes(shape);
|
|
25
|
-
const shapeIncludeImage = ["background", "image-table", "polygon"].some(
|
|
16
|
+
const allExtraComponent = allShapeSelected.every((shape) => ["text", "background", "polygon"].includes(shape));
|
|
17
|
+
// const sameShape = [
|
|
18
|
+
// "table-seat-circle",
|
|
19
|
+
// "table-seat-rect-circle",
|
|
20
|
+
// "table-seat-square",
|
|
21
|
+
// "table-seat-square",
|
|
22
|
+
// "table-seat-rect-square",
|
|
23
|
+
// "table-seat-half-square",
|
|
24
|
+
// ].includes(shape);
|
|
25
|
+
// const shapeIncludeImage = ["background", "image-table", "polygon"].some(
|
|
26
|
+
// (shape) => allShapeSelected.includes(shape)
|
|
27
|
+
// );
|
|
26
28
|
const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
|
|
27
29
|
const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
|
|
28
30
|
const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
|
|
29
31
|
return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
|
|
30
32
|
});
|
|
31
33
|
const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
|
|
34
|
+
if (!allExtraComponent && hasExtraComponent) {
|
|
35
|
+
return (_jsx(_Fragment, { children: _jsx("div", { className: "py-2 flex flex-col justify-center items-center gap-2 h-[100dvh]", children: _jsx("h1", { className: "heading-s text-center text-gray", children: "These objects have not configure" }) }) }));
|
|
36
|
+
}
|
|
32
37
|
return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [!hasExtraComponent && (_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: optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
|
|
33
38
|
const disabled = item.value === "table-seat-rect-circle" && maxSeat;
|
|
34
39
|
return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
|
|
@@ -48,6 +53,6 @@ const SelectedGroup = () => {
|
|
|
48
53
|
if (Number.isNaN(num))
|
|
49
54
|
return null;
|
|
50
55
|
return Math.min(100, Math.max(0, num));
|
|
51
|
-
}, suffix: "%" }) })] }), _jsx(SectionLabel, {})] })] }) }));
|
|
56
|
+
}, suffix: "%" }) })] }), !allExtraComponent && _jsx(SectionLabel, {})] })] }) }));
|
|
52
57
|
};
|
|
53
58
|
export default SelectedGroup;
|
|
@@ -12,40 +12,51 @@ const SelectedGroup = () => {
|
|
|
12
12
|
const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
|
|
13
13
|
const allShapeSelected = selectedGroup.map((item) => item.shape);
|
|
14
14
|
const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
|
|
15
|
-
|
|
16
|
-
const sameShape = [
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
].includes(shape);
|
|
24
|
-
const shapeIncludeImage = ["background", "image-table", "polygon"].some(
|
|
15
|
+
const allExtraComponent = allShapeSelected.every((shape) => ["text", "background", "polygon"].includes(shape));
|
|
16
|
+
// const sameShape = [
|
|
17
|
+
// "table-seat-circle",
|
|
18
|
+
// "table-seat-rect-circle",
|
|
19
|
+
// "table-seat-square",
|
|
20
|
+
// "table-seat-square",
|
|
21
|
+
// "table-seat-rect-square",
|
|
22
|
+
// "table-seat-half-square",
|
|
23
|
+
// ].includes(shape);
|
|
24
|
+
// const shapeIncludeImage = ["background", "image-table", "polygon"].some(
|
|
25
|
+
// (shape) => allShapeSelected.includes(shape)
|
|
26
|
+
// );
|
|
25
27
|
const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
|
|
26
28
|
const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
|
|
27
29
|
const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
|
|
28
30
|
return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
|
|
29
31
|
});
|
|
30
32
|
const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
|
|
33
|
+
if (!allExtraComponent && hasExtraComponent) {
|
|
34
|
+
return (<>
|
|
35
|
+
<div className="py-2 flex flex-col justify-center items-center gap-2 h-[100dvh]">
|
|
36
|
+
<h1 className="heading-s text-center text-gray">
|
|
37
|
+
These objects have not configure
|
|
38
|
+
</h1>
|
|
39
|
+
</div>
|
|
40
|
+
</>);
|
|
41
|
+
}
|
|
31
42
|
return (<>
|
|
32
43
|
<div className="py-2">
|
|
33
44
|
<h1 className="heading-s"> Group Selection</h1>
|
|
34
45
|
<div className="py-2">
|
|
35
46
|
{!hasExtraComponent && (<Flex gap={2} className="w-full">
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
47
|
+
<Form.Item label="Name" name="shape" className="w-full">
|
|
48
|
+
<Select className="w-full">
|
|
49
|
+
{optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
|
|
39
50
|
const disabled = item.value === "table-seat-rect-circle" && maxSeat;
|
|
40
51
|
return (<Option key={item.value} value={item.value} disabled={disabled}>
|
|
41
|
-
|
|
52
|
+
{item.value === "table-seat-rect-circle"
|
|
42
53
|
? `Type 5 (only for 4 ${seatKey})`
|
|
43
54
|
: item.label}
|
|
44
|
-
|
|
55
|
+
</Option>);
|
|
45
56
|
})}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
57
|
+
</Select>
|
|
58
|
+
</Form.Item>
|
|
59
|
+
</Flex>)}
|
|
49
60
|
{/* <Flex gap={2} className="w-full">
|
|
50
61
|
{["table-seat-circle", "table-seat-rect-circle"].includes(
|
|
51
62
|
shape
|
|
@@ -59,52 +70,52 @@ const SelectedGroup = () => {
|
|
|
59
70
|
</Flex> */}
|
|
60
71
|
{/* {!sameShape && (
|
|
61
72
|
<> */}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
<Flex gap={2} className="w-full" vertical>
|
|
74
|
+
{!shapeAllIncludePolygon && (<>
|
|
75
|
+
<Form.Item label="Width" name="width" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
76
|
+
<InputNumber suffix="px" name="width" placeholder={placeholders["width"]} style={{ width: "100%" }}/>
|
|
77
|
+
</Form.Item>
|
|
78
|
+
<Form.Item label="Height" name="height" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
79
|
+
<InputNumber suffix="px" name="height" placeholder={placeholders["height"]} style={{ width: "100%" }}/>
|
|
80
|
+
</Form.Item>
|
|
81
|
+
</>)}
|
|
82
|
+
{!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (<Form.Item label="Radius" name={"radius"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
83
|
+
<InputNumber name={"radius"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["radius"]} parser={(value) => {
|
|
73
84
|
var _a;
|
|
74
85
|
const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
|
|
75
86
|
return onlyNumber === ""
|
|
76
87
|
? 1
|
|
77
88
|
: Math.max(1, Number(onlyNumber));
|
|
78
89
|
}}/>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</Form.Item>
|
|
86
|
-
<Form.Item label="Position Y" name="y" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
87
|
-
<InputNumber suffix="px" name="y" placeholder={placeholders["y"]} style={{ width: "100%" }}/>
|
|
88
|
-
</Form.Item>
|
|
89
|
-
<Form.Item label="Rotation" name="rotation" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
90
|
-
<InputNumber name="rotation" suffix="°" max={360} min={0} style={{ width: "100%" }} placeholder={placeholders["rotation"]}/>
|
|
91
|
-
</Form.Item>
|
|
92
|
-
</Flex>
|
|
93
|
-
</>)}
|
|
94
|
-
<Flex gap={2}>
|
|
95
|
-
<Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
|
|
96
|
-
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
90
|
+
</Form.Item>)}
|
|
91
|
+
</Flex>
|
|
92
|
+
{!shapeAllIncludePolygon && (<>
|
|
93
|
+
<Flex gap={2} vertical>
|
|
94
|
+
<Form.Item label="Position X" name="x" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
95
|
+
<InputNumber placeholder={placeholders["x"]} style={{ width: "100%" }} suffix="px" name="x"/>
|
|
97
96
|
</Form.Item>
|
|
98
|
-
<Form.Item label="
|
|
99
|
-
<
|
|
97
|
+
<Form.Item label="Position Y" name="y" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
98
|
+
<InputNumber suffix="px" name="y" placeholder={placeholders["y"]} style={{ width: "100%" }}/>
|
|
100
99
|
</Form.Item>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
104
|
-
<InputNumber name={"strokeWidth"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["strokeWidth"]}/>
|
|
100
|
+
<Form.Item label="Rotation" name="rotation" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
101
|
+
<InputNumber name="rotation" suffix="°" max={360} min={0} style={{ width: "100%" }} placeholder={placeholders["rotation"]}/>
|
|
105
102
|
</Form.Item>
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
</Flex>
|
|
104
|
+
</>)}
|
|
105
|
+
<Flex gap={2}>
|
|
106
|
+
<Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
|
|
107
|
+
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
108
|
+
</Form.Item>
|
|
109
|
+
<Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
|
|
110
|
+
<ColorPicker allowClear format="hex" defaultFormat="hex"/>
|
|
111
|
+
</Form.Item>
|
|
112
|
+
</Flex>
|
|
113
|
+
<Flex vertical>
|
|
114
|
+
<Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
115
|
+
<InputNumber name={"strokeWidth"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["strokeWidth"]}/>
|
|
116
|
+
</Form.Item>
|
|
117
|
+
<Form.Item label="opacity" name={"opacity"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
|
|
118
|
+
<InputNumber style={{ width: "100%" }} step={10} max={100} min={0} placeholder={placeholders["opacity"]} parser={(value) => {
|
|
108
119
|
if (value === undefined || value === null || value === "")
|
|
109
120
|
return null;
|
|
110
121
|
const cleaned = value.replace(/[^0-9.]/g, "");
|
|
@@ -113,11 +124,11 @@ const SelectedGroup = () => {
|
|
|
113
124
|
return null;
|
|
114
125
|
return Math.min(100, Math.max(0, num));
|
|
115
126
|
}} suffix="%"/>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
127
|
+
</Form.Item>
|
|
128
|
+
</Flex>
|
|
129
|
+
{!allExtraComponent && <SectionLabel />}
|
|
130
|
+
{/* </>
|
|
131
|
+
)} */}
|
|
121
132
|
</div>
|
|
122
133
|
</div>
|
|
123
134
|
</>);
|