From c233d88eee32a47a16ce71d8833741b0836a0d05 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Tue, 4 Oct 2016 15:30:19 +0200 Subject: [PATCH 01/12] specify a custom label for new polygons and freehand paths --- src/js/freehand_drawing_tool.js | 17 ++++++++++++++--- src/js/polygons_drawing_tool.js | 9 +++++++-- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/js/freehand_drawing_tool.js b/src/js/freehand_drawing_tool.js index 611d053..8b6b966 100644 --- a/src/js/freehand_drawing_tool.js +++ b/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]); diff --git a/src/js/polygons_drawing_tool.js b/src/js/polygons_drawing_tool.js index 737794e..e11f4fb 100644 --- a/src/js/polygons_drawing_tool.js +++ b/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) { From b712cdfcf6f516431081cfca9b11ddb67d619c98 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Fri, 7 Oct 2016 11:46:20 +0200 Subject: [PATCH 02/12] clear viewer and canvas when initializing new ones --- src/js/annotations_controller.js | 3 ++- src/js/viewport_controller.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/js/annotations_controller.js b/src/js/annotations_controller.js index 6141b9b..60fcd14 100644 --- a/src/js/annotations_controller.js +++ b/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(); }; diff --git a/src/js/viewport_controller.js b/src/js/viewport_controller.js index 8990141..0d3af0c 100644 --- a/src/js/viewport_controller.js +++ b/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, From 633ac3e832c01ad72fad946d5e99bb12d509d6b0 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Fri, 7 Oct 2016 17:22:35 +0200 Subject: [PATCH 03/12] renamed method --- src/js/shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/shapes.js b/src/js/shapes.js index 2b0f916..84127e3 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -80,7 +80,7 @@ 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); From 792ef6c50651d53776b9e1c05600e87f52c0875d Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Fri, 7 Oct 2016 17:22:55 +0200 Subject: [PATCH 04/12] added method to check if a shape fully contains another one --- src/js/shapes.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/js/shapes.js b/src/js/shapes.js index 84127e3..c89e6a3 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -88,6 +88,21 @@ function Shape(id, transform_matrix) { console.info('Shape not initialized'); }; + this.containsShape = function(shape) { + var shape_segments = shape.paper_shape.toPath().getSegments(); + if (typeof this.paper_shape !== 'undefined') { + for (var segment_id in shape_segments) { + if (!this.paper_shape.contains(shape_segments[segment_id].point)) { + return false; + } + } + return true; + } + else { + console.info('Shape not initialized'); + } + }; + this.configure = function(shape_config) { if (typeof this.paper_shape !== 'undefined') { this.fill_color = ColorsAdapter.hexToPaperColor(shape_config.fill_color, shape_config.fill_alpha); @@ -460,6 +475,10 @@ 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; From cd689306db792fdd6db2b3ebcc79d97e5ee95610 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Tue, 11 Oct 2016 10:46:35 +0200 Subject: [PATCH 05/12] fixed bug related to shape's containment check --- src/js/shapes.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/js/shapes.js b/src/js/shapes.js index c89e6a3..abb48c8 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -48,6 +48,14 @@ function Shape(id, transform_matrix) { } }; + this.getPathSegments = function() { + if (typeof this.paper_shape !== 'undefined') { + return this.paper_shape.toPath().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') { @@ -89,8 +97,8 @@ function Shape(id, transform_matrix) { }; this.containsShape = function(shape) { - var shape_segments = shape.paper_shape.toPath().getSegments(); - if (typeof this.paper_shape !== 'undefined') { + 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; @@ -99,7 +107,8 @@ function Shape(id, transform_matrix) { return true; } else { - console.info('Shape not initialized'); + console.error('Both shapes must be initialized'); + return undefined; } }; @@ -384,6 +393,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) { From 70224aa45a6221da9d74a72d6ed221bcf6b54259 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Tue, 18 Oct 2016 10:48:57 +0200 Subject: [PATCH 06/12] fixed bug when calculating area in microns --- src/js/shapes.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/js/shapes.js b/src/js/shapes.js index abb48c8..2238665 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -59,7 +59,12 @@ function Shape(id, transform_matrix) { 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 = undefined; + try { + area = Math.abs(this.paper_shape.toPath().area * Math.pow(pixel_size, 2)); + } catch(err) { + area = Math.abs(this.paper_shape.area * Math.pow(pixel_size, 2)); + } return Number(area.toFixed(decimals)); } else { console.log('Shape not initialized'); From a32ef7f98bdddc55d3f82eebb55c8ebb907a33a0 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Wed, 19 Oct 2016 11:48:54 +0200 Subject: [PATCH 07/12] added method to check coverage of a given shape against current one --- src/js/shapes.js | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/js/shapes.js b/src/js/shapes.js index 2238665..a178908 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -28,6 +28,14 @@ function Shape(id, transform_matrix) { } }; + this._shapeToPath = function() { + try { + return this.paper_shape.toPath(); + } catch(err) { + return this.paper_shape; + } + }; + this.transformShape = function(transform_matrix) { if (typeof this.paper_shape !== 'undefined') { this.paper_shape.transform(transform_matrix); @@ -50,7 +58,7 @@ function Shape(id, transform_matrix) { this.getPathSegments = function() { if (typeof this.paper_shape !== 'undefined') { - return this.paper_shape.toPath().getSegments(); + return this._shapeToPath().getSegments(); } else { return undefined; } @@ -59,22 +67,18 @@ function Shape(id, transform_matrix) { this.getArea = function(pixel_size, decimal_digits) { var decimals = (typeof decimal_digits === 'undefined') ? 2 : decimal_digits; if (typeof this.paper_shape !== 'undefined') { - var area = undefined; - try { - area = Math.abs(this.paper_shape.toPath().area * Math.pow(pixel_size, 2)); - } catch(err) { - area = Math.abs(this.paper_shape.area * Math.pow(pixel_size, 2)); - } + 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'); @@ -117,6 +121,19 @@ function Shape(id, transform_matrix) { } }; + 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 = intersection.area / this.getArea(1); + 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); @@ -506,6 +523,11 @@ function Polyline(id, segments, transform_matrix) { 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]); From b7b2af7faa5f863b18df3a7eefedd929c83636f1 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Thu, 20 Oct 2016 15:08:47 +0200 Subject: [PATCH 08/12] bug fix --- src/js/shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/shapes.js b/src/js/shapes.js index a178908..7942956 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -30,7 +30,7 @@ function Shape(id, transform_matrix) { this._shapeToPath = function() { try { - return this.paper_shape.toPath(); + return this.paper_shape.toPath(false); } catch(err) { return this.paper_shape; } From 20b19f943f177066e9d64ab195a7e7a3318a8d87 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Thu, 20 Oct 2016 15:30:27 +0200 Subject: [PATCH 09/12] prevent the creation of a new path when calculating intersection betweem two shapes --- src/js/shapes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/shapes.js b/src/js/shapes.js index 7942956..196319d 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -127,6 +127,7 @@ function Shape(id, transform_matrix) { 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 = intersection.area / this.getArea(1); + intersection.remove(); return (coverage_ratio * 100); } else { console.error('Both shapes must be initialized'); From 80a2571eaaca4696b8b18cb26593ec2514d87681 Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Thu, 3 Nov 2016 17:21:31 +0100 Subject: [PATCH 10/12] update or extend ruler's configuration --- src/js/measuring_tool.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/js/measuring_tool.js b/src/js/measuring_tool.js index a08c435..8020cd1 100644 --- a/src/js/measuring_tool.js +++ b/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); From cb2765c7c2928b8112e1a820549ac8c99d1efc5b Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Fri, 4 Nov 2016 15:18:59 +0100 Subject: [PATCH 11/12] bug fix --- src/js/shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/shapes.js b/src/js/shapes.js index 196319d..c72ea21 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -126,7 +126,7 @@ function Shape(id, transform_matrix) { 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 = intersection.area / this.getArea(1); + var coverage_ratio = Math.abs(intersection.area) / this.getArea(1); intersection.remove(); return (coverage_ratio * 100); } else { From 3890c69e5e3f531ab2ad54b6416592a19a28775f Mon Sep 17 00:00:00 2001 From: Luca Lianas Date: Mon, 7 Nov 2016 12:38:17 +0100 Subject: [PATCH 12/12] shape's stroke color, fill color and stroke width can be changed after the shape has been created --- src/js/shapes.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/js/shapes.js b/src/js/shapes.js index c72ea21..53480fc 100644 --- a/src/js/shapes.js +++ b/src/js/shapes.js @@ -36,6 +36,25 @@ function Shape(id, transform_matrix) { } }; + 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);