@@ -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-
14701712describe ( 'Activate and edit editable shapes' , function ( ) {
14711713 var gd ;
14721714
0 commit comments