@opencor/opencor 0.20250814.4 → 0.20250822.0

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>

package/src/components/dialogs/UpdateDownloadProgressDialog.vue

@@ -9,9 +9,3 @@ defineProps<{
   percent: number
 }>()
 </script>
-
-<style scoped>
-.no-animation :deep(.p-progressbar-value) {
-  transition: none !important;
-}
-</style>

package/src/components/propertyEditors/PropertyEditor.vue

@@ -25,18 +25,21 @@
 <script setup lang="ts">
 import { type DataTableCellEditCompleteEvent } from 'primevue/datatable'
 
-interface IProps {
-  name: string
-  hasUnits?: boolean
-  properties: {
-    property: string
-    value: number
-    unit?: string
-  }[]
-}
-
-const { hasUnits = true, name, properties } = defineProps<IProps>()
-const columnWidth = `width: calc(100% / ${hasUnits ? '3' : '2'})`
+const props = withDefaults(
+  defineProps<{
+    name: string
+    hasUnits?: boolean
+    properties: {
+      property: string
+      value: number
+      unit?: string
+    }[]
+  }>(),
+  {
+    hasUnits: true
+  }
+)
+const columnWidth = `width: calc(100% / ${props.hasUnits ? '3' : '2'})`
 const emit = defineEmits(['propertyUpdated'])
 
 function onCellEditComplete(event: DataTableCellEditCompleteEvent): void {
@@ -49,10 +52,6 @@ function onCellEditComplete(event: DataTableCellEditCompleteEvent): void {
 </script>
 
 <style scoped>
-:deep(.p-datatable-header-cell) {
-  transition: none;
-}
-
 :deep(.p-inputnumber-input) {
   padding: 0 2px !important;
   margin: 0 !important;

package/src/components/views/IssuesView.vue

@@ -1,6 +1,6 @@
 <template>
-  <Fieldset class="ml-4! mr-4! mb-4!" legend="Issues">
-    <ScrollPanel :class="simulationOnly ? 'issues-scroll-panel-only' : 'issues-scroll-panel'">
+  <Fieldset :class="'ml-4! mr-4! mb-4! ' + (simulationOnly ? 'fieldset-simulation-only' : 'fieldset')" legend="Issues">
+    <ScrollPanel :class="simulationOnly ? 'scroll-panel-simulation-only' : 'scroll-panel'">
       <div v-for="(issue, index) in issues" :key="`issue_${index}`" :class="`issue ${index > 0 ? 'mt-4!' : ''}`">
         <Message v-if="issue.type === locApi.EIssueType.ERROR" severity="error" icon="pi pi-times-circle">
           {{ issue.description }}
@@ -23,15 +23,28 @@ defineProps<{
 </script>
 
 <style scoped>
+.fieldset,
+.fieldset-simulation-only {
+  overflow: hidden;
+}
+
+.fieldset {
+  height: calc(var(--block-ui-height) - var(--main-menu-height) - var(--file-tablist-height) - 1rem);
+}
+
+.fieldset-simulation-only {
+  height: calc(var(--block-ui-height) - 1rem);
+}
+
 .issue {
   user-select: text;
 }
 
-.issues-scroll-panel-only {
-  height: calc(100vh - 4.75rem);
+.scroll-panel {
+  height: calc(var(--block-ui-height) - var(--main-menu-height) - var(--file-tablist-height) - 4.75rem);
 }
 
-.issues-scroll-panel {
-  height: calc(100vh - var(--main-menu-height) - var(--file-tablist-height) - 4.75rem);
+.scroll-panel-simulation-only {
+  height: calc(var(--block-ui-height) - 4.75rem);
 }
 </style>

package/src/components/views/SimulationExperimentUiView.vue

@@ -1,23 +1,25 @@
 <template>
-  <div :class="`flex flex-row h-full ${simulationOnly ? 'simulation-experiment-only' : 'simulation-experiment'}`">
+  <div :class="`flex flex-row h-full ${simulationOnly ? 'div-simulation-only' : 'div-simulation'}`">
     <IssuesView v-if="issues.length !== 0" class="grow" :issues="issues" :simulationOnly="simulationOnly" />
     <div v-else class="flex flex-row grow">
       <div class="ml-4 mr-4 mb-4">
-        <Fieldset legend="Input parameters">
-          <InputWidget
-            v-for="(input, index) in (uiJson as any).input"
-            v-model="inputValues[index]"
-            v-show="showInput[index]"
-            :key="`input_${index}`"
-            :name="input.name"
-            :maximumValue="input.maximumValue"
-            :minimumValue="input.minimumValue"
-            :possibleValues="input.possibleValues"
-            :stepValue="input.stepValue"
-            :class="index !== 0 ? 'mt-6' : ''"
-            @change="updateUiAndSimulation"
-          />
-        </Fieldset>
+        <ScrollPanel class="h-full">
+          <Fieldset legend="Input parameters">
+            <InputWidget
+              v-for="(input, index) in (uiJson as any).input"
+              v-model="inputValues[index]"
+              v-show="showInput[index]"
+              :key="`input_${index}`"
+              :name="input.name"
+              :maximumValue="input.maximumValue"
+              :minimumValue="input.minimumValue"
+              :possibleValues="input.possibleValues"
+              :stepValue="input.stepValue"
+              :class="index !== 0 ? 'mt-6' : ''"
+              @change="updateUiAndSimulation"
+            />
+          </Fieldset>
+        </ScrollPanel>
       </div>
       <div :id="plotsDivId" class="grow">
         <GraphPanelWidget
@@ -46,7 +48,7 @@ const props = defineProps<{
   uiJson: locApi.IUiJson
 }>()
 
-const math = mathjs.create(mathjs.all, {})
+const math = mathjs.create(mathjs.all ?? {}, {})
 const model = props.file.document().model(0)
 const instance = props.file.instance()
 const instanceTask = instance.task(0)
@@ -142,11 +144,11 @@ function updateUiAndSimulation() {
   height: calc(100% / var(--graph-panel-widget-count));
 }
 
-.simulation-experiment-only {
-  height: 100vh;
+.div-simulation-only {
+  height: var(--block-ui-height);
 }
 
-.simulation-experiment {
-  height: calc(100vh - var(--main-menu-height) - var(--file-tablist-height));
+.div-simulation {
+  height: calc(var(--block-ui-height) - var(--main-menu-height) - var(--file-tablist-height));
 }
 </style>

package/src/components/views/SimulationExperimentView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`h-full ${simulationOnly ? 'simulation-experiment-only' : 'simulation-experiment'}`">
+  <div :class="`h-full ${simulationOnly ? 'div-simulation-only' : 'div-simulation'}`">
     <Toolbar :id="toolbarId" class="p-1!">
       <template #start>
         <Button class="p-1!" icon="pi pi-play-circle" severity="secondary" text @click="onRun()" />
@@ -10,34 +10,36 @@
       <SplitterPanel :size="simulationOnly ? 100 : 89">
         <Splitter>
           <SplitterPanel class="ml-4 mr-4 mb-4 min-w-fit" :size="25">
-            <SimulationPropertyEditor :file="file" />
-            <!--
+            <ScrollPanel class="h-full">
+              <SimulationPropertyEditor :file="file" />
+              <!--
                   <SolversPropertyEditor />
                   <GraphsPropertyEditor />
                   <ParametersPropertyEditor />
                   -->
-            <Fieldset legend="X-axis">
-              <Select
-                v-model="xParameter"
-                filter
-                filterMode="lenient"
-                :options="parameters"
-                size="small"
-                class="w-full"
-                @change="updatePlot()"
-              />
-            </Fieldset>
-            <Fieldset legend="Y-axis">
-              <Select
-                v-model="yParameter"
-                filter
-                filterMode="lenient"
-                :options="parameters"
-                size="small"
-                class="w-full"
-                @change="updatePlot()"
-              />
-            </Fieldset>
+              <Fieldset legend="X-axis">
+                <Select
+                  v-model="xParameter"
+                  filter
+                  filterMode="lenient"
+                  :options="parameters"
+                  size="small"
+                  class="w-full"
+                  @change="updatePlot()"
+                />
+              </Fieldset>
+              <Fieldset legend="Y-axis">
+                <Select
+                  v-model="yParameter"
+                  filter
+                  filterMode="lenient"
+                  :options="parameters"
+                  size="small"
+                  class="w-full"
+                  @change="updatePlot()"
+                />
+              </Fieldset>
+            </ScrollPanel>
           </SplitterPanel>
           <SplitterPanel :size="75">
             <GraphPanelWidget :plots="plots" />
@@ -64,6 +66,7 @@ import * as locApi from '../../libopencor/locApi'
 import { type IGraphPanelPlot } from '../widgets/GraphPanelWidget.vue'
 
 const props = defineProps<{
+  uiEnabled: boolean
   file: locApi.File
   isActiveFile: boolean
   simulationOnly?: boolean
@@ -154,6 +157,10 @@ vueCommon.trackElementHeight(toolbarId)
 
 if (!common.isMobile()) {
   vueusecore.onKeyStroke((event: KeyboardEvent) => {
+    if (!props.uiEnabled) {
+      return
+    }
+
     if (props.isActiveFile && !event.ctrlKey && !event.shiftKey && !event.metaKey && event.code === 'F9') {
       event.preventDefault()
 
@@ -164,10 +171,6 @@ if (!common.isMobile()) {
 </script>
 
 <style scoped>
-:deep(.p-button) {
-  transition: none;
-}
-
 :deep(.p-button-icon) {
   font-size: 1.5rem;
 }
@@ -202,13 +205,14 @@ if (!common.isMobile()) {
   cursor: default;
 }
 
-.simulation-experiment-only {
-  height: calc(100vh - var(--simulation-experiment-toolbar-height));
+.div-simulation-only {
+  height: calc(var(--block-ui-height) - var(--simulation-experiment-toolbar-height));
 }
 
-.simulation-experiment {
+.div-simulation {
   height: calc(
-    100vh - var(--main-menu-height) - var(--file-tablist-height) - var(--simulation-experiment-toolbar-height)
+    var(--block-ui-height) - var(--main-menu-height) - var(--file-tablist-height) -
+      var(--simulation-experiment-toolbar-height)
   );
 }
 </style>

package/src/components/widgets/GraphPanelWidget.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="h-full">
+  <div class="flex flex-row h-full">
     <div v-if="showMarker" class="marker" />
-    <div ref="mainDiv" class="h-full" />
+    <div ref="mainDiv" class="grow h-full" />
   </div>
 </template>
 
@@ -41,12 +41,15 @@ export interface IGraphPanelPlot {
   y: IGraphPanelPlotData
 }
 
-interface IProps {
-  plots: IGraphPanelPlot[]
-  showMarker?: boolean
-}
-
-const { plots, showMarker = false } = defineProps<IProps>()
+const props = withDefaults(
+  defineProps<{
+    plots: IGraphPanelPlot[]
+    showMarker?: boolean
+  }>(),
+  {
+    showMarker: false
+  }
+)
 
 const mainDiv = vue.ref<InstanceType<typeof Element> | null>(null)
 
@@ -84,11 +87,11 @@ function themeData() {
 }
 
 vue.watch(
-  () => [plots, vueCommon.useLightMode()],
+  () => [props.plots, vueCommon.useLightMode()],
   () => {
     Plotly.react(
       mainDiv.value,
-      plots.map((plot) => ({
+      props.plots.map((plot) => ({
         x: plot.x.data,
         y: plot.y.data,
         type: 'scattergl'

package/src/components/SpinningWheelComponent.vue

@@ -1,15 +0,0 @@
-<template>
-  <ProgressSpinner class="spinning-wheel" />
-</template>
-
-<style scoped>
-.spinning-wheel {
-  width: 50% !important;
-  height: 50% !important;
-  position: fixed !important;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 99999;
-}
-</style>