seat-editor 3.5.33 → 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 +6 -0
- package/dist/features/board-v3/index.jsx +6 -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})`}>
|
|
@@ -668,6 +668,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
668
668
|
type: "panel/setSelectedGroup",
|
|
669
669
|
payload: null,
|
|
670
670
|
});
|
|
671
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
671
672
|
polygonElementRef.current = null;
|
|
672
673
|
}
|
|
673
674
|
// const selectionLines = svgRef.current?.querySelector(
|
|
@@ -1526,6 +1527,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1526
1527
|
type: "panel/setSelectedComponent",
|
|
1527
1528
|
payload: null,
|
|
1528
1529
|
});
|
|
1530
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
1529
1531
|
}
|
|
1530
1532
|
else {
|
|
1531
1533
|
dataElementSelectionGroupRef.current = [];
|
|
@@ -1654,6 +1656,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1654
1656
|
if (isInitialCreateText) {
|
|
1655
1657
|
const ghost = svg.querySelector("#ghost-element-create");
|
|
1656
1658
|
const getBBox = getGlobalBBox(svg, ghost);
|
|
1659
|
+
const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
|
|
1657
1660
|
const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
|
|
1658
1661
|
addComponents(text);
|
|
1659
1662
|
dispatch({
|
|
@@ -1669,6 +1672,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1669
1672
|
type: "tool/setActiveTool",
|
|
1670
1673
|
payload: "select",
|
|
1671
1674
|
});
|
|
1675
|
+
console.log({ selectionLines });
|
|
1676
|
+
dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
|
|
1677
|
+
setSelectedLines(selectionLines);
|
|
1672
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());
|
|
1673
1679
|
isCreateElementRef.current = false;
|
|
1674
1680
|
}
|
|
@@ -667,6 +667,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
667
667
|
type: "panel/setSelectedGroup",
|
|
668
668
|
payload: null,
|
|
669
669
|
});
|
|
670
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
670
671
|
polygonElementRef.current = null;
|
|
671
672
|
}
|
|
672
673
|
// const selectionLines = svgRef.current?.querySelector(
|
|
@@ -1525,6 +1526,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1525
1526
|
type: "panel/setSelectedComponent",
|
|
1526
1527
|
payload: null,
|
|
1527
1528
|
});
|
|
1529
|
+
dispatch({ type: "panel/setSelectionLines", payload: null });
|
|
1528
1530
|
}
|
|
1529
1531
|
else {
|
|
1530
1532
|
dataElementSelectionGroupRef.current = [];
|
|
@@ -1653,6 +1655,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1653
1655
|
if (isInitialCreateText) {
|
|
1654
1656
|
const ghost = svg.querySelector("#ghost-element-create");
|
|
1655
1657
|
const getBBox = getGlobalBBox(svg, ghost);
|
|
1658
|
+
const selectionLines = Object.assign(Object.assign({}, getBBox), { shape: "selection-box" });
|
|
1656
1659
|
const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fontColor: "#000000", text: "Text", fontSize: 14, rotation: 0 });
|
|
1657
1660
|
addComponents(text);
|
|
1658
1661
|
dispatch({
|
|
@@ -1668,6 +1671,9 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
|
|
|
1668
1671
|
type: "tool/setActiveTool",
|
|
1669
1672
|
payload: "select",
|
|
1670
1673
|
});
|
|
1674
|
+
console.log({ selectionLines });
|
|
1675
|
+
dispatch({ type: "panel/setSelectionLines", payload: selectionLines });
|
|
1676
|
+
setSelectedLines(selectionLines);
|
|
1671
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());
|
|
1672
1678
|
isCreateElementRef.current = false;
|
|
1673
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;
|