From 8ccad276b2178ff6d657ac35eef6586aee9faaf3 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Sat, 23 Sep 2017 16:50:49 +0200
Subject: [PATCH] Implement support for polygon annotations

---
 src/core/annotation.js           | 12 ++++++++++++
 src/display/annotation_layer.js  | 22 +++++++++++++++++++---
 web/annotation_layer_builder.css |  1 +
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/core/annotation.js b/src/core/annotation.js
index 4da77b0b3..d9119a951 100644
--- a/src/core/annotation.js
+++ b/src/core/annotation.js
@@ -90,6 +90,9 @@ class AnnotationFactory {
       case 'PolyLine':
         return new PolylineAnnotation(parameters);
 
+      case 'Polygon':
+        return new PolygonAnnotation(parameters);
+
       case 'Highlight':
         return new HighlightAnnotation(parameters);
 
@@ -940,6 +943,15 @@ class PolylineAnnotation extends Annotation {
   }
 }
 
+class PolygonAnnotation extends PolylineAnnotation {
+  constructor(parameters) {
+    // Polygons are specific forms of polylines, so reuse their logic.
+    super(parameters);
+
+    this.data.annotationType = AnnotationType.POLYGON;
+  }
+}
+
 class HighlightAnnotation extends Annotation {
   constructor(parameters) {
     super(parameters);
diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index 3a0dd13cd..41272e93c 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -83,6 +83,9 @@ class AnnotationElementFactory {
       case AnnotationType.POLYLINE:
         return new PolylineAnnotationElement(parameters);
 
+      case AnnotationType.POLYGON:
+        return new PolygonAnnotationElement(parameters);
+
       case AnnotationType.HIGHLIGHT:
         return new HighlightAnnotationElement(parameters);
 
@@ -604,7 +607,7 @@ class PopupAnnotationElement extends AnnotationElement {
   render() {
     // Do not render popup annotations for parent elements with these types as
     // they create the popups themselves (because of custom trigger divs).
-    const IGNORE_TYPES = ['Line', 'Square', 'Circle', 'PolyLine'];
+    const IGNORE_TYPES = ['Line', 'Square', 'Circle', 'PolyLine', 'Polygon'];
 
     this.container.className = 'popupAnnotation';
 
@@ -919,6 +922,9 @@ class PolylineAnnotationElement extends AnnotationElement {
     let isRenderable = !!(parameters.data.hasPopup ||
                           parameters.data.title || parameters.data.contents);
     super(parameters, isRenderable, /* ignoreBorder = */ true);
+
+    this.containerClassName = 'polylineAnnotation';
+    this.svgElementName = 'svg:polyline';
   }
 
   /**
@@ -929,7 +935,7 @@ class PolylineAnnotationElement extends AnnotationElement {
    * @returns {HTMLSectionElement}
    */
   render() {
-    this.container.className = 'polylineAnnotation';
+    this.container.className = this.containerClassName;
 
     // Create an invisible polyline with the same points that acts as the
     // trigger for the popup. Only the polyline itself should trigger the
@@ -953,7 +959,7 @@ class PolylineAnnotationElement extends AnnotationElement {
     points = points.join(' ');
 
     let borderWidth = data.borderStyle.width;
-    let polyline = this.svgFactory.createElement('svg:polyline');
+    let polyline = this.svgFactory.createElement(this.svgElementName);
     polyline.setAttribute('points', points);
     polyline.setAttribute('stroke-width', borderWidth);
     polyline.setAttribute('stroke', 'transparent');
@@ -970,6 +976,16 @@ class PolylineAnnotationElement extends AnnotationElement {
   }
 }
 
+class PolygonAnnotationElement extends PolylineAnnotationElement {
+  constructor(parameters) {
+    // Polygons are specific forms of polylines, so reuse their logic.
+    super(parameters);
+
+    this.containerClassName = 'polygonAnnotation';
+    this.svgElementName = 'svg:polygon';
+  }
+}
+
 class HighlightAnnotationElement extends AnnotationElement {
   constructor(parameters) {
     let isRenderable = !!(parameters.data.hasPopup ||
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index ef26847ae..6154d748b 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -192,6 +192,7 @@
 .annotationLayer .squareAnnotation svg rect,
 .annotationLayer .circleAnnotation svg ellipse,
 .annotationLayer .polylineAnnotation svg polyline,
+.annotationLayer .polygonAnnotation svg polygon,
 .annotationLayer .stampAnnotation,
 .annotationLayer .fileAttachmentAnnotation {
   cursor: pointer;