initial

2 files changed, 163 insertions, 0 deletions

diff --git a/qooxdoo/source/class/Smokeping/ui/MPosition.js b/qooxdoo/source/class/Smokeping/ui/MPosition.js
new file mode 100644
index 0000000..74b709d
--- /dev/null
+++ b/qooxdoo/source/class/Smokeping/ui/MPosition.js
@@ -0,0 +1,53 @@
+/* ************************************************************************
+#module(Smokeping)
+************************************************************************ */
+
+/**
+ * some mouse handling routines for thegraph mover and zoomer.
+ */
+
+qx.Mixin.define('Smokeping.ui.MPosition',
+{
+
+	members: {
+		_init_cache: function(){
+	        var el = this._target.getElement();
+	        this._page_left = qx.html.Location.getPageAreaLeft(el);
+	        this._page_top = qx.html.Location.getPageAreaTop(el);
+			this._image_width = qx.html.Location.getPageAreaRight(el) - this._page_left;
+	        this._image_height = qx.html.Location.getPageAreaBottom(el) - this._page_top ;
+            this._canvas_top = this._top;
+	        this._canvas_left = this._image_width-this._width-this._right;
+	        this._canvas_right = this._right;
+            this._canvas_bottom = this._image_height-this._height-this._top;
+		},
+
+        _get_mouse_y: function(e){
+	            var mouse_y = e.getPageY()-this._page_top;
+	
+    	        if (mouse_y < this._canvas_top) {
+        	        mouse_y = this._canvas_top;
+            	} 
+                if (mouse_y > this._canvas_top + this._height) {
+                	mouse_y = this._canvas_top + this._height;
+	            }
+                return mouse_y;
+        },
+
+        _get_mouse_x: function(e){
+	            var mouse_x = e.getPageX()-this._page_left;
+	
+    	        if (mouse_x < this._canvas_left) {
+        	        mouse_x = this._canvas_left;
+            	} 
+                if (mouse_x > this._canvas_left + this._width) {
+                	mouse_x = this._canvas_left + this._width;
+	            }
+                return mouse_x;
+        }
+	}
+
+
+});
+ 
+ 
diff --git a/qooxdoo/source/class/Smokeping/ui/Mover.js b/qooxdoo/source/class/Smokeping/ui/Mover.js
new file mode 100644
index 0000000..f212708
--- /dev/null
+++ b/qooxdoo/source/class/Smokeping/ui/Mover.js
@@ -0,0 +1,110 @@
+/* ************************************************************************
+#module(Smokeping)
+************************************************************************ */
+
+/**
+ * Lets you do google map like draging of the graph canvas along time axis
+ *
+ */
+
+qx.Class.define('Smokeping.ui.Mover',
+{
+    extend: qx.ui.layout.CanvasLayout,        
+	include: Smokeping.ui.MPosition,
+
+    /*
+    *****************************************************************************
+       CONSTRUCTOR
+    *****************************************************************************
+    */
+
+    /**
+     * @param target  {Widget}    What surface should we base our selection on
+     *
+     * @param width   {Integer}   Width of the 'interesting' area of the target
+     *
+     * @param height  {Integer}   Height ot the 'interesting' area of the target
+     *
+     * @param right   {Integer}   Distance from the right edge
+     *
+     * @param top     {Integer}   Distance from the top
+     *
+	 * The zoomer will not activate if the ctrl key is pressed. This allows
+     * for the Mover to act on these events
+     *
+     */
+
+    construct: function (target,src,width,height,top,right,start,end) {
+        this._target = target;
+		this._width = width;
+		this._src = src;
+		this._height = height; // some where the calc is 1 off. this fixes it
+		this._top = top;
+		this._right = right;
+		with(this){
+			base(arguments);
+			set({
+				width:		  width,
+				height:		  height+17,
+				top: 	      top-2,
+				right:        right,
+                visibility:   false,
+				overflow:	  'hidden',
+				backgroundColor: 'white'
+			});
+		}
+		// make the canvas large
+		
+		this._moveing = false;
+  		this._target.addEventListener("mousedown", this._move_start,this);
+        this._target.addEventListener("mousemove", this._move_move,this);
+        this._target.addEventListener("mouseup",   this._move_end,this);
+    },
+
+	members: {
+    	_move_start: function(e){			
+			if (!e.isCtrlPressed()) return;
+			this._init_cache();
+			this._moveing = true;
+            this._start_x =  e.getPageX();
+            this._target.setCapture(true);                                    
+			this.removeAll();
+			for (var i=0;i<4;i++){
+				var duration = (this._end-this._start);
+				var tile = new qx.ui.basic.Image();
+				tile.set({
+					top: -(this._top-2),
+					left: -this._canvas_left,				
+					clipTop: this._top-2,
+					clipLeft: this._canvas_left,
+					clipWidth: this._width,
+					width: this._width,
+					height: this._height+17,
+					left: this._width * i,
+					source: this._src+';w='+this._width+';h='+this._height+';s='+(this._start+(duration*(i-2)))+'e='+(this._end+(duration*(i-2)))
+				});
+				this.add(tile);
+			}			
+			this.setScrollLeft(2*this._width);
+            this.setVisibility(true);
+            this._move_move(e);
+    	},
+
+		_move_move: function(e){
+            if (this._target.getCapture() && this._moveing ){        
+				var drag_x = e.getPageX() - this._start_x;
+				this.setScrollLeft(-drag_x+this._width*2);
+			}
+		},
+		_move_end: function(e){
+			if (!this._moveing) return;
+			this._moveing = false;
+			this._target.setCapture(false);
+            this.setVisibility(false);
+		}
+	}
+
+
+});
+ 
+