diff --git a/src/components/annotations/index.js b/src/components/annotations/index.js index 71ffcf1c10d..ce3d21ae138 100644 --- a/src/components/annotations/index.js +++ b/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 + ',' + diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index a72fcb28e71..13b28d9f96e 100644 --- a/test/jasmine/tests/config_test.js +++ b/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'); }); + }); });