alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(react/applyChanges): handle deletion and expandParent

Browse Source
This commit is contained in:
moklick
2024-01-10 11:11:38 +01:00
parent 8afe8b0272
commit cc921045ca
1 changed files with 44 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/utils/changes.ts
+44 -36
View File
@@ -1,46 +1,50 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import type { Node, Edge, EdgeChange, NodeChange, NodeSelectionChange, EdgeSelectionChange } from '../types'; import type { Node, Edge, EdgeChange, NodeChange, NodeSelectionChange, EdgeSelectionChange } from '../types';
export function handleParentExpand(res: any[], updateItem: any) { export function handleParentExpand(updatedElements: any[], updateItem: any) {
const parent = res.find((e) => e.id === updateItem.parentNode); for (const [index, item] of updatedElements.entries()) {
if (item.id === updateItem.parentNode) {
const parent = { ...item };
if (parent) { if (!parent.computed) {
if (!parent.computed) { parent.computed = {};
parent.computed = {};
}
const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
parent.style = { ...parent.style } || {};
parent.style.width = parent.style.width ?? parent.computed.width;
parent.style.height = parent.style.height ?? parent.computed.height;
if (extendWidth > 0) {
parent.style.width += extendWidth;
} }
if (extendHeight > 0) { const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
parent.style.height += extendHeight; const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
}
if (updateItem.position.x < 0) { if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
const xDiff = Math.abs(updateItem.position.x); parent.width = parent.width ?? parent.computed.width;
parent.position.x = parent.position.x - xDiff; parent.height = parent.height ?? parent.computed.height;
parent.style.width += xDiff;
updateItem.position.x = 0;
}
if (updateItem.position.y < 0) { if (extendWidth > 0) {
const yDiff = Math.abs(updateItem.position.y); parent.width += extendWidth;
parent.position.y = parent.position.y - yDiff; }
parent.style.height += yDiff;
updateItem.position.y = 0;
}
parent.computed.width = parent.style.width; if (extendHeight > 0) {
parent.computed.height = parent.style.height; parent.height += extendHeight;
}
if (updateItem.position.x < 0) {
const xDiff = Math.abs(updateItem.position.x);
parent.position.x = parent.position.x - xDiff;
parent.width += xDiff;
updateItem.position.x = 0;
}
if (updateItem.position.y < 0) {
const yDiff = Math.abs(updateItem.position.y);
parent.position.y = parent.position.y - yDiff;
parent.height += yDiff;
updateItem.position.y = 0;
}
parent.computed.width = parent.width;
parent.computed.height = parent.height;
updatedElements[index] = parent;
}
break;
} }
} }
} }
@@ -85,6 +89,7 @@ function applyChanges(changes: any[], elements: any[]): any[] {
} }
const updateItem = { ...item }; const updateItem = { ...item };
let isDeletion = false;
for (const currentChange of nextChanges) { for (const currentChange of nextChanges) {
if (currentChange) { if (currentChange) {
@@ -139,13 +144,16 @@ function applyChanges(changes: any[], elements: any[]): any[] {
break; break;
} }
case 'remove': { case 'remove': {
isDeletion = true;
continue; continue;
} }
} }
} }
} }
updatedElements.push(updateItem); if (!isDeletion) {
updatedElements.push(updateItem);
}
} }
return updatedElements; return updatedElements;
@@ -192,7 +200,7 @@ export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChan
); );
return ( return (
<ReactFLow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} /> <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
); );
*/ */
export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] { export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] {