Merge pull request #194 from harshalitalele/master

#193 added removeHandler method

readme.md

@@ -1,3 +1,10 @@
+To Do:
+1. removeHandler https://github.com/annotorious/annotorious/issues/193
+2. displacement of annotation in chrome
+3. circular annotation - https://github.com/annotorious/annotorious/issues/55
+4. Drawing a polygon using annotorious - update this in gitter openseadragon
+6. Adding custom annotations on OpenSeadragon module
+
 # Annotorious - Image Annotation for the Web
 
 **CURRENTLY UNSUPPORTED**

src/annotorious.js

@@ -126,6 +126,17 @@ annotorious.Annotorious.prototype.addHandler = function(type, handler) {
   });
 }
 
+/**
+ * Removes an event handler to Annotorious.
+ * @param {annotorious.events.EventType} type the event type
+ * @param {Function} handler the handler function
+ */
+annotorious.Annotorious.prototype.removeHandler = function(type, handler) {
+  goog.array.forEach(this._modules, function(module) {
+    module.removeHandler(type, handler);
+  });
+}
+
 /**
  * Adds a plugin to Annotorious.
  * @param {string} plugin_name the plugin name

src/mediatypes/annotator.js

@@ -14,6 +14,10 @@ annotorious.mediatypes.Annotator.prototype.addHandler = function(type, handler)
   this._eventBroker.addHandler(type, handler);  
 }
 
+annotorious.mediatypes.Annotator.prototype.removeHandler = function(type) {
+  this._eventBroker.removeHandler(type);  
+}
+
 annotorious.mediatypes.Annotator.prototype.fireEvent = function(type, event, opt_extra) {
   return this._eventBroker.fireEvent(type, event, opt_extra);
 }

src/mediatypes/module.js

@@ -310,6 +310,24 @@ annotorious.mediatypes.Module.prototype.addHandler = function(type, handler) {
   this._eventHandlers.push({ type: type, handler: handler });
 }
 
+/**
+ * Removes a/all lifecycle event handler/s to this module.
+ * @param {annotorious.events.EventType} type the event type
+ * @param {Function} handler the handler function (optional)
+ */
+annotorious.mediatypes.Module.prototype.removeHandler = function(type, handler) {
+  goog.array.forEach(this._annotators.getValues(), function(annotator, idx, array) {
+    annotator.removeHandler(type, handler);
+  });
+    goog.array.forEach(this._eventHandlers, function(elem, index, array) {
+        if(elem.type === type) {
+            if(!handler || elem.handler === handler) {
+                goog.array.removeAt(array, index);
+            }         
+        }
+    });
+}
+
 /**
  * Adds a plugin to this module.
  * @param {Plugin} plugin the plugin

src/mediatypes/openseadragon/openseadragon.annotator.js

@@ -149,9 +149,7 @@ annotorious.mediatypes.openseadragon.OpenSeadragonAnnotator.prototype.editAnnota
 }
 
 annotorious.mediatypes.openseadragon.OpenSeadragonAnnotator.prototype.fromItemCoordinates = function(itemCoords) {
-  var offset = annotorious.dom.getOffset(this.element); 
-  offset.top += window.pageYOffset;
-  offset.left += window.pageXOffset;
+  var offset = annotorious.dom.getOffset(this.element);
 
   var viewportPoint = new OpenSeadragon.Point(itemCoords.x, itemCoords.y);
   var viewportOpposite = (itemCoords.width) ? new OpenSeadragon.Point(itemCoords.x + itemCoords.width, itemCoords.y + itemCoords.height) : false; 
@@ -193,9 +191,7 @@ annotorious.mediatypes.openseadragon.OpenSeadragonAnnotator.prototype.getActiveS
 
 
 annotorious.mediatypes.openseadragon.OpenSeadragonAnnotator.prototype.toItemCoordinates = function(xy) {
-  var offset = annotorious.dom.getOffset(this.element); 
-  offset.top += window.pageYOffset;
-  offset.left += window.pageXOffset;
+  var offset = annotorious.dom.getOffset(this.element);
 
   var viewportPoint = new OpenSeadragon.Point(xy.x + offset.left, xy.y + offset.top);
   var viewportOpposite = (xy.width) ? new OpenSeadragon.Point(xy.x + offset.left + xy.width - 2, xy.y + offset.top + xy.height - 2) : false;

user-specific-annotation-plugin.js

@@ -0,0 +1,67 @@
+annotorious.plugin.userSpecificAnnotations = function() { }
+
+annotorious.plugin.userSpecificAnnotations.prototype.onInitAnnotator = function(annotator) {
+    var oldAddAnnotation = annotorious.mediatypes.openseadragon.Viewer.prototype.addAnnotation;
+
+    function toCamelCase(str) {
+        return String(str).replace(/\-([a-z])/g, function(all, match) {
+            return match.toUpperCase();
+        });
+    };
+
+    function addCustomAnnotation(annotation) {
+        var geometry = annotation.shapes[0].geometry;
+        var outer = goog.dom.createDom('div', 'annotorious-ol-boxmarker-outer');
+        var inner = goog.dom.createDom('div', 'annotorious-ol-boxmarker-inner');
+        goog.style.setSize(inner, '100%', '100%');
+        goog.dom.appendChild(outer, inner);
+
+        for(var key in annotation.properties) {
+            outer.style[toCamelCase(key)] = annotation.properties[key];
+        }
+
+        var rect = new OpenSeadragon.Rect(geometry.x, geometry.y, geometry.width, geometry.height);
+
+        var overlay = {annotation: annotation, outer: outer, inner: inner};
+
+        var self = this;
+        goog.events.listen(inner, goog.events.EventType.MOUSEOVER, function(event) {
+            if (!self._currentlyHighlightedOverlay)
+                self._updateHighlight(overlay);
+
+            self._lastHoveredOverlay = overlay;
+        });
+
+        goog.events.listen(inner, goog.events.EventType.MOUSEOUT, function(event) {
+            delete self._lastHoveredOverlay;
+            self._popup.startHideTimer();
+        });
+
+        this._overlays.push(overlay);
+
+        goog.array.sort(this._overlays, function(a, b) {
+            var shapeA = a.annotation.shapes[0];
+            var shapeB = b.annotation.shapes[0];
+            return annotorious.shape.getSize(shapeB) - annotorious.shape.getSize(shapeA);
+        });
+
+        var zIndex = 1;
+        goog.array.forEach(this._overlays, function(overlay) {
+            goog.style.setStyle(overlay.outer, 'z-index', zIndex);
+            zIndex++;
+        });
+
+        this._osdViewer.addOverlay(outer, rect);
+    }
+
+
+    annotorious.mediatypes.openseadragon.Viewer.prototype.addAnnotation = function(annotation, opt_replace) {
+        if(annotation.properties) {
+            addCustomAnnotation.apply(this, [annotation]);
+        } else {
+            oldAddAnnotation.apply(this, [annotation, opt_replace]);
+        }
+    }
+}
+
+anno.addPlugin('userSpecificAnnotations', {});