@opencor/opencor 0.20250826.0 → 0.20250827.0

package/src/components/OpenCOR.vue

@@ -1,624 +0,0 @@
-<template>
-  <BlockUI id="blockUi" :blocked="!uiEnabled" class="overflow-hidden" :style="blockUiStyle">
-    <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
-          v-show="mainMenuVisible"
-          :uiEnabled="compUiEnabled"
-          :hasFiles="hasFiles"
-          @about="onAbout"
-          @open="($refs.files as HTMLInputElement).click()"
-          @openRemote="openRemoteVisible = true"
-          @openSampleLorenz="onOpenSampleLorenz"
-          @openSampleInteractiveLorenz="onOpenSampleInteractiveLorenz"
-          @close="onClose"
-          @closeAll="onCloseAll"
-          @settings="onSettings"
-        />
-      </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>
-    <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">
-import primeVueAuraTheme from '@primeuix/themes/aura'
-import * as vueusecore from '@vueuse/core'
-
-import 'primeicons/primeicons.css'
-import primeVueConfig from 'primevue/config'
-import primeVueConfirmationService from 'primevue/confirmationservice'
-import primeVueToastService from 'primevue/toastservice'
-import { useToast } from 'primevue/usetoast'
-import * as vue from 'vue'
-
-import type { IOpenCORProps } from '../../index'
-
-import '../assets/app.css'
-import * as common from '../common/common'
-import { SHORT_DELAY, TOAST_LIFE } from '../common/constants'
-import { electronApi } from '../common/electronApi'
-import * as locCommon from '../common/locCommon'
-import * as vueCommon from '../common/vueCommon'
-import IContentsComponent from '../components/ContentsComponent.vue'
-import * as locApi from '../libopencor/locApi'
-
-const props = defineProps<IOpenCORProps>()
-
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-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()
-
-if (getCurrentInstance !== null) {
-  const app = getCurrentInstance.appContext.app
-  let options = {}
-
-  if (props.theme === 'light') {
-    options = {
-      darkModeSelector: false
-    }
-  } else if (props.theme === 'dark') {
-    document.documentElement.classList.add('opencor-dark-mode')
-    document.body.classList.add('opencor-dark-mode')
-
-    options = {
-      darkModeSelector: '.opencor-dark-mode'
-    }
-  }
-
-  app.use(primeVueConfig as unknown as vue.Plugin, {
-    theme: {
-      preset: primeVueAuraTheme,
-      options: options
-    }
-  })
-  app.use(primeVueConfirmationService as unknown as vue.Plugin)
-  app.use(primeVueToastService as unknown as vue.Plugin)
-}
-
-if (props.theme !== undefined) {
-  vueCommon.setTheme(props.theme)
-}
-
-const toast = useToast()
-
-// Asynchronously initialise our libOpenCOR API.
-
-const locApiInitialised = vue.ref(false)
-
-void locApi.initialiseLocApi().then(() => {
-  locApiInitialised.value = true
-})
-
-// Handle an action.
-
-electronApi?.onAction((action: string) => {
-  handleAction(action)
-})
-
-function handleAction(action: string): void {
-  function isAction(actionName: string, expectedActionName: string): boolean {
-    return actionName.localeCompare(expectedActionName, undefined, { sensitivity: 'base' }) === 0
-  }
-
-  const index = action.indexOf('/')
-  const actionName = index !== -1 ? action.substring(0, index) : action
-  const actionArguments = index !== -1 ? action.substring(index + 1) : ''
-
-  if (isAction(actionName, 'openAboutDialog')) {
-    onAbout()
-  } else if (isAction(actionName, 'openSettingsDialog')) {
-    onSettings()
-  } else {
-    const filePaths = actionArguments.split('%7C')
-
-    if (
-      (isAction(actionName, 'openFile') && filePaths.length === 1) ||
-      (isAction(actionName, 'openFiles') && filePaths.length > 1)
-    ) {
-      for (const filePath of filePaths) {
-        openFile(filePath)
-      }
-    } else {
-      toast.add({
-        severity: 'error',
-        summary: 'Handling an action',
-        detail: `${action}\n\nThe action could not be handled.`,
-        life: TOAST_LIFE
-      })
-    }
-  }
-}
-
-// Enable/disable the UI.
-
-const uiEnabled = vue.ref<boolean>(true)
-
-electronApi?.onEnableDisableUi((enable: boolean) => {
-  enableDisableUi(enable)
-})
-
-function enableDisableUi(enable: boolean): void {
-  uiEnabled.value = enable
-}
-
-// Enable/disable some menu items.
-
-const hasFiles = vue.computed(() => {
-  return contents.value?.hasFiles() ?? false
-})
-
-vue.watch(hasFiles, (hasFiles) => {
-  electronApi?.enableDisableFileCloseAndCloseAllMenuItems(hasFiles)
-})
-
-// Loading OpenCOR.
-// Note: this is only done if window.locApi is not defined, which means that we are running OpenCOR's Web app.
-
-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)
-
-  loadingOpencorMessageVisible.value = true
-
-  vue.watch(locApiInitialised, (initialised) => {
-    if (initialised) {
-      loadingOpencorMessageVisible.value = false
-
-      enableDisableUi(true)
-    }
-  })
-}
-
-// Loading model.
-
-const loadingModelMessageVisible = vue.ref<boolean>(false)
-
-function showLoadingModelMessage(): void {
-  enableDisableUi(false)
-
-  loadingModelMessageVisible.value = true
-}
-
-function hideLoadingModelMessage(): void {
-  enableDisableUi(true)
-
-  loadingModelMessageVisible.value = false
-}
-
-// Auto update.
-
-electronApi?.onCheckForUpdates(() => {
-  electronApi?.checkForUpdates(false)
-})
-
-const updateErrorVisible = vue.ref<boolean>(false)
-const updateErrorTitle = vue.ref<string>('')
-const updateErrorIssue = vue.ref<string>('')
-
-function onUpdateErrorDialogClose(): void {
-  updateErrorVisible.value = false
-  updateDownloadProgressVisible.value = false
-}
-
-const updateAvailableVisible = vue.ref<boolean>(false)
-const updateDownloadProgressVisible = vue.ref<boolean>(false)
-const updateVersion = vue.ref<string>('')
-const updateDownloadPercent = vue.ref<number>(0)
-
-electronApi?.onUpdateAvailable((version: string) => {
-  updateAvailableVisible.value = true
-  updateVersion.value = version
-})
-
-function onDownloadAndInstall(): void {
-  updateDownloadPercent.value = 0 // Just to be on the safe side.
-  updateDownloadProgressVisible.value = true
-  updateAvailableVisible.value = false
-
-  electronApi?.downloadAndInstallUpdate()
-}
-
-electronApi?.onUpdateDownloadError((issue: string) => {
-  updateErrorTitle.value = 'Downloading Update...'
-  updateErrorIssue.value = `An error occurred while downloading the update (${issue}).`
-  updateErrorVisible.value = true
-})
-
-electronApi?.onUpdateDownloadProgress((percent: number) => {
-  updateDownloadPercent.value = percent
-})
-
-electronApi?.onUpdateDownloaded(() => {
-  updateDownloadPercent.value = 100 // Just to be on the safe side.
-
-  electronApi?.installUpdateAndRestart()
-})
-
-const updateNotAvailableVisible = vue.ref<boolean>(false)
-
-electronApi?.onUpdateNotAvailable(() => {
-  updateNotAvailableVisible.value = true
-})
-
-electronApi?.onUpdateCheckError((issue: string) => {
-  updateErrorTitle.value = 'Checking For Updates...'
-  updateErrorIssue.value = `An error occurred while checking for updates (${issue}).`
-  updateErrorVisible.value = true
-})
-
-// About dialog.
-
-const aboutVisible = vue.ref<boolean>(false)
-
-electronApi?.onAbout(() => {
-  onAbout()
-})
-
-function onAbout(): void {
-  aboutVisible.value = true
-}
-
-// Settings dialog.
-
-const settingsVisible = vue.ref<boolean>(false)
-
-electronApi?.onSettings(() => {
-  onSettings()
-})
-
-function onSettings(): void {
-  settingsVisible.value = true
-}
-
-// Open a file.
-
-function openFile(fileOrFilePath: string | File): void {
-  // Check whether the file is already open and if so then select it.
-
-  const filePath = locCommon.filePath(fileOrFilePath)
-
-  if (contents.value?.hasFile(filePath) ?? false) {
-    contents.value?.selectFile(filePath)
-
-    return
-  }
-
-  // Retrieve a locApi.File object for the given file or file path and add it to the contents.
-
-  if (locCommon.isRemoteFilePath(filePath)) {
-    showLoadingModelMessage()
-  }
-
-  locCommon
-    .file(fileOrFilePath)
-    .then((file) => {
-      const fileType = file.type()
-
-      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.IRRETRIEVABLE_FILE
-                  ? 'The file could not be retrieved.'
-                  : 'Only COMBINE archives are supported.'
-            })
-          })
-        } else {
-          toast.add({
-            severity: 'error',
-            summary: 'Opening a file',
-            detail:
-              filePath +
-              '\n\n' +
-              (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
-          })
-        }
-
-        electronApi?.fileIssue(filePath)
-      } else {
-        contents.value?.openFile(file)
-      }
-
-      if (locCommon.isRemoteFilePath(filePath)) {
-        hideLoadingModelMessage()
-      }
-    })
-    .catch((error: unknown) => {
-      if (locCommon.isRemoteFilePath(filePath)) {
-        hideLoadingModelMessage()
-      }
-
-      if (props.omex !== undefined) {
-        void vue.nextTick().then(() => {
-          issues.value.push({
-            type: locApi.EIssueType.ERROR,
-            description: common.formatIssue(error instanceof Error ? error.message : String(error))
-          })
-        })
-      } else {
-        toast.add({
-          severity: 'error',
-          summary: 'Opening a file',
-          detail: `${filePath}\n\n${common.formatIssue(error instanceof Error ? error.message : String(error))}`,
-          life: TOAST_LIFE
-        })
-      }
-
-      electronApi?.fileIssue(filePath)
-    })
-}
-
-// Open file(s) dialog.
-
-function onChange(event: Event): void {
-  const files = (event.target as HTMLInputElement).files
-
-  if (files !== null) {
-    for (const file of Array.from(files)) {
-      openFile(file)
-    }
-  }
-}
-
-// Drag and drop.
-
-const dragAndDropCounter = vue.ref<number>(0)
-
-function onDragEnter(): void {
-  if (!uiEnabled.value || props.omex !== undefined) {
-    return
-  }
-
-  dragAndDropCounter.value += 1
-}
-
-function onDrop(event: DragEvent): void {
-  if (dragAndDropCounter.value === 0) {
-    return
-  }
-
-  dragAndDropCounter.value = 0
-
-  const files = event.dataTransfer?.files
-
-  if (files !== undefined) {
-    for (const file of Array.from(files)) {
-      openFile(file)
-    }
-  }
-}
-
-function onDragLeave(): void {
-  if (dragAndDropCounter.value === 0) {
-    return
-  }
-
-  dragAndDropCounter.value -= 1
-}
-
-// Open.
-
-electronApi?.onOpen((filePath: string) => {
-  openFile(filePath)
-})
-
-// Open remote.
-
-const openRemoteVisible = vue.ref<boolean>(false)
-
-electronApi?.onOpenRemote(() => {
-  openRemoteVisible.value = true
-})
-
-function onOpenRemote(url: string): void {
-  // Note: no matter whether this is OpenCOR or OpenCOR's Web app, we always retrieve the file contents of a remote
-  //       file. We could, in OpenCOR, rely on libOpenCOR to retrieve it for us, but this would block the UI. To
-  //       retrieve the file here means that it is done asynchronously, which in turn means that the UI is not blocked
-  //       and that we can show a spinning wheel to indicate that something is happening.
-
-  openFile(url)
-}
-
-// Open sample Lorenz.
-
-electronApi?.onOpenSampleLorenz(() => {
-  onOpenSampleLorenz()
-})
-
-function onOpenSampleLorenz(): void {
-  openFile('https://github.com/opencor/webapp/raw/refs/heads/main/tests/models/lorenz.omex')
-}
-
-// Open sample interactive Lorenz.
-
-electronApi?.onOpenSampleInteractiveLorenz(() => {
-  onOpenSampleInteractiveLorenz()
-})
-
-function onOpenSampleInteractiveLorenz(): void {
-  openFile('https://github.com/opencor/webapp/raw/refs/heads/main/tests/models/ui/lorenz.omex')
-}
-
-// Close.
-
-electronApi?.onClose(() => {
-  onClose()
-})
-
-function onClose(): void {
-  contents.value?.closeCurrentFile()
-}
-
-// Close all.
-
-electronApi?.onCloseAll(() => {
-  onCloseAll()
-})
-
-function onCloseAll(): void {
-  contents.value?.closeAllFiles()
-}
-
-// Reset all.
-
-const resetAllVisible = vue.ref<boolean>(false)
-
-electronApi?.onResetAll(() => {
-  resetAllVisible.value = true
-})
-
-function onResetAll(): void {
-  electronApi?.resetAll()
-}
-
-// Select.
-
-electronApi?.onSelect((filePath: string) => {
-  contents.value?.selectFile(filePath)
-})
-
-// Track the height of our block UI.
-
-vueCommon.trackElementHeight('blockUi')
-
-// Set the height of our block UI.
-
-const blockUiStyle = vue.ref({})
-const mainMenuVisible = vue.ref<boolean>(false)
-
-vue.onMounted(() => {
-  // Set the height of our block UI to either '100vh' or '100%', depending on the height of our document element.
-
-  blockUiStyle.value =
-    window.getComputedStyle(document.documentElement).height === '0px' ? { height: '100vh' } : { height: '100%' }
-
-  // We have set the height of our block UI, so we can now safely show our main menu.
-  // Note: indeed, to properly determine the height of our document element, we must ensure that our own height is zero.
-
-  mainMenuVisible.value = true
-})
-
-// 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).
-
-if (props.omex !== undefined) {
-  vue.watch(locApiInitialised, (initialised) => {
-    if (initialised) {
-      if (props.omex !== undefined) {
-        openFile(props.omex)
-      }
-    }
-  })
-} else {
-  // (Also) track the height of our main menu.
-
-  vueCommon.trackElementHeight('mainMenu')
-
-  // Things that need to be done when the component is mounted.
-
-  vue.onMounted(() => {
-    // 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.
-
-        electronApi.checkForUpdates(true)
-      } else {
-        // Handle the action passed to our Web app, if any.
-        // Note: to use vue.nextTick() doesn't do the trick, so we have no choice but to use setTimeout().
-
-        const action = vueusecore.useStorage('action', '')
-
-        if (window.location.search !== '') {
-          action.value = window.location.search.substring(1)
-
-          window.location.search = ''
-        } else if (action.value !== '') {
-          setTimeout(() => {
-            handleAction(action.value)
-
-            action.value = ''
-          }, SHORT_DELAY)
-        }
-      }
-    }, SHORT_DELAY)
-  })
-}
-</script>

package/src/components/dialogs/AboutDialog.vue

@@ -1,51 +0,0 @@
-<template>
-  <BaseDialog header=" " style="width: 39rem">
-    <div class="space-y-7">
-      <div class="text-center">
-        <div class="text-3xl font-bold">OpenCOR {{ version }}</div>
-        <div v-if="electronApi !== undefined" class="text-xl italic font-bold">{{ electronApi.operatingSystem() }}</div>
-        <div class="text-sm italic">Copyright {{ constants.COPYRIGHT }}</div>
-      </div>
-      <div class="space-y-2">
-        <div>
-          <a href="https://opencor.ws/" target="_blank" rel="noopener">OpenCOR</a> is a frontend to
-          <a href="https://opencor.ws/libopencor/" target="_blank" rel="noopener">libOpenCOR</a> {{ locApi.version() }},
-          a library that can be used to organise, edit, simulate, and analyse
-          <a href="https://cellml.org/" target="_blank" rel="noopener">CellML</a> files.
-        </div>
-        <div class="space-y-0">
-          <div>There are two versions of OpenCOR:</div>
-
-          <ol class="list-decimal list-inside ml-2">
-            <li>
-              <span class="font-bold">OpenCOR:</span> a desktop application that can be run on
-              <a href="https://en.wikipedia.org/wiki/List_of_Intel_processors">Intel</a>-based and
-              <a href="https://en.wikipedia.org/wiki/ARM_architecture_family">ARM</a>-based
-              <a href="https://en.wikipedia.org/wiki/Microsoft_Windows" target="_blank" rel="noopener">Windows</a>,
-              <a href="https://en.wikipedia.org/wiki/Linux" target="_blank" rel="noopener">Linux</a>, and
-              <a href="https://en.wikipedia.org/wiki/MacOS" target="_blank" rel="noopener">macOS</a> machines; and
-            </li>
-            <li>
-              <span class="font-bold">OpenCOR's Web app:</span> a
-              <a href="https://en.wikipedia.org/wiki/Web_application" target="_blank" rel="noopener">Web app</a> that
-              can be run on a Web browser.
-            </li>
-          </ol>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <Button label="OK" autofocus @click="$emit('close')" />
-    </template>
-  </BaseDialog>
-</template>
-
-<script setup lang="ts">
-import * as constants from '../../common/constants'
-import { electronApi } from '../../common/electronApi'
-import * as locApi from '../../libopencor/locApi'
-
-defineEmits(['close'])
-
-import { version } from '../../../package.json'
-</script>