Merge pull request #694 from OpenGeoscience/fix-rotated-rectangles

Fix drawing rectangle annotations on a rotated map.

src/annotation.js

@@ -616,6 +616,23 @@ var rectangleAnnotation = function (args) {
       'strokeColor', 'strokeOffset', 'strokeOpacity', 'strokeWidth'];
   };
 
+  /**
+   * Set three corners based on an initial corner and a mouse event.
+   *
+   * @param {array} an array of four corners to update.
+   * @param {geo.event} evt the mouse move event.
+   */
+  this._setCornersFromMouse = function (corners, evt) {
+    var map = this.layer().map(),
+        c0 = map.gcsToDisplay({x: corners[0].x, y: corners[0].y}, null),
+        c2 = map.gcsToDisplay(evt.mapgcs, null),
+        c1 = {x: c2.x, y: c0.y},
+        c3 = {x: c0.x, y: c2.y};
+    corners[2] = $.extend({}, evt.mapgcs);
+    corners[1] = map.displayToGcs(c1, null);
+    corners[3] = map.displayToGcs(c3, null);
+  };
+
   /**
    * Handle a mouse move on this annotation.
    *
@@ -629,9 +646,7 @@ var rectangleAnnotation = function (args) {
     }
     var corners = this.options('corners');
     if (corners.length) {
-      corners[2] = $.extend({}, evt.mapgcs);
-      corners[1].x = evt.mapgcs.x;
-      corners[3].y = evt.mapgcs.y;
+      this._setCornersFromMouse(corners, evt);
       return true;
     }
   };
@@ -659,9 +674,7 @@ var rectangleAnnotation = function (args) {
     }
     evt.handled = true;
     if (corners.length) {
-      corners[2] = $.extend({}, evt.mapgcs);
-      corners[1].x = evt.mapgcs.x;
-      corners[3].y = evt.mapgcs.y;
+      this._setCornersFromMouse(corners, evt);
       this.state(annotationState.done);
       return 'done';
     }

tests/cases/annotation.js

@@ -292,7 +292,11 @@ describe('geo.annotation', function () {
       expect(geojson.geometry.coordinates[0][2][1]).toBeCloseTo(1);
     });
     it('mouseMove', function () {
-      var ann = geo.annotation.rectangleAnnotation({corners: corners});
+      var map = create_map();
+      var layer = map.createLayer('annotation', {
+        annotations: ['rectangle']
+      });
+      var ann = geo.annotation.rectangleAnnotation({layer: layer, corners: corners});
       expect(ann.mouseMove({mapgcs: {x: 6, y: 4}})).toBe(undefined);
       expect(ann.options('corners')).toEqual(corners);
       ann.state(geo.annotation.state.create);