1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/* ************************************************************************
#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._src = src;
this._width = width;
this._height = height;
this._top = top;
this._right = right;
this._start = start;
this._end = end;
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);
}
}
});
|
