@abi-software/scaffoldvuer 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.0.0",
+    "@abi-software/map-utilities": "^1.1.0",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.10.2"
+    "zincjs": "^1.11.1"
   },
   "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,
@@ -646,6 +646,7 @@ export default {
         }
       }
       this.scaffoldRef = this.$refs.scaffold;
+      // this.scaffoldRef.changeViewingMode('Annotation')
     },
     addLinesWithNormal: function (coord, normal) {
       if (coord && normal) {

package/src/components/LinesControls.vue

@@ -97,7 +97,7 @@
 /* eslint-disable no-alert, no-console */
 // This is not in use at this moment, due to
 // limited support to line width
-import { shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   getLineDistance,
   moveAndExtendLine,
@@ -146,26 +146,24 @@ export default {
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
+      zincObject: undefined,
     };
   },
   watch: {
     "createData.faceIndex": {
       handler: function (value) {
-        if (this._zincObject?.isLines2) {
+        if (this.zincObject?.isLines2) {
           this.currentIndex = value;
-          this.distance = getLineDistance(this._zincObject, this.currentIndex);
+          this.distance = getLineDistance(this.zincObject, this.currentIndex);
         }
       },
       immediate: true,
     },
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     changeIndex: function(increment) {
       if (increment) {
-        const dist = getLineDistance(this._zincObject, this.currentIndex + 1);
+        const dist = getLineDistance(this.zincObject, this.currentIndex + 1);
         if (dist > 0) {
           this.currentIndex++;
           this.reset();
@@ -179,7 +177,7 @@ export default {
       if (this.newDistance !== 0) {
         this.distance = this.newDistance;
         this.edited = moveAndExtendLine(
-          this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+          this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
       } else {
         this.newDistance = this.distance;
       }
@@ -187,22 +185,22 @@ export default {
     onLengthSliding: function() {
       this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
       this.edited = moveAndExtendLine(
-        this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+        this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
     },
     onMoveSliding: function() {
       const diff = (this.adjust - this.pAdjust) * this.distance;
       this.edited =  moveAndExtendLine(
-        this._zincObject, this.currentIndex, diff, false) || this.edited;
+        this.zincObject, this.currentIndex, diff, false) || this.edited;
       this.pAdjust = this.adjust;
     },
     reset: function() {
       this.adjust = 0;
       this.pAdjust = 0;
       this.lengthScale = 0;
-      this.distance = getLineDistance(this._zincObject, this.currentIndex);
+      this.distance = getLineDistance(this.zincObject, this.currentIndex);
       this.newDistance = this.distance;
       if (this.edited) {
-        this.$emit("primitivesUpdated", this._zincObject);
+        this.$emit("primitivesUpdated", this.zincObject);
         this.edited = false;
       }
     },
@@ -210,19 +208,19 @@ export default {
       this.currentIndex = -1;
       this.distance = 0;
       if (object.isLines2) {
-        this._zincObject = object;
-        this.width = this._zincObject.getMorph().material.linewidth;
+        this.zincObject = markRaw(object);
+        this.width = this.zincObject.getMorph().material.linewidth;
         if (object.isEditable) {
           this.currentIndex = 0;
           this.distance = getLineDistance(object, this.currentIndex);
         }
       } else {
-        this._zincObject = undefined;
-        this.linewidth = 10;
+        this.zincObject = undefined;
+        this.width = 10;
       }
     },
     modifyWidth: function () {
-      this._zincObject.setWidth(this.width);
+      this.zincObject.setWidth(this.width);
     },
   },
 };

package/src/components/PointsControls.vue

@@ -125,7 +125,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   movePoint,
 } from "../scripts/Utilities.js";
@@ -184,11 +184,9 @@ export default {
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
+      zincObject: undefined,
     };
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   watch: {
     boundingDims: {
       handler: function (value) {
@@ -211,7 +209,7 @@ export default {
   methods: {
     changeIndex: function(increment) {
       if (increment) {
-        if (this._zincObject.drawRange > this.currentIndex + 1) {
+        if (this.zincObject.drawRange > this.currentIndex + 1) {
           this.currentIndex++;
           this.reset();
         }
@@ -226,7 +224,7 @@ export default {
         this.translation[1] - this.pTranslation[1],
         this.translation[2] - this.pTranslation[2],
       ];
-      this.edited = movePoint(this._zincObject, this.currentIndex, diff) || this.edited;
+      this.edited = movePoint(this.zincObject, this.currentIndex, diff) || this.edited;
       for (let i = 0; i < 3; i++) {
         this.pTranslation[i] = this.translation[i];
       }
@@ -235,33 +233,33 @@ export default {
       this.translation = [0, 0, 0];
       this.pTranslation = [0, 0, 0];
       if (this.edited) {
-        this.$emit("primitivesUpdated", this._zincObject);
+        this.$emit("primitivesUpdated", this.zincObject);
         this.edited = false;
       }
     },
     setObject: function (object) {
       this.currentIndex = -1;
       if (object.isPointset) {
-        this._zincObject = object;
-        this.size = this._zincObject.morph.material.size;
-        this.attenuation = this._zincObject.morph.material.sizeAttenuation;
+        this.zincObject = markRaw(object);
+        this.size = this.zincObject.morph.material.size;
+        this.attenuation = this.zincObject.morph.material.sizeAttenuation;
         if (object.isEditable) {
-          if (this._zincObject.drawRange > 0) {
+          if (this.zincObject.drawRange > 0) {
             this.currentIndex = 0;
           }
         }
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.size = 10;
         this.attenuation = false;
       }
     },
     modifyAttenuation: function(flag) {
       this.attenuation = flag;
-      this._zincObject.setSizeAttenuation(flag);
+      this.zincObject.setSizeAttenuation(flag);
     },
     modifySize: function () {
-      this._zincObject.setSize(this.size);
+      this.zincObject.setSize(this.size);
     },
   },
 };

package/src/components/PrimitiveControls.vue

@@ -51,7 +51,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { ref, shallowRef } from 'vue';
+import { markRaw } from 'vue';
 import {
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
@@ -96,6 +96,7 @@ export default {
       drawerOpen: true,
       zincObject: undefined,
       isEditable: false,
+      displayString: "100%"
     };
   },
   methods: {
@@ -108,7 +109,7 @@ export default {
     },
     setObject: function(object) {
       if (object) {
-        this.zincObject = shallowRef(object);
+        this.zincObject = markRaw(object);
       } else {
         this.zincObject = undefined;
       }
@@ -136,7 +137,7 @@ export default {
         }
       }
       if (object && object.getMorph()) {
-        this.material = ref(object.getMorph().material);
+        this.material = object.getMorph().material;
       } else {
         this.material = undefined;
       }

package/src/components/ScaffoldTreeControls.vue

@@ -37,6 +37,7 @@ import {
 } from "../scripts/Utilities.js";
 import { TreeControls } from "@abi-software/map-utilities";
 import "@abi-software/map-utilities/dist/style.css";
+import { markRaw } from "vue";
 
 const nameSorting = (a, b) => {
   const labelA = a.label.toUpperCase();
@@ -74,6 +75,8 @@ export default {
       active: [],
       hover: [],
       drawerOpen: true,
+      nodeNumbers: 0,
+      module: undefined,
     };
   },
   computed: {
@@ -104,7 +107,7 @@ export default {
       parentContainer.sort((a, b) => {
         return nameSorting(a, b);
       });
-      this.__nodeNumbers++;
+      this.nodeNumbers++;
       this.$nextTick(() => {
         const checked =
           this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
@@ -117,8 +120,8 @@ export default {
     // '__r/'
     findOrCreateRegion: function (data, paths, prefix) {
       //check if root region has been set
-      if (this.rootID === undefined && this.$module && this.$module.scene) {
-        this.treeData[0].id = this.$module.scene.getRootRegion().uuid;
+      if (this.module && this.module.scene) {
+        this.treeData[0].id = this.module.scene.getRootRegion().uuid;
         this.treeData[0].isRegion = true;
       }
       if (paths.length > 0) {
@@ -127,7 +130,7 @@ export default {
           (child) => child.label == _paths[0]
         );
         const path = prefix + "/" + paths[0];
-        const region = this.$module.scene
+        const region = this.module.scene
           .getRootRegion()
           .findChildFromPath(path);
         if (!childRegionItem) {
@@ -185,7 +188,7 @@ export default {
           for (let i = 0; i < regionData.children.length; i++) {
             if (regionData.children[i].label === group) {
               regionData.children.splice(i, 1);
-              this.__nodeNumbers--;
+              this.nodeNumbers--;
               return;
             }
           }
@@ -196,7 +199,7 @@ export default {
       const isRegion = node.isRegion;
       const isPrimitives = node.isPrimitives;
       const isChecked = data.checkedKeys.includes(node.id);
-      const region = this.$module.scene
+      const region = this.module.scene
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (isRegion) {
@@ -238,7 +241,7 @@ export default {
      * Select a region by its name.
      */
     changeActiveByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(
         rootRegion,
         names,
@@ -251,7 +254,7 @@ export default {
      * Hover a region by its name.
      */
     changeHoverByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(
         rootRegion,
         names,
@@ -293,7 +296,7 @@ export default {
     clear: function () {
       this.active.length = 0;
       this.hover.length = 0;
-      this.__nodeNumbers = 0;
+      this.nodeNumbers = 0;
       this.$refs.treeControls.$refs.regionTree.updateKeyChildren(
         this.treeData[0].id,
         []
@@ -315,7 +318,7 @@ export default {
       return "#FFFFFF";
     },
     getZincObjectsFromNode: function (node, transverse) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       if (node.isPrimitives) {
         return findObjectsWithNames(
           rootRegion,
@@ -335,14 +338,14 @@ export default {
     },
     //Set this right at the beginning.
     setModule: function (moduleIn) {
-      this.$module = moduleIn;
-      this.__nodeNumbers = 0;
-      const objects = this.$module.scene.getRootRegion().getAllObjects(true);
+      this.module = markRaw(moduleIn);
+      this.nodeNumbers = 0;
+      const objects = this.module.scene.getRootRegion().getAllObjects(true);
       objects.forEach((zincObject) => {
         this.zincObjectAdded(zincObject);
       });
-      this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
-      this.$module.addOrganPartRemovedCallback(this.zincObjectRemoved);
+      this.module.addOrganPartAddedCallback(this.zincObjectAdded);
+      this.module.addOrganPartRemovedCallback(this.zincObjectRemoved);
     },
     setColourField: function (treeData, nodeData = undefined) {
       treeData
@@ -382,7 +385,7 @@ export default {
       }
     },
     visibilityToggle: function (item, event) {
-      this.$module.changeOrganPartsVisibility(item, event);
+      this.module.changeOrganPartsVisibility(item, event);
       if (event == false) {
         if (this.activeRegion === item) {
           this.removeActive(true);
@@ -414,7 +417,7 @@ export default {
         list.splice(index, 1);
         ids.push(node.id);
       }
-      const region = this.$module.scene
+      const region = this.module.scene
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (nodeName && nodeName !== "__r") {
@@ -444,13 +447,13 @@ export default {
     getState: function () {
       let checkedItems =
         this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
-      if (checkedItems.length === this.__nodeNumbers) {
+      if (checkedItems.length === this.nodeNumbers) {
         return { checkAll: true, version: "2.0" };
       } else {
         //We cannot use the generated uuid as the identifier for permastate,
         //convert it back to paths
         let paths = convertUUIDsToFullPaths(
-          this.$module.scene.getRootRegion(),
+          this.module.scene.getRootRegion(),
           checkedItems
         );
         return { checkedItems: paths, version: "2.0" };

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="viewingModeChange"
-            >
-              <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,9 +1879,13 @@ export default {
     },
     /**
      * Callback on viewing mode change
+     * Optional, can be used to update the view mode.
      */
-    viewingModeChange: function () {
+    changeViewingMode: function (modeName) {
       if (this.$module) {
+        if (modeName) {
+          this.viewingMode = modeName
+        }
         if (this.viewingMode === "Annotation") {
           let authenticated = false;
           if (this.userInformation) {
@@ -1919,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));
       }
     },
     /**
@@ -2478,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;
@@ -2680,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;

package/src/components/TextureSlidesControls.vue

@@ -79,6 +79,7 @@ import {
   ElSlider as Slider,
   ElOption as Option,
 } from "element-plus";
+import { markRaw } from 'vue';
 
 /**
  * A component to control the opacity of the target object.
@@ -116,39 +117,37 @@ export default {
           label: "z",
         },
       ],
+      zincObject: undefined,
     };
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     setObject: function (object) {
       if (object.isTextureSlides) {
-        this._zincObject = object;
-        this.settings = this._zincObject.getTextureSettings();
+        this.zincObject = markRaw(object);
+        this.settings = this.zincObject.getTextureSettings();
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.settings = [];
       }
     },
     addNewSlide: function () {
       const newSettings = { direction: "x", value: 0 };
-      const returnSettings = this._zincObject.createSlide(newSettings);
+      const returnSettings = this.zincObject.createSlide(newSettings);
       this.settings.push(returnSettings);
     },
     modifyDirection: function(direction, slide) {
       if (slide) {
         slide.direction = direction;
-        this._zincObject.modifySlideSettings(slide);
+        this.zincObject.modifySlideSettings(slide);
       }
     },
     modifySlide: function (slide) {
       if (slide) {
-        this._zincObject.modifySlideSettings(slide);
+        this.zincObject.modifySlideSettings(slide);
       }
     },
     removeSlide: function (index, slide) {
-      this._zincObject.removeSlideWithId(slide.id);
+      this.zincObject.removeSlideWithId(slide.id);
       this.settings.splice(index, 1);
     },
   },

package/src/components/TransformationControls.vue

@@ -119,6 +119,7 @@ import {
   ElMain as Main,
   ElSlider as Slider,
 } from "element-plus";
+import { markRaw } from "vue";
 
 /**
  * A component to control the opacity of the target object.
@@ -141,6 +142,7 @@ export default {
       scale: 1,
       min: [0, 0, 0],
       max: [1, 1, 1],
+      zincObject: undefined,
     };
   },
   watch: {
@@ -163,14 +165,11 @@ export default {
       deep: true,
     },
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     setObject: function (object) {
       if (object.isZincObject) {
-        this._zincObject = object;
-        const morph = this._zincObject.getGroup();
+        this.zincObject = markRaw(object);
+        const morph = this.zincObject.getGroup();
         if (morph && morph.position) {
           this.x = morph.position.x;
           this.y = morph.position.y;
@@ -178,7 +177,7 @@ export default {
           this.scale = morph.scale.x;
         }
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.x = 0;
         this.y = 0;
         this.z = 0;
@@ -186,10 +185,10 @@ export default {
       }
     },
     modifyPosition: function() {
-      this._zincObject.setPosition(this.x, this.y, this.z);
+      this.zincObject.setPosition(this.x, this.y, this.z);
     },
     modifyScale: function() {
-      this._zincObject.setScaleAll(this.scale);
+      this.zincObject.setScaleAll(this.scale);
     },
   },
 };