feat: set vueflow & viewport elements in store

packages/vue-flow/src/container/Viewport/Viewport.vue

@@ -75,6 +75,7 @@ onMounted(() => {
   if ('screen' in window) {
     useEventListener(window, 'onresize', () => {
       if (!viewportEl.value) return
+
       const { width, height } = getDimensions(viewportEl.value)
       dimensions.width = width
       dimensions.height = height
@@ -93,6 +94,7 @@ onMounted(() => {
     d3Selection,
     d3ZoomHandler,
     viewport: { x: updatedTransform.x, y: updatedTransform.y, zoom: updatedTransform.k },
+    viewportRef: viewportEl.value,
   })
 
   const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPress) => {

packages/vue-flow/src/container/VueFlow/VueFlow.vue

@@ -99,9 +99,10 @@ const modelValue = useVModel(props, 'modelValue', emit)
 const modelNodes = useVModel(props, 'nodes', emit)
 const modelEdges = useVModel(props, 'edges', emit)
 
-const { id, hooks, getNodeTypes, getEdgeTypes, $reset, ...rest } = useVueFlow({ id: props.id })
+const { vueFlowRef, id, hooks, getNodeTypes, getEdgeTypes, $reset, ...rest } = useVueFlow({ id: props.id })
 
 const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
+  vueFlowRef,
   id,
   hooks,
   getNodeTypes,
@@ -117,12 +118,16 @@ onUnmounted(() => {
   $reset()
 })
 
+onMounted(() => {
+  vueFlowRef.value = el.value!
+})
+
 useHooks(emit, hooks.value)
 
 provide(Slots, useSlots())
 
 defineExpose({
-  el,
+  vueFlowRef,
   id,
   hooks,
   getNodeTypes,

packages/vue-flow/src/store/actions.ts

@@ -70,6 +70,11 @@ export default (state: State, getters: ComputedGetters): Actions => {
   }
 
   const updateNodeDimensions: Actions['updateNodeDimensions'] = (updates) => {
+    if (!state.viewportRef) return
+
+    const style = window.getComputedStyle(state.viewportRef)
+    const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+
     const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
       const node = getters.getNode.value(update.id)
 
@@ -82,8 +87,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
         )
 
         node.handleBounds = {
-          source: getHandleBounds('.source', update.nodeElement, state.viewport.zoom),
-          target: getHandleBounds('.target', update.nodeElement, state.viewport.zoom),
+          source: getHandleBounds('.source', update.nodeElement, zoom),
+          target: getHandleBounds('.target', update.nodeElement, zoom),
         }
 
         if (doUpdate) {

packages/vue-flow/src/store/state.ts

@@ -29,6 +29,8 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
 const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
 
 const defaultState = (): State => ({
+  vueFlowRef: null,
+  viewportRef: null,
   nodes: [],
   edges: [],
   nodeTypes: {},
@@ -67,6 +69,11 @@ const defaultState = (): State => ({
   panOnDrag: true,
   edgeUpdaterRadius: 10,
   onlyRenderVisibleElements: false,
+  defaultViewport: {
+    x: 0,
+    y: 0,
+    zoom: 1,
+  },
   defaultZoom: 1,
   defaultPosition: [0, 0],
 

packages/vue-flow/src/types/store.ts

@@ -16,6 +16,11 @@ export interface UpdateNodeDimensionsParams {
 }
 
 export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
+  /** Vue flow element ref */
+  vueFlowRef: HTMLDivElement | null
+  /** Vue flow viewport element */
+  viewportRef: HTMLDivElement | null
+
   /** Event hooks, you can manipulate the triggers at your own peril */
   readonly hooks: FlowHooks