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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.13.1-beta.2",
+  "version": "1.13.1-beta.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.7.8-beta.0",
+    "@abi-software/map-utilities": "^1.7.8-beta.2",
     "@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.4"
+    "zincjs": "^1.16.6"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.0",

package/src/components/ScaffoldTooltip.vue

@@ -13,12 +13,16 @@
     >
       <template #default>
         <div class="tooltip-text">{{ label }}</div>
-        <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
+        <div class="tooltip-text" v-if="region && region != '/'">
+          Region: {{ region }}
+        </div>
         <CreateTooltipContent
           v-show="createData.toBeConfirmed"
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
           @cancel-create="$emit('cancel-create')"
+          @create-region-suggestions="$emit('create-region-suggestions', $event)"
+          @create-group-suggestions="$emit('create-group-suggestions', $event)"
         />
         <Tooltip
           class="p-tooltip"

package/src/components/ScaffoldTreeControls.vue

@@ -210,21 +210,29 @@ export default {
         }
       }
     },
+    removeGroupFromRegionTreeData: function(region, groupName) {
+      const paths = region.getFullSeparatedPath();
+      const regionData = this.findOrCreateRegion(this.treeData[0], paths, "");
+      for (let i = 0; i < regionData.children.length; i++) {
+        if (regionData.children[i].label === groupName) {
+          regionData.children.splice(i, 1);
+          this.nodeNumbers--;
+          return;
+        }
+      }
+    },
+    zincObjectRenamed: function(zincObject, oldName) {
+      const objects = zincObject.region.findObjectsWithGroupName(oldName, false);
+      if (objects.length < 1) {
+        this.removeGroupFromRegionTreeData(zincObject.region, oldName);
+      }
+      this.zincObjectAdded(zincObject);
+    },
     zincObjectRemoved: function(zincObject) {
       const group = zincObject.groupName;
       const objects = zincObject.region.findObjectsWithGroupName(group, false);
       if (objects.length === 0) {
-        const paths = zincObject.region.getFullSeparatedPath();
-        const regionData = this.findOrCreateRegion(this.treeData[0], paths, "");
-        if (regionData.children) {
-          for (let i = 0; i < regionData.children.length; i++) {
-            if (regionData.children[i].label === group) {
-              regionData.children.splice(i, 1);
-              this.nodeNumbers--;
-              return;
-            }
-          }
-        }
+        this.removeGroupFromRegionTreeData(zincObject.region, group);
       }
     },
     checkChanged: function (node, data) {

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"
@@ -815,15 +817,17 @@ export default {
       colourRadio: true,
       createData: {
         drawingBox: false,
+        renaming: false,
         toBeConfirmed: false,
         points: [],
-        tempGroupName: "",
+        tempGroupName: undefined,
         shape: "",
         x: 0,
         y: 0,
         editingIndex: -1,
         faceIndex: -1,
         toBeDeleted: false,
+        regionPrefix: "__annotation"
       },
       currentTime: 0.0,
       timeVarying: false,
@@ -1201,6 +1205,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.
@@ -1318,6 +1334,45 @@ export default {
       }
       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;
+        //console.log(annotation, "oldName", oldName);
+        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.
@@ -1370,6 +1425,11 @@ export default {
             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");
@@ -1388,10 +1448,12 @@ export default {
     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) {
@@ -1561,6 +1623,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;
       }
@@ -1696,6 +1759,9 @@ 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.tData.x = 50;
@@ -1709,6 +1775,9 @@ export default {
       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.tData.x = 50;
@@ -1758,6 +1827,23 @@ export default {
         }
       }
     },
+    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.toBeConfirmed = true;
+        this.showRegionTooltipWithAnnotations(eventIdentifiers, true, false);
+        this.tData.x = 50;
+        this.tData.y = 200;
+      }
+    },
     activateAnnotationMode: function(names, event) {
       if (this.authorisedUser || this.offlineAnnotationEnabled) {
         this.createData.toBeDeleted = false;
@@ -1765,8 +1851,6 @@ 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);
             }
           }
@@ -1794,6 +1878,7 @@ export default {
     activatePointEditingMode: function(zincObject, index, point) {
       this._editingZincObject = zincObject;
       this.createData.faceIndex = -1;
+      this.createData.renaming = false;
       this.createData.editingIndex = index;
       this.createData.tempGroupName = this._editingZincObject.groupName;
       //this.drawPoint(point, undefined);
@@ -1801,6 +1886,7 @@ export default {
     activateLineEditingMode: function(zincObject, faceIndex, vertexIndex, point) {
       this._editingZincObject = zincObject;
       this.createData.faceIndex = faceIndex;
+      this.createData.renaming = false;
       this.createData.editingIndex = vertexIndex;
       this.createData.tempGroupName = this._editingZincObject.groupName;
       this.drawLine(point, undefined);

package/src/scripts/Search.js

@@ -49,6 +49,19 @@ export class SearchIndex
         this.idMaps = {};
     }
 
+    updateZincObject(zincObject, id)
+    //=======================
+    {
+        const path = zincObject.getRegion().getFullPath();
+        let groupName = zincObject.groupName;
+        let fullPath = path ? `${path}/${zincObject.groupName}` : zincObject.groupName;
+        groupName = groupName.replaceAll('"', '');
+        fullPath = fullPath.replaceAll('"', '');
+        const item = { path: fullPath, name: groupName, id };
+        this._searchEngine.replace(item);
+        this.idMaps[id] = { path: fullPath, zincObject };
+    }
+
     addZincObject(zincObject, id)
     //=======================
     {
@@ -169,7 +182,7 @@ export class SearchIndex
         const result = this.search(term);
         results.push(...result);
       });
-    
+
       return results;
     }