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

package/src/components/ScaffoldVuer.vue

@@ -24,6 +24,8 @@
       @confirm-comment="confirmComment($event)"
       @confirm-delete="confirmDelete()"
       @tooltip-hide="onTooltipHide()"
+      @create-group-suggestions="$emit('create-group-suggestions', $event)"
+      @create-region-suggestions="$emit('create-region-suggestions', $event)"
     />
     <div
       id="organsDisplayArea"
@@ -108,7 +110,12 @@
             @object-selected="objectSelected"
             @object-hovered="objectHovered"
             @drawer-toggled="drawerToggled"
-          />
+            @check-changed="$emit('check-changed', $event)"
+          >
+          <template v-slot:treeSlot>
+            <slot name="treeSlot"></slot>
+          </template>
+          </ScaffoldTreeControls>
         </template>
       </el-popover>
       <div class="primitive-controls-box">
@@ -302,66 +309,74 @@
         virtual-triggering
       >
         <div class="control-layer">
-          <el-row class="backgroundText">Viewing Mode</el-row>
-          <el-row class="backgroundControl">
-            <div style="margin-bottom: 2px;">
-              <template
-                  v-for="(value, key, index) in viewingModes"
-                  :key="key"
-                >
-                  <template v-if="key === viewingMode">
-                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
-                  </template>
-                  <template v-else>
-                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
-                  </template>
-              </template>
-            </div>
-            <el-row class="viewing-mode-description">
-              {{ modeDescription }}
+          <div class="viewing-mode-container">
+            <el-row class="backgroundText">Viewing Mode</el-row>
+            <el-row class="backgroundControl">
+              <div style="margin-bottom: 2px;">
+                <template
+                    v-for="(value, key, index) in viewingModes"
+                    :key="key"
+                  >
+                    <template v-if="key === viewingMode">
+                      <span class="viewing-mode-title"><b >{{ key }}</b></span>
+                    </template>
+                    <template v-else>
+                      <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
+                    </template>
+                </template>
+              </div>
+              <el-row class="viewing-mode-description">
+                {{ modeDescription }}
+              </el-row>
+              <el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
+                (Anonymous annotate)
+              </el-row>
             </el-row>
-            <el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
-              (Anonymous annotate)
+          </div>
+          <div class="colour-radio-container">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Organs display</el-row>
+            <el-row class="backgroundControl">
+              <el-radio-group
+                v-model="colourRadio"
+                class="scaffold-radio"
+                @change="setColour(colourRadio, true)"
+              >
+                <el-radio :value="true">Colour</el-radio>
+                <el-radio :value="false">Greyscale</el-radio>
+              </el-radio-group>
             </el-row>
-          </el-row>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText">Organs display</el-row>
-          <el-row class="backgroundControl">
-            <el-radio-group
-              v-model="colourRadio"
-              class="scaffold-radio"
-              @change="setColour(colourRadio, true)"
-            >
-              <el-radio :value="true">Colour</el-radio>
-              <el-radio :value="false">Greyscale</el-radio>
-            </el-radio-group>
-          </el-row>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText">Outlines display</el-row>
-          <el-row class="backgroundControl">
-            <el-radio-group
-              v-model="outlinesRadio"
-              class="scaffold-radio"
-              @change="setOutlines(outlinesRadio, true)"
-            >
-              <el-radio :value="true">Show</el-radio>
-              <el-radio :value="false">Hide</el-radio>
-            </el-radio-group>
-          </el-row>
-          <el-row class="backgroundSpacer"></el-row>
-          <el-row class="backgroundText"> Change background </el-row>
-          <el-row class="backgroundChooser">
-            <div
-              v-for="item in availableBackground"
-              :key="item"
-              :class="[
-                'backgroundChoice',
-                item,
-                item == currentBackground ? 'active' : '',
-              ]"
-              @click="backgroundChangeCallback(item)"
-            />
-          </el-row>
+          </div>
+          <div class="outlines-radio-container">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Outlines display</el-row>
+            <el-row class="backgroundControl">
+              <el-radio-group
+                v-model="outlinesRadio"
+                class="scaffold-radio"
+                @change="setOutlines(outlinesRadio, true)"
+              >
+                <el-radio :value="true">Show</el-radio>
+                <el-radio :value="false">Hide</el-radio>
+              </el-radio-group>
+            </el-row>
+          </div>
+          <div class="background-colour-container">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText"> Change background </el-row>
+            <el-row class="backgroundChooser">
+              <div
+                v-for="item in availableBackground"
+                :key="item"
+                :class="[
+                  'backgroundChoice',
+                  item,
+                  item == currentBackground ? 'active' : '',
+                ]"
+                @click="backgroundChangeCallback(item)"
+              />
+            </el-row>
+          </div>
         </div>
       </el-popover>
       <div
@@ -440,6 +455,7 @@ import {
   getClickedObjects,
   getDeletableObjects,
   getDrawnAnnotations,
+  getEditablePoint,
   getEditableLines,
   getObjectsFromAnnotations,
   findObjectsWithNames,
@@ -814,14 +830,17 @@ export default {
       colourRadio: true,
       createData: {
         drawingBox: false,
+        renaming: false,
         toBeConfirmed: false,
         points: [],
+        tempGroupName: undefined,
         shape: "",
         x: 0,
         y: 0,
         editingIndex: -1,
         faceIndex: -1,
         toBeDeleted: false,
+        regionPrefix: "__annotation"
       },
       currentTime: 0.0,
       timeVarying: false,
@@ -1176,12 +1195,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
@@ -1204,6 +1218,18 @@ export default {
         }
       }
     },
+    /**
+     * Rename Zinc Object
+     */
+     renameZincObject: function (zincObject, newName) {
+      if (this.$module.scene) {
+        const scaffoldTreeControls = this.$refs.scaffoldTreeControls;
+        const oldName = zincObject.groupName;
+        zincObject.setName(newName);
+        scaffoldTreeControls.zincObjectRenamed(zincObject, oldName);
+        this.$_searchIndex.updateZincObject(zincObject, zincObject.uuid);
+      }
+    },
     /**
      * Internal only.
      * This is called when a zinc object is removed.
@@ -1306,11 +1332,59 @@ 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});
     },
+    /**
+     * @public
+     * Rename group in annotations, only support local annotations at this moment.
+     * @arg `region`,
+     * @arg `group`,
+     * @arg `zincObject`,
+     * @arg `oldName`
+     */
+     renameAnnotations: function (region, group, zincObject, oldName) {
+      //Pending support for online annotation
+      let regionPath = region.slice(-1) === "/" ? region : region + "/";
+      const oldFeatureID = regionPath + oldName;
+      const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
+        region, group, this.url, `Rename from ${oldFeatureID}`);
+      this.existDrawnFeatures = markRaw(this.existDrawnFeatures.filter(feature => feature.id !== oldFeatureID));
+      this.existDrawnFeatures.push(annotation.feature);
+      if (this.offlineAnnotationEnabled) {
+        annotation.group = group;
+        regionPath = region;
+        if (regionPath.slice(-1) === "/") {
+          regionPath = regionPath.slice(0, -1);
+        }
+        annotation.region = regionPath;
+        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+        const found = this.offlineAnnotations.find((element) => {
+          return element.group === oldName &&
+                 element.region === annotation.region &&
+                 element.resource === annotation.resource &&
+                 element.feature.geometry.type === annotation.feature.geometry.type;
+        });
+        if (found) {
+          //console.log('found', found)
+          Object.assign(found, annotation);
+        }
+        sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
+      }
+      this.$emit('userPrimitivesUpdated', {region, group, zincObject, renamedFrom: oldName});
+    },
     /**
      * @public
      * Callback for when primitives have been update using primitive controls.
@@ -1349,12 +1423,25 @@ 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;
             this.addAndEditAnnotations(region, group, this._editingZincObject, "Position Updated");
           }
+        } else if (payload.renaming) {
+          const oldGroupName = this._editingZincObject.groupName;
+          this.renameZincObject(this._editingZincObject, payload.group);
+          this.renameAnnotations(payload.region, payload.group,
+            this._editingZincObject, oldGroupName);
         }
         if (object) {
           this.addAndEditAnnotations(payload.region, payload.group, object.zincObject, "Create");
@@ -1371,11 +1458,14 @@ export default {
      * Cancel create workflows. Reset all relevant UIs and data.
      */
     cancelCreate: function() {
+      this.changeActiveByName(undefined);
       this.createData.points.length = 0;
+      this.createData.renaming = false;
       this.createData.toBeConfirmed = false;
       this._editingZincObject = undefined;
       this.createData.editingIndex = -1;
       this.createData.faceIndex = -1;
+      this.createData.tempGroupName = undefined;
       this.tData.visible = false;
       this.createData.toBeDeleted = false;
       if (this._tempLine) {
@@ -1545,6 +1635,7 @@ export default {
         this.$module.selectObjectOnPick = true;
       } else if (type === 'tool') {
         this.activeDrawTool = icon;
+        this.createData.renaming = false;
         this.createData.shape = this.activeDrawTool ? this.activeDrawTool : '';
         this.$module.selectObjectOnPick = false;
       }
@@ -1611,14 +1702,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)  {
-            this.showRegionTooltipWithAnnotations(identifiers, true, false);
+        if (this.createData.shape === "Point" || this.createData.editingIndex > -1) {
+          if (this.createData.points.length === 0)  {
+            this.showRegionTooltipWithAnnotations(identifiers, false, 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, false, 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 +1743,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);
           }
         }
       }
@@ -1647,19 +1771,27 @@ export default {
       if (this.createData.toBeConfirmed === false) {
         this.createData.points.length = 0;
         this.createData.points.push(coords);
+        if (this.createData.editingIndex === -1 && !this.createData.renaming) {
+          this.createData.tempGroupName = undefined;
+        }
         this.createData.toBeConfirmed = true;
-        this.showRegionTooltipWithAnnotations(data, true, false);
+        this.showRegionTooltipWithAnnotations(data, false, 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) {
       if (this.createData.toBeConfirmed === false) {
         if (this.createData.points.length === 1) {
           this.createData.points.push(coords);
+          if (this.createData.editingIndex === -1  && !this.createData.renaming) {
+            this.createData.tempGroupName = undefined;
+          }
           this.createData.toBeConfirmed = true;
-          this.showRegionTooltipWithAnnotations(data, true, false);
+          this.showRegionTooltipWithAnnotations(data, false, false);
           this.tData.x = 50;
           this.tData.y = 200;
         } else {
@@ -1694,6 +1826,37 @@ 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);
+        }
+      }
+    },
+    activateRenamingMode: function(eventIdentifiers) {
+      let editing = getEditablePoint(eventIdentifiers);
+      if (!editing) {
+        editing = getEditableLines(eventIdentifiers);
+      }
+      if (editing) {
+        this._editingZincObject = editing.zincObject;
+        this.createData.faceIndex = -1;
+        this.createData.editingIndex = -1;
+        this.createData.renaming = true;
+        this.createData.tempGroupName = this._editingZincObject.groupName;
+        this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
+        this.createData.toBeConfirmed = true;
+        this.showRegionTooltipWithAnnotations(eventIdentifiers, false, false);
+        this.tData.x = 50;
+        this.tData.y = 200;
+      }
+    },
     activateAnnotationMode: function(names, event) {
       if (this.authorisedUser || this.offlineAnnotationEnabled) {
         this.createData.toBeDeleted = false;
@@ -1701,19 +1864,13 @@ export default {
           // Create new shape bsaed on current settings
           if (names.length > 0) {
             if (event.identifiers[0].coords) {
-              this.createData.x = event.identifiers[0].coords.x;
-              this.createData.y = event.identifiers[0].coords.y;
               this.draw(event.identifiers);
             }
           }
         } 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 +1888,22 @@ 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.renaming = false;
+      this.createData.editingIndex = index;
+      this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
+      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.renaming = false;
       this.createData.editingIndex = vertexIndex;
+      this.createData.regionPrefix =  this._editingZincObject.region.getFullPath();
+      this.createData.tempGroupName = this._editingZincObject.groupName;
       this.drawLine(point, undefined);
     },
     /**
@@ -1777,7 +1946,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 +2007,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 +2024,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);
           }
         }
       }
@@ -1968,6 +2139,17 @@ export default {
       //Hide tooltip as location may
       //this.hideRegionTooltip();
     },
+    /**
+     * @public
+     * Disable/enable target region and its children checkbox
+     *
+     * @arg region Region to set the disable/enable checkbox
+     * @arg flag Disable the checkbox when true and enable when false
+     * @arg childrenOnly Only disable/enable any child graphics/regions
+     */
+     setRegionCheckboxDisabled: function(region, flag, childrenOnly = true) {
+      this.$refs.scaffoldTreeControls.setRegionCheckboxDisabled(region, flag, childrenOnly);
+    },
     /**
      * @public
      * Function to toggle on/off overlay help.
@@ -2061,8 +2243,8 @@ export default {
         if (coords) {
           //The coords is not in view, view all if resetView flag is true
           if (!coords.inView) {
-            this.hideRegionTooltip();
             if (resetView) {
+              this.hideRegionTooltip();
               this.$module.scene.viewAll();
               //Use the post render callback to make sure the scene has been updated
               //before getting the position of the tooltip.
@@ -2070,6 +2252,7 @@ export default {
                 this.$module.zincRenderer.removePostRenderCallbackFunction(
                   this.$_regionTooltipCallback
                 );
+                this.$module.$_regionTooltipCallback = undefined;
               }
               this.$_regionTooltipCallback =
                 this.$module.zincRenderer.addPostRenderCallbackFunction(
@@ -2097,6 +2280,7 @@ export default {
               this.$module.zincRenderer.removePostRenderCallbackFunction(
                 this.$_liveCoordinatesUpdated
               );
+              this.$_liveCoordinatesUpdated = undefined;
             }
             if (liveUpdates) {
               this.$module.setupLiveCoordinates(objects);
@@ -2168,6 +2352,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 +2496,7 @@ export default {
         );
         //Unset the tracking
         this.$module.setupLiveCoordinates(undefined);
+        this.$_liveCoordinatesUpdated = undefined;
       }
       this.tData.active = false;
       this.tData.visible = false;
@@ -2568,6 +2757,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 +2788,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;