Mercurial > hg > orthanc-stone

comparison Platforms/WebAssembly/wasm-viewport.ts @ 234:9afb50d1ac14 am

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
configure WasmViewport size relative to window size through html attributes
author am@osimis.io
date Fri, 15 Jun 2018 16:36:29 +0200
parents 5027cb2feb51
children
comparison
equal deleted inserted replaced
233:68856534f005 234:9afb50d1ac14
32 //const ASSETS_FOLDER : string = "assets/lib"; 32 //const ASSETS_FOLDER : string = "assets/lib";
33 //const WASM_FILENAME : string = "orthanc-framework"; 33 //const WASM_FILENAME : string = "orthanc-framework";
34 34
35 export class WasmViewport { 35 export class WasmViewport {
36 36
37 private static cppWebViewportsMaps_ : Map<any, WasmViewport> = new Map<any, WasmViewport>(); 37 private static cppWebViewportsMaps_ : Map<number, WasmViewport> = new Map<number, WasmViewport>();
38 38
39 private module_ : any; 39 private module_ : any;
40 private canvasId_ : string; 40 private canvasId_ : string;
41 private htmlCanvas_ : HTMLCanvasElement; 41 private htmlCanvas_ : HTMLCanvasElement;
42 private context_ : CanvasRenderingContext2D; 42 private context_ : CanvasRenderingContext2D;
65 this.module_ = module; 65 this.module_ = module;
66 this.canvasId_ = canvasId; 66 this.canvasId_ = canvasId;
67 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement; 67 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement;
68 this.context_ = this.htmlCanvas_.getContext('2d'); 68 this.context_ = this.htmlCanvas_.getContext('2d');
69 69
70 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'any', 'number', 'number' ]); 70 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'number', 'number', 'number' ]);
71 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'any', 'number', 'number', 'number' ]); 71 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'number', 'number', 'number', 'number' ]);
72 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'any', 'number', 'number', 'number', 'number' ]); 72 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'number', 'number', 'number', 'number', 'number' ]);
73 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'any', 'number', 'number' ]); 73 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'number', 'number', 'number' ]);
74 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ 'any' ]); 74 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ 'number' ]);
75 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, [ 'any' ]); 75 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, [ 'number' ]);
76 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, [ 'any' ]); 76 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, [ 'number' ]);
77 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'any', 'number', 'number', 'number', 'number' ]); 77 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'number', 'number', 'number', 'number', 'number' ]);
78 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'any', 'string', 'number', 'number' ]); 78 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'number', 'string', 'number', 'number' ]);
79 } 79 }
80 80
81 public GetCppViewport() : any { 81 public GetCppViewport() : number {
82 return this.pimpl_; 82 return this.pimpl_;
83 } 83 }
84 84
85 public static GetFromCppViewport(cppViewportHandle: any) : WasmViewport { 85 public static GetFromCppViewport(cppViewportHandle: number) : WasmViewport {
86 if (WasmViewport.cppWebViewportsMaps_[cppViewportHandle] !== undefined) { 86 if (WasmViewport.cppWebViewportsMaps_[cppViewportHandle] !== undefined) {
87 return WasmViewport.cppWebViewportsMaps_[cppViewportHandle]; 87 return WasmViewport.cppWebViewportsMaps_[cppViewportHandle];
88 } 88 }
89 console.log("WasmViewport not found !"); 89 console.log("WasmViewport not found !");
90 return undefined; 90 return undefined;
116 (this.imageData_.width != window.innerWidth || 116 (this.imageData_.width != window.innerWidth ||
117 this.imageData_.height != window.innerHeight)) { 117 this.imageData_.height != window.innerHeight)) {
118 this.imageData_ = null; 118 this.imageData_ = null;
119 } 119 }
120 120
121 this.htmlCanvas_.width = window.innerWidth; 121 // width/height can be defined in percent of window width/height through html attributes like data-width-ratio="50" and data-height-ratio="20"
122 this.htmlCanvas_.height = window.innerHeight; 122 var widthRatio = Number(this.htmlCanvas_.dataset["widthRatio"]) || 100;
123 123 var heightRatio = Number(this.htmlCanvas_.dataset["heightRatio"]) || 100;
124
125 this.htmlCanvas_.width = window.innerWidth * (widthRatio / 100);
126 this.htmlCanvas_.height = window.innerHeight * (heightRatio / 100);
127
128 console.log("resizing WasmViewport: ", this.htmlCanvas_.width, "x", this.htmlCanvas_.height);
129
124 if (this.imageData_ === null) { 130 if (this.imageData_ === null) {
125 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height); 131 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height);
126 this.ViewportSetSize(this.pimpl_, this.htmlCanvas_.width, this.htmlCanvas_.height); 132 this.ViewportSetSize(this.pimpl_, this.htmlCanvas_.width, this.htmlCanvas_.height);
127 133
128 if (this.renderingBuffer_ != null) { 134 if (this.renderingBuffer_ != null) {