@abi-software/scaffoldvuer 1.13.1-beta.0 → 1.13.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.13.1-beta.0",
+  "version": "1.13.1-beta.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.7.6",
+    "@abi-software/map-utilities": "^1.7.8-beta.0",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "1.0.3",
     "@element-plus/icons-vue": "^2.3.1",
@@ -53,7 +53,7 @@
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
-    "zincjs": "^1.16.2"
+    "zincjs": "^1.16.4"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.0",

package/src/App.vue

@@ -150,7 +150,7 @@
                   id="annotations-upload"
                   type="file"
                   accept="application/json"
-                  @change="importOfflineAnnotations" 
+                  @change="importOfflineAnnotations"
                 />
               </el-button>
           </el-col>
@@ -357,7 +357,7 @@ const writeTextFile = (filename, data) => {
   hrefElement.href = dataStr;
   hrefElement.click();
   hrefElement.remove();
-} 
+}
 
 export default {
   name: "app",

package/src/components/ScaffoldOverlay.vue

@@ -231,6 +231,11 @@ export default {
     color:black;
     opacity:0.5;
     top: 50%;
+    text-shadow:
+      -1px -1px 0 white,
+      1px -1px 0 white,
+      -1px 1px 0 white,
+      1px 1px 0 white; /* White outline */
   }
 }
 

package/src/components/ScaffoldVuer.vue

@@ -440,6 +440,7 @@ import {
   getClickedObjects,
   getDeletableObjects,
   getDrawnAnnotations,
+  getEditablePoint,
   getEditableLines,
   getObjectsFromAnnotations,
   findObjectsWithNames,
@@ -816,6 +817,7 @@ export default {
         drawingBox: false,
         toBeConfirmed: false,
         points: [],
+        tempGroupName: "",
         shape: "",
         x: 0,
         y: 0,
@@ -1176,12 +1178,7 @@ export default {
         }
       }
       //Recalculate the following if module is ready
-      if (this.isReady) {
-        const {centre, size} = this.$module.getCentreAndSize();
-        this.boundingDims.centre = centre;
-        this.boundingDims.size = size;
-      }
-
+      this.calculateBoundingBox();
 
       /**
        * Emit when a new object is added to the scene
@@ -1306,7 +1303,17 @@ export default {
         }
         annotation.region = regionPath;
         this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
-        this.offlineAnnotations.push(annotation);
+        const found = this.offlineAnnotations.find((element) => {
+          return element.group === annotation.group &&
+                 element.region === annotation.region &&
+                 element.resource === annotation.resource &&
+                 element.feature.geometry.type === annotation.feature.geometry.type;
+        });
+        if (found) {
+          Object.assign(found, annotation);
+        } else {
+          this.offlineAnnotations.push(annotation);
+        }
         sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
       }
       this.$emit('userPrimitivesUpdated', {region, group, zincObject});
@@ -1349,7 +1356,15 @@ export default {
           );
         } else if (payload.editingIndex > -1) {
           if (this._editingZincObject) {
-            this._editingZincObject.editVertices([this.createData.points[1]],
+            let editedPoint = undefined;
+            if (payload.editingIndex > -1) {
+              if (this.createData.faceIndex > -1) {
+                editedPoint = this.createData.points[1];
+              } else {
+                editedPoint = this.createData.points[0];
+              }
+            }
+            this._editingZincObject.editVertices([editedPoint],
               payload.editingIndex);
             const region = this._editingZincObject.region.getFullPath() + "/";
             const group = this._editingZincObject.groupName;
@@ -1371,6 +1386,7 @@ export default {
      * Cancel create workflows. Reset all relevant UIs and data.
      */
     cancelCreate: function() {
+      this.changeActiveByName(undefined);
       this.createData.points.length = 0;
       this.createData.toBeConfirmed = false;
       this._editingZincObject = undefined;
@@ -1611,14 +1627,35 @@ export default {
         }
       }
     },
-    createEditTemporaryLines: function(identifiers) {
+    createEditTemporaryPoint: function(identifiers) {
       const worldCoords = identifiers[0].extraData.worldCoords;
       if (worldCoords) {
-        if (this.createData.shape === "LineString" || this.createData.editingIndex > -1) {
-          if (this.createData.points.length === 1)  {
+        if (this.createData.shape === "Point" || this.createData.editingIndex > -1) {
+          if (this.createData.points.length === 0)  {
             this.showRegionTooltipWithAnnotations(identifiers, true, false);
             this.tData.x = 50;
             this.tData.y = 200;
+            if (this._tempPoint) {
+              const positionAttribute = this._tempPoint.geometry.getAttribute( 'position' );
+              positionAttribute.setXYZ(0, worldCoords[0], worldCoords[1], worldCoords[2]);
+              positionAttribute.needsUpdate = true;
+            } else {
+              this._tempPoint = this.$module.scene.addTemporaryPoints(
+                [worldCoords], 0x00ffff);
+            }
+          }
+        }
+      }
+    },
+    createEditTemporaryLines: function(identifiers) {
+      const worldCoords = identifiers[0].extraData.worldCoords;
+      if (worldCoords) {
+        if (this.createData.shape === "LineString" ||
+        (this.createData.editingIndex > -1 && this.createData.faceIndex > -1)) {
+          if (this.createData.points.length === 1)  {
+            this.showRegionTooltipWithAnnotations(identifiers, true, false);
+            //this.tData.x = 50;
+            //this.tData.y = 200;
             if (this._tempLine) {
               const positionAttribute = this._tempLine.geometry.getAttribute( 'position' );
               positionAttribute.setXYZ(1, worldCoords[0], worldCoords[1], worldCoords[2]);
@@ -1631,14 +1668,26 @@ export default {
         }
       }
     },
+    createEditTemporaryPrimitive: function(identifiers) {
+      if (this.createData.shape === "LineString" ||
+        (this.createData.editingIndex > -1 &&
+        this.createData.faceIndex > -1)) {
+        this.createEditTemporaryLines(identifiers);
+      } else {
+        if (this.createData.shape === "Point" || this.createData.editingIndex > -1) {
+          this.createEditTemporaryPoint(identifiers);
+        }
+      }
+    },
     draw: function(data) {
       if (data && data.length > 0 && data[0].data.group) {
         if (data[0].extraData.worldCoords) {
-          if (this.createData.shape === "Point") {
-            this.drawPoint(data[0].extraData.worldCoords, data);
-          } else if (this.createData.shape === "LineString" ||
-            this.createData.editingIndex > -1) {
+          if (this.createData.shape === "LineString" ||
+            (this.createData.editingIndex > -1 && this.createData.faceIndex > -1)) {
             this.drawLine(data[0].extraData.worldCoords, data);
+          } else if (this.createData.shape === "Point" ||
+            (this.createData.editingIndex > -1 && this.createData.faceIndex === -1)) {
+            this.drawPoint(data[0].extraData.worldCoords, data);
           }
         }
       }
@@ -1651,7 +1700,9 @@ export default {
         this.showRegionTooltipWithAnnotations(data, true, false);
         this.tData.x = 50;
         this.tData.y = 200;
-        this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
+        if (!this._tempPoint) {
+          this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
+        }
       }
     },
     drawLine: function(coords, data) {
@@ -1694,6 +1745,19 @@ export default {
         setTimeout(this.stopFreeSpin, 4000);
       }
     },
+    activateEditingMode: function(eventIdentifiers) {
+      let editing = getEditablePoint(eventIdentifiers);
+      if (editing) {
+        this.activatePointEditingMode(editing.zincObject, editing.index,
+          editing.point);
+      } else {
+        editing = getEditableLines(eventIdentifiers);
+        if (editing) {
+          this.activateLineEditingMode(editing.zincObject, editing.faceIndex,
+            editing.vertexIndex, editing.point);
+        }
+      }
+    },
     activateAnnotationMode: function(names, event) {
       if (this.authorisedUser || this.offlineAnnotationEnabled) {
         this.createData.toBeDeleted = false;
@@ -1709,11 +1773,7 @@ export default {
         } else {
           //Make sure the tooltip is displayed with annotaion mode
           if (this.activeDrawMode === "Edit") {
-            const editing = getEditableLines(event);
-            if (editing) {
-              this.activateEditingMode(editing.zincObject, editing.faceIndex,
-                editing.vertexIndex, editing.point);
-            }
+            this.activateEditingMode(event.identifiers);
           } else if (this.activeDrawMode === "Delete") {
             const zincObject = getDeletableObjects(event);
             if (zincObject) {
@@ -1731,10 +1791,18 @@ export default {
         this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
       }
     },
-    activateEditingMode: function(zincObject, faceIndex, vertexIndex, point) {
+    activatePointEditingMode: function(zincObject, index, point) {
+      this._editingZincObject = zincObject;
+      this.createData.faceIndex = -1;
+      this.createData.editingIndex = index;
+      this.createData.tempGroupName = this._editingZincObject.groupName;
+      //this.drawPoint(point, undefined);
+    },
+    activateLineEditingMode: function(zincObject, faceIndex, vertexIndex, point) {
       this._editingZincObject = zincObject;
       this.createData.faceIndex = faceIndex;
       this.createData.editingIndex = vertexIndex;
+      this.createData.tempGroupName = this._editingZincObject.groupName;
       this.drawLine(point, undefined);
     },
     /**
@@ -1777,7 +1845,9 @@ export default {
             this.tData.label = id;
             this.tData.region = regionPath;
             const zincObject = getClickedObjects(event);
-            this._editingZincObject = zincObject;
+            if (this.createData.editingIndex === -1 ) {
+              this._editingZincObject = zincObject;
+            }
             if (zincObject) {
               const regionPath = this._editingZincObject.region.getFullPath() + "/";
               const group = this._editingZincObject.groupName;
@@ -1836,7 +1906,7 @@ export default {
               this.tData.region = regionPath;
               this.tData.x = event.identifiers[0].coords.x;
               this.tData.y = event.identifiers[0].coords.y;
-              this.createEditTemporaryLines(event.identifiers);
+              this.createEditTemporaryPrimitive(event.identifiers);
             }
           }
           /**
@@ -1853,7 +1923,7 @@ export default {
               this.tData.x = event.identifiers[0].coords.x - offsets.left;
               this.tData.y = event.identifiers[0].coords.y - offsets.top;
             }
-            this.createEditTemporaryLines(event.identifiers);
+            this.createEditTemporaryPrimitive(event.identifiers);
           }
         }
       }
@@ -2070,6 +2140,7 @@ export default {
                 this.$module.zincRenderer.removePostRenderCallbackFunction(
                   this.$_regionTooltipCallback
                 );
+                this.$module.$_regionTooltipCallback = undefined;
               }
               this.$_regionTooltipCallback =
                 this.$module.zincRenderer.addPostRenderCallbackFunction(
@@ -2097,6 +2168,7 @@ export default {
               this.$module.zincRenderer.removePostRenderCallbackFunction(
                 this.$_liveCoordinatesUpdated
               );
+              this.$_liveCoordinatesUpdated = undefined;
             }
             if (liveUpdates) {
               this.$module.setupLiveCoordinates(objects);
@@ -2168,6 +2240,10 @@ export default {
     showRegionTooltipWithAnnotations: function (annotations, resetView, liveUpdates) {
       if (this.$module.scene) {
         const result = getObjectsFromAnnotations(this.$module.scene, annotations);
+        if (this._editingZincObject) {
+          result.regionPath = this._editingZincObject.region.getFullPath() + "/";
+          result.label = this._editingZincObject.groupName;
+        }
         if (result && result.objects.length > 0) {
           if (!this.annotationSidebar) {
             return this.showRegionTooltipWithObjects(
@@ -2308,6 +2384,7 @@ export default {
         );
         //Unset the tracking
         this.$module.setupLiveCoordinates(undefined);
+        this.$_liveCoordinatesUpdated = undefined;
       }
       this.tData.active = false;
       this.tData.visible = false;
@@ -2568,6 +2645,13 @@ export default {
         }
       }
     },
+    calculateBoundingBox: function() {
+      if (this.isReady) {
+        const {centre, size} = this.$module.getCentreAndSize();
+        this.boundingDims.centre = centre;
+        this.boundingDims.size = size;
+      }
+    },
     downloadErrorCallback: function() {
       return (error) => {
         this.$emit('on-error', error);
@@ -2592,9 +2676,7 @@ export default {
         this._slides = this.$module.scene.addSlicesPrimitive(
           "_helper", ["x-plane", "y-plane", "z-plane"], [0xFF5555, 0x55FF55, 0x5555FF],
           0.5);
-        const {centre, size} = this.$module.getCentreAndSize();
-        this.boundingDims.centre = centre;
-        this.boundingDims.size = size;
+        this.calculateBoundingBox();
         //this.$module.scene.createAxisDisplay(false);
         //this.$module.scene.enableAxisDisplay(true, true);
         this.isReady = true;

package/src/components/TextureSlidesControls.vue

@@ -23,7 +23,7 @@
           <el-slider
             v-model="slide.value"
             class="my-slider"
-            :step="0.01"
+            :step="0.005"
             :min="0"
             :max="1"
             :show-tooltip="false"

package/src/scripts/OrgansRenderer.js

@@ -19,7 +19,7 @@ const OrgansSceneData = function() {
 /**
  * Viewer of 3D-organs models. Users can toggle on/off different views. Data is
  * displayed instead if models are not available.
- * 
+ *
  * @class
  * @param {PJP.ModelsLoader}
  *            ModelsLoaderIn - defined in modelsLoade.js, providing locations of
@@ -49,7 +49,7 @@ const OrgansSceneData = function() {
 	this.isIgnorePicking = function() {
     	return ignorePicking;
 	}
-	
+
 	this.setIgnorePicking = function(value) {
 		ignorePicking = value;
 	}
@@ -74,7 +74,7 @@ const OrgansSceneData = function() {
 		}
 		_this.sceneData.currentTime = value;
 	}
-	
+
 	/**
 	 * Update the time slider and other renderers/scenes when time has changed.
 	 */
@@ -89,7 +89,7 @@ const OrgansSceneData = function() {
 		if (!_this.sceneData.nerveMapIsActive && pickerScene)
 			pickerScene.setMorphsTime(currentTime);
 		if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
-      _this.sceneData.nerveMap.additionalReader.setTime(currentTime / 
+      _this.sceneData.nerveMap.additionalReader.setTime(currentTime /
         duration);
 		_this.sceneData.currentTime = currentTime / duration * 100.0;
   }
@@ -132,7 +132,7 @@ const OrgansSceneData = function() {
       this.NDCCameraControl.setCenterZoom(center, zoom);
     }
   }
-  
+
   const postRenderSelectedCoordinatesUpdate = function() {
     //It is animating, the coordinates may have been updated
     if (_this.zincRenderer.playAnimation && _this.liveUpdatesObjects) {
@@ -146,19 +146,19 @@ const OrgansSceneData = function() {
       _this.selectedScreenCoordinates.y = coord.y;
     }
   }
-	
+
 	const preRenderUpdateCallback = function() {
 		return function() {
       preRenderTimeUpdate();
 		}
   }
-  
+
   const postRenderUpdateCallback = function() {
 		return function() {
       postRenderSelectedCoordinatesUpdate();
 		}
 	}
-	
+
 	/**
 	 * Add a callback which will be called when time has changed
 	 */
@@ -166,7 +166,7 @@ const OrgansSceneData = function() {
 	  if (typeof(callback === "function"))
 	    timeChangedCallbacks.push(callback);
 	}
-	
+
 	this.setTexturePos = function(value) {
 		if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
 			_this.sceneData.nerveMap.additionalReader.setSliderPos(value);
@@ -177,7 +177,7 @@ const OrgansSceneData = function() {
 	    sceneChangedCallbacks.push(callback);
 	  }
 	}
-	
+
 	this.addOrganPartAddedCallback = function(callback) {
     if (typeof(callback === "function"))
       organPartAddedCallbacks.push(callback);
@@ -223,7 +223,7 @@ const OrgansSceneData = function() {
     let intersectedObject = undefined;
     if (intersected !== undefined) {
       let marker = false;
-      if (intersected.object.userData && 
+      if (intersected.object.userData &&
         intersected.object.userData.isMarker) {
         marker = true;
         intersectedObject = intersected.object.userData.parent.getMorph();
@@ -247,12 +247,12 @@ const OrgansSceneData = function() {
     }
     return {"id":id, "object":intersectedObject};
   }
-	 
+
 	/**
 	 * Callback function when a pickable object has been picked. It will then
 	 * call functions in tissueViewer and cellPanel to show corresponding
 	 * informations.
-	 * 
+	 *
 	 * @callback
 	 */
    const _pickingCallback = function() {
@@ -271,7 +271,7 @@ const OrgansSceneData = function() {
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
 				extraData.threeID = idObject.object?.id;
-        if (idObject.object.userData.isGlyph) { 
+        if (idObject.object.userData.isGlyph) {
           if (idObject.object.name) {
             _this.setSelectedByObjects([idObject.object], coords,
 							extraData, true);
@@ -289,10 +289,10 @@ const OrgansSceneData = function() {
 			}
 		}
 	};
-	
+
 	/**
 	 * Callback function when a pickable object has been hovered over.
-	 * 
+	 *
 	 * @callback
 	 */
    const _hoverCallback = function() {
@@ -382,7 +382,7 @@ const OrgansSceneData = function() {
 		if (pickerScene)
 			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'pointsets');
   }
-  			
+
 	/**
 	 * Change visibility for parts of the current scene.
 	 */
@@ -394,13 +394,13 @@ const OrgansSceneData = function() {
 		if (pickerScene)
 			changeOrganPartsVisibilityForScene(pickerScene, name, value, type);
 	}
-	
+
 	this.changeOrganPartsVisibilityCallback = function(name) {
 		return function(value) {
 			_this.changeOrganPartsVisibility(name, value);
 		}
 	}
-			
+
 	this.changeBackgroundColour = function(backgroundColourString) {
 		const colour = new THREE.Color(backgroundColourString);
 		if (_this.zincRenderer) {
@@ -447,7 +447,7 @@ const OrgansSceneData = function() {
 	    	removeOrganPart(systemName, partName, useDefautColour, zincObject);
 	    }
 	  }
-	  
+
 	  const downloadCompletedCallback = function() {
 		  return function() {
 			  _this.settingsChanged();
@@ -459,7 +459,7 @@ const OrgansSceneData = function() {
 
 		//The payload can either be a zinc object when the loading is successful or
 		//an object containg the details of error message on failure.
-		//We only use it to handle an error 
+		//We only use it to handle an error
 	  const singleItemFinishCallback = function() {
       return function(payload) {
 
@@ -474,7 +474,7 @@ const OrgansSceneData = function() {
 				}
       }
 	  }
-	  
+
 	  /**
 		 * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
 		 * other activities of the organs.
@@ -499,11 +499,11 @@ const OrgansSceneData = function() {
         }
 	    }
 	  }
-	  
+
 	  /**
 		 * Return an array containing name(s) of species that also contains the
 		 * currently displayed organs.
-		 * 
+		 *
 		 * @returns {Array} containing species name
 		 */
 	  this.getAvailableSpecies = function(currentSpecies, currentSystem, currentPart) {
@@ -534,7 +534,7 @@ const OrgansSceneData = function() {
 			const size = [vector.x, vector.y, vector.z];
 			return {centre, size};
 		}
-	  
+
 	  const setSceneData = function(speciesName, systemName, partName, organsDetails) {
       _this.sceneData.nerveMapIsActive = false;
       _this.sceneData.nerveMap = undefined;
@@ -623,14 +623,14 @@ const OrgansSceneData = function() {
 			  }
 		  }
 	  }
-	  	  
+
 	  this.alignCameraWithSelectedObject = function(transitionTime) {
 	    const objects = _this.graphicsHighlight.getSelected();
 	    if (objects && objects[0] && objects[0].userData) {
 	      _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
 	    }
 	  }
-	  
+
 	  this.exportSettings = function() {
 		  const settings = {};
 		  settings.name = _this.instanceName;
@@ -646,7 +646,7 @@ const OrgansSceneData = function() {
 		  settings.dialog = "Organ Viewer";
 		  return settings;
 	  }
-	  
+
 	  this.importSettings = function(settings) {
 		  if (settings && (settings.dialog == this.typeName)) {
 			  _this.setName(settings.name);
@@ -660,11 +660,11 @@ const OrgansSceneData = function() {
 		  }
 		  return false;
 	  }
-		
+
 	/**
 	 * initialise loading of the html layout for the organs panel, this is
 	 * called when the {@link PJP.OrgansViewer} is created.
-	 * 
+	 *
 	 * @async
 	 */
 	 const initialise = function() {
@@ -674,7 +674,7 @@ const OrgansSceneData = function() {
        _this.zincRenderer.addPostRenderCallbackFunction(postRenderUpdateCallback());
      }
   }
-	 
+
 	initialise();
 
 }

package/src/scripts/Utilities.js

@@ -33,15 +33,31 @@ const getDistance = (point1, point2) => {
   return Math.sqrt(dist0 * dist0 + dist1 * dist1 + dist2 * dist2);
 }
 
-export const getEditableLines = (event) => {
-  const zincObjects = event.zincObjects;
-  if (zincObjects.length > 0 && zincObjects[0]) {
-    const zincObject = zincObjects[0];
+export const getEditablePoint = (eventIdentifiers) => {
+  //const zincObjects = event.zincObjects;
+  const zincObject = eventIdentifiers[0].data?.zincObject;
+  if (zincObject) {
+    if (zincObject.isEditable && zincObject.isPointset) {
+      const info = eventIdentifiers[0].extraData.intersected;
+      if (info && info.index > -1) {
+        const v = zincObject.getVerticesByIndex(info.index);
+        if (v) {
+          return { zincObject, index: info.index, point: v};
+        }
+      }
+    }
+  }
+  return undefined;
+}
+
+export const getEditableLines = (eventIdentifiers) => {
+  const zincObject = eventIdentifiers[0].data?.zincObject;
+  if (zincObject) {
     if (zincObject.isEditable && zincObject.isLines2) {
-      const info = event.identifiers[0].extraData.intersected;
+      const info = eventIdentifiers[0].extraData.intersected;
       if (info && info.faceIndex > -1) {
         const v = zincObject.getVerticesByFaceIndex(info.faceIndex);
-        const p = event.identifiers[0].extraData.intersected.pointOnLine;
+        const p = eventIdentifiers[0].extraData.intersected.pointOnLine;
         if (v.length > 1) {
           const dist0 = getDistance(v[0], [p.x, p.y, p.z]);
           const dist1 = getDistance(v[1], [p.x, p.y, p.z]);
@@ -111,7 +127,7 @@ export const getLineDistance = (zincObject, faceIndex) => {
   }
   return 0;
 }
- 
+
 //Move or extend a line
 export const moveAndExtendLine = (zincObject, faceIndex, unit, extendOnly) => {
   if (zincObject && unit !== 0.0) {
@@ -218,7 +234,7 @@ export const convertUUIDsToFullPaths = (rootRegion, IDs) => {
     let region = undefined;
     let primitive = undefined;
     let regionID = undefined;
-    
+
     IDs.forEach(id => {
       const uuids = id.split("/");
       regionID = uuids[0];