@abi-software/scaffoldvuer 1.11.0-beta.4 → 1.11.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.0-beta.4",
+  "version": "1.11.0-beta.5",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/LinesControls.vue

@@ -1,32 +1,90 @@
 <template>
   <el-container class="lines-container">
     <el-main class="slides-block">
-      <el-row>
-        <el-col :offset="0" :span="6">
-          Width:
-        </el-col>
-        <el-col :offset="0" :span="12">
-          <el-slider
-            v-model="width"
-            class="my-slider"
-            :step="1"
-            :min="1"
-            :max="100"
-            :show-tooltip="false"
-            @input="modifyWidth"
-          />
-        </el-col>
-        <el-col :offset="0" :span="4">
-          <el-input-number
-            v-model="width"
-            :step="1"
-            :min="1"
-            :max="100"
-            :controls="false"
-            class="input-box number-input"
-          />
-        </el-col>
-      </el-row>
+      <template v-if="isTubeLines">
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Radius:
+          </el-col>
+          <el-col :offset="0" :span="12">
+            <el-slider
+              v-model="radius"
+              class="my-slider"
+              :step="1"
+              :min="1"
+              :max="32"
+              :show-tooltip="false"
+              @input="modifyTubeLines"
+            />
+          </el-col>
+          <el-col :offset="0" :span="4">
+            <el-input-number
+              v-model="radius"
+              :step="1"
+              :min="1"
+              :max="32"
+              :controls="false"
+              @change="modifyTubeLines"
+              class="input-box number-input"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Radial Segments:
+          </el-col>
+          <el-col :offset="0" :span="12">
+            <el-slider
+              v-model="radialSegments"
+              class="my-slider"
+              :step="1"
+              :min="8"
+              :max="32"
+              :show-tooltip="false"
+              @input="modifyTubeLines"
+            />
+          </el-col>
+          <el-col :offset="0" :span="4">
+            <el-input-number
+              v-model="radialSegments"
+              :step="1"
+              :min="8"
+              :max="32"
+              :controls="false"
+              @change="modifyTubeLines"
+              class="input-box number-input"
+            />
+          </el-col>
+        </el-row>
+      </template>
+      <template v-else>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Width:
+          </el-col>
+          <el-col :offset="0" :span="12">
+            <el-slider
+              v-model="width"
+              class="my-slider"
+              :step="1"
+              :min="1"
+              :max="100"
+              :show-tooltip="false"
+              @input="modifyWidth"
+            />
+          </el-col>
+          <el-col :offset="0" :span="4">
+            <el-input-number
+              v-model="width"
+              :step="1"
+              :min="1"
+              :max="100"
+              :controls="false"
+              class="input-box number-input"
+            />
+          </el-col>
+        </el-row>
+      </template>
       <template v-if="currentIndex > -1 && distance > 0">
         <el-row>
           <el-col :offset="0" :span="4">
@@ -114,6 +172,13 @@ import{
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
+
+const NERVE_CONFIG = {
+  COLOUR: '#FE0000',
+  RADIUS: 8,
+  RADIAL_SEGMENTS: 32,
+}
+
 /**
  * A component to control the opacity of the target object.
  */
@@ -142,11 +207,14 @@ export default {
       distance: 0,
       newDistance: 0, 
       width: 1,
+      radius: NERVE_CONFIG.RADIUS,
+      radialSegments: NERVE_CONFIG.RADIAL_SEGMENTS,
       currentIndex: 0,
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
       zincObject: undefined,
+      isTubeLines: false,
     };
   },
   watch: {
@@ -207,9 +275,11 @@ export default {
     setObject: function (object) {
       this.currentIndex = -1;
       this.distance = 0;
-      if (object.isLines2) {
+      this.radius = NERVE_CONFIG.RADIUS;
+      if (object.isLines2 || object.isTubeLines) {
         this.zincObject = markRaw(object);
         this.width = this.zincObject.getMorph().material.linewidth;
+        this.isTubeLines = object.isTubeLines;
         if (object.isEditable) {
           this.currentIndex = 0;
           this.distance = getLineDistance(object, this.currentIndex);
@@ -222,6 +292,9 @@ export default {
     modifyWidth: function () {
       this.zincObject.setWidth(this.width);
     },
+    modifyTubeLines: function () {
+      this.zincObject.setTubeLines(this.radius, this.radius * this.radialSegments);
+    },
   },
 };
 </script>

package/src/components/PrimitiveControls.vue

@@ -139,7 +139,7 @@ export default {
           this.isPointset = true;
           this.$refs.pointsetControls.setObject(object);
           this.activeName = "pControls";
-        } else if (object.isLines2) {
+        } else if (object.isLines2 || object.isTubeLines) {
           this.isLines = true;
           this.$refs.linesControls.setObject(object);
           this.activeName = "lControls";

package/src/components/ScaffoldTreeControls.vue

@@ -368,6 +368,19 @@ export default {
       }
       return "#FFFFFF";
     },
+    getNodeDataByRegionAndGroup: function (regin, group) {
+      for (const treeRegion of this.treeDataEntry) {
+        if (treeRegion.isRegion && treeRegion.label === regin) {
+          const treeGroups = treeRegion.children;
+          for (const treeGroup of treeGroups) {
+            if (treeGroup.isPrimitives && treeGroup.label === group) {
+              return treeGroup;
+            }
+          }
+        }
+      }
+      return undefined;
+    },
     getZincObjectsFromNode: function (node, transverse) {
       const rootRegion = this.module.scene.getRootRegion();
       if (node.isPrimitives) {

package/src/components/ScaffoldVuer.vue

@@ -462,6 +462,20 @@ import { getNerveMaps } from "../scripts/MappedNerves.js";
 const nervesMap = getNerveMaps();
 let totalNerves = 0, foundNerves = 0;
 
+// This will be the config for selected nerves
+const NERVE_CONFIG = {
+  COLOUR: '#FE0000',
+  RADIUS: 8,
+  RADIAL_SEGMENTS: 32,
+}
+
+const haveSameElements = (arr1, arr2) => {
+  if (arr1.length !== arr2.length) return false;
+  return arr1.sort().every((value, index) => {
+    return value === arr2.sort()[index]
+  });
+}
+
 /**
  * A vue component of the scaffold viewer.
  *
@@ -891,6 +905,8 @@ export default {
         isSearch: false,
       }),
       //checkedRegions: []
+      previousNerves: [],
+      sidebarSearch: false
     };
   },
   watch: {
@@ -981,6 +997,17 @@ export default {
       }
       this.previousMarkerLabels = markRaw({...labels});
     },
+    previousNerves: {
+      handler: function (newVal, oldVal) {
+        if (!this.sidebarSearch) {
+          const pre = oldVal.map((nerve) => nerve.groupName);
+          const cur = newVal.map((nerve) => nerve.groupName);
+          if (haveSameElements(pre, cur)) return;
+          this.handleNervesDisplay(oldVal)
+          this.handleNervesDisplay(newVal, NERVE_CONFIG.COLOUR)
+        }
+      },
+    },
   },
   beforeCreate: function () {
     this.$module = new OrgansViewer();
@@ -1038,45 +1065,68 @@ export default {
     },
   },
   methods: {
+    /**
+     * 
+     * @param nerves list of nerves to be selected
+     * @param colour with colour to modify the nerves display, if not provided, reset to default
+     */
+    handleNervesDisplay: function (nerves, colour) {
+      nerves.forEach((nerve) => {
+        if (nerve.isTubeLines) {
+          const regionName = nerve.region.getName();
+          const groupName = nerve.groupName;
+          const nodeData = this.$refs.scaffoldTreeControls.getNodeDataByRegionAndGroup(regionName, groupName)
+          const activeColour = nodeData.activeColour.toLowerCase();
+          const defaultColour = nodeData.defaultColour.toLowerCase();
+          const configColour = NERVE_CONFIG.COLOUR.toLowerCase();
+          // if the active colour is the default or config colour
+          // use the provided colour or default depends on whether the colour is provided
+          // otherwise, use the active colour
+          const usedColour =
+            activeColour === defaultColour || activeColour === configColour
+              ? colour || defaultColour
+              : activeColour;
+          this.$refs.scaffoldTreeControls.setColour(nodeData, usedColour)
+          const radius = colour ? NERVE_CONFIG.RADIUS : 1;
+          const radialSegments = NERVE_CONFIG.RADIAL_SEGMENTS;
+          nerve.setTubeLines(radius, radialSegments);
+        }
+      })
+    },
     /*
     setCheckedRegions: function (data) {
       this.checkedRegions = data;
     },
     */
     /**
-     *
+     * 
      * @param nerves array of nerve names, show all nerves if empty
      * @param processed boolean, whether unselect all checkboxes
      */
     zoomToNerves: function (nerves, processed = false) {
       if (this.$module.scene) {
+        this.sidebarSearch = processed;
         const nervesList = [];
-        let nervesUUID = undefined;
         const regions = this.$module.scene.getRootRegion().getChildRegions();
         regions.forEach((region) => {
           const regionName = region.getName();
-          if (processed) {
-            if (regionName === 'Nerves') {
-              if (nerves.length) {
-                const ids = nerves.forEach((nerve) => {
-                  const primitives = this.findObjectsWithGroupName(nerve)
-                  nervesList.push(...primitives);
-                  primitives.forEach((primitive) => {
-                    primitive.setVisibility(true);
-                    nervesList.push(primitive);
-                    if (!nervesUUID) nervesUUID = primitive.region.uuid;
-                  });
-                });
-              }
+          if (regionName === 'Nerves') {
+            if (processed) {
+              nerves.forEach((nerve) => {
+                const primitives = this.findObjectsWithGroupName(nerve);
+                nervesList.push(...primitives);
+              });
             }
           }
         });
-        if (nervesList.length) {
-          let box = this.$module.scene.getBoundingBoxOfZincObjects(nervesList);
-          if (box) this.$module.scene.viewAllWithBoundingBox(box);
-        }
-        if (nervesUUID) {
-          this.$refs.scaffoldTreeControls.setCheckedKeys([nervesUUID], false);
+        const box = nervesList.length ? 
+          this.$module.scene.getBoundingBoxOfZincObjects(nervesList) : 
+          this.$module.scene.getBoundingBox();
+        this.handleNervesDisplay(this.previousNerves);
+        this.handleNervesDisplay(nervesList, NERVE_CONFIG.COLOUR);
+        this.previousNerves = nervesList;
+        if (box) {
+          this.$module.scene.viewAllWithBoundingBox(box);
         }
       }
 
@@ -1114,7 +1164,7 @@ export default {
               idsList.push(region.uuid);
             }
           }
-
+          
         });
         if (nerves.length) {
           this.fitWindow();
@@ -1780,16 +1830,23 @@ export default {
                 this.$refs.scaffoldTreeControls.removeActive(false);
               }
             }
+            if (!this.sidebarSearch) {
+              this.previousNerves = zincObjects;
+            }
             //Store the following for state saving. Search will handle the case with more than 1
             //identifiers.
             if (event.identifiers.length === 1) {
-              this.lastSelected.isSearch = false;
-              this.lastSelected.region = regionPath;
-              this.lastSelected.group = event.identifiers[0].data.group;
+              this.lastSelected = {
+                isSearch: false,
+                region: regionPath,
+                group: event.identifiers[0].data.group,
+              }
             } else if (event.identifiers.length === 0) {
-              this.lastSelected.isSearch = false;
-              this.lastSelected.region = "";
-              this.lastSelected.group = "";
+              this.lastSelected = {
+                isSearch: false,
+                region: "",
+                group: "",
+              }
             }
             /**
              * Emit when an object is selected
@@ -1893,6 +1950,9 @@ export default {
      * is made
      */
     objectSelected: function (objects, propagate) {
+      if (!this.sidebarSearch) {
+        this.previousNerves = objects;
+      }
       this.updatePrimitiveControls(objects);
       this.$module.setSelectedByZincObjects(objects, undefined, {}, propagate);
     },
@@ -2249,9 +2309,7 @@ export default {
           this.activeDrawMode = undefined;
           this.createData.shape = "";
         } else if (this.viewingMode === "Neuron Connection") {
-          // TODO: to review
-          // enable to make organs and nerves clickable and searchable for neuron connection mode
-          // nonNervesIsPickable = false;
+          nonNervesIsPickable = false;
         }
         if ((this.viewingMode === "Exploration") ||
           (this.viewingMode === "Annotation") &&
@@ -2299,7 +2357,7 @@ export default {
       });
     },
     /**
-     *
+     * 
      * @param flag boolean
      * @param nerves array of nerve names
      */
@@ -2325,7 +2383,7 @@ export default {
      */
     setColour: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-        typeof flag === "boolean" &&
+        typeof flag === "boolean" && 
         (forced || flag !== this.colourRadio)) {
         this.loading = true;
         //This can take sometime to finish , nextTick does not bring out
@@ -2336,7 +2394,7 @@ export default {
           this.colourRadio = flag;
         }, 100);
       }
-    },
+    }, 
     /**
      * @public
      * Function to toggle lines graphics.
@@ -2345,7 +2403,7 @@ export default {
      */
      setOutlines: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-        typeof flag === "boolean" &&
+        typeof flag === "boolean" && 
         (forced || flag !== this.outlinesRadio)) {
         this.outlinesRadio = flag;
         this.$nextTick(() => this.$refs.scaffoldTreeControls.setOutlines(flag));
@@ -2422,15 +2480,19 @@ export default {
         if (text === undefined || text === "" ||
           ((Array.isArray(text) && text.length === 0))
         ) {
-          this.lastSelected.region = "";
-          this.lastSelected.group = "";
-          this.lastSelected.isSearch = true;
+          this.lastSelected = {
+            region: "",
+            group: "",
+            isSearch: true,
+          }
           this.objectSelected([], true);
           return false;
         } else {
-          this.lastSelected.region = "";
-          this.lastSelected.group = text;
-          this.lastSelected.isSearch = true;
+          this.lastSelected = {
+            region: "",
+            group: text,
+            isSearch: true,
+          }
           const result = this.$_searchIndex.searchAndProcessResult(text);
           const zincObjects = result.zincObjects;
           if (zincObjects.length > 0) {
@@ -2517,7 +2579,7 @@ export default {
         if (options.offlineAnnotations) {
           sessionStorage.setItem('anonymous-annotation', options.offlineAnnotations);
         }
-        if ("outlines" in options) {
+        if ("outlines" in options) { 
           this.setOutlines(options.outlines);
         }
         if (options.viewingMode) {

package/src/scripts/GraphicsHighlight.js

@@ -1,4 +1,5 @@
 import { THREE } from 'zincjs';
+import { objectsToZincObjects } from "./Utilities";
 
 const setEmissiveColour = (fullList, colour, setDepthFunc) => {
   for (let i = 0; i < fullList.length; i++) {
@@ -118,10 +119,12 @@ const GraphicsHighlight = function() {
 
   this.setHighlighted = function(objects) {
     const previousHighlightedObjects = [...currentHighlightedObjects];
+    this.setNervesRadius(previousHighlightedObjects, 1, 4);
     _this.resetHighlighted();
     // Selected object cannot be highlighted
     const array = getUnmatchingObjects(objects, currentSelectedObjects);
     const fullList = getFullListOfObjects(array);
+    this.setNervesRadius(array, 6, 24);
     setEmissiveColour(fullList, _this.highlightColour, false);
     currentHighlightedObjects = array;
     return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
@@ -147,10 +150,23 @@ const GraphicsHighlight = function() {
     }
     return _temp2;
   }
+
+  this.setNervesRadius = function(target, radius, radialSegments) {
+    const currentObjects = objectsToZincObjects(target);
+    if (currentObjects && currentObjects.length) {
+      currentObjects.forEach((currentObject) => {
+        console.log(currentObject)
+        if (currentObject.isTubeLines && currentObject.userData?.isNerves) {
+          currentObject.setTubeLines(radius, radialSegments);
+        } 
+      });
+    }
+  }
   
   this.resetHighlighted = function() {
     const fullList = getFullListOfObjects(currentHighlightedObjects);
     setEmissiveColour(fullList, _this.originalColour, true);
+    this.setNervesRadius(currentHighlightedObjects, 1, 4);
     currentHighlightedObjects = [];
   }
   

package/src/scripts/RendererModule.js

@@ -4,6 +4,7 @@ const THREE = Zinc.THREE;
 import { BaseModule } from './BaseModule';
 import { EVENT_TYPE } from "./EventNotifier";
 import GraphicsHighlight from "./GraphicsHighlight";
+import { objectsToZincObjects } from "./Utilities";
 
 /**
  * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
@@ -112,8 +113,8 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
 
 RendererModule.prototype.setHighlightedByObjects = function(
   objects, coords, extraData, propagateChanges) {
+  const zincObjects = objectsToZincObjects(objects);
   const changed = this.graphicsHighlight.setHighlighted(objects);
-  const zincObjects = this.objectsToZincObjects(objects);
   if (propagateChanges) {
     let eventType = EVENT_TYPE.MOVE;
     if (changed)
@@ -162,24 +163,6 @@ RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
   }
 }
 
-RendererModule.prototype.objectsToZincObjects = function(objects) {
-  const zincObjects = [];
-  for (let i = 0; i < objects.length; i++) {
-    let zincObject = objects[i].userData;
-    if (zincObject) {
-      if (zincObject.isGlyph || zincObject.isGlyphset) {
-        let glyphset = zincObject;
-        if (zincObject.isGlyph)
-          glyphset = zincObject.getGlyphset();
-        zincObjects.push(glyphset);
-      } else {
-        zincObjects.push(zincObject);
-      }
-    }
-  }
-  return zincObjects;
-}
-
 
 RendererModule.prototype.setSelectedByObjects = function(
   objects, coords, extraData, propagateChanges) {
@@ -190,7 +173,7 @@ RendererModule.prototype.setSelectedByObjects = function(
     changed = true;
   }
   if (changed || this.ignorePreviousSelected) {
-    const zincObjects = this.objectsToZincObjects(objects);
+    const zincObjects = objectsToZincObjects(objects);
     if (this.selectObjectOnPick) {
       this.setupLiveCoordinates(zincObjects);
     }

package/src/scripts/Utilities.js

@@ -409,3 +409,20 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
   }
 }
 
+export const objectsToZincObjects = function(objects) {
+  const zincObjects = [];
+  for (let i = 0; i < objects.length; i++) {
+    let zincObject = objects[i].userData;
+    if (zincObject) {
+      if (zincObject.isGlyph || zincObject.isGlyphset) {
+        let glyphset = zincObject;
+        if (zincObject.isGlyph)
+          glyphset = zincObject.getGlyphset();
+        zincObjects.push(glyphset);
+      } else {
+        zincObjects.push(zincObject);
+      }
+    }
+  }
+  return zincObjects;
+}

package/vite.web-component.js

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import rootConfig from './vite.config.js'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import vue from '@vitejs/plugin-vue'
+
+// defineWorkspace provides a nice type hinting DX
+export default defineConfig((configEnv) => {
+  const config = rootConfig(configEnv);
+  config.css.extract = false
+  config.plugins.push(
+    nodePolyfills({
+      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
+      include: ['path']
+    })
+  );
+ // config.plugins.push(
+ //   cssInjectedByJsPlugin()
+ // );
+  config.plugins[0] = vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.includes('scaffoldvuer-wc')
+      }
+    }
+  }),
+  config.build = {
+    lib: {
+      entry: './src/ScaffoldVuer-wc.js',
+      name: 'scaffoldvuer-wc',
+      // the proper extensions will be added
+      fileName: 'scaffoldvuer-wc'
+    },
+  }
+
+  return config;
+})