Viewport not found after hiding elements on the screen.

[gitHoussem]

Hi,

Before I start, I understand that this question/bug is very specific to my use case and might not fit in this Q&A but i'm out of ideas and any help or thought is greatly appreciated 🙏.

The context
I have an app that has a header, a vueflow playground (I call it the designer) and a couple of elements on top of the designer (floating menus and buttons, nothing special).

In the header I have added a couple of buttons that perform some actions on the vueflow instance such as : zoom in and out, fit to view and full screen mode. Those are not using the VueFlow <Controls/> but rather my own custom design and some calls to vueflow to perform the desired actions.

The bug
When I toggle a full screen mode and then exit the full screen, apparently my entire VueFlow instance gets broken. Below is a video that explains it.

bug.mp4

As you can see from the above video; At the beginning, I am able to interact with VueFlow by moving elements around, zooming in and out and calling fit to view. The moment I toggle full screen mode and go back, the VueFlow instance seems to be broken.

An example of the error when zooming in :

Here is my current code structure :

Main.vue (the template part of it):

 <n-layout>
      <n-layout-header>
       <!-- The header with all buttons -->
        <DesignerHeader v-if="!fullScreenMode" />
       <!-- The Exit full screen button-->
        <FullScreenExitButton v-else />
      </n-layout-header>
      <n-layout-content>
        <!-- The VueFlow Designer Interface -->
        <DesignerInterface :spinnerText="spinnerText" />
      </n-layout-content>
</n-layout>

The function that toggles full screen ON and OFF simply changes a local Pinia boolean state fullScreenMode. This state is later used in all UI components using a v-if (this is important i'll go back to it later) to display or hide them.

DesignerHeader.vue contains the navigation buttons

<template>
  <div class="actions-bar__diagram-controls actions-bar__div">
    <!-- Zoom out button -->
    <ActionsBarButton  title="Zoom Out" @click="onZoomMinus" />
    <!-- Zoom level -->
    <p>{{ zoomLevel }}%</p>
    <!-- Zoom in button -->
    <ActionsBarButton title="Zoom In"  @click="onZoomPlus" />
    <!-- Fit to view button -->
    <ActionsBarButton  title="Fit to view" @click="onResetModel" />
    <!-- full screen button -->
    <ActionsBarButton title="Full screen"@click="onFullScreenChange" />
  </div>
</template>

<script setup lang="ts">
  import { useUIElementsStore } from "@/stores/uiElements.store";
  import { computed } from "vue";
  import ActionsBarButton from "@generic/ActionsBarButton.vue";
  import { useVueFlow } from "@vue-flow/core";

  const uiElementsStore = useUIElementsStore();
  const { toggleFullScreenMode } = uiElementsStore;
  const { fitView, zoomOut, zoomIn, viewport } = useVueFlow('designer') // I feel that the issue is here (i'm not sure)

  const zoomLevel = computed(() => {
    const zoomPercentage = Math.ceil(viewport.value.zoom * 25);
    return +zoomPercentage;
  });

  // Full screen mode
  function onFullScreenChange() {
    toggleFullScreenMode();
  }

  // Resets the model to fit view
  const onResetModel = () => {
    fitView();
  };

  // Zooms in the model
  const onZoomPlus = () => {
    zoomIn();
  };

  // Zooms out the model
  const onZoomMinus = () => {
    zoomOut();
  };
</script>

Caution

Important Note : If I change the v-if in Main.vue to a v-show everything works fine and nothing breaks. I have a feeling that the fact that the DesignerHeader.vue component was destroyed from the DOM with the v-if and then recreated when it's shown again it's not able to connect to the current instance of vueflow that always existed.

Any thoughts ? Is there a way to signal to the components that use vueflow functions to "refresh" ?

Apologies for the long question. Again, any help is greatly appreciated.

[gitHoussem]

Update : I think it's related to a vueflow initialization event. In DesignerHeader.vue If instead of calling useVueFlow directly in the script, I delay it and call it inside every function then everything works fine.

<script setup lang="ts">
  import { useUIElementsStore } from "@/stores/uiElements.store";
  import { computed } from "vue";
  import ActionsBarButton from "@generic/ActionsBarButton.vue";
  import { useVueFlow } from "@vue-flow/core";

  const uiElementsStore = useUIElementsStore();
  const { toggleFullScreenMode } = uiElementsStore;
  // Removing the below line and calling useVueFlow inside every function FIXES the problem for some reason
  // const { fitView, zoomOut, zoomIn, viewport } = useVueFlow('designer') 

  const zoomLevel = computed(() => {
   // Calling useVueFlow here
    const viewport = useVueFlow('designer').getViewPort()
    const zoomPercentage = Math.ceil(viewport.zoom * 25);
    return +zoomPercentage;
  });

  // Full screen mode
  function onFullScreenChange() {
    toggleFullScreenMode();
  }

  // Resets the model to fit view
  const onResetModel = () => {
    // Calling useVueFlow here
     useVueFlow('designer').fitView();
  };

  // Zooms in the model
  const onZoomPlus = () => {
     // Calling useVueFlow here
     useVueFlow('designer').zoomIn();
  };

  // Zooms out the model
  const onZoomMinus = () => {
     // Calling useVueFlow here
     useVueFlow('designer').zoomOut();
  };
</script>

I feel like I'm missing a hook. Some sort of "onViewPortInitialized" or something...