comparison Platforms/Wasm/wasm-viewport.ts @ 420:8bf717c4e497

canvas size is now defined by the parent div size
author am@osimis.io
date Mon, 19 Nov 2018 12:45:37 +0100
parents 8716176ff7f0
children 59b4afa92dee 5055031f4a06
comparison
equal deleted inserted replaced
419:d638d5721f1c 420:8bf717c4e497
135 (this.imageData_.width != window.innerWidth || 135 (this.imageData_.width != window.innerWidth ||
136 this.imageData_.height != window.innerHeight)) { 136 this.imageData_.height != window.innerHeight)) {
137 this.imageData_ = null; 137 this.imageData_ = null;
138 } 138 }
139 139
140 // width/height can be defined in percent of window width/height through html attributes like data-width-ratio="50" and data-height-ratio="20" 140 // width/height is defined by the parent width/height
141 var widthRatio = Number(this.htmlCanvas_.dataset["widthRatio"]) || 100; 141 this.htmlCanvas_.width = this.htmlCanvas_.parentElement.offsetWidth;
142 var heightRatio = Number(this.htmlCanvas_.dataset["heightRatio"]) || 100; 142 this.htmlCanvas_.height = this.htmlCanvas_.parentElement.offsetHeight;
143
144 this.htmlCanvas_.width = window.innerWidth * (widthRatio / 100);
145 this.htmlCanvas_.height = window.innerHeight * (heightRatio / 100);
146 143
147 console.log("resizing WasmViewport: ", this.htmlCanvas_.width, "x", this.htmlCanvas_.height); 144 console.log("resizing WasmViewport: ", this.htmlCanvas_.width, "x", this.htmlCanvas_.height);
148 145
149 if (this.imageData_ === null) { 146 if (this.imageData_ === null) {
150 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height); 147 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height);