@abi-software/mapintegratedvuer 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -58,12 +58,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.19.0",
-    "@abi-software/map-side-bar": "2.19.0",
-    "@abi-software/map-utilities": "1.12.0",
+    "@abi-software/flatmapvuer": "1.20.0",
+    "@abi-software/map-side-bar": "2.20.0",
+    "@abi-software/map-utilities": "1.13.0",
     "@abi-software/plotvuer": "1.3.0",
-    "@abi-software/scaffoldvuer": "2.0.0",
-    "@abi-software/simulationvuer": "4.3.0",
+    "@abi-software/scaffoldvuer": "2.1.0",
+    "@abi-software/simulationvuer": "4.4.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",

package/src/components/ContextCard.vue

@@ -7,7 +7,7 @@
         class="context-card"
       >
         <div class="card-left">
-          <img :src="banner" class="context-image" />
+          <img :crossorigin="crossorigin" :src="banner" class="context-image" />
         </div>
         <div class="card-right scrollbar">
           <div>
@@ -54,7 +54,11 @@
               </div>
               <template v-for="(view, i) in contextData.views" :key="i + '_1'">
                 <div @click="openViewFile(view)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)" />
+                  <img
+                    :crossorigin="crossorigin"
+                    class="view-image"
+                    :src="getFileFromPath(view.thumbnail)"
+                  />
                   <div class="view-description">{{ view.description }}</div>
                 </div>
                 <div class="padding" />
@@ -72,6 +76,7 @@
                       :style="'background-color:' + sample.color"
                     ></div>
                     <img
+                      :crossorigin="crossorigin"
                       class="key-image"
                       v-else-if="sample.thumbnail"
                       :src="getFileFromPath(sample.thumbnail)"
@@ -99,7 +104,11 @@
               </div>
               <template v-for="(view, i) in contextData.views" :key="i + '_1'">
                 <span @click="viewClicked(view, i)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)" />
+                  <img
+                    :crossorigin="crossorigin"
+                    class="view-image"
+                    :src="getFileFromPath(view.thumbnail)"
+                  />
                   <div class="view-description">
                     {{ view.description }}
                     <i class="el-icon-warning-outline info"></i>
@@ -171,6 +180,9 @@ export default {
     CopyToClipboard,
   },
   mixins: [S3Bucket],
+  inject: {
+    crossorigin: { default: 'anonymous' },
+  },
   props: {
     /**
      * Object containing information for

package/src/components/DatasetHeader.vue

@@ -18,7 +18,7 @@
         class="dataset-card"
         ref="card"
       >
-        <img :src="entry.datasetImage" class="image" />
+        <img :crossorigin="crossorigin" :src="entry.datasetImage" class="image" />
         <div style="padding: 14px">
           <span class="dataset-description">{{ entry.datasetDescription }}</span>
           <div>
@@ -33,6 +33,9 @@
 <script>
 export default {
   name: 'DatasetHeader',
+  inject: {
+    crossorigin: { default: 'anonymous' },
+  },
   props: {
     /**
      * Object containing information for

package/src/components/MapContent.vue

@@ -142,9 +142,17 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The `crossorigin` attribute value used for images.
+     */
+    crossorigin: {
+      type: String,
+      default: 'anonymous',
+    },
   },
   provide: function () {
     return {
+      crossorigin: computed(() => this.crossorigin),
       showGlobalSettings: this.showGlobalSettings,
       showOpenMapButton: this.showOpenMapButton,
       truncateLongLabel: computed(() => this.truncateLongLabel),

package/src/components/viewers/Simulation.vue

@@ -1,5 +1,14 @@
 <template>
-  <SimulationVuer :apiLocation="apiLocation" :id="id" ref="simulation" />
+  <SimulationVuer
+    v-if="isCrossOriginIsolated"
+    :apiLocation="apiLocation"
+    :id="id"
+    ref="simulation"
+  />
+  <div v-else class="simulation-unsupported">
+    Simulations require a cross-origin isolated page (for SharedArrayBuffer support). This browser
+    or host is not configured for it.
+  </div>
 </template>
 
 <script>
@@ -13,6 +22,13 @@ export default {
   components: {
     SimulationVuer,
   },
+  data: function () {
+    return {
+      // libOpenCOR (wasm) uses threads, which need SharedArrayBuffer and therefore COOP/COEP headers.
+      // Without them it aborts on Safari.
+      isCrossOriginIsolated: window.crossOriginIsolated === true,
+    };
+  },
   computed: {
     id: function () {
       //resource field is only available for simulation omex file and it will run locally.
@@ -22,3 +38,9 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.simulation-unsupported {
+  padding: 1rem;
+}
+</style>

package/vite.config.js

@@ -9,6 +9,32 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const pathSrc = path.resolve(__dirname, './src');
 
+// SimulationVuer (libOpenCOR wasm) needs SharedArrayBuffer, which requires cross-origin isolation.
+// Safari/WebKit does not support COEP `credentialless`,
+// so serve `require-corp` to WebKit browsers and `credentialless` to the rest.
+const isWebKitOnly = (ua = '') => ua.includes('AppleWebKit') && !/(Chrome|Chromium|Edg)\//.test(ua);
+
+const crossOriginIsolation = () => {
+  const middleware = (req, res, next) => {
+    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+    res.setHeader(
+      'Cross-Origin-Embedder-Policy',
+      isWebKitOnly(req.headers['user-agent']) ? 'require-corp' : 'credentialless',
+    );
+    res.setHeader('Vary', 'User-Agent');
+    next();
+  };
+  return {
+    name: 'cross-origin-isolation',
+    configureServer: (server) => {
+      server.middlewares.use(middleware);
+    },
+    configurePreviewServer: (server) => {
+      server.middlewares.use(middleware);
+    },
+  };
+};
+
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   const config = {
@@ -53,11 +79,8 @@ export default defineConfig(({ command }) => {
   if (command === 'serve') {
     config.server = {
       port: 8081,
-      headers: {
-        'Cross-Origin-Opener-Policy': 'same-origin',
-        'Cross-Origin-Embedder-Policy': 'credentialless',
-      },
     };
+    config.plugins.push(crossOriginIsolation());
     config.define = {
       'process.env.HTTP_PROXY': 8081,
       global: 'globalThis',

package/dist/Simulation-C5o5DXRb.js

@@ -1,25 +0,0 @@
-import { _ as e } from "./connectivities-Br3MpoAv.js";
-import { t } from "./ContentMixin-B-O_IwPg.js";
-import { createBlock as n, openBlock as r, resolveComponent as i } from "vue";
-import { SimulationVuer as a } from "@abi-software/simulationvuer";
-import "@abi-software/simulationvuer/dist/style.css";
-//#region src/components/viewers/Simulation.vue
-var o = {
-	name: "Simulation",
-	mixins: [t],
-	components: { SimulationVuer: a },
-	computed: { id: function() {
-		return this.entry.resource ? this.entry.resource : this.entry.discoverId;
-	} }
-};
-function s(e, t, a, o, s, c) {
-	let l = i("SimulationVuer");
-	return r(), n(l, {
-		apiLocation: e.apiLocation,
-		id: c.id,
-		ref: "simulation"
-	}, null, 8, ["apiLocation", "id"]);
-}
-var c = /*#__PURE__*/ e(o, [["render", s]]);
-//#endregion
-export { c as default };