Fixed PrimeVue's BlockUI's mask handling so overlay appears once and never gets stuck.

Author: agarny

src/renderer/src/components/OpenCOR.vue

@@ -1,6 +1,6 @@
 <template>
-  <BlockUI ref="blockUiRef" class="opencor overflow-hidden h-full" :class="isFullWebApp ? 'with-main-menu' : ''"
-    :blocked="blockUiBlocked"
+  <SafeBlockUI ref="safeBlockUiRef" class="opencor overflow-hidden h-full" :class="isFullWebApp ? 'with-main-menu' : ''"
+    :blocked="compBlockUiEnabled"
     @click="activateInstance"
     @focus="activateInstance"
     @focusin="activateInstance"
@@ -98,7 +98,7 @@
         @close="webUpdateAvailableVisible = false"
       />
     </div>
-  </BlockUI>
+  </SafeBlockUI>
 </template>
 
 <script setup lang="ts">
@@ -110,7 +110,6 @@ import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import { Octokit } from 'octokit';
 */
-import BlockUI from 'primevue/blockui';
 import primeVueConfig from 'primevue/config';
 import primeVueConfirmationService from 'primevue/confirmationservice';
 import primeVueToastService from 'primevue/toastservice';
@@ -122,7 +121,7 @@ import type { IOpenCOREmits, IOpenCORProps } from '../../index.ts';
 import '../assets/app.css';
 import '../assets/primeicons-assets.ts';
 import * as common from '../common/common.ts';
-import { FULL_URI_SCHEME, LONG_DELAY, NO_DELAY, SHORT_DELAY, TOAST_LIFE } from '../common/constants.ts';
+import { FULL_URI_SCHEME, LONG_DELAY, SHORT_DELAY, TOAST_LIFE } from '../common/constants.ts';
 import * as dependencies from '../common/dependencies.ts';
 import { electronApi } from '../common/electronApi.ts';
 /* TODO: enable once our GitHub integration is fully ready.
@@ -136,6 +135,7 @@ import ContentsComponent from '../components/ContentsComponent.vue';
 import * as locApi from '../libopencor/locApi.ts';
 
 import { provideDialogState } from './dialogs/BaseDialog.vue';
+import SafeBlockUI from './widgets/SafeBlockUI.vue';
 import MainMenu from './MainMenu.vue';
 
 const props = defineProps<IOpenCORProps>();
@@ -203,7 +203,7 @@ const emitSimulationData = (): void => {
 
 const { isDialogActive } = provideDialogState();
 
-const blockUiRef = vue.ref<InstanceType<typeof BlockUI> | null>(null);
+const safeBlockUiRef = vue.ref<InstanceType<typeof SafeBlockUI> | null>(null);
 const mainMenuRef = vue.ref<InstanceType<typeof MainMenu> | null>(null);
 const filesRef = vue.ref<HTMLElement | null>(null);
 const contentsRef = vue.ref<InstanceType<typeof ContentsComponent> | null>(null);
@@ -259,35 +259,34 @@ const compUiEnabled = vue.computed<boolean>(() => {
   return !compBlockUiEnabled.value && !isDialogActive.value;
 });
 
-// Block/unblock the UI with "no" (i.e. a bit of a) delay to ensure that it doesn't happen too quickly (e.g., when
-// loading a model from a COMBINE archive, we don't want the UI to be blocked for a split second while the file is
-// being processed and the Simulation Experiment view is being shown in isolation).
-
-const blockUiBlocked = vue.ref<boolean>(true);
-let blockUiBlockedTimeoutId: number | undefined;
+// Remove any leftover SafeBlockUI masks when unblocking.
+// Note: this is to ensure that we don't end up with leftover masks if the block event is emitted multiple times before
+//       the unblock event is emitted, which can lead to multiple masks being created and not properly removed.
 
 vue.watch(
   compBlockUiEnabled,
   (newCompBlockUiEnabled: boolean) => {
-    if (blockUiBlockedTimeoutId !== undefined) {
-      window.clearTimeout(blockUiBlockedTimeoutId);
+    if (!newCompBlockUiEnabled) {
+      const safeBlockUi = safeBlockUiRef.value as unknown as InstanceType<typeof SafeBlockUI> | null;
 
-      blockUiBlockedTimeoutId = undefined;
-    }
+      if (!safeBlockUi) {
+        return;
+      }
+
+      const safeBlockUiRoot = safeBlockUi?.$el as HTMLElement | undefined;
+
+      if (!safeBlockUiRoot) {
+        return;
+      }
 
-    blockUiBlockedTimeoutId = window.setTimeout(() => {
-      blockUiBlocked.value = newCompBlockUiEnabled;
-    }, NO_DELAY);
+      for (const mask of safeBlockUiRoot.querySelectorAll<HTMLElement>('.p-blockui-mask')) {
+        safeBlockUi.removeSpecificMask(mask);
+      }
+    }
   },
   { immediate: true }
 );
 
-vue.onUnmounted(() => {
-  if (blockUiBlockedTimeoutId !== undefined) {
-    window.clearTimeout(blockUiBlockedTimeoutId);
-  }
-});
-
 // Determine whether we are running the full Web app (i.e. not in isolation).
 
 const isFullWebApp = vue.computed<boolean>(() => {
@@ -910,7 +909,7 @@ electronApi?.onSelect((filePath: string) => {
 // A few things that can only be done when the component is mounted.
 
 vue.onMounted(() => {
-  const blockUiElement = (blockUiRef.value as unknown as { $el: HTMLElement })?.$el;
+  const safeBlockUiElement = (safeBlockUiRef.value as unknown as { $el: HTMLElement })?.$el;
 
   // Make ourselves the active instance.
 
@@ -923,8 +922,8 @@ vue.onMounted(() => {
   setTimeout(() => {
     const toastElement = document.getElementById(toastId.value);
 
-    if (toastElement && blockUiElement && toastElement.parentElement !== blockUiElement) {
-      blockUiElement.appendChild(toastElement);
+    if (toastElement && safeBlockUiElement && toastElement.parentElement !== safeBlockUiElement) {
+      safeBlockUiElement.appendChild(toastElement);
     }
   }, SHORT_DELAY);
 });
@@ -940,10 +939,14 @@ vue.onMounted(() => {
 
   void vue.nextTick(() => {
     const mainMenuElement = (mainMenuRef.value as unknown as { $el: HTMLElement })?.$el;
-    const blockUiElement = (blockUiRef.value as unknown as { $el: HTMLElement })?.$el;
-
-    if (mainMenuElement && blockUiElement) {
-      stopTrackingMainMenuHeight = vueCommon.trackElementHeight(mainMenuElement, blockUiElement, '--main-menu-height');
+    const safeBlockUiElement = (safeBlockUiRef.value as unknown as { $el: HTMLElement })?.$el;
+
+    if (mainMenuElement && safeBlockUiElement) {
+      stopTrackingMainMenuHeight = vueCommon.trackElementHeight(
+        mainMenuElement,
+        safeBlockUiElement,
+        '--main-menu-height'
+      );
     }
   });
 });

src/renderer/src/components/widgets/SafeBlockUI.vue

@@ -0,0 +1,78 @@
+<script lang="ts">
+import { ZIndex } from '@primeuix/utils/zindex';
+
+import BlockUI from 'primevue/blockui';
+import * as vue from 'vue';
+
+// This component is a wrapper around PrimeVue's BlockUI. It provides a safe implementation of the block and unblock
+// methods that ensures that we don't attempt to block if we are already blocked, and that we properly remove the mask
+// when unblocking. This is necessary because PrimeVue's BlockUI does not account for the case where multiple block
+// events are emitted before the unblock event is emitted, which can lead to multiple masks being created and not
+// properly removed.
+
+export default vue.defineComponent({
+  extends: BlockUI as unknown as vue.ComponentOptions<typeof BlockUI>,
+  setup: () => {
+    const instance = vue.getCurrentInstance();
+    const self = instance?.proxy as unknown as vue.ComponentOptions<typeof BlockUI>;
+
+    const block = (): void => {
+      // Don't attempt to block if we are already blocked.
+      // Note: this can happen if the block event is emitted multiple times before the unblock event is emitted. In
+      //       that case, we want to ignore subsequent block events until the unblock event is emitted.
+
+      if (self.isBlocked) {
+        return;
+      }
+
+      // Create and attach mask as PrimeVue does.
+      // Note: we don't account for the case where we are in full screen mode since that is not a use case for us.
+
+      const mask = document.createElement('div');
+
+      mask.className = 'p-blockui-mask p-overlay-mask p-overlay-mask-enter';
+
+      (self.$refs.container as HTMLElement | null)?.appendChild(mask);
+
+      ZIndex.set('modal', mask, self.baseZIndex + self.$primevue.config.zIndex.modal);
+
+      self.mask = mask;
+      self.isBlocked = true;
+
+      self.$emit('block');
+    };
+
+    const removeSpecificMask = (mask: HTMLElement): void => {
+      mask.remove();
+
+      ZIndex.clear(mask);
+    };
+
+    const removeMask = (): void => {
+      // Don't attempt to remove the mask if it doesn't exist.
+      // Note: this can happen if the unblock event is emitted multiple times before the block event is emitted, which
+      //       can lead to multiple unblock events being emitted without a corresponding block event.
+
+      if (self.mask == null) {
+        return;
+      }
+
+      // Remove the mask as PrimeVue does.
+      // Note: we don't account for the case where we are in full screen mode since that is not a use case for us.
+
+      removeSpecificMask(self.mask);
+
+      self.mask = null;
+      self.isBlocked = false;
+
+      self.$emit('unblock');
+    };
+
+    return {
+      block,
+      removeMask,
+      removeSpecificMask
+    };
+  }
+});
+</script>