orthanc-stone: Platforms/Wasm/wasm-viewport.ts annotate

annotate Platforms/Wasm/wasm-viewport.ts @ 526:548eed46f535 dev

introduced a Logger class that displays timing and source (C++/JS)

author	Alain Mazy <alain@mazy.be>
date	Thu, 14 Mar 2019 19:04:35 +0100
parents	801d2697a1b1
children	11510f92cc38

rev	line source
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	1 import wasmApplicationRunner = require('./wasm-application-runner');
5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	2 //import stoneFrameworkLoader = require('./stone-framework-loader');
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	3 import * as Logger from './logger'
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	4
230 7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	5 var isPendingRedraw = false;
229 b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	6
230 7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	7 function ScheduleWebViewportRedraw(cppViewportHandle: any) : void
7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	8 {
7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	9 if (!isPendingRedraw) {
7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	10 isPendingRedraw = true;
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	11 Logger.defaultLogger.debug('Scheduling a refresh of the viewport, as its content changed');
230 7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	12 window.requestAnimationFrame(function() {
7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	13 isPendingRedraw = false;
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	14 WasmViewport.GetFromCppViewport(cppViewportHandle).Redraw();
230 7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	15 });
229 b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	16 }
230 7d2631320615 wasm-application.js is now in ts am@osimis.io parents: 229 diff changeset	17 }
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	18
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	19 (<any>window).ScheduleWebViewportRedraw = ScheduleWebViewportRedraw;
5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	20
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	21 declare function UTF8ToString(any): string;
5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	22
5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	23 function CreateWasmViewport(htmlCanvasId: string) : any {
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	24 var cppViewportHandle = wasmApplicationRunner.CreateCppViewport();
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	25 var canvasId = UTF8ToString(htmlCanvasId);
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	26 var webViewport = new WasmViewport((<any> window).StoneFrameworkModule, canvasId, cppViewportHandle); // viewports are stored in a static map in WasmViewport -> won't be deleted
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	27 webViewport.Initialize();
314 97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	28
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	29 return cppViewportHandle;
5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	30 }
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	31
5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	32 (<any>window).CreateWasmViewport = CreateWasmViewport;
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	33
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	34 // export declare type InitializationCallback = () => void;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	35
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	36 // export declare var StoneFrameworkModule : any;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	37
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	38 //const ASSETS_FOLDER : string = "assets/lib";
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	39 //const WASM_FILENAME : string = "orthanc-framework";
229 b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	40
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	41 export class WasmViewport {
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	42
313 8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	43 private static viewportsMapByCppHandle_ : Map<number, WasmViewport> = new Map<number, WasmViewport>(); // key = the C++ handle
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	44 private static viewportsMapByCanvasId_ : Map<string, WasmViewport> = new Map<string, WasmViewport>(); // key = the canvasId
229 b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	45
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	46 private module_ : any;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	47 private canvasId_ : string;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	48 private htmlCanvas_ : HTMLCanvasElement;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	49 private context_ : CanvasRenderingContext2D;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	50 private imageData_ : any = null;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	51 private renderingBuffer_ : any = null;
454 50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	52
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	53 private touchGestureInProgress_: boolean = false;
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	54 private touchCount_: number = 0;
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	55 private touchGestureLastCoordinates_: [number, number][] = []; // last x,y coordinates of each touch
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	56
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	57 private touchZoom_ : any = false;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	58 private touchTranslation_ : any = false;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	59
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	60 private ViewportSetSize : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	61 private ViewportRender : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	62 private ViewportMouseDown : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	63 private ViewportMouseMove : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	64 private ViewportMouseUp : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	65 private ViewportMouseEnter : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	66 private ViewportMouseLeave : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	67 private ViewportMouseWheel : Function;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	68 private ViewportKeyPressed : Function;
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	69 private ViewportTouchStart : Function;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	70 private ViewportTouchMove : Function;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	71 private ViewportTouchEnd : Function;
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	72
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	73 private pimpl_ : any; // Private pointer to the underlying WebAssembly C++ object
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	74
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	75 public constructor(module: any, canvasId: string, cppViewport: any) {
5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	76
5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	77 this.pimpl_ = cppViewport;
313 8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	78 WasmViewport.viewportsMapByCppHandle_[this.pimpl_] = this;
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	79 WasmViewport.viewportsMapByCanvasId_[canvasId] = this;
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	80
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	81 this.module_ = module;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	82 this.canvasId_ = canvasId;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	83 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement;
244 313903066093 cleanup am@osimis.io parents: 236 diff changeset	84 if (this.htmlCanvas_ == null) {
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	85 Logger.defaultLogger.error("Can not create WasmViewport, did not find the canvas whose id is '", this.canvasId_, "'");
244 313903066093 cleanup am@osimis.io parents: 236 diff changeset	86 }
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	87 this.context_ = this.htmlCanvas_.getContext('2d');
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	88
234 9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	89 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'number', 'number', 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	90 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'number', 'number', 'number', 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	91 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'number', 'number', 'number', 'number', 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	92 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'number', 'number', 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	93 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	94 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, [ 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	95 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, [ 'number' ]);
9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	96 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'number', 'number', 'number', 'number', 'number' ]);
327 8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	97 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'number', 'number', 'string', 'number', 'number' ]);
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	98 this.ViewportTouchStart = this.module_.cwrap('ViewportTouchStart', null, [ 'number', 'number', 'number', 'number', 'number', 'number', 'number' ]);
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	99 this.ViewportTouchMove = this.module_.cwrap('ViewportTouchMove', null, [ 'number', 'number', 'number', 'number', 'number', 'number', 'number' ]);
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	100 this.ViewportTouchEnd = this.module_.cwrap('ViewportTouchEnd', null, [ 'number', 'number', 'number', 'number', 'number', 'number', 'number' ]);
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	101 }
210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	102
234 9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	103 public GetCppViewport() : number {
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	104 return this.pimpl_;
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	105 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	106
234 9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	107 public static GetFromCppViewport(cppViewportHandle: number) : WasmViewport {
313 8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	108 if (WasmViewport.viewportsMapByCppHandle_[cppViewportHandle] !== undefined) {
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	109 return WasmViewport.viewportsMapByCppHandle_[cppViewportHandle];
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	110 }
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	111 Logger.defaultLogger.error("WasmViewport not found !");
313 8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	112 return undefined;
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	113 }
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	114
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	115 public static GetFromCanvasId(canvasId: string) : WasmViewport {
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	116 if (WasmViewport.viewportsMapByCanvasId_[canvasId] !== undefined) {
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	117 return WasmViewport.viewportsMapByCanvasId_[canvasId];
229 b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	118 }
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	119 Logger.defaultLogger.error("WasmViewport not found !");
229 b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	120 return undefined;
b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	121 }
b0ba3b38a23c ScheduleRedraw can handle multiple viewports am@osimis.io parents: 228 diff changeset	122
314 97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	123 public static ResizeAll() {
97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	124 for (let canvasId in WasmViewport.viewportsMapByCanvasId_) {
97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	125 WasmViewport.viewportsMapByCanvasId_[canvasId].Resize();
97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	126 }
97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	127 }
97f16214dc5e cleanup am@osimis.io parents: 313 diff changeset	128
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	129 public Redraw() {
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	130 if (this.imageData_ === null \|\|
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	131 this.renderingBuffer_ === null \|\|
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	132 this.ViewportRender(this.pimpl_,
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	133 this.imageData_.width,
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	134 this.imageData_.height,
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	135 this.renderingBuffer_) == 0) {
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	136 Logger.defaultLogger.error('The rendering has failed');
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	137 } else {
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	138 // Create an accessor to the rendering buffer (i.e. create a
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	139 // "window" above the heap of the WASM module), then copy it to
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	140 // the ImageData object
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	141 this.imageData_.data.set(new Uint8ClampedArray(
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	142 this.module_.buffer,
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	143 this.renderingBuffer_,
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	144 this.imageData_.width * this.imageData_.height * 4));
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	145
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	146 this.context_.putImageData(this.imageData_, 0, 0);
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	147 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	148 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	149
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	150 public Resize() {
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	151 if (this.imageData_ != null &&
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	152 (this.imageData_.width != window.innerWidth \|\|
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	153 this.imageData_.height != window.innerHeight)) {
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	154 this.imageData_ = null;
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	155 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	156
420 8bf717c4e497 canvas size is now defined by the parent div size am@osimis.io parents: 327 diff changeset	157 // width/height is defined by the parent width/height
8bf717c4e497 canvas size is now defined by the parent div size am@osimis.io parents: 327 diff changeset	158 this.htmlCanvas_.width = this.htmlCanvas_.parentElement.offsetWidth;
8bf717c4e497 canvas size is now defined by the parent div size am@osimis.io parents: 327 diff changeset	159 this.htmlCanvas_.height = this.htmlCanvas_.parentElement.offsetHeight;
234 9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	160
526 548eed46f535 introduced a Logger class that displays timing and source (C++/JS) Alain Mazy <alain@mazy.be> parents: 506 diff changeset	161 Logger.defaultLogger.debug("resizing WasmViewport: ", this.htmlCanvas_.width, "x", this.htmlCanvas_.height);
234 9afb50d1ac14 configure WasmViewport size relative to window size through html attributes am@osimis.io parents: 231 diff changeset	162
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	163 if (this.imageData_ === null) {
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	164 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height);
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	165 this.ViewportSetSize(this.pimpl_, this.htmlCanvas_.width, this.htmlCanvas_.height);
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	166
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	167 if (this.renderingBuffer_ != null) {
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	168 this.module_._free(this.renderingBuffer_);
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	169 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	170
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	171 this.renderingBuffer_ = this.module_._malloc(this.imageData_.width * this.imageData_.height * 4);
313 8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	172 } else {
8bdc6112bc2e initial resize of canvas am@osimis.io parents: 244 diff changeset	173 this.ViewportSetSize(this.pimpl_, this.htmlCanvas_.width, this.htmlCanvas_.height);
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	174 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	175
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	176 this.Redraw();
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	177 }
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	178
231 5027cb2feb51 viewport is now part of the Application itself and not global anymore am@osimis.io parents: 230 diff changeset	179 public Initialize() {
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	180
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	181 // Force the rendering of the viewport for the first time
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	182 this.Resize();
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	183
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	184 var that : WasmViewport = this;
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	185 // Register an event listener to call the Resize() function
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	186 // each time the window is resized.
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	187 window.addEventListener('resize', function(event) {
210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	188 that.Resize();
210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	189 }, false);
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	190
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	191 this.htmlCanvas_.addEventListener('contextmenu', function(event) {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	192 // Prevent right click on the canvas
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	193 event.preventDefault();
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	194 }, false);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	195
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	196 this.htmlCanvas_.addEventListener('mouseleave', function(event) {
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	197 that.ViewportMouseLeave(that.pimpl_);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	198 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	199
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	200 this.htmlCanvas_.addEventListener('mouseenter', function(event) {
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	201 that.ViewportMouseEnter(that.pimpl_);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	202 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	203
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	204 this.htmlCanvas_.addEventListener('mousedown', function(event) {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	205 var x = event.pageX - this.offsetLeft;
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	206 var y = event.pageY - this.offsetTop;
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	207
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	208 that.ViewportMouseDown(that.pimpl_, event.button, x, y, 0 /* TODO detect modifier keys*/);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	209 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	210
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	211 this.htmlCanvas_.addEventListener('mousemove', function(event) {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	212 var x = event.pageX - this.offsetLeft;
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	213 var y = event.pageY - this.offsetTop;
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	214 that.ViewportMouseMove(that.pimpl_, x, y);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	215 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	216
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	217 this.htmlCanvas_.addEventListener('mouseup', function(event) {
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	218 that.ViewportMouseUp(that.pimpl_);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	219 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	220
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	221 window.addEventListener('keydown', function(event) {
327 8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	222 var keyChar = event.key;
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	223 var keyCode = event.keyCode
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	224 if (keyChar.length == 1) {
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	225 keyCode = 0; // maps to OrthancStone::KeyboardKeys_Generic
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	226 } else {
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	227 keyChar = null;
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	228 }
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	229 // console.log("key: ", keyCode, keyChar);
8716176ff7f0 added support for arrow keys am@osimis.io parents: 314 diff changeset	230 that.ViewportKeyPressed(that.pimpl_, keyCode, keyChar, event.shiftKey, event.ctrlKey, event.altKey);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	231 });
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	232
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	233 this.htmlCanvas_.addEventListener('wheel', function(event) {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	234 var x = event.pageX - this.offsetLeft;
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	235 var y = event.pageY - this.offsetTop;
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	236 that.ViewportMouseWheel(that.pimpl_, event.deltaY, x, y, event.ctrlKey);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	237 event.preventDefault();
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	238 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	239
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	240 this.htmlCanvas_.addEventListener('touchstart', function(event: TouchEvent) {
453 59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	241 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	242 event.preventDefault();
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	243 event.stopPropagation();
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	244
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	245 // TODO: find a way to pass the coordinates as an array between JS and C++
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	246 var x0 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	247 var y0 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	248 var x1 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	249 var y1 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	250 var x2 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	251 var y2 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	252 if (event.targetTouches.length > 0) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	253 x0 = event.targetTouches[0].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	254 y0 = event.targetTouches[0].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	255 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	256 if (event.targetTouches.length > 1) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	257 x1 = event.targetTouches[1].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	258 y1 = event.targetTouches[1].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	259 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	260 if (event.targetTouches.length > 2) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	261 x2 = event.targetTouches[2].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	262 y2 = event.targetTouches[2].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	263 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	264
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	265 that.ViewportTouchStart(that.pimpl_, event.targetTouches.length, x0, y0, x1, y1, x2, y2);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	266 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	267
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	268 this.htmlCanvas_.addEventListener('touchend', function(event) {
453 59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	269 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	270 event.preventDefault();
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	271 event.stopPropagation();
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	272
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	273 // TODO: find a way to pass the coordinates as an array between JS and C++
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	274 var x0 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	275 var y0 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	276 var x1 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	277 var y1 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	278 var x2 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	279 var y2 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	280 if (event.targetTouches.length > 0) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	281 x0 = event.targetTouches[0].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	282 y0 = event.targetTouches[0].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	283 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	284 if (event.targetTouches.length > 1) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	285 x1 = event.targetTouches[1].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	286 y1 = event.targetTouches[1].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	287 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	288 if (event.targetTouches.length > 2) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	289 x2 = event.targetTouches[2].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	290 y2 = event.targetTouches[2].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	291 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	292
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	293 that.ViewportTouchEnd(that.pimpl_, event.targetTouches.length, x0, y0, x1, y1, x2, y2);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	294 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	295
454 50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	296 this.htmlCanvas_.addEventListener('touchmove', function(event: TouchEvent) {
453 59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	297
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	298 // don't propagate events to the whole body (this could zoom the entire page instead of zooming the viewport)
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	299 event.preventDefault();
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	300 event.stopPropagation();
59b4afa92dee TS: stop propagating touch events to the whole html doc Alain Mazy <alain@mazy.be> parents: 420 diff changeset	301
457 3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	302
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	303 // TODO: find a way to pass the coordinates as an array between JS and C++
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	304 var x0 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	305 var y0 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	306 var x1 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	307 var y1 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	308 var x2 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	309 var y2 = 0;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	310 if (event.targetTouches.length > 0) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	311 x0 = event.targetTouches[0].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	312 y0 = event.targetTouches[0].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	313 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	314 if (event.targetTouches.length > 1) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	315 x1 = event.targetTouches[1].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	316 y1 = event.targetTouches[1].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	317 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	318 if (event.targetTouches.length > 2) {
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	319 x2 = event.targetTouches[2].pageX;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	320 y2 = event.targetTouches[2].pageY;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	321 }
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	322
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	323 that.ViewportTouchMove(that.pimpl_, event.targetTouches.length, x0, y0, x1, y1, x2, y2);
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	324 return;
3b4df9925db6 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 Alain Mazy <alain@mazy.be> parents: 454 diff changeset	325
454 50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	326 // if (!that.touchGestureInProgress_) {
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	327 // // starting a new gesture
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	328 // that.touchCount_ = event.targetTouches.length;
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	329 // for (var t = 0; t < event.targetTouches.length; t++) {
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	330 // that.touchGestureLastCoordinates_.push([event.targetTouches[t].pageX, event.targetTouches[t].pageY]);
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	331 // }
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	332 // that.touchGestureInProgress_ = true;
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	333 // } else {
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	334 // // continuing a gesture
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	335 // // TODO: we shall probably forward all touches to the C++ code and let the "interactors/trackers" handle them
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	336
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	337 // if (that.touchCount_ == 1) { // consider it's a left mouse drag
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	338
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	339 // }
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	340 // }
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	341
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	342 // TODO: we shall probably forward all touches to the C++ code and let the "interactors/trackers" handle them
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	343
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	344 if (that.touchTranslation_.length == 2) { //
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	345 var t = that.GetTouchTranslation(event);
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	346 that.ViewportMouseMove(that.pimpl_, t[0], t[1]);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	347 }
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	348 else if (that.touchZoom_.length == 3) {
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	349 var z0 = that.touchZoom_;
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	350 var z1 = that.GetTouchZoom(event);
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	351 that.ViewportMouseMove(that.pimpl_, z0[0], z0[1] - z0[2] + z1[2]);
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	352 }
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	353 else {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	354 // Realize the gesture event
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	355 if (event.targetTouches.length == 1) {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	356 // Exactly one finger inside the canvas => Setup a translation
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	357 that.touchTranslation_ = that.GetTouchTranslation(event);
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	358 that.ViewportMouseDown(that.pimpl_,
454 50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	359 0 /* left button */,
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	360 that.touchTranslation_[0],
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	361 that.touchTranslation_[1], 0);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	362 } else if (event.targetTouches.length == 2) {
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	363 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	364 that.touchZoom_ = that.GetTouchZoom(event);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	365 var z0 = that.touchZoom_;
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	366 that.ViewportMouseDown(that.pimpl_,
210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	367 2 /* right button */,
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	368 z0[0],
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	369 z0[1], 0);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	370 }
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	371 }
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	372 });
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	373 }
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	374
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	375 public ResetTouch() {
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	376 if (this.touchTranslation_ \|\|
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	377 this.touchZoom_) {
228 210c1ce8e1a6 WasmViewport is no more a singleton am@osimis.io parents: 227 diff changeset	378 this.ViewportMouseUp(this.pimpl_);
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	379 }
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	380
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	381 this.touchTranslation_ = false;
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	382 this.touchZoom_ = false;
454 50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	383
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	384 // this.touchGestureInProgress_ = false;
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	385 // this.touchCount_ = 0;
50229f6eb4cd TS: one touch drag is not equivalent to left mouse drag instead of middle mouse drag Alain Mazy <alain@mazy.be> parents: 453 diff changeset	386 // this.touchGestureLastCoordinates_ = [];
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	387 }
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	388
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	389 public GetTouchTranslation(event) {
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	390 var touch = event.targetTouches[0];
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	391 return [
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	392 touch.pageX,
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	393 touch.pageY
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	394 ];
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	395 }
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	396
1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	397 public GetTouchZoom(event) {
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	398 var touch1 = event.targetTouches[0];
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	399 var touch2 = event.targetTouches[1];
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	400 var dx = (touch1.pageX - touch2.pageX);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	401 var dy = (touch1.pageY - touch2.pageY);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	402 var d = Math.sqrt(dx * dx + dy * dy);
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	403 return [
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	404 (touch1.pageX + touch2.pageX) / 2.0,
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	405 (touch1.pageY + touch2.pageY) / 2.0,
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	406 d
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	407 ];
c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	408 }
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	409
227 c8f11437a6fd getting ready for multiple viewports am@osimis.io parents: 226 diff changeset	410 }
466 5055031f4a06 - Added browserify to build. This allows using require calls for modules that bgo-osimis parents: 420 diff changeset	411
226 1fa4c65c7e1b WasmViewport in ts am@osimis.io parents: diff changeset	412

Mercurial > hg > orthanc-stone

annotate Platforms/Wasm/wasm-viewport.ts @ 526:548eed46f535 dev