Hello,
I do have an easy IONIC4 Setup with a Header and Splitpane-Menu like:
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu side="end" type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>My Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon slot="start" name="thumbs-up"></ion-icon>
<ion-label>Info 1</ion-label>
</ion-item>
<ion-item>
<ion-checkbox slot="start" [(ngModel)]="visualizeCheckbox" (ionChange)="updateCheckbox()"></ion-checkbox>
<ion-label>My Checkbox</ion-label>
</ion-item>
<ion-item>
<ion-range min="1" max="10" step="1" snaps="true" pin="true" [(ngModel)]="sliderPosition" (ionChange)="updateSliderPosition()">
<ion-icon slot="start" size="small" name="flask"></ion-icon>
<ion-icon slot="end" name="flask"></ion-icon>
</ion-range>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
I do have one simple page like this:
home.page.html
<ion-header>
<ion-toolbar>
<ion-label>Hello user <b>{{userName}}</b>!</ion-label>
<ion-buttons slot="end">
<ion-menu-button></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [scrollY]="false">
<canvas #renderCanvas ion-fixed></canvas>
</ion-content>
Inside this page i load a BabylonJS engine into the View-Child #rendercanvas as shown in the following snippet of home.page.ts
[...]
export class HomePage implements OnInit, OnDestroy {
@ViewChild('renderCanvas', { static: true }) renderCanvas: ElementRef;
[...]
ngOnInit() {
this.engine.createEngine(this.renderCanvas.nativeElement);
this.renderCanvas.nativeElement.height = window.innerHeight;
this.renderCanvas.nativeElement.width = window.innerWidth;
this.renderCanvas.nativeElement.style.width = '100%';
this.renderCanvas.nativeElement.style.height = '100%';
window.addEventListener('resize', () => {
this.engine.getEngine().resize();
});
}
[...]
In doing so i need to set the height and width of the renderCanvas correctly. I did it like shown above with using the window.innerWidth and window.innerHeight. But my issue is that, this includes the header and the split-pane-menu. The Event-Listener ensures a correct resizing once the window is resized. But, the first initial view of the BabylonJS engine in the renderCanvas will be distorted.
How can i dynamically access the width and height of just the renderCanvas (without the header and the menu)?
It tried it with using this.renderCanvas.nativeElement.clientHeight the but always received a 0.
Does anyone has an idea?
Thanks for your help!
ziguri
PS: Here is an excerpt of my package.json in case that is important
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@auth0/angular-jwt": "^3.0.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"@ionic/storage": "^2.2.0",
"babylonjs": "^4.0.3",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "~2.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},