Skip to content

Commit dcacab0

Browse files
jonfunkhouserjonfunkhouser
committed
disable polar rotation drag when dragmode = false
1 parent 6122516 commit dcacab0

File tree

2 files changed

+303
-4
lines changed

2 files changed

+303
-4
lines changed

‎src/plots/polar/polar.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1150,6 +1150,9 @@ proto.updateRadialDrag = function(fullLayout, polarLayout, rngIndex) {
11501150

11511151
var radialDrag = dragBox.makeRectDragger(layers, className, 'crosshair', -bl2, -bl2, bl, bl);
11521152
var dragOpts = {element: radialDrag, gd: gd};
1153+
if(fullLayout.dragmode === false) {
1154+
dragOpts.dragmode = false;
1155+
}
11531156

11541157
updateElement(d3.select(radialDrag), radialAxis.visible && innerRadius < radius, {
11551158
transform: strTranslate(tx, ty)
@@ -1295,10 +1298,14 @@ proto.updateAngularDrag = function(fullLayout) {
12951298
var angularDrag = dragBox.makeDragger(layers, 'path', 'angulardrag', 'move');
12961299
var dragOpts = {element: angularDrag, gd: gd};
12971300

1298-
d3.select(angularDrag)
1299-
.attr('d', _this.pathAnnulus(radius, radius + dbs))
1300-
.attr('transform', strTranslate(cx, cy))
1301-
.call(setCursor, 'move');
1301+
if(fullLayout.dragmode === false) {
1302+
dragOpts.dragmode = false;
1303+
} else {
1304+
d3.select(angularDrag)
1305+
.attr('d', _this.pathAnnulus(radius, radius + dbs))
1306+
.attr('transform', strTranslate(cx, cy))
1307+
.call(setCursor, 'move');
1308+
}
13021309

13031310
function xy2a(x, y) {
13041311
return Math.atan2(cyy + dbs - y, x - cxx - dbs);

‎test/jasmine/tests/polar_test.js

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1146,6 +1146,298 @@ describe('Test polar interactions:', function() {
11461146
.then(done, done.fail);
11471147
});
11481148

1149+
describe('dragmode === false', function() {
1150+
it('should not respond to drag interactions on plot area when dragmode === false', function(done) {
1151+
var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
1152+
1153+
fig.layout.dragmode = false;
1154+
1155+
// to avoid dragging on hover labels
1156+
fig.layout.hovermode = false;
1157+
1158+
// adjust margins so that middle of plot area is at 300x300
1159+
// with its middle at [200,200]
1160+
fig.layout.width = 400;
1161+
fig.layout.height = 400;
1162+
fig.layout.margin = {l: 50, t: 50, b: 50, r: 50};
1163+
1164+
var mid = [200, 200];
1165+
var resetNumber = 0;
1166+
1167+
function _drag(p0, dp) {
1168+
var node = d3Select('.polar > .draglayer > .maindrag').node();
1169+
return drag({node: node, dpos: dp, pos0: p0});
1170+
}
1171+
1172+
function _assertRange(rng, msg) {
1173+
expect(gd._fullLayout.polar.radialaxis.range).toBeCloseToArray(rng, 1, msg);
1174+
}
1175+
1176+
function _assertBase(extra) {
1177+
var msg = 'base range' + (extra ? ' ' + extra : '');
1178+
_assertRange([0, 11.1], msg);
1179+
}
1180+
1181+
function _reset() {
1182+
resetNumber++;
1183+
1184+
var extra = '(reset ' + resetNumber + ')';
1185+
_assertBase(extra);
1186+
expect(eventCnts.plotly_doubleclick).toBe(0, 'doubleclick event #' + extra);
1187+
}
1188+
1189+
_plot(fig)
1190+
.then(_assertBase)
1191+
.then(function() { return _drag(mid, [50, 50]); })
1192+
.then(function() {
1193+
_assertBase('from center move toward bottom-right');
1194+
})
1195+
.then(delay(20))
1196+
.then(function() { return _doubleClick(mid); })
1197+
.then(delay(20))
1198+
.then(_reset)
1199+
.then(function() { return _drag(mid, [-50, -50]); })
1200+
.then(function() {
1201+
_assertBase('from center move toward top-left');
1202+
})
1203+
.then(delay(20))
1204+
.then(function() { return _doubleClick(mid); })
1205+
.then(delay(20))
1206+
.then(_reset)
1207+
.then(function() { return _drag([mid[0] + 30, mid[0] - 30], [50, -50]); })
1208+
.then(function() {
1209+
_assertBase('from quadrant #1 move top-right');
1210+
})
1211+
.then(delay(20))
1212+
.then(function() { return _doubleClick(mid); })
1213+
.then(delay(20))
1214+
.then(_reset)
1215+
.then(function() { return _drag([345, 200], [-50, 0]); })
1216+
.then(function() {
1217+
_assertBase('from right edge move left');
1218+
})
1219+
.then(delay(20))
1220+
.then(function() { return _doubleClick(mid); })
1221+
.then(delay(20))
1222+
.then(_reset)
1223+
.then(function() { return _drag(mid, [10, 10]);})
1224+
.then(function() { _assertBase('from center to not far enough'); })
1225+
.then(function() { return _drag([mid[0] + 30, mid[0] - 30], [-10, 0]);})
1226+
.then(function() { _assertBase('from quadrant #1 to not far enough'); })
1227+
.then(function() { return _drag([345, 200], [-10, 0]);})
1228+
.then(function() { _assertBase('from right edge to not far enough'); })
1229+
.then(function() {
1230+
expect(eventCnts.plotly_relayout)
1231+
.toBe(0, 'no new relayout events after *not far enough* cases');
1232+
})
1233+
.then(delay(20))
1234+
.then(function() { return _doubleClick(mid); })
1235+
.then(delay(20))
1236+
.then(_reset)
1237+
.then(function() { return Plotly.relayout(gd, 'polar.hole', 0.2); })
1238+
.then(function() { return _drag([mid[0] + 30, mid[0] - 30], [50, -50]); })
1239+
.then(function() {
1240+
_assertRange([0, 11.4], 'with polar.hole>0, from quadrant #1 move top-right');
1241+
})
1242+
.then(done, done.fail);
1243+
});
1244+
1245+
it('should not respond to drag interactions on radial drag area when dragmode === false', function(done) {
1246+
var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
1247+
1248+
fig.layout.dragmode = false;
1249+
1250+
// to avoid dragging on hover labels
1251+
fig.layout.hovermode = false;
1252+
1253+
// adjust margins so that middle of plot area is at 300x300
1254+
// with its middle at [200,200]
1255+
fig.layout.width = 400;
1256+
fig.layout.height = 400;
1257+
fig.layout.margin = {l: 50, t: 50, b: 50, r: 50};
1258+
1259+
var dragPos0 = [375, 200];
1260+
var resetNumber = 0;
1261+
1262+
// use 'special' drag method - as we need two mousemove events
1263+
// to activate the radial drag mode
1264+
function _drag(p0, dp) {
1265+
var node = d3Select('.polar > .draglayer > .radialdrag').node();
1266+
return drag({node: node, dpos: dp, pos0: p0, nsteps: 2});
1267+
}
1268+
1269+
function _assert(rng, angle, evtRng1, evtAngle, msg) {
1270+
expect(gd._fullLayout.polar.radialaxis.range)
1271+
.toBeCloseToArray(rng, 1, msg + ' - range');
1272+
expect(gd._fullLayout.polar.radialaxis.angle)
1273+
.toBeCloseTo(angle, 1, msg + ' - angle');
1274+
1275+
if(evtRng1 !== null) {
1276+
expect(eventData['polar.radialaxis.range[1]'])
1277+
.toBeCloseTo(evtRng1, 1, msg + ' - range[1] event data');
1278+
}
1279+
if(evtAngle !== null) {
1280+
expect(eventData['polar.radialaxis.angle'])
1281+
.toBeCloseTo(evtAngle, 1, msg + ' - angle event data');
1282+
}
1283+
}
1284+
1285+
function _assertBase(extra) {
1286+
extra = extra ? ' ' + extra : '';
1287+
_assert([0, 11.1], 0, null, null, 'base' + extra);
1288+
}
1289+
1290+
function _reset() {
1291+
return delay(100)()
1292+
.then(function() { return _doubleClick([200, 200]); })
1293+
.then(function() {
1294+
resetNumber++;
1295+
1296+
var extra = '(reset ' + resetNumber + ')';
1297+
_assertBase(extra);
1298+
expect(eventCnts.plotly_doubleclick).toBe(0, 'doubleclick event #' + extra);
1299+
});
1300+
}
1301+
1302+
_plot(fig)
1303+
.then(_assertBase)
1304+
.then(function() { return _drag(dragPos0, [-50, 0]); })
1305+
.then(function() {
1306+
_assertBase('move inward');
1307+
})
1308+
.then(_reset)
1309+
.then(function() { return _drag(dragPos0, [50, 0]); })
1310+
.then(function() {
1311+
_assertBase('move outward');
1312+
})
1313+
.then(_reset)
1314+
.then(function() { return _drag(dragPos0, [0, -50]); })
1315+
.then(function() {
1316+
_assertBase('move counterclockwise');
1317+
})
1318+
.then(_reset)
1319+
.then(function() { return _drag(dragPos0, [0, 50]); })
1320+
.then(function() {
1321+
_assertBase('move clockwise');
1322+
})
1323+
.then(_reset)
1324+
.then(function() {
1325+
expect(eventCnts.plotly_relayout).toBe(0, 'total # of relayout events');
1326+
})
1327+
.then(done, done.fail);
1328+
});
1329+
1330+
it('should not responsd to drag interactions on inner radial drag area when dragmode === false', function(done) {
1331+
var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
1332+
fig.layout.dragmode = false;
1333+
fig.layout.polar.hole = 0.2;
1334+
// to avoid dragging on hover labels
1335+
fig.layout.hovermode = false;
1336+
// adjust margins so that middle of plot area is at 300x300
1337+
// with its middle at [200,200]
1338+
fig.layout.width = 400;
1339+
fig.layout.height = 400;
1340+
fig.layout.margin = {l: 50, t: 50, b: 50, r: 50};
1341+
1342+
var dragPos0 = [200, 200];
1343+
1344+
// use 'special' drag method - as we need two mousemove events
1345+
// to activate the radial drag mode
1346+
function _drag(p0, dp) {
1347+
var node = d3Select('.polar > .draglayer > .radialdrag-inner').node();
1348+
return drag({node: node, dpos: dp, pos0: p0, nsteps: 2});
1349+
}
1350+
1351+
function _assert(rng, msg) {
1352+
expect(gd._fullLayout.polar.radialaxis.range)
1353+
.toBeCloseToArray(rng, 1, msg + ' - range');
1354+
}
1355+
1356+
function _assertBase(extra) {
1357+
extra = extra ? ' ' + extra : '';
1358+
_assert([0, 11.4], 'base' + extra);
1359+
}
1360+
1361+
_plot(fig)
1362+
.then(function() { return _drag(dragPos0, [-50, 0]); })
1363+
.then(function() {
1364+
_assertBase('move inward');
1365+
})
1366+
.then(function() { return Plotly.relayout(gd, 'polar.radialaxis.autorange', true); })
1367+
.then(function() { return _drag(dragPos0, [50, 0]); })
1368+
.then(function() {
1369+
_assertBase('move outward');
1370+
})
1371+
.then(done, done.fail);
1372+
});
1373+
1374+
it('should not responsd to drag interactions on angular drag area when dragmode === false', function(done) {
1375+
var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
1376+
1377+
fig.layout.dragmode = false;
1378+
1379+
// to avoid dragging on hover labels
1380+
fig.layout.hovermode = false;
1381+
1382+
// adjust margins so that middle of plot area is at 300x300
1383+
// with its middle at [200,200]
1384+
fig.layout.width = 400;
1385+
fig.layout.height = 400;
1386+
fig.layout.margin = {l: 50, t: 50, b: 50, r: 50};
1387+
1388+
var dragPos0 = [350, 150];
1389+
var resetNumber = 0;
1390+
1391+
function _drag(p0, dp) {
1392+
var node = d3Select('.polar > .draglayer > .angulardrag').node();
1393+
return drag({node: node, dpos: dp, pos0: p0});
1394+
}
1395+
1396+
function _assert(rot, msg, noEvent) {
1397+
expect(gd._fullLayout.polar.angularaxis.rotation)
1398+
.toBeCloseTo(rot, 1, msg + ' - rotation');
1399+
if(!noEvent) {
1400+
expect(eventData['polar.angularaxis.rotation'])
1401+
.toBeCloseTo(rot, 1, msg + ' - rotation event data');
1402+
}
1403+
}
1404+
1405+
function _assertBase(extra) {
1406+
extra = extra ? ' ' + extra : '';
1407+
_assert(0, 'base' + extra, true);
1408+
}
1409+
1410+
function _reset() {
1411+
return delay(100)()
1412+
.then(function() { return _doubleClick([200, 200]); })
1413+
.then(function() {
1414+
resetNumber++;
1415+
1416+
var extra = '(reset ' + resetNumber + ')';
1417+
_assertBase(extra);
1418+
expect(eventCnts.plotly_doubleclick).toBe(0, 'doubleclick event #' + extra);
1419+
});
1420+
}
1421+
1422+
_plot(fig)
1423+
.then(_assertBase)
1424+
.then(function() { return _drag(dragPos0, [-20, -20]); })
1425+
.then(function() {
1426+
_assertBase('move counterclockwise');
1427+
})
1428+
.then(_reset)
1429+
.then(function() { return _drag(dragPos0, [20, 20]); })
1430+
.then(function() {
1431+
_assertBase('move clockwise');
1432+
})
1433+
.then(_reset)
1434+
.then(function() {
1435+
expect(eventCnts.plotly_relayout).toBe(0, 'total # of relayout events');
1436+
})
1437+
.then(done, done.fail);
1438+
});
1439+
});
1440+
11491441
describe('should update scene during drag interactions on radial and angular drag area', function() {
11501442
var objs = ['scatter2d', 'line2d'];
11511443
var scene, gl, nTraces;

0 commit comments

Comments
 (0)