@abi-software/scaffoldvuer 1.10.0 → 1.11.0-demo.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.10.0",
+  "version": "1.11.0-demo.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -54,7 +54,7 @@
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.14.0"
+    "zincjs": "^1.14.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/components/ScaffoldTooltip.vue

@@ -87,6 +87,10 @@ export default {
     Tooltip,
   },
   props: {
+    clientHeight: {
+      type: Number,
+      default: 200,
+    },
     createData: {
       type: Object,
       default: {
@@ -146,12 +150,14 @@ export default {
   computed: {
     ...mapState(useMainStore,  ['userToken']),
     position: function () {
-      let yOffset = 40;
+      let yOffset = 20;
       if (this.region) {
-        yOffset = 55;
+        yOffset = 35;
       }
-      const x = this.x - 40;
-      return { left: x + "px", top: this.y - yOffset + "px" };
+      const x = this.x - 100;
+      const bottom = this.clientHeight - (this.y - yOffset);
+      return { left: x + "px", bottom: (bottom >= 0) ? `${bottom}px` : '0px'
+      };
     },
   },
   methods: {
@@ -216,9 +222,8 @@ export default {
     background-color: #fff;
     border: 1px solid $app-primary-color;
     border-radius: 4px;
-    white-space: nowrap;
-    min-width: unset!important;
-    max-width:330px;
+    min-width: 250px!important;
+    max-width:500px;
     width:unset!important;
     pointer-events: none;
     top: -15px !important;
@@ -230,9 +235,13 @@ export default {
   }
 
   .tooltip-text {
+    word-wrap: normal;
     text-align: center;
     color: $app-primary-color;
   }
+  .tooltip-text + .tooltip-text {
+    border-top: 1px solid $app-primary-color;
+  }
 
   :deep(.non-selectable) {
     user-select: none;

package/src/components/ScaffoldVuer.vue

@@ -8,6 +8,7 @@
   >
     <map-svg-sprite-color />
     <scaffold-tooltip
+      :clientHeight="clientHeight"
       :createData="createData"
       :label="tData.label"
       :region="tData.region"
@@ -323,7 +324,7 @@
             <el-radio-group
               v-model="colourRadio"
               class="scaffold-radio"
-              @change="setColour"
+              @change="setColour(colourRadio, true)"
             >
               <el-radio :value="true">Colour</el-radio>
               <el-radio :value="false">Greyscale</el-radio>
@@ -335,7 +336,7 @@
             <el-radio-group
               v-model="outlinesRadio"
               class="scaffold-radio"
-              @change="setOutlines"
+              @change="setOutlines(outlinesRadio, true)"
             >
               <el-radio :value="true">Show</el-radio>
               <el-radio :value="false">Hide</el-radio>
@@ -437,7 +438,6 @@ import {
   findObjectsWithNames,
   updateBoundingBox,
 } from "../scripts/Utilities.js";
-
 import {
   ElButton as Button,
   ElCol as Col,
@@ -458,6 +458,9 @@ import { OrgansViewer } from "../scripts/OrgansRenderer.js";
 import { SearchIndex } from "../scripts/Search.js";
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
+import { getNerveMaps } from "../scripts/MappedNerves.js";
+const nervesMap = getNerveMaps();
+let totalNerves = 0, foundNerves = 0;
 
 /**
  * A vue component of the scaffold viewer.
@@ -677,7 +680,7 @@ export default {
     isNerves: {
       type: Object,
       default: {
-        regions: ["nerves"]
+        regions: ["nerves", "Spinal nerves"]
       },
     },
     /**
@@ -769,6 +772,7 @@ export default {
   data: function () {
     return {
       annotator: undefined,
+      clientHeight: 200,
       colourRadio: true,
       createData: {
         drawingBox: false,
@@ -1069,13 +1073,23 @@ export default {
       const regions = this.isNerves?.regions;
       if (regions) {
         const regionPath = zincObject.getRegion().getFullPath().toLowerCase();
-        for (let i = 0; i < regions.length; i++) {
+        let searching = true;
+        for (let i = 0; i < regions.length && searching; i++) {
           if (regionPath.includes(regions[i].toLowerCase())) {
+            totalNerves++;
             zincObject.userData.isNerves = true;
+            searching = false;
+            const groupName = zincObject.groupName.toLowerCase();
+            if (groupName in nervesMap) {
+              foundNerves++;
+              zincObject.setAnatomicalId(nervesMap[groupName]);
+              console.log(groupName, zincObject.anatomicalId, zincObject.uuid)
+            }
           } else {
             zincObject.userData.isNerves = false;
           }
         }
+
       }
       /**
        * Emit when a new object is added to the scene
@@ -2189,9 +2203,11 @@ export default {
      * The parameter ``flag`` is a boolean, ``true`` (colour) and ``false`` (greyscale).
      * @arg {Boolean} `flag`
      */
-     setColour: function (flag) {
+     setColour: function (flag, forced = false) {
+      console.log(flag, this.colourRadio)
       if (this.isReady && this.$module.scene &&
-      typeof flag === "boolean" && flag !== this.colourRadio) {
+        typeof flag === "boolean" && 
+        (forced || flag !== this.colourRadio)) {
         this.loading = true;
         //This can take sometime to finish , nextTick does not bring out
         //the loading screen so I opt for timeout loop here.
@@ -2212,9 +2228,10 @@ export default {
      * The parameter ``flag`` is a boolean, ``true`` to show lines, ``false`` to hide them.
      * @arg {Boolean} `flag`
      */
-     setOutlines: function (flag) {
+     setOutlines: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-      typeof flag === "boolean" && flag !== this.outlinesRadio) {
+        typeof flag === "boolean" && 
+        (forced || flag !== this.outlinesRadio)) {
         this.outlinesRadio = flag;
         this.$nextTick(() => this.$refs.scaffoldTreeControls.setOutlines(flag));
       }
@@ -2431,6 +2448,7 @@ export default {
         //this.$module.scene.createAxisDisplay(false);
         //this.$module.scene.enableAxisDisplay(true, true);
         this.isReady = true;
+        console.log(`Total ${totalNerves}, found ${foundNerves}`);
         this.$nextTick(() => {
           this.restoreSettings(options);
           this.$emit("on-ready");
@@ -2642,6 +2660,7 @@ export default {
     adjustLayout: function () {
       if (this.$refs.scaffoldContainer) {
         let width = this.$refs.scaffoldContainer.clientWidth;
+        this.clientHeight = this.$refs.scaffoldContainer.clientHeight;
         this.minimisedSlider = width < 812;
         if (this.minimisedSlider) {
           this.sliderPosition = this.drawerOpen ? "right" : "left";