Mercurial > hg > orthanc-stone

comparison Platforms/Wasm/wasm-viewport.ts @ 454:50229f6eb4cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag
author Alain Mazy <alain@mazy.be>
date Fri, 18 Jan 2019 11:52:10 +0100
parents 59b4afa92dee
children 3b4df9925db6 7cdb4634846c
comparison
equal deleted inserted replaced
453:59b4afa92dee 454:50229f6eb4cd
41 private canvasId_ : string; 41 private canvasId_ : string;
42 private htmlCanvas_ : HTMLCanvasElement; 42 private htmlCanvas_ : HTMLCanvasElement;
43 private context_ : CanvasRenderingContext2D; 43 private context_ : CanvasRenderingContext2D;
44 private imageData_ : any = null; 44 private imageData_ : any = null;
45 private renderingBuffer_ : any = null; 45 private renderingBuffer_ : any = null;
46
47 private touchGestureInProgress_: boolean = false;
48 private touchCount_: number = 0;
49 private touchGestureLastCoordinates_: [number, number][] = []; // last x,y coordinates of each touch
50
46 private touchZoom_ : any = false; 51 private touchZoom_ : any = false;
47 private touchTranslation_ : any = false; 52 private touchTranslation_ : any = false;
48 53
49 private ViewportSetSize : Function; 54 private ViewportSetSize : Function;
50 private ViewportRender : Function; 55 private ViewportRender : Function;
185 }); 190 });
186 191
187 this.htmlCanvas_.addEventListener('mousedown', function(event) { 192 this.htmlCanvas_.addEventListener('mousedown', function(event) {
188 var x = event.pageX - this.offsetLeft; 193 var x = event.pageX - this.offsetLeft;
189 var y = event.pageY - this.offsetTop; 194 var y = event.pageY - this.offsetTop;
190 that.ViewportMouseDown(that.pimpl_, event.button, x, y, 0 /* TODO */); 195 that.ViewportMouseDown(that.pimpl_, event.button, x, y, 0 /* TODO detect modifier keys*/);
191 }); 196 });
192 197
193 this.htmlCanvas_.addEventListener('mousemove', function(event) { 198 this.htmlCanvas_.addEventListener('mousemove', function(event) {
194 var x = event.pageX - this.offsetLeft; 199 var x = event.pageX - this.offsetLeft;
195 var y = event.pageY - this.offsetTop; 200 var y = event.pageY - this.offsetTop;
233 event.stopPropagation(); 238 event.stopPropagation();
234 239
235 that.ResetTouch(); 240 that.ResetTouch();
236 }); 241 });
237 242
238 this.htmlCanvas_.addEventListener('touchmove', function(event) { 243 this.htmlCanvas_.addEventListener('touchmove', function(event: TouchEvent) {
239 244
240 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport) 245 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
241 event.preventDefault(); 246 event.preventDefault();
242 event.stopPropagation(); 247 event.stopPropagation();
243 248
244 if (that.touchTranslation_.length == 2) { 249 // if (!that.touchGestureInProgress_) {
250 // // starting a new gesture
251 // that.touchCount_ = event.targetTouches.length;
252 // for (var t = 0; t < event.targetTouches.length; t++) {
253 // that.touchGestureLastCoordinates_.push([event.targetTouches[t].pageX, event.targetTouches[t].pageY]);
254 // }
255 // that.touchGestureInProgress_ = true;
256 // } else {
257 // // continuing a gesture
258 // // TODO: we shall probably forward all touches to the C++ code and let the "interactors/trackers" handle them
259
260 // if (that.touchCount_ == 1) { // consider it's a left mouse drag
261
262 // }
263 // }
264
265 // TODO: we shall probably forward all touches to the C++ code and let the "interactors/trackers" handle them
266
267 if (that.touchTranslation_.length == 2) { //
245 var t = that.GetTouchTranslation(event); 268 var t = that.GetTouchTranslation(event);
246 that.ViewportMouseMove(that.pimpl_, t[0], t[1]); 269 that.ViewportMouseMove(that.pimpl_, t[0], t[1]);
247 } 270 }
248 else if (that.touchZoom_.length == 3) { 271 else if (that.touchZoom_.length == 3) {
249 var z0 = that.touchZoom_; 272 var z0 = that.touchZoom_;
254 // Realize the gesture event 277 // Realize the gesture event
255 if (event.targetTouches.length == 1) { 278 if (event.targetTouches.length == 1) {
256 // Exactly one finger inside the canvas => Setup a translation 279 // Exactly one finger inside the canvas => Setup a translation
257 that.touchTranslation_ = that.GetTouchTranslation(event); 280 that.touchTranslation_ = that.GetTouchTranslation(event);
258 that.ViewportMouseDown(that.pimpl_, 281 that.ViewportMouseDown(that.pimpl_,
259 1 /* middle button */, 282 0 /* left button */,
260 that.touchTranslation_[0], 283 that.touchTranslation_[0],
261 that.touchTranslation_[1], 0); 284 that.touchTranslation_[1], 0);
262 } else if (event.targetTouches.length == 2) { 285 } else if (event.targetTouches.length == 2) {
263 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom 286 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom
264 that.touchZoom_ = that.GetTouchZoom(event); 287 that.touchZoom_ = that.GetTouchZoom(event);
278 this.ViewportMouseUp(this.pimpl_); 301 this.ViewportMouseUp(this.pimpl_);
279 } 302 }
280 303
281 this.touchTranslation_ = false; 304 this.touchTranslation_ = false;
282 this.touchZoom_ = false; 305 this.touchZoom_ = false;
306
307 // this.touchGestureInProgress_ = false;
308 // this.touchCount_ = 0;
309 // this.touchGestureLastCoordinates_ = [];
283 } 310 }
284 311
285 public GetTouchTranslation(event) { 312 public GetTouchTranslation(event) {
286 var touch = event.targetTouches[0]; 313 var touch = event.targetTouches[0];
287 return [ 314 return [