@crystaldesign/real-time-viewer 24.12.0-beta.2 → 24.12.0-beta.20

package/build/esm/index.js

@@ -26,7 +26,7 @@ import { Tools, Observable, WebRequest } from '@babylonjs/core/Misc';
 import { SceneOptimizerOptions, ShadowsOptimization, RenderTargetsOptimization, SceneOptimizer } from '@babylonjs/core/Misc/sceneOptimizer';
 import { getLogger, DivaError } from '@crystaldesign/diva-core';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { Ellipse, Rectangle, Button, TextBlock, Image, AdvancedDynamicTexture } from '@babylonjs/gui';
+import { Ellipse, Rectangle, Button, TextBlock, AdvancedDynamicTexture, Image } from '@babylonjs/gui';
 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';
@@ -57,13 +57,13 @@ function GetCameraControls(camera) {
   var previousTouch;
   var isZooming = false;
   var initDistance = 0;
-  var targetCameraPosition = camera.position;
   function renderLoop() {
-    if (!sceneStore.doRenderControlLoop) return;
+    if (!sceneStore.doRenderControlLoop || sceneStore.isInitializing || uistore.isStaticBg) return;
+    if (sceneStore.cameraTargetPosition.x == 0 && sceneStore.cameraTargetPosition.y == 0 && sceneStore.cameraTargetPosition.z == 0) sceneStore.setCameraTarget();
     uistore.onMove();
     var stopRender = true;
     var delta = sceneStore.scene.getEngine().getDeltaTime();
-    var deltaCamPos = targetCameraPosition.subtract(camera.position).multiplyByFloats(delta / 100, delta / 100, delta / 100);
+    var deltaCamPos = sceneStore.targetCameraPosition.subtract(camera.position).multiplyByFloats(delta / 100, delta / 100, delta / 100);
     var deltaTarget = sceneStore.cameraTargetPosition.subtract(camera.target).multiplyByFloats(delta / 100, delta / 100, delta / 100);
     if (Math.abs(deltaCamPos.x) + Math.abs(deltaCamPos.y) + Math.abs(deltaCamPos.z) > 0.01) {
       camera.position = camera.position.addInPlaceFromFloats(deltaCamPos.x, deltaCamPos.y, deltaCamPos.z);
@@ -98,43 +98,43 @@ function GetCameraControls(camera) {
     var localUp = Vector3.TransformNormal(Vector3.Up(), camera.getWorldMatrix());
     localRight = localRight.normalize();
     localUp = localUp.normalize();
-    targetCameraPosition = targetCameraPosition.add(localUp.scale(deltaY));
-    targetCameraPosition = targetCameraPosition.add(localRight.scale(-deltaX));
-    var newCalculatedTarget = targetCameraPosition.add(camera.getForwardRay().direction.scale(Vector3.Distance(targetCameraPosition, sceneStore.cameraTargetPosition)));
+    sceneStore.targetCameraPosition = sceneStore.targetCameraPosition.add(localUp.scale(deltaY));
+    sceneStore.targetCameraPosition = sceneStore.targetCameraPosition.add(localRight.scale(-deltaX));
+    var newCalculatedTarget = sceneStore.targetCameraPosition.add(camera.getForwardRay().direction.scale(Vector3.Distance(sceneStore.targetCameraPosition, sceneStore.cameraTargetPosition)));
     sceneStore.cameraTargetPosition = newCalculatedTarget;
     if (newCalculatedTarget.x > maxCamPosition.x) {
-      targetCameraPosition.x = camera.position.x;
+      sceneStore.targetCameraPosition.x = camera.position.x;
       sceneStore.cameraTargetPosition.x = maxCamPosition.x;
     }
     if (newCalculatedTarget.x < -maxCamPosition.x) {
-      targetCameraPosition.x = camera.position.x;
+      sceneStore.targetCameraPosition.x = camera.position.x;
       sceneStore.cameraTargetPosition.x = -maxCamPosition.x;
     }
     if (newCalculatedTarget.z > maxCamPosition.z) {
-      targetCameraPosition.z = camera.position.z;
+      sceneStore.targetCameraPosition.z = camera.position.z;
       sceneStore.cameraTargetPosition.z = maxCamPosition.z;
     }
     if (newCalculatedTarget.z < -maxCamPosition.z) {
-      targetCameraPosition.z = camera.position.z;
+      sceneStore.targetCameraPosition.z = camera.position.z;
       sceneStore.cameraTargetPosition.z = -maxCamPosition.z;
     }
   }
   function moveCameraAwayFromTarget(distance) {
-    var directionVector = targetCameraPosition.subtract(camera.target);
+    var directionVector = sceneStore.targetCameraPosition.subtract(camera.target);
     directionVector.normalize();
-    var previousDistToTarget = Vector3.Distance(sceneStore.cameraTargetPosition, targetCameraPosition);
-    var newPosition = targetCameraPosition.add(directionVector.scale(distance * previousDistToTarget));
+    var previousDistToTarget = Vector3.Distance(sceneStore.cameraTargetPosition, sceneStore.targetCameraPosition);
+    var newPosition = sceneStore.targetCameraPosition.add(directionVector.scale(distance * previousDistToTarget));
     var distToTarget = Vector3.Distance(sceneStore.cameraTargetPosition, newPosition);
     if (distToTarget < 0.1) return;
-    if (distToTarget > 15) return;
-    targetCameraPosition = newPosition;
+    if (distToTarget > 75) return;
+    sceneStore.targetCameraPosition = newPosition;
   }
   function onRotate(deltaX, deltaY) {
     function rotateUniversalCamera(deltaX, deltaY) {
       function calculateAngles() {
-        var dx = targetCameraPosition.x - sceneStore.cameraTargetPosition.x;
-        var dy = targetCameraPosition.y - sceneStore.cameraTargetPosition.y;
-        var dz = targetCameraPosition.z - sceneStore.cameraTargetPosition.z;
+        var dx = sceneStore.targetCameraPosition.x - sceneStore.cameraTargetPosition.x;
+        var dy = sceneStore.targetCameraPosition.y - sceneStore.cameraTargetPosition.y;
+        var dz = sceneStore.targetCameraPosition.z - sceneStore.cameraTargetPosition.z;
         var distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
         var alpha = Math.atan2(dz, dx); // angle around the y-axis
         var beta = Math.acos(dy / distance); // elevation angle
@@ -157,7 +157,7 @@ function GetCameraControls(camera) {
       var x = sceneStore.cameraTargetPosition.x + distance * Math.sin(beta) * Math.cos(alpha);
       var y = sceneStore.cameraTargetPosition.y + distance * Math.cos(beta);
       var z = sceneStore.cameraTargetPosition.z + distance * Math.sin(beta) * Math.sin(alpha);
-      targetCameraPosition = new Vector3(x, y, z);
+      sceneStore.targetCameraPosition = new Vector3(x, y, z);
     }
     rotateUniversalCamera(deltaX, deltaY);
     sceneStore.doRenderControlLoop = true;
@@ -833,10 +833,10 @@ var GridStore = /*#__PURE__*/function () {
 var lightning = function lightning(diva3durl, scene, cams, isMobile, sceneStore) {
   var environmentTexture = CubeTexture.CreateFromPrefilteredData(diva3durl + 'environment.env', scene);
   environmentTexture.gammaSpace = false;
-  environmentTexture.rotationY = 1.45;
+  environmentTexture.rotationY = 1.25663706144;
   scene.environmentTexture = environmentTexture;
   scene.createDefaultSkybox(environmentTexture);
-  scene.environmentIntensity = 1;
+  scene.environmentIntensity = 0.5;
   scene.getMaterialByName('skyBox').alpha = 0;
   var ssao = new SSAO2RenderingPipeline('ssao', scene, {
     ssaoRatio: 0.5,
@@ -863,8 +863,8 @@ function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function createCams(scene, activeViewpoint, viewPoints) {
   var _useUtilStoreContext = useUtilStoreContext(),
-    degreesToRadians = _useUtilStoreContext.degreesToRadians,
-    vector3ToBVector3 = _useUtilStoreContext.vector3ToBVector3;
+    vector3ToBVector3 = _useUtilStoreContext.vector3ToBVector3,
+    degreesToRadians = _useUtilStoreContext.degreesToRadians;
   function createCam(_ref) {
     var name = _ref.name,
       pos = _ref.pos,
@@ -911,11 +911,22 @@ function createCams(scene, activeViewpoint, viewPoints) {
     parent: undefined
   })];
 }
+function updateCam(camera, scene) {
+  if (camera.pos.x == 0 && camera.pos.y == 0 && camera.pos.z == 0) return;
+  var utilStore = useUtilStoreContext();
+  var sceneStore = useSceneStoreContext();
+  var cam = scene.getCameraByName('defaultCam');
+  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$1(_objectSpread$1({}, camera.rot), {}, {
+    x: -camera.rot.x
+  })));
+  sceneStore.targetCameraPosition = newPos;
+}
 
 function _createForOfIteratorHelper$7(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$7(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$7(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$7(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$7(r, a) : void 0; } }
 function _arrayLikeToArray$7(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-
 /* 
   SceneStore
   Wraps the scene with additional data and methods
@@ -931,6 +942,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_geos", []);
     _defineProperty(this, "_sceneConstruct", {});
     _defineProperty(this, "_hasRendered", false);
+    _defineProperty(this, "_hasPlanned", false);
     _defineProperty(this, "_utilStore", void 0);
     _defineProperty(this, "_cache", []);
     _defineProperty(this, "_ssao", undefined);
@@ -945,6 +957,7 @@ var SceneStore = /*#__PURE__*/function () {
     _defineProperty(this, "_renderControlLoop", undefined);
     _defineProperty(this, "_doRenderControlLoop", false);
     _defineProperty(this, "_cameraTargetPosition", Vector3.Zero());
+    _defineProperty(this, "_targetCameraPosition", Vector3.Zero());
     _defineProperty(this, "_selectedElement", void 0);
     _defineProperty(this, "light", undefined);
     _defineProperty(this, "changedElements", void 0);
@@ -1093,6 +1106,14 @@ var SceneStore = /*#__PURE__*/function () {
     set: function set(pos) {
       this._cameraTargetPosition = pos;
     }
+  }, {
+    key: "targetCameraPosition",
+    get: function get() {
+      return this._targetCameraPosition;
+    },
+    set: function set(pos) {
+      this._targetCameraPosition = pos;
+    }
   }, {
     key: "isInitializing",
     get: function get() {
@@ -1101,6 +1122,12 @@ var SceneStore = /*#__PURE__*/function () {
     set: function set(isInit) {
       this._isInitializing = isInit;
     }
+  }, {
+    key: "enableSSAO",
+    value: function enableSSAO(enable) {
+      if (!this._ssao) return;
+      this._ssao.totalStrength = enable ? 0.7 : 0;
+    }
   }, {
     key: "getElementByName",
     value: function getElementByName(name) {
@@ -1174,6 +1201,15 @@ var SceneStore = /*#__PURE__*/function () {
       if (!value) throw new Error("can't unrender");
       this._hasRendered = value;
     }
+  }, {
+    key: "hasPlanned",
+    get: function get() {
+      return this._hasPlanned;
+    },
+    set: function set(value) {
+      if (!value) throw new Error("can't set has planned to false");
+      this._hasPlanned = value;
+    }
   }, {
     key: "cams",
     get: function get() {
@@ -1233,6 +1269,7 @@ var SceneStore = /*#__PURE__*/function () {
       Tools.fallbackTexture = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // blank white image
       this.setResolution(resolutionDiv, gameCanvas, resolution);
       var cams = createCams(this._scene, initViewpoint);
+      this._targetCameraPosition = cams[0].position;
       lightning(diva3durl, this._scene, cams, this._utilStore.isMobile, this);
     }
   }, {
@@ -1272,6 +1309,18 @@ var SceneStore = /*#__PURE__*/function () {
         geos: []
       });
     }
+  }, {
+    key: "removeElement",
+    value: function removeElement(hqs) {
+      var _this$_sceneConstruct8;
+      var set = (_this$_sceneConstruct8 = this._sceneConstruct.root) === null || _this$_sceneConstruct8 === void 0 ? void 0 : _this$_sceneConstruct8.sets[this._sceneConstruct.root.sets.length - 1];
+      if (!set) {
+        throw new Error("can't register sets before root");
+      }
+      set.elements = set.elements.filter(function (el) {
+        return el.hqs.name != hqs.name;
+      });
+    }
   }, {
     key: "shouldExport",
     value: function shouldExport(node) {
@@ -1342,12 +1391,39 @@ var SceneStore = /*#__PURE__*/function () {
   }, {
     key: "setCameraTarget",
     value: function setCameraTarget() {
-      var _this$scene$transform;
-      var bbox = (_this$scene$transform = this.scene.transformNodes.find(function (transformNode) {
+      var root = this.scene.transformNodes.find(function (transformNode) {
         return transformNode.name == 'Root';
-      })) === null || _this$scene$transform === void 0 ? void 0 : _this$scene$transform.getHierarchyBoundingVectors();
+      });
+      if (!root) return;
+      var bbox = root.getHierarchyBoundingVectors();
+      if (root.getChildren()[0].getChildren()[0].getChildren().length == 0) return; // planning is empty
       var pos = new Vector3((bbox.max.x + bbox.min.x) / 2, (bbox.max.y + bbox.min.y) / 2, (bbox.max.z + bbox.min.z) / 2);
+      this.scene.getCameraByName('defaultCam').target = pos;
       this.cameraTargetPosition = pos;
+
+      // this.doRenderControlLoop = true;
+    }
+  }, {
+    key: "focusElement",
+    value: function focusElement(root) {
+      if (!root) root = this.scene.transformNodes.find(function (transformNode) {
+        return transformNode.name == 'Root';
+      });
+      if (!root) return;
+      var engine = this.scene.getEngine();
+      var cam = this.scene.activeCamera;
+      var bbox = root.getHierarchyBoundingVectors();
+      var center = Vector3.Center(bbox.min, bbox.max);
+      var radius = Vector3.Distance(bbox.min, bbox.max) / 2;
+      if (radius == Infinity) return;
+      var aspectRatio = engine.getRenderWidth() / engine.getRenderHeight();
+      var distance = radius / Math.tan(cam.fov * 0.7);
+      var direction = cam.getDirection(Vector3.Backward());
+      if (aspectRatio > 1) distance *= aspectRatio;
+      var newPosition = center.add(direction.scale(distance));
+      if (newPosition.x == 0 && newPosition.y == 0 && newPosition.z == 0) return;
+      this.cameraTargetPosition = center;
+      this.targetCameraPosition = newPosition;
       this.doRenderControlLoop = true;
     }
   }, {
@@ -1372,64 +1448,76 @@ function _unsupportedIterableToArray$6(r, a) { if (r) { if ("string" == typeof r
 function _arrayLikeToArray$6(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function SelHandler (_ref) {
   var onElSelected = _ref.onElSelected;
-  var utilStore = useUtilStoreContext();
+  useUtilStoreContext();
   var gridStore = useGridStoreContext();
   var sceneStore = useSceneStoreContext();
   var uiStore = useUIStoreContext();
+  var timeoutId;
   var onSelection = function onSelection(evt) {
-    if (evt.event.button == 2) return;
+    if (evt.event.button == 2 || !(evt.type == 16 || evt.type == 64)) return;
     var ray = sceneStore.scene.createPickingRay(sceneStore.scene.pointerX, sceneStore.scene.pointerY, Matrix.Identity(), sceneStore.scene.activeCamera);
     var hit = sceneStore.scene.pickWithRay(ray);
     var pickedElement = false;
     var element = hit === null || hit === void 0 ? void 0 : hit.pickedMesh;
-    while (element) {
-      var _element, _element2;
-      element = (_element = element) === null || _element === void 0 ? void 0 : _element.parent;
-      if ((_element2 = element) !== null && _element2 !== void 0 && _element2.name.toLowerCase().startsWith('element')) {
-        pickedElement = true;
-        if (evt.type == 16) {
-          onElementSelected(element);
-          return;
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(function () {
+      while (element) {
+        var _element, _element2;
+        element = (_element = element) === null || _element === void 0 ? void 0 : _element.parent;
+        if ((_element2 = element) !== null && _element2 !== void 0 && _element2.name.toLowerCase().startsWith('element')) {
+          pickedElement = true;
+          if (evt.type == 64 && hit !== null && hit !== void 0 && hit.pickedPoint) {
+            onElementSelected(element, hit, true);
+            return;
+          } else if (evt.type == 16 && hit !== null && hit !== void 0 && hit.pickedPoint) {
+            onElementSelected(element, hit);
+            return;
+          }
         }
       }
-    }
-    if (hit !== null && hit !== void 0 && hit.pickedPoint) {
-      var _hit$pickedMesh;
-      if (sceneStore.elements) {
-        var _iterator = _createForOfIteratorHelper$6(sceneStore.elements),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var _element3 = _step.value;
-            var _element3$bbn$getHier = _element3.bbn.getHierarchyBoundingVectors(),
-              min = _element3$bbn$getHier.min,
-              max = _element3$bbn$getHier.max;
-            var point = hit.pickedPoint;
-            if (min.x < point.x && min.z < point.y && max.x > point.x && max.z > point.z && evt.type == 16) {
-              pickedElement = true;
-              onElementSelected(_element3.bbn, true);
+      if (!pickedElement && hit !== null && hit !== void 0 && hit.pickedPoint) {
+        var _hit$pickedMesh;
+        if (sceneStore.elements) {
+          var _iterator = _createForOfIteratorHelper$6(sceneStore.elements),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _element3 = _step.value;
+              var _element3$bbn$getHier = _element3.bbn.getHierarchyBoundingVectors(),
+                min = _element3$bbn$getHier.min,
+                max = _element3$bbn$getHier.max;
+              var point = hit.pickedPoint;
+              if (min.x < point.x && min.z < point.y && max.x > point.x && max.z > point.z && evt.type == 16) {
+                pickedElement = true;
+                onElementSelected(_element3.bbn, hit);
+              }
             }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+        if (!pickedElement && (hit === null || hit === void 0 || (_hit$pickedMesh = hit.pickedMesh) === null || _hit$pickedMesh === void 0 ? void 0 : _hit$pickedMesh.name) == 'ground' && sceneStore.sets && evt.type == 16) onSetSelected(sceneStore.sets[0].bbn);
       }
-      if (!pickedElement && (hit === null || hit === void 0 || (_hit$pickedMesh = hit.pickedMesh) === null || _hit$pickedMesh === void 0 ? void 0 : _hit$pickedMesh.name) == 'ground' && sceneStore.sets && evt.type == 16) onSetSelected(sceneStore.sets[0].bbn);
-    }
+    }, 200);
   };
   var onSetSelected = function onSetSelected(elem) {
     gridStore.deselectGrids();
-    sceneStore.cameraTargetPosition = utilStore.calculateBBoxCenter(elem);
-    sceneStore.doRenderControlLoop = true;
+    sceneStore.focusElement(elem);
   };
-  var onElementSelected = function onElementSelected(elem, changeViewPoint) {
+  var onElementSelected = function onElementSelected(elem, hit, doubleClick) {
     var elemName = elem.name.slice(-1);
-    if (sceneStore.selectedElement == elemName) {
-      sceneStore.cameraTargetPosition = utilStore.calculateBBoxCenter(elem);
-      sceneStore.doRenderControlLoop = true;
+    if (doubleClick && sceneStore.selectedElement == 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;
+        return _getParent(mesh.parent);
+      };
+      sceneStore.focusElement(_getParent(hit.pickedMesh));
       return;
+    } else if (doubleClick || sceneStore.selectedElement == elemName) {
+      sceneStore.focusElement(elem);
     }
     sceneStore.selectedElement = elemName;
     uiStore.selectElem(elemName);
@@ -1448,7 +1536,7 @@ function _arrayLikeToArray$5(r, a) { (null == a || a > r.length) && (a = r.lengt
 */
 
 var UIStore = /*#__PURE__*/function () {
-  function UIStore(scene, utilStore, uiConfig, requestNewOverlayImage, _overlayImage) {
+  function UIStore(scene, enableSSAO, utilStore, uiConfig, requestNewOverlayImage, _overlayImage) {
     var _this = this;
     _classCallCheck(this, UIStore);
     _defineProperty(this, "_utilStore", void 0);
@@ -1457,10 +1545,10 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "_overlayImage", void 0);
     _defineProperty(this, "_requestNewOverlayImage", void 0);
     _defineProperty(this, "_timeoutId", void 0);
-    _defineProperty(this, "_outstandingImageCount", void 0);
     _defineProperty(this, "_latestViewpoint", void 0);
     _defineProperty(this, "_guiElements", []);
     _defineProperty(this, "_scene", void 0);
+    _defineProperty(this, "_enableSSAO", void 0);
     _defineProperty(this, "_selectionHandler", void 0);
     _defineProperty(this, "_colors", {
       defaultBg: 'rgba(240, 240, 240, 255)',
@@ -1469,20 +1557,17 @@ var UIStore = /*#__PURE__*/function () {
       hoverBg: 'White'
     });
     _defineProperty(this, "_gridGui", void 0);
+    _defineProperty(this, "_isStaticBg", void 0);
     _defineProperty(this, "updateOverlayImage", function (overlayImage) {
-      if (!overlayImage || !_this._scene) return;
-      _this._outstandingImageCount--;
-      if (_this._outstandingImageCount > 0) return;
-      if (_this._overlayImage) _this._overlayImage.source = overlayImage;else {
-        _this._overlayImage = new Image('overlayImage', overlayImage);
-        _this._overlayImage.width = '100%';
-        _this._overlayImage.height = '100%';
-        _this._overlayImage.alpha = 1;
-        _this._gui.addControl(_this._overlayImage);
-      }
+      var _this$_overlayImage;
+      if (!overlayImage || !_this._scene || ((_this$_overlayImage = _this._overlayImage) === null || _this$_overlayImage === void 0 ? void 0 : _this$_overlayImage.source) == overlayImage.base64) return;
+      _this._isStaticBg = overlayImage.isStaticBg;
+      _this._overlayImage.source = overlayImage.base64;
       _this._overlayImage.isVisible = true;
+      _this._enableSSAO(false);
     });
     this._scene = scene;
+    this._enableSSAO = enableSSAO;
     this._utilStore = utilStore;
     this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI');
     this._gui.renderScale = 1;
@@ -1496,10 +1581,24 @@ var UIStore = /*#__PURE__*/function () {
       this._colors.defaultBg = '#dfdfdf';
       this._colors.selectedBg = '#db3433';
     }
-    this._outstandingImageCount = 0;
-    if (_overlayImage) this.updateOverlayImage(_overlayImage);
+    this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
+    if (_overlayImage) {
+      this._overlayImage = new Image('overlayImage', _overlayImage.base64);
+      this._overlayImage.width = '100%';
+      this._overlayImage.height = '100%';
+      this._overlayImage.alpha = 1;
+      this._gui.addControl(this._overlayImage);
+      this._overlayImage.source = _overlayImage.base64;
+      this._overlayImage.isVisible = true;
+      this._enableSSAO(false);
+    }
   }
   return _createClass(UIStore, [{
+    key: "isStaticBg",
+    get: function get() {
+      return !!this._isStaticBg;
+    }
+  }, {
     key: "initSelectionHandler",
     value: function initSelectionHandler(onElementSelected) {
       var _this2 = this;
@@ -1673,8 +1772,7 @@ var UIStore = /*#__PURE__*/function () {
         dbt.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '60%';
         dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
         dbt.onPointerClickObservable.add(function () {
-          var _this6$_utilStore$vie;
-          return (_this6$_utilStore$vie = _this6._utilStore.viewHandler) === null || _this6$_utilStore$vie === void 0 ? void 0 : _this6$_utilStore$vie.viewPlannerHandler.onElementDeleted(setId, elementId);
+          return _this6._utilStore.onElementDeleted(setId, elementId);
         });
         if (this._uiConfig.templateConfig == 'standard') dtarget.linkOffsetY = -48;
         dtarget.addControl(dbt);
@@ -1704,6 +1802,8 @@ var UIStore = /*#__PURE__*/function () {
     value: function onMove() {
       if (!this._overlayImage) return;
       this._overlayImage.isVisible = false;
+      this._enableSSAO(true);
+      this._utilStore.updateCam = false;
     }
   }, {
     key: "requestNewOverlayImage",
@@ -1716,9 +1816,11 @@ var UIStore = /*#__PURE__*/function () {
         var _this7$_requestNewOve;
         if (JSON.stringify(viewpoint) == JSON.stringify(_this7._latestViewpoint)) {
           _this7._overlayImage.isVisible = true;
+          _this7._enableSSAO(false);
           return;
         }
-        _this7._outstandingImageCount++;
+        _this7._utilStore.addOutstandingImage();
+        _this7._utilStore.updateCam = true;
         _this7._latestViewpoint = viewpoint;
         (_this7$_requestNewOve = _this7._requestNewOverlayImage) === null || _this7$_requestNewOve === void 0 || _this7$_requestNewOve.call(_this7, viewpoint);
       }, 500);
@@ -1735,6 +1837,8 @@ var UtilStore = /*#__PURE__*/function () {
     _classCallCheck(this, UtilStore);
     _defineProperty(this, "_isMobile", void 0);
     _defineProperty(this, "_rtvAnalyzeData", []);
+    _defineProperty(this, "_outstandingImageCount", void 0);
+    _defineProperty(this, "_updateCam", void 0);
     _defineProperty(this, "_viewHandler", void 0);
     _defineProperty(this, "calculateBBoxCenter", function (ob) {
       var boundingBox = ob.getHierarchyBoundingVectors();
@@ -1758,6 +1862,8 @@ var UtilStore = /*#__PURE__*/function () {
     });
     this._isMobile = !!isMobile;
     this._viewHandler = viewHandler;
+    this._outstandingImageCount = 0;
+    this._updateCam = true;
   }
   return _createClass(UtilStore, [{
     key: "isMobile",
@@ -1775,6 +1881,31 @@ var UtilStore = /*#__PURE__*/function () {
       var _this$_viewHandler;
       return (_this$_viewHandler = this._viewHandler) === null || _this$_viewHandler === void 0 ? void 0 : _this$_viewHandler.tabGroupState.curTabGroup.key;
     }
+  }, {
+    key: "updateCam",
+    set: function set(doUpdateCam) {
+      this._updateCam = doUpdateCam;
+    }
+  }, {
+    key: "updateWithUnityData",
+    get: function get() {
+      var isNotOutStandingImage = this._outstandingImageCount > 0;
+      if (isNotOutStandingImage) this._outstandingImageCount--;
+      return !isNotOutStandingImage && this._updateCam;
+    }
+  }, {
+    key: "onElementDeleted",
+    value: function onElementDeleted(setId, elementId) {
+      var _this$viewHandler;
+      this.addOutstandingImage();
+      (_this$viewHandler = this.viewHandler) === null || _this$viewHandler === void 0 || _this$viewHandler.viewPlannerHandler.onElementDeleted(setId, elementId);
+      this._updateCam = true;
+    }
+  }, {
+    key: "addOutstandingImage",
+    value: function addOutstandingImage() {
+      this._outstandingImageCount++;
+    }
   }, {
     key: "disableElementRows",
     value: function disableElementRows(element, cache) {
@@ -1899,7 +2030,7 @@ var unregisterContext = function unregisterContext() {
 var registerContext = function registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig) {
   var utilStore = new UtilStore(false, viewHandler);
   var sceneStore = new SceneStore(scene, hqRenderScript, utilStore, apiConfig, jwt, onMissingGeo);
-  var uiStore = new UIStore(scene, utilStore, uiConfig, requestNewOverlayImage, overlayImage);
+  var uiStore = new UIStore(scene, sceneStore.enableSSAO.bind(sceneStore), utilStore, uiConfig, requestNewOverlayImage, overlayImage);
   return _context = {
     utilStore: utilStore,
     sceneStore: sceneStore,
@@ -2676,6 +2807,7 @@ var buildScene = function buildScene(_ref) {
     }
     if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.name) == 'Wohnzimmer') sceneStore.addSet(node, hqsNode);
     if (node !== null && node !== void 0 && node.name.startsWith('Element')) {
+      sceneStore.hasPlanned = true;
       sceneStore.addElement(node, hqsNode);
       curElement = hqsNode;
     }
@@ -2732,7 +2864,6 @@ var buildScene = function buildScene(_ref) {
     }
   }
   recursiveIteration(startNode, parentNode);
-  sceneStore.setCameraTarget();
   sceneStore.cache = cachedAssets;
 };
 
@@ -2881,19 +3012,21 @@ function shadow() {
 var parser = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _changedElements$upda;
-    var sceneStore, hasRendered, hqRenderScript, scene, cache, changedElements, utilStore, _yield$findAssets, cacheGroup, newCache, _changedElements$upda2;
+    var sceneStore, hasRendered, hqRenderScript, scene, cache, changedElements, utilStore, wasPlanned, elementCount, _yield$findAssets, cacheGroup, newCache, _changedElements$upda2;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           sceneStore = useSceneStoreContext();
           hasRendered = sceneStore.hasRendered, hqRenderScript = sceneStore.hqRenderScript, scene = sceneStore.scene, cache = sceneStore.cache, changedElements = sceneStore.changedElements;
-          utilStore = useUtilStoreContext(); //disable elementrows from old cache
+          utilStore = useUtilStoreContext();
+          wasPlanned = sceneStore.hasPlanned;
+          elementCount = sceneStore.elements.length; //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 = 6;
+          _context.next = 8;
           return findAssets(hqRenderScript.assets, cache);
-        case 6:
+        case 8:
           _yield$findAssets = _context.sent;
           cacheGroup = _yield$findAssets.cacheGroup;
           newCache = _yield$findAssets.newCache;
@@ -2901,8 +3034,8 @@ var parser = /*#__PURE__*/function () {
             changedElements.deletedElements.forEach(function (deletedElement) {
               var _scene$getTransformNo;
               (_scene$getTransformNo = scene.getTransformNodeByName(deletedElement.name)) === null || _scene$getTransformNo === void 0 || _scene$getTransformNo.dispose();
+              sceneStore.removeElement(deletedElement);
             });
-            sceneStore.setCameraTarget();
           }
           if (changedElements && changedElements.updatedElements && changedElements.updatedElements.length > 0) {
             (_changedElements$upda2 = changedElements.updatedElements) === null || _changedElements$upda2 === void 0 || _changedElements$upda2.forEach(function (updatedElement) {
@@ -2930,7 +3063,8 @@ var parser = /*#__PURE__*/function () {
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
-        case 13:
+          if (wasPlanned && elementCount != sceneStore.elements.length) sceneStore.focusElement();
+        case 16:
         case "end":
           return _context.stop();
       }
@@ -3015,7 +3149,7 @@ function useRealTimeRenderData (_ref) {
             return _context2.abrupt("return");
           case 2:
             sceneStore.isInitializing = true;
-            actions.toggleLoading('buildScene', false, true);
+            if (!overlayImage) actions.toggleLoading('buildScene', false, true);
             if (sceneStore.hasRendered) {
               _context2.next = 11;
               break;
@@ -3051,7 +3185,7 @@ function useRealTimeRenderData (_ref) {
               break;
             }
             if (elementsInfo) uiStore.initGui(callbacks.onElementSelected, sceneStore.elements, elementsInfo);
-            actions.toggleLoading('buildScene', false, false);
+            if (!overlayImage) actions.toggleLoading('buildScene', false, false);
             sceneStore.isInitializing = false;
             return _context2.abrupt("return");
           case 17:
@@ -3083,13 +3217,13 @@ function useRealTimeRenderData (_ref) {
                 var _callbacks$setGlb;
                 if (res) (_callbacks$setGlb = callbacks.setGlb) === null || _callbacks$setGlb === void 0 || _callbacks$setGlb.call(callbacks, URL.createObjectURL(res.glTFFiles['fileName.glb']));
               });
+            } else {
+              LOG.debug('callbacks.setGlb is undefined');
             }
             if (!sceneStore.hasRendered) {
               sceneStore.scene.getEngine().runRenderLoop(renderLoop);
               sceneStore.hasRendered = true;
             }
-
-            // sceneStore.scene.debugLayer?.show();
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
           case 34:
@@ -3102,9 +3236,10 @@ function useRealTimeRenderData (_ref) {
   }
   function onFirstFrame() {
     var _callbacks$onInitiali2, _sceneStore;
+    // sceneStore.scene.debugLayer!.show();
     sceneStore.isInitializing = false;
     sceneStore.scene.onAfterRenderObservable.removeCallback(onFirstFrame);
-    actions.toggleLoading('buildScene', false, false);
+    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();
   }
@@ -3142,7 +3277,8 @@ function useRealTimeRenderData (_ref) {
               }
               engine = new Engine(gameCanvas.current, true, {
                 antialias: true,
-                stencil: true
+                stencil: false,
+                audioEngine: false
               }, true);
               engine.renderEvenInBackground = renderInBackground;
               engine.disablePerformanceMonitorInBackground = true;
@@ -3168,7 +3304,9 @@ function useRealTimeRenderData (_ref) {
               });
             case 17:
               resize = function resize() {
-                scene.getEngine().resize();
+                if (inBackground || !scene || !scene.getEngine()) return;
+                if (sceneStore.hasPlanned) sceneStore.doRenderControlLoop = true;
+                return scene.getEngine().resize();
               };
               if (window) {
                 window.addEventListener('resize', resize);
@@ -3194,7 +3332,9 @@ function useRealTimeRenderData (_ref) {
     asyncUseEffect();
   }, []);
   useEffect(function () {
+    if (!utilStore.updateWithUnityData) return;
     if (overlayImage && uiStore) uiStore.updateOverlayImage(overlayImage);
+    if (sceneStore && sceneStore.scene.activeCamera) updateCam(sceneStore.hqRenderScript.cams[0], sceneStore.scene);
   }, [overlayImage]);
   useEffect(function () {
     if (inBackground) {
@@ -3432,8 +3572,9 @@ var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
     ref: resolutionDiv,
     style: {
       position: 'absolute',
+      top: '-70px',
       width: '100%',
-      height: '100%',
+      height: 'calc(100% + 70px)',
       backgroundColor: 'white',
       zIndex: 2
     },
@@ -3462,7 +3603,8 @@ var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
     })]
   });
 }, function (prevProps, curProps) {
-  if (prevProps.overlayImage != curProps.overlayImage) return false;
+  var _prevProps$overlayIma, _curProps$overlayImag, _prevProps$overlayIma2, _curProps$overlayImag2;
+  if (((_prevProps$overlayIma = prevProps.overlayImage) === null || _prevProps$overlayIma === void 0 ? void 0 : _prevProps$overlayIma.base64) != ((_curProps$overlayImag = curProps.overlayImage) === null || _curProps$overlayImag === void 0 ? void 0 : _curProps$overlayImag.base64) || ((_prevProps$overlayIma2 = prevProps.overlayImage) === null || _prevProps$overlayIma2 === void 0 ? void 0 : _prevProps$overlayIma2.isStaticBg) != ((_curProps$overlayImag2 = curProps.overlayImage) === null || _curProps$overlayImag2 === void 0 ? void 0 : _curProps$overlayImag2.isStaticBg)) return false;
   if (prevProps.renderjob != curProps.renderjob) return false;
   if (JSON.stringify(prevProps.elementsInfo) != JSON.stringify(curProps.elementsInfo)) return false;
   if (prevProps.inBackground != curProps.inBackground) return false;