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}
},