hart-estate-widget 0.0.19 → 0.0.20

package/build/components/ModelTab.js

@@ -34,7 +34,7 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
   (0, _react.useEffect)(() => {
     const container = document.querySelector('.widget-tab__model-scene');
 
-    _modelStore.default.setRendererSize(container.offsetWidth, container.offsetHeight);
+    _modelStore.default.setContainer(container);
 
     container.appendChild(_modelStore.default.renderer.domElement);
 

package/build/store/modelStore.js

@@ -84,6 +84,12 @@ class ModelStore {
       this.joystickDirections = directions;
     });
 
+    _defineProperty(this, "setContainer", container => {
+      this.container = container;
+      this.updateRendererSize();
+      this.updateCameraSize();
+    });
+
     _defineProperty(this, "createScene", () => {
       this.scene = new THREE.Scene();
       const light = new THREE.AmbientLight(0xffffff);
@@ -113,26 +119,30 @@ class ModelStore {
     _defineProperty(this, "createRenderer", () => {
       this.renderer = new THREE.WebGLRenderer();
       this.renderer.setPixelRatio(window.devicePixelRatio);
-      this.setRendererSize(window.innerWidth, window.innerHeight);
+      this.updateRendererSize();
       this.renderer.localClippingEnabled = true;
       return this;
     });
 
-    _defineProperty(this, "setRendererSize", (width, height) => {
-      this.renderer.setSize(width, height);
+    _defineProperty(this, "updateRendererSize", () => {
+      this.renderer.setSize(this.width, this.height);
     });
 
     _defineProperty(this, "createCamera", () => {
-      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+      this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
       this.camera.position.set(0, 0, 0);
       window.addEventListener('resize', () => {
-        this.camera.aspect = window.innerWidth / window.innerHeight;
-        this.camera.updateProjectionMatrix();
-        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.updateCameraSize();
+        this.updateRendererSize();
       });
       return this;
     });
 
+    _defineProperty(this, "updateCameraSize", () => {
+      this.camera.aspect = this.width / this.height;
+      this.camera.updateProjectionMatrix();
+    });
+
     _defineProperty(this, "createControls", () => {
       this.controls = new _cameraControls.default(this.camera, this.renderer.domElement);
       this.controls.minDistance = 0.5;
@@ -231,6 +241,18 @@ class ModelStore {
     this.createScene().createRenderer().createCamera().createControls().addKeyEvents();
   }
 
+  get width() {
+    var _this$container;
+
+    return ((_this$container = this.container) === null || _this$container === void 0 ? void 0 : _this$container.offsetWidth) || window.innerWidth;
+  }
+
+  get height() {
+    var _this$container2;
+
+    return ((_this$container2 = this.container) === null || _this$container2 === void 0 ? void 0 : _this$container2.offsetHeight) || window.innerHeight;
+  }
+
 }
 
 var _default = new ModelStore();

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",