@@ -43,6 +43,8 @@ graphs.createGraph = function createGraph(container, options, styles) {
4343 var editor = new mxEditor ( ) ;
4444 editor . setGraphContainer ( container ) ;
4545 var graph = editor . graph ;
46+ // Used to avoid sending events for the operations that are a part of zooming in/out.
47+ graph . view . processingMouseWheel = false ;
4648
4749 // NOTE: grid size must usually equal the size of grid GIF
4850 // used as background of graph's div
@@ -509,6 +511,16 @@ graphs.createGraph = function createGraph(container, options, styles) {
509511
510512 // * Adds mouse wheel handling for zoom
511513 mxEvent . addMouseWheelListener ( function ( evt , up ) {
514+ // Disable snapping, to make zooming in and out smoother.
515+ let gridEnabled = graph . gridEnabled ;
516+ graph . gridEnabled = false ;
517+
518+ let zoomToCursor = options [ "zoom_to_cursor" ] ;
519+ let view = graph . view ;
520+ view . processingMouseWheel = zoomToCursor ;
521+
522+ let cursorBefore = graph . getPointForEvent ( evt , false ) ;
523+
512524 // - `up = true` direction:
513525 // Moves the viewport closer to the graph;
514526 // When browsing a web page the vertical scrollbar will move up;
@@ -520,6 +532,17 @@ graphs.createGraph = function createGraph(container, options, styles) {
520532 } else {
521533 graph . zoomOut ( ) ;
522534 }
535+
536+ if ( zoomToCursor ) {
537+ view . processingMouseWheel = false ;
538+ let cursorAfter = graph . getPointForEvent ( evt , false ) ;
539+ let deltaX = cursorAfter . x - cursorBefore . x ;
540+ let deltaY = cursorAfter . y - cursorBefore . y ;
541+ view . setTranslate ( view . translate . x + deltaX , view . translate . y + deltaY ) ;
542+ }
543+
544+ graph . gridEnabled = gridEnabled ;
545+
523546 mxEvent . consume ( evt ) ;
524547 } ) ;
525548
0 commit comments