@crystaldesign/real-time-viewer 25.4.0-beta.52 → 25.4.0-beta.53

package/build/esm/index.js

@@ -1,7 +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 { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
@@ -12,7 +12,6 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { ActionManager } from '@babylonjs/core/Actions/actionManager';
 import { ExecuteCodeAction } from '@babylonjs/core/Actions/directActions';
-import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
 import '@babylonjs/core/Rendering/edgesRenderer';
 import { GLTF2Export } from '@babylonjs/serializers';
@@ -29,12 +28,18 @@ import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { AdvancedDynamicTexture } from '@babylonjs/gui/2D/advancedDynamicTexture';
 import { Button } from '@babylonjs/gui/2D/controls/button';
 import { Ellipse } from '@babylonjs/gui/2D/controls/ellipse';
+import '@babylonjs/core/Engines/WebGPU/Extensions/engine.dynamicTexture';
+import '@babylonjs/core/Engines/WebGPU/Extensions/engine.multiRender';
+import '@babylonjs/core/Engines/WebGPU/Extensions/engine.renderTarget';
+import '@babylonjs/core/Engines/WebGPU/Extensions/engine.renderTargetTexture';
 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 { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { Constants } from '@babylonjs/core/Engines/constants';
+import { HighlightLayer } from '@babylonjs/core/Layers';
 import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/math';
 import { EngineFactory } from '@babylonjs/core/Engines/engineFactory';
 import { Scene } from '@babylonjs/core/scene';
@@ -66,7 +71,6 @@ function GetCameraControls(camera) {
   var isZooming = false;
   var initDistance = 0;
   function renderLoop() {
-    var _sceneStore$updateCam;
     if (!sceneStore.doRenderControlLoop || sceneStore.isInitializing || uistore.isStaticBg) return;
     uistore.onMove();
     var stopRender = true;
@@ -104,8 +108,7 @@ function GetCameraControls(camera) {
       },
       vertFov: camera.fov * 180 / Math.PI
     };
-    (_sceneStore$updateCam = sceneStore.updateCameraInformation) === null || _sceneStore$updateCam === void 0 || _sceneStore$updateCam.call(sceneStore, cam);
-    uistore.requestNewOverlayImage(cam, sceneStore.focusedElement, sceneStore.targetCameraPosition);
+    uistore.requestNewOverlayImage(cam, sceneStore.focusedElement, sceneStore.targetCameraPosition, sceneStore.updateCameraInformation);
     if (stopRender) {
       sceneStore.doRenderControlLoop = false;
     }
@@ -902,7 +905,8 @@ function createCams(scene, viewpoint) {
     if (existingCam) return existingCam;
     var camera = new UniversalCamera(name, pos, scene);
     camera.rotation = degreesToRadians(rot);
-    camera.minZ = 0.01;
+    camera.minZ = 0.1;
+    camera.maxZ = 30;
     camera.fov = 0.418879;
     if (isEnabled) scene.activeCamera = camera;
     if (parent) camera.parent = parent;
@@ -944,7 +948,6 @@ 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) {
@@ -954,33 +957,35 @@ function updateCam(camera, scene) {
     return;
   }
   if (camera.pos.x == cam.position.x && camera.pos.y == cam.position.y && camera.pos.z == camera.pos.z) return;
-  var newPos = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
-  cam.position = newPos;
-  cam.rotation = utilStore.degreesToRadians(utilStore.vector3ToBVector3(_objectSpread(_objectSpread({}, camera.rot), {}, {
+  var position = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
+  var rotation = utilStore.degreesToRadians(utilStore.vector3ToBVector3(_objectSpread(_objectSpread({}, camera.rot), {}, {
     x: -camera.rot.x
   })));
-  cam.target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01));
-  sceneStore.targetCameraPosition = newPos;
-  sceneStore.cameraTargetPosition = cam.target;
+  var target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01));
+  cam.position = position;
+  cam.rotation = rotation;
+  cam.setTarget(target);
+  sceneStore.targetCameraPosition = position;
+  sceneStore.cameraTargetPosition = target;
   (_sceneStore$updateCam = sceneStore.updateCameraInformation) === null || _sceneStore$updateCam === void 0 || _sceneStore$updateCam.call(sceneStore, {
     horiFov: cam.fov * 180 / Math.PI,
     lensShiftX: 0,
     lensShiftY: 0,
     name: cam.name,
     pos: {
-      x: cam.position.x,
-      y: cam.position.y,
-      z: cam.position.z
+      x: position.x,
+      y: position.y,
+      z: position.z
     },
     rot: {
-      x: cam.rotation.x * 180 / Math.PI,
-      y: cam.rotation.y * 180 / Math.PI,
-      z: cam.rotation.z * 180 / Math.PI
+      x: rotation.x * 180 / Math.PI,
+      y: rotation.y * 180 / Math.PI,
+      z: rotation.z * 180 / Math.PI
     },
     targetPos: {
-      x: cam.target.x,
-      y: cam.target.y,
-      z: cam.target.z
+      x: target.x,
+      y: target.y,
+      z: target.z
     },
     vertFov: cam.fov * 180 / Math.PI
   });
@@ -1022,7 +1027,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_doRenderControlLoop", false);
     _defineProperty(this, "_cameraTargetPosition", Vector3.Zero());
     _defineProperty(this, "_targetCameraPosition", Vector3.Zero());
-    _defineProperty(this, "_selectedElement", void 0);
+    _defineProperty(this, "_selectedElements", void 0);
     _defineProperty(this, "_focusedElement", void 0);
     _defineProperty(this, "_isControlledViewpoint", true);
     // if the current viewpoint should automatically change with the planning
@@ -1114,12 +1119,12 @@ var SceneStore = /*#__PURE__*/function () {
       this._doRenderControlLoop = doRenderControlLoop;
     }
   }, {
-    key: "selectedElement",
+    key: "selectedElements",
     get: function get() {
-      return this._selectedElement;
+      return this._selectedElements;
     },
     set: function set(element) {
-      this._selectedElement = element;
+      this._selectedElements = element;
     }
   }, {
     key: "focusedElement",
@@ -1647,6 +1652,7 @@ var SceneStore = /*#__PURE__*/function () {
       if (newPosition.x == 0 && newPosition.y == 0 && newPosition.z == 0) return;
       this.cameraTargetPosition = center;
       this.targetCameraPosition = newPosition;
+      this.runRenderLoopIndefinitely(); // runs till the updated unity images
       this.doRenderControlLoop = true;
       this._isControlledViewpoint = true;
       this._focusedElement = {
@@ -1737,7 +1743,8 @@ function SelHandler (_ref) {
   var onElementSelected = function onElementSelected(elem, hit, doubleClick) {
     var _sceneStore$focusedEl, _sceneStore$focusedEl2;
     var elemName = elem.name.slice(-1);
-    if (doubleClick && sceneStore.selectedElement == elemName && hit.pickedMesh) {
+    var curElemName = (_sceneStore$focusedEl = sceneStore.focusedElement) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl = _sceneStore$focusedEl.name) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl2 = _sceneStore$focusedEl.slice) === null || _sceneStore$focusedEl2 === void 0 ? void 0 : _sceneStore$focusedEl2.call(_sceneStore$focusedEl, -1);
+    if (doubleClick && curElemName == elemName && hit.pickedMesh) {
       var _getParent = function getParent(mesh) {
         var _mesh$parent;
         if (((_mesh$parent = mesh.parent) === null || _mesh$parent === void 0 ? void 0 : _mesh$parent.getClassName()) == 'TransformNode') return mesh.parent;
@@ -1745,16 +1752,10 @@ function SelHandler (_ref) {
       };
       sceneStore.focusElement(_getParent(hit.pickedMesh));
       return;
-    } else if (((_sceneStore$focusedEl = sceneStore.focusedElement) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl = _sceneStore$focusedEl.name) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl2 = _sceneStore$focusedEl.slice) === null || _sceneStore$focusedEl2 === void 0 ? void 0 : _sceneStore$focusedEl2.call(_sceneStore$focusedEl, -1)) != elemName && (doubleClick || sceneStore.selectedElement == elemName)) {
+    } else if (curElemName != elemName && (doubleClick || curElemName == elemName)) {
       sceneStore.focusElement(elem);
     }
-
-    // is already selected
-    if (sceneStore.selectedElement == elemName) return;
-    sceneStore.selectedElement = elemName;
-    uiStore.selectElem(elemName);
-    onElSelected === null || onElSelected === void 0 || onElSelected(elem.parent.name, Number(elemName));
-    sceneStore.runRenderLoopForTime(1000);
+    uiStore.selectElem(elemName, elem, onElSelected);
   };
   return {
     onSelection: onSelection
@@ -1772,8 +1773,9 @@ 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, runRenderLoopForTime) {
-    var _this = this;
+  function UIStore(scene, enableSSAO, _utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy, runRenderLoopForTime, tabgroupTypeActive, isMobile) {
+    var _this = this,
+      _overlayImage$base;
     _classCallCheck(this, UIStore);
     _defineProperty(this, "_utilStore", void 0);
     _defineProperty(this, "_uiConfig", void 0);
@@ -1801,37 +1803,46 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "_isUnityComb", false);
     _defineProperty(this, "_selectedHl", void 0);
     _defineProperty(this, "_runRenderLoopForTime", void 0);
+    _defineProperty(this, "_tabgroupTypeActive", void 0);
+    _defineProperty(this, "_isMobile", void 0);
     _defineProperty(this, "updateOverlayImage", function (overlayImage) {
       var _this$_diffuseTexture, _this$_runRenderLoopF;
       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 || !utilStore.updateCam) return;
       _this._isStaticBg = overlayImage.isStaticBg;
-
-      // no highlightlayer on static room bg
-      if (_this._isStaticBg) {
+      if (_this._isStaticBg)
+        // no highlightlayer on static room bg
         _this.deactivateHighlightLayer();
-      }
       _this._enableSSAO(false);
-      _this._diffuseTexture.updateURL(overlayImage.base64);
-      _this.fadeInOverlayImage(_this._plane.visibility == 1);
+      _this._plane.setEnabled(false);
+      _this._diffuseTexture.updateURL(overlayImage.base64, undefined, function () {
+        return _this.fadeInOverlayImage(_this._plane.visibility == 1);
+      });
       (_this$_runRenderLoopF = _this._runRenderLoopForTime) === null || _this$_runRenderLoopF === void 0 || _this$_runRenderLoopF.call(_this, 2000);
     });
     this._scene = scene;
-    var engine = this._scene.getEngine();
+    this._tabgroupTypeActive = tabgroupTypeActive;
+    this._isMobile = !!isMobile;
     var mat = new StandardMaterial('planeMat', scene);
-    this._diffuseTexture = new Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/ep3wWkAAAAASUVORK5CYII=', scene);
+    this._diffuseTexture = new Texture((_overlayImage$base = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.base64) !== null && _overlayImage$base !== void 0 ? _overlayImage$base : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/ep3wWkAAAAASUVORK5CYII=', scene, false, true);
+    this._diffuseTexture.anisotropicFilteringLevel = 16;
+    this._diffuseTexture.updateSamplingMode(Texture.TRILINEAR_SAMPLINGMODE);
+    mat.bumpTexture = null;
     mat.diffuseTexture = this._diffuseTexture;
     mat.emissiveTexture = this._diffuseTexture;
     mat.specularColor = Color3.Black();
+
+    // Get aspect ratio of the current screen
     this._plane = MeshBuilder.CreatePlane('overlayplane', {
-      size: 0.0047
+      size: 1
     }, scene);
     this._plane.setEnabled(false);
     this._plane.material = mat;
     this._plane.visibility = 0;
-    this._plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
-    this._plane.position.z = 0.011;
+
+    // Position it in front of the camera
+    this._plane.position.z = 0.11;
     this._plane.isPickable = false;
     this._plane.parent = scene.activeCamera;
     this._selectedHl = new HighlightLayer('hl', this._scene);
@@ -1858,8 +1869,11 @@ var UIStore = /*#__PURE__*/function () {
     }
     this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
     if (_overlayImage) {
+      if (_overlayImage.base64) {
+        this._plane.setEnabled(true);
+        this.fadeInOverlayImage(false);
+      }
       this._isUnityComb = true;
-      this._plane.setEnabled(false);
       this._enableSSAO(false);
     }
     this._runRenderLoopForTime = runRenderLoopForTime;
@@ -1903,7 +1917,7 @@ var UIStore = /*#__PURE__*/function () {
       if (root) root.getChildMeshes().forEach(function (m) {
         m.visibility = 1;
         if (!m.material) return;
-        m.material.depthFunction = Constants.LESS;
+        m.material.depthFunction = Constants.LEQUAL;
         m.material.disableColorWrite = false;
       });
     }
@@ -1912,6 +1926,8 @@ var UIStore = /*#__PURE__*/function () {
     value: function fadeInOverlayImage(shorter) {
       var _this3 = this;
       var startTime = performance.now();
+      this._plane.setEnabled(true);
+      this._selectedHl.addExcludedMesh(this._plane);
       var _animate = function animate() {
         var elapsedTime = performance.now() - startTime;
         var progress = Math.min(elapsedTime / (shorter ? 50 : 500), 1); // Normalize progress (0 to 1)
@@ -1923,12 +1939,14 @@ var UIStore = /*#__PURE__*/function () {
           //animation finished
           var root = _this3._scene.getTransformNodeByName('Root');
           if (root) root.getChildMeshes().forEach(function (m) {
-            m.visibility = 1;
+            m.visibility = 0;
             if (!m.material) return;
             m.material.depthFunction = Constants.ALWAYS;
             m.material.disableColorWrite = true;
           });
-          _this3._plane.setEnabled(true);
+          _this3._selectedMeshes.forEach(function (m) {
+            return m.visibility = 1;
+          });
         }
       };
       _animate();
@@ -1949,14 +1967,16 @@ var UIStore = /*#__PURE__*/function () {
       this._utilStore.moveObjectInDirection(guiElem, Vector3.Up(), -localPos.y + 0.05);
       if (!onClickDel) return;
       var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
-      dtarget.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
-      dtarget.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
+      var size = this._uiConfig.templateConfig == 'standard' ? this._isMobile ? '28px' : '40px' : '35px';
+      dtarget.width = size;
+      dtarget.height = size;
       dtarget.thickness = 1;
       dtarget.background = this._colors.defaultBg;
       var dbt = Button.CreateImageOnlyButton('buttond', this._uiConfig.templateConfig == 'standard' ? delButton : gdelButton);
       dbt.color = 'transparent';
-      dbt.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '60%';
-      dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
+      var nSize = this._isMobile ? '28px' : '40px';
+      dbt.width = this._uiConfig.templateConfig == 'standard' ? nSize : '60%';
+      dbt.height = this._uiConfig.templateConfig == 'standard' ? nSize : '70%';
       dbt.onPointerClickObservable.add(onClickDel);
       dtarget.onPointerEnterObservable = new Observable(function () {
         return dtarget.background = _this4._colors.hoverBg;
@@ -1983,23 +2003,68 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize(scene) {
+      if (!scene.activeCamera) return;
+      // if rendering is cached it gets updated before resize is triggered, so check if the image is already correct
+      var size = this._diffuseTexture.getSize();
+      var engine = this._scene.getEngine();
+      if (Math.round(size.width / size.height * 100) / 100 != Math.round(engine.getRenderWidth() / engine.getRenderHeight() * 100) / 100) {
+        this.fadeOutOverlayImage();
+      }
       this._gui.dispose();
       this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI', true, scene);
       this._gui.renderScale = 1;
       if (this._latestViewpoint) this._latestViewpoint.isOutdated = true;
-      var engine = scene.getEngine();
-      this._plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
+      var aspectRatio = engine.getRenderWidth() / engine.getRenderHeight();
+      var fov = scene.activeCamera.fov;
+      var planeDepth = 0.11;
+      // Calculate scaling factor based on frustum dimensions at the given depth
+      var heightAtDepth = 2 * Math.tan(fov / 2) * planeDepth;
+      var widthAtDepth = heightAtDepth * aspectRatio;
+      this._plane.scaling = new Vector3(widthAtDepth, heightAtDepth, 1);
     }
   }, {
     key: "addElementsInfo",
     value: function addElementsInfo(elementsInfo) {
       this._elementsInfo = elementsInfo;
     }
+  }, {
+    key: "pointerOverElement",
+    value: function pointerOverElement(element) {
+      var _this$_runRenderLoopF2,
+        _this5 = this;
+      this.unityCombActive && ((_this$_runRenderLoopF2 = this._runRenderLoopForTime) === null || _this$_runRenderLoopF2 === void 0 ? void 0 : _this$_runRenderLoopF2.call(this, 1000));
+      this._selectedHl.removeAllMeshes();
+      this._selectedHl.addExcludedMesh(this._plane);
+      if (this._plane.visibility == 1) this._selectedMeshes.forEach(function (_m) {
+        return _m.visibility = 0;
+      });
+      element.getChildMeshes().forEach(function (_m) {
+        _m.visibility = 1;
+        _this5._selectedHl.addMesh(_m, Color3.Black());
+      });
+    }
+  }, {
+    key: "pointerOutElement",
+    value: function pointerOutElement(element) {
+      var _this$_runRenderLoopF3,
+        _this6 = this;
+      this.unityCombActive && ((_this$_runRenderLoopF3 = this._runRenderLoopForTime) === null || _this$_runRenderLoopF3 === void 0 ? void 0 : _this$_runRenderLoopF3.call(this, 1000));
+      this._selectedHl.removeAllMeshes();
+      this._selectedHl.addExcludedMesh(this._plane);
+      if (this._plane.visibility == 1) element.getChildMeshes().forEach(function (_m) {
+        return _m.visibility = 0;
+      });
+      this._selectedMeshes.forEach(function (_m) {
+        _m.visibility = 1;
+        _this6._selectedHl.addMesh(_m, Color3.Black());
+      });
+    }
   }, {
     key: "createPosNr",
     value: function createPosNr(elementInfo, element, isBoxPlanner, elementLength) {
-      var _this5 = this,
-        _this$_elementsInfo;
+      var _this$_elementsInfo,
+        _this7 = this,
+        _this$_tabgroupTypeAc;
       var guiElem = {
         elementId: elementInfo.elementId,
         elements: []
@@ -2007,9 +2072,9 @@ var UIStore = /*#__PURE__*/function () {
       var bbox = element.getHierarchyBoundingVectors();
       var guiElemLeftBack = null;
       var guiElemRightBack = null;
-      if (!isBoxPlanner) {
+      if (!isBoxPlanner && elementInfo.selectable) {
         guiElemLeftBack = new TransformNode('guiElem_' + elementInfo.elementId, this._scene);
-        guiElemLeftBack.position = element.absolutePosition.add(new Vector3(0, bbox.max.y, 0));
+        guiElemLeftBack.position = new Vector3(element.absolutePosition.x, bbox.min.y + (bbox.max.y - bbox.min.y), element.absolutePosition.z);
         guiElem.elements.push(guiElemLeftBack);
         guiElemRightBack = undefined;
         if (this._uiConfig.posTrashIcon == 'TOP_RIGHT_BACK' || isBoxPlanner) {
@@ -2020,8 +2085,9 @@ var UIStore = /*#__PURE__*/function () {
         var target = this._uiConfig.templateConfig == 'standard' ? new Ellipse('posnrEllipse') : new Rectangle('posnrRectangle');
         if (this._uiConfig.templateConfig == 'gold') target.cornerRadius = 3;
         guiElem.elements.push(target);
-        target.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '20px';
-        target.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '20px';
+        var size = this._uiConfig.templateConfig == 'standard' ? this._isMobile ? '28px' : '40px' : '20px';
+        target.width = size;
+        target.height = size;
         target.fontSize = this._uiConfig.templateConfig == 'standard' ? 50 : 20;
         target.background = this._colors.defaultBg;
         target.thickness = 0;
@@ -2044,77 +2110,63 @@ var UIStore = /*#__PURE__*/function () {
         guiElemRightBack.position = _pos;
       }
       var childMeshes = element.getChildMeshes();
+      this._selectedHl.addExcludedMesh(this._plane);
+      var cantSelect = (_this$_elementsInfo = this._elementsInfo) === null || _this$_elementsInfo === void 0 ? void 0 : _this$_elementsInfo.every(function (ei) {
+        return ei.active;
+      });
       childMeshes.forEach(function (m) {
-        if (_this5._plane.visibility == 1) {
+        if (!m.material) return;
+        if (_this7._plane.visibility == 1) {
+          m.visibility = 0;
           m.material.depthFunction = Constants.ALWAYS;
           m.material.disableColorWrite = true;
         } else {
           m.visibility = 1;
-          m.material.depthFunction = Constants.LESS;
+          m.material.depthFunction = Constants.LEQUAL;
           m.material.disableColorWrite = false;
         }
-      });
-      var everyElementIsSelected = (_this$_elementsInfo = this._elementsInfo) === null || _this$_elementsInfo === void 0 ? void 0 : _this$_elementsInfo.every(function (ei) {
-        return ei.active;
-      });
-      if (!elementInfo.active && !everyElementIsSelected) {
-        childMeshes.forEach(function (m) {
-          if (_this5._plane.visibility == 1) m.visibility = 0;
-          if (!m.actionManager) m.actionManager = new ActionManager(_this5._scene);
-          m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function (ev) {
-            var _this5$_runRenderLoop;
-            if (everyElementIsSelected) return;
-            (_this5$_runRenderLoop = _this5._runRenderLoopForTime) === null || _this5$_runRenderLoop === void 0 || _this5$_runRenderLoop.call(_this5, 1000);
-            _this5._selectedHl.removeAllMeshes();
-            if (_this5._plane.visibility == 1) _this5._selectedMeshes.forEach(function (_m) {
-              return _m.visibility = 0;
-            });
-            element.getChildMeshes().forEach(function (_m) {
-              _m.visibility = 1;
-              _this5._selectedHl.addMesh(_m, Color3.Black());
-            });
+        if (elementInfo.active) m.visibility = 1;
+        if (!cantSelect && !elementInfo.active && elementInfo.selectable) {
+          if (!m.actionManager) m.actionManager = new ActionManager(_this7._scene);
+          m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function () {
+            return _this7.pointerOverElement(element);
           }));
-          m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function (ev) {
-            var _this5$_runRenderLoop2;
-            if (everyElementIsSelected) return;
-            (_this5$_runRenderLoop2 = _this5._runRenderLoopForTime) === null || _this5$_runRenderLoop2 === void 0 || _this5$_runRenderLoop2.call(_this5, 1000);
-            _this5._selectedHl.removeAllMeshes();
-            if (_this5._plane.visibility == 1) element.getChildMeshes().forEach(function (_m) {
-              return _m.visibility = 0;
-            });
-            _this5._selectedMeshes.forEach(function (_m) {
-              _m.visibility = 1;
-              _this5._selectedHl.addMesh(_m, Color3.Black());
-            });
+          m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function () {
+            return _this7.pointerOutElement(element);
           }));
-        });
-      } else {
+        } else if (!cantSelect && elementInfo.active) {
+          var _m$actionManager;
+          _this7._selectedMeshes = [].concat(_toConsumableArray(_this7._selectedMeshes), _toConsumableArray(childMeshes));
+          _this7._selectedHl.addMesh(m, Color3.Black());
+          (_m$actionManager = m.actionManager) === null || _m$actionManager === void 0 || _m$actionManager.dispose();
+        } else {
+          var _m$actionManager2;
+          (_m$actionManager2 = m.actionManager) === null || _m$actionManager2 === void 0 || _m$actionManager2.dispose();
+        }
+      });
+      if ((_this$_tabgroupTypeAc = this._tabgroupTypeActive) !== null && _this$_tabgroupTypeAc !== void 0 && _this$_tabgroupTypeAc.call(this, 'PLANNER') && elementInfo.active) {
         var _guiElemRightBack;
-        this._selectedMeshes = childMeshes;
-        if (elementLength > 1 && !everyElementIsSelected) this._selectedMeshes.forEach(function (_m) {
-          _m.visibility = 1;
-          _this5._selectedHl.addMesh(_m, Color3.Black());
-        });
         var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
         guiElem.elements.push(dtarget);
-        dtarget.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
-        dtarget.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
+        var _size = this._uiConfig.templateConfig == 'standard' ? this._isMobile ? '28px' : '40px' : '35px';
+        dtarget.width = _size;
+        dtarget.height = _size;
         dtarget.thickness = 1;
         dtarget.background = this._colors.defaultBg;
         var dbt = Button.CreateImageOnlyButton('buttond', this._uiConfig.templateConfig == 'standard' ? delButton : gdelButton);
         guiElem.elements.push(dbt);
         dbt.color = 'transparent';
-        dbt.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '60%';
-        dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
+        var nSize = this._isMobile ? '20px' : '40px';
+        dbt.width = this._uiConfig.templateConfig == 'standard' ? nSize : '60%';
+        dbt.height = this._uiConfig.templateConfig == 'standard' ? nSize : '70%';
         dbt.onPointerClickObservable.add(function () {
-          return _this5._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
+          return _this7._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
         });
-        if (this._uiConfig.templateConfig == 'standard' && !guiElemRightBack) dtarget.linkOffsetY = -48;
+        if (this._uiConfig.templateConfig == 'standard' && !guiElemRightBack) dtarget.linkOffsetY = !this._isMobile ? -48 : -30;
         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);
     }
   }, {
@@ -2122,7 +2174,7 @@ var UIStore = /*#__PURE__*/function () {
     value: function createBoxCopyButtons(elementInfo, element) {
       var _this$_scene$activeCa,
         _this$_scene$activeCa2,
-        _this6 = this,
+        _this8 = this,
         _this$_scene$activeCa3;
       var guiElem = {
         elementId: elementInfo.elementId,
@@ -2148,8 +2200,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 _this8$_scene$activeC;
+            var _dir = (_this8$_scene$activeC = _this8._scene.activeCamera) === null || _this8$_scene$activeC === void 0 ? void 0 : _this8$_scene$activeC.getDirection(Axis.Z);
             if (_dir.z > 0) {
               target.rotation = 180 * Math.PI / 180;
             } else {
@@ -2157,8 +2209,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 _this8$_onElementCopy;
+            return (_this8$_onElementCopy = _this8._onElementCopy) === null || _this8$_onElementCopy === void 0 ? void 0 : _this8$_onElementCopy.call(_this8, elementInfo.setId, elementInfo.elementId, 'LEFT');
           });
           break;
         case 'BoxCopyRight':
@@ -2171,8 +2223,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 _this8$_scene$activeC2;
+            var _dir = (_this8$_scene$activeC2 = _this8._scene.activeCamera) === null || _this8$_scene$activeC2 === void 0 ? void 0 : _this8$_scene$activeC2.getDirection(Axis.Z);
             if (_dir.z < 0) {
               target.rotation = 180 * Math.PI / 180;
             } else {
@@ -2180,16 +2232,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 _this8$_onElementCopy2;
+            return (_this8$_onElementCopy2 = _this8._onElementCopy) === null || _this8$_onElementCopy2 === void 0 ? void 0 : _this8$_onElementCopy2.call(_this8, 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 _this8$_onElementCopy3;
+            return (_this8$_onElementCopy3 = _this8._onElementCopy) === null || _this8$_onElementCopy3 === void 0 ? void 0 : _this8$_onElementCopy3.call(_this8, elementInfo.setId, elementInfo.elementId, 'TOP');
           });
           break;
       }
@@ -2200,7 +2252,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "initGui",
     value: function initGui(onElSelected, elements) {
-      var _this7 = this;
+      var _this9 = this;
       if (!this._selectionHandler) this.initSelectionHandler(onElSelected);
       if (!this._scene) return;
       if (!this._elementsInfo) return;
@@ -2212,20 +2264,28 @@ var UIStore = /*#__PURE__*/function () {
       var isBoxPlanner = !this._elementsInfo.every(function (v) {
         return v.type == 'PosNr';
       });
+      this._selectedHl.removeAllMeshes();
+      this._selectedMeshes = [];
       this._elementsInfo.forEach(function (elementInfo) {
         var emnt = elements.find(function (el) {
           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 = _this9._scene.getTransformNodeByName(emnt.bbn.name);
         if (!element) return;
-        if (elementInfo.type == 'PosNr') _this7.createPosNr(elementInfo, element, isBoxPlanner, elements.length);else _this7.createBoxCopyButtons(elementInfo, element);
+        if (elementInfo.type == 'PosNr') _this9.createPosNr(elementInfo, element, isBoxPlanner, elements.length);else _this9.createBoxCopyButtons(elementInfo, element);
       });
     }
   }, {
     key: "selectElem",
-    value: function selectElem(name) {
-      var _this8 = this;
+    value: function selectElem(name, element, onElSelected) {
+      var _this$_elementsInfo2,
+        _this10 = this;
+      var elementInfo = (_this$_elementsInfo2 = this._elementsInfo) === null || _this$_elementsInfo2 === void 0 ? void 0 : _this$_elementsInfo2.find(function (ef) {
+        return ef.elementId.toString() == name;
+      });
+      if (!(elementInfo !== null && elementInfo !== void 0 && elementInfo.selectable) || elementInfo.active) return;
+      this._selectedMeshes = element.getChildMeshes();
       var _iterator = _createForOfIteratorHelper$5(this._gui.getControlsByType('ellipse')),
         _step;
       try {
@@ -2241,13 +2301,14 @@ 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 = _this10._colors.defaultBg;
           if (guiElem.elementId.toString() == name) {
-            if (element.typeName == 'label') element.color = _this8._colors.selectedBg;
+            if (element.typeName == 'label') element.color = _this10._colors.selectedBg;
             if (element.typeName == 'Ellipse') element.color = 'White';
           }
         });
       });
+      onElSelected === null || onElSelected === void 0 || onElSelected(element.parent.name, Number(name));
     }
   }, {
     key: "deactivateHighlightLayer",
@@ -2285,8 +2346,8 @@ var UIStore = /*#__PURE__*/function () {
     }
   }, {
     key: "requestNewOverlayImage",
-    value: function requestNewOverlayImage(viewpoint, focusedElement, targetCameraPosition) {
-      var _this9 = this;
+    value: function requestNewOverlayImage(viewpoint, focusedElement, targetCameraPosition, updateCameraInformation) {
+      var _this11 = this;
       //this._overlayImage exists only when unity combi is enabled
       if (!this._isUnityComb) return;
       var elementId = undefined;
@@ -2302,17 +2363,18 @@ 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._latestViewpoint = viewpoint;
-          _this9._utilStore.addOutstandingImageCount();
-          (_this9$_requestNewOve = _this9._requestNewOverlayImage) === null || _this9$_requestNewOve === void 0 || _this9$_requestNewOve.call(_this9, viewpoint, {
+          var _this11$_requestNewOv;
+          _this11._latestViewpoint = viewpoint;
+          _this11._utilStore.addOutstandingImageCount();
+          _this11._utilStore.updateCam = true;
+          updateCameraInformation === null || updateCameraInformation === void 0 || updateCameraInformation(viewpoint);
+          (_this11$_requestNewOv = _this11._requestNewOverlayImage) === null || _this11$_requestNewOv === void 0 || _this11$_requestNewOv.call(_this11, viewpoint, {
             adjustZoomInUnity: false,
             onlyAdjustZoomBBChanged: false,
             rotationCenter: viewpoint.targetPos,
             elementId: elementId,
             setId: setId
           });
-          _this9._utilStore.updateCam = true;
         }, 200);
       } else {
         this.fadeInOverlayImage(false);
@@ -2546,10 +2608,10 @@ var _context;
 var unregisterContext = function unregisterContext() {
   _context = undefined;
 };
-var registerContext = function registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig, updateCameraInformation) {
+var registerContext = function registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig, updateCameraInformation, isMobile) {
   var utilStore = new UtilStore(false, viewHandler);
   var sceneStore = new SceneStore(scene, hqRenderScript, utilStore, apiConfig, jwt, onMissingGeo, updateCameraInformation);
-  var uiStore = new UIStore(scene, sceneStore.enableSSAO.bind(sceneStore), utilStore, uiConfig, requestNewOverlayImage, overlayImage, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.viewPlannerHandler.onElementCopy, sceneStore.runRenderLoopForTime.bind(sceneStore));
+  var uiStore = new UIStore(scene, sceneStore.enableSSAO.bind(sceneStore), utilStore, uiConfig, requestNewOverlayImage, overlayImage, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.viewPlannerHandler.onElementCopy, sceneStore.runRenderLoopForTime.bind(sceneStore), viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.tabgroupTypeActive, isMobile);
   return _context = {
     utilStore: utilStore,
     sceneStore: sceneStore,
@@ -2763,14 +2825,12 @@ 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 31:
-          _context.prev = 31;
+        case 29:
+          _context.prev = 29;
           _context.t0 = _context["catch"](8);
           if (setDataRow) useUtilStoreContext().setAnalyzeDataRow({
             type: 'MAT',
@@ -2780,19 +2840,17 @@ var customMat = /*#__PURE__*/function () {
             path: _customMat.blob,
             sizeMb: 0
           });
-        case 34:
+        case 32:
           mat = new PBRMetallicRoughnessMaterial(_customMat.name, _customMat.scene);
-          mat.depthFunction = Constants.ALWAYS;
-          mat.disableColorWrite = true;
           return _context.abrupt("return", {
             mat: mat,
             found: true
           });
-        case 38:
+        case 34:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[8, 31]]);
+    }, _callee, null, [[8, 29]]);
   }));
   return function customMat(_x) {
     return _ref.apply(this, arguments);
@@ -3507,7 +3565,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 = 2;
+    lightl.intensity = 1;
     lightf.intensity = 2.2;
     light.intensity = 1;
     lightr.intensity = 1;
@@ -3527,8 +3585,6 @@ 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);
@@ -3583,16 +3639,15 @@ var parser = /*#__PURE__*/function () {
                 parentNode: parent
               });
               findMaterials(newCache);
-              shadow();
             });
           } else if (!hasRendered) {
+            shadow();
             buildScene({
               startNode: hqRenderScript.scene.nodes[0],
               cache: cacheGroup,
               cachedAssets: newCache
             });
             findMaterials(newCache);
-            shadow();
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
@@ -3610,7 +3665,7 @@ var parser = /*#__PURE__*/function () {
 
 var LOG = getLogger('ARViewer', 'RealTimeRenderData');
 function useRealTimeRenderData (_ref) {
-  var _sceneStore2;
+  var _sceneStore3;
   var jwt = _ref.jwt,
     actions = _ref.actions,
     apiConfig = _ref.apiConfig,
@@ -3625,10 +3680,11 @@ function useRealTimeRenderData (_ref) {
     plannedPlacesOnGrids = _ref.plannedPlacesOnGrids,
     callbacks = _ref.callbacks,
     uiConfig = _ref.uiConfig,
-    renderInBackground = _ref.renderInBackground;
+    renderInBackground = _ref.renderInBackground,
+    isMobile = _ref.isMobile;
   var gameCanvas = useRef(null);
   var sceneStore = useSceneStoreContext();
-  useUtilStoreContext();
+  var utilStore = useUtilStoreContext();
   var gridStore = useGridStoreContext();
   var uiStore = useUIStoreContext();
   DracoCompression.Configuration = {
@@ -3669,47 +3725,48 @@ function useRealTimeRenderData (_ref) {
             sceneStore.isInitializing = true;
             if (!overlayImage) actions.toggleLoading('buildScene', false, true);
             if (sceneStore.hasRendered) {
-              _context2.next = 9;
+              _context2.next = 10;
               break;
             }
             if (inBackground) sceneStore.scene.getEngine().setHardwareScalingLevel(5);
             sceneStore.init(apiConfig.diva3darchive + '/', gameCanvas.current, viewpoint, resolution);
-            _context2.next = 14;
+            uiStore.resize(sceneStore.scene);
+            _context2.next = 15;
             break;
-          case 9:
+          case 10:
             sceneStore.hqRenderScript = JSON.parse(renderjob);
             if (checkCachedData()) {
-              _context2.next = 14;
+              _context2.next = 15;
               break;
             }
             if (!overlayImage) actions.toggleLoading('buildScene', false, false);
             sceneStore.isInitializing = false;
             return _context2.abrupt("return");
-          case 14:
+          case 15:
             LOG.startTransaction({
               event: 'buildScene',
               message: 'Start Building Realtime Scene',
               eventId: 'BUILD_SCENE'
             });
-            _context2.prev = 15;
+            _context2.prev = 16;
             uiStore.deactivateHighlightLayer();
-            _context2.next = 19;
+            _context2.next = 20;
             return parser();
-          case 19:
+          case 20:
             uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
             if (freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids(freePlacesOnGrids, plannedPlacesOnGrids);
-            _context2.next = 28;
+            _context2.next = 29;
             break;
-          case 23:
-            _context2.prev = 23;
-            _context2.t0 = _context2["catch"](15);
+          case 24:
+            _context2.prev = 24;
+            _context2.t0 = _context2["catch"](16);
             LOG.errorTransaction('BUILD_SCENE', 'RTS_0001', _context2.t0.message);
             LOG.error(new DivaError('Error building scene', {
               cause: _context2.t0,
               code: 'RTS_0001'
             }));
             sceneStore.isInitializing = false;
-          case 28:
+          case 29:
             if (callbacks.setGlb) {
               sceneStore.exportScene().then(function (res) {
                 var _callbacks$setGlb;
@@ -3724,11 +3781,11 @@ function useRealTimeRenderData (_ref) {
             sceneStore.runRenderLoopIndefinitely();
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
-          case 33:
+          case 34:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[15, 23]]);
+      }, _callee2, null, [[16, 24]]);
     }));
     return _onSceneReady.apply(this, arguments);
   }
@@ -3745,7 +3802,7 @@ function useRealTimeRenderData (_ref) {
   }
 
   // trigger if gamecanvas did not update but renderjob
-  if (gameCanvas.current && sceneStore && sceneStore.scene) {
+  if (gameCanvas.current && sceneStore && sceneStore.scene.getEngine()) {
     var _queueRerender = function queueRerender() {
       if (sceneStore.isInitializing) setTimeout(_queueRerender, 150);else {
         if (sceneStore.scene.isReady()) onSceneReady();else sceneStore.scene.executeWhenReady(function () {
@@ -3756,38 +3813,42 @@ function useRealTimeRenderData (_ref) {
     _queueRerender();
   }
   useEffect(function () {
-    function asyncUseEffect() {
-      return _asyncUseEffect.apply(this, arguments);
-    }
-    function _asyncUseEffect() {
-      _asyncUseEffect = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var engine, bScene, context, scene, resize;
+    var babylonScene = undefined;
+    var babylonEngine = undefined;
+    function init() {
+      return _init.apply(this, arguments);
+    }
+    function _init() {
+      _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var context;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (!gameCanvas.current) {
-                _context.next = 23;
+              if (gameCanvas.current) {
+                _context.next = 2;
                 break;
               }
-              _context.next = 3;
+              return _context.abrupt("return");
+            case 2:
+              _context.next = 4;
               return EngineFactory.CreateAsync(gameCanvas.current, {
                 antialias: true,
                 stencil: true,
-                audioEngine: false
+                audioEngine: false,
+                adaptToDeviceRatio: true
               });
-            case 3:
-              engine = _context.sent;
-              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);
+            case 4:
+              babylonEngine = _context.sent;
+              babylonEngine.renderEvenInBackground = renderInBackground;
+              babylonEngine.disablePerformanceMonitorInBackground = true;
+              babylonScene = new Scene(babylonEngine, undefined);
+              babylonScene.clearColor = new Color4(255, 255, 255, 255);
+              context = registerContext(babylonScene, renderjob, apiConfig, jwt, viewHandler, callbacks.onMissingGeo, callbacks.requestNewOverlayImage, overlayImage, uiConfig, callbacks.updateCameraInformation, !!isMobile);
               sceneStore = context.sceneStore;
-              context.utilStore;
+              utilStore = context.utilStore;
               gridStore = context.gridStore;
               uiStore = context.uiStore;
-              scene = bScene;
-              if (!bScene.isReady()) {
+              if (!babylonScene.isReady()) {
                 _context.next = 19;
                 break;
               }
@@ -3797,57 +3858,58 @@ function useRealTimeRenderData (_ref) {
               _context.next = 20;
               break;
             case 19:
-              bScene.executeWhenReady(function () {
+              babylonScene.executeWhenReady(function () {
                 return onSceneReady();
               });
             case 20:
-              resize = function resize() {
-                if (inBackground || !scene || !scene.getEngine()) return;
-                if (sceneStore.hasPlanned) sceneStore.doRenderControlLoop = true;
-                scene.getEngine().resize(true);
-                if (uiStore) uiStore.resize(scene);
-              };
               if (window && gameCanvas.current) {
                 window.addEventListener('resize', resize);
                 new ResizeObserver(resize).observe(gameCanvas.current);
               }
-              return _context.abrupt("return", function () {
-                scene.getEngine().dispose();
-                if (window) {
-                  window.removeEventListener('resize', resize);
-                }
-              });
-            case 23:
-              return _context.abrupt("return");
-            case 24:
+            case 21:
             case "end":
               return _context.stop();
           }
         }, _callee);
       }));
-      return _asyncUseEffect.apply(this, arguments);
+      return _init.apply(this, arguments);
     }
-    unregisterContext();
-    asyncUseEffect();
+    var resize = function resize() {
+      var _sceneStore2;
+      if (inBackground || !((_sceneStore2 = sceneStore) !== null && _sceneStore2 !== void 0 && _sceneStore2.scene) || !sceneStore.scene.getEngine() || !sceneStore.scene.isReady()) return;
+      sceneStore.runRenderLoopIndefinitely();
+      sceneStore.scene.getEngine().resize(true);
+      uiStore.resize(sceneStore.scene);
+      uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
+    };
+    init();
+    return function () {
+      if (babylonEngine || babylonScene) {
+        unregisterContext();
+        sceneStore.scene.dispose();
+        if (window) {
+          window.removeEventListener('resize', resize);
+        }
+      }
+    };
   }, []);
   useEffect(function () {
-    if (overlayImage && uiStore) {
+    if (overlayImage && uiStore && gameCanvas.current && sceneStore && sceneStore.scene.getEngine()) {
+      if (!utilStore.updateCam) return;
+      sceneStore.runRenderLoopForTime(1000);
       uiStore.updateOverlayImage(overlayImage);
       if (viewpoint) updateCam(viewpoint, sceneStore.scene);
     }
   }, [overlayImage]);
   useEffect(function () {
-    if (sceneStore && elementsInfo) {
-      var activeElement = elementsInfo.find(function (e) {
-        return e.active;
-      });
-      if (activeElement) sceneStore.selectedElement = activeElement.elementId.toString();
+    if (sceneStore && elementsInfo && gameCanvas.current && sceneStore.scene.getEngine()) {
       uiStore.addElementsInfo(elementsInfo);
       uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
+      sceneStore.runRenderLoopForTime(1000);
     }
-  }, [elementsInfo, (_sceneStore2 = sceneStore) === null || _sceneStore2 === void 0 ? void 0 : _sceneStore2.elements]);
+  }, [elementsInfo, (_sceneStore3 = sceneStore) === null || _sceneStore3 === void 0 ? void 0 : _sceneStore3.elements]);
   useEffect(function () {
-    if (!sceneStore) return;
+    if (!gameCanvas.current || !sceneStore) return;
     if (inBackground) {
       sceneStore.stopRenderLoop();
     } else if (sceneStore.hasRendered) {