From bae43249e1a5cf40947b8c5cc34342d84287ea79 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 17 Nov 2022 18:39:25 +0100 Subject: [PATCH] feat(core,xp): add nested flow support for edge alignment (connections dont work) --- packages/core/src/store/actions.ts | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 76b94ce4..dd09a53b 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -93,12 +93,36 @@ export default (state: State, getters: ComputedGetters): Actions => { const updateNodeDimensions: Actions['updateNodeDimensions'] = (updates) => { if (!state.vueFlowRef) return - const viewportNode = state.vueFlowRef.querySelector('.vue-flow__transformationpane') + const viewportNode = state.vueFlowRef.querySelector('.vue-flow__transformationpane') as HTMLElement if (!viewportNode) return - const style = window.getComputedStyle(viewportNode) - const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform) + let zoom: number + if (state.__experimentalFeatures?.nestedFlow) { + let viewportNodes: HTMLElement[] = [viewportNode] + let parentNode = viewportNode + let isNested + + while (!isNested && parentNode) { + parentNode = parentNode.parentElement! + isNested = parentNode?.classList.contains('vue-flow__transformationpane') + + if (isNested) { + viewportNodes = [parentNode, ...viewportNodes] + } + } + + viewportNodes.forEach((vp) => { + const style = window.getComputedStyle(vp) + const { m22 } = new window.DOMMatrixReadOnly(style.transform) + if (!zoom) zoom = m22 + else zoom *= m22 + }) + } else { + const style = window.getComputedStyle(viewportNode) + const { m22 } = new window.DOMMatrixReadOnly(style.transform) + zoom = m22 + } const changes: NodeDimensionChange[] = updates.reduce((res, update) => { const node = getters.getNode.value(update.id)