cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bhais...@apache.org
Subject [cloudstack] branch master updated: CLOUDSTACK-10051 Mouse Scrolling is not working in instance VM console (#2240)
Date Mon, 06 Nov 2017 04:28:14 GMT
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.santosh@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>'].

Mime
View raw message