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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
/*
* sharedImage.js
*
* This file is part of the 'sharedImage.js' example.
*
* Authors:
* Eduardo Lima Mitev <elima@igalia.com>
*/
function SharedImage (args) {
this._init (args);
}
SharedImage.prototype = {
_init: function (args) {
this._cnt = args.container;
this._peer = args.peer;
this._createElements ();
this._drawn = false;
},
_createElements: function () {
var self = this;
this._canvas = document.createElement ("canvas");
this._canvas.className = "canvas";
this._ctx = this._canvas.getContext ("2d");
this._wrapper = document.createElement ("div");
this._wrapper.className = "wrapper";
this._wrapper.onmousedown = function (e) {
this.grabbed = true;
this.grab_x = e.x;
this.grab_y = e.y;
var cmd = ["grab", {x: e.clientX, y: e.clientY}];
var msg = JSON.stringify (cmd);
self._peer.sendText (msg);
};
this._wrapper.onmousemove = function (e) {
if (this.grabbed) {
var cmd = ["move", {x: e.clientX, y: e.clientY}];
var msg = JSON.stringify (cmd);
self._peer.sendText (msg);
}
};
function ungrab () {
if (this.grabbed) {
var cmd = ["ungrab"];
var msg = JSON.stringify (cmd);
self._peer.sendText (msg);
this.grabbed = false;
}
};
this._wrapper.onmouseup = ungrab;
this._wrapper.onmouseout = ungrab;
this._viewport = document.createElement ("div");
this._viewport.className = "viewport";
this._indexBox = document.createElement ("div");
this._indexBox.className = "index_box";
this._wrapper.appendChild (this._canvas);
this._viewport.appendChild (this._indexBox);
this._viewport.appendChild (this._wrapper);
this._cnt.appendChild (this._viewport);
this._img = new Image ();
this._img.onload = function () {
self._aspectRatio = this.width / this.height;
self._requestUpdate ();
};
this._img.src = "igalia.png";
},
setPosition: function (x, y) {
this._wrapper.style.left = x + "px";
this._wrapper.style.top = y + "px";
},
setRotation: function (angle) {
var st = "rotate(" + angle + "deg)";
this._canvas.style.transform = st;
this._canvas.style.webkitTransform = st;
this._canvas.style.OTransform = st;
this._canvas.style.MozTransform = st;
},
setSize: function (w, h) {
this._canvas.setAttribute ("width", w);
this._canvas.setAttribute ("height", h);
this._ctx.drawImage (this._img, 0, 0, w, h);
this._drawn = true;
},
update: function (args) {
if (args.w)
this.setSize (args.w, args.w / this._aspectRatio);
else if (! this._drawn)
this.setSize (320, 320 / this._aspectRatio);
if (args.r)
this.setRotation (args.r);
if (args.x && args.y) {
this.setPosition (args.x, args.y);
}
},
_requestUpdate: function () {
var msg = '["req-update"]';
this._peer.sendText (msg);
},
setViewportIndex: function (index) {
this._indexBox.innerHTML = index/1;
}
};
|
