@@ -1426,47 +1426,289 @@ describe('Activate and edit editable shapes', function() {
1426
1426
1427
1427
. then ( done , done . fail ) ;
1428
1428
} ) ;
1429
+ } ) ;
1430
+ } ) ;
1429
1431
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 : [
1433
1464
{
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
1437
1479
} ,
1438
- ] ,
1439
- layout : {
1440
- xaxis : { title : { text : "Date" } , type : "date" } ,
1441
- dragmode : "drawline" ,
1442
- shapes : [
1443
1480
{
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
1481
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
1456
1527
} )
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
+
1459
1535
var shapes = gd . _fullLayout . shapes ;
1460
- var obj = shapes [ 0 ] . _input ;
1536
+ var obj = shapes [ id ] . _input ;
1537
+ expect ( obj . type ) . toEqual ( 'rect' ) ;
1461
1538
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
+ } ) ;
1463
1571
} )
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
+
1464
1707
. then ( done , done . fail ) ;
1465
1708
} ) ;
1466
1709
} ) ;
1467
1710
} ) ;
1468
1711
1469
-
1470
1712
describe ( 'Activate and edit editable shapes' , function ( ) {
1471
1713
var gd ;
1472
1714
0 commit comments