@abi-software/scaffoldvuer 1.4.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,18 +41,17 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.1.0",
+    "@abi-software/map-utilities": "^1.1.2",
     "@abi-software/sparc-annotation": "^0.3.1",
-    "@abi-software/svg-sprite": "^1.0.0",
+    "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
-    "@vue/compat": "^3.4.15",
     "core-js": "^3.22.5",
-    "element-plus": "^2.4.4",
+    "element-plus": "2.8.4",
     "minisearch": "^6.0.1",
     "pinia": "^2.1.7",
     "simple-dropzone": "^0.8.3",
     "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.4.15",
+    "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
     "zincjs": "^1.11.4"
@@ -60,11 +59,9 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
     "@vuese/markdown-render": "^2.11.3",
-    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
-    "base64-inline-loader": "^2.0.1",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
@@ -73,7 +70,7 @@
     "vite": "^5.0.10",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vitepress": "^1.0.0-rc.42",
-    "webpack-node-externals": "^2.5.2"
+    "vue-docgen-api": "^4.79.2"
   },
   "eslintConfig": {
     "root": true,

package/src/components/ScaffoldTooltip.vue

@@ -153,9 +153,9 @@ export default {
         if (this.annotationDisplay) {
           const region = this.region ? this.region +"/" : "";
           this.annotationEntry = {
-            "featureId": encodeURIComponent(region + this.label),
-            "resourceId": encodeURIComponent(this.scaffoldUrl),
-            "resource": encodeURIComponent(this.scaffoldUrl),
+            "featureId": region + this.label,
+            "resourceId": this.scaffoldUrl,
+            "resource": this.scaffoldUrl,
           };
         }
       }

package/src/components/ScaffoldVuer.vue

@@ -570,12 +570,12 @@ export default {
      * GroupName to value pair.
      * The value can be a single number or and object in the following
      * form:
-     * 
+     *
      * {
      *  number: Number,
      *  imgURL: String
      * }
-     * 
+     *
      * When imgURL is specified, scaffoldvuer will attempt to render
      * the image in imgURL as marker instead.
      *
@@ -870,8 +870,10 @@ export default {
     },
     currentTime: {
       handler: function () {
-        //Emit when time in the current scene has changed
-        //@arg Current time in scene
+        /**
+         * Emit when time in the current scene has changed
+         * @arg {String} "Current time in scene"
+         */
         this.$emit("timeChanged", this.currentTime);
       },
     },
@@ -940,15 +942,15 @@ export default {
     ...mapState(useMainStore,  ['userToken']),
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
-        (this.activeDrawMode === 'Edit' || this.activeDrawMode === 'Delete');
+        (this.activeDrawMode !== "Point" && this.activeDrawMode !== 'LineString');
     }
   },
   methods: {
     /**
-     * @vuese
+     * @public
      * Call this to manually add a zinc object into the current scene.
      * This will subsequently trigger a zincObjectAdded
-     * @arg ZincObject object to be added
+     * @arg {Object} "ZincObject object to be added"
      */
     addZincObject: function (zincObject) {
       if (this.$module.scene) {
@@ -966,8 +968,10 @@ export default {
       if (this.timeVarying === false && zincObject.isTimeVarying()) {
         this.timeVarying = true;
       }
-      //Emit when a new object is added to the scene
-      //@arg The object added to the sceene
+      /**
+       * Emit when a new object is added to the scene
+       * @arg {Object} "The object added to the sceene"
+       */
       this.$emit("zinc-object-added", zincObject);
     },
     /**
@@ -1048,10 +1052,10 @@ export default {
       hrefElement.remove();
     },
     /**
-     * @vuese
+     * @public
      * Function for capturing a screenshot of the current rendering.
      *
-     * @arg filename given to the screenshot.
+     * @arg {String} "filename given to the screenshot."
      */
     captureScreenshot: function (filename) {
       this.captureFilename = filename;
@@ -1060,7 +1064,7 @@ export default {
       );
     },
     /**
-     * @vuese
+     * @public
      * Function to clear current scene, the tree controls and the search index.
      */
     clearScene: function () {
@@ -1069,15 +1073,19 @@ export default {
       if (this.$module.scene) this.$module.scene.clearAll();
     },
     /**
-     * @vuese
+     * @public
      * Add and edit local annotations
+     * @arg `region`,
+     * @arg `group`,
+     * @arg `zincObject`,
+     * @arg `comment`
      */
     addAndEditAnnotations: function (region, group, zincObject, comment) {
       const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
         region, group, this.url, comment);
       if (this.enableLocalAnnotations) {
         annotation.group = group;
-        let regionPath = region; 
+        let regionPath = region;
         if (regionPath.slice(-1) === "/") {
           regionPath = regionPath.slice(0, -1);
         }
@@ -1089,9 +1097,10 @@ export default {
       this.$emit('userPrimitivesUpdated', {region, group, zincObject});
     },
     /**
-     * @vuese
+     * @public
      * Callback for when primitives have been update using primitive controls.
      * This is only called from callback.
+     * @arg `object`
      */
     primitivesUpdated: function(object) {
       if (object.isZincObject && object.isEditable) {
@@ -1101,8 +1110,9 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Confirm creation of new primitive. This is only called from callback.
+     * @arg `payload`
      */
     confirmCreate: function(payload) {
       if (payload) {
@@ -1180,7 +1190,7 @@ export default {
         }
       }
       this.cancelCreate();
-    },  
+    },
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
@@ -1192,7 +1202,7 @@ export default {
       return val ? val.toFixed(2) + " ms" : "0 ms";
     },
     /**
-     * @vuese
+     * @public
      * Function to reset the view to default.
      * Also called when the associated button is pressed.
      */
@@ -1214,7 +1224,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Function to zoom in.
      * Also called when the associated button is pressed.
      */
@@ -1227,7 +1237,7 @@ export default {
      * Function to zoom out.
      * Also called when the associated button is pressed.
      *
-     * @vuese
+     * @public
      */
     zoomOut: function () {
       if (this.$module.scene) {
@@ -1237,7 +1247,8 @@ export default {
     /**
      * Function to change the current play speed.
      *
-     * @vuese
+     * @public
+     * @arg `speed`
      */
     speedChanged: function (speed) {
       this.currentSpeed = speed;
@@ -1246,7 +1257,7 @@ export default {
     /**
      * Function used to stop the free spin
      *
-     * @vuese
+     * @public
      */
     stopFreeSpin: function () {
       let cameracontrol = this.$module.scene.getZincCameraControls();
@@ -1255,9 +1266,9 @@ export default {
     },
     /**
      * Return a list of obejcts with the provided name.
-     * @arg Group name to search.
+     * @arg "Group name to search."
      *
-     * @vuese
+     * @public
      */
     findObjectsWithGroupName: function (name) {
       let objects = [];
@@ -1267,10 +1278,10 @@ export default {
       return objects;
     },
     /**
-     * Switch active drawing type 
-     * @arg shapeName shape to toggle
-     *
-     * @vuese
+     * @public
+     * Switch active drawing type
+     * @arg {String} `type`
+     * @arg {String} `icon`
      */
     toggleDrawing: function (type, icon) {
       this.createData.toBeDeleted = false;
@@ -1287,16 +1298,16 @@ export default {
     /**
      * Toggle the drawing box which aid the drawing
      *
-     * @vuese
+     * @public
      */
      toggleDrawingBox: function () {
       this.createData.drawingBox = !this.createData.drawingBox;
     },
     /**
      * Find and and zoom into objects with the provided list of names.
-     * @arg List of names
+     * @arg "List of names"
      *
-     * @vuese
+     * @public
      */
     viewRegion: function (names) {
       const rootRegion = this.$module.scene.getRootRegion();
@@ -1340,10 +1351,14 @@ export default {
         }
       }
     },
-    createEditTemporaryLines: function(worldCoords) {
+    createEditTemporaryLines: 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);
+            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]);
@@ -1392,11 +1407,11 @@ export default {
           this.createData.points.push(coords);
         }
       }
-    },    
+    },
     /**
      * Return renderer information
      *
-     * @vuese
+     * @public
      */
     getRendererInfo: function () {
       if (this.$module.zincRenderer) {
@@ -1408,7 +1423,7 @@ export default {
      * Function used to rotate the scene.
      * Also called when the associated button is pressed.
      *
-     * @vuese
+     * @public
      */
     freeSpin: function () {
       if (this.$module.scene) {
@@ -1446,7 +1461,7 @@ export default {
               this._editingZincObject = zincObject;
             }
           }
-          if (this.activeDrawMode === "Edit" || this.activeDrawMode === "Delete") {
+          if (this.activeDrawMode !== "Point" && this.activeDrawMode !== "LineString") {
             this.showRegionTooltipWithAnnotations(event.identifiers, true, false);
             this.tData.x = 50;
             this.tData.y = 200;
@@ -1503,8 +1518,10 @@ export default {
                 this.$refs.scaffoldTreeControls.removeActive(false);
               }
             }
-            //Emit when an object is selected
-            //@arg Identifier of selected objects
+            /**
+             * Emit when an object is selected
+             * @arg {Object} "Identifier of selected objects"
+             */
             this.$emit("scaffold-selected", event.identifiers);
           }
         } else if (event.eventType == 2) {
@@ -1535,11 +1552,13 @@ export default {
                 }
                 this.tData.x = event.identifiers[0].coords.x;
                 this.tData.y = event.identifiers[0].coords.y;
-                this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
+                this.createEditTemporaryLines(event.identifiers);
               }
             }
-            //Emit when an object is highlighted
-            //@arg Identifier of selected objects
+            /**
+             * Emit when an object is highlighted
+             * @arg {Object} "Identifier of selected objects"
+             */
             this.$emit("scaffold-highlighted", event.identifiers);
           }
         } else if (event.eventType == 3) {
@@ -1550,9 +1569,8 @@ export default {
                 this.$refs.scaffoldContainer.getBoundingClientRect();
               this.tData.x = event.identifiers[0].coords.x - offsets.left;
               this.tData.y = event.identifiers[0].coords.y - offsets.top;
-              this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
             }
-            this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
+            this.createEditTemporaryLines(event.identifiers);
           }
         }
       }
@@ -1560,7 +1578,7 @@ export default {
     /**
      * Get the coordinates of the current selected region.
      *
-     * @vuese
+     * @public
      */
     getCoordinatesOfSelected: function () {
       if (this.selectedObjects && this.selectedObjects.length > 0) {
@@ -1573,7 +1591,7 @@ export default {
      * current selected region which will be updated after each render
      * loop.
      *
-     * @vuese
+     * @public
      */
     getDynamicSelectedCoordinates: function () {
       return this.$module.selectedScreenCoordinates;
@@ -1653,10 +1671,10 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Start the animation.
      *
-     * @arg flag to turn the animation on/off
+     * @arg "flag to turn the animation on/off"
      */
     play: function (flag) {
       this.$module.playAnimation(flag);
@@ -1665,7 +1683,7 @@ export default {
       //this.hideRegionTooltip();
     },
     /**
-     * @vuese
+     * @public
      * Function to toggle on/off overlay help.
      */
     setHelpMode: function (helpMode) {
@@ -1893,7 +1911,7 @@ export default {
           }
           this.userInformation = undefined;
           this.annotator.authenticate(this.userToken).then((userData) => {
-            if (userData.name && userData.email) {
+            if (userData.name && userData.email && userData.canUpdate) {
               this.userInformation = userData;
               //Only draw annotations stored in the server on initial authentication
               if (!authenticated) {
@@ -1902,6 +1920,12 @@ export default {
                     annotationFeaturesToPrimitives(this.$module.scene, payload.features);
                   }
                 });
+                //Support previously supported encoded resource
+                getDrawnAnnotations(this.annotator, this.userToken, encodeURIComponent(this.url)).then((payload) => {
+                  if (payload && payload.features) {
+                    annotationFeaturesToPrimitives(this.$module.scene, payload.features);
+                  }
+                });
               }
             }
           });
@@ -1921,7 +1945,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Hide the tooltip
      */
     hideRegionTooltip: function () {
@@ -1939,7 +1963,7 @@ export default {
     /**
      * Set the marker modes for objects with the provided name, mode can
      * be "on", "off" or "inherited".
-     * Value can either be number or an object containing number and 
+     * Value can either be number or an object containing number and
      * imgURL.
      */
     setMarkerModeForObjectsWithName: function (name, value, mode) {
@@ -1955,8 +1979,10 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      * Set the marker modes for objects specified by the list of annotations
+     * @arg `annotations`
+     * @arg `mode`
      */
     setMarkerModeWithAnnotations: function (annotations, mode) {
       if (this.$module.scene) {
@@ -1994,11 +2020,11 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      *
      * Search a object and display the tooltip
-     * @arg text to search across
-     * @arg toggle the tooltip if this is set
+     * @arg "text to search across"
+     * @arg "toggle the tooltip if this is set"
      */
     search: function (text, displayLabel) {
       if (this.$_searchIndex) {
@@ -2034,10 +2060,11 @@ export default {
       return false;
     },
     /**
-     * @vuese
+     * @public
      *
      * Get the list of suggested terms based on the provided term.
      * This can be used for autocomplete.
+     * @arg `term`
      */
     fetchSuggestions: function (term) {
       if (this.$_searchIndex === undefined) return [];
@@ -2092,7 +2119,9 @@ export default {
         this.$module.updateTime(0);
         this.$module.unsetFinishDownloadCallback();
         this.addRegionsToSearchIndex();
-        //Emit when all objects have been loaded
+        /**
+         * Emit when all objects have been loaded
+         */
         this.$emit("on-ready");
         this.setMarkers();
         //Create a bounding box.
@@ -2112,7 +2141,7 @@ export default {
      * Function used for getting the current states of the scene. This exported states
      * can be imported using the importStates method.
      *
-     * @vuese
+     * @public
      */
     getState: function () {
       let state = {
@@ -2133,7 +2162,8 @@ export default {
      * Function used for importing the states of the scene. This exported states
      * can be imported using the read states method.
      *
-     * @vuese
+     * @public
+     * @arg `state`
      */
     setState: function (state) {
       if (state) {
@@ -2166,9 +2196,9 @@ export default {
     },
     /**
      * export current scene in GLTF.
-     * @arg Return in binary form when set to true
+     * @arg "Return in binary form when set to true"
      *
-     * @vuese
+     * @public
      */
     exportGLTF: function (binary) {
       return this.$module.scene.exportGLTF(binary);
@@ -2178,7 +2208,7 @@ export default {
      * This list is used for storing user created annotation
      * when enableLocalAnnotations is set to true.
      *
-     * @vuese
+     * @public
      */
      getLocalAnnotations: function () {
       return [...this.localAnnotationsList];
@@ -2188,7 +2218,8 @@ export default {
      * be imported when enableLocalAnnotations is set to
      * true;
      *
-     * @vuese
+     * @public
+     * @arg {Array} `annotationsList`
      */
      importLocalAnnotations: function (annotationsList) {
       if (this.enableLocalAnnotations) {
@@ -2198,9 +2229,9 @@ export default {
           const region = annotation.region;
           let fullName = region.slice(-1) === "/" ? region : region + "/";
           const noSlash = fullName.slice(0, -1);
-          annotation.region = noSlash; 
+          annotation.region = noSlash;
           fullName = fullName + group;
-          const featureID = encodeURIComponent(fullName);
+          const featureID = fullName;
           annotation.item.id = featureID;
           annotation.feature.id = featureID;
         });
@@ -2217,7 +2248,9 @@ export default {
      * viewport. This function will ignore the state prop and
      * read in the new url.
      *
-     * @vuese
+     * @public
+     * @arg `newValue`
+     * @arg `state`
      */
     setURLAndState: function (newValue, state) {
       if (newValue != this._currentURL) {
@@ -2264,7 +2297,8 @@ export default {
      * Function used for reading in new scaffold metadata. This function will ignore
      * the state prop and read in the new url.
      *
-     * @vuese
+     * @public
+     * @arg `newValue`
      */
     setURL: function (newValue) {
       this.setURLAndState(newValue, undefined);
@@ -2300,7 +2334,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * @public
      *
      * Force the renderer to resize
      */
@@ -2314,9 +2348,11 @@ export default {
       if (this.tData.visible) {
         this.showRegionTooltip(this.tData.label, true, true);
       }
-      //Emit when the scene has been transformed due to navigation,
-      //only triggered during syncControl mode
-      //@arg Information on the navigation
+      /**
+       * Emit when the scene has been transformed due to navigation,
+       * only triggered during syncControl mode
+       * @arg {Object} "Information on the navigation"
+       */
       this.$emit("scaffold-navigated", payload);
     },
     /**

package/src/scripts/Utilities.js

@@ -301,9 +301,9 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
     //Check if region ends with a slash
     let fullName = region.slice(-1) === "/" ? region : region + "/";
     fullName = fullName + group;
-    const featureID = encodeURIComponent(fullName);
+    const featureID = fullName;
     const userAnnotation = {
-      resource: encodeURIComponent(scaffoldUrl),
+      resource: scaffoldUrl,
       item: {
         "id": featureID,
       },
@@ -359,7 +359,7 @@ export const addUserAnnotationWithFeature = (service, userToken, zincObject,
  * Get the drawn annotation stored on the annotation server
  */
 export const getDrawnAnnotations = async (service, userToken, scaffoldUrl) => {
-  const resource = encodeURIComponent(scaffoldUrl);
+  const resource = scaffoldUrl;
   return await service.drawnFeatures(userToken, resource);
 }