@opencor/opencor 0.20250818.0 → 0.20250822.0

package/dist/{quill-BTTaLw2k.js → quill-BuRGxrCd.js}

@@ -1,4 +1,4 @@
-import { c as ce, g as gl } from "./index-DBCnkxl5.js";
+import { c as ce, g as gl } from "./index-Bo9Lkhfn.js";
 var pl = typeof global == "object" && global && global.Object === Object && global, yo = typeof self == "object" && self && self.Object === Object && self, Zt = pl || yo || Function("return this")(), de = Zt.Symbol, ml = Object.prototype, vo = ml.hasOwnProperty, Eo = ml.toString, yr = de ? de.toStringTag : void 0;
 function Ao(n) {
   var t = vo.call(n, yr), e = n[yr];

package/package.json

@@ -42,20 +42,20 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20250818.0",
+  "version": "0.20250822.0",
   "peerDependencies": {
     "vue": "^3.4.21"
   },
   "dependencies": {
     "@primeuix/themes": "^1.2.3",
     "@primevue/auto-import-resolver": "4.2.5",
-    "@vueuse/core": "12.8.2",
     "@tailwindcss/postcss": "^4.1.12",
     "@tailwindcss/vite": "^4.1.12",
+    "@vueuse/core": "12.8.2",
     "js-cookie": "^3.0.5",
     "jsonschema": "^1.5.0",
     "mathjs": "^14.6.0",
-    "plotly.js-gl2d-dist-min": "2.35.3",
+    "plotly.js-gl2d-dist-min": "3.1.0",
     "primeicons": "^7.0.0",
     "primevue": "4.2.5",
     "quill": "^2.0.3",
@@ -65,17 +65,17 @@
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
-    "@types/plotly.js": "2.35.3",
     "@types/node": "^24.3.0",
+    "@types/plotly.js": "3.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/tsconfig": "^0.8.0",
+    "@vue/tsconfig": "^0.8.1",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.33.0",
     "prettier": "^3.6.2",
     "unplugin-vue-components": "^29.0.0",
-    "vite": "^7.1.2"
+    "vite": "^7.1.3"
   },
   "scripts": {
     "build": "vite build",

package/src/App.vue

@@ -1,27 +1,9 @@
 <template>
   <div id="app">
     <OpenCOR />
-    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.omex"/> -->
-    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex"/> -->
-    <!-- <OpenCOR omex="https://models.physiomeproject.org/workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/lorenz.omex"/> -->
+    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.cellml" /> -->
+    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.omex" /> -->
+    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex" /> -->
+    <!-- <OpenCOR omex="https://models.physiomeproject.org/workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/lorenz.omex" /> -->
   </div>
 </template>
-
-<script setup lang="ts">
-import OpenCOR from './components/OpenCOR.vue'
-
-function updateViewportHeight() {
-  document.documentElement.style.setProperty('--vh', `${String(window.innerHeight * 0.01)}px`)
-}
-
-window.addEventListener('resize', updateViewportHeight)
-
-updateViewportHeight()
-</script>
-
-<style scoped>
-#app {
-  width: 100%;
-  height: calc(100 * var(--vh, 1vh));
-}
-</style>

package/src/assets/base.css

@@ -24,5 +24,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   user-select: none;
-  overflow: hidden;
+}
+
+.p-component {
+  transition: none !important;
 }

package/src/common/vueCommon.ts

@@ -51,12 +51,7 @@ export function trackElementHeight(id: string): void {
         }
 
         const cssVariableName =
-          '--' +
-          id
-            .split('_')[0]
-            .replace(/([a-z])([A-Z])/g, '$1-$2')
-            .toLowerCase() +
-          '-height'
+          '--' + (id.split('_')[0] ?? '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() + '-height'
         const oldElementHeight = window.getComputedStyle(document.documentElement).getPropertyValue(cssVariableName)
 
         if (oldElementHeight === '' || (elementHeight !== '0px' && oldElementHeight !== elementHeight)) {

package/src/components/BlockingMessageComponent.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="blocking-message p-overlay-mask">
-    <Message class="message" severity="secondary">
-      <i class="message-icon pi pi-spin pi-cog" />
-      <br />
-      <span class="message-text">{{ message }}</span>
-    </Message>
-  </div>
+  <Message class="message" severity="secondary">
+    <i class="message-icon pi pi-spin pi-cog" />
+    <br />
+    <span class="message-text">{{ message }}</span>
+  </Message>
 </template>
 
 <script setup lang="ts">
@@ -15,16 +13,13 @@ defineProps<{
 </script>
 
 <style scoped>
-.blocking-message {
-  z-index: 99999;
-}
-
 .message {
-  position: fixed;
+  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 1.5rem 1rem 0.75rem;
+  z-index: 99999;
 }
 
 .message-icon {

package/src/components/ContentsComponent.vue

@@ -1,23 +1,26 @@
 <template>
   <div v-if="simulationOnly" class="h-full">
     <div v-for="(fileTab, index) in fileTabs" :key="`tabPanel_${fileTab.file.path()}`" :value="fileTab.file.path()">
-      <IssuesView v-if="fileTab.file.issues().length !== 0" :issues="fileTab.file.issues()" />
+      <IssuesView
+        v-if="fileTab.file.issues().length !== 0"
+        :issues="fileTab.file.issues()"
+        :simulationOnly="simulationOnly"
+      />
       <SimulationExperimentView
         v-else-if="fileTab.uiJson === undefined"
-        :file="fileTabs[index].file"
+        :file="fileTabs[index]?.file"
         :isActiveFile="fileTab.file.path() === activeFile"
         :simulationOnly="true"
       />
       <SimulationExperimentUiView
         v-else
-        :file="fileTabs[index].file"
+        :file="fileTabs[index]?.file"
         :simulationOnly="true"
-        :uiJson="fileTabs[index].uiJson"
+        :uiJson="fileTabs[index]?.uiJson"
       />
     </div>
   </div>
   <div v-else class="h-full">
-    <BackgroundComponent v-show="fileTabs.length === 0" />
     <Tabs
       v-show="fileTabs.length !== 0"
       id="fileTabs"
@@ -54,10 +57,11 @@
           <IssuesView v-if="fileTab.file.issues().length !== 0" :issues="fileTab.file.issues()" />
           <SimulationExperimentView
             v-else-if="fileTab.uiJson === undefined"
-            :file="fileTabs[index].file"
+            :uiEnabled="uiEnabled"
+            :file="fileTabs[index]?.file"
             :isActiveFile="fileTab.file.path() === activeFile"
           />
-          <SimulationExperimentUiView v-else :file="fileTabs[index].file" :uiJson="fileTabs[index].uiJson" />
+          <SimulationExperimentUiView v-else :file="fileTabs[index]?.file" :uiJson="fileTabs[index]?.uiJson" />
         </TabPanel>
       </TabPanels>
     </Tabs>
@@ -79,7 +83,8 @@ export interface IFileTab {
   uiJson?: locApi.IUiJson
 }
 
-defineProps<{
+const props = defineProps<{
+  uiEnabled: boolean
   simulationOnly?: boolean
 }>()
 defineExpose({ openFile, closeCurrentFile, closeAllFiles, hasFile, hasFiles, selectFile })
@@ -146,15 +151,21 @@ function selectFile(filePath: string): void {
 function selectNextFile(): void {
   const activeFileIndex = fileTabs.value.findIndex((fileTab) => fileTab.file.path() === activeFile.value)
   const nextFileIndex = (activeFileIndex + 1) % fileTabs.value.length
+  const nextFileTab = fileTabs.value[nextFileIndex]
 
-  selectFile(fileTabs.value[nextFileIndex].file.path())
+  if (nextFileTab !== undefined) {
+    selectFile(nextFileTab.file.path())
+  }
 }
 
 function selectPreviousFile(): void {
   const activeFileIndex = fileTabs.value.findIndex((fileTab) => fileTab.file.path() === activeFile.value)
   const nextFileIndex = (activeFileIndex - 1 + fileTabs.value.length) % fileTabs.value.length
+  const nextFileTab = fileTabs.value[nextFileIndex]
 
-  selectFile(fileTabs.value[nextFileIndex].file.path())
+  if (nextFileTab !== undefined) {
+    selectFile(nextFileTab.file.path())
+  }
 }
 
 function closeFile(filePath: string): void {
@@ -165,7 +176,11 @@ function closeFile(filePath: string): void {
   fileTabs.value.splice(activeFileIndex, 1)
 
   if (activeFile.value === filePath && fileTabs.value.length > 0) {
-    selectFile(fileTabs.value[Math.min(activeFileIndex, fileTabs.value.length - 1)].file.path())
+    const nextFileTab = fileTabs.value[Math.min(activeFileIndex, fileTabs.value.length - 1)]
+
+    if (nextFileTab !== undefined) {
+      selectFile(nextFileTab.file.path())
+    }
   }
 
   electronApi?.fileClosed(filePath)
@@ -189,7 +204,7 @@ vueCommon.trackElementHeight('fileTablist')
 
 if (!common.isMobile()) {
   vueusecore.onKeyStroke((event: KeyboardEvent) => {
-    if (fileTabs.value.length === 0) {
+    if (!props.uiEnabled || fileTabs.value.length === 0) {
       return
     }
 

package/src/components/DragNDropComponent.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="drop-area p-overlay-mask">
-    <div class="message">CellML files, SED-ML files, and COMBINE archives can be dropped here.</div>
+  <div class="drop-area">
+    <div class="message">
+      CellML files, SED-ML files, and COMBINE archives<br />
+      can be dropped here.
+    </div>
   </div>
 </template>
 
 <style scoped>
 .drop-area {
+  position: absolute;
   width: 100%;
   height: 100%;
   border: 0.375rem dashed;
@@ -15,15 +19,17 @@
 
 .message {
   font-size: 1.5rem;
+  line-height: 1.25;
   text-align: center;
   border-radius: 1rem;
   padding: 0.5rem 1rem;
   background-color: var(--p-primary-color);
   color: var(--p-primary-contrast-color);
   box-shadow: 0 0 0.75rem 0.375rem var(--p-content-border-color);
-  position: fixed;
+  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  white-space: nowrap;
 }
 </style>

package/src/components/MainMenu.vue

@@ -31,6 +31,7 @@ import * as vue from 'vue'
 import * as common from '../common/common'
 
 const props = defineProps<{
+  uiEnabled: boolean
   hasFiles: boolean
 }>()
 
@@ -161,6 +162,10 @@ vue.onMounted(() => {
 
 if (!common.isMobile()) {
   vueusecore.onKeyStroke((event: KeyboardEvent) => {
+    if (!props.uiEnabled) {
+      return
+    }
+
     if (common.isCtrlOrCmd(event) && !event.shiftKey && event.code === 'KeyO') {
       event.preventDefault()
 

package/src/components/OpenCOR.vue

@@ -1,9 +1,23 @@
 <template>
-  <div class="flex flex-col h-screen overflow-hidden">
-    <IssuesView v-if="issues.length !== 0" :issues="issues" :simulationOnly="omex !== undefined" />
-    <div v-else class="h-full">
+  <BlockUI id="blockUi" :blocked="!uiEnabled" class="h-full">
+    <Toast id="toast" :pt:root:style="{ position: 'absolute' }" />
+    <BackgroundComponent v-show="loadingOpencorMessageVisible || loadingModelMessageVisible || omex === undefined" />
+    <BlockingMessageComponent message="Loading OpenCOR..." v-show="loadingOpencorMessageVisible" />
+    <BlockingMessageComponent message="Loading model..." v-show="loadingModelMessageVisible" />
+    <IssuesView v-if="issues.length !== 0" class="h-full" :issues="issues" :simulationOnly="omex !== undefined" />
+    <div
+      v-else
+      @dragenter="onDragEnter"
+      class="h-full"
+      @dragover.prevent
+      @drop.prevent="onDrop"
+      @dragleave="onDragLeave"
+    >
+      <input ref="files" type="file" multiple style="display: none" @change="onChange" />
+      <DragNDropComponent v-show="dragAndDropCounter > 0" />
       <div v-show="!electronApi && omex === undefined">
         <MainMenu
+          :uiEnabled="compUiEnabled"
           :hasFiles="hasFiles"
           @about="onAbout"
           @open="($refs.files as HTMLInputElement).click()"
@@ -15,35 +29,31 @@
           @settings="onSettings"
         />
       </div>
-      <div class="h-full" @dragenter="onDragEnter" @dragover.prevent @drop.prevent="onDrop" @dragleave="onDragLeave">
-        <BlockingMessageComponent message="Loading OpenCOR..." v-show="loadingLipencorWebAssemblyModuleVisible" />
-        <ContentsComponent ref="contents" :simulationOnly="omex !== undefined" />
-        <DragNDropComponent v-show="dropAreaCounter > 0" />
-        <BlockUI :blocked="!uiEnabled" :fullScreen="true"></BlockUI>
-        <BlockingMessageComponent message="Loading model..." v-show="spinningWheelVisible" />
-      </div>
+      <ContentsComponent ref="contents" :uiEnabled="compUiEnabled" :simulationOnly="omex !== undefined" />
+      <OpenRemoteDialog
+        v-model:visible="openRemoteVisible"
+        @openRemote="onOpenRemote"
+        @close="openRemoteVisible = false"
+      />
+      <SettingsDialog v-model:visible="settingsVisible" @close="settingsVisible = false" />
+      <ResetAllDialog v-model:visible="resetAllVisible" @resetAll="onResetAll" @close="resetAllVisible = false" />
+      <AboutDialog v-model:visible="aboutVisible" @close="aboutVisible = false" />
     </div>
-  </div>
-  <input ref="files" type="file" multiple style="display: none" @change="onChange" />
-  <UpdateErrorDialog
-    v-model:visible="updateErrorVisible"
-    :title="updateErrorTitle"
-    :issue="updateErrorIssue"
-    @close="onUpdateErrorDialogClose"
-  />
-  <UpdateAvailableDialog
-    v-model:visible="updateAvailableVisible"
-    :version="updateVersion"
-    @downloadAndInstall="onDownloadAndInstall"
-    @close="updateAvailableVisible = false"
-  />
-  <UpdateDownloadProgressDialog v-model:visible="updateDownloadProgressVisible" :percent="updateDownloadPercent" />
-  <UpdateNotAvailableDialog v-model:visible="updateNotAvailableVisible" @close="updateNotAvailableVisible = false" />
-  <OpenRemoteDialog v-model:visible="openRemoteVisible" @openRemote="onOpenRemote" @close="openRemoteVisible = false" />
-  <ResetAllDialog v-model:visible="resetAllVisible" @resetAll="onResetAll" @close="resetAllVisible = false" />
-  <AboutDialog v-model:visible="aboutVisible" @close="aboutVisible = false" />
-  <SettingsDialog v-model:visible="settingsVisible" @close="settingsVisible = false" />
-  <Toast />
+    <UpdateErrorDialog
+      v-model:visible="updateErrorVisible"
+      :title="updateErrorTitle"
+      :issue="updateErrorIssue"
+      @close="onUpdateErrorDialogClose"
+    />
+    <UpdateAvailableDialog
+      v-model:visible="updateAvailableVisible"
+      :version="updateVersion"
+      @downloadAndInstall="onDownloadAndInstall"
+      @close="updateAvailableVisible = false"
+    />
+    <UpdateDownloadProgressDialog v-model:visible="updateDownloadProgressVisible" :percent="updateDownloadPercent" />
+    <UpdateNotAvailableDialog v-model:visible="updateNotAvailableVisible" @close="updateNotAvailableVisible = false" />
+  </BlockUI>
 </template>
 
 <script setup lang="ts">
@@ -74,6 +84,20 @@ const props = defineProps<IOpenCORProps>()
 const contents = vue.ref<InstanceType<typeof IContentsComponent> | null>(null)
 const issues = vue.ref<locApi.IIssue[]>([])
 
+const compUiEnabled = vue.computed(() => {
+  return (
+    uiEnabled.value &&
+    !openRemoteVisible.value &&
+    !settingsVisible.value &&
+    !resetAllVisible.value &&
+    !aboutVisible.value &&
+    !updateErrorVisible.value &&
+    !updateAvailableVisible.value &&
+    !updateDownloadProgressVisible.value &&
+    !updateNotAvailableVisible.value
+  )
+})
+
 // Get the current Vue app instance to use some PrimeVue components.
 
 const getCurrentInstance = vue.getCurrentInstance()
@@ -181,40 +205,40 @@ vue.watch(hasFiles, (hasFiles) => {
   electronApi?.enableDisableFileCloseAndCloseAllMenuItems(hasFiles)
 })
 
-// Loading libOpenCOR's WebAssembly module.
+// Loading OpenCOR.
 // Note: this is only done if window.locApi is not defined, which means that we are running OpenCOR's Web app.
 
-const loadingLipencorWebAssemblyModuleVisible = vue.ref<boolean>(false)
+const loadingOpencorMessageVisible = vue.ref<boolean>(false)
 
 // @ts-expect-error (window.locApi may or may not be defined which is why we test it)
 if (window.locApi === undefined) {
   enableDisableUi(false)
 
-  loadingLipencorWebAssemblyModuleVisible.value = true
+  loadingOpencorMessageVisible.value = true
 
   vue.watch(locApiInitialised, (initialised) => {
     if (initialised) {
-      loadingLipencorWebAssemblyModuleVisible.value = false
+      loadingOpencorMessageVisible.value = false
 
       enableDisableUi(true)
     }
   })
 }
 
-// Spinning wheel.
+// Loading model.
 
-const spinningWheelVisible = vue.ref<boolean>(false)
+const loadingModelMessageVisible = vue.ref<boolean>(false)
 
-function showSpinningWheel(): void {
+function showLoadingModelMessage(): void {
   enableDisableUi(false)
 
-  spinningWheelVisible.value = true
+  loadingModelMessageVisible.value = true
 }
 
-function hideSpinningWheel(): void {
+function hideLoadingModelMessage(): void {
   enableDisableUi(true)
 
-  spinningWheelVisible.value = false
+  loadingModelMessageVisible.value = false
 }
 
 // Auto update.
@@ -318,7 +342,7 @@ function openFile(fileOrFilePath: string | File): void {
   // Retrieve a locApi.File object for the given file or file path and add it to the contents.
 
   if (locCommon.isRemoteFilePath(filePath)) {
-    showSpinningWheel()
+    showLoadingModelMessage()
   }
 
   locCommon
@@ -326,15 +350,19 @@ function openFile(fileOrFilePath: string | File): void {
     .then((file) => {
       const fileType = file.type()
 
-      if (fileType === locApi.EFileType.UNKNOWN_FILE || fileType === locApi.EFileType.IRRETRIEVABLE_FILE) {
+      if (
+        fileType === locApi.EFileType.IRRETRIEVABLE_FILE ||
+        fileType === locApi.EFileType.UNKNOWN_FILE ||
+        (props.omex !== undefined && fileType !== locApi.EFileType.COMBINE_ARCHIVE)
+      ) {
         if (props.omex !== undefined) {
           void vue.nextTick().then(() => {
             issues.value.push({
               type: locApi.EIssueType.ERROR,
               description:
-                fileType === locApi.EFileType.UNKNOWN_FILE
-                  ? 'Only CellML files, SED-ML files, and COMBINE archives are supported.'
-                  : 'The file could not be retrieved.'
+                fileType === locApi.EFileType.IRRETRIEVABLE_FILE
+                  ? 'The file could not be retrieved.'
+                  : 'Only COMBINE archives are supported.'
             })
           })
         } else {
@@ -344,9 +372,9 @@ function openFile(fileOrFilePath: string | File): void {
             detail:
               filePath +
               '\n\n' +
-              (fileType === locApi.EFileType.UNKNOWN_FILE
-                ? 'Only CellML files, SED-ML files, and COMBINE archives are supported.'
-                : 'The file could not be retrieved.'),
+              (fileType === locApi.EFileType.IRRETRIEVABLE_FILE
+                ? 'The file could not be retrieved.'
+                : 'Only CellML files, SED-ML files, and COMBINE archives are supported.'),
             life: TOAST_LIFE
           })
         }
@@ -357,12 +385,12 @@ function openFile(fileOrFilePath: string | File): void {
       }
 
       if (locCommon.isRemoteFilePath(filePath)) {
-        hideSpinningWheel()
+        hideLoadingModelMessage()
       }
     })
     .catch((error: unknown) => {
       if (locCommon.isRemoteFilePath(filePath)) {
-        hideSpinningWheel()
+        hideLoadingModelMessage()
       }
 
       if (props.omex !== undefined) {
@@ -399,22 +427,22 @@ function onChange(event: Event): void {
 
 // Drag and drop.
 
-const dropAreaCounter = vue.ref<number>(0)
+const dragAndDropCounter = vue.ref<number>(0)
 
 function onDragEnter(): void {
-  if (props.omex !== undefined) {
+  if (!uiEnabled.value || props.omex !== undefined) {
     return
   }
 
-  dropAreaCounter.value += 1
+  dragAndDropCounter.value += 1
 }
 
 function onDrop(event: DragEvent): void {
-  if (props.omex !== undefined) {
+  if (dragAndDropCounter.value === 0) {
     return
   }
 
-  dropAreaCounter.value = 0
+  dragAndDropCounter.value = 0
 
   const files = event.dataTransfer?.files
 
@@ -426,11 +454,11 @@ function onDrop(event: DragEvent): void {
 }
 
 function onDragLeave(): void {
-  if (props.omex !== undefined) {
+  if (dragAndDropCounter.value === 0) {
     return
   }
 
-  dropAreaCounter.value -= 1
+  dragAndDropCounter.value -= 1
 }
 
 // Open.
@@ -514,6 +542,10 @@ electronApi?.onSelect((filePath: string) => {
   contents.value?.selectFile(filePath)
 })
 
+// Track the height of our block UI.
+
+vueCommon.trackElementHeight('blockUi')
+
 // If a COMBINE archive is provided then open it (and then the Simulation Experiment view will be shown in isolation) or
 // carry as normal (i.e. the whole OpenCOR UI will be shown).
 
@@ -526,7 +558,7 @@ if (props.omex !== undefined) {
     }
   })
 } else {
-  // Track the height of our main menu.
+  // (Also) track the height of our main menu.
 
   vueCommon.trackElementHeight('mainMenu')
 
@@ -536,6 +568,15 @@ if (props.omex !== undefined) {
     // Do what follows with a bit of a delay to give our background (with the OpenCOR logo) time to be renderered.
 
     setTimeout(() => {
+      // Ensure that our toasts are shown within our container.
+
+      const toastElement = document.getElementById('toast')
+      const blockUiElement = document.getElementById('blockUi')
+
+      if (toastElement !== null && blockUiElement !== null) {
+        blockUiElement.appendChild(toastElement)
+      }
+
       if (electronApi !== undefined) {
         // Check for updates.
         // Note: the main process will actually check for updates if requested and if OpenCOR is packaged.

package/src/components/dialogs/BaseDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :modal="true" @show="enableDisableMainMenu(false)" @hide="enableDisableMainMenu(true)">
+  <Dialog :modal="true" appendTo="self" :pt:mask:style="{ position: 'absolute' }" @show="onShow" @hide="onHide">
     <template v-for="(_event, slot) of $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope" />
     </template>
@@ -7,5 +7,52 @@
 </template>
 
 <script setup lang="ts">
+import * as vue from 'vue'
+
 import { enableDisableMainMenu } from '../../common/common'
+
+let dialogElement: HTMLElement | null = null
+let containerElement: HTMLElement | null | undefined = null
+let mutationObserver: MutationObserver | null = null
+
+function checkDialogPosition() {
+  if (dialogElement instanceof HTMLElement && containerElement instanceof HTMLElement) {
+    const dialogRect = dialogElement.getBoundingClientRect()
+    const containerRect = containerElement.getBoundingClientRect()
+
+    dialogElement.style.top = `${String(Math.max(Math.min(dialogRect.top, containerRect.bottom - dialogRect.height), containerRect.top))}px`
+    dialogElement.style.left = `${String(Math.max(Math.min(dialogRect.left, containerRect.right - dialogRect.width), containerRect.left))}px`
+  }
+}
+
+function onShow() {
+  enableDisableMainMenu(false)
+
+  void vue.nextTick().then(() => {
+    dialogElement = document.querySelector('.p-dialog')
+    containerElement = dialogElement?.closest('[data-pc-section="mask"]')
+
+    if (dialogElement !== null && containerElement !== null) {
+      mutationObserver = new MutationObserver(() => {
+        checkDialogPosition()
+      })
+
+      mutationObserver.observe(dialogElement, { attributes: true, attributeFilter: ['style'] })
+
+      checkDialogPosition()
+    }
+  })
+}
+
+function onHide() {
+  enableDisableMainMenu(true)
+
+  void vue.nextTick().then(() => {
+    if (mutationObserver !== null) {
+      mutationObserver.disconnect()
+
+      mutationObserver = null
+    }
+  })
+}
 </script>