@abi-software/scaffoldvuer 1.3.3-beta.0 → 1.3.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.3.3-beta.0",
+  "version": "1.3.3-beta.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.10.3"
+    "zincjs": "^1.11.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -422,7 +422,7 @@ export default {
           "body proper": 9,
           "Spinal cord": 8,
           "lung": 11,
-          "stomach": 12,
+          "stomach": {number:12, imgURL: 'https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/jpg/0984.jpg'},
           "urinary bladder": 11,
           "Brainstem": 11,
           "heart": 9,

package/src/components/ScaffoldVuer.vue

@@ -287,26 +287,28 @@
         width="128"
         :teleported="false"
         trigger="click"
-        popper-class="background-popper non-selectable"
+        popper-class="background-popper non-selectable h-auto"
         virtual-triggering
       >
         <div>
           <el-row class="backgroundText">Viewing Mode</el-row>
           <el-row class="backgroundControl">
-            <el-select
-              :teleported="false"
-              v-model="viewingMode"
-              placeholder="Select"
-              class="scaffold-select-box viewing-mode"
-              popper-class="scaffold_viewer_dropdown"
-              @change="changeViewingMode"
-            >
-              <el-option v-for="item in viewingModes" :key="item" :label="item" :value="item">
-                <el-row>
-                  <el-col :span="12">{{ item }}</el-col>
-                </el-row>
-              </el-option>
-            </el-select>
+            <div style="margin-bottom: 2px;">
+              <template
+                  v-for="(value, key, index) in viewingModes"
+                  :key="key"
+                >
+                  <template v-if="key === viewingMode">
+                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
+                  </template>
+                  <template v-else>
+                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
+                  </template>
+              </template>
+            </div>
+            <el-row class="viewing-mode-description">
+              {{ viewingModes[viewingMode] }}
+            </el-row>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText"> Change background </el-row>
@@ -564,6 +566,20 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * GroupName to value pair.
+     * The value can be a single number or and object in the following
+     * form:
+     * 
+     * {
+     *  number: Number,
+     *  imgURL: String
+     * }
+     * 
+     * When imgURL is specified, scaffoldvuer will attempt to render
+     * the image in imgURL as marker instead.
+     *
+     */
     markerLabels : {
       type: Object,
       default: function () {
@@ -776,10 +792,10 @@ export default {
       fileFormat: "metadata",
       previousMarkerLabels: markRaw({}),
       viewingMode: "Exploration",
-      viewingModes: [
-        "Annotation",
-        "Exploration",
-      ],
+      viewingModes: {
+        "Exploration": "View and explore detailed visualization of 3D scaffolds",
+        "Annotation": "View internal identifiers of features",
+      },
       openMapRef: undefined,
       backgroundIconRef: undefined,
       userInformation: undefined,
@@ -1863,6 +1879,7 @@ export default {
     },
     /**
      * Callback on viewing mode change
+     * Optional, can be used to update the view mode.
      */
     changeViewingMode: function (modeName) {
       if (this.$module) {
@@ -1922,13 +1939,19 @@ export default {
     /**
      * Set the marker modes for objects with the provided name, mode can
      * be "on", "off" or "inherited".
+     * Value can either be number or an object containing number and 
+     * imgURL.
      */
-    setMarkerModeForObjectsWithName: function (name, number, mode) {
+    setMarkerModeForObjectsWithName: function (name, value, mode) {
       if (name && this.$module.scene) {
+        let options = value;
+        if (typeof value === 'number') {
+          options = { number: value, imgURL: undefined };
+        }
         const rootRegion = this.$module.scene.getRootRegion();
         const groups = [name];
         const objects = findObjectsWithNames(rootRegion, groups, "", true);
-        objects.forEach(object => object.setMarkerMode(mode, { number }));
+        objects.forEach(object => object.setMarkerMode(mode, options));
       }
     },
     /**
@@ -2481,6 +2504,10 @@ export default {
   }
 }
 
+:deep(.background-popper.el-popover.el-popper.h-auto) {
+  height: auto !important;
+}
+
 :deep(.open-map-popper.el-popover.el-popper) {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -2683,15 +2710,38 @@ export default {
   }
 }
 
+.viewing-mode-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $app-primary-color;
+  margin: 8px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.viewing-mode-unselected {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgb(48, 49, 51);
+  margin: 8px;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.viewing-mode-description {
+  font-size: 12px;
+  color: rgb(48, 49, 51);
+  text-align: left;
+  padding-bottom: 4px;
+  margin-left: 8px;
+}
+
 .scaffold-select-box {
   border-radius: 4px;
   border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  &.viewing-mode {
-    width: 150px!important;
-  }
 
   &.speed {
     margin-left: 8px;