diff --git a/src/utils/changes.ts b/src/utils/changes.ts index 792dbbc3..1fe9d6d5 100644 --- a/src/utils/changes.ts +++ b/src/utils/changes.ts @@ -1,5 +1,49 @@ import { Node, Edge, EdgeChange, NodeChange } from '../types'; +function handleParentExpand(res: any[], updateItem: any) { + const parent = res.find((e) => e.id === updateItem.parentNode); + + if (parent) { + const extendWidth = updateItem.position.x + updateItem.width - parent.width; + const extendHeight = updateItem.position.y + updateItem.height - parent.height; + + if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) { + parent.style = { ...parent.style } || {}; + + if (extendWidth > 0) { + if (!parent.style.width) { + parent.style.width = parent.width; + } + parent.style.width += extendWidth; + } + + if (extendHeight > 0) { + if (!parent.style.height) { + parent.style.height = parent.height; + } + parent.style.height += extendHeight; + } + + if (updateItem.position.x < 0) { + const xDiff = Math.abs(updateItem.position.x); + parent.position.x = parent.position.x - xDiff; + parent.style.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.style.height += yDiff; + updateItem.position.y = 0; + } + + parent.width = parent.style.width; + parent.height = parent.style.height; + } + } +} + function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): any[] { const initElements: any[] = []; @@ -24,41 +68,7 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an } if (updateItem.expandParent) { - const parent = res.find((e) => e.id === updateItem.parentNode); - - if (parent) { - const extendWidth = updateItem.position.x + updateItem.width - parent.width; - const extendHeight = updateItem.position.y + updateItem.height - parent.height; - - if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) { - parent.style = { ...parent.style } || {}; - - if (extendWidth > 0) { - parent.style.width += extendWidth; - } - - if (extendHeight > 0) { - parent.style.height += extendHeight; - } - - if (updateItem.position.x < 0) { - const xDiff = Math.abs(updateItem.position.x); - parent.position.x = parent.position.x - xDiff; - parent.style.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.style.height += yDiff; - updateItem.position.y = 0; - } - - parent.width = parent.style.width; - parent.height = parent.style.height; - } - } + handleParentExpand(res, updateItem); } res.push(updateItem); @@ -72,6 +82,10 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an updateItem.height = currentChange.dimensions.height; } + if (updateItem.expandParent) { + handleParentExpand(res, updateItem); + } + res.push(updateItem); return res; }