Merge pull request #505 from plotly/annotation-dragging

Annotations: fixed  dragging

Author: mdtusz

src/components/annotations/index.js

@@ -498,7 +498,7 @@ annotations.draw = function(gd, index, opt, value) {
 
         var annX = Math.round(annPosPx.x - outerwidth / 2),
             annY = Math.round(annPosPx.y - outerheight / 2);
-        ann.attr('transform', 'translate(' + annX + ', ' + annY + ')');
+        ann.call(Lib.setTranslate, annX, annY);
 
         var annbase = 'annotations['+index+']';
 
@@ -591,8 +591,10 @@ annotations.draw = function(gd, index, opt, value) {
                 dragElement.init({
                     element: arrowdrag.node(),
                     prepFn: function() {
-                        annx0 = Number(ann.attr('x'));
-                        anny0 = Number(ann.attr('y'));
+                        var pos = Lib.getTranslate(ann);
+
+                        annx0 = pos.x;
+                        anny0 = pos.y;
                         update = {};
                         if(xa && xa.autorange) {
                             update[xa._name+'.autorange'] = true;
@@ -607,7 +609,7 @@ annotations.draw = function(gd, index, opt, value) {
                         var annxy0 = applyTransform(annx0, anny0),
                             xcenter = annxy0[0] + dx,
                             ycenter = annxy0[1] + dy;
-                        ann.call(Drawing.setPosition, xcenter, ycenter);
+                        ann.call(Lib.setTranslate, xcenter, ycenter);
 
                         update[annbase+'.x'] = xa ?
                             (options.x + dx / xa._m) :
@@ -648,12 +650,14 @@ annotations.draw = function(gd, index, opt, value) {
             dragElement.init({
                 element: ann.node(),
                 prepFn: function() {
-                    x0 = Number(ann.attr('x'));
-                    y0 = Number(ann.attr('y'));
+                    var pos = Lib.getTranslate(ann);
+
+                    x0 = pos.x;
+                    y0 = pos.y;
                     update = {};
                 },
                 moveFn: function(dx, dy) {
-                    ann.call(Drawing.setPosition, x0 + dx, y0 + dy);
+                    ann.call(Lib.setTranslate, x0 + dx, y0 + dy);
                     var csr = 'pointer';
                     if(options.showarrow) {
                         update[annbase+'.ax'] = options.ax + dx;
@@ -679,7 +683,7 @@ annotations.draw = function(gd, index, opt, value) {
                                 heightFraction, 0, 1, options.yanchor);
                         }
                         if(!xa || !ya) {
-                            csr = dragElement.cursor(
+                            csr = dragElement.getCursor(
                                 xa ? 0.5 : update[annbase + '.x'],
                                 ya ? 0.5 : update[annbase + '.y'],
                                 options.xanchor, options.yanchor
@@ -691,7 +695,7 @@ annotations.draw = function(gd, index, opt, value) {
                         x1 = xy1[0] + dx,
                         y1 = xy1[1] + dy;
 
-                    ann.call(Drawing.setPosition, x1, y1);
+                    ann.call(Lib.setTranslate, x0 + dx, y0 + dy);
 
                     anng.attr({
                         transform: 'rotate(' + textangle + ',' +

test/jasmine/tests/config_test.js

@@ -54,7 +54,10 @@ describe('config argument', function() {
                 { x: [1,2,3], y: [3,2,1] }
             ], {
                 width: 600,
-                height: 400
+                height: 400,
+                annotations: [
+                    { text: 'testing', x: 1, y: 1, showarrow: true }
+                ]
             }, { editable: true })
             .then(done);
         });
@@ -78,6 +81,24 @@ describe('config argument', function() {
             expect(editBox.getAttribute('contenteditable')).toBe('true');
         }
 
+        function checkIfDraggable(elClass) {
+            var el = document.getElementsByClassName(elClass)[0];
+
+            var elBox = el.getBoundingClientRect(),
+                elX = elBox.left + elBox.width / 2,
+                elY = elBox.top + elBox.height / 2;
+
+            mouseEvent('mousedown', elX, elY);
+            mouseEvent('mousemove', elX - 20, elY + 20);
+
+            var movedBox = el.getBoundingClientRect();
+
+            expect(movedBox.left).toBe(elBox.left - 20);
+            expect(movedBox.top).toBe(elBox.top + 20);
+
+            mouseEvent('mouseup', elX - 20, elY + 20);
+        }
+
         it('should make titles editable', function() {
             checkIfEditable('gtitle', 'Click to enter Plot title');
         });
@@ -94,22 +115,21 @@ describe('config argument', function() {
             checkIfEditable('legendtext', 'trace 0');
         });
 
-        it('should make legends draggable', function() {
-
-            var legend = document.getElementsByClassName('legend')[0],
-                legendBox = legend.getBoundingClientRect(),
-                legendX = legendBox.left + legendBox.width / 2,
-                legendY = legendBox.top + legendBox.height / 2;
-
-            mouseEvent('mousedown', legendX, legendY);
-            mouseEvent('mousemove', legendX - 20, legendY + 20);
-            mouseEvent('mouseup', legendX - 20, legendY + 20);
+        it('should make annotation labels editable', function() {
+            checkIfEditable('annotation-text-g', 'testing');
+        });
 
-            var movedlegendBox = legend.getBoundingClientRect();
+        it('should make annotation labels draggable', function() {
+            checkIfDraggable('annotation-text-g');
+        });
 
-            expect(movedlegendBox.left).not.toBe(legendBox.left);
-            expect(movedlegendBox.top).not.toBe(legendBox.top);
+        it('should make annotation arrows draggable', function() {
+            checkIfDraggable('annotation-arrow-g');
+        });
 
+        it('should make legends draggable', function() {
+            checkIfDraggable('legend');
         });
+
     });
 });