@abi-software/scaffoldvuer 1.6.2-wc → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.6.2-wc",
+  "version": "1.7.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -9,7 +9,6 @@
   "scripts": {
     "serve": "vite --host --force",
     "build-bundle": "vite build",
-    "build-wc": "vite build -c vite.web-component.js",
     "build-static": "vite build -c vite.static-build.js",
     "vuese-gen": "node vuese-generator.js",
     "vuese-watch": "node vuese-generator.js watch",
@@ -42,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.2.0",
+    "@abi-software/map-utilities": "^1.3.0",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -71,8 +70,7 @@
     "vite": "^5.0.10",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vitepress": "^1.0.0-rc.42",
-    "vue-docgen-api": "^4.79.2",
-    "vue-web-component-wrapper": "^1.6.9"
+    "vue-docgen-api": "^4.79.2"
   },
   "eslintConfig": {
     "root": true,

package/src/ScaffoldVuer-wc.js

@@ -1,19 +1,11 @@
-import { defineCustomElementSFC } from 'vue-web-component-wrapper';
-import { createPinia, setActivePinia } from "pinia";
-import { useMainStore } from '@/store/index'
+import Vue from 'vue'
+import vueCustomElement from 'vue-custom-element';
 
-import ScaffoldVuerComponent from "./components/ScaffoldVuer.vue";
+Vue.use(vueCustomElement);
 
-setActivePinia(createPinia());
-const mainStore = useMainStore();
-const token = document.cookie.split("; ").find((row) => row.startsWith("user-token"));
-if (mainStore && token) {
-  mainStore.setUserToken(token.split("=")[1]);
-}
+import ScaffoldVuer from "./components/ScaffoldVuer.vue";
 
-const ScaffoldVuer = defineCustomElementSFC(ScaffoldVuerComponent, { shadowRoot: false });
-
-customElements.define("scaffoldvuer-wc", ScaffoldVuer);
+Vue.customElement("scaffoldvuer-wc", ScaffoldVuer);
 
 /*
 const wrappedElement = wrap(Vue, ScaffoldVuer);

package/src/components/ScaffoldVuer.vue

@@ -308,7 +308,7 @@
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ viewingModes[viewingMode] }}
+              {{ modeDescription }}
             </el-row>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -805,7 +805,7 @@ export default {
       viewingMode: "Exploration",
       viewingModes: {
         "Exploration": "View and explore detailed visualization of 3D scaffolds",
-        "Annotation": "View internal identifiers of features",
+        "Annotation": ['View feature annotations', 'Add, comment on and view feature annotations'],
       },
       openMapRef: undefined,
       backgroundIconRef: undefined,
@@ -918,24 +918,6 @@ export default {
       }
       this.previousMarkerLabels = markRaw({...labels});
     },
-    annotationDisplay: function(value) {
-      if (this.annotationSidebar) {
-        if (value) {
-          const region = this.tData.region ? this.tData.region +"/" : "";
-          const annotationEntry = {
-            "featureId": region + this.tData.label,
-            "resourceId": this.url,
-            "resource": this.url,
-          };
-          this.$emit('annotation-open', {annotationEntry: annotationEntry,
-            commitCallback: this.commitAnnotationEvent});
-        } else {
-          if (!this.createData.toBeConfirmed || !this.createData.toBeDeleted) {
-            this.$emit("annotation-close");
-          }
-        }
-      }
-    }
   },
   beforeCreate: function () {
     this.$module = new OrgansViewer();
@@ -977,7 +959,17 @@ export default {
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
         (this.activeDrawMode !== "Point" && this.activeDrawMode !== 'LineString');
-    }
+    },
+    modeDescription: function () {
+      let description = this.viewingModes[this.viewingMode];
+      if (this.viewingMode === 'Annotation') {
+        if (this.userInformation) {
+          return description[1]
+        }
+        return description[0]
+      };
+      return description;
+    },
   },
   methods: {
     /**
@@ -1337,6 +1329,7 @@ export default {
         this.createData.shape = '';
         this.$module.selectObjectOnPick = true;
       } else if (type === 'tool') {
+        if (this.annotationDisplay) return;
         this.activeDrawTool = icon;
         this.createData.shape = this.activeDrawTool ? this.activeDrawTool : '';
         this.$module.selectObjectOnPick = false;