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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.10.0",
+  "version": "1.11.0-demo.1",
   "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.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/components/ScaffoldTooltip.vue

@@ -218,7 +218,7 @@ export default {
     border-radius: 4px;
     white-space: nowrap;
     min-width: unset!important;
-    max-width:330px;
+    max-width:fit-content;
     width:unset!important;
     pointer-events: none;
     top: -15px !important;

package/src/components/ScaffoldTreeControls.vue

@@ -77,6 +77,7 @@ export default {
       drawerOpen: true,
       nodeNumbers: 0,
       module: undefined,
+      checkedRegions: [],
     };
   },
   computed: {
@@ -91,6 +92,16 @@ export default {
         if (this.isReady) {
           // Updated colour when scaffold is ready
           this.setColourField(data);
+          // _helper is unchecked by default
+          this.checkedRegions = data.filter(region => region.label !== '_helper');
+        }
+      },
+    },
+    checkedRegions: {
+      deep: true,
+      handler: function (data) {
+        if (this.isReady) {
+          this.$emit('checked-regions', data)
         }
       },
     },
@@ -221,7 +232,13 @@ export default {
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (isRegion) {
-        isChecked ? region.showAllPrimitives() : region.hideAllPrimitives();
+        if (isChecked) {
+          region.showAllPrimitives();
+          this.checkedRegions.push(node);
+        } else {
+          region.hideAllPrimitives();
+          this.checkedRegions = this.checkedRegions.filter(region => region.label !== node.label);
+        }
       }
       if (isPrimitives) {
         const primitives = region.findObjectsWithGroupName(node.label);
@@ -514,13 +531,28 @@ export default {
         });
       }
     },
-    checkAllKeys: function () {
+    setCheckedKeys: function (ids, clear) {
+      this.$nextTick(() => {
+        if (clear) {
+          this.$refs.treeControls.$refs.regionTree.setCheckedKeys([]); // Clear previous checked keys
+        }
+        // this will be faster as it only requires region node ids only
+        // the number will be much less than all node ids
+        ids.forEach((id) => {
+          this.$refs.treeControls.$refs.regionTree.setChecked(id, true, true); // Set new checked keys
+        })
+      });
+    },
+    checkAllKeys: function (ignore = []) {
       const keysList = [];
       const ids = [];
       extractAllFullPaths(this.treeData[0], keysList);
+      const modifiedKeysList = keysList.filter((key) => {
+        return !ignore.some(item => key.includes(item));
+      });
       this.setTreeVisibilityWithFullPaths(
         this.treeData[0],
-        keysList,
+        modifiedKeysList,
         ids,
         true
       );

package/src/components/ScaffoldVuer.vue

@@ -104,11 +104,13 @@
             @object-selected="objectSelected"
             @object-hovered="objectHovered"
             @drawer-toggled="drawerToggled"
+            @checked-regions="setCheckedRegions"
           />
         </template>
       </el-popover>
       <div class="primitive-controls-box">
         <primitive-controls
+          v-if="viewingMode === 'Exploration'"
           ref="primitiveControls"
           :createData="createData"
           @primitivesUpdated="primitivesUpdated"
@@ -323,7 +325,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 +337,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 +439,6 @@ import {
   findObjectsWithNames,
   updateBoundingBox,
 } from "../scripts/Utilities.js";
-
 import {
   ElButton as Button,
   ElCol as Col,
@@ -458,6 +459,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.
@@ -885,7 +889,8 @@ export default {
         region: "",
         group: "",
         isSearch: false,
-      })
+      }),
+      checkedRegions: []
     };
   },
   watch: {
@@ -1033,6 +1038,43 @@ export default {
     },
   },
   methods: {
+    setCheckedRegions: function (data) {
+      this.checkedRegions = data;
+    },
+    zoomToNerves: function (nerves, processed = false) {
+      if (this.$module.scene) {
+        const idsList = [];
+        const regions = this.$module.scene.getRootRegion().getChildRegions();
+        regions.forEach((region) => {
+          const regionName = region.getName();
+          if (processed) {
+            region.hideAllPrimitives();
+            if (regionName === 'Nerves') {
+              const ids = nerves.reduce((acc, nerve) => {
+                const primitive = this.findObjectsWithGroupName(nerve)
+                const ids = primitive.map((object) => {
+                  object.setVisibility(true);
+                  return `${object.region.uuid}/${object.uuid}`;
+                });
+                acc.push(...ids);
+                return acc;
+              }, []);
+              idsList.push(...ids)
+            }
+          } else {
+            // if the checkboxes are checked previously, restore them
+            const isChecked = this.checkedRegions.find(item => item.label === regionName);
+            if (isChecked) {
+              region.showAllPrimitives();
+              const zincObjects = region.getAllObjects();
+              const ids = zincObjects.map(object => object.region.uuid);
+              idsList.push(...ids);
+            }
+          }
+        });
+        this.$refs.scaffoldTreeControls.setCheckedKeys([...new Set(idsList)], processed);
+      }
+    },
     enableAxisDisplay: function (enable, miniaxes) {
       if (this.$module.scene) {
         this.$module.scene.enableAxisDisplay(enable, miniaxes);
@@ -1071,11 +1113,19 @@ export default {
         const regionPath = zincObject.getRegion().getFullPath().toLowerCase();
         for (let i = 0; i < regions.length; i++) {
           if (regionPath.includes(regions[i].toLowerCase())) {
+            totalNerves++;
             zincObject.userData.isNerves = true;
+            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
@@ -1779,11 +1829,13 @@ export default {
      * @arg objects objects to be set for the selected
      */
     updatePrimitiveControls: function (objects) {
-      this.selectedObjects = objects;
-      if (this.selectedObjects && this.selectedObjects.length > 0) {
-        this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
-      } else {
-        this.$refs.primitiveControls.setObject(undefined);
+      if (this.viewingMode === 'Exploration') {
+        this.selectedObjects = objects;
+        if (this.selectedObjects && this.selectedObjects.length > 0) {
+          this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
+        } else {
+          this.$refs.primitiveControls.setObject(undefined);
+        }
       }
     },
     /**
@@ -2183,24 +2235,40 @@ export default {
       this.tData.visible = false;
       this.tData.region = undefined;
     },
+    /**
+     * 
+     * @param flag boolean
+     * @param nerves array of nerve names
+     */
+    setGreyScale: function (flag, nerves = []) {
+      const objects = this.$module.scene.getRootRegion().getAllObjects(true);
+      objects.forEach((zincObject) => {
+        if (nerves.length) {
+          const groupName = zincObject.groupName.toLowerCase();
+          if (zincObject.userData.isNerves) {
+            if (!nerves.includes(groupName)) zincObject.setGreyScale(flag);
+          }
+        } else {
+          if (!zincObject.userData.isNerves) zincObject.setGreyScale(flag);
+        }
+      });
+      this.$refs.scaffoldTreeControls.updateAllNodeColours();
+    },
     /**
      * @public
      * Function to toggle colour/greyscale of primitives.
      * The parameter ``flag`` is a boolean, ``true`` (colour) and ``false`` (greyscale).
      * @arg {Boolean} `flag`
      */
-     setColour: function (flag) {
+    setColour: function (flag, forced = false) {
       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.
         setTimeout(() => {
-          const objects = this.$module.scene.getRootRegion().getAllObjects(true);
-          objects.forEach((zincObject) => {
-            if (!zincObject.userData.isNerves) zincObject.setGreyScale(!flag);
-          });
-          this.$refs.scaffoldTreeControls.updateAllNodeColours();
+          this.setGreyScale(!flag)
           this.loading = false;
           this.colourRadio = flag;
         }, 100);
@@ -2212,9 +2280,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 +2500,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");