Mercurial > hg > orthanc-stone
comparison Platforms/Wasm/wasm-viewport.ts @ 457:3b4df9925db6 am-touch-events
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++) { |