@opencor/opencor 0.20250813.0

package/src/common/vueCommon.ts

@@ -0,0 +1,50 @@
+import * as vue from 'vue'
+
+// Some constants to know whether the operating system uses light mode or dark mode.
+
+const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
+
+export const isLightMode = vue.ref(prefersColorScheme.matches)
+export const isDarkMode = vue.ref(!prefersColorScheme.matches)
+
+prefersColorScheme.addEventListener('change', (event) => {
+  isLightMode.value = event.matches
+  isDarkMode.value = !event.matches
+})
+
+// A method to track the height of a given element.
+
+export function trackElementHeight(id: string): void {
+  vue.onMounted(() => {
+    const element = document.getElementById(id)
+
+    if (element !== null) {
+      const observer = new ResizeObserver(() => {
+        let elementHeight = window.getComputedStyle(element).height
+
+        if (elementHeight === '' || elementHeight === 'auto') {
+          elementHeight = '0px'
+        }
+
+        const cssVariableName =
+          '--' +
+          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)) {
+          document.documentElement.style.setProperty(cssVariableName, elementHeight)
+        }
+      })
+
+      observer.observe(element)
+
+      vue.onUnmounted(() => {
+        observer.disconnect()
+      })
+    }
+  })
+}

package/src/components/BackgroundComponent.vue

@@ -0,0 +1,26 @@
+<template>
+  <img class="logo" src="../assets/logo.svg" />
+</template>
+
+<style scoped>
+.logo {
+  /* Original dimensions:
+   *  - Width: 828.12px; and
+   *  - Height: 704.92px.
+   * Final dimensions:
+   *  - Width: 303px + 8px = 311px; and
+   *  - Height: 257.92px + 8px = ~266px
+   */
+
+  max-width: 311px;
+  max-height: 266px;
+  border-radius: 1rem;
+  padding: 0.5rem;
+  box-shadow: 0 0 0.75rem 0.375rem var(--p-content-border-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+</style>

package/src/components/ContentsComponent.vue

@@ -0,0 +1,262 @@
+<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()" />
+      <SimulationExperimentView
+        v-else-if="fileTab.uiJson === undefined"
+        :file="fileTabs[index].file"
+        :isActiveFile="fileTab.file.path() === activeFile"
+        :simulationOnly="true"
+      />
+      <SimulationExperimentUiView
+        v-else
+        :file="fileTabs[index].file"
+        :simulationOnly="true"
+        :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"
+      v-model:value="activeFile"
+      :scrollable="true"
+      :selectOnFocus="true"
+    >
+      <TabList id="fileTablist" class="file-tablist">
+        <Tab
+          v-for="fileTab in fileTabs"
+          :id="`tab_${fileTab.file.path()}`"
+          :key="`tab_${fileTab.file.path()}`"
+          :value="fileTab.file.path()"
+        >
+          <div class="flex gap-2 items-center">
+            <div>
+              {{
+                fileTab.file
+                  .path()
+                  .split(/(\\|\/)/g)
+                  .pop()
+              }}
+            </div>
+            <div class="pi pi-times remove-button" @mousedown.prevent @click.stop="closeFile(fileTab.file.path())" />
+          </div>
+        </Tab>
+      </TabList>
+      <TabPanels class="p-0!">
+        <TabPanel
+          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()" />
+          <SimulationExperimentView
+            v-else-if="fileTab.uiJson === undefined"
+            :file="fileTabs[index].file"
+            :isActiveFile="fileTab.file.path() === activeFile"
+          />
+          <SimulationExperimentUiView v-else :file="fileTabs[index].file" :uiJson="fileTabs[index].uiJson" />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as vueusecore from '@vueuse/core'
+
+import * as vue from 'vue'
+
+import * as common from '../common/common'
+import { electronApi } from '../common/electronApi'
+import * as vueCommon from '../common/vueCommon'
+import * as locApi from '../libopencor/locApi'
+
+export interface IFileTab {
+  file: locApi.File
+  uiJson?: locApi.IUiJson
+}
+
+defineProps<{
+  simulationOnly?: boolean
+}>()
+defineExpose({ openFile, closeCurrentFile, closeAllFiles, hasFile, hasFiles, selectFile })
+
+export interface IContentsComponent {
+  openFile(file: locApi.File): void
+  closeCurrentFile(): void
+  closeAllFiles(): void
+  hasFile(filePath: string): boolean
+  hasFiles(): boolean
+  selectFile(filePath: string): void
+}
+
+const fileTabs = vue.ref<IFileTab[]>([])
+const activeFile = vue.ref<string>('')
+
+const filePaths = vue.computed(() => {
+  const res: string[] = []
+
+  for (const fileTab of fileTabs.value) {
+    res.push(fileTab.file.path())
+  }
+
+  return res
+})
+
+vue.watch(filePaths, (filePaths) => {
+  electronApi?.filesOpened(filePaths)
+})
+
+vue.watch(activeFile, (filePath) => {
+  // Note: activeFile can get updated by clicking on a tab or by calling selectFile(), hence we need to watch it to let
+  //       people know that a file has been selected.
+
+  electronApi?.fileSelected(filePath)
+})
+
+function openFile(file: locApi.File): void {
+  const filePath = file.path()
+  const prevActiveFile = activeFile.value
+
+  selectFile(filePath)
+
+  fileTabs.value.splice(fileTabs.value.findIndex((fileTab) => fileTab.file.path() === prevActiveFile) + 1, 0, {
+    file: file,
+    uiJson: file.uiJson()
+  })
+
+  electronApi?.fileOpened(filePath)
+}
+
+function hasFile(filePath: string): boolean {
+  return fileTabs.value.find((fileTab) => fileTab.file.path() === filePath) !== undefined
+}
+
+function hasFiles(): boolean {
+  return fileTabs.value.length > 0
+}
+
+function selectFile(filePath: string): void {
+  activeFile.value = filePath
+}
+
+function selectNextFile(): void {
+  const activeFileIndex = fileTabs.value.findIndex((fileTab) => fileTab.file.path() === activeFile.value)
+  const nextFileIndex = (activeFileIndex + 1) % fileTabs.value.length
+
+  selectFile(fileTabs.value[nextFileIndex].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
+
+  selectFile(fileTabs.value[nextFileIndex].file.path())
+}
+
+function closeFile(filePath: string): void {
+  locApi.fileManager.unmanage(filePath)
+
+  const activeFileIndex = fileTabs.value.findIndex((fileTab) => fileTab.file.path() === filePath)
+
+  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())
+  }
+
+  electronApi?.fileClosed(filePath)
+}
+
+function closeCurrentFile(): void {
+  closeFile(activeFile.value)
+}
+
+function closeAllFiles(): void {
+  while (fileTabs.value.length > 0) {
+    closeCurrentFile()
+  }
+}
+
+// Track the height of our file tablist.
+
+vueCommon.trackElementHeight('fileTablist')
+
+// Keyboard shortcuts.
+
+if (!common.isMobile()) {
+  vueusecore.onKeyStroke((event: KeyboardEvent) => {
+    if (fileTabs.value.length === 0) {
+      return
+    }
+
+    if (event.ctrlKey && !event.shiftKey && event.code === 'Tab') {
+      event.preventDefault()
+
+      selectNextFile()
+    } else if (event.ctrlKey && event.shiftKey && event.code === 'Tab') {
+      event.preventDefault()
+
+      selectPreviousFile()
+    }
+  })
+}
+</script>
+
+<style scoped>
+.file-tablist {
+  border-bottom: 1px solid var(--p-primary-color);
+}
+
+.p-tab {
+  padding: 0.25rem 0.5rem;
+  border-right: 1px solid var(--p-content-border-color);
+}
+
+.p-tab:first-of-type {
+  border-left: 1px solid var(--p-content-border-color);
+}
+
+.p-tab:hover {
+  background-color: var(--p-content-hover-background) !important;
+}
+
+.p-tab .remove-button {
+  visibility: hidden;
+}
+
+.p-tab:hover .remove-button,
+.p-tab-active .remove-button {
+  visibility: visible;
+}
+
+.p-tab-active,
+.p-tab-active:hover {
+  background-color: var(--p-primary-color) !important;
+  color: var(--p-primary-contrast-color);
+}
+
+:deep(.p-tablist-active-bar) {
+  display: none;
+}
+
+.remove-button {
+  padding: 0.15rem;
+  font-size: 0.75rem;
+}
+
+.remove-button:hover {
+  border-radius: var(--p-border-radius-sm);
+  background-color: var(--p-red-500);
+  color: var(--p-red-50);
+}
+
+@media (prefers-color-scheme: dark) {
+  .remove-button:hover {
+    background-color: var(--p-red-400);
+  }
+}
+</style>

package/src/components/DragNDropComponent.vue

@@ -0,0 +1,29 @@
+<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>
+</template>
+
+<style scoped>
+.drop-area {
+  width: 100%;
+  height: 100%;
+  border: 0.375rem dashed;
+  border-color: var(--p-primary-color);
+  z-index: 99999;
+}
+
+.message {
+  font-size: 1.5rem;
+  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;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

package/src/components/LoadOpencorComponent.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="loading p-overlay-mask">
+    <Message class="message" severity="secondary">
+      <i class="message-icon pi pi-spin pi-cog" />
+      <br />
+      <span class="message-text">Loading OpenCOR...</span>
+    </Message>
+  </div>
+</template>
+
+<style scoped>
+.loading {
+  z-index: 99999;
+}
+
+.message {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1.5rem 1rem 0.75rem;
+}
+
+.message-icon {
+  text-align: center;
+  display: block;
+  font-size: 3rem;
+}
+
+.message-text {
+  font-size: 1.5rem;
+}
+</style>

package/src/components/MainMenu.vue

@@ -0,0 +1,220 @@
+<template>
+  <Menubar id="mainMenu" :model="items">
+    <template #item="{ item, props }">
+      <a v-bind="props.action">
+        <div class="p-menubar-item-label">{{ item.label }}</div>
+        <svg
+          v-if="item.items !== undefined"
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          class="ml-auto p-icon p-menubar-submenu-icon"
+        >
+          <path
+            d="M5.25 11.1728C5.14929 11.1694 5.05033 11.1455 4.9592 11.1025C4.86806 11.0595 4.78666 10.9984 4.72 10.9228C4.57955 10.7822 4.50066 10.5916 4.50066 10.3928C4.50066 10.1941 4.57955 10.0035 4.72 9.86283L7.72 6.86283L4.72 3.86283C4.66067 3.71882 4.64765 3.55991 4.68275 3.40816C4.71785 3.25642 4.79932 3.11936 4.91585 3.01602C5.03238 2.91268 5.17819 2.84819 5.33305 2.83149C5.4879 2.81479 5.64411 2.84671 5.78 2.92283L9.28 6.42283C9.42045 6.56346 9.49934 6.75408 9.49934 6.95283C9.49934 7.15158 9.42045 7.34221 9.28 7.48283L5.78 10.9228C5.71333 10.9984 5.63193 11.0595 5.5408 11.1025C5.44966 11.1455 5.35071 11.1694 5.25 11.1728Z"
+            fill="currentColor"
+          />
+        </svg>
+        <div v-if="item.shortcut !== undefined" class="ml-auto border border-surface rounded bg-emphasis text-xs/3">
+          {{ item.shortcut }}
+        </div>
+      </a>
+    </template>
+  </Menubar>
+</template>
+
+<script setup lang="ts">
+import * as vueusecore from '@vueuse/core'
+
+import * as vue from 'vue'
+
+import * as common from '../common/common'
+
+const props = defineProps<{
+  hasFiles: boolean
+}>()
+
+const emit = defineEmits([
+  'about',
+  'close',
+  'closeAll',
+  'open',
+  'openRemote',
+  'openSampleLorenz',
+  'openSampleInteractiveLorenz',
+  'settings'
+])
+const isWindowsOrLinux = common.isWindows() || common.isLinux()
+const isMacOs = common.isMacOs()
+
+const items = [
+  {
+    label: 'File',
+    items: [
+      {
+        label: 'Open...',
+        shortcut: isWindowsOrLinux ? 'Ctrl+Alt+O' : isMacOs ? '⌘⌥O' : undefined,
+        command: () => {
+          emit('open')
+        }
+      },
+      {
+        label: 'Open Remote...',
+        shortcut: isWindowsOrLinux ? 'Ctrl+Shift+Alt+O' : isMacOs ? '⇧⌘⌥O' : undefined,
+        command: () => {
+          emit('openRemote')
+        }
+      },
+      {
+        label: 'Open Sample',
+        items: [
+          {
+            label: 'Lorenz',
+            command: () => {
+              emit('openSampleLorenz')
+            }
+          },
+          {
+            label: 'Interactive Lorenz',
+            command: () => {
+              emit('openSampleInteractiveLorenz')
+            }
+          }
+        ]
+      },
+      { separator: true },
+      {
+        label: 'Close',
+        shortcut: isWindowsOrLinux ? 'Ctrl+Alt+W' : isMacOs ? '⌘⌥W' : undefined,
+        command: () => {
+          emit('close')
+        },
+        disabled: () => !props.hasFiles
+      },
+      {
+        label: 'Close All',
+        command: () => {
+          emit('closeAll')
+        },
+        disabled: () => !props.hasFiles
+      }
+    ]
+  },
+  /*---OPENCOR--- Enable the settings menu once we have settings for OpenCOR's Web app.
+  {
+    label: 'Tools',
+    items: [
+      {
+        label: 'Settings...',
+        shortcut: isWindowsOrLinux ? 'Ctrl+Alt+,' : isMacOs ? '⌘⌥,' : undefined,
+        command: () => {
+          emit('settings')
+        }
+      }
+    ]
+  },
+  */
+  {
+    label: 'Help',
+    items: [
+      {
+        label: 'Home Page',
+        command: () => {
+          window.open('https://opencor.ws/')
+        }
+      },
+      { separator: true },
+      {
+        label: 'Report Issue',
+        command: () => {
+          window.open('https://github.com/opencor/webapp/issues/new')
+        }
+      },
+      { separator: true },
+      {
+        label: 'About OpenCOR',
+        command: () => {
+          emit('about')
+        }
+      }
+    ]
+  }
+]
+
+// Never display our menu as a hamburger menu.
+
+vue.onMounted(() => {
+  const mainMenu = document.getElementById('mainMenu')
+
+  if (mainMenu !== null) {
+    const observer = new MutationObserver(() => {
+      if (mainMenu.className.includes('p-menubar-mobile')) {
+        mainMenu.classList.remove('p-menubar-mobile')
+      }
+    })
+
+    observer.observe(mainMenu, { attributes: true })
+  }
+})
+
+// Keyboard shortcuts.
+
+if (!common.isMobile()) {
+  vueusecore.onKeyStroke((event: KeyboardEvent) => {
+    if (common.isCtrlOrCmd(event) && !event.shiftKey && event.code === 'KeyO') {
+      event.preventDefault()
+
+      emit('open')
+    } else if (common.isCtrlOrCmd(event) && event.shiftKey && event.code === 'KeyO') {
+      event.preventDefault()
+
+      emit('openRemote')
+    } else if (props.hasFiles && common.isCtrlOrCmd(event) && !event.shiftKey && event.code === 'KeyW') {
+      event.preventDefault()
+
+      emit('close')
+    } else if (common.isCtrlOrCmd(event) && !event.shiftKey && event.code === 'Comma') {
+      event.preventDefault()
+
+      emit('settings')
+    }
+  })
+}
+</script>
+
+<style scoped>
+.p-menubar {
+  padding: 0.1rem;
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.p-menubar
+  > .p-menubar-root-list
+  > .p-menubar-item
+  > .p-menubar-item-content
+  > .p-menubar-item-link
+  .p-menubar-submenu-icon {
+  display: none;
+}
+
+.p-menubar-item-link {
+  padding: 0.25rem 0.5rem !important;
+}
+
+:deep(.p-menubar-root-list) {
+  gap: 0.1rem;
+}
+
+:deep(.p-menubar-submenu) {
+  padding: 0.1rem;
+  z-index: 10;
+}
+
+.shortcut {
+  border-color: var(--p-content-border-color);
+  background: var(--p-content-hover-background);
+  color: var(--p-text-muted-color);
+}
+</style>