Mercurial > hg > orthanc-stone

comparison Platforms/Wasm/wasm-viewport.ts @ 457:3b4df9925db6 am-touch-events

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added support for 'touch' in mouse trackers. This is still a bit hacky and we need to refactor it to make it clean. Thanks to that, Pan and zoom are available together with 2 touches
author Alain Mazy <alain@mazy.be>
date Thu, 24 Jan 2019 16:42:27 +0100
parents 50229f6eb4cd
children 801d2697a1b1
comparison
equal deleted inserted replaced
456:b70fcc134ba4 457:3b4df9925db6
58 private ViewportMouseUp : Function; 58 private ViewportMouseUp : Function;
59 private ViewportMouseEnter : Function; 59 private ViewportMouseEnter : Function;
60 private ViewportMouseLeave : Function; 60 private ViewportMouseLeave : Function;
61 private ViewportMouseWheel : Function; 61 private ViewportMouseWheel : Function;
62 private ViewportKeyPressed : Function; 62 private ViewportKeyPressed : Function;
63 private ViewportTouchStart : Function;
64 private ViewportTouchMove : Function;
65 private ViewportTouchEnd : Function;
63 66
64 private pimpl_ : any; // Private pointer to the underlying WebAssembly C++ object 67 private pimpl_ : any; // Private pointer to the underlying WebAssembly C++ object
65 68
66 public constructor(module: any, canvasId: string, cppViewport: any) { 69 public constructor(module: any, canvasId: string, cppViewport: any) {
67 70
84 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ 'number' ]); 87 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ 'number' ]);
85 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, [ 'number' ]); 88 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, [ 'number' ]);
86 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, [ 'number' ]); 89 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, [ 'number' ]);
87 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'number', 'number', 'number', 'number', 'number' ]); 90 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'number', 'number', 'number', 'number', 'number' ]);
88 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'number', 'number', 'string', 'number', 'number' ]); 91 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'number', 'number', 'string', 'number', 'number' ]);
92 this.ViewportTouchStart = this.module_.cwrap('ViewportTouchStart', null, [ 'number', 'number', 'number', 'number', 'number', 'number', 'number' ]);
93 this.ViewportTouchMove = this.module_.cwrap('ViewportTouchMove', null, [ 'number', 'number', 'number', 'number', 'number', 'number', 'number' ]);
94 this.ViewportTouchEnd = this.module_.cwrap('ViewportTouchEnd', null, [ 'number', 'number', 'number', 'number', 'number', 'number', 'number' ]);
89 } 95 }
90 96
91 public GetCppViewport() : number { 97 public GetCppViewport() : number {
92 return this.pimpl_; 98 return this.pimpl_;
93 } 99 }
190 }); 196 });
191 197
192 this.htmlCanvas_.addEventListener('mousedown', function(event) { 198 this.htmlCanvas_.addEventListener('mousedown', function(event) {
193 var x = event.pageX - this.offsetLeft; 199 var x = event.pageX - this.offsetLeft;
194 var y = event.pageY - this.offsetTop; 200 var y = event.pageY - this.offsetTop;
195 that.ViewportMouseDown(that.pimpl_, event.button, x, y, 0 /* TODO detect modifier keys*/); 201
202 that.ViewportMouseDown(that.pimpl_, event.button, x, y, 0 /* TODO detect modifier keys*/);
196 }); 203 });
197 204
198 this.htmlCanvas_.addEventListener('mousemove', function(event) { 205 this.htmlCanvas_.addEventListener('mousemove', function(event) {
199 var x = event.pageX - this.offsetLeft; 206 var x = event.pageX - this.offsetLeft;
200 var y = event.pageY - this.offsetTop; 207 var y = event.pageY - this.offsetTop;
222 var y = event.pageY - this.offsetTop; 229 var y = event.pageY - this.offsetTop;
223 that.ViewportMouseWheel(that.pimpl_, event.deltaY, x, y, event.ctrlKey); 230 that.ViewportMouseWheel(that.pimpl_, event.deltaY, x, y, event.ctrlKey);
224 event.preventDefault(); 231 event.preventDefault();
225 }); 232 });
226 233
227 this.htmlCanvas_.addEventListener('touchstart', function(event) { 234 this.htmlCanvas_.addEventListener('touchstart', function(event: TouchEvent) {
228 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport) 235 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
229 event.preventDefault(); 236 event.preventDefault();
230 event.stopPropagation(); 237 event.stopPropagation();
231 238
232 that.ResetTouch(); 239 // TODO: find a way to pass the coordinates as an array between JS and C++
240 var x0 = 0;
241 var y0 = 0;
242 var x1 = 0;
243 var y1 = 0;
244 var x2 = 0;
245 var y2 = 0;
246 if (event.targetTouches.length > 0) {
247 x0 = event.targetTouches[0].pageX;
248 y0 = event.targetTouches[0].pageY;
249 }
250 if (event.targetTouches.length > 1) {
251 x1 = event.targetTouches[1].pageX;
252 y1 = event.targetTouches[1].pageY;
253 }
254 if (event.targetTouches.length > 2) {
255 x2 = event.targetTouches[2].pageX;
256 y2 = event.targetTouches[2].pageY;
257 }
258
259 that.ViewportTouchStart(that.pimpl_, event.targetTouches.length, x0, y0, x1, y1, x2, y2);
233 }); 260 });
234 261
235 this.htmlCanvas_.addEventListener('touchend', function(event) { 262 this.htmlCanvas_.addEventListener('touchend', function(event) {
236 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport) 263 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
237 event.preventDefault(); 264 event.preventDefault();
238 event.stopPropagation(); 265 event.stopPropagation();
239 266
240 that.ResetTouch(); 267 // TODO: find a way to pass the coordinates as an array between JS and C++
268 var x0 = 0;
269 var y0 = 0;
270 var x1 = 0;
271 var y1 = 0;
272 var x2 = 0;
273 var y2 = 0;
274 if (event.targetTouches.length > 0) {
275 x0 = event.targetTouches[0].pageX;
276 y0 = event.targetTouches[0].pageY;
277 }
278 if (event.targetTouches.length > 1) {
279 x1 = event.targetTouches[1].pageX;
280 y1 = event.targetTouches[1].pageY;
281 }
282 if (event.targetTouches.length > 2) {
283 x2 = event.targetTouches[2].pageX;
284 y2 = event.targetTouches[2].pageY;
285 }
286
287 that.ViewportTouchEnd(that.pimpl_, event.targetTouches.length, x0, y0, x1, y1, x2, y2);
241 }); 288 });
242 289
243 this.htmlCanvas_.addEventListener('touchmove', function(event: TouchEvent) { 290 this.htmlCanvas_.addEventListener('touchmove', function(event: TouchEvent) {
244 291
245 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport) 292 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
246 event.preventDefault(); 293 event.preventDefault();
247 event.stopPropagation(); 294 event.stopPropagation();
295
296
297 // TODO: find a way to pass the coordinates as an array between JS and C++
298 var x0 = 0;
299 var y0 = 0;
300 var x1 = 0;
301 var y1 = 0;
302 var x2 = 0;
303 var y2 = 0;
304 if (event.targetTouches.length > 0) {
305 x0 = event.targetTouches[0].pageX;
306 y0 = event.targetTouches[0].pageY;
307 }
308 if (event.targetTouches.length > 1) {
309 x1 = event.targetTouches[1].pageX;
310 y1 = event.targetTouches[1].pageY;
311 }
312 if (event.targetTouches.length > 2) {
313 x2 = event.targetTouches[2].pageX;
314 y2 = event.targetTouches[2].pageY;
315 }
316
317 that.ViewportTouchMove(that.pimpl_, event.targetTouches.length, x0, y0, x1, y1, x2, y2);
318 return;
248 319
249 // if (!that.touchGestureInProgress_) { 320 // if (!that.touchGestureInProgress_) {
250 // // starting a new gesture 321 // // starting a new gesture
251 // that.touchCount_ = event.targetTouches.length; 322 // that.touchCount_ = event.targetTouches.length;
252 // for (var t = 0; t < event.targetTouches.length; t++) { 323 // for (var t = 0; t < event.targetTouches.length; t++) {