seat-editor 3.5.32 → 3.5.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/only-view/page.js +3 -1
- package/dist/app/only-view/page.jsx +3 -1
- package/dist/components/form-tools/shape.js +1 -1
- package/dist/components/form-tools/shape.jsx +1 -1
- package/dist/components/layer-v3/index.js +4 -0
- package/dist/components/layer-v3/index.jsx +4 -0
- package/dist/features/board-v3/index.js +7 -0
- package/dist/features/board-v3/index.jsx +7 -0
- package/dist/features/panel/panel-slice.js +7 -1
- package/dist/features/panel/polygon.js +1 -0
- package/dist/features/panel/polygon.jsx +1 -0
- package/dist/features/panel/text-tool.js +1 -0
- package/dist/features/panel/text-tool.jsx +1 -0
- package/dist/features/panel/upload-tool.js +2 -1
- package/dist/features/panel/upload-tool.jsx +2 -1
- package/dist/features/side-tool/index.js +1 -0
- package/dist/features/side-tool/index.jsx +1 -0
- package/dist/features/view-only-3/index.js +13 -2
- package/dist/features/view-only-3/index.jsx +13 -2
- package/package.json +1 -1
|
@@ -174,7 +174,9 @@ const TouchScrollDetect = () => {
|
|
|
174
174
|
key: "rsvp_time",
|
|
175
175
|
items: ["text", "icon"],
|
|
176
176
|
},
|
|
177
|
-
],
|
|
177
|
+
],
|
|
178
|
+
// defaultBackground="#000000"
|
|
179
|
+
mappingKey: "properties", componentProps: [], onDoubleClick: (data) => console.log(data), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
|
|
178
180
|
handleSelectTable(component);
|
|
179
181
|
}, dragTableBlockKey: [
|
|
180
182
|
{
|
|
@@ -198,7 +198,9 @@ const TouchScrollDetect = () => {
|
|
|
198
198
|
key: "rsvp_time",
|
|
199
199
|
items: ["text", "icon"],
|
|
200
200
|
},
|
|
201
|
-
]}
|
|
201
|
+
]}
|
|
202
|
+
// defaultBackground="#000000"
|
|
203
|
+
mappingKey="properties" componentProps={[]} onDoubleClick={(data) => console.log(data)} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
|
|
202
204
|
handleSelectTable(component);
|
|
203
205
|
}} dragTableBlockKey={[
|
|
204
206
|
{
|
|
@@ -55,7 +55,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
55
55
|
const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
|
|
56
56
|
const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
|
|
57
57
|
return (_jsxs("div", { className: "py-2", children: [_jsxs("h1", { className: "heading-s", children: ["Shape ", (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.find((item) => item.value === shape)) === null || _a === void 0 ? void 0 : _a.label] }), allowChangeShape && (_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) => {
|
|
58
|
-
const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
|
|
58
|
+
const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
|
|
59
59
|
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"
|
|
60
60
|
? `Circle Type 2 (only for 4 ${seatKey})`
|
|
61
61
|
: item.label })] }) }, item.value));
|
|
@@ -59,7 +59,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
|
|
|
59
59
|
<Form.Item label="Name" name="shape" className="w-full">
|
|
60
60
|
<Select className="w-full">
|
|
61
61
|
{optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
|
|
62
|
-
const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
|
|
62
|
+
const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
|
|
63
63
|
return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
|
|
64
64
|
<Flex gap={5} align="center" justify="between">
|
|
65
65
|
{item.icon}
|
|
@@ -30,6 +30,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
|
|
|
30
30
|
commonProps.stroke = "#ffa39e";
|
|
31
31
|
commonProps.strokeWidth = 4;
|
|
32
32
|
}
|
|
33
|
+
if (["image-table", "background"].includes(shape) && !src) {
|
|
34
|
+
commonProps.stroke = "#ffa39e";
|
|
35
|
+
commonProps.strokeWidth = 4;
|
|
36
|
+
}
|
|
33
37
|
switch (shape) {
|
|
34
38
|
case "square":
|
|
35
39
|
return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { "data-text": `${id}-text`, transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
|
|
@@ -28,6 +28,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
|
|
|
28
28
|
commonProps.stroke = "#ffa39e";
|
|
29
29
|
commonProps.strokeWidth = 4;
|
|
30
30
|
}
|
|
31
|
+
if (["image-table", "background"].includes(shape) && !src) {
|
|
32
|
+
commonProps.stroke = "#ffa39e";
|
|
33
|
+
commonProps.strokeWidth = 4;
|
|
34
|
+
}
|
|
31
35
|
switch (shape) {
|
|
32
36
|
case "square":
|
|
33
37
|
return (<g key={id} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`}>
|
|
@@ -382,6 +382,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
382
382
|
const handleUnSelectComponent = () => {
|
|
383
383
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
384
384
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
385
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
385
386
|
setSelectedComponent(null);
|
|
386
387
|
setSelectedLines(null);
|
|
387
388
|
dispatch({ type: "panel/setShow", payload: false });
|
|
@@ -667,6 +668,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
667
668
|
type: "panel/setSelectedGroup",
|
|
668
669
|
payload: null,
|
|
669
670
|
});
|
|
671
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
670
672
|
polygonElementRef.current = null;
|
|
671
673
|
}
|
|
672
674
|
// const selectionLines = svgRef.current?.querySelector(
|
|
@@ -1525,6 +1527,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1525
1527
|
type: "panel/setSelectedComponent",
|
|
1526
1528
|
payload: null,
|
|
1527
1529
|
});
|
|
1530
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
1528
1531
|
}
|
|
1529
1532
|
else {
|
|
1530
1533
|
dataElementSelectionGroupRef.current = [];
|
|
@@ -1653,6 +1656,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1653
1656
|
if (isInitialCreateText) {
|
|
1654
1657
|
const ghost = svg.querySelector("#ghost-element-create");
|
|
1655
1658
|
const getBBox = getGlobalBBox(svg, ghost);
|
|
1659
|
+
const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
|
|
1656
1660
|
const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
|
|
1657
1661
|
addComponents(text);
|
|
1658
1662
|
dispatch({
|
|
@@ -1668,6 +1672,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1668
1672
|
type: "tool/setActiveTool",
|
|
1669
1673
|
payload: "select",
|
|
1670
1674
|
});
|
|
1675
|
+
console.log({ selectionLines });
|
|
1676
|
+
dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
|
|
1677
|
+
setSelectedLines(selectionLines);
|
|
1671
1678
|
(_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
|
|
1672
1679
|
isCreateElementRef.current = false;
|
|
1673
1680
|
}
|
|
@@ -381,6 +381,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
381
381
|
const handleUnSelectComponent = () => {
|
|
382
382
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
383
383
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
384
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
384
385
|
setSelectedComponent(null);
|
|
385
386
|
setSelectedLines(null);
|
|
386
387
|
dispatch({ type: "panel/setShow", payload: false });
|
|
@@ -666,6 +667,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
666
667
|
type: "panel/setSelectedGroup",
|
|
667
668
|
payload: null,
|
|
668
669
|
});
|
|
670
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
669
671
|
polygonElementRef.current = null;
|
|
670
672
|
}
|
|
671
673
|
// const selectionLines = svgRef.current?.querySelector(
|
|
@@ -1524,6 +1526,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1524
1526
|
type: "panel/setSelectedComponent",
|
|
1525
1527
|
payload: null,
|
|
1526
1528
|
});
|
|
1529
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
1527
1530
|
}
|
|
1528
1531
|
else {
|
|
1529
1532
|
dataElementSelectionGroupRef.current = [];
|
|
@@ -1652,6 +1655,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1652
1655
|
if (isInitialCreateText) {
|
|
1653
1656
|
const ghost = svg.querySelector("#ghost-element-create");
|
|
1654
1657
|
const getBBox = getGlobalBBox(svg, ghost);
|
|
1658
|
+
const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
|
|
1655
1659
|
const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
|
|
1656
1660
|
addComponents(text);
|
|
1657
1661
|
dispatch({
|
|
@@ -1667,6 +1671,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1667
1671
|
type: "tool/setActiveTool",
|
|
1668
1672
|
payload: "select",
|
|
1669
1673
|
});
|
|
1674
|
+
console.log({ selectionLines });
|
|
1675
|
+
dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
|
|
1676
|
+
setSelectedLines(selectionLines);
|
|
1670
1677
|
(_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
|
|
1671
1678
|
isCreateElementRef.current = false;
|
|
1672
1679
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createSlice } from "@reduxjs/toolkit";
|
|
2
|
+
import { isEmpty } from "lodash";
|
|
2
3
|
const initialState = {
|
|
3
4
|
selectedComponent: null,
|
|
4
5
|
history: [],
|
|
@@ -41,7 +42,12 @@ export const panelSlice = createSlice({
|
|
|
41
42
|
state.selectedGroup = action.payload;
|
|
42
43
|
},
|
|
43
44
|
setSelectionLines: (state, action) => {
|
|
44
|
-
state.
|
|
45
|
+
if (isEmpty(state.selectedComponent)) {
|
|
46
|
+
state.selectionLines = {};
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
state.selectionLines = action.payload;
|
|
50
|
+
}
|
|
45
51
|
}
|
|
46
52
|
},
|
|
47
53
|
});
|
|
@@ -14,6 +14,7 @@ const PolygonTool = () => {
|
|
|
14
14
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
15
15
|
dispatch({ type: "board/setUpdateBy", payload: "global" });
|
|
16
16
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
17
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
17
18
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
18
19
|
dispatch({ type: "panel/setShow", payload: false });
|
|
19
20
|
dispatch({ type: "tool/setActiveTool", payload: "select" });
|
|
@@ -13,6 +13,7 @@ const PolygonTool = () => {
|
|
|
13
13
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
14
14
|
dispatch({ type: "board/setUpdateBy", payload: "global" });
|
|
15
15
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
16
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
16
17
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
17
18
|
dispatch({ type: "panel/setShow", payload: false });
|
|
18
19
|
dispatch({ type: "tool/setActiveTool", payload: "select" });
|
|
@@ -14,6 +14,7 @@ const TextTool = () => {
|
|
|
14
14
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
15
15
|
dispatch({ type: "board/setUpdateBy", payload: "global" });
|
|
16
16
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
17
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
17
18
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
18
19
|
dispatch({ type: "panel/setShow", payload: false });
|
|
19
20
|
dispatch({ type: "tool/setActiveTool", payload: "select" });
|
|
@@ -13,6 +13,7 @@ const TextTool = () => {
|
|
|
13
13
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
14
14
|
dispatch({ type: "board/setUpdateBy", payload: "global" });
|
|
15
15
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
16
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
16
17
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
17
18
|
dispatch({ type: "panel/setShow", payload: false });
|
|
18
19
|
dispatch({ type: "tool/setActiveTool", payload: "select" });
|
|
@@ -174,6 +174,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
|
|
|
174
174
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
175
175
|
dispatch({ type: "board/setUpdateBy", payload: "global" });
|
|
176
176
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
177
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
177
178
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
178
179
|
dispatch({ type: "panel/setShow", payload: false });
|
|
179
180
|
dispatch({ type: "tool/setActiveTool", payload: "select" });
|
|
@@ -190,7 +191,7 @@ const UploadToolForm = (props) => {
|
|
|
190
191
|
const isExtraComponent = extraComponents.some((item) => item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
|
|
191
192
|
const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
|
|
192
193
|
return (_jsxs("div", { className: "py-2", children: [_jsxs("h1", { className: "heading-s", children: ["Shape ", (_b = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.find((item) => item.value === shape)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Image"] }), (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;
|
|
194
|
+
const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
|
|
194
195
|
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
196
|
? `Circle Type 2 (only for 4 ${seatKey})`
|
|
196
197
|
: item.label })] }) }, item.value));
|
|
@@ -173,6 +173,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
|
|
|
173
173
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
174
174
|
dispatch({ type: "board/setUpdateBy", payload: "global" });
|
|
175
175
|
dispatch({ type: "panel/setSelectedComponent", payload: null });
|
|
176
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
176
177
|
dispatch({ type: "panel/setSelectedGroup", payload: null });
|
|
177
178
|
dispatch({ type: "panel/setShow", payload: false });
|
|
178
179
|
dispatch({ type: "tool/setActiveTool", payload: "select" });
|
|
@@ -223,7 +224,7 @@ const UploadToolForm = (props) => {
|
|
|
223
224
|
<Form.Item label="Name" name="shape" className="w-full">
|
|
224
225
|
<Select className="w-full">
|
|
225
226
|
{optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
|
|
226
|
-
const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
|
|
227
|
+
const disabled = item.value === "table-seat-rect-circle" && (maxSeat > 4 || maxSeat < 4);
|
|
227
228
|
return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
|
|
228
229
|
<Flex gap={5} align="center" justify="between">
|
|
229
230
|
{item.icon}
|
|
@@ -121,6 +121,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
|
|
|
121
121
|
type: "panel/setSelectedComponent",
|
|
122
122
|
payload: null,
|
|
123
123
|
});
|
|
124
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
124
125
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
125
126
|
};
|
|
126
127
|
const toggleGrid = () => {
|
|
@@ -120,6 +120,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
|
|
|
120
120
|
type: "panel/setSelectedComponent",
|
|
121
121
|
payload: null,
|
|
122
122
|
});
|
|
123
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
123
124
|
dispatch({ type: "board/setFlagChange", payload: true });
|
|
124
125
|
};
|
|
125
126
|
const toggleGrid = () => {
|
|
@@ -383,7 +383,7 @@ const LayerView = (props) => {
|
|
|
383
383
|
y: y - startBox.y,
|
|
384
384
|
};
|
|
385
385
|
const pointerMoveGhost = (ev) => {
|
|
386
|
-
var _a;
|
|
386
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
387
387
|
if (allowedDrag) {
|
|
388
388
|
isDragging.current = true;
|
|
389
389
|
const p = svg.createSVGPoint();
|
|
@@ -406,10 +406,21 @@ const LayerView = (props) => {
|
|
|
406
406
|
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
407
407
|
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
408
408
|
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
409
|
+
if (dataHoveredGhostId === hoverUnderghostId.current) {
|
|
410
|
+
(_c = (_b = (_a = hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
|
|
411
|
+
}
|
|
412
|
+
if (dataHoveredGhostId !== hoverUnderghostId.current) {
|
|
413
|
+
const dataPreview = hoverUnderghostId.current;
|
|
414
|
+
const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
|
|
415
|
+
if (hoveredBefore) {
|
|
416
|
+
(_f = (_e = (_d = hoveredBefore.firstChild) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0.5");
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
(_j = (_h = (_g = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.firstChild) === null || _g === void 0 ? void 0 : _g.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.setAttribute("opacity", "1");
|
|
409
420
|
if (dataHoveredGhostId !== dataGhostId) {
|
|
410
421
|
hoverUnderghostId.current = dataHoveredGhostId;
|
|
411
422
|
}
|
|
412
|
-
const posSVG = p.matrixTransform((
|
|
423
|
+
const posSVG = p.matrixTransform((_k = svg.getScreenCTM()) === null || _k === void 0 ? void 0 : _k.inverse());
|
|
413
424
|
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
414
425
|
const newX = posSVG.x - offset.x;
|
|
415
426
|
const newY = posSVG.y - offset.y;
|
|
@@ -382,7 +382,7 @@ const LayerView = (props) => {
|
|
|
382
382
|
y: y - startBox.y,
|
|
383
383
|
};
|
|
384
384
|
const pointerMoveGhost = (ev) => {
|
|
385
|
-
var _a;
|
|
385
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
386
386
|
if (allowedDrag) {
|
|
387
387
|
isDragging.current = true;
|
|
388
388
|
const p = svg.createSVGPoint();
|
|
@@ -405,10 +405,21 @@ const LayerView = (props) => {
|
|
|
405
405
|
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
406
406
|
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
407
407
|
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
408
|
+
if (dataHoveredGhostId === hoverUnderghostId.current) {
|
|
409
|
+
(_c = (_b = (_a = hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.firstChild) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
|
|
410
|
+
}
|
|
411
|
+
if (dataHoveredGhostId !== hoverUnderghostId.current) {
|
|
412
|
+
const dataPreview = hoverUnderghostId.current;
|
|
413
|
+
const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
|
|
414
|
+
if (hoveredBefore) {
|
|
415
|
+
(_f = (_e = (_d = hoveredBefore.firstChild) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.setAttribute("opacity", "0.5");
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
(_j = (_h = (_g = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.firstChild) === null || _g === void 0 ? void 0 : _g.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.setAttribute("opacity", "1");
|
|
408
419
|
if (dataHoveredGhostId !== dataGhostId) {
|
|
409
420
|
hoverUnderghostId.current = dataHoveredGhostId;
|
|
410
421
|
}
|
|
411
|
-
const posSVG = p.matrixTransform((
|
|
422
|
+
const posSVG = p.matrixTransform((_k = svg.getScreenCTM()) === null || _k === void 0 ? void 0 : _k.inverse());
|
|
412
423
|
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
413
424
|
const newX = posSVG.x - offset.x;
|
|
414
425
|
const newY = posSVG.y - offset.y;
|