seat-editor 3.5.47 → 3.5.49
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.
|
@@ -332,6 +332,10 @@ const LayerView = (props) => {
|
|
|
332
332
|
const clickTimerRef = useRef(null);
|
|
333
333
|
const ignoreNextRef = useRef(false);
|
|
334
334
|
const DOUBLE_DELAY = 250;
|
|
335
|
+
const componentsAll = [
|
|
336
|
+
...extraComponentsEditor,
|
|
337
|
+
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|
|
338
|
+
];
|
|
335
339
|
const handlePointerDown = (e) => {
|
|
336
340
|
var _a;
|
|
337
341
|
const svg = svgRef.current;
|
|
@@ -385,7 +389,7 @@ const LayerView = (props) => {
|
|
|
385
389
|
y: y - startBox.y,
|
|
386
390
|
};
|
|
387
391
|
const pointerMoveGhost = (ev) => {
|
|
388
|
-
var _a;
|
|
392
|
+
var _a, _b, _c, _d;
|
|
389
393
|
if (allowedDrag) {
|
|
390
394
|
isDragging.current = true;
|
|
391
395
|
const p = svg.createSVGPoint();
|
|
@@ -411,10 +415,12 @@ const LayerView = (props) => {
|
|
|
411
415
|
const findEvent = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((item) => item.event === "hoverdragontable");
|
|
412
416
|
if (dataHoveredGhostId === hoverUnderghostId.current && findEvent) {
|
|
413
417
|
const allKeyEvent = Object.keys(findEvent.properties);
|
|
418
|
+
const findId = componentsAll === null || componentsAll === void 0 ? void 0 : componentsAll.find((item) => item.id == hoverUnderghostId.current);
|
|
419
|
+
console.log(findId, hoverUnderghostId.current);
|
|
414
420
|
dataBeforeHoverRef.current = allKeyEvent.map((key) => {
|
|
415
421
|
return {
|
|
416
422
|
key,
|
|
417
|
-
value:
|
|
423
|
+
value: findId === null || findId === void 0 ? void 0 : findId[key]
|
|
418
424
|
};
|
|
419
425
|
});
|
|
420
426
|
Object.entries(findEvent.properties).forEach(([key, value]) => {
|
|
@@ -426,7 +432,7 @@ const LayerView = (props) => {
|
|
|
426
432
|
const dataPreview = hoverUnderghostId.current;
|
|
427
433
|
const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
|
|
428
434
|
if (hoveredBefore) {
|
|
429
|
-
|
|
435
|
+
(_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("opacity", "0.5");
|
|
430
436
|
dataBeforeHoverRef.current.forEach((item) => {
|
|
431
437
|
var _a, _b, _c;
|
|
432
438
|
(_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);
|
|
@@ -444,7 +450,7 @@ const LayerView = (props) => {
|
|
|
444
450
|
if (dataHoveredGhostId !== dataGhostId) {
|
|
445
451
|
hoverUnderghostId.current = dataHoveredGhostId;
|
|
446
452
|
}
|
|
447
|
-
const posSVG = p.matrixTransform((
|
|
453
|
+
const posSVG = p.matrixTransform((_d = svg.getScreenCTM()) === null || _d === void 0 ? void 0 : _d.inverse());
|
|
448
454
|
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
449
455
|
const newX = posSVG.x - offset.x;
|
|
450
456
|
const newY = posSVG.y - offset.y;
|
|
@@ -676,9 +682,6 @@ const LayerView = (props) => {
|
|
|
676
682
|
// pointerEvents: disabled ? "none" : "all",
|
|
677
683
|
touchAction: "none",
|
|
678
684
|
userSelect: "none",
|
|
679
|
-
} }, props.svgProps, { children: [hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", clipPath: "url(#contentCrop)", children: _jsx(Layers, { components:
|
|
680
|
-
...extraComponentsEditor,
|
|
681
|
-
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|
|
682
|
-
], selectedTable: selectedTable, iconTags: iconTags, eventMatchTable: eventMatchTable, privilegedTags: privilegedTags }) })] })), tooltip.visible && (_jsx("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / scale})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children }))] }) }))] })));
|
|
685
|
+
} }, props.svgProps, { children: [hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", clipPath: "url(#contentCrop)", children: _jsx(Layers, { components: componentsAll, selectedTable: selectedTable, iconTags: iconTags, eventMatchTable: eventMatchTable, privilegedTags: privilegedTags }) })] })), tooltip.visible && (_jsx("div", { className: `seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`, style: Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / scale})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style), children: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children }))] }) }))] })));
|
|
683
686
|
};
|
|
684
687
|
export default LayerView;
|
|
@@ -331,6 +331,10 @@ const LayerView = (props) => {
|
|
|
331
331
|
const clickTimerRef = useRef(null);
|
|
332
332
|
const ignoreNextRef = useRef(false);
|
|
333
333
|
const DOUBLE_DELAY = 250;
|
|
334
|
+
const componentsAll = [
|
|
335
|
+
...extraComponentsEditor,
|
|
336
|
+
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|
|
337
|
+
];
|
|
334
338
|
const handlePointerDown = (e) => {
|
|
335
339
|
var _a;
|
|
336
340
|
const svg = svgRef.current;
|
|
@@ -384,7 +388,7 @@ const LayerView = (props) => {
|
|
|
384
388
|
y: y - startBox.y,
|
|
385
389
|
};
|
|
386
390
|
const pointerMoveGhost = (ev) => {
|
|
387
|
-
var _a;
|
|
391
|
+
var _a, _b, _c, _d;
|
|
388
392
|
if (allowedDrag) {
|
|
389
393
|
isDragging.current = true;
|
|
390
394
|
const p = svg.createSVGPoint();
|
|
@@ -410,10 +414,12 @@ const LayerView = (props) => {
|
|
|
410
414
|
const findEvent = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((item) => item.event === "hoverdragontable");
|
|
411
415
|
if (dataHoveredGhostId === hoverUnderghostId.current && findEvent) {
|
|
412
416
|
const allKeyEvent = Object.keys(findEvent.properties);
|
|
417
|
+
const findId = componentsAll === null || componentsAll === void 0 ? void 0 : componentsAll.find((item) => item.id == hoverUnderghostId.current);
|
|
418
|
+
console.log(findId, hoverUnderghostId.current);
|
|
413
419
|
dataBeforeHoverRef.current = allKeyEvent.map((key) => {
|
|
414
420
|
return {
|
|
415
421
|
key,
|
|
416
|
-
value:
|
|
422
|
+
value: findId === null || findId === void 0 ? void 0 : findId[key]
|
|
417
423
|
};
|
|
418
424
|
});
|
|
419
425
|
Object.entries(findEvent.properties).forEach(([key, value]) => {
|
|
@@ -425,7 +431,7 @@ const LayerView = (props) => {
|
|
|
425
431
|
const dataPreview = hoverUnderghostId.current;
|
|
426
432
|
const hoveredBefore = svg.querySelector(`g[data-id="${dataPreview}"]`);
|
|
427
433
|
if (hoveredBefore) {
|
|
428
|
-
|
|
434
|
+
(_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("opacity", "0.5");
|
|
429
435
|
dataBeforeHoverRef.current.forEach((item) => {
|
|
430
436
|
var _a, _b, _c;
|
|
431
437
|
(_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);
|
|
@@ -443,7 +449,7 @@ const LayerView = (props) => {
|
|
|
443
449
|
if (dataHoveredGhostId !== dataGhostId) {
|
|
444
450
|
hoverUnderghostId.current = dataHoveredGhostId;
|
|
445
451
|
}
|
|
446
|
-
const posSVG = p.matrixTransform((
|
|
452
|
+
const posSVG = p.matrixTransform((_d = svg.getScreenCTM()) === null || _d === void 0 ? void 0 : _d.inverse());
|
|
447
453
|
// posisi awal ghost di bawah kursor tanpa matrix dulu
|
|
448
454
|
const newX = posSVG.x - offset.x;
|
|
449
455
|
const newY = posSVG.y - offset.y;
|
|
@@ -695,10 +701,7 @@ const LayerView = (props) => {
|
|
|
695
701
|
</clipPath>
|
|
696
702
|
</defs>)}
|
|
697
703
|
<g id="main-layer" clipPath="url(#contentCrop)">
|
|
698
|
-
<Layers components={
|
|
699
|
-
...extraComponentsEditor,
|
|
700
|
-
...renderElements(componentsEditor, mappingKey, tableMatchKey),
|
|
701
|
-
]} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable} privilegedTags={privilegedTags}/>
|
|
704
|
+
<Layers components={componentsAll} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable} privilegedTags={privilegedTags}/>
|
|
702
705
|
</g>
|
|
703
706
|
{/* 🧠 Ghost universal */}
|
|
704
707
|
</svg>
|