Skip to content

Commit c3ee9f8

Browse files
committed
new tests
1 parent 13e3cc1 commit c3ee9f8

File tree

1 file changed

+269
-27
lines changed

1 file changed

+269
-27
lines changed

test/jasmine/tests/draw_newshape_test.js

Lines changed: 269 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1426,47 +1426,289 @@ describe('Activate and edit editable shapes', function() {
14261426

14271427
.then(done, done.fail);
14281428
});
1429+
});
1430+
});
14291431

1430-
it('should be possible to drag shapes referencing non-categorical axes', function(done) {
1431-
Plotly.newPlot(gd, {
1432-
data: [
1432+
1433+
describe('Activate and edit editable shapes - date axes', function() {
1434+
var fig = {
1435+
data: [
1436+
{
1437+
x: [
1438+
0,
1439+
50
1440+
],
1441+
y: [
1442+
0,
1443+
50
1444+
]
1445+
}
1446+
],
1447+
layout: {
1448+
width: 800,
1449+
height: 600,
1450+
margin: {
1451+
t: 100,
1452+
b: 50,
1453+
l: 100,
1454+
r: 50
1455+
},
1456+
xaxis: {
1457+
type: 'date',
1458+
range: ["1975-07-01", "2380-07-01"]
1459+
},
1460+
yaxis: {
1461+
range: [301.78041543026706, -18.694362017804156]
1462+
},
1463+
shapes: [
14331464
{
1434-
x: ["2015-02-01", "2015-02-02", "2015-02-03"],
1435-
y: [14, 17, 8],
1436-
mode: "line",
1465+
editable: true,
1466+
layer: 'below',
1467+
type: 'rect',
1468+
line: {
1469+
width: 5
1470+
},
1471+
fillcolor: 'red',
1472+
opacity: 0.5,
1473+
xref: 'xaxis',
1474+
yref: 'yaxis',
1475+
x0: '2025-01-01',
1476+
y0: 25,
1477+
x1: '2075-01-01',
1478+
y1: 75
14371479
},
1438-
],
1439-
layout: {
1440-
xaxis: { title: { text: "Date" }, type: "date" },
1441-
dragmode: "drawline",
1442-
shapes: [
14431480
{
1444-
type: "rect",
1445-
xref: "x",
1446-
yref: "paper",
1447-
x0: "2015-02-02",
1448-
y0: 0,
1449-
x1: "2015-02-08",
1450-
y1: 1,
1451-
opacity: 0.2,
14521481
editable: true,
1453-
},
1454-
],
1455-
},
1482+
layer: 'top',
1483+
type: 'circle',
1484+
line: {
1485+
width: 5
1486+
},
1487+
fillcolor: 'green',
1488+
opacity: 0.5,
1489+
xref: 'xaxis',
1490+
yref: 'yaxis',
1491+
x0: '2125-01-01',
1492+
y0: 25,
1493+
x1: '2175-01-01',
1494+
y1: 75
1495+
}
1496+
]
1497+
},
1498+
config: {
1499+
editable: false,
1500+
modeBarButtonsToAdd: [
1501+
'drawline',
1502+
'drawopenpath',
1503+
'drawclosedpath',
1504+
'drawcircle',
1505+
'drawrect',
1506+
'eraseshape'
1507+
]
1508+
}
1509+
};
1510+
1511+
var gd;
1512+
1513+
beforeEach(function() {
1514+
gd = createGraphDiv();
1515+
});
1516+
1517+
afterEach(destroyGraphDiv);
1518+
1519+
['mouse'].forEach(function(device) {
1520+
it('reactangle using ' + device, function(done) {
1521+
var i = 0; // shape index
1522+
1523+
Plotly.newPlot(gd, {
1524+
data: fig.data,
1525+
layout: fig.layout,
1526+
config: fig.config
14561527
})
1457-
.then(function() { drag([[257.64, 370], [250, 300]]); }) // move lower left corner up and left
1458-
.then(function () {
1528+
1529+
// shape between 175, 160 and 255, 230
1530+
.then(function() { click(200, 160); }) // activate shape
1531+
.then(function() {
1532+
var id = gd._fullLayout._activeShapeIndex;
1533+
expect(id).toEqual(i, 'activate shape by clicking border');
1534+
14591535
var shapes = gd._fullLayout.shapes;
1460-
var obj = shapes[0]._input;
1536+
var obj = shapes[id]._input;
1537+
expect(obj.type).toEqual('rect');
14611538
print(obj);
1462-
assertPos(obj.path, 'M250,300H1019V100H257.64Z');
1539+
assertPos({
1540+
x0: obj.x0,
1541+
y0: obj.y0,
1542+
x1: obj.x1,
1543+
y1: obj.y1
1544+
}, {
1545+
x0: '2025-01-01',
1546+
y0: 25,
1547+
x1: '2075-01-01',
1548+
y1: 75
1549+
});
1550+
})
1551+
.then(function() { drag([[255, 230], [300, 200]]); }) // move vertex
1552+
.then(function() {
1553+
var id = gd._fullLayout._activeShapeIndex;
1554+
expect(id).toEqual(i, 'keep shape active after drag corner');
1555+
1556+
var shapes = gd._fullLayout.shapes;
1557+
var obj = shapes[id]._input;
1558+
expect(obj.type).toEqual('rect');
1559+
print(obj);
1560+
assertPos({
1561+
x0: obj.x0,
1562+
y0: obj.y0,
1563+
x1: obj.x1,
1564+
y1: obj.y1
1565+
}, {
1566+
x0: '2024-12-30 20:44:36.1846',
1567+
y0: 24.997032640949552,
1568+
x1: '2103-01-15 16:20:58.3385',
1569+
y1: 53.63323442136499
1570+
});
14631571
})
1572+
.then(function() { drag([[300, 200], [255, 230]]); }) // move vertex back
1573+
.then(function() {
1574+
var id = gd._fullLayout._activeShapeIndex;
1575+
expect(id).toEqual(i, 'keep shape active after drag corner');
1576+
1577+
var shapes = gd._fullLayout.shapes;
1578+
var obj = shapes[id]._input;
1579+
expect(obj.type).toEqual('rect');
1580+
print(obj);
1581+
assertPos({
1582+
x0: obj.x0,
1583+
y0: obj.y0,
1584+
x1: obj.x1,
1585+
y1: obj.y1
1586+
}, {
1587+
x0: '2024-12-30 20:44:36.1846',
1588+
y0: 25,
1589+
x1: '2074-12-31 18:56:02.9538',
1590+
y1: 75
1591+
});
1592+
})
1593+
.then(function() { drag([[215, 195], [300, 200]]); }) // move shape
1594+
.then(function() {
1595+
var id = gd._fullLayout._activeShapeIndex;
1596+
expect(id).toEqual(i, 'keep shape active after drag corner');
1597+
1598+
var shapes = gd._fullLayout.shapes;
1599+
var obj = shapes[id]._input;
1600+
expect(obj.type).toEqual('rect');
1601+
print(obj);
1602+
assertPos({
1603+
x0: obj.x0,
1604+
y0: obj.y0,
1605+
x1: obj.x1,
1606+
y1: obj.y1
1607+
}, {
1608+
x0: '2077-12-16 18:31:40.8',
1609+
y0: 24.997032640949552,
1610+
x1: '2127-12-18 16:43:07.5692',
1611+
y1: 74.99821958456974
1612+
});
1613+
})
1614+
.then(function() { drag([[300, 200], [215, 195]]); }) // move shape back
1615+
.then(function() {
1616+
var id = gd._fullLayout._activeShapeIndex;
1617+
expect(id).toEqual(i, 'keep shape active after drag corner');
1618+
1619+
var shapes = gd._fullLayout.shapes;
1620+
var obj = shapes[id]._input;
1621+
expect(obj.type).toEqual('rect');
1622+
print(obj);
1623+
assertPos({
1624+
x0: obj.x0,
1625+
y0: obj.y0,
1626+
x1: obj.x1,
1627+
y1: obj.y1
1628+
}, {
1629+
x0: '2024-12-30 20:44:36.1846',
1630+
y0: 25,
1631+
x1: '2074-12-31 18:56:02.9538',
1632+
y1: 75
1633+
});
1634+
})
1635+
.then(function() { click(100, 100); })
1636+
.then(function() {
1637+
var id = gd._fullLayout._activeShapeIndex;
1638+
expect(id).toEqual(undefined, 'deactivate shape by clicking outside');
1639+
})
1640+
.then(function() { click(255, 230); })
1641+
.then(function() {
1642+
var id = gd._fullLayout._activeShapeIndex;
1643+
expect(id).toEqual(i, 'activate shape by clicking on corner');
1644+
})
1645+
.then(function() { click(215, 195); })
1646+
.then(function() {
1647+
var id = gd._fullLayout._activeShapeIndex;
1648+
expect(id).toEqual(undefined, 'deactivate shape by clicking inside');
1649+
})
1650+
1651+
.then(done, done.fail);
1652+
});
1653+
1654+
it('circle using ' + device, function(done) {
1655+
var i = 1; // shape index
1656+
1657+
Plotly.newPlot(gd, {
1658+
data: fig.data,
1659+
layout: fig.layout,
1660+
config: fig.config
1661+
})
1662+
1663+
// next shape
1664+
.then(function() { click(355, 225); }) // activate shape
1665+
.then(function() {
1666+
var id = gd._fullLayout._activeShapeIndex;
1667+
expect(id).toEqual(i, 'activate shape by clicking border');
1668+
1669+
var shapes = gd._fullLayout.shapes;
1670+
var obj = shapes[id]._input;
1671+
expect(obj.type).toEqual('circle');
1672+
print(obj);
1673+
assertPos({
1674+
x0: obj.x0,
1675+
y0: obj.y0,
1676+
x1: obj.x1,
1677+
y1: obj.y1
1678+
}, {
1679+
x0: '2125-01-01',
1680+
x1: '2175-01-01',
1681+
y0: 25,
1682+
y1: 75
1683+
});
1684+
})
1685+
.then(function() { drag([[338, 196], [300, 175]]); }) // move vertex
1686+
.then(function() {
1687+
var id = gd._fullLayout._activeShapeIndex;
1688+
expect(id).toEqual(i, 'keep shape active after drag corner');
1689+
1690+
var shapes = gd._fullLayout.shapes;
1691+
var obj = shapes[id]._input;
1692+
expect(obj.type).toEqual('circle');
1693+
print(obj);
1694+
assertPos({
1695+
x0: obj.x0,
1696+
y0: obj.y0,
1697+
x1: obj.x1,
1698+
y1: obj.y1
1699+
}, {
1700+
x0: '2186-11-02 07:04:22.7446',
1701+
y0: 74.99821958456971,
1702+
x1: '2113-03-01 18:44:58.3385',
1703+
y1: 10.04154302670623
1704+
});
1705+
})
1706+
14641707
.then(done, done.fail);
14651708
});
14661709
});
14671710
});
14681711

1469-
14701712
describe('Activate and edit editable shapes', function() {
14711713
var gd;
14721714

0 commit comments

Comments
 (0)