seat-editor 3.6.24 → 3.6.26
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.
|
@@ -18,6 +18,7 @@ export default function GraphView() {
|
|
|
18
18
|
selection: false,
|
|
19
19
|
selectNode: false,
|
|
20
20
|
connectingNode: false,
|
|
21
|
+
dragTransferTable: false
|
|
21
22
|
});
|
|
22
23
|
const [isSelectNode, setIsSelectNode] = useState(false);
|
|
23
24
|
const [sections, setSections] = useState([
|
|
@@ -105,6 +106,10 @@ export default function GraphView() {
|
|
|
105
106
|
key: "connectingNode",
|
|
106
107
|
name: "Connecting Node",
|
|
107
108
|
},
|
|
109
|
+
{
|
|
110
|
+
key: "dragTransferTable",
|
|
111
|
+
name: "Drag Transfer Table",
|
|
112
|
+
}
|
|
108
113
|
];
|
|
109
114
|
const [dataDrag, setDataDrag] = useState(null);
|
|
110
115
|
console.log({ dataDrag });
|
|
@@ -164,5 +169,7 @@ export default function GraphView() {
|
|
|
164
169
|
selection: selection
|
|
165
170
|
}, onRightClick: (e, data) => {
|
|
166
171
|
console.log({ e, data });
|
|
167
|
-
}, allowTooltip: true
|
|
172
|
+
}, allowTooltip: true, onHoldTable: (e, data) => {
|
|
173
|
+
console.log({ e, data });
|
|
174
|
+
} }), _jsxs("div", { className: "w-1/5 p-4", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx("div", { id: "table" }), _jsxs("div", { className: "rounded-lg bg-white p-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Section" }), sections.map((section) => (_jsxs("div", { className: clsx("font-bold text-white rounded-md p-2 cursor-pointer", sectionActive === section.id && "!bg-blue-500"), style: { backgroundColor: section.color }, onClick: () => setSectionActive(section.id), children: [_jsx("h2", { className: "text-lg", children: section.name }), section.items.length > 0 && (_jsx("ul", { className: "list-disc pl-5 bg-opacity-50 bg-white p-2 rounded ", children: section.items.map((item) => (_jsx("li", { children: item.name }, item.id))) }))] }, section.id)))] })] }), _jsx("div", { className: "w-1/5 p-4", children: _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("h1", { className: "text-2xl font-bold", children: "Nodes" }) }) })] }) }));
|
|
168
175
|
}
|
|
@@ -17,6 +17,7 @@ export default function GraphView() {
|
|
|
17
17
|
selection: false,
|
|
18
18
|
selectNode: false,
|
|
19
19
|
connectingNode: false,
|
|
20
|
+
dragTransferTable: false
|
|
20
21
|
});
|
|
21
22
|
const [isSelectNode, setIsSelectNode] = useState(false);
|
|
22
23
|
const [sections, setSections] = useState([
|
|
@@ -104,6 +105,10 @@ export default function GraphView() {
|
|
|
104
105
|
key: "connectingNode",
|
|
105
106
|
name: "Connecting Node",
|
|
106
107
|
},
|
|
108
|
+
{
|
|
109
|
+
key: "dragTransferTable",
|
|
110
|
+
name: "Drag Transfer Table",
|
|
111
|
+
}
|
|
107
112
|
];
|
|
108
113
|
const [dataDrag, setDataDrag] = useState(null);
|
|
109
114
|
console.log({ dataDrag });
|
|
@@ -170,7 +175,9 @@ export default function GraphView() {
|
|
|
170
175
|
selection: selection
|
|
171
176
|
}} onRightClick={(e, data) => {
|
|
172
177
|
console.log({ e, data });
|
|
173
|
-
}} allowTooltip={true}
|
|
178
|
+
}} allowTooltip={true} onHoldTable={(e, data) => {
|
|
179
|
+
console.log({ e, data });
|
|
180
|
+
}}/>
|
|
174
181
|
<div className="w-1/5 p-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
|
|
175
182
|
<div id="table"/>
|
|
176
183
|
<div className="rounded-lg bg-white p-4">
|
|
@@ -100,6 +100,7 @@ export interface LayerViewProps<TMeta = undefined> {
|
|
|
100
100
|
dragTable?: boolean;
|
|
101
101
|
selectNode?: boolean;
|
|
102
102
|
connectingNode?: boolean;
|
|
103
|
+
dragTransferTable?: boolean;
|
|
103
104
|
};
|
|
104
105
|
onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
|
|
105
106
|
keyNode?: string;
|
|
@@ -112,6 +113,7 @@ export interface LayerViewProps<TMeta = undefined> {
|
|
|
112
113
|
dataKey: string;
|
|
113
114
|
selection: Record<number, string[]>;
|
|
114
115
|
};
|
|
116
|
+
onHoldTable?: (e: React.PointerEvent<SVGSVGElement>, component: ComponentProps<TMeta>[]) => void;
|
|
115
117
|
}
|
|
116
118
|
declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
|
|
117
119
|
export default LayerView;
|
|
@@ -27,8 +27,9 @@ const LayerView = (props) => {
|
|
|
27
27
|
viewGraph: false,
|
|
28
28
|
dragTable: false,
|
|
29
29
|
selectNode: false,
|
|
30
|
-
connectingNode: false
|
|
31
|
-
|
|
30
|
+
connectingNode: false,
|
|
31
|
+
dragTransferTable: false,
|
|
32
|
+
}, onMakeSelection, groupSelection, onHoldTable } = props;
|
|
32
33
|
const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
|
|
33
34
|
const tableGhost = useRef(null);
|
|
34
35
|
const hoverUnderghostId = useRef(null);
|
|
@@ -62,7 +63,9 @@ const LayerView = (props) => {
|
|
|
62
63
|
}));
|
|
63
64
|
const dispatch = useAppDispatch();
|
|
64
65
|
useEffect(() => {
|
|
65
|
-
|
|
66
|
+
if (!(tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open)) {
|
|
67
|
+
setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
|
|
68
|
+
}
|
|
66
69
|
}, [tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open]);
|
|
67
70
|
useEffect(() => {
|
|
68
71
|
if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
|
|
@@ -264,6 +267,7 @@ const LayerView = (props) => {
|
|
|
264
267
|
setSelectedLines(null);
|
|
265
268
|
}
|
|
266
269
|
}, [actionPrivileged]);
|
|
270
|
+
const timerRef = useRef(null);
|
|
267
271
|
const handlePointerDown = (e) => {
|
|
268
272
|
var _a, _b, _c;
|
|
269
273
|
const svg = svgRef.current;
|
|
@@ -309,10 +313,30 @@ const LayerView = (props) => {
|
|
|
309
313
|
return;
|
|
310
314
|
}
|
|
311
315
|
setPanningGroup(true);
|
|
312
|
-
if (makeSelection &&
|
|
316
|
+
if (makeSelection &&
|
|
317
|
+
(props === null || props === void 0 ? void 0 : props.allowTooltip) &&
|
|
318
|
+
(tooltip === null || tooltip === void 0 ? void 0 : tooltip.visible) &&
|
|
319
|
+
e.button !== 2) {
|
|
313
320
|
setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
|
|
314
321
|
return;
|
|
315
322
|
}
|
|
323
|
+
if ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTransferTable) && e.button === 0) {
|
|
324
|
+
const targetGroup = e.target.closest("g[data-id]");
|
|
325
|
+
const targetSelectionGroup = e.target.closest("g[data-selection]");
|
|
326
|
+
if (targetGroup) {
|
|
327
|
+
const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
328
|
+
const findDayaById = originalData({ id: dataId, type: "find" });
|
|
329
|
+
timerRef.current = setTimeout(() => {
|
|
330
|
+
onHoldTable && onHoldTable(e, [findDayaById]);
|
|
331
|
+
}, 1000);
|
|
332
|
+
}
|
|
333
|
+
if (targetSelectionGroup) {
|
|
334
|
+
const tableData = dataElementSelectionGroupRef.current;
|
|
335
|
+
timerRef.current = setTimeout(() => {
|
|
336
|
+
onHoldTable && onHoldTable(e, tableData);
|
|
337
|
+
}, 1000);
|
|
338
|
+
}
|
|
339
|
+
}
|
|
316
340
|
let ghost = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.cloneNode(true);
|
|
317
341
|
const ghostId = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
|
|
318
342
|
const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
|
|
@@ -320,15 +344,16 @@ const LayerView = (props) => {
|
|
|
320
344
|
: !((_b = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _b === void 0 ? void 0 : _b.some((_) => {
|
|
321
345
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
322
346
|
return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
|
|
323
|
-
}))) &&
|
|
324
|
-
(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable);
|
|
347
|
+
}))) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable);
|
|
325
348
|
if (ghostAttributes) {
|
|
326
349
|
Object.keys(ghostAttributes).forEach((key) => ghost.setAttribute(key, ghostAttributes[key]));
|
|
327
350
|
}
|
|
328
351
|
if (allowedDrag) {
|
|
329
352
|
(_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData("application/json", JSON.stringify(ghostId));
|
|
330
353
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
331
|
-
(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable) &&
|
|
354
|
+
(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable) &&
|
|
355
|
+
(props === null || props === void 0 ? void 0 : props.onDragTable) &&
|
|
356
|
+
props.onDragTable(e, dataRaw);
|
|
332
357
|
}
|
|
333
358
|
ghost === null || ghost === void 0 ? void 0 : ghost.setAttribute("opacity", "0.5");
|
|
334
359
|
ghost === null || ghost === void 0 ? void 0 : ghost.setAttribute("pointer-events", "none");
|
|
@@ -464,7 +489,10 @@ const LayerView = (props) => {
|
|
|
464
489
|
const rightClick = e.button === 2 && allowTooltip;
|
|
465
490
|
setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
|
|
466
491
|
}
|
|
467
|
-
if (makeSelection &&
|
|
492
|
+
if (makeSelection &&
|
|
493
|
+
((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
494
|
+
e.button === 0 &&
|
|
495
|
+
!targetSelectionGroup) {
|
|
468
496
|
const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
|
|
469
497
|
const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
|
|
470
498
|
var _a, _b;
|
|
@@ -505,7 +533,10 @@ const LayerView = (props) => {
|
|
|
505
533
|
}
|
|
506
534
|
(_c = svg.querySelector("#selection-box-ghost")) === null || _c === void 0 ? void 0 : _c.remove();
|
|
507
535
|
}
|
|
508
|
-
if (makeSelection &&
|
|
536
|
+
if (makeSelection &&
|
|
537
|
+
((_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.length) === 0 &&
|
|
538
|
+
e.button === 0 &&
|
|
539
|
+
targetSelectionGroup) {
|
|
509
540
|
(_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
|
|
510
541
|
setSelectedLines(null);
|
|
511
542
|
}
|
|
@@ -630,7 +661,16 @@ const LayerView = (props) => {
|
|
|
630
661
|
const viewBox = isValidBoundingBox
|
|
631
662
|
? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
|
|
632
663
|
: "0 0 1000 1000";
|
|
633
|
-
const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
|
|
664
|
+
const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
|
|
665
|
+
componentsEditor,
|
|
666
|
+
mappingKey,
|
|
667
|
+
tableMatchKey,
|
|
668
|
+
statusKey,
|
|
669
|
+
graph.connecting,
|
|
670
|
+
groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection,
|
|
671
|
+
groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
|
|
672
|
+
groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
|
|
673
|
+
]);
|
|
634
674
|
return (_jsxs("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: { overflow: "auto", WebkitOverflowScrolling: "touch" } }, props.containerProps, { children: [loading && (_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(TransformWrapper, Object.assign({ ref: transformRef, disablePadding: true, centerZoomedOut: true, panning: { disabled: panningGroup, wheelPanning: true }, wheel: { disabled: false }, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, smooth: true, centerOnInit: true }, props.transformProps, { children: _jsxs(TransformComponent, { wrapperStyle: { width: "100%", height: "100%" }, contentStyle: { width: "100%", height: "100%" }, children: [_jsxs("svg", Object.assign({ id: "workspace", ref: svgRef, width: "100%", height: "100%", overflow: "hidden", viewBox: viewBox, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", onContextMenu: (e) => e.preventDefault(),
|
|
635
675
|
// onDrop={(e) => handleTableEvent(e, "drop")}
|
|
636
676
|
onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, onMouseMove: (e) => graph.onMouseMove(e), onMouseUp: () => graph.onMouseUp(), onClick: (e) => {
|
|
@@ -26,8 +26,9 @@ const LayerView = (props) => {
|
|
|
26
26
|
viewGraph: false,
|
|
27
27
|
dragTable: false,
|
|
28
28
|
selectNode: false,
|
|
29
|
-
connectingNode: false
|
|
30
|
-
|
|
29
|
+
connectingNode: false,
|
|
30
|
+
dragTransferTable: false,
|
|
31
|
+
}, onMakeSelection, groupSelection, onHoldTable } = props;
|
|
31
32
|
const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
|
|
32
33
|
const tableGhost = useRef(null);
|
|
33
34
|
const hoverUnderghostId = useRef(null);
|
|
@@ -61,7 +62,9 @@ const LayerView = (props) => {
|
|
|
61
62
|
}));
|
|
62
63
|
const dispatch = useAppDispatch();
|
|
63
64
|
useEffect(() => {
|
|
64
|
-
|
|
65
|
+
if (!(tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open)) {
|
|
66
|
+
setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
|
|
67
|
+
}
|
|
65
68
|
}, [tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.open]);
|
|
66
69
|
useEffect(() => {
|
|
67
70
|
if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
|
|
@@ -263,6 +266,7 @@ const LayerView = (props) => {
|
|
|
263
266
|
setSelectedLines(null);
|
|
264
267
|
}
|
|
265
268
|
}, [actionPrivileged]);
|
|
269
|
+
const timerRef = useRef(null);
|
|
266
270
|
const handlePointerDown = (e) => {
|
|
267
271
|
var _a, _b, _c;
|
|
268
272
|
const svg = svgRef.current;
|
|
@@ -308,10 +312,30 @@ const LayerView = (props) => {
|
|
|
308
312
|
return;
|
|
309
313
|
}
|
|
310
314
|
setPanningGroup(true);
|
|
311
|
-
if (makeSelection &&
|
|
315
|
+
if (makeSelection &&
|
|
316
|
+
(props === null || props === void 0 ? void 0 : props.allowTooltip) &&
|
|
317
|
+
(tooltip === null || tooltip === void 0 ? void 0 : tooltip.visible) &&
|
|
318
|
+
e.button !== 2) {
|
|
312
319
|
setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
|
|
313
320
|
return;
|
|
314
321
|
}
|
|
322
|
+
if ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTransferTable) && e.button === 0) {
|
|
323
|
+
const targetGroup = e.target.closest("g[data-id]");
|
|
324
|
+
const targetSelectionGroup = e.target.closest("g[data-selection]");
|
|
325
|
+
if (targetGroup) {
|
|
326
|
+
const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
|
|
327
|
+
const findDayaById = originalData({ id: dataId, type: "find" });
|
|
328
|
+
timerRef.current = setTimeout(() => {
|
|
329
|
+
onHoldTable && onHoldTable(e, [findDayaById]);
|
|
330
|
+
}, 1000);
|
|
331
|
+
}
|
|
332
|
+
if (targetSelectionGroup) {
|
|
333
|
+
const tableData = dataElementSelectionGroupRef.current;
|
|
334
|
+
timerRef.current = setTimeout(() => {
|
|
335
|
+
onHoldTable && onHoldTable(e, tableData);
|
|
336
|
+
}, 1000);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
315
339
|
let ghost = targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.cloneNode(true);
|
|
316
340
|
const ghostId = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
|
|
317
341
|
const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
|
|
@@ -319,15 +343,16 @@ const LayerView = (props) => {
|
|
|
319
343
|
: !((_b = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _b === void 0 ? void 0 : _b.some((_) => {
|
|
320
344
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
321
345
|
return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
|
|
322
|
-
}))) &&
|
|
323
|
-
(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable);
|
|
346
|
+
}))) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable);
|
|
324
347
|
if (ghostAttributes) {
|
|
325
348
|
Object.keys(ghostAttributes).forEach((key) => ghost.setAttribute(key, ghostAttributes[key]));
|
|
326
349
|
}
|
|
327
350
|
if (allowedDrag) {
|
|
328
351
|
(_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData("application/json", JSON.stringify(ghostId));
|
|
329
352
|
const dataRaw = originalData({ id: ghostId, type: "find" });
|
|
330
|
-
(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable) &&
|
|
353
|
+
(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.dragTable) &&
|
|
354
|
+
(props === null || props === void 0 ? void 0 : props.onDragTable) &&
|
|
355
|
+
props.onDragTable(e, dataRaw);
|
|
331
356
|
}
|
|
332
357
|
ghost === null || ghost === void 0 ? void 0 : ghost.setAttribute("opacity", "0.5");
|
|
333
358
|
ghost === null || ghost === void 0 ? void 0 : ghost.setAttribute("pointer-events", "none");
|
|
@@ -463,7 +488,10 @@ const LayerView = (props) => {
|
|
|
463
488
|
const rightClick = e.button === 2 && allowTooltip;
|
|
464
489
|
setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
|
|
465
490
|
}
|
|
466
|
-
if (makeSelection &&
|
|
491
|
+
if (makeSelection &&
|
|
492
|
+
((_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
493
|
+
e.button === 0 &&
|
|
494
|
+
!targetSelectionGroup) {
|
|
467
495
|
const allTableInSelection = (_b = dataElementSelectionGroupRef.current) === null || _b === void 0 ? void 0 : _b.map((d) => d.id);
|
|
468
496
|
const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => {
|
|
469
497
|
var _a, _b;
|
|
@@ -504,7 +532,10 @@ const LayerView = (props) => {
|
|
|
504
532
|
}
|
|
505
533
|
(_c = svg.querySelector("#selection-box-ghost")) === null || _c === void 0 ? void 0 : _c.remove();
|
|
506
534
|
}
|
|
507
|
-
if (makeSelection &&
|
|
535
|
+
if (makeSelection &&
|
|
536
|
+
((_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.length) === 0 &&
|
|
537
|
+
e.button === 0 &&
|
|
538
|
+
targetSelectionGroup) {
|
|
508
539
|
(_e = svg.querySelector("#selection-box-ghost")) === null || _e === void 0 ? void 0 : _e.remove();
|
|
509
540
|
setSelectedLines(null);
|
|
510
541
|
}
|
|
@@ -629,7 +660,16 @@ const LayerView = (props) => {
|
|
|
629
660
|
const viewBox = isValidBoundingBox
|
|
630
661
|
? `${boundingBox.minX - (((_a = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _a === void 0 ? void 0 : _a.paddingLeft) || 0)} ${boundingBox.minY - (((_b = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0)} ${boundingBox.width + (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingRight) || 0)} ${boundingBox.height + (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingBottom) || 0)}`
|
|
631
662
|
: "0 0 1000 1000";
|
|
632
|
-
const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
|
|
663
|
+
const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, graph.connecting, groupSelection), [
|
|
664
|
+
componentsEditor,
|
|
665
|
+
mappingKey,
|
|
666
|
+
tableMatchKey,
|
|
667
|
+
statusKey,
|
|
668
|
+
graph.connecting,
|
|
669
|
+
groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.selection,
|
|
670
|
+
groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey,
|
|
671
|
+
groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.colorGroupSelection,
|
|
672
|
+
]);
|
|
633
673
|
return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }} {...props.containerProps}>
|
|
634
674
|
{loading && (<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">
|
|
635
675
|
{(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
|