@@ -5,6 +5,7 @@ var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY;
5
5
var createGraphDiv = require ( '../assets/create_graph_div' ) ;
6
6
var destroyGraphDiv = require ( '../assets/destroy_graph_div' ) ;
7
7
var mouseEvent = require ( '../assets/mouse_event' ) ;
8
+ var getRectCenter = require ( '../assets/get_rect_center' ) ;
8
9
var customMatchers = require ( '../assets/custom_matchers' ) ;
9
10
10
11
@@ -371,4 +372,251 @@ describe('Test click interactions:', function() {
371
372
} ) ;
372
373
373
374
} ) ;
375
+
376
+ describe ( 'drag interations' , function ( ) {
377
+ beforeEach ( function ( done ) {
378
+ Plotly . plot ( gd , mockCopy . data , mockCopy . layout ) . then ( done ) ;
379
+ } ) ;
380
+
381
+ it ( 'on nw dragbox should update the axis ranges' , function ( done ) {
382
+ var node = document . querySelector ( 'rect.nwdrag' ) ;
383
+ var pos = getRectCenter ( node ) ;
384
+
385
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
386
+ expect ( node . classList [ 1 ] ) . toBe ( 'nwdrag' ) ;
387
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-nw-resize' ) ;
388
+
389
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
390
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
391
+
392
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 10 , pos [ 1 ] + 50 ) . then ( function ( ) {
393
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.08579746 , 2.156130559 ] ) ;
394
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.99100863 , 1.86546098 ] ) ;
395
+
396
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 10 , pos [ 1 ] - 50 ) ;
397
+ } ) . then ( function ( ) {
398
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
399
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.99100863 , 1.10938115 ] ) ;
400
+
401
+ done ( ) ;
402
+ } ) ;
403
+ } ) ;
404
+
405
+ it ( 'on ne dragbox should update the axis ranges' , function ( done ) {
406
+ var node = document . querySelector ( 'rect.nedrag' ) ;
407
+ var pos = getRectCenter ( node ) ;
408
+
409
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
410
+ expect ( node . classList [ 1 ] ) . toBe ( 'nedrag' ) ;
411
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-ne-resize' ) ;
412
+
413
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
414
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
415
+
416
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 50 , pos [ 1 ] + 50 ) . then ( function ( ) {
417
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 1.72466470 ] ) ;
418
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.99100863 , 1.86546098 ] ) ;
419
+
420
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 50 , pos [ 1 ] - 50 ) ;
421
+ } ) . then ( function ( ) {
422
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 2.08350047 ] ) ;
423
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.99100863 , 1.10938115 ] ) ;
424
+
425
+ done ( ) ;
426
+ } ) ;
427
+ } ) ;
428
+
429
+ it ( 'on sw dragbox should update the axis ranges' , function ( done ) {
430
+ var node = document . querySelector ( 'rect.swdrag' ) ;
431
+ var pos = getRectCenter ( node ) ;
432
+
433
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
434
+ expect ( node . classList [ 1 ] ) . toBe ( 'swdrag' ) ;
435
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-sw-resize' ) ;
436
+
437
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
438
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
439
+
440
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 10 , pos [ 1 ] + 50 ) . then ( function ( ) {
441
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.08579746 , 2.15613055 ] ) ;
442
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.36094210 , 1.38938271 ] ) ;
443
+
444
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 10 , pos [ 1 ] - 50 ) ;
445
+ } ) . then ( function ( ) {
446
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.00958227 , 2.15613055 ] ) ;
447
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.71100706 , 1.38938271 ] ) ;
448
+
449
+ done ( ) ;
450
+ } ) ;
451
+ } ) ;
452
+
453
+ it ( 'on se dragbox should update the axis ranges' , function ( done ) {
454
+ var node = document . querySelector ( 'rect.sedrag' ) ;
455
+ var pos = getRectCenter ( node ) ;
456
+
457
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
458
+ expect ( node . classList [ 1 ] ) . toBe ( 'sedrag' ) ;
459
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-se-resize' ) ;
460
+
461
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
462
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
463
+
464
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 50 , pos [ 1 ] + 50 ) . then ( function ( ) {
465
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 1.72466470 ] ) ;
466
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.36094210 , 1.38938271 ] ) ;
467
+
468
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 50 , pos [ 1 ] - 50 ) ;
469
+ } ) . then ( function ( ) {
470
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 2.08350047 ] ) ;
471
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.71100706 , 1.38938271 ] ) ;
472
+
473
+ done ( ) ;
474
+ } ) ;
475
+ } ) ;
476
+
477
+ it ( 'on ew dragbox should update the xaxis range' , function ( done ) {
478
+ var node = document . querySelector ( 'rect.ewdrag' ) ;
479
+ var pos = getRectCenter ( node ) ;
480
+
481
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
482
+ expect ( node . classList [ 1 ] ) . toBe ( 'ewdrag' ) ;
483
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-ew-resize' ) ;
484
+
485
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
486
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
487
+
488
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 50 , pos [ 1 ] + 50 ) . then ( function ( ) {
489
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.375918058 , 1.792179992 ] ) ;
490
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
491
+
492
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 50 , pos [ 1 ] - 50 ) ;
493
+ } ) . then ( function ( ) {
494
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 2.15613055 ] ) ;
495
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
496
+
497
+ done ( ) ;
498
+ } ) ;
499
+ } ) ;
500
+
501
+ it ( 'on w dragbox should update the xaxis range' , function ( done ) {
502
+ var node = document . querySelector ( 'rect.wdrag' ) ;
503
+ var pos = getRectCenter ( node ) ;
504
+
505
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
506
+ expect ( node . classList [ 1 ] ) . toBe ( 'wdrag' ) ;
507
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-w-resize' ) ;
508
+
509
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
510
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
511
+
512
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 50 , pos [ 1 ] + 50 ) . then ( function ( ) {
513
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.40349007 , 2.15613055 ] ) ;
514
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
515
+
516
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 50 , pos [ 1 ] - 50 ) ;
517
+ } ) . then ( function ( ) {
518
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 2.93933740 , 2.15613055 ] ) ;
519
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
520
+
521
+ done ( ) ;
522
+ } ) ;
523
+ } ) ;
524
+
525
+ it ( 'on e dragbox should update the xaxis range' , function ( done ) {
526
+ var node = document . querySelector ( 'rect.edrag' ) ;
527
+ var pos = getRectCenter ( node ) ;
528
+
529
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
530
+ expect ( node . classList [ 1 ] ) . toBe ( 'edrag' ) ;
531
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-e-resize' ) ;
532
+
533
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
534
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
535
+
536
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 50 , pos [ 1 ] + 50 ) . then ( function ( ) {
537
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 1.7246647 ] ) ;
538
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
539
+
540
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 50 , pos [ 1 ] - 50 ) ;
541
+ } ) . then ( function ( ) {
542
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( [ - 3.01196749 , 2.0835004 ] ) ;
543
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
544
+
545
+ done ( ) ;
546
+ } ) ;
547
+ } ) ;
548
+
549
+ it ( 'on ns dragbox should update the yaxis range' , function ( done ) {
550
+ var node = document . querySelector ( 'rect.nsdrag' ) ;
551
+ var pos = getRectCenter ( node ) ;
552
+
553
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
554
+ expect ( node . classList [ 1 ] ) . toBe ( 'nsdrag' ) ;
555
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-ns-resize' ) ;
556
+
557
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
558
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
559
+
560
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 10 , pos [ 1 ] + 50 ) . then ( function ( ) {
561
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
562
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.59427673 , 1.78611460 ] ) ;
563
+
564
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 10 , pos [ 1 ] - 50 ) ;
565
+ } ) . then ( function ( ) {
566
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
567
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
568
+
569
+ done ( ) ;
570
+ } ) ;
571
+ } ) ;
572
+
573
+ it ( 'on s dragbox should update the yaxis range' , function ( done ) {
574
+ var node = document . querySelector ( 'rect.sdrag' ) ;
575
+ var pos = getRectCenter ( node ) ;
576
+
577
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
578
+ expect ( node . classList [ 1 ] ) . toBe ( 'sdrag' ) ;
579
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-s-resize' ) ;
580
+
581
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
582
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
583
+
584
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 10 , pos [ 1 ] + 50 ) . then ( function ( ) {
585
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
586
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.3609421011 , 1.3893827 ] ) ;
587
+
588
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 10 , pos [ 1 ] - 50 ) ;
589
+ } ) . then ( function ( ) {
590
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
591
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.7110070646 , 1.3893827 ] ) ;
592
+
593
+ done ( ) ;
594
+ } ) ;
595
+ } ) ;
596
+
597
+ it ( 'on n dragbox should update the yaxis range' , function ( done ) {
598
+ var node = document . querySelector ( 'rect.ndrag' ) ;
599
+ var pos = getRectCenter ( node ) ;
600
+
601
+ expect ( node . classList [ 0 ] ) . toBe ( 'drag' ) ;
602
+ expect ( node . classList [ 1 ] ) . toBe ( 'ndrag' ) ;
603
+ expect ( node . classList [ 2 ] ) . toBe ( 'cursor-n-resize' ) ;
604
+
605
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
606
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( autoRangeY ) ;
607
+
608
+ drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] + 10 , pos [ 1 ] + 50 ) . then ( function ( ) {
609
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
610
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.991008630 , 1.86546098 ] ) ;
611
+
612
+ return drag ( pos [ 0 ] , pos [ 1 ] , pos [ 0 ] - 10 , pos [ 1 ] - 50 ) ;
613
+ } ) . then ( function ( ) {
614
+ expect ( gd . layout . xaxis . range ) . toBeCloseToArray ( autoRangeX ) ;
615
+ expect ( gd . layout . yaxis . range ) . toBeCloseToArray ( [ - 0.991008630 , 1.10938115 ] ) ;
616
+
617
+ done ( ) ;
618
+ } ) ;
619
+ } ) ;
620
+
621
+ } ) ;
374
622
} ) ;
0 commit comments