angular-annotorious - npm Package Compare versions

Comparing version 1.0.1 to 1.0.5

bower.json

 {
     "name": "angular-annotorious",
-    "version": "1.0.1",
+    "version": "1.0.5",
     "author": {
@@ -29,3 +29,3 @@ "name": "Igor Lino",
         "angular": "~1.3.4",
-        "annotorious-bower": "~0.6.3"
+        "annotorious-bower": "0.6.4"
     },
@@ -32,0 +32,0 @@ "devDependencies": {

demo/app.js

@@ -0,0 +0,0 @@ angular.module('annotoriousdemo', [

demo/controller.js

@@ -102,40 +102,40 @@ angular.module('annotoriousdemo.controllers', []).
 
-        $scope.annotateColorbox03 = {
-            rel: 'img-group-01',
-            slideshow: false,
-            open: false,
-            onComplete: function () {
-                console.log('03-complete');
-                var photo = $("#cboxLoadedContent .cboxPhoto")[0];
-                if (photo.src) {
-                    console.log('annotateColorbox03 ' + photo.src);
-                    annotoriousService.makeAnnotatable(photo);
-                    var annotations = annotoriousService.getAnnotations(photo.src);
-                    console.log(annotations);
-                    if (annotations && annotations.length > 0) {
-                        annotoriousService.showAnnotations(photo.src);
-                        colorboxService.resize();
-                    }
-
-                }
-            },
-            onLoad: function () {
-                console.log('03-onLoad');
-                annotatableImage();
-            },
-            onCleanup: function () {
-                console.log('03-cleanup');
-                annotatableImage();
+$scope.annotateColorbox03 = {
+    rel: 'img-group-01',
+    slideshow: false,
+    open: false,
+    onComplete: function () {
+        console.log('03-complete');
+        var photo = colorboxService.getCurrentPhoto();
+        if (photo.src) {
+            console.log('annotateColorbox03 ' + photo.src);
+            annotoriousService.makeAnnotatable(photo);
+            var annotations = annotoriousService.getAnnotations(photo.src);
+            console.log(annotations);
+            if (annotations && annotations.length > 0) {
+                annotoriousService.showAnnotations(photo.src);
+                colorboxService.resize();
             }
-        };
 
-        function annotatableImage() {
-            var photo = $("#cboxLoadedContent .cboxPhoto")[0];
-            if (photo && photo.src) {
-                //required
-                annotoriousService.reset(photo.src);
-            }
         }
+    },
+    onLoad: function () {
+        console.log('03-onLoad');
+        annotatableImage();
+    },
+    onCleanup: function () {
+        console.log('03-cleanup');
+        annotatableImage();
+    }
+};
 
+function annotatableImage() {
+    var photo = colorboxService.getCurrentPhoto();
+    if (photo && photo.src) {
+        //required
+        annotoriousService.reset(photo.src);
+    }
+}
 
+
         $scope.zoomOptions = {
@@ -142,0 +142,0 @@ scrollZoom: true,

js/angular-annotorious.js

@@ -0,1 +1,2 @@
+/*global anno:false */
 (function () {
@@ -21,2 +22,3 @@ 'use strict';
 
+            setProperties: setProperties, //(opt_options)
             addHandler: addHandler, //(type, handler)
@@ -44,2 +46,30 @@ addPlugin: addPlugin, //(pluginName, opt_config_options)
 
+        /**
+         * Sets the color properties for the annotation canvas.
+         * NOTE: The text dialogs are out-of-scope and per CSS customizable.
+         * The following properties can be changed:
+         *
+         *  {
+         *       outline: '#00f',
+         *       stroke: '#ff0000',
+         *       fill: 'rgba(255, 0, 0, 0.3)',
+         *       hi_stroke: '#00ff00',
+         *       hi_fill: 'rgba(0, 255, 0, 0.3)'
+         *   }
+         *
+         * @param props
+         */
+        function setProperties(props) {
+            getAnnotorious().setProperties(props);
+        }
+
+        /**
+         * Creates and registers a plugin.
+         *
+         * @param pluginId
+         * @param opt_config_options
+         * @param pluginFunc
+         * @param initFunc
+         * @param annotatorFunc
+         */
         function createPlugin(pluginId, opt_config_options, pluginFunc, initFunc, annotatorFunc) {
@@ -76,2 +106,15 @@ if (!opt_config_options) {
 
+
+        /**
+         * NOTE: this method is currently only relevant for the OpenLayers module.
+         * Feel free to ignore in case you are only using the standard image annotation features of Annotorious.
+         * Manually actives the selector. The selector can be activated on a specific
+         * item or globally, on all items (which serves mainly as a shortcut for pages where
+         * there is only one annotatable item). The function can take a callback function as parameter,
+         * which will be called when the selector is deactivated again.
+         *
+         * @param opt_item_url_or_callback
+         * @param opt_callback
+         * @returns {*}
+         */
         function activateSelector(opt_item_url_or_callback, opt_callback) {
@@ -81,2 +124,10 @@ return getAnnotorious().activateSelector(opt_item_url_or_callback, opt_callback);
 
+        /**
+         * Adds a new annotation, or replaces an existing annotation with a new annotation.
+         * (In the latter case, the parameter opt_replace must be the existing annotation.)
+         *
+         * @param annotation
+         * @param opt_replace
+         * @returns {*}
+         */
         function addAnnotation(annotation, opt_replace) {
@@ -86,2 +137,25 @@ return getAnnotorious().addAnnotation(annotation, opt_replace);
 
+        /**
+         * Adds an event handler function.
+         *
+         Annotorious issues the following events:
+
+         onMouseOverItem(event) - fired when the mouse enters an annotatable item
+         onMouseOutOfItem(event) - fired when the mouse leaves an annotatable item
+         onMouseOverAnnotation(event) - fired when the mouse enters an annotation
+         onMouseOutOfAnnotation(event) - fired when the mouse leaves an annotation
+         onSelectionStarted(event) - fired when the user starts a selection
+         onSelectionCanceled(event) - fired when the user cancels a selection (not available on all selection tools)
+         onSelectionCompleted(event) - fired when the user completes a selection
+         onSelectionChanged(event) - fired when the user changed a selection
+         beforePopupHide(popup) - fired just before the annotation info popup window hides
+         beforeAnnotationRemoved(annotation) - fired before an annotation is removed (Note: it is possible to prevent annotation removal by returning false from the handler method!)
+         onAnnotationRemoved(annotation) - fired when an annotation is removed from an imgae
+         onAnnotationCreated(annotation) - fired when an annotation was created
+         onAnnotationUpdated(annotation) - fired when an existing annotation was edited/updated
+         *
+         * @param type
+         * @param handler
+         * @returns {*}
+         */
         function addHandler(type, handler) {
@@ -91,2 +165,10 @@ return getAnnotorious().addHandler(type, handler);
 
+        /**
+         * Registers a plugin. For more information,
+         * see the Plugins Wiki page https://github.com/annotorious/annotorious/wiki/Plugins.
+         *
+         * @param pluginName
+         * @param opt_config_options
+         * @returns {*}
+         */
         function addPlugin(pluginName, opt_config_options) {
@@ -96,2 +178,11 @@ return getAnnotorious().addPlugin(pluginName, opt_config_options);
 
+        /**
+         * Destroys annotation functionality on a specific item, or on all items on the page.
+         * Note that this method differs from anno.reset() (see below) insofar as destroy does not
+         * re-evaluate the annotatable CSS attributes. What is destroyed, stays destroyed.
+         * (Until re-enabled through anno.makeAnnotatable()).
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function destroy(opt_item_url) {
@@ -101,2 +192,10 @@ return getAnnotorious().destroy(opt_item_url);
 
+        /**
+         * Returns the current annotations. opt_item_url is optional. If omitted,
+         * the method call will return all annotations, on all annotatable items on the page.
+         * If set to a specific item URL, only the annotations on that item will be returned.
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function getAnnotations(opt_item_url) {
@@ -106,2 +205,8 @@ return getAnnotorious().getAnnotations(opt_item_url);
 
+        /**
+         * Hides existing annotations on all, or a specific item.
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function hideAnnotations(opt_item_url) {
@@ -111,2 +216,14 @@ return getAnnotorious().hideAnnotations(opt_item_url);
 
+        /**
+         * Disables the selection widget (the small tooltip in the upper left corner which
+         * says "Click and Drag to Annotate"), thus preventing users from creating new annotations
+         * altogether. The typical use case for this is 'read-only' annotated images.
+         * I.e. if you want to add some pre-defined annotations using anno.addAnnotation without the
+         * user being able to add or change anything.
+         *
+         * The selection widget can be hidden on a specific item or globally, on all annotatable items on the page.
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function hideSelectionWidget(opt_item_url) {
@@ -116,2 +233,14 @@ return getAnnotorious().hideSelectionWidget(opt_item_url);
 
+        /**
+         * Highlights the specified annotation, just as if the mouse pointer was hovering over it.
+         * The annotation will remain highlighted until one of these conditions is met:
+         *
+         * -The user moves the mouse into, and out of the annotation
+         * -The user moves the mouse over another annotation
+         * -The highlight is removed by calling this method with an empty parameter, e.g. anno.highlightAnnotation() or anno.highlightAnnotation(undefined)
+         * -Another annotation is highlighted via anno.highlightAnnotation
+         *
+         * @param annotation
+         * @returns {*}
+         */
         function highlightAnnotation(annotation) {
@@ -121,2 +250,11 @@ return getAnnotorious().highlightAnnotation(annotation);
 
+        /**
+         * Makes an item on the screen annotatable (if there is a module available supporting the item format).
+         * You can use this method as an alternative to CSS-based activation. It works just the same way,
+         * and is simply there for convenience, and to prepare for (future) item formats that technically
+         * don't support CSS-based activation (such as Web maps).
+         *
+         * @param item
+         * @returns {*}
+         */
         function makeAnnotatable(item) {
@@ -126,2 +264,9 @@ return getAnnotorious().makeAnnotatable(item);
 
+        /**
+         * Removes all annotations. If the optional parameter opt_item_url is set, only the annotations on the
+         * specified item will be removed. Otherwise all annotations on all items on the page will be removed.
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function removeAll(opt_item_url) {
@@ -131,2 +276,8 @@ return getAnnotorious().removeAll(opt_item_url);
 
+        /**
+         * Removes an annotation from the page.
+         *
+         * @param annotation
+         * @returns {*}
+         */
         function removeAnnotation(annotation) {
@@ -136,5 +287,11 @@ return getAnnotorious().removeAnnotation(annotation);
 
-        /*
-         reset Annotorious
-         Annotorious will destroy the current annotation canvas, and create a new one
+        /**
+         * Performs a 'hard reset' on Annotorious. This means all annotation features will be removed,
+         * and the page will be re-scanned for items with the 'annotatable' CSS class. (Note: this method
+         * could be handy in case you are working with JavaScript image carousels. Just make sure
+         * the images have 'annotatable' set, then reset Annotorious after each page flip.)
+         *
+         * NOTE: Annotorious will destroy the current annotation canvas, and create a new one
+         *
+         * @returns {*}
          */
@@ -145,2 +302,8 @@ function reset() {
 
+        /**
+         * Shows existing annotations on all, or a specific item (if they were hidden using anno.hideAnnotations).
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function showAnnotations(opt_item_url) {
@@ -150,2 +313,10 @@ return getAnnotorious().showAnnotations(opt_item_url);
 
+        /**
+         * Enables the selection widget (the small tooltip in the upper left corner which says
+         * "Click and Drag to Annotate"), thus enabling users to creating new annotations.
+         * (Per default, the selection widget is enabled.)
+         *
+         * @param opt_item_url
+         * @returns {*}
+         */
         function showSelectionWidget(opt_item_url) {
@@ -173,3 +344,3 @@ return getAnnotorious().showSelectionWidget(opt_item_url);
             } else {
-                $element.bind('load', function() {
+                $element.bind('load', function () {
                     $scope.$apply(function () {
@@ -176,0 +347,0 @@ annotoriousService.makeAnnotatable($element[0]);

package.json

 {
     "name": "angular-annotorious",
-    "version": "1.0.1",
+    "version": "1.0.5",
     "title": "Angular Annotorious",
@@ -37,3 +37,3 @@ "description": "Angular directive for Annotorius to start drawing and commenting to images on your Web page.",
         "angular": "~1.3.4",
-        "annotorious-bower": "~0.6.3"
+        "annotorious-bower": "0.6.4"
     },
@@ -40,0 +40,0 @@ "devDependencies": {

README.md

@@ -81,6 +81,51 @@ [Angular Annotorious](https://github.com/igorlino/angular-annotorious/)
 
-
 For more information on how to setup and customise, [check the examples](http://igorlino.github.io/angular-annotorious/).
 
+## Using the angular annotarious service
+
+You may want for very good reasons to create annotations programmatically, or reset them all together.
+There is a very good angular service called 'annotoriousService' that helps you with that:
+
+Assuming you have an image <img> element that has a src attribute.
+```javascript
+var  photo = jQuery(document).find(".your-image")[0];
+```
+
+You could call:
+```javascript
+annotoriousService.makeAnnotatable(photo);
+```
+If you want to reset/reload all annotations in the page:
+```javascript
+annotoriousService.reset();
+```
+
+If you want to set the design of the annotation:
+```javascript
+annotoriousService.setProperties({
+            outline: '#00f',
+            stroke: '#ff0000',
+            fill: 'rgba(255, 0, 0, 0.3)',
+            'hi_stroke': '#00ff00',
+            'hi_fill': 'rgba(0, 255, 0, 0.3)'
+        });
+```
+
+All web applications define their flow/lifecycle. Therefore you may need to adapt the annotorious by calling the reset() method a bit more often.
+
+Saving is done transparently assuming you created a storage provider that uses the annotorious plugin lifecycle.
+
+
+## Storage providers
+
+The storage provider examples are under [src/storage-providers/](https://github.com/igorlino/angular-annotorious/tree/master/js/storage-providers)
+
+There is one example that shows how to save and load annotations to/from the local browser storage. Just as the example, all providers are plug-in for annotorious
+
+It should give you an idea how to do it for other type of storage providers.
+
+If you happen to create another interesting storage provider, that ends up generic enough, you may consider/like to contribute it for the angular-annotorious community, your are very welcome.
+
+
 ## License
 Licensed under MIT license.

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4282827

increased by196.39%

Number of package files

160

increased by300%

Lines of code

47584

increased by9917.68%

Number of lines in readme file

131

increased by52.33%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

5

increased by400%

Dependency changes

• Updatedannotorious-bower@0.6.4