Mercurial > hg > orthanc-stone
comparison Platforms/WebAssembly/wasm-viewport.ts @ 234:9afb50d1ac14 am
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) { |