Skip to content

Commit fd07290

Browse files
nicholas-esterernicholas-esterer
committed
Test dragging the whole annotation
1 parent 156b73b commit fd07290

File tree

3 files changed

+126
-28
lines changed

3 files changed

+126
-28
lines changed

‎test/image/mocks/domain_refs_editable.json

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,10 @@
132132
"y": 0.6,
133133
"axref": "x3 domain",
134134
"ayref": "y3 domain",
135-
"ax": 0.5,
136-
"ay": 0.7
135+
"ax": 0.7,
136+
"ay": 0.8,
137+
"arrowcolor": "rgb(231, 200, 100)",
138+
"arrowwidth": 3
137139
},{
138140
"text": "B",
139141
"bordercolor": "rgb(200, 200, 232)",
@@ -144,10 +146,14 @@
144146
"axref": "x4 domain",
145147
"ayref": "y4 domain",
146148
"ax": 0.1,
147-
"ay": 0.2
148-
}]
149+
"ay": 0.2,
150+
"arrowcolor": "rgb(231, 200, 200)",
151+
"arrowwidth": 3
152+
}],
153+
"dragmode": "drawopenpath"
149154
},
150155
"config": {
151-
"editable": true
156+
"editable": true,
157+
"modeBarButtonsToAdd": ["drawopenpath"]
152158
}
153159
}

‎test/jasmine/assets/domain_ref/components.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -437,12 +437,13 @@ function compareBBoxes(a, b) {
437437
true);
438438
}
439439

440-
function findAROByColor(color, id, type) {
440+
function findAROByColor(color, id, type, colorAttribute) {
441441
id = (id === undefined) ? '' : id + ' ';
442442
type = (type === undefined) ? 'path' : type;
443+
colorAttribute = (colorAttribute === undefined) ? 'stroke' : colorAttribute;
443444
var selector = id + type;
444445
var ret = d3.selectAll(selector).filter(function() {
445-
return this.style.stroke === color;
446+
return this.style[colorAttribute] === color;
446447
}).node();
447448
return ret;
448449
}

‎test/jasmine/tests/domain_ref_interact_test.js

Lines changed: 112 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,36 @@ var getSVGElemScreenBBox = require(
1010
var testMock = require('../../image/mocks/domain_refs_editable.json');
1111
var delay = require('../assets/delay');
1212
var mouseEvent = require('../assets/mouse_event');
13+
// we have to use drag to move annotations for some reason
1314
var drag = require('../assets/drag');
15+
var SVGTools = require('../assets/svg_tools');
1416

1517
// color of the rectangles
1618
var rectColor1 = 'rgb(10, 20, 30)';
1719
var rectColor2 = 'rgb(10, 20, 31)';
1820
var rectColor3 = 'rgb(100, 200, 232)';
1921
var rectColor4 = 'rgb(200, 200, 232)';
22+
var arrowColor1 = 'rgb(231, 200, 100)';
23+
var arrowColor2 = 'rgb(231, 200, 200)';
2024

21-
var DELAY_TIME = 0;
25+
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
26+
27+
var DELAY_TIME = 1000;
28+
29+
function svgRectToJSON(svgrect) {
30+
return JSON.stringify(SVGTools.svgRectToObj(svgrect));
31+
}
32+
33+
function checkBBox(bboxBefore, bboxAfter, moveX, moveY) {
34+
// We print out the objects for sanity, because sometimes Jasmine says a
35+
// test passed when it actually did nothing!
36+
console.log('bboxBefore', svgRectToJSON(bboxBefore));
37+
console.log('bboxAfter', svgRectToJSON(bboxAfter));
38+
console.log('moveX', moveX);
39+
console.log('moveY', moveY);
40+
expect(bboxAfter.x).toBeCloseTo(bboxBefore.x + moveX, 2);
41+
expect(bboxAfter.y).toBeCloseTo(bboxBefore.y + moveY, 2);
42+
}
2243

2344
function testObjectMove(objectColor, moveX, moveY, type) {
2445
var bboxBefore = getSVGElemScreenBBox(
@@ -37,27 +58,83 @@ function testObjectMove(objectColor, moveX, moveY, type) {
3758
var bboxAfter = getSVGElemScreenBBox(
3859
domainRefComponents.findAROByColor(objectColor, undefined, type)
3960
);
40-
expect(bboxAfter.x).toBeCloseTo(bboxBefore.x + moveX, 2);
41-
expect(bboxAfter.y).toBeCloseTo(bboxBefore.y + moveY, 2);
61+
checkBBox(bboxBefore, bboxAfter, moveX, moveY);
62+
}
63+
64+
function dragPos0(bbox, corner) {
65+
if(corner === 'bl') {
66+
return [ bbox.x + bbox.width * 0.5,
67+
bbox.y + bbox.height * 0.5 - 10 ];
68+
} else if(corner === 'tr') {
69+
return [ bbox.x + bbox.width * 0.5,
70+
bbox.y + bbox.height * 0.5 + 10 ];
71+
} else {
72+
return [ bbox.x + bbox.width * 0.5,
73+
bbox.y + bbox.height * 0.5];
74+
}
4275
}
4376

44-
function testAnnotationMove(objectColor, moveX, moveY, type) {
77+
// Tests moving the annotation label
78+
function testAnnotationMoveLabel(objectColor, moveX, moveY) {
79+
var bboxAfter;
80+
// Get where the text box (label) is before dragging it
4581
var bboxBefore = getSVGElemScreenBBox(
46-
domainRefComponents.findAROByColor(objectColor, undefined, type)
82+
domainRefComponents.findAROByColor(objectColor, undefined, 'rect')
4783
);
48-
var opt = {
49-
pos0: [ bboxBefore.x + bboxBefore.width * 0.5,
50-
bboxBefore.y + bboxBefore.height * 0.5 ],
84+
// we have to use drag to move annotations for some reason
85+
var optLabelDrag = {
86+
pos0: dragPos0(bboxBefore)
5187
};
52-
opt.dpos = [moveX, moveY];
53-
return (new Promise(function() { drag(opt); }))
88+
optLabelDrag.dpos = [moveX, moveY];
89+
console.log('optLabelDrag', optLabelDrag);
90+
// drag the label, this will make the arrow rotate around the arrowhead
91+
return (new Promise(function(resolve) {
92+
drag(optLabelDrag); resolve();
93+
}))
94+
.then(delay(DELAY_TIME))
5495
.then(function() {
55-
var bboxAfter = getSVGElemScreenBBox(
56-
domainRefComponents.findAROByColor(objectColor, undefined, type)
96+
// then check it's position
97+
bboxAfter = getSVGElemScreenBBox(
98+
domainRefComponents.findAROByColor(objectColor, undefined, 'rect')
5799
);
58-
expect(bboxAfter.x).toBeCloseTo(bboxBefore.x + moveX, 2);
59-
expect(bboxAfter.y).toBeCloseTo(bboxBefore.y + moveY, 2);
60-
});
100+
checkBBox(bboxBefore, bboxAfter, moveX, moveY);
101+
})
102+
.then(delay(DELAY_TIME));
103+
}
104+
105+
// Tests moving the whole annotation
106+
function testAnnotationMoveWhole(objectColor, arrowColor, moveX, moveY, corner) {
107+
var bboxAfter;
108+
var arrowBBoxAfter;
109+
// Get where the text box (label) is before dragging it
110+
var bboxBefore = getSVGElemScreenBBox(
111+
domainRefComponents.findAROByColor(objectColor, undefined, 'rect')
112+
);
113+
var arrowBBoxBefore = getSVGElemScreenBBox(
114+
domainRefComponents.findAROByColor(arrowColor, undefined, 'path', 'fill')
115+
);
116+
var optArrowDrag = {
117+
pos0: dragPos0(arrowBBoxBefore, corner)
118+
};
119+
optArrowDrag.dpos = [moveX, moveY];
120+
console.log('optArrowDrag', optArrowDrag);
121+
// drag the whole annotation
122+
(new Promise(function(resolve) {
123+
drag(optArrowDrag); resolve();
124+
}))
125+
.then(delay(DELAY_TIME))
126+
.then(function() {
127+
// check the new position of the arrow and label
128+
arrowBBoxAfter = getSVGElemScreenBBox(
129+
domainRefComponents.findAROByColor(arrowColor, undefined, 'path', 'fill')
130+
);
131+
bboxAfter = getSVGElemScreenBBox(
132+
domainRefComponents.findAROByColor(objectColor, undefined, 'rect')
133+
);
134+
checkBBox(arrowBBoxBefore, arrowBBoxAfter, moveX, moveY);
135+
checkBBox(bboxBefore, bboxAfter, moveX, moveY);
136+
})
137+
.then(delay(DELAY_TIME));
61138
}
62139

63140
describe('Shapes referencing domain', function() {
@@ -82,11 +159,21 @@ describe('Shapes referencing domain', function() {
82159
.then(done);
83160
};
84161
}
85-
function testAnnotationMoveItFun(color, x, y, type) {
162+
function testAnnotationMoveLabelItFun(color, x, y) {
163+
return function(done) {
164+
Plotly.newPlot(gd, Lib.extendDeep({}, testMock))
165+
.then(delay(DELAY_TIME))
166+
.then(testAnnotationMoveLabel(color, x, y))
167+
.then(delay(DELAY_TIME))
168+
.catch(failTest)
169+
.then(done);
170+
};
171+
}
172+
function testAnnotationMoveWholeItFun(color, arrowColor, x, y, corner) {
86173
return function(done) {
87174
Plotly.newPlot(gd, Lib.extendDeep({}, testMock))
88175
.then(delay(DELAY_TIME))
89-
.then(testAnnotationMove(color, x, y, type))
176+
.then(testAnnotationMoveWhole(color, arrowColor, x, y, corner))
90177
.then(delay(DELAY_TIME))
91178
.catch(failTest)
92179
.then(done);
@@ -96,8 +183,12 @@ describe('Shapes referencing domain', function() {
96183
testObjectMoveItFun(rectColor1, 100, -300, 'path'));
97184
it('should move box on log x axis and linear y to the proper position',
98185
testObjectMoveItFun(rectColor2, -400, -200, 'path'));
99-
it('should move annotation box on linear x axis and log y to the proper position',
100-
testAnnotationMoveItFun(rectColor3, 50, -100, 'rect'));
101-
it('should move annotation box on log x axis and linear y to the proper position',
102-
testAnnotationMoveItFun(rectColor4, -75, -150, 'rect'));
186+
it('should move annotation label on linear x axis and log y to the proper position',
187+
testAnnotationMoveLabelItFun(rectColor3, 50, -100, 'rect'));
188+
it('should move annotation label on log x axis and linear y to the proper position',
189+
testAnnotationMoveLabelItFun(rectColor4, -75, -150, 'rect'));
190+
it('should move whole annotation on linear x axis and log y to the proper position',
191+
testAnnotationMoveWholeItFun(rectColor3, arrowColor1, 50, -100, 'bl'));
192+
it('should move whole annotation on log x axis and linear y to the proper position',
193+
testAnnotationMoveWholeItFun(rectColor4, arrowColor2, -75, -150, 'tr'));
103194
});

0 commit comments

Comments
 (0)