@abi-software/scaffoldvuer 1.2.1 → 1.3.0

package/src/components/TransformationControls.vue

@@ -1,46 +1,81 @@
 <template>
   <el-container class="transformation-container">
     <el-main class="slides-block">
-      <el-row>
-        <el-col :offset="0" :span="8">
-          Position:
-        </el-col>
-      </el-row>
-      <el-row class="">
-        <el-col :offset="3" :span="1">
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
           x:
         </el-col>
-        <el-col :span="3">
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="x"
+            :step="0.01"
+            :min="min[0]"
+            :max="max[0]"
+            :show-tooltip="false"
+            @input="modifyPosition()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="x"
-            :step="1"
+            :step="0.01"
+            :min="min[0]"
+            :max="max[0]"
             :controls="false"
             class="input-box number-input"
-            @change="modifyPosition"
+            @change="modifyPosition()"
           />
         </el-col>
-        <el-col :offset="3" :span="1">
+      </el-row>
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
           y:
         </el-col>
-        <el-col :span="3">
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="y"
+            :step="0.01"
+            :min="min[1]"
+            :max="max[1]"
+            :show-tooltip="false"
+            @input="modifyPosition()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="y"
-            :step="1"
+            :step="0.01"
+            :min="min[1]"
+            :max="max[1]"
             :controls="false"
             class="input-box number-input"
-            @change="modifyPosition"
+            @change="modifyPosition()"
           />
         </el-col>
-        <el-col :offset="3" :span="1">
+      </el-row>
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
           z:
         </el-col>
-        <el-col :span="3">
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="z"
+            :step="0.01"
+            :min="min[2]"
+            :max="max[2]"
+            :show-tooltip="false"
+            @input="modifyPosition()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="z"
-            :step="1"
+            :step="0.01"
+            :min="min[2]"
+            :max="max[2]"
             :controls="false"
             class="input-box number-input"
-            @change="modifyPosition"
+            @change="modifyPosition()"
           />
         </el-col>
       </el-row>
@@ -82,6 +117,7 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
+  ElSlider as Slider,
 } from "element-plus";
 
 /**
@@ -94,15 +130,39 @@ export default {
     Container,
     InputNumber,
     Main,
+    Slider,
   },
+  inject: ['boundingDims'],
   data: function () {
     return {
       x: 0,
       y: 0,
       z: 0,
       scale: 1,
+      min: [0, 0, 0],
+      max: [1, 1, 1],
     };
   },
+  watch: {
+    boundingDims: {
+      handler: function (value) {
+        const centre = value.centre;
+        const size = value.size;
+        this.min = [
+          centre[0] - size[0],
+          centre[1] - size[1],
+          centre[2] - size[2]
+        ];
+        this.max = [
+          centre[0] + size[0],
+          centre[1] + size[1],
+          centre[2] + size[2]
+        ];
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   mounted: function () {
     this._zincObject = undefined;
   },

package/src/components/index.js

@@ -1,9 +1,5 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import ScaffoldVuer from "./ScaffoldVuer.vue";
-import HelpModeDialog from "./HelpModeDialog.vue";
 
-export {
-  ScaffoldVuer,
-  HelpModeDialog,
-};
+export { ScaffoldVuer };

package/src/components.d.ts

@@ -12,7 +12,6 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
@@ -32,8 +31,6 @@ declare module 'vue' {
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    HelpModeDialog: typeof import('./components/HelpModeDialog.vue')['default']
     LinesControls: typeof import('./components/LinesControls.vue')['default']
     OpacityControls: typeof import('./components/OpacityControls.vue')['default']
     PointsControls: typeof import('./components/PointsControls.vue')['default']
@@ -41,10 +38,10 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScaffoldTooltip: typeof import('./components/ScaffoldTooltip.vue')['default']
+    ScaffoldTreeControls: typeof import('./components/ScaffoldTreeControls.vue')['default']
     ScaffoldVuer: typeof import('./components/ScaffoldVuer.vue')['default']
     TextureSlidesControls: typeof import('./components/TextureSlidesControls.vue')['default']
     TransformationControls: typeof import('./components/TransformationControls.vue')['default']
-    TreeControls: typeof import('./components/TreeControls.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

package/src/scripts/OrgansRenderer.js

@@ -38,6 +38,7 @@ const OrgansSceneData = function() {
 	const timeChangedCallbacks = new Array();
 	const sceneChangedCallbacks = new Array();
   const organPartAddedCallbacks = new Array();
+	const organPartRemovedCallbacks = new Array();
   let finishDownloadCallback = undefined;
 	const modelsLoader = ModelsLoaderIn;
   this.NDCCameraControl = undefined;
@@ -148,9 +149,9 @@ const OrgansSceneData = function() {
 		}
 	}
 	
-	 /**
-		 * Add a callback which will be called when time has changed
-		 */
+	/**
+	 * Add a callback which will be called when time has changed
+	 */
 	this.addTimeChangedCallback = function(callback) {
 	  if (typeof(callback === "function"))
 	    timeChangedCallbacks.push(callback);
@@ -172,6 +173,11 @@ const OrgansSceneData = function() {
       organPartAddedCallbacks.push(callback);
   }
 
+	this.addOrganPartRemovedCallback = function(callback) {
+    if (typeof(callback === "function"))
+      organPartRemovedCallbacks.push(callback);
+  }
+
   this.setFinishDownloadCallback = function(callback) {
     if (typeof(callback === "function"))
       finishDownloadCallback = callback;
@@ -239,10 +245,12 @@ const OrgansSceneData = function() {
 					intersected ? intersected.point.y : 0,
 					intersected ? intersected.point.z : 0,
 				],
-				intersected,
+				intersected: intersected,
+				intersects: intersects,
 			};
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
+				extraData.threeID = idObject.object?.id;
         if (idObject.object.userData.isGlyph) { 
           if (idObject.object.name) {
             _this.setSelectedByObjects([idObject.object], coords,
@@ -279,6 +287,7 @@ const OrgansSceneData = function() {
 			}
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
+				extraData.threeID = idObject.object?.id;
         _this.displayArea.style.cursor = "pointer";
         _this.setHighlightedByObjects([idObject.object], coords, extraData, true);
         return;
@@ -393,6 +402,12 @@ const OrgansSceneData = function() {
 		zincObject.userData["annotation"] = annotation;
 	}
 
+	const removeOrganPart = function(systemName, partName, useDefautColour, zincObject) {
+    for (let i = 0; i < organPartRemovedCallbacks.length;i++) {
+      organPartRemovedCallbacks[i](zincObject);
+    }
+	}
+
 	  /**
 		 * New organs geometry has been added to the scene, add UIs and make
 		 * sure the viewport is correct.
@@ -402,6 +417,15 @@ const OrgansSceneData = function() {
 	    	addOrganPart(systemName, partName, useDefautColour, zincObject);
 	    }
 	  }
+
+	  /**
+		 * Organs geometry has been removed to the scene.
+		 */
+	  const _removeOrganPartCallback = function(systemName, partName, useDefautColour) {
+	    return function(zincObject) {
+	    	removeOrganPart(systemName, partName, useDefautColour, zincObject);
+	    }
+	  }
 	  
 	  const downloadCompletedCallback = function() {
 		  return function() {
@@ -465,6 +489,19 @@ const OrgansSceneData = function() {
 	    }
 	    return availableSpecies;
 	  }
+
+		/**
+		 * Return the center and size of the cuurrent viewing scene
+		 */
+		this.getCentreAndSize = function() {
+			const vector = new THREE.Vector3();
+			const boundingBox = this.scene.getBoundingBox();
+			boundingBox.getCenter(vector);
+			const centre = [vector.x, vector.y, vector.z];
+			boundingBox.getSize(vector);
+			const size = [vector.x, vector.y, vector.z];
+			return {centre, size};
+		}
 	  
 	  const setSceneData = function(speciesName, systemName, partName, organsDetails) {
       _this.sceneData.nerveMapIsActive = false;
@@ -511,7 +548,8 @@ const OrgansSceneData = function() {
             }
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
-			      organScene.loadMetadataURL(url, undefined, downloadCompletedCallback());	      
+			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
+						organScene.loadMetadataURL(url, undefined, downloadCompletedCallback());	      
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();
@@ -541,7 +579,8 @@ const OrgansSceneData = function() {
   	    	  _this.sceneData.viewURL = undefined;
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
-			      organScene.loadGLTF(url, undefined, downloadCompletedCallback());
+			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
+						organScene.loadGLTF(url, undefined, downloadCompletedCallback());
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();

package/src/scripts/RendererModule.js

@@ -37,6 +37,7 @@ const RendererModule = function()  {
   this.selectedScreenCoordinates = new THREE.Vector3();
   this.selectedCenter = undefined;
   this.liveUpdatesObjects = undefined;
+  this.ignorePreviousSelected = false;
 }
 
 RendererModule.prototype = Object.create(BaseModule.prototype);
@@ -44,17 +45,18 @@ RendererModule.prototype = Object.create(BaseModule.prototype);
 RendererModule.prototype.getIntersectedObject = function(intersects) {
 	if (intersects) {
     const typeMap = intersects.map(intersect => {
-        if (intersect && intersect.object &&
-          intersect.object.userData) {
-          if (intersect.object.userData.isMarker) {
-            return 1;
-          } else if (intersect.object.name && 
-            intersect.object.userData.isZincObject) {
-            return 2;
-          }
+      if (intersect && intersect.object &&
+        intersect.object.userData) {
+        if (intersect.object.userData.isMarker) {
+          return 1;
+        } else if (intersect.object.name && 
+          intersect.object.userData.isZincObject) {
+          return 2;
         }
-        return 0;
+      }
+      return 0;
     });
+    //prioritise markers
     let i = typeMap.indexOf(1);
     i = (i > -1) ? i : typeMap.indexOf(2);
     return intersects[i];
@@ -71,8 +73,9 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
     if (zincObject) {
       if (zincObject.isGlyph || zincObject.isGlyphset) {
         let glyphset = zincObject;
-        if (zincObject.isGlyph)
+        if (zincObject.isGlyph) {
           glyphset = zincObject.getGlyphset();
+        }
         annotation = glyphset.userData ? glyphset.userData.annotation : undefined;
         if (annotation && annotation.data) {
           if (objects[i].name && objects[i].name != "")
@@ -86,6 +89,9 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
           annotation.data.id = objects[i].name;
         }
       }
+      if (annotation) {
+        annotation.data.zincObject = zincObject;
+      }
     }
     if (annotation)
       annotations.push(annotation);
@@ -172,7 +178,7 @@ RendererModule.prototype.setSelectedByObjects = function(
   } else {
     changed = true;
   }
-  if (changed) {
+  if (changed || this.ignorePreviousSelected) {
     const zincObjects = this.objectsToZincObjects(objects);
     if (this.selectObjectOnPick) {
       this.setupLiveCoordinates(zincObjects);

package/src/scripts/Search.js

@@ -76,6 +76,22 @@ export class SearchIndex
         this.zincObjects.push(zincObject);
     }
 
+    removeZincObject(zincObject, id)
+    //=======================
+    {
+        const path = zincObject.getRegion().getFullPath();
+        const fullPath = path ? `${path}/${zincObject.groupName}` : zincObject.groupName;
+        const item = { path: fullPath, name: zincObject.groupName, id };
+        this._searchEngine.remove(item, {fields: ['path', 'name']});
+        for (let i = 0; i < this.zincObjects.length; i++) {
+          if (id === this.zincObjects[i].uuid) {
+            this.zincObjects.splice(i, 1);
+            return;
+          }
+        }
+        
+    }
+
     addRegion(region, id)
     //=======================
     {
@@ -126,7 +142,7 @@ export class SearchIndex
       }
       result["zincObjects"] = createUnqiuesFromObjects(zincObjects);
       return result;
-    } 
+    }
 
     search(text) {
         const results = this._searchEngine.search(text, {prefix: true});

package/src/scripts/Utilities.js

@@ -1,4 +1,4 @@
-import { THREE } from 'zincjs';
+import { Label, THREE } from 'zincjs';
 
 export const createListFromPrimitives = (primitives, list) => {
   if (primitives) {
@@ -47,24 +47,76 @@ export const getEditableLines = (event) => {
   return undefined;
 }
 
-export const moveLine = (zincObject, faceIndex, unit) => {
+export const getDeletableObjects = (event) => {
+  const zincObjects = event.zincObjects;
+  if (zincObjects.length > 0 && zincObjects[0]) {
+    const zincObject = zincObjects[0];
+    if (zincObject.isEditable) {
+      return zincObject;
+    }
+  }
+  return undefined;
+}
+
+export const movePoint = (zincObject, index, diff) => {
+  if (zincObject?.isEditable && zincObject?.isPointset) {
+    let found = false;
+    for (let i = 0; i < 3 && !found; i++) {
+      if (diff[i] !== 0) {
+        found = true;
+      }
+    }
+    if (found && index > -1) {
+      const v = zincObject.getVerticesByIndex(index);
+      if (v) {
+        v[0] = v[0] + diff[0];
+        v[1] = v[1] + diff[1];
+        v[2] = v[2] + diff[2];
+      }
+      zincObject.editVertices([v], index);
+      zincObject.boundingBoxUpdateRequired = true;
+      return true;
+    }
+  }
+  return false;
+}
+
+export const getLineDistance = (zincObject, faceIndex) => {
+  if (zincObject?.isEditable && zincObject?.isLines2) {
+    if (faceIndex > -1) {
+      const v = zincObject.getVerticesByFaceIndex(faceIndex);
+      if (v && v.length > 1) {
+        return getDistance(v[1], v[0]);
+      }
+    }
+  }
+  return 0;
+}
+ 
+//Move or extend a line
+export const moveAndExtendLine = (zincObject, faceIndex, unit, extendOnly) => {
   if (zincObject && unit !== 0.0) {
     if (zincObject.isEditable && zincObject.isLines2) {
       if (faceIndex > -1) {
         const v = zincObject.getVerticesByFaceIndex(faceIndex);
-        let d = [v[0][0] - v[1][0], v[0][1] - v[1][1], v[0][2] - v[1][2]];
+        let d = [v[1][0] - v[0][0], v[1][1] - v[0][1], v[1][2] - v[0][2]];
         const mag = Math.sqrt(d[0] * d[0] + d[1] * d[1] + d[2] * d[2]);
         for (let i = 0; i < 3; i++) {
           d[i] = d[i] / mag * unit;
-          v[0][i] = v[0][i] + d[i];
-          v[1][i] = v[1][i] + d[i];
+          if (!extendOnly) {
+            v[0][i] = v[0][i] + d[i];
+            v[1][i] = v[1][i] + d[i];
+          } else {
+            v[1][i] = v[0][i] + d[i];
+          }
         }
-        zincObject.editVertice(v, faceIndex * 2);
+        zincObject.editVertices(v, faceIndex * 2);
         zincObject.boundingBoxUpdateRequired = true;
+        return true;
       }
     }
   }
-  return undefined;
+  return false;
 }
 
 export const updateBoundingBox = (geometry, scene) => {
@@ -246,7 +298,10 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
   }
   if (type) {
     const coords = getCoordinatesForAnnotationFeature(zincObject);
-    const featureID = encodeURIComponent(region + group);
+    //Check if region ends with a slash
+    let fullName = region.slice(-1) === "/" ? region : region + "/";
+    fullName = fullName + group;
+    const featureID = encodeURIComponent(fullName);
     const userAnnotation = {
       resource: encodeURIComponent(scaffoldUrl),
       item: {
@@ -268,6 +323,10 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
         }
       },
     }
+    if (comment === "Deleted") {
+      userAnnotation.feature = undefined;
+    }
+
     return userAnnotation;
   }
 }
@@ -275,10 +334,11 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
 /*
  * Add/Update drawn annotations to the server.
  */
-export const addUserAnnotationWithFeature = (service, userToken, zincObject, region, group, scaffoldUrl, action) => {
-  if (service && service.currentUser) {
-    const annotation = createNewAnnotationsWithFeatures(zincObject, region, group, scaffoldUrl, action);
-    if (annotation) {
+export const addUserAnnotationWithFeature = (service, userToken, zincObject,
+  region, group, scaffoldUrl, action) => {
+  const annotation = createNewAnnotationsWithFeatures(zincObject, region, group, scaffoldUrl, action);
+  if (annotation) {
+    if (service && service.currentUser) {
       annotation.creator = {...service.currentUser};
       if (!annotation.creator.orcid) annotation.creator.orcid = '0000-0000-0000-0000';
       service.addAnnotation(userToken, annotation)
@@ -291,6 +351,7 @@ export const addUserAnnotationWithFeature = (service, userToken, zincObject, reg
         console.log('There is a problem with the submission, please try again later');
       })
     }
+    return annotation;
   }
 }
 
@@ -319,7 +380,7 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
           region,
           group,
           geometry.coordinates,
-          undefined,
+          group,
           0x0022ee,
         );
       } else if (geometry.type === "MultiLineString") {
@@ -333,4 +394,5 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
       if (object) object.zincObject.isEditable = true;
     });
   }
-}
+}
+

package/src/store/index.js

@@ -21,4 +21,4 @@ export const useMainStore = defineStore('main', {
       this.userProfile.token = value
     },
   }
-})
+})

package/vite.config.js

@@ -46,12 +46,12 @@ export default defineConfig(({ command, mode }) => {
         fileName: 'scaffoldvuer',
       },
       rollupOptions: {
-        external: ["vue", "@abi-software/flatmapvuer", "@abi-software/svg-sprite"],
+        external: ["vue", "@abi-software/svg-sprite", "@abi-software/map-utilities"],
         output: {
           globals: {
             vue: "Vue",
-            "@abi-software/flatmapvuer": "@abi-software/flatmapvuer",
-            "@abi-software/svg-sprite": "@abi-software/svg-sprite"
+            "@abi-software/svg-sprite": "@abi-software/svg-sprite",
+            "@abi-software/map-utilities": "@abi-software/map-utilities"
           },
         },
       },