rhtyd closed pull request #2240: CLOUDSTACK-10051 Mouse Scrolling is not
working in instance VM console
URL: https://github.com/apache/cloudstack/pull/2240
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/pom.xml b/pom.xml
index edfd649d759..c17414b6ba4 100644
--- a/pom.xml
+++ b/pom.xml
@@ -899,6 +899,7 @@
<exclude>systemvm/conf/agent.properties</exclude>
<exclude>systemvm/conf/environment.properties</exclude>
<exclude>systemvm/js/jquery.js</exclude>
+ <exclude>systemvm/js/jquery.flot.navigate.js</exclude>
<exclude>systemvm/patches/debian/systemvm.vmx</exclude>
<exclude>systemvm/patches/debian/config/root/.ssh/authorized_keys</exclude>
<exclude>systemvm/patches/debian/config/etc/apache2/httpd.conf</exclude>
diff --git
a/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyAjaxHandler.java
b/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyAjaxHandler.java
index f586c9361f1..30a54139c0e 100644
---
a/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyAjaxHandler.java
+++
b/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyAjaxHandler.java
@@ -292,6 +292,7 @@ private void handleClientEvent(ConsoleProxyClient viewer,
int event, Map<String,
case 2: // mouse down
case 3: // mouse up
case 8: // mouse double click
+ case 9: // mouse scroll
str = queryMap.get("x");
if (str != null) {
try {
diff --git
a/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyClientBase.java
b/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyClientBase.java
index 100e00c5284..bc2230b7aa9 100644
---
a/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyClientBase.java
+++
b/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyClientBase.java
@@ -294,6 +294,7 @@ private String getAjaxViewerPageContent(String
tileSequence, String imgUrl, Stri
String[] content =
new String[] {"<html>", "<head>", "<script
type=\"text/javascript\" language=\"javascript\"
src=\"/resource/js/jquery.js\"></script>",
+ "<script type=\"text/javascript\" language=\"javascript\"
src=\"/resource/js/jquery.flot.navigate.js\"></script>",
"<script type=\"text/javascript\" language=\"javascript\"
src=\"/resource/js/cloud.logger.js\"></script>",
"<script type=\"text/javascript\" language=\"javascript\"
src=\"/resource/js/ajaxkeys.js\"></script>",
"<script type=\"text/javascript\" language=\"javascript\"
src=\"/resource/js/ajaxviewer.js\"></script>",
diff --git
a/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyVncClient.java
b/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyVncClient.java
index 8fce9789452..5992855ec60 100644
---
a/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyVncClient.java
+++
b/services/console-proxy/server/src/com/cloud/consoleproxy/ConsoleProxyVncClient.java
@@ -190,6 +190,16 @@ public void sendClientMouseEvent(InputEventType event, int
x, int y, int code, i
}
}
+ if (event == InputEventType.MOUSE_SCROLL) {
+ if (code == -1) {
+ lastPointerMask = 8;
+ } else if (code == 1) {
+ lastPointerMask = 16;
+ } else if (code == 0) {
+ lastPointerMask = 0;
+ }
+ }
+
sendModifierEvents(modifiers);
client.sendClientMouseEvent(lastPointerMask, x, y, code, modifiers);
if (lastPointerMask == 0)
diff --git
a/services/console-proxy/server/src/com/cloud/consoleproxy/InputEventType.java
b/services/console-proxy/server/src/com/cloud/consoleproxy/InputEventType.java
index 4ee84792ddf..4658d6e8873 100644
---
a/services/console-proxy/server/src/com/cloud/consoleproxy/InputEventType.java
+++
b/services/console-proxy/server/src/com/cloud/consoleproxy/InputEventType.java
@@ -17,7 +17,7 @@
package com.cloud.consoleproxy;
public enum InputEventType {
- MOUSE_MOVE(1), MOUSE_DOWN(2), MOUSE_UP(3), KEY_PRESS(4), KEY_DOWN(5),
KEY_UP(6), MOUSE_DBLCLICK(8);
+ MOUSE_MOVE(1), MOUSE_DOWN(2), MOUSE_UP(3), KEY_PRESS(4), KEY_DOWN(5),
KEY_UP(6), MOUSE_DBLCLICK(8), MOUSE_SCROLL(9);
int eventCode;
@@ -45,6 +45,8 @@ public static InputEventType fromEventCode(int eventCode) {
return KEY_UP;
case 8:
return MOUSE_DBLCLICK;
+ case 9:
+ return MOUSE_SCROLL;
default:
break;
}
diff --git a/systemvm/js/ajaxviewer.js b/systemvm/js/ajaxviewer.js
index f8554a5f7ec..b085f9925c3 100644
--- a/systemvm/js/ajaxviewer.js
+++ b/systemvm/js/ajaxviewer.js
@@ -406,6 +406,7 @@ AjaxViewer.KEY_DOWN = 5;
AjaxViewer.KEY_UP = 6;
AjaxViewer.EVENT_BAG = 7;
AjaxViewer.MOUSE_DBLCLK = 8;
+AjaxViewer.MOUSE_SCROLL = 9;
// use java AWT key modifier masks
AjaxViewer.SHIFT_KEY_MASK = 64;
@@ -617,7 +618,6 @@ AjaxViewer.prototype = {
var img = $(this.img);
this.fullImage = fullImage;
this.imgUrl=imageUrl;
- this.imageLoaded = false;
img.attr('src', imageUrl).load(function() {
ajaxViewer.imageLoaded = true;
@@ -1230,6 +1230,23 @@ AjaxViewer.prototype = {
e.stopPropagation();
return false;
});
+
+ target.bind('mousewheel DOMMouseScroll',function(e) {
+ if(!ajaxViewer.ptInPanel(e.pageX, e.pageY))
+ return true;
+
+ var modifiers = ajaxViewer.getKeyModifiers(e);
+ var sd = e.originalEvent.detail/3;
+
+ var pt = ajaxViewer.pageToPanel(e.clientX, e.clientY);
+
+
+ ajaxViewer.onMouseScroll(pt.x, pt.y, sd, modifiers);
+ ajaxViewer.onMouseScroll(pt.x, pt.y, 0, modifiers);
+
+ e.stopPropagation();
+ return false;
+ });
// disable browser right-click context menu
target.bind("contextmenu", function() { return false; });
@@ -1346,6 +1363,11 @@ AjaxViewer.prototype = {
onMouseDblClick: function(x, y, whichButton, modifiers) {
this.sendMouseEvent(AjaxViewer.MOUSE_DBLCLK, x, y, whichButton,
modifiers);
},
+
+ onMouseScroll: function(x, y, whichButton, modifiers) {
+ this.sendMouseEvent(AjaxViewer.MOUSE_SCROLL, x, y, whichButton,
modifiers);
+ },
+
onKeyPress: function(code, modifiers) {
g_logger.log(Logger.LEVEL_WARN, "RAW KEYBOARD EVENT. KEY-PRESS:
" + code + ", modifers: " + modifiers);
diff --git a/systemvm/js/jquery.flot.navigate.js
b/systemvm/js/jquery.flot.navigate.js
new file mode 100644
index 00000000000..02d189f6190
--- /dev/null
+++ b/systemvm/js/jquery.flot.navigate.js
@@ -0,0 +1,339 @@
+/*
+Flot plugin for adding panning and zooming capabilities to a plot.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The default behaviour is double click and scrollwheel up/down to zoom
+in, drag to pan. The plugin defines plot.zoom({ center }),
+plot.zoomOut() and plot.pan(offset) so you easily can add custom
+controls. It also fires a "plotpan" and "plotzoom" event when
+something happens, useful for synchronizing plots.
+
+Options:
+
+ zoom: {
+ interactive: false
+ trigger: "dblclick" // or "click" for single click
+ amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+ }
+
+ pan: {
+ interactive: false
+ cursor: "move" // CSS mouse cursor value used when dragging, e.g.
"pointer"
+ frameRate: 20
+ }
+
+ xaxis, yaxis, x2axis, y2axis: {
+ zoomRange: null // or [number, number] (min range, max range) or false
+ panRange: null // or [number, number] (min, max) or false
+ }
+
+"interactive" enables the built-in drag/click behaviour. If you enable
+interactive for pan, then you'll have a basic plot that supports
+moving around; the same for zoom.
+
+"amount" specifies the default amount to zoom in (so 1.5 = 150%)
+relative to the current viewport.
+
+"cursor" is a standard CSS mouse cursor string used for visual
+feedback to the user when dragging.
+
+"frameRate" specifies the maximum number of times per second the plot
+will update itself while the user is panning around on it (set to null
+to disable intermediate pans, the plot will then not update until the
+mouse button is released).
+
+"zoomRange" is the interval in which zooming can happen, e.g. with
+zoomRange: [1, 100] the zoom will never scale the axis so that the
+difference between min and max is smaller than 1 or larger than 100.
+You can set either end to null to ignore, e.g. [1, null]. If you set
+zoomRange to false, zooming on that axis will be disabled.
+
+"panRange" confines the panning to stay within a range, e.g. with
+panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
+other. Either can be null, e.g. [-10, null]. If you set
+panRange to false, panning on that axis will be disabled.
+
+Example API usage:
+
+ plot = $.plot(...);
+
+ // zoom default amount in on the pixel (10, 20)
+ plot.zoom({ center: { left: 10, top: 20 } });
+
+ // zoom out again
+ plot.zoomOut({ center: { left: 10, top: 20 } });
+
+ // zoom 200% in on the pixel (10, 20)
+ plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
+
+ // pan 100 pixels to the left and 20 down
+ plot.pan({ left: -100, top: 20 })
+
+Here, "center" specifies where the center of the zooming should
+happen. Note that this is defined in pixel space, not the space of the
+data points (you can use the p2c helpers on the axes in Flot to help
+you convert between these).
+
+"amount" is the amount to zoom the viewport relative to the current
+range, so 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is
+70% (zoom out). You can set the default in the options.
+
+*/
+
+
+// First two dependencies, jquery.event.drag.js and
+// jquery.mousewheel.js, we put them inline here to save people the
+// effort of downloading them.
+
+/*
+jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media
(http://threedubmedia.com)
+Licensed under the MIT License ~
http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
+*/
+(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return
!L?this.trigger("drag"):this.bind("drag",K?K:L)};var
A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function
H(L){var
K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return
}}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove
mouseup",H,M);G(K,false);F.dragging=null;return false;case
!F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove
mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return
true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return
J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function
D(){return(F.dragging===false)}function G(K,J){if(!K){return
}K.unselectable=J?"off":"on";K.onselectstart=function(){return
J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
+
+
+/* jquery.mousewheel.min.js
+ * Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT
(http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ *
+ * Requires: 1.2.2+
+ */
+(function(c){var
a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var
d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var
d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return
d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return
this.unbind("mousewheel",d)}});function b(f){var
d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return
c.event.handle.apply(this,d)}})(jQuery);
+
+
+
+
+(function ($) {
+ var options = {
+ xaxis: {
+ zoomRange: null, // or [number, number] (min range, max range)
+ panRange: null // or [number, number] (min, max)
+ },
+ zoom: {
+ interactive: false,
+ trigger: "dblclick", // or "click" for single click
+ amount: 1.5 // how much to zoom relative to current position, 2 =
200% (zoom in), 0.5 = 50% (zoom out)
+ },
+ pan: {
+ interactive: false,
+ cursor: "move",
+ frameRate: 20
+ }
+ };
+
+ function init(plot) {
+ function onZoomClick(e, zoomOut) {
+ var c = plot.offset();
+ c.left = e.pageX - c.left;
+ c.top = e.pageY - c.top;
+ if (zoomOut)
+ plot.zoomOut({ center: c });
+ else
+ plot.zoom({ center: c });
+ }
+
+ function onMouseWheel(e, delta) {
+ onZoomClick(e, delta < 0);
+ return false;
+ }
+
+ var prevCursor = 'default', prevPageX = 0, prevPageY = 0,
+ panTimeout = null;
+
+ function onDragStart(e) {
+ if (e.which != 1) // only accept left-click
+ return false;
+ var c = plot.getPlaceholder().css('cursor');
+ if (c)
+ prevCursor = c;
+ plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor);
+ prevPageX = e.pageX;
+ prevPageY = e.pageY;
+ }
+
+ function onDrag(e) {
+ var frameRate = plot.getOptions().pan.frameRate;
+ if (panTimeout || !frameRate)
+ return;
+
+ panTimeout = setTimeout(function () {
+ plot.pan({ left: prevPageX - e.pageX,
+ top: prevPageY - e.pageY });
+ prevPageX = e.pageX;
+ prevPageY = e.pageY;
+
+ panTimeout = null;
+ }, 1 / frameRate * 1000);
+ }
+
+ function onDragEnd(e) {
+ if (panTimeout) {
+ clearTimeout(panTimeout);
+ panTimeout = null;
+ }
+
+ plot.getPlaceholder().css('cursor', prevCursor);
+ plot.pan({ left: prevPageX - e.pageX,
+ top: prevPageY - e.pageY });
+ }
+
+ function bindEvents(plot, eventHolder) {
+ var o = plot.getOptions();
+ if (o.zoom.interactive) {
+ eventHolder[o.zoom.trigger](onZoomClick);
+ eventHolder.mousewheel(onMouseWheel);
+ }
+
+ if (o.pan.interactive) {
+ eventHolder.bind("dragstart", { distance: 10 }, onDragStart);
+ eventHolder.bind("drag", onDrag);
+ eventHolder.bind("dragend", onDragEnd);
+ }
+ }
+
+ plot.zoomOut = function (args) {
+ if (!args)
+ args = {};
+
+ if (!args.amount)
+ args.amount = plot.getOptions().zoom.amount
+
+ args.amount = 1 / args.amount;
+ plot.zoom(args);
+ }
+
+ plot.zoom = function (args) {
+ if (!args)
+ args = {};
+
+ var c = args.center,
+ amount = args.amount || plot.getOptions().zoom.amount,
+ w = plot.width(), h = plot.height();
+
+ if (!c)
+ c = { left: w / 2, top: h / 2 };
+
+ var xf = c.left / w,
+ yf = c.top / h,
+ minmax = {
+ x: {
+ min: c.left - xf * w / amount,
+ max: c.left + (1 - xf) * w / amount
+ },
+ y: {
+ min: c.top - yf * h / amount,
+ max: c.top + (1 - yf) * h / amount
+ }
+ };
+
+ $.each(plot.getAxes(), function(_, axis) {
+ var opts = axis.options,
+ min = minmax[axis.direction].min,
+ max = minmax[axis.direction].max,
+ zr = opts.zoomRange;
+
+ if (zr === false) // no zooming on this axis
+ return;
+
+ min = axis.c2p(min);
+ max = axis.c2p(max);
+ if (min > max) {
+ // make sure min < max
+ var tmp = min;
+ min = max;
+ max = tmp;
+ }
+
+ var range = max - min;
+ if (zr &&
+ ((zr[0] != null && range < zr[0]) ||
+ (zr[1] != null && range > zr[1])))
+ return;
+
+ opts.min = min;
+ opts.max = max;
+ });
+
+ plot.setupGrid();
+ plot.draw();
+
+ if (!args.preventEvent)
+ plot.getPlaceholder().trigger("plotzoom", [ plot ]);
+ }
+
+ plot.pan = function (args) {
+ var delta = {
+ x: +args.left,
+ y: +args.top
+ };
+
+ if (isNaN(delta.x))
+ delta.x = 0;
+ if (isNaN(delta.y))
+ delta.y = 0;
+
+ $.each(plot.getAxes(), function (_, axis) {
+ var opts = axis.options,
+ min, max, d = delta[axis.direction];
+
+ min = axis.c2p(axis.p2c(axis.min) + d),
+ max = axis.c2p(axis.p2c(axis.max) + d);
+
+ var pr = opts.panRange;
+ if (pr === false) // no panning on this axis
+ return;
+
+ if (pr) {
+ // check whether we hit the wall
+ if (pr[0] != null && pr[0] > min) {
+ d = pr[0] - min;
+ min += d;
+ max += d;
+ }
+
+ if (pr[1] != null && pr[1] < max) {
+ d = pr[1] - max;
+ min += d;
+ max += d;
+ }
+ }
+
+ opts.min = min;
+ opts.max = max;
+ });
+
+ plot.setupGrid();
+ plot.draw();
+
+ if (!args.preventEvent)
+ plot.getPlaceholder().trigger("plotpan", [ plot ]);
+ }
+
+ function shutdown(plot, eventHolder) {
+ eventHolder.unbind(plot.getOptions().zoom.trigger, onZoomClick);
+ eventHolder.unbind("mousewheel", onMouseWheel);
+ eventHolder.unbind("dragstart", onDragStart);
+ eventHolder.unbind("drag", onDrag);
+ eventHolder.unbind("dragend", onDragEnd);
+ if (panTimeout)
+ clearTimeout(panTimeout);
+ }
+
+ plot.hooks.bindEvents.push(bindEvents);
+ plot.hooks.shutdown.push(shutdown);
+ }
+
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'navigate',
+ version: '1.3'
+ });
+})(jQuery);
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
