This is an automated email from the ASF dual-hosted git repository. bhaisaab pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/master by this push: new 2874fc2 CLOUDSTACK-10051 Mouse Scrolling is not working in instance VM console (#2240) 2874fc2 is described below commit 2874fc23e7d11ee826ee25069851d7c48381cf75 Author: vedulasantosh <vedula.sant...@accelerite.com> AuthorDate: Mon Nov 6 09:58:10 2017 +0530 CLOUDSTACK-10051 Mouse Scrolling is not working in instance VM console (#2240) When mouse is scrolled in VM Console it is not working --- pom.xml | 1 + .../consoleproxy/ConsoleProxyAjaxHandler.java | 1 + .../cloud/consoleproxy/ConsoleProxyClientBase.java | 1 + .../cloud/consoleproxy/ConsoleProxyVncClient.java | 10 + .../src/com/cloud/consoleproxy/InputEventType.java | 4 +- systemvm/js/ajaxviewer.js | 24 +- systemvm/js/jquery.flot.navigate.js | 339 +++++++++++++++++++++ 7 files changed, 378 insertions(+), 2 deletions(-) diff --git a/pom.xml b/pom.xml index 45095d4..4ec4d11 100644 --- a/pom.xml +++ b/pom.xml @@ -929,6 +929,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 f586c93..30a5413 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 @@ public class ConsoleProxyAjaxHandler implements HttpHandler { 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 100e00c..bc2230b 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 @@ public abstract class ConsoleProxyClientBase implements ConsoleProxyClient, Cons 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 8fce978..5992855 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 class ConsoleProxyVncClient extends ConsoleProxyClientBase { } } + 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 4ee8479..4658d6e 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 enum InputEventType { 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 f8554a5..b085f99 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 0000000..02d189f --- /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.d [...] + + +/* 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. [...] + + + + +(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); -- To stop receiving notification emails like this one, please contact ['"commits@cloudstack.apache.org" <commits@cloudstack.apache.org>'].