Release v0.5.4

src/js/annotations_controller.js

@@ -38,6 +38,8 @@ function AnnotationsController(canvas_id, default_config) {
             }
 
             this.paper_scope.setup(this.canvas);
+            // clean the canvas
+            this.clear();
         } else {
             console.warn("Canvas already initialized");
         }
@@ -65,7 +67,6 @@ function AnnotationsController(canvas_id, default_config) {
 
     this.refreshView = function() {
         this._activate_paper_scope();
-        console.log('Refreshing canvas');
         paper.view.draw();
     };
 

src/js/freehand_drawing_tool.js

@@ -1,6 +1,6 @@
 AnnotationsEventsController.FREEHAND_DRAWING_TOOL = 'freehand_drawer';
 
-AnnotationsEventsController.prototype.initializeFreehandDrawingTool = function(path_config, switch_on_id) {
+AnnotationsEventsController.prototype.initializeFreehandDrawingTool = function(path_config, switch_on_id, label_prefix) {
     //by default, initialize dummy tool
     this.initializeDummyTool();
 
@@ -9,12 +9,23 @@ AnnotationsEventsController.prototype.initializeFreehandDrawingTool = function(p
         this.annotation_controller.tmp_freehand_path = undefined;
         this.annotation_controller.tmp_path_id = 'tmp_freehand_path';
         this.annotation_controller.path_config = path_config;
+        this.label_prefix = (typeof label_prefix === 'undefined') ? 'polygon' : label_prefix;
 
         this.annotation_controller.updatePathConfig = function (path_config) {
             this.path_config = path_config;
         };
 
-        this.annotation_controller.createFreehandPath = function(x, y) {
+        this.annotation_controller.extendPathConfig = function (path_config) {
+            this.path_config = $.extend({}, this.path_config, path_config);
+        };
+
+        this.annotation_controller.setFreehandPathLabelPrefix = function (label_prefix) {
+            if (typeof label_prefix !== 'undefined') {
+                this.label_prefix = label_prefix;
+            }
+        };
+
+        this.annotation_controller.createFreehandPath = function (x, y) {
             this.drawPolygon(this.tmp_path_id, [], undefined,
                 this.path_config, false);
             this.selectShape(this.tmp_path_id);
@@ -41,7 +52,7 @@ AnnotationsEventsController.prototype.initializeFreehandDrawingTool = function(p
             this.tmp_freehand_path.simplifyPath(this.x_offset, this.y_offset);
             var tmp_path_json = this.getShapeJSON(this.tmp_path_id);
             this.deleteShape(this.tmp_path_id, false);
-            tmp_path_json.shape_id = this._getShapeId('polygon');
+            tmp_path_json.shape_id = this._getShapeId(this.label_prefix);
             this.drawShapeFromJSON(tmp_path_json, true);
             this.tmp_freehand_path = undefined;
             $("#" + this.canvas_id).trigger('freehand_polygon_saved', [tmp_path_json.shape_id]);

src/js/measuring_tool.js

@@ -15,6 +15,14 @@ AnnotationsEventsController.prototype.initializeMeasuringTool = function(polylin
 
         this.annotation_controller.ruler_out_id = undefined;
 
+        this.annotation_controller.updateRulerConfig = function(ruler_config) {
+            this.ruler_config = ruler_config;
+        };
+
+        this.annotation_controller.extendRulerConfig = function(ruler_config) {
+            this.ruler_config = $.extend({}, this.ruler_config, ruler_config);
+        };
+
         this.annotation_controller._pointToRuler = function(x, y) {
             if (this.ruler) {
                 this.ruler.addPoint(x, y);

src/js/polygons_drawing_tool.js

@@ -15,6 +15,10 @@ AnnotationsEventsController.prototype.initializePolygonDrawingTool = function (p
             this.polygon_config = polygon_config;
         };
 
+        this.annotation_controller.extendPolygonConfig = function (polygon_config) {
+            this.polygon_config = $.extend({}, this.polygon_config, polygon_config);
+        };
+
         this.annotation_controller._pointToPolygon = function (x, y) {
             var trigger_label = undefined;
             if (this.tmp_polygon) {
@@ -58,10 +62,11 @@ AnnotationsEventsController.prototype.initializePolygonDrawingTool = function (p
             }
         };
 
-        this.annotation_controller.saveTemporaryPolygon = function () {
+        this.annotation_controller.saveTemporaryPolygon = function (label_prefix) {
             var tmp_polygon_json = this.getShapeJSON(this.tmp_polygon_id);
             this.deleteShape(this.tmp_polygon_id, false);
-            tmp_polygon_json.shape_id = this._getShapeId('polygon');
+            var polygon_label_prefix = (typeof label_prefix === 'undefined') ? 'polygon' : label_prefix;
+            tmp_polygon_json.shape_id = this._getShapeId(polygon_label_prefix);
             // apply translation
             var ac = this;
             tmp_polygon_json.segments = $.map(tmp_polygon_json.segments, function (segment) {

src/js/shapes.js

@@ -28,6 +28,33 @@ function Shape(id, transform_matrix) {
         }
     };
 
+    this._shapeToPath = function() {
+        try {
+            return this.paper_shape.toPath(false);
+        } catch(err) {
+            return this.paper_shape;
+        }
+    };
+
+    this.setStrokeColor = function(color, alpha) {
+        var color_value = (typeof color === 'undefined') ? this.stroke_color.toCSS(true) : color;
+        var alpha_value = (typeof alpha === 'undefined') ? this.stroke_color.getAlpha() : alpha;
+        this.stroke_color = ColorsAdapter.hexToPaperColor(color_value, alpha_value);
+        this.paper_shape.setStrokeColor(this.stroke_color);
+    };
+
+    this.setFillColor = function(color, alpha) {
+        var color_value = (typeof color === 'undefined') ? this.fill_color.toCSS(true) : color;
+        var alpha_value = (typeof alpha === 'undefined') ? this.fill_color.getAlpha() : alpha;
+        this.fill_color = ColorsAdapter.hexToPaperColor(color_value, alpha_value);
+        this.paper_shape.setFillColor(this.fill_color);
+    };
+
+    this.setStrokeWidth = function(stroke_width) {
+        this.stroke_width = stroke_width;
+        this.paper_shape.setStrokeWidth = this.stroke_width;
+    };
+
     this.transformShape = function(transform_matrix) {
         if (typeof this.paper_shape !== 'undefined') {
             this.paper_shape.transform(transform_matrix);
@@ -48,20 +75,29 @@ function Shape(id, transform_matrix) {
         }
     };
 
+    this.getPathSegments = function() {
+        if (typeof this.paper_shape !== 'undefined') {
+            return this._shapeToPath().getSegments();
+        } else {
+            return undefined;
+        }
+    };
+
     this.getArea = function(pixel_size, decimal_digits) {
         var decimals = (typeof decimal_digits === 'undefined') ? 2 : decimal_digits;
         if (typeof this.paper_shape !== 'undefined') {
-            var area = Math.abs(this.paper_shape.toPath(false).area * pixel_size);
+            var area = Math.abs(this._shapeToPath().area * Math.pow(pixel_size, 2));
             return Number(area.toFixed(decimals));
         } else {
             console.log('Shape not initialized');
+            return undefined;
         }
     };
 
     this.getPerimeter = function(pixel_size, decimal_digits) {
         var decimals = (typeof decimal_digits === 'undefined') ? 2 : decimal_digits;
         if (typeof this.paper_shape !== 'undefined') {
-            var perimeter = this.paper_shape.toPath(false).length * pixel_size;
+            var perimeter = this._shapeToPath().length * pixel_size;
             return Number(perimeter.toFixed(decimals));
         } else {
             console.log('Shape not initialized');
@@ -80,14 +116,44 @@ function Shape(id, transform_matrix) {
         }
     };
 
-    this.contains = function(point_x, point_y) {
+    this.containsPoint = function(point_x, point_y) {
         var point_obj = new paper.Point(point_x, point_y);
         if (typeof this.paper_shape !== 'undefined')
             return this.paper_shape.contains(point_obj);
         else
             console.info('Shape not initialized');
     };
 
+    this.containsShape = function(shape) {
+        var shape_segments = shape.getPathSegments(shape);
+        if ((typeof this.paper_shape !== 'undefined') && (typeof shape_segments !== 'undefined')) {
+            for (var segment_id in shape_segments) {
+                if (!this.paper_shape.contains(shape_segments[segment_id].point)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        else {
+            console.error('Both shapes must be initialized');
+            return undefined;
+        }
+    };
+
+    this.getCoveragePercentage = function(shape) {
+        var shape_area = shape.getArea();
+        if ((typeof this.paper_shape !== 'undefined') && (typeof shape_area !== 'undefined')) {
+            var intersection = this._shapeToPath().intersect(shape._shapeToPath());
+            // passing 1 as pixel size because we only need area in pixels to get the coverage ratio
+            var coverage_ratio = Math.abs(intersection.area) / this.getArea(1);
+            intersection.remove();
+            return (coverage_ratio * 100);
+        } else {
+            console.error('Both shapes must be initialized');
+            return undefined;
+        }
+    };
+
     this.configure = function(shape_config) {
         if (typeof this.paper_shape !== 'undefined') {
             this.fill_color = ColorsAdapter.hexToPaperColor(shape_config.fill_color, shape_config.fill_alpha);
@@ -369,6 +435,14 @@ function Path(id, segments, closed, transform_matrix) {
         this.initializeEvents(activate_events);
     };
 
+    this.getPathSegments = function() {
+        if (typeof this.paper_shape !== 'undefined') {
+            return this.paper_shape.getSegments();
+        } else {
+            return undefined;
+        }
+    };
+
     this.updateShapePosition = function(delta_x, delta_y) {
         var path_segments = this.segments;
         this.segments.forEach(function(segment, index) {
@@ -460,11 +534,20 @@ Path.prototype = new Shape();
 function Polyline(id, segments, transform_matrix) {
     Path.call(this, id, segments, false, transform_matrix);
 
+    this.containsShape = function(shape) {
+        return false;
+    };
+
     this.getArea = function(pixel_size) {
         // lines have no area
         return undefined;
     };
 
+    this.getCoveragePercentage = function(shape) {
+        // lines have no area, it is impossible to calculate coverage
+        return undefined;
+    };
+
     var pathToJSON = this.toJSON;
     this.toJSON = function(x_offset, y_offset) {
         var shape_json = pathToJSON.apply(this, [x_offset, y_offset]);

src/js/viewport_controller.js

@@ -8,6 +8,8 @@ function ViewerController(div_id, prefix_url, tile_sources, viewer_config, image
 
     this.buildViewer = function() {
         if (this.viewer === undefined) {
+            // clean every object contained in the DIV that will host the viewer
+            $('#' + this.div_id).empty();
             var base_config = {
                 id: this.div_id,
                 prefixUrl: this.prefix_url,