seat-editor 3.5.34 → 3.5.45
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.
|
@@ -205,10 +205,18 @@ const TouchScrollDetect = () => {
|
|
|
205
205
|
event: "dragenter",
|
|
206
206
|
properties: { strokeWidth: 5 },
|
|
207
207
|
},
|
|
208
|
+
// {
|
|
209
|
+
// event: "selected",
|
|
210
|
+
// properties: { strokeWidth: 5 },
|
|
211
|
+
// },
|
|
208
212
|
{
|
|
209
|
-
event: "
|
|
210
|
-
properties: {
|
|
213
|
+
event: "hoverdragontable",
|
|
214
|
+
properties: {
|
|
215
|
+
strokeWidth: 5,
|
|
216
|
+
filter: "drop-shadow(0px 0px 5px red)",
|
|
217
|
+
},
|
|
211
218
|
},
|
|
219
|
+
// hoverdragontable
|
|
212
220
|
], iconTags: [
|
|
213
221
|
{
|
|
214
222
|
icon: _jsx(ChairIcon, {}),
|
|
@@ -229,10 +229,18 @@ const TouchScrollDetect = () => {
|
|
|
229
229
|
event: "dragenter",
|
|
230
230
|
properties: { strokeWidth: 5 },
|
|
231
231
|
},
|
|
232
|
+
// {
|
|
233
|
+
// event: "selected",
|
|
234
|
+
// properties: { strokeWidth: 5 },
|
|
235
|
+
// },
|
|
232
236
|
{
|
|
233
|
-
event: "
|
|
234
|
-
properties: {
|
|
237
|
+
event: "hoverdragontable",
|
|
238
|
+
properties: {
|
|
239
|
+
strokeWidth: 5,
|
|
240
|
+
filter: "drop-shadow(0px 0px 5px red)",
|
|
241
|
+
},
|
|
235
242
|
},
|
|
243
|
+
// hoverdragontable
|
|
236
244
|
]} iconTags={[
|
|
237
245
|
{
|
|
238
246
|
icon: <ChairIcon />,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type EventHandleType = "dragover" | "dragleave" | "drop" | "dragend" | "mousemove" | "mouseleave" | "mouseenter" | "dragleave" | "dragenter" | "pointerover" | "mousedown" | "pointerup" | "pointerdown" | "pointermove" | "pointerup" | "touchstart" | "touchmove" | "touchend" | "selected";
|
|
1
|
+
export type EventHandleType = "dragover" | "dragleave" | "drop" | "dragend" | "mousemove" | "mouseleave" | "mouseenter" | "dragleave" | "dragenter" | "pointerover" | "mousedown" | "pointerup" | "pointerdown" | "pointermove" | "pointerup" | "touchstart" | "touchmove" | "touchend" | "selected" | "hoverdragontable";
|
|
@@ -317,6 +317,8 @@ const LayerView = (props) => {
|
|
|
317
317
|
console.error("Invalid data-id JSON:", err);
|
|
318
318
|
}
|
|
319
319
|
};
|
|
320
|
+
const dataBeforeHoverRef = useRef([]);
|
|
321
|
+
let dataBeforeHoveredUnderGhost = [];
|
|
320
322
|
const getSvgCoords = (e) => {
|
|
321
323
|
var _a;
|
|
322
324
|
const svg = svgRef.current;
|
|
@@ -383,7 +385,7 @@ const LayerView = (props) => {
|
|
|
383
385
|
y: y - startBox.y,
|
|
384
386
|
};
|
|
385
387
|
const pointerMoveGhost = (ev) => {
|
|
386
|
-
var _a
|
|
388
|
+
var _a;
|
|
387
389
|
if (allowedDrag) {
|
|
388
390
|
isDragging.current = true;
|
|
389
391
|
const p = svg.createSVGPoint();
|
|
@@ -406,21 +408,43 @@ const LayerView = (props) => {
|
|
|
406
408
|
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
407
409
|
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
408
410
|
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
409
|
-
|
|
410
|
-
|
|
411
|
+
const findEvent = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((item) => item.event === "hoverdragontable");
|
|
412
|
+
if (dataHoveredGhostId === hoverUnderghostId.current && findEvent) {
|
|
413
|
+
const allKeyEvent = Object.keys(findEvent.properties);
|
|
414
|
+
dataBeforeHoveredUnderGhost = allKeyEvent.map((key) => {
|
|
415
|
+
return {
|
|
416
|
+
key,
|
|
417
|
+
value: hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute(key)
|
|
418
|
+
};
|
|
419
|
+
});
|
|
420
|
+
Object.entries(findEvent.properties).forEach(([key, value]) => {
|
|
421
|
+
var _a, _b, _c;
|
|
422
|
+
(_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(key, value);
|
|
423
|
+
});
|
|
411
424
|
}
|
|
412
425
|
if (dataHoveredGhostId !== hoverUnderghostId.current) {
|
|
413
426
|
const dataPreview = hoverUnderghostId.current;
|
|
414
427
|
const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
|
|
415
428
|
if (hoveredBefore) {
|
|
416
|
-
(
|
|
429
|
+
dataBeforeHoveredUnderGhost.forEach((item) => {
|
|
430
|
+
var _a, _b, _c;
|
|
431
|
+
(_c = (_b = (_a = hoveredBefore.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(item.key, item.value);
|
|
432
|
+
});
|
|
417
433
|
}
|
|
418
434
|
}
|
|
419
|
-
|
|
435
|
+
if (findEvent && targetGroup) {
|
|
436
|
+
// console
|
|
437
|
+
const idTarget = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
438
|
+
const targetElement = svg.querySelector(`g[data-id="${idTarget}"]`);
|
|
439
|
+
Object.entries(findEvent.properties).forEach(([key, value]) => {
|
|
440
|
+
var _a, _b, _c;
|
|
441
|
+
(_c = (_b = (_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.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(key, value);
|
|
442
|
+
});
|
|
443
|
+
}
|
|
420
444
|
if (dataHoveredGhostId !== dataGhostId) {
|
|
421
445
|
hoverUnderghostId.current = dataHoveredGhostId;
|
|
422
446
|
}
|
|
423
|
-
const posSVG = p.matrixTransform((
|
|
447
|
+
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
424
448
|
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
425
449
|
const newX = posSVG.x - offset.x;
|
|
426
450
|
const newY = posSVG.y - offset.y;
|
|
@@ -316,6 +316,8 @@ const LayerView = (props) => {
|
|
|
316
316
|
console.error("Invalid data-id JSON:", err);
|
|
317
317
|
}
|
|
318
318
|
};
|
|
319
|
+
const dataBeforeHoverRef = useRef([]);
|
|
320
|
+
let dataBeforeHoveredUnderGhost = [];
|
|
319
321
|
const getSvgCoords = (e) => {
|
|
320
322
|
var _a;
|
|
321
323
|
const svg = svgRef.current;
|
|
@@ -382,7 +384,7 @@ const LayerView = (props) => {
|
|
|
382
384
|
y: y - startBox.y,
|
|
383
385
|
};
|
|
384
386
|
const pointerMoveGhost = (ev) => {
|
|
385
|
-
var _a
|
|
387
|
+
var _a;
|
|
386
388
|
if (allowedDrag) {
|
|
387
389
|
isDragging.current = true;
|
|
388
390
|
const p = svg.createSVGPoint();
|
|
@@ -405,21 +407,43 @@ const LayerView = (props) => {
|
|
|
405
407
|
const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
|
|
406
408
|
const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
|
|
407
409
|
const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
|
|
408
|
-
|
|
409
|
-
|
|
410
|
+
const findEvent = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((item) => item.event === "hoverdragontable");
|
|
411
|
+
if (dataHoveredGhostId === hoverUnderghostId.current && findEvent) {
|
|
412
|
+
const allKeyEvent = Object.keys(findEvent.properties);
|
|
413
|
+
dataBeforeHoveredUnderGhost = allKeyEvent.map((key) => {
|
|
414
|
+
return {
|
|
415
|
+
key,
|
|
416
|
+
value: hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute(key)
|
|
417
|
+
};
|
|
418
|
+
});
|
|
419
|
+
Object.entries(findEvent.properties).forEach(([key, value]) => {
|
|
420
|
+
var _a, _b, _c;
|
|
421
|
+
(_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(key, value);
|
|
422
|
+
});
|
|
410
423
|
}
|
|
411
424
|
if (dataHoveredGhostId !== hoverUnderghostId.current) {
|
|
412
425
|
const dataPreview = hoverUnderghostId.current;
|
|
413
426
|
const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
|
|
414
427
|
if (hoveredBefore) {
|
|
415
|
-
(
|
|
428
|
+
dataBeforeHoveredUnderGhost.forEach((item) => {
|
|
429
|
+
var _a, _b, _c;
|
|
430
|
+
(_c = (_b = (_a = hoveredBefore.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(item.key, item.value);
|
|
431
|
+
});
|
|
416
432
|
}
|
|
417
433
|
}
|
|
418
|
-
|
|
434
|
+
if (findEvent && targetGroup) {
|
|
435
|
+
// console
|
|
436
|
+
const idTarget = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
437
|
+
const targetElement = svg.querySelector(`g[data-id="${idTarget}"]`);
|
|
438
|
+
Object.entries(findEvent.properties).forEach(([key, value]) => {
|
|
439
|
+
var _a, _b, _c;
|
|
440
|
+
(_c = (_b = (_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.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(key, value);
|
|
441
|
+
});
|
|
442
|
+
}
|
|
419
443
|
if (dataHoveredGhostId !== dataGhostId) {
|
|
420
444
|
hoverUnderghostId.current = dataHoveredGhostId;
|
|
421
445
|
}
|
|
422
|
-
const posSVG = p.matrixTransform((
|
|
446
|
+
const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
|
|
423
447
|
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
424
448
|
const newX = posSVG.x - offset.x;
|
|
425
449
|
const newY = posSVG.y - offset.y;
|