alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): allow omitting width/height styles for parent nodes

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-01-04 13:12:00 +01:00
committed by Braks
parent 6aca36149c
commit 732e773075
2 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Nodes/NodeWrapper.vue
+4 -2
View File
@@ -113,8 +113,10 @@ watch(
() => parentNode?.computedPosition.y, () => parentNode?.computedPosition.y,
() => parentNode?.computedPosition.z, () => parentNode?.computedPosition.z,
() => node.selected, () => node.selected,
() => node.dimensions, () => node.dimensions.height,
() => parentNode?.dimensions, () => node.dimensions.width,
() => parentNode?.dimensions.height,
() => parentNode?.dimensions.width,
], ],
([newX, newY, parentX, parentY, parentZ]) => { ([newX, newY, parentX, parentY, parentZ]) => {
const xyzPos = { const xyzPos = {
packages/core/src/utils/changes.ts
+42 -22
View File
@@ -15,6 +15,8 @@ import type {
NodeChange, NodeChange,
NodeRemoveChange, NodeRemoveChange,
NodeSelectionChange, NodeSelectionChange,
StyleFunc,
Styles,
} from '~/types' } from '~/types'
function handleParentExpand(updateItem: GraphNode, parent: GraphNode) { function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
@@ -23,27 +25,29 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) { if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
if (!parent.style) parent.style = {} let parentStyles: Styles = {}
else if (isFunction(parent.style)) parent.style = { ...parent.style(parent) }
parent.style.width = parent.style.width ?? parent.dimensions.width if (isFunction(parent.style)) parentStyles = { ...parent.style(parent) }
parent.style.height = parent.style.height ?? parent.dimensions.height else if (parent.style) parentStyles = { ...parent.style }
parentStyles.width = parentStyles.width ?? `${parent.dimensions.width}px`
parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
if (extendWidth > 0) { if (extendWidth > 0) {
if (isString(parent.style.width)) { if (isString(parentStyles.width)) {
const currWidth = Number(parent.style.width.replace('px', '')) const currWidth = Number(parentStyles.width.replace('px', ''))
parent.style.width = `${currWidth + extendWidth}px` parentStyles.width = `${currWidth + extendWidth}px`
} else { } else {
parent.style.width += extendWidth parentStyles.width += extendWidth
} }
} }
if (extendHeight > 0) { if (extendHeight > 0) {
if (isString(parent.style.height)) { if (isString(parentStyles.height)) {
const currWidth = Number(parent.style.height.replace('px', '')) const currWidth = Number(parentStyles.height.replace('px', ''))
parent.style.height = `${currWidth + extendHeight}px` parentStyles.height = `${currWidth + extendHeight}px`
} else { } else {
parent.style.height += extendHeight parentStyles.height += extendHeight
} }
} }
@@ -51,11 +55,11 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
const xDiff = Math.abs(updateItem.position.x) const xDiff = Math.abs(updateItem.position.x)
parent.position.x = parent.position.x - xDiff parent.position.x = parent.position.x - xDiff
if (isString(parent.style.width)) { if (isString(parentStyles.width)) {
const currWidth = Number(parent.style.width.replace('px', '')) const currWidth = Number(parentStyles.width.replace('px', ''))
parent.style.width = `${currWidth + xDiff}px` parentStyles.width = `${currWidth + xDiff}px`
} else { } else {
parent.style.width += xDiff parentStyles.width += xDiff
} }
updateItem.position.x = 0 updateItem.position.x = 0
@@ -65,18 +69,34 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
const yDiff = Math.abs(updateItem.position.y) const yDiff = Math.abs(updateItem.position.y)
parent.position.y = parent.position.y - yDiff parent.position.y = parent.position.y - yDiff
if (isString(parent.style.height)) { if (isString(parentStyles.height)) {
const currWidth = Number(parent.style.height.replace('px', '')) const currWidth = Number(parentStyles.height.replace('px', ''))
parent.style.height = `${currWidth + yDiff}px` parentStyles.height = `${currWidth + yDiff}px`
} else { } else {
parent.style.height += yDiff parentStyles.height += yDiff
} }
updateItem.position.y = 0 updateItem.position.y = 0
} }
parent.dimensions.width = Number(parent.style.width.toString().replace('px', '')) parent.dimensions.width = Number(parentStyles.width.toString().replace('px', ''))
parent.dimensions.height = Number(parent.style.height.toString().replace('px', '')) parent.dimensions.height = Number(parentStyles.height.toString().replace('px', ''))
if (isFunction(parent.style)) {
parent.style = (p) => {
const styleFunc = parent.style as StyleFunc
return {
...styleFunc(p),
...parentStyles,
}
}
} else {
parent.style = {
...parent.style,
...parentStyles,
}
}
} }
} }
} }