@crystaldesign/real-time-viewer 25.3.0-beta.3 → 25.3.0-beta.31

package/build/esm/index.js

@@ -1,6 +1,7 @@
 import { useRef, useEffect, memo } from 'react';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { Constants, HighlightLayer, Color4 as Color4$1 } from '@babylonjs/core';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
@@ -33,10 +34,8 @@ import { Rectangle } from '@babylonjs/gui/2D/controls/rectangle';
 import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { Axis } from '@babylonjs/core/Maths/math.axis';
-import { HighlightLayer } from '@babylonjs/core/Layers/';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Texture } from '@babylonjs/core/Materials/Textures/texture';
-import { Constants } from '@babylonjs/core/Engines/constants';
 import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/math';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { Scene } from '@babylonjs/core/scene';
@@ -183,8 +182,8 @@ function GetCameraControls(camera) {
   }
   function onRotateMouse(event) {
     if (previousTouch != undefined) return;
-    var deltaX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-    var deltaY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+    var deltaX = event.movementX || 0;
+    var deltaY = event.movementY || 0;
     onRotate(deltaX, deltaY);
   }
   function onMouseDown(ev) {
@@ -204,8 +203,8 @@ function GetCameraControls(camera) {
     element === null || element === void 0 || element.removeEventListener('pointermove', onMouseMoveTarget, false);
   }
   function onMouseMoveTarget(event) {
-    var deltaX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-    var deltaY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+    var deltaX = event.movementX || 0;
+    var deltaY = event.movementY || 0;
     moveTarget(deltaX * 0.002, deltaY * 0.002);
     sceneStore.doRenderControlLoop = true;
   }
@@ -940,6 +939,7 @@ function updateCam(camera, scene) {
   var _sceneStore$updateCam;
   if (camera.pos.x == 0 && camera.pos.y == 0 && camera.pos.z == 0) return;
   var utilStore = useUtilStoreContext();
+  if (!utilStore.updateCam) return;
   var sceneStore = useSceneStoreContext();
   var cam = scene.getCameraByName('defaultCam');
   if (!cam) {
@@ -1000,6 +1000,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_sceneConstruct", {});
     _defineProperty(this, "_hasRendered", false);
     _defineProperty(this, "_hasPlanned", false);
+    _defineProperty(this, "_modelIteration", 0);
     _defineProperty(this, "_utilStore", void 0);
     _defineProperty(this, "_cache", []);
     _defineProperty(this, "_ssao", undefined);
@@ -1010,6 +1011,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_jwt", void 0);
     _defineProperty(this, "_onMissingGeo", void 0);
     _defineProperty(this, "_cancelSceneExport", void 0);
+    _defineProperty(this, "_materialCache", void 0);
     //controls
     _defineProperty(this, "_renderControlLoop", undefined);
     _defineProperty(this, "_doRenderControlLoop", false);
@@ -1029,6 +1031,7 @@ var SceneStore = /*#__PURE__*/function () {
     this.updateCameraInformation = updateCameraInformation;
     this._cancelSceneExport = false;
     this._jwt = jwt;
+    this._materialCache = [];
     var options = new SceneOptimizerOptions(15, 1000);
     options.addOptimization(new ShadowsOptimization(0));
     options.addOptimization(new RenderTargetsOptimization(0));
@@ -1058,6 +1061,16 @@ var SceneStore = /*#__PURE__*/function () {
     this._utilStore = utilStore;
   }
   return _createClass(SceneStore, [{
+    key: "materialCache",
+    get: function get() {
+      return this._materialCache;
+    }
+  }, {
+    key: "modelIteration",
+    get: function get() {
+      return this._modelIteration;
+    }
+  }, {
     key: "jwt",
     get: function get() {
       return this._jwt;
@@ -1392,6 +1405,40 @@ var SceneStore = /*#__PURE__*/function () {
       }
       this._scene.getEngine().resize();
     }
+  }, {
+    key: "checkMaterialCache",
+    value: function checkMaterialCache() {
+      // material cache can't go over amount x because it leads to performance issues
+      if (this._materialCache.length < 10) return;
+      var amountToDispose = this._materialCache.length - 11;
+      var disposableMaterials = this._materialCache.filter(function (m) {
+        return m.mat.getBindedMeshes().length == 0;
+      });
+      disposableMaterials = disposableMaterials.sort(function (dm) {
+        return dm.lastUsage;
+      });
+      for (var idx = 0; idx < amountToDispose; idx++) {
+        if (idx < disposableMaterials.length - 1) {
+          var _mat$baseTexture, _mat$metallicRoughnes, _mat$normalTexture;
+          var mat = disposableMaterials[idx].mat;
+          mat.dispose();
+          (_mat$baseTexture = mat.baseTexture) === null || _mat$baseTexture === void 0 || _mat$baseTexture.dispose();
+          (_mat$metallicRoughnes = mat.metallicRoughnessTexture) === null || _mat$metallicRoughnes === void 0 || _mat$metallicRoughnes.dispose();
+          (_mat$normalTexture = mat.normalTexture) === null || _mat$normalTexture === void 0 || _mat$normalTexture.dispose();
+          this._materialCache.splice(this._materialCache.indexOf(disposableMaterials[idx]), 1);
+        }
+      }
+    }
+  }, {
+    key: "addMaterialToCache",
+    value: function addMaterialToCache(materialCache) {
+      this._materialCache.push(materialCache);
+    }
+  }, {
+    key: "updateModelIteration",
+    value: function updateModelIteration() {
+      this._modelIteration = this._modelIteration + 1;
+    }
   }, {
     key: "init",
     value: function init(diva3durl, gameCanvas, viewpoint, resolution) {
@@ -1685,7 +1732,7 @@ function _arrayLikeToArray$5(r, a) { (null == a || a > r.length) && (a = r.lengt
 */
 
 var UIStore = /*#__PURE__*/function () {
-  function UIStore(scene, enableSSAO, utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy) {
+  function UIStore(scene, enableSSAO, _utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy) {
     var _this = this;
     _classCallCheck(this, UIStore);
     _defineProperty(this, "_utilStore", void 0);
@@ -1708,38 +1755,53 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "_gridGui", void 0);
     _defineProperty(this, "_isStaticBg", void 0);
     _defineProperty(this, "_elementsInfo", void 0);
-    _defineProperty(this, "_selectedHl", void 0);
     _defineProperty(this, "_diffuseTexture", void 0);
     _defineProperty(this, "_plane", void 0);
     _defineProperty(this, "_selectedMeshes", []);
+    _defineProperty(this, "_isUnityComb", false);
+    _defineProperty(this, "_selectedHl", void 0);
     _defineProperty(this, "updateOverlayImage", function (overlayImage) {
       var _this$_diffuseTexture;
       if (!overlayImage || !_this._scene || ((_this$_diffuseTexture = _this._diffuseTexture) === null || _this$_diffuseTexture === void 0 ? void 0 : _this$_diffuseTexture.url) == overlayImage.base64) return;
+      var utilStore = useUtilStoreContext();
+      if (!utilStore.updateCam) return;
       _this._isStaticBg = overlayImage.isStaticBg;
       _this._diffuseTexture.updateURL(overlayImage.base64);
       _this._plane.visibility = 1;
+      var root = _this._scene.getTransformNodeByName('Root');
+      if (root) root.getChildMeshes().forEach(function (m) {
+        if (!m.material) return;
+        m.material.depthFunction = Constants.ALWAYS;
+        m.material.disableColorWrite = true;
+      });
       _this._enableSSAO(false);
+      _this._plane.setEnabled(true);
     });
     this._scene = scene;
+    var engine = this._scene.getEngine();
     var plane = MeshBuilder.CreatePlane('overlayplane', {
       size: 0.0047
     }, scene);
+    plane.setEnabled(false);
     var mat = new StandardMaterial('planeMat', scene);
-    this._diffuseTexture = new Texture('data:image/gif;base64,R0lGODlhAQABALMAAAAAAP///////////////////////////////////////////////////////////yH5BAEAAAEALAAAAAABAAEAAAQCMEQAOw==', scene);
+    this._diffuseTexture = new Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/ep3wWkAAAAASUVORK5CYII=', scene);
     mat.diffuseTexture = this._diffuseTexture;
     mat.emissiveTexture = this._diffuseTexture;
     mat.specularColor = Color3.Black();
     this._plane = plane;
-    plane.material = mat;
-    var engine = this._scene.getEngine();
-    plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
-    plane.position.z = 0.011;
-    plane.isPickable = false;
-    plane.parent = scene.activeCamera;
+    this._plane.material = mat;
+    this._plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
+    this._plane.position.z = 0.011;
+    this._plane.isPickable = false;
+    this._plane.parent = scene.activeCamera;
     this._selectedHl = new HighlightLayer('hl', this._scene);
     this._selectedHl.innerGlow = false;
+    this._selectedHl.outerGlow = false;
+    this._selectedHl.blurHorizontalSize = 1;
+    this._selectedHl.blurVerticalSize = 1;
+    this._selectedHl.mainTexture.samples = 4;
     this._enableSSAO = enableSSAO;
-    this._utilStore = utilStore;
+    this._utilStore = _utilStore;
     this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI');
     this._gui.layer.layerMask = 0x0fffffff;
     this._gui.renderScale = 1;
@@ -1756,12 +1818,23 @@ var UIStore = /*#__PURE__*/function () {
     }
     this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
     if (_overlayImage) {
-      this._diffuseTexture.updateURL(_overlayImage.base64);
+      this._isUnityComb = true;
       this._plane.visibility = 1;
+      var root = this._scene.getTransformNodeByName('Root');
+      if (root) root.getChildMeshes().forEach(function (m) {
+        if (!m.material) return;
+        m.material.depthFunction = Constants.ALWAYS;
+        m.material.disableColorWrite = false;
+      });
       this._enableSSAO(false);
     }
   }
   return _createClass(UIStore, [{
+    key: "highlightLayer",
+    get: function get() {
+      return this._selectedHl;
+    }
+  }, {
     key: "isStaticBg",
     get: function get() {
       return !!this._isStaticBg;
@@ -1769,7 +1842,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "unityCombActive",
     get: function get() {
-      return !!this._plane;
+      return !!this._isUnityComb;
     }
   }, {
     key: "initSelectionHandler",
@@ -1792,25 +1865,10 @@ var UIStore = /*#__PURE__*/function () {
         return mesh.isPickable && mesh.isReady() && mesh.isEnabled() && (!_this2._scene.cameraToUseForPointers || (_this2._scene.cameraToUseForPointers.layerMask & mesh.layerMask) !== 0);
       };
     }
-  }, {
-    key: "highlightObservable",
-    value: function highlightObservable(meshes) {
-      var _this3 = this;
-      meshes.forEach(function (m) {
-        if (_this3._plane.visibility == 1) {
-          m.material.depthFunction = Constants.ALWAYS;
-          m.material.disableColorWrite = true;
-        } else {
-          m.visibility = 1;
-          m.material.depthFunction = Constants.LESS;
-          m.material.disableColorWrite = false;
-        }
-      });
-    }
   }, {
     key: "createGridGui",
     value: function createGridGui(mesh, onClickDel) {
-      var _this4 = this;
+      var _this3 = this;
       if (!this._selectionHandler || !mesh) return;
       this.removeGridGui();
       var guiElem = new TransformNode('gridGuiElem', this._scene);
@@ -1833,10 +1891,10 @@ var UIStore = /*#__PURE__*/function () {
       dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
       dbt.onPointerClickObservable.add(onClickDel);
       dtarget.onPointerEnterObservable = new Observable(function () {
-        return dtarget.background = _this4._colors.hoverBg;
+        return dtarget.background = _this3._colors.hoverBg;
       });
       dtarget.onPointerOutObservable = new Observable(function () {
-        return dtarget.background = _this4._colors.defaultBg;
+        return dtarget.background = _this3._colors.defaultBg;
       });
       if (this._uiConfig.templateConfig == 'standard') dtarget.linkOffsetY = -48;
       dtarget.addControl(dbt);
@@ -1869,9 +1927,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "createPosNr",
     value: function createPosNr(elementInfo, element, isBoxPlanner) {
-      var _this5 = this,
-        _this$_utilStore$view,
-        _this$_utilStore$view2;
+      var _this4 = this;
       var guiElem = {
         elementId: elementInfo.elementId,
         elements: []
@@ -1916,43 +1972,48 @@ var UIStore = /*#__PURE__*/function () {
         guiElemRightBack.position = _pos;
       }
       var childMeshes = element.getChildMeshes();
-      this._scene.onBeforeRenderObservable.add(function () {
-        return _this5.highlightObservable(childMeshes);
+      childMeshes.forEach(function (m) {
+        if (_this4._plane.visibility == 1) {
+          m.material.depthFunction = Constants.ALWAYS;
+          m.material.disableColorWrite = true;
+        } else {
+          m.visibility = 1;
+          m.material.depthFunction = Constants.LESS;
+          m.material.disableColorWrite = false;
+        }
       });
       if (!elementInfo.active) {
         childMeshes.forEach(function (m) {
-          m.visibility = 0;
-          if (!m.actionManager) m.actionManager = new ActionManager(_this5._scene);
+          if (_this4._plane.visibility == 1) m.visibility = 0;
+          if (!m.actionManager) m.actionManager = new ActionManager(_this4._scene);
           m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function (ev) {
-            _this5._selectedHl.removeAllMeshes();
-            _this5._selectedMeshes.forEach(function (_m) {
+            _this4._selectedHl.removeAllMeshes();
+            if (_this4._plane.visibility == 1) _this4._selectedMeshes.forEach(function (_m) {
               return _m.visibility = 0;
             });
             element.getChildMeshes().forEach(function (_m) {
               _m.visibility = 1;
-              _this5._selectedHl.addMesh(_m, Color3.Black());
+              _this4._selectedHl.addMesh(_m, Color3.Black());
             });
           }));
           m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function (ev) {
-            _this5._selectedHl.removeAllMeshes();
-            element.getChildMeshes().forEach(function (_m) {
+            _this4._selectedHl.removeAllMeshes();
+            if (_this4._plane.visibility == 1) element.getChildMeshes().forEach(function (_m) {
               return _m.visibility = 0;
             });
-            _this5._selectedMeshes.forEach(function (_m) {
+            _this4._selectedMeshes.forEach(function (_m) {
               _m.visibility = 1;
-              _this5._selectedHl.addMesh(_m, Color3.Black());
+              _this4._selectedHl.addMesh(_m, Color3.Black());
             });
           }));
         });
-      }
-      if (elementInfo.active && (((_this$_utilStore$view = this._utilStore.viewHandler) === null || _this$_utilStore$view === void 0 ? void 0 : _this$_utilStore$view.tabGroupState.curTabGroup.type) == 'PLANNER' || ((_this$_utilStore$view2 = this._utilStore.viewHandler) === null || _this$_utilStore$view2 === void 0 ? void 0 : _this$_utilStore$view2.tabGroupState.curTabGroup.type) == 'OPTION')) {
+      } else {
         var _guiElemRightBack;
         this._selectedMeshes = childMeshes;
         this._selectedMeshes.forEach(function (_m) {
           _m.visibility = 1;
-          _this5._selectedHl.addMesh(_m, Color3.Black());
+          _this4._selectedHl.addMesh(_m, Color3.Black());
         });
-        this._selectedHl.addExcludedMesh(this._plane);
         var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
         guiElem.elements.push(dtarget);
         dtarget.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
@@ -1965,13 +2026,14 @@ var UIStore = /*#__PURE__*/function () {
         dbt.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '60%';
         dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
         dbt.onPointerClickObservable.add(function () {
-          return _this5._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
+          return _this4._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
         });
         if (this._uiConfig.templateConfig == 'standard' && !guiElemRightBack) dtarget.linkOffsetY = -48;
         dtarget.addControl(dbt);
         this._gui.addControl(dtarget);
         dtarget.linkWithMesh((_guiElemRightBack = guiElemRightBack) !== null && _guiElemRightBack !== void 0 ? _guiElemRightBack : guiElemLeftBack);
       }
+      this._selectedHl.addExcludedMesh(this._plane);
       this._guiElements.push(guiElem);
     }
   }, {
@@ -1979,7 +2041,7 @@ var UIStore = /*#__PURE__*/function () {
     value: function createBoxCopyButtons(elementInfo, element) {
       var _this$_scene$activeCa,
         _this$_scene$activeCa2,
-        _this6 = this,
+        _this5 = this,
         _this$_scene$activeCa3;
       var guiElem = {
         elementId: elementInfo.elementId,
@@ -2005,8 +2067,8 @@ var UIStore = /*#__PURE__*/function () {
             target.rotation = 0;
           }
           (_this$_scene$activeCa2 = this._scene.activeCamera) === null || _this$_scene$activeCa2 === void 0 || _this$_scene$activeCa2.onViewMatrixChangedObservable.add(function () {
-            var _this6$_scene$activeC;
-            var _dir = (_this6$_scene$activeC = _this6._scene.activeCamera) === null || _this6$_scene$activeC === void 0 ? void 0 : _this6$_scene$activeC.getDirection(Axis.Z);
+            var _this5$_scene$activeC;
+            var _dir = (_this5$_scene$activeC = _this5._scene.activeCamera) === null || _this5$_scene$activeC === void 0 ? void 0 : _this5$_scene$activeC.getDirection(Axis.Z);
             if (_dir.z > 0) {
               target.rotation = 180 * Math.PI / 180;
             } else {
@@ -2014,8 +2076,8 @@ var UIStore = /*#__PURE__*/function () {
             }
           });
           target.onPointerClickObservable.add(function () {
-            var _this6$_onElementCopy;
-            return (_this6$_onElementCopy = _this6._onElementCopy) === null || _this6$_onElementCopy === void 0 ? void 0 : _this6$_onElementCopy.call(_this6, elementInfo.setId, elementInfo.elementId, 'LEFT');
+            var _this5$_onElementCopy;
+            return (_this5$_onElementCopy = _this5._onElementCopy) === null || _this5$_onElementCopy === void 0 ? void 0 : _this5$_onElementCopy.call(_this5, elementInfo.setId, elementInfo.elementId, 'LEFT');
           });
           break;
         case 'BoxCopyRight':
@@ -2028,8 +2090,8 @@ var UIStore = /*#__PURE__*/function () {
           guiElement.position = element.absolutePosition.add(new Vector3(-(bbox.max.x - bbox.min.x), (bbox.max.y - bbox.min.y) / 2, bbox.max.z - bbox.min.z));
           guiElement.rotation = new Vector3(90 * Math.PI / 180, 0, 0);
           (_this$_scene$activeCa3 = this._scene.activeCamera) === null || _this$_scene$activeCa3 === void 0 || _this$_scene$activeCa3.onViewMatrixChangedObservable.add(function () {
-            var _this6$_scene$activeC2;
-            var _dir = (_this6$_scene$activeC2 = _this6._scene.activeCamera) === null || _this6$_scene$activeC2 === void 0 ? void 0 : _this6$_scene$activeC2.getDirection(Axis.Z);
+            var _this5$_scene$activeC2;
+            var _dir = (_this5$_scene$activeC2 = _this5._scene.activeCamera) === null || _this5$_scene$activeC2 === void 0 ? void 0 : _this5$_scene$activeC2.getDirection(Axis.Z);
             if (_dir.z < 0) {
               target.rotation = 180 * Math.PI / 180;
             } else {
@@ -2037,16 +2099,16 @@ var UIStore = /*#__PURE__*/function () {
             }
           });
           target.onPointerClickObservable.add(function () {
-            var _this6$_onElementCopy2;
-            return (_this6$_onElementCopy2 = _this6._onElementCopy) === null || _this6$_onElementCopy2 === void 0 ? void 0 : _this6$_onElementCopy2.call(_this6, elementInfo.setId, elementInfo.elementId, 'RIGHT');
+            var _this5$_onElementCopy2;
+            return (_this5$_onElementCopy2 = _this5._onElementCopy) === null || _this5$_onElementCopy2 === void 0 ? void 0 : _this5$_onElementCopy2.call(_this5, elementInfo.setId, elementInfo.elementId, 'RIGHT');
           });
           break;
         case 'BoxCopyTop':
           target.rotation = 90 * Math.PI / 180;
           guiElement.position = element.absolutePosition.add(new Vector3(-(bbox.max.x - bbox.min.x) / 2, bbox.max.y - bbox.min.y, bbox.max.z - bbox.min.z));
           target.onPointerClickObservable.add(function () {
-            var _this6$_onElementCopy3;
-            return (_this6$_onElementCopy3 = _this6._onElementCopy) === null || _this6$_onElementCopy3 === void 0 ? void 0 : _this6$_onElementCopy3.call(_this6, elementInfo.setId, elementInfo.elementId, 'TOP');
+            var _this5$_onElementCopy3;
+            return (_this5$_onElementCopy3 = _this5._onElementCopy) === null || _this5$_onElementCopy3 === void 0 ? void 0 : _this5$_onElementCopy3.call(_this5, elementInfo.setId, elementInfo.elementId, 'TOP');
           });
           break;
       }
@@ -2057,7 +2119,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "initGui",
     value: function initGui(onElSelected, elements) {
-      var _this7 = this;
+      var _this6 = this;
       if (!this._selectionHandler) this.initSelectionHandler(onElSelected);
       if (!this._scene) return;
       if (!this._elementsInfo) return;
@@ -2074,15 +2136,15 @@ var UIStore = /*#__PURE__*/function () {
           return Number(el.bbn.name.slice(el.bbn.name.lastIndexOf('E') + 1, el.bbn.name.length)) == elementInfo.elementId;
         });
         if (!emnt) return;
-        var element = _this7._scene.getTransformNodeByName(emnt.bbn.name);
+        var element = _this6._scene.getTransformNodeByName(emnt.bbn.name);
         if (!element) return;
-        if (elementInfo.type == 'PosNr') _this7.createPosNr(elementInfo, element, isBoxPlanner);else _this7.createBoxCopyButtons(elementInfo, element);
+        if (elementInfo.type == 'PosNr') _this6.createPosNr(elementInfo, element, isBoxPlanner);else _this6.createBoxCopyButtons(elementInfo, element);
       });
     }
   }, {
     key: "selectElem",
     value: function selectElem(name) {
-      var _this8 = this;
+      var _this7 = this;
       var _iterator = _createForOfIteratorHelper$5(this._gui.getControlsByType('ellipse')),
         _step;
       try {
@@ -2098,14 +2160,24 @@ var UIStore = /*#__PURE__*/function () {
       this._guiElements.forEach(function (guiElem) {
         return guiElem.elements.forEach(function (element) {
           if (element.typeName == 'label') element.color = 'Black';
-          if (element.typeName == 'Ellipse') element.color = _this8._colors.defaultBg;
+          if (element.typeName == 'Ellipse') element.color = _this7._colors.defaultBg;
           if (guiElem.elementId.toString() == name) {
-            if (element.typeName == 'label') element.color = _this8._colors.selectedBg;
+            if (element.typeName == 'label') element.color = _this7._colors.selectedBg;
             if (element.typeName == 'Ellipse') element.color = 'White';
           }
         });
       });
     }
+  }, {
+    key: "deactivateHighlightLayer",
+    value: function deactivateHighlightLayer() {
+      this._selectedHl.outerGlow = false;
+    }
+  }, {
+    key: "activateHightlightLayer",
+    value: function activateHightlightLayer() {
+      this._selectedHl.outerGlow = true;
+    }
   }, {
     key: "clearGui",
     value: function clearGui() {
@@ -2118,22 +2190,30 @@ var UIStore = /*#__PURE__*/function () {
       this._scene.transformNodes.forEach(function (tN) {
         return tN.name.startsWith('guiElem_') && tN.dispose();
       });
-      this._selectedHl.removeAllMeshes();
     }
   }, {
     key: "onMove",
     value: function onMove() {
-      if (!this._plane) return;
-      this._plane.visibility = 0;
-      this._enableSSAO(true);
-      this._utilStore.updateCam = false;
+      if (!this._isUnityComb) return;
+      if (this._plane.visibility != 0) {
+        var root = this._scene.getTransformNodeByName('Root');
+        if (root) root.getChildMeshes().forEach(function (m) {
+          m.visibility = 1;
+          if (!m.material) return;
+          m.material.depthFunction = Constants.LESS;
+          m.material.disableColorWrite = false;
+        });
+        this._enableSSAO(true);
+        this._plane.visibility = 0;
+      }
+      this._utilStore.updateCam = false; // need to always update since can move again while image is waiting to be updated
     }
   }, {
     key: "requestNewOverlayImage",
     value: function requestNewOverlayImage(viewpoint, focusedElement, targetCameraPosition) {
-      var _this9 = this;
+      var _this8 = this;
       //this._overlayImage exists only when unity combi is enabled
-      if (!this._plane) return;
+      if (!this._isUnityComb) return;
       var elementId = undefined;
       var setId = undefined;
       var ob = this._scene.getTransformNodeByName(focusedElement.name);
@@ -2147,21 +2227,26 @@ var UIStore = /*#__PURE__*/function () {
       clearTimeout(this._timeoutId);
       if (!this._latestViewpoint || this._latestViewpoint.isOutdated || Math.abs(this._latestViewpoint.pos.x - viewpoint.pos.x) > 0.05 || Math.abs(this._latestViewpoint.pos.y - viewpoint.pos.y) > 0.05 || Math.abs(this._latestViewpoint.pos.z - viewpoint.pos.z) > 0.05 || Math.abs(this._latestViewpoint.rot.x - viewpoint.rot.x) > 0.05 || Math.abs(this._latestViewpoint.rot.y - viewpoint.rot.y) > 0.05 || Math.abs(this._latestViewpoint.rot.z - viewpoint.rot.z) > 0.05) {
         this._timeoutId = setTimeout(function () {
-          var _this9$_requestNewOve;
-          _this9._utilStore.addOutstandingImage();
-          _this9._latestViewpoint = viewpoint;
-          console.log('requestNewOverlay Image');
-          (_this9$_requestNewOve = _this9._requestNewOverlayImage) === null || _this9$_requestNewOve === void 0 || _this9$_requestNewOve.call(_this9, viewpoint, {
+          var _this8$_requestNewOve;
+          _this8._latestViewpoint = viewpoint;
+          _this8._utilStore.addOutstandingImageCount();
+          (_this8$_requestNewOve = _this8._requestNewOverlayImage) === null || _this8$_requestNewOve === void 0 || _this8$_requestNewOve.call(_this8, viewpoint, {
             adjustZoomInUnity: false,
             onlyAdjustZoomBBChanged: false,
             rotationCenter: viewpoint.targetPos,
             elementId: elementId,
             setId: setId
           });
-          _this9._utilStore.updateCam = true;
+          _this8._utilStore.updateCam = true;
         }, 200);
       } else {
         this._plane.visibility = 1;
+        var root = this._scene.getTransformNodeByName('Root');
+        if (root) root.getChildMeshes().forEach(function (m) {
+          if (!m.material) return;
+          m.material.depthFunction = Constants.ALWAYS;
+          m.material.disableColorWrite = true;
+        });
       }
     }
   }]);
@@ -2223,7 +2308,7 @@ var UtilStore = /*#__PURE__*/function () {
   }, {
     key: "updateCam",
     get: function get() {
-      return this._updateCam && this._outstandingImageCount == 0;
+      return this._updateCam;
     },
     set: function set(doUpdateCam) {
       this._updateCam = doUpdateCam;
@@ -2237,15 +2322,21 @@ var UtilStore = /*#__PURE__*/function () {
     key: "onElementDeleted",
     value: function onElementDeleted(setId, elementId) {
       var _this$viewHandler;
-      this.addOutstandingImage();
+      this.addOutstandingImageCount();
       (_this$viewHandler = this.viewHandler) === null || _this$viewHandler === void 0 || _this$viewHandler.viewPlannerHandler.onElementDeleted(setId, elementId);
       this._updateCam = true;
     }
   }, {
-    key: "addOutstandingImage",
-    value: function addOutstandingImage() {
+    key: "addOutstandingImageCount",
+    value: function addOutstandingImageCount() {
       this._outstandingImageCount++;
     }
+  }, {
+    key: "subtractOutstandingImageCount",
+    value: function subtractOutstandingImageCount() {
+      if (this._outstandingImageCount == 0) return;
+      this._outstandingImageCount--;
+    }
   }, {
     key: "disableElementRows",
     value: function disableElementRows(element, cache) {
@@ -2551,13 +2642,14 @@ var customMat = /*#__PURE__*/function () {
     var setDataRow,
       sceneStore,
       url,
-      mat,
+      _mat,
       res,
       parsedMat,
       baseTexture,
       mRTexture,
       nTexture,
       found,
+      mat,
       _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -2579,9 +2671,9 @@ var customMat = /*#__PURE__*/function () {
             }
           });
         case 11:
-          mat = _context.sent;
+          _mat = _context.sent;
           _context.next = 14;
-          return mat.json();
+          return _mat.json();
         case 14:
           res = _context.sent;
           parsedMat = PBRMetallicRoughnessMaterial.Parse(res, _customMat.scene, '');
@@ -2602,12 +2694,14 @@ var customMat = /*#__PURE__*/function () {
             path: _customMat.blob,
             sizeMb: 0
           });
+          parsedMat.depthFunction = Constants.ALWAYS;
+          parsedMat.disableColorWrite = true;
           return _context.abrupt("return", {
             mat: parsedMat,
             found: true
           });
-        case 29:
-          _context.prev = 29;
+        case 31:
+          _context.prev = 31;
           _context.t0 = _context["catch"](8);
           if (setDataRow) useUtilStoreContext().setAnalyzeDataRow({
             type: 'MAT',
@@ -2617,16 +2711,19 @@ var customMat = /*#__PURE__*/function () {
             path: _customMat.blob,
             sizeMb: 0
           });
-        case 32:
+        case 34:
+          mat = new PBRMetallicRoughnessMaterial(_customMat.name, _customMat.scene);
+          mat.depthFunction = Constants.ALWAYS;
+          mat.disableColorWrite = true;
           return _context.abrupt("return", {
-            mat: new PBRMetallicRoughnessMaterial(_customMat.name, _customMat.scene),
+            mat: mat,
             found: true
           });
-        case 33:
+        case 38:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[8, 29]]);
+    }, _callee, null, [[8, 31]]);
   }));
   return function customMat(_x) {
     return _ref.apply(this, arguments);
@@ -2708,7 +2805,7 @@ function _findAssets() {
             }));
             return _importGeo.apply(this, arguments);
           };
-          importGeo = function _importGeo2(_x13, _x14) {
+          importGeo = function _importGeo2(_x12, _x13) {
             return _importGeo.apply(this, arguments);
           };
           _unifyAndSetStdMats = function _unifyAndSetStdMats3() {
@@ -2734,7 +2831,7 @@ function _findAssets() {
                   case 8:
                     name = 'std_' + name;
                     _context.next = 11;
-                    return createOrGetMaterial(name, path, splittedName[0], true, sceneStore.scene, undefined, true, true);
+                    return createOrGetMaterial(name, path, splittedName[0], true, true, undefined, true);
                   case 11:
                     mat = _context.sent;
                     if (!mat.found) utilStore.setAnalyzeDataRow({
@@ -2796,7 +2893,7 @@ function _findAssets() {
             }));
             return _unifyAndSetStdMats.apply(this, arguments);
           };
-          unifyAndSetStdMats = function _unifyAndSetStdMats2(_x11, _x12) {
+          unifyAndSetStdMats = function _unifyAndSetStdMats2(_x10, _x11) {
             return _unifyAndSetStdMats.apply(this, arguments);
           };
           sceneStore = useSceneStoreContext();
@@ -2912,7 +3009,7 @@ function _findAssets() {
                   return _context4.abrupt("return", 1);
                 case 5:
                   _context4.next = 7;
-                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, sceneStore.scene, {
+                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, false, {
                     tileU: mat.tileU,
                     tileV: mat.tileV
                   }, true);
@@ -2921,7 +3018,8 @@ function _findAssets() {
                   _context4.t1 = [];
                   _context4.t2 = mat.name;
                   nwCache.material = {
-                    material: _context4.t0,
+                    mat: _context4.t0,
+                    isStdMat: false,
                     onElements: _context4.t1,
                     name: _context4.t2
                   };
@@ -2931,7 +3029,7 @@ function _findAssets() {
                   _context4.t3 = newCache;
                   _context4.t4 = mat.id;
                   _context4.next = 17;
-                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, sceneStore.scene, {
+                  return createOrGetMaterial(mat.id + '_' + mat.name, mat.blob, mat.name, true, false, {
                     tileU: mat.tileU,
                     tileV: mat.tileV
                   }, true);
@@ -2940,9 +3038,10 @@ function _findAssets() {
                   _context4.t6 = [];
                   _context4.t7 = mat.name;
                   _context4.t8 = {
-                    material: _context4.t5,
+                    mat: _context4.t5,
                     onElements: _context4.t6,
-                    name: _context4.t7
+                    name: _context4.t7,
+                    isStdMat: false
                   };
                   _context4.t9 = {
                     id: _context4.t4,
@@ -2995,72 +3094,79 @@ function _findAssets() {
   }));
   return _findAssets.apply(this, arguments);
 }
-function createOrGetMaterial(_x3, _x4, _x5, _x6, _x7, _x8, _x9, _x10) {
+function createOrGetMaterial(_x3, _x4, _x5, _x6, _x7, _x8, _x9) {
   return _createOrGetMaterial.apply(this, arguments);
 }
 function _createOrGetMaterial() {
-  _createOrGetMaterial = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(name, blob, fileName, checkExisting, scene, tiling, setDataRow, isStdMat) {
-    var _iterator5, _step5, _mat, mat, material;
+  _createOrGetMaterial = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(name, blob, fileName, checkExisting, isStdMat, tiling, setDataRow) {
+    var sceneStore, _iterator5, _step5, cachedMaterial, mat, material;
     return _regeneratorRuntime.wrap(function _callee4$(_context6) {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
+          sceneStore = useSceneStoreContext();
           if (!checkExisting) {
-            _context6.next = 18;
+            _context6.next = 20;
             break;
           }
-          _iterator5 = _createForOfIteratorHelper$3(scene.materials);
-          _context6.prev = 2;
+          _iterator5 = _createForOfIteratorHelper$3(sceneStore.materialCache);
+          _context6.prev = 3;
           _iterator5.s();
-        case 4:
+        case 5:
           if ((_step5 = _iterator5.n()).done) {
-            _context6.next = 10;
+            _context6.next = 12;
             break;
           }
-          _mat = _step5.value;
-          if (!(name === _mat.name)) {
-            _context6.next = 8;
+          cachedMaterial = _step5.value;
+          if (!(name === cachedMaterial.mat.name)) {
+            _context6.next = 10;
             break;
           }
+          cachedMaterial.lastUsage = sceneStore.modelIteration;
           return _context6.abrupt("return", {
-            mat: _mat,
+            mat: cachedMaterial.mat,
             found: true
           });
-        case 8:
-          _context6.next = 4;
-          break;
         case 10:
-          _context6.next = 15;
+          _context6.next = 5;
           break;
         case 12:
-          _context6.prev = 12;
-          _context6.t0 = _context6["catch"](2);
+          _context6.next = 17;
+          break;
+        case 14:
+          _context6.prev = 14;
+          _context6.t0 = _context6["catch"](3);
           _iterator5.e(_context6.t0);
-        case 15:
-          _context6.prev = 15;
+        case 17:
+          _context6.prev = 17;
           _iterator5.f();
-          return _context6.finish(15);
-        case 18:
+          return _context6.finish(17);
+        case 20:
           mat = {
             isStdMat: !!isStdMat,
             blob: blob,
             name: name,
             fileName: fileName,
-            scene: scene,
+            scene: sceneStore.scene,
             tiling: tiling
           };
-          _context6.next = 21;
+          _context6.next = 23;
           return customMat(mat, setDataRow);
-        case 21:
+        case 23:
           material = _context6.sent;
+          sceneStore.addMaterialToCache({
+            mat: material.mat,
+            isStdMat: isStdMat,
+            lastUsage: sceneStore.modelIteration
+          });
           return _context6.abrupt("return", {
             mat: material.mat,
             found: material.found
           });
-        case 23:
+        case 26:
         case "end":
           return _context6.stop();
       }
-    }, _callee4, null, [[2, 12, 15, 18]]);
+    }, _callee4, null, [[3, 14, 17, 20]]);
   }));
   return _createOrGetMaterial.apply(this, arguments);
 }
@@ -3260,7 +3366,7 @@ function findMaterials(cache) {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var onNode = _step3.value;
             if (child.name.startsWith(onNode) || child.name.startsWith('geo_') && child.name.includes(onNode)) {
-              setMaterials(child, mat.material);
+              setMaterials(child, mat.mat);
             }
           }
         } catch (err) {
@@ -3332,7 +3438,7 @@ function shadow() {
     var lightf = new DirectionalLight('dirf', new Vector3(0, -0.436, -0.9), scene);
     var lightr = new DirectionalLight('dirr', new Vector3(0, -1, 0.3), scene);
     var lightl = new DirectionalLight('dirb', new Vector3(0.2, -1, 0.2), scene);
-    lightl.intensity = 1;
+    lightl.intensity = 2;
     lightf.intensity = 2.2;
     light.intensity = 1;
     lightr.intensity = 1;
@@ -3352,6 +3458,8 @@ function shadow() {
       z: 0
     });
     var std_mat = new PBRMetallicRoughnessMaterial('std_mat', scene);
+    std_mat.depthFunction = Constants.ALWAYS;
+    std_mat.disableColorWrite = true;
     std_mat.metallic = 0;
     scene.defaultMaterial = std_mat;
     var mat = new PBRMetallicRoughnessMaterial('white', scene);
@@ -3375,17 +3483,17 @@ var parser = /*#__PURE__*/function () {
         case 0:
           sceneStore = useSceneStoreContext();
           hasRendered = sceneStore.hasRendered, hqRenderScript = sceneStore.hqRenderScript, scene = sceneStore.scene, cache = sceneStore.cache, changedElements = sceneStore.changedElements;
-          utilStore = useUtilStoreContext();
-          useUIStoreContext(); //disable elementrows from old cache
+          utilStore = useUtilStoreContext(); //disable elementrows from old cache
           changedElements === null || changedElements === void 0 || (_changedElements$upda = changedElements.updatedElements) === null || _changedElements$upda === void 0 || _changedElements$upda.forEach(function (el) {
             return utilStore.disableElementRows(el.name, cache);
           });
-          _context.next = 7;
+          _context.next = 6;
           return findAssets(hqRenderScript.assets, cache);
-        case 7:
+        case 6:
           _yield$findAssets = _context.sent;
           cacheGroup = _yield$findAssets.cacheGroup;
           newCache = _yield$findAssets.newCache;
+          sceneStore.updateModelIteration();
           if (changedElements && changedElements.deletedElements && changedElements.deletedElements.length > 0) {
             changedElements.deletedElements.forEach(function (deletedElement) {
               var _scene$getTransformNo;
@@ -3419,7 +3527,8 @@ var parser = /*#__PURE__*/function () {
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
-        case 14:
+          sceneStore.checkMaterialCache();
+        case 15:
         case "end":
           return _context.stop();
       }
@@ -3450,7 +3559,7 @@ function useRealTimeRenderData (_ref) {
     renderInBackground = _ref.renderInBackground;
   var gameCanvas = useRef(null);
   var sceneStore = useSceneStoreContext();
-  var utilStore = useUtilStoreContext();
+  useUtilStoreContext();
   var gridStore = useGridStoreContext();
   var uiStore = useUIStoreContext();
   DracoCompression.Configuration = {
@@ -3514,15 +3623,17 @@ function useRealTimeRenderData (_ref) {
               eventId: 'BUILD_SCENE'
             });
             _context2.prev = 15;
-            _context2.next = 18;
+            uiStore.deactivateHighlightLayer();
+            uiStore.highlightLayer.isEnabled = false;
+            _context2.next = 20;
             return parser();
-          case 18:
+          case 20:
             uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
             if (freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids(freePlacesOnGrids, plannedPlacesOnGrids);
-            _context2.next = 27;
+            _context2.next = 29;
             break;
-          case 22:
-            _context2.prev = 22;
+          case 24:
+            _context2.prev = 24;
             _context2.t0 = _context2["catch"](15);
             LOG.errorTransaction('BUILD_SCENE', 'RTS_0001', _context2.t0.message);
             LOG.error(new DivaError('Error building scene', {
@@ -3530,11 +3641,11 @@ function useRealTimeRenderData (_ref) {
               code: 'RTS_0001'
             }));
             sceneStore.isInitializing = false;
-          case 27:
+          case 29:
             if (callbacks.setGlb) {
               sceneStore.exportScene().then(function (res) {
                 var _callbacks$setGlb;
-                if (res) (_callbacks$setGlb = callbacks.setGlb) === null || _callbacks$setGlb === void 0 || _callbacks$setGlb.call(callbacks, URL.createObjectURL(res.glTFFiles['fileName.glb']));
+                if (res) (_callbacks$setGlb = callbacks.setGlb) === null || _callbacks$setGlb === void 0 || _callbacks$setGlb.call(callbacks, URL.createObjectURL(res.glTFFiles['fileName.glb']), res.glTFFiles['fileName.glb']);
               });
             } else {
               LOG.debug('callbacks.setGlb is undefined');
@@ -3545,11 +3656,11 @@ function useRealTimeRenderData (_ref) {
             }
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
-          case 31:
+          case 33:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[15, 22]]);
+      }, _callee2, null, [[15, 24]]);
     }));
     return _onSceneReady.apply(this, arguments);
   }
@@ -3560,10 +3671,15 @@ function useRealTimeRenderData (_ref) {
     if (!overlayImage) actions.toggleLoading('buildScene', false, false);
     (_callbacks$onInitiali2 = callbacks.onInitialized) === null || _callbacks$onInitiali2 === void 0 || _callbacks$onInitiali2.call(callbacks);
     (_sceneStore = sceneStore) === null || _sceneStore === void 0 || _sceneStore.optimizeScene();
+    setTimeout(function () {
+      return uiStore.highlightLayer.isEnabled = true;
+    }, 500);
+    uiStore.activateHightlightLayer();
   }
   function renderLoop() {
     var _sceneStore$controlRe, _sceneStore2;
     if (!gameCanvas.current) sceneStore.scene.getEngine().dispose();
+    if (sceneStore.cameraTargetPosition.x == 0 && sceneStore.cameraTargetPosition.y == 0 && sceneStore.cameraTargetPosition.z == 0) sceneStore.setCameraTarget();
     (_sceneStore$controlRe = (_sceneStore2 = sceneStore).controlRenderLoop) === null || _sceneStore$controlRe === void 0 || _sceneStore$controlRe.call(_sceneStore2);
     sceneStore.scene.render();
   }
@@ -3590,7 +3706,7 @@ function useRealTimeRenderData (_ref) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if (!gameCanvas.current) {
-                _context.next = 20;
+                _context.next = 21;
                 break;
               }
               engine = new Engine(gameCanvas.current, true, {
@@ -3601,26 +3717,27 @@ function useRealTimeRenderData (_ref) {
               engine.renderEvenInBackground = renderInBackground;
               engine.disablePerformanceMonitorInBackground = true;
               bScene = new Scene(engine, undefined);
+              bScene.clearColor = new Color4$1(255, 255, 255, 255);
               context = registerContext(bScene, renderjob, apiConfig, jwt, viewHandler, callbacks.onMissingGeo, callbacks.requestNewOverlayImage, overlayImage, uiConfig, callbacks.updateCameraInformation);
               sceneStore = context.sceneStore;
-              utilStore = context.utilStore;
+              context.utilStore;
               gridStore = context.gridStore;
               uiStore = context.uiStore;
               scene = bScene;
               if (!bScene.isReady()) {
-                _context.next = 16;
+                _context.next = 17;
                 break;
               }
-              _context.next = 14;
+              _context.next = 15;
               return onSceneReady();
-            case 14:
-              _context.next = 17;
+            case 15:
+              _context.next = 18;
               break;
-            case 16:
+            case 17:
               bScene.executeWhenReady(function () {
                 return onSceneReady();
               });
-            case 17:
+            case 18:
               resize = function resize() {
                 if (inBackground || !scene || !scene.getEngine()) return;
                 if (sceneStore.hasPlanned) sceneStore.doRenderControlLoop = true;
@@ -3640,9 +3757,9 @@ function useRealTimeRenderData (_ref) {
                   window.removeEventListener('resize', resize);
                 }
               });
-            case 20:
-              return _context.abrupt("return");
             case 21:
+              return _context.abrupt("return");
+            case 22:
             case "end":
               return _context.stop();
           }
@@ -3654,14 +3771,11 @@ function useRealTimeRenderData (_ref) {
     asyncUseEffect();
   }, []);
   useEffect(function () {
-    if (overlayImage && uiStore) uiStore.updateOverlayImage(overlayImage);
-    // update cam pos for start viewpoints (hqr) could be the same, since it doesn't change when rotating
-  }, [overlayImage]);
-  useEffect(function () {
-    if (utilStore && viewpoint) {
-      updateCam(viewpoint, sceneStore.scene);
+    if (overlayImage && uiStore) {
+      uiStore.updateOverlayImage(overlayImage);
+      if (viewpoint) updateCam(viewpoint, sceneStore.scene);
     }
-  }, [viewpoint]);
+  }, [overlayImage]);
   useEffect(function () {
     if (sceneStore && elementsInfo) {
       var activeElement = elementsInfo.find(function (e) {
@@ -3735,7 +3849,8 @@ var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
         height: '100%',
         width: '100%',
         margin: 'auto',
-        display: 'block'
+        display: 'block',
+        backgroundColor: 'white'
       },
       className: canvas
     })