From a8b9ae4308d77e72ff6f24cf003a2c96c0b2498e Mon Sep 17 00:00:00 2001 From: ripso Date: Fri, 9 Feb 2018 17:32:05 +0100 Subject: [PATCH] [Graph3d] zoomable and ctrlToZoom options (#3800) * zoomable and ctrlToZoom options * fix pointer events when tooltip enabled * configuring tooltip style options * event check before if --- docs/graph3d/index.html | 12 +++++ examples/graph3d/13_disable_zoom.html | 62 +++++++++++++++++++++ examples/graph3d/14_zoom_ctrl_scroll.html | 62 +++++++++++++++++++++ lib/graph3d/Graph3d.js | 65 +++++++++++++---------- lib/graph3d/Settings.js | 2 + lib/graph3d/options.js | 22 ++++---- 6 files changed, 187 insertions(+), 38 deletions(-) create mode 100644 examples/graph3d/13_disable_zoom.html create mode 100644 examples/graph3d/14_zoom_ctrl_scroll.html diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 7a4d6e3a..82de9f3d 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -769,6 +769,18 @@ var options = { z Label on the Z axis. + + zoomable + boolean + true + If true, the graph is zoomable. + + + ctrlToZoom + boolean + false + If true and zoomable enabled, the graph is zoomable by pressing ctrl key and scrolling mouse. + filterLabel String diff --git a/examples/graph3d/13_disable_zoom.html b/examples/graph3d/13_disable_zoom.html new file mode 100644 index 00000000..53baacc5 --- /dev/null +++ b/examples/graph3d/13_disable_zoom.html @@ -0,0 +1,62 @@ + + + + Graph 3D demo + + + + + + + + + + +
+ +
+ + diff --git a/examples/graph3d/14_zoom_ctrl_scroll.html b/examples/graph3d/14_zoom_ctrl_scroll.html new file mode 100644 index 00000000..b8c7aea2 --- /dev/null +++ b/examples/graph3d/14_zoom_ctrl_scroll.html @@ -0,0 +1,62 @@ + + + + Graph 3D demo + + + + + + + + + + +
+ +
+ + diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index 8f816e6d..f83d9aa3 100755 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -82,13 +82,15 @@ Graph3d.DEFAULTS = { line : { height : '40px', width : '0', - borderLeft : '1px solid #4d4d4d' + borderLeft : '1px solid #4d4d4d', + pointerEvents : 'none' }, dot : { height : '0', width : '0', border : '5px solid #4d4d4d', - borderRadius : '5px' + borderRadius : '5px', + pointerEvents : 'none' } }, @@ -103,6 +105,9 @@ Graph3d.DEFAULTS = { vertical : 0.5, distance : 1.7 }, + + zoomable : true, + ctrlToZoom: false, /* The following fields are 'auto by default', see above. @@ -2093,38 +2098,40 @@ Graph3d.prototype._onTouchEnd = function(event) { Graph3d.prototype._onWheel = function(event) { if (!event) /* For IE. */ event = window.event; + if (this.zoomable && (!this.ctrlToZoom || event.ctrlKey)) { + + // retrieve delta + var delta = 0; + if (event.wheelDelta) { /* IE/Opera. */ + delta = event.wheelDelta/120; + } else if (event.detail) { /* Mozilla case. */ + // In Mozilla, sign of delta is different than in IE. + // Also, delta is multiple of 3. + delta = -event.detail/3; + } - // retrieve delta - var delta = 0; - if (event.wheelDelta) { /* IE/Opera. */ - delta = event.wheelDelta/120; - } else if (event.detail) { /* Mozilla case. */ - // In Mozilla, sign of delta is different than in IE. - // Also, delta is multiple of 3. - delta = -event.detail/3; - } - - // If delta is nonzero, handle it. - // Basically, delta is now positive if wheel was scrolled up, - // and negative, if wheel was scrolled down. - if (delta) { - var oldLength = this.camera.getArmLength(); - var newLength = oldLength * (1 - delta / 10); + // If delta is nonzero, handle it. + // Basically, delta is now positive if wheel was scrolled up, + // and negative, if wheel was scrolled down. + if (delta) { + var oldLength = this.camera.getArmLength(); + var newLength = oldLength * (1 - delta / 10); - this.camera.setArmLength(newLength); - this.redraw(); + this.camera.setArmLength(newLength); + this.redraw(); - this._hideTooltip(); - } + this._hideTooltip(); + } - // fire a cameraPositionChange event - var parameters = this.getCameraPosition(); - this.emit('cameraPositionChange', parameters); + // fire a cameraPositionChange event + var parameters = this.getCameraPosition(); + this.emit('cameraPositionChange', parameters); - // Prevent default actions caused by mouse wheel. - // That might be ugly, but we handle scrolls somehow - // anyway, so don't bother here.. - util.preventDefault(event); + // Prevent default actions caused by mouse wheel. + // That might be ugly, but we handle scrolls somehow + // anyway, so don't bother here.. + util.preventDefault(event); + } }; /** diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js index 7b2c0c9c..59804822 100755 --- a/lib/graph3d/Settings.js +++ b/lib/graph3d/Settings.js @@ -73,6 +73,8 @@ var OPTIONKEYS = [ 'gridColor', 'xCenter', 'yCenter', + 'zoomable', + 'ctrlToZoom' ]; diff --git a/lib/graph3d/options.js b/lib/graph3d/options.js index 95ff370c..a01902d8 100644 --- a/lib/graph3d/options.js +++ b/lib/graph3d/options.js @@ -43,6 +43,8 @@ let allOptions = { vertical : { number }, __type__ : { object } }, + zoomable : { boolean: bool }, + ctrlToZoom : { boolean: bool }, xCenter : { string }, yCenter : { string }, dataColor : colorOptions, @@ -101,17 +103,19 @@ let allOptions = { __type__ : { object } }, line: { - borderLeft: { string }, - height : { string }, - width : { string }, - __type__ : { object } + borderLeft : { string }, + height : { string }, + width : { string }, + pointerEvents: { string }, + __type__ : { object } }, dot: { - border : { string }, - borderRadius: { string }, - height : { string }, - width : { string }, - __type__ : { object}, + border : { string }, + borderRadius : { string }, + height : { string }, + width : { string }, + pointerEvents: { string }, + __type__ : { object} }, __type__: { object} },