Skip to content

Commit 8e4cf7b

Browse files
my-tienarchmoj
my-tien
authored and
archmoj
committed
Add jasmine tests for dragging shape attached to date-axis
(thx Mojtaba, for the code)
1 parent c7dd3e1 commit 8e4cf7b

File tree

1 file changed

+279
-37
lines changed

1 file changed

+279
-37
lines changed

‎test/jasmine/tests/draw_newshape_test.js

Lines changed: 279 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1426,43 +1426,6 @@ describe('Activate and edit editable shapes', function() {
14261426

14271427
.then(done, done.fail);
14281428
});
1429-
1430-
it('should be possible to drag shapes referencing non-categorical axes', function(done) {
1431-
Plotly.newPlot(gd, {
1432-
data: [
1433-
{
1434-
x: ["2015-02-01", "2015-02-02", "2015-02-03"],
1435-
y: [14, 17, 8],
1436-
mode: "line",
1437-
},
1438-
],
1439-
layout: {
1440-
xaxis: { title: { text: "Date" }, type: "date" },
1441-
dragmode: "drawline",
1442-
shapes: [
1443-
{
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,
1452-
editable: true,
1453-
},
1454-
],
1455-
},
1456-
})
1457-
.then(function() { drag([[257.64, 370], [250, 300]]); }) // move lower left corner up and left
1458-
.then(function () {
1459-
var shapes = gd._fullLayout.shapes;
1460-
var obj = shapes[0]._input;
1461-
print(obj);
1462-
assertPos(obj.path, 'M250,300H1019V100H257.64Z');
1463-
})
1464-
.then(done, done.fail);
1465-
});
14661429
});
14671430
});
14681431

@@ -1695,3 +1658,282 @@ describe('Activate and edit editable shapes', function() {
16951658
.then(done, done.fail);
16961659
});
16971660
});
1661+
1662+
describe('Activate and edit editable shapes - date axes', function() {
1663+
var fig = {
1664+
data: [
1665+
{
1666+
x: [
1667+
0,
1668+
50
1669+
],
1670+
y: [
1671+
0,
1672+
50
1673+
]
1674+
}
1675+
],
1676+
layout: {
1677+
width: 800,
1678+
height: 600,
1679+
margin: {
1680+
t: 100,
1681+
b: 50,
1682+
l: 100,
1683+
r: 50
1684+
},
1685+
xaxis: {
1686+
type: 'date',
1687+
range: ["1975-07-01", "2380-07-01"]
1688+
},
1689+
yaxis: {
1690+
range: [301.78041543026706, -18.694362017804156]
1691+
},
1692+
shapes: [
1693+
{
1694+
editable: true,
1695+
layer: 'below',
1696+
type: 'rect',
1697+
line: {
1698+
width: 5
1699+
},
1700+
fillcolor: 'red',
1701+
opacity: 0.5,
1702+
xref: 'xaxis',
1703+
yref: 'yaxis',
1704+
x0: '2025-01-01',
1705+
y0: 25,
1706+
x1: '2075-01-01',
1707+
y1: 75
1708+
},
1709+
{
1710+
editable: true,
1711+
layer: 'top',
1712+
type: 'circle',
1713+
line: {
1714+
width: 5
1715+
},
1716+
fillcolor: 'green',
1717+
opacity: 0.5,
1718+
xref: 'xaxis',
1719+
yref: 'yaxis',
1720+
x0: '2125-01-01',
1721+
y0: 25,
1722+
x1: '2175-01-01',
1723+
y1: 75
1724+
}
1725+
]
1726+
},
1727+
config: {
1728+
editable: false,
1729+
modeBarButtonsToAdd: [
1730+
'drawline',
1731+
'drawopenpath',
1732+
'drawclosedpath',
1733+
'drawcircle',
1734+
'drawrect',
1735+
'eraseshape'
1736+
]
1737+
}
1738+
};
1739+
1740+
var gd;
1741+
1742+
beforeEach(function() {
1743+
gd = createGraphDiv();
1744+
});
1745+
1746+
afterEach(destroyGraphDiv);
1747+
1748+
['mouse'].forEach(function(device) {
1749+
it('reactangle using ' + device, function(done) {
1750+
var i = 0; // shape index
1751+
1752+
Plotly.newPlot(gd, {
1753+
data: fig.data,
1754+
layout: fig.layout,
1755+
config: fig.config
1756+
})
1757+
1758+
// shape between 175, 160 and 255, 230
1759+
.then(function() { click(200, 160); }) // activate shape
1760+
.then(function() {
1761+
var id = gd._fullLayout._activeShapeIndex;
1762+
expect(id).toEqual(i, 'activate shape by clicking border');
1763+
1764+
var shapes = gd._fullLayout.shapes;
1765+
var obj = shapes[id]._input;
1766+
expect(obj.type).toEqual('rect');
1767+
print(obj);
1768+
assertPos({
1769+
x0: obj.x0,
1770+
y0: obj.y0,
1771+
x1: obj.x1,
1772+
y1: obj.y1
1773+
}, {
1774+
x0: '2025-01-01',
1775+
y0: 25,
1776+
x1: '2075-01-01',
1777+
y1: 75
1778+
});
1779+
})
1780+
.then(function() { drag([[255, 230], [300, 200]]); }) // move vertex
1781+
.then(function() {
1782+
var id = gd._fullLayout._activeShapeIndex;
1783+
expect(id).toEqual(i, 'keep shape active after drag corner');
1784+
1785+
var shapes = gd._fullLayout.shapes;
1786+
var obj = shapes[id]._input;
1787+
expect(obj.type).toEqual('rect');
1788+
print(obj);
1789+
assertPos({
1790+
x0: obj.x0,
1791+
y0: obj.y0,
1792+
x1: obj.x1,
1793+
y1: obj.y1
1794+
}, {
1795+
x0: '2024-12-30 20:44:36.1846',
1796+
y0: 24.997032640949552,
1797+
x1: '2103-01-15 16:20:58.3385',
1798+
y1: 53.63323442136499
1799+
});
1800+
})
1801+
.then(function() { drag([[300, 200], [255, 230]]); }) // move vertex back
1802+
.then(function() {
1803+
var id = gd._fullLayout._activeShapeIndex;
1804+
expect(id).toEqual(i, 'keep shape active after drag corner');
1805+
1806+
var shapes = gd._fullLayout.shapes;
1807+
var obj = shapes[id]._input;
1808+
expect(obj.type).toEqual('rect');
1809+
print(obj);
1810+
assertPos({
1811+
x0: obj.x0,
1812+
y0: obj.y0,
1813+
x1: obj.x1,
1814+
y1: obj.y1
1815+
}, {
1816+
x0: '2024-12-30 20:44:36.1846',
1817+
y0: 25,
1818+
x1: '2074-12-31 18:56:02.9538',
1819+
y1: 75
1820+
});
1821+
})
1822+
.then(function() { drag([[215, 195], [300, 200]]); }) // move shape
1823+
.then(function() {
1824+
var id = gd._fullLayout._activeShapeIndex;
1825+
expect(id).toEqual(i, 'keep shape active after drag corner');
1826+
1827+
var shapes = gd._fullLayout.shapes;
1828+
var obj = shapes[id]._input;
1829+
expect(obj.type).toEqual('rect');
1830+
print(obj);
1831+
assertPos({
1832+
x0: obj.x0,
1833+
y0: obj.y0,
1834+
x1: obj.x1,
1835+
y1: obj.y1
1836+
}, {
1837+
x0: '2077-12-16 18:31:40.8',
1838+
y0: 24.997032640949552,
1839+
x1: '2127-12-18 16:43:07.5692',
1840+
y1: 74.99821958456974
1841+
});
1842+
})
1843+
.then(function() { drag([[300, 200], [215, 195]]); }) // move shape back
1844+
.then(function() {
1845+
var id = gd._fullLayout._activeShapeIndex;
1846+
expect(id).toEqual(i, 'keep shape active after drag corner');
1847+
1848+
var shapes = gd._fullLayout.shapes;
1849+
var obj = shapes[id]._input;
1850+
expect(obj.type).toEqual('rect');
1851+
print(obj);
1852+
assertPos({
1853+
x0: obj.x0,
1854+
y0: obj.y0,
1855+
x1: obj.x1,
1856+
y1: obj.y1
1857+
}, {
1858+
x0: '2024-12-30 20:44:36.1846',
1859+
y0: 25,
1860+
x1: '2074-12-31 18:56:02.9538',
1861+
y1: 75
1862+
});
1863+
})
1864+
.then(function() { click(100, 100); })
1865+
.then(function() {
1866+
var id = gd._fullLayout._activeShapeIndex;
1867+
expect(id).toEqual(undefined, 'deactivate shape by clicking outside');
1868+
})
1869+
.then(function() { click(255, 230); })
1870+
.then(function() {
1871+
var id = gd._fullLayout._activeShapeIndex;
1872+
expect(id).toEqual(i, 'activate shape by clicking on corner');
1873+
})
1874+
.then(function() { click(215, 195); })
1875+
.then(function() {
1876+
var id = gd._fullLayout._activeShapeIndex;
1877+
expect(id).toEqual(undefined, 'deactivate shape by clicking inside');
1878+
})
1879+
1880+
.then(done, done.fail);
1881+
});
1882+
1883+
it('circle using ' + device, function(done) {
1884+
var i = 1; // shape index
1885+
1886+
Plotly.newPlot(gd, {
1887+
data: fig.data,
1888+
layout: fig.layout,
1889+
config: fig.config
1890+
})
1891+
1892+
// next shape
1893+
.then(function() { click(355, 225); }) // activate shape
1894+
.then(function() {
1895+
var id = gd._fullLayout._activeShapeIndex;
1896+
expect(id).toEqual(i, 'activate shape by clicking border');
1897+
1898+
var shapes = gd._fullLayout.shapes;
1899+
var obj = shapes[id]._input;
1900+
expect(obj.type).toEqual('circle');
1901+
print(obj);
1902+
assertPos({
1903+
x0: obj.x0,
1904+
y0: obj.y0,
1905+
x1: obj.x1,
1906+
y1: obj.y1
1907+
}, {
1908+
x0: '2125-01-01',
1909+
x1: '2175-01-01',
1910+
y0: 25,
1911+
y1: 75
1912+
});
1913+
})
1914+
.then(function() { drag([[338, 196], [300, 175]]); }) // move vertex
1915+
.then(function() {
1916+
var id = gd._fullLayout._activeShapeIndex;
1917+
expect(id).toEqual(i, 'keep shape active after drag corner');
1918+
1919+
var shapes = gd._fullLayout.shapes;
1920+
var obj = shapes[id]._input;
1921+
expect(obj.type).toEqual('circle');
1922+
print(obj);
1923+
assertPos({
1924+
x0: obj.x0,
1925+
y0: obj.y0,
1926+
x1: obj.x1,
1927+
y1: obj.y1
1928+
}, {
1929+
x0: '2186-11-02 07:04:22.7446',
1930+
y0: 74.99821958456971,
1931+
x1: '2113-03-01 18:44:58.3385',
1932+
y1: 10.04154302670623
1933+
});
1934+
})
1935+
1936+
.then(done, done.fail);
1937+
});
1938+
});
1939+
});

0 commit comments

Comments
 (0)