diff --git a/package.json b/package.json index 0f9ff2ff..bb501392 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "url": "git+https://github.com/opencor/webapp.git" }, "type": "module", - "version": "0.20260610.2", + "version": "0.20260610.3", "engines": { "bun": ">=1.2.0" }, diff --git a/src/renderer/package.json b/src/renderer/package.json index 62f5a84f..da8ee026 100644 --- a/src/renderer/package.json +++ b/src/renderer/package.json @@ -42,7 +42,7 @@ }, "./style.css": "./dist/opencor.css" }, - "version": "0.20260610.2", + "version": "0.20260610.3", "libopencorVersion": "0.20260604.0", "scripts": { "build": "vite build && bun scripts/generate.version.js", diff --git a/src/renderer/src/common/vueCommon.ts b/src/renderer/src/common/vueCommon.ts index b01f6bc2..4c55c2b9 100644 --- a/src/renderer/src/common/vueCommon.ts +++ b/src/renderer/src/common/vueCommon.ts @@ -99,3 +99,20 @@ export const trackElementHeight = ( return stopTrackingElementHeight; }; + +// A composable that provides the `.opencor` element as an append target for overlays. +// Note: this is needed when OpenCOR is embedded as a Vue 3 component in a host app that uses full-screen mode. In such +// a case, the Fullscreen API only renders the full-screen element and its descendants, so teleporting to +// `document.body` makes overlays invisible. Instead, teleporting to `.opencor` means that overlays are visible in +// full-screen mode. And, since `.opencor` is a child of the full-screen element, they are also visible in normal +// mode. + +export const useAppendTarget = () => { + const appendTarget = vue.shallowRef(undefined); + + vue.onMounted(() => { + appendTarget.value = (document.querySelector('.opencor') as HTMLElement | null) ?? undefined; + }); + + return appendTarget; +}; diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue index e10edd08..5c5434cc 100644 --- a/src/renderer/src/components/OpenCOR.vue +++ b/src/renderer/src/components/OpenCOR.vue @@ -459,7 +459,16 @@ vue.watch( // VueTippy. if (crtVueAppInstance && crtGlobalProperties && !crtGlobalProperties[vueTippyInstalledFlag]) { - crtVueAppInstance.use(dependencies._vueTippy); + // Append Tippy tooltips to `.opencor` rather than `document.body` so that they stay within the component's + // stacking context. This is critical when OpenCOR is embedded as a Vue 3 component in a host app in full-screen + // mode (`document.body` can be hidden behind the host's full-screen container, whereas `.opencor` lives inside + // it). + + crtVueAppInstance.use(dependencies._vueTippy, { + defaultProps: { + appendTo: () => document.querySelector('.opencor') || document.body + } + }); crtGlobalProperties[vueTippyInstalledFlag] = true; } diff --git a/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue b/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue index 0eb84b9c..c89c1180 100644 --- a/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue +++ b/src/renderer/src/components/dialogs/SimulationExperimentViewSettingsDialog.vue @@ -222,6 +222,7 @@ optionValue="value" class="w-full" size="small" + :appendTo="issuesContainer" /> @@ -343,6 +344,7 @@ size="small" filter filterMode="lenient" :options="editableModelParameters" + :appendTo="issuesContainer" /> @@ -417,6 +419,7 @@ size="small" filter filterMode="lenient" :options="allModelParameters" + :appendTo="issuesContainer" /> @@ -562,6 +565,7 @@ size="small" filter filterMode="lenient" :options="externalDataSeries(externalDataFile)" + :appendTo="issuesContainer" /> diff --git a/src/renderer/src/components/views/SimulationExperimentView.vue b/src/renderer/src/components/views/SimulationExperimentView.vue index 9923a4bf..e4ee36a4 100644 --- a/src/renderer/src/components/views/SimulationExperimentView.vue +++ b/src/renderer/src/components/views/SimulationExperimentView.vue @@ -61,6 +61,7 @@ :options="standardParameters" size="small" class="w-full" + :appendTo="appendTarget" @change="updatePlot()" /> @@ -73,6 +74,7 @@ :options="standardParameters" size="small" class="w-full" + :appendTo="appendTarget" @change="updatePlot()" /> @@ -234,7 +236,7 @@ @ok="onInteractiveSettingsOk" @close="interactiveSettingsVisible = false" /> - +