@crystaldesign/real-time-viewer 25.9.0-beta.4 → 25.9.0-beta.41

package/build/esm/index.js

@@ -7,9 +7,9 @@ import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Tags } from '@babylonjs/core/Misc/tags';
+import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { Vector3, Matrix, Vector2 } from '@babylonjs/core/Maths/math.vector';
 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 { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
@@ -46,7 +46,7 @@ import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/
 import { EngineFactory } from '@babylonjs/core/Engines/engineFactory';
 import { Scene } from '@babylonjs/core/scene';
 import { DracoCompression } from '@babylonjs/core/Meshes/Compression/dracoCompression';
-import { LoadAssetContainerAsync } from '@babylonjs/core/Loading/';
+import { LoadAssetContainerAsync } from '@babylonjs/core/Loading/index';
 import '@babylonjs/loaders/glTF/2.0/';
 import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera';
 import { jsx } from 'react/jsx-runtime';
@@ -179,7 +179,7 @@ function GetCameraControls(camera) {
         alpha = _calculateAngles.alpha,
         beta = _calculateAngles.beta,
         distance = _calculateAngles.distance;
-      alpha = alpha + deltaX * -0.003;
+      alpha = alpha + deltaX * 0.003;
       beta = clamp(beta + deltaY * -0.003, 0.1, Math.PI / 2);
       var x = sceneStore.cameraTargetPosition.x + distance * Math.sin(beta) * Math.cos(alpha);
       var y = sceneStore.cameraTargetPosition.y + distance * Math.cos(beta);
@@ -303,16 +303,22 @@ function getGridControls(scene, element, selected, elements, selectMesh) {
   var utilStore = useUtilStoreContext();
   var _curGrid = selected;
   var onGridMove = function onGridMove(ev) {
-    var _scene$activeCamera, _scene$getMeshById, _elements$find$bbn$na, _elements$find, _Tags$GetTags;
+    var _scene$activeCamera, _scene$getMeshById$me, _scene$getMeshById, _Tags$GetTags;
     (_scene$activeCamera = scene.activeCamera) === null || _scene$activeCamera === void 0 || _scene$activeCamera.detachControl();
-    var metadata = (_scene$getMeshById = scene.getMeshById(selected.id)) === null || _scene$getMeshById === void 0 ? void 0 : _scene$getMeshById.metadata;
+    var metadata = (_scene$getMeshById$me = (_scene$getMeshById = scene.getMeshById(selected.id)) === null || _scene$getMeshById === void 0 ? void 0 : _scene$getMeshById.metadata) !== null && _scene$getMeshById$me !== void 0 ? _scene$getMeshById$me : selected.metadata;
     if (!metadata) return;
-    var _ref = gridStore.getDataFromGridName(selected.name, metadata.elementId),
-      startShelfIdx = _ref.shelfIdx,
-      startGridIdx = _ref.gridIdx;
-    var actualHQRObj = scene.getTransformNodeByName((_elements$find$bbn$na = (_elements$find = elements.find(function (el) {
-      return el === null || el === void 0 ? void 0 : el.bbn.name.endsWith(metadata.elementId + '.' + startGridIdx + '.' + startShelfIdx);
-    })) === null || _elements$find === void 0 ? void 0 : _elements$find.bbn.name) !== null && _elements$find$bbn$na !== void 0 ? _elements$find$bbn$na : '');
+    var actualHQRObj = undefined;
+    if (metadata.type == 'GRID') {
+      var _elements$find$bbn$na, _elements$find;
+      var _ref = gridStore.getDataFromGridName(selected.name, metadata.elementId),
+        startShelfIdx = _ref.shelfIdx,
+        startGridIdx = _ref.gridIdx;
+      actualHQRObj = scene.getTransformNodeByName((_elements$find$bbn$na = (_elements$find = elements.find(function (el) {
+        return el === null || el === void 0 ? void 0 : el.bbn.name.endsWith(metadata.elementId + '.' + startGridIdx + '.' + startShelfIdx);
+      })) === null || _elements$find === void 0 ? void 0 : _elements$find.bbn.name) !== null && _elements$find$bbn$na !== void 0 ? _elements$find$bbn$na : '');
+    } else if (metadata.type == 'BOX') {
+      actualHQRObj = selected;
+    }
     if (!actualHQRObj) return;
     var mouseX = ev.clientX;
     var mouseY = ev.clientY;
@@ -325,20 +331,27 @@ function getGridControls(scene, element, selected, elements, selectMesh) {
     if (!pickResult.pickedMesh || !((_Tags$GetTags = Tags.GetTags(pickResult.pickedMesh)) !== null && _Tags$GetTags !== void 0 && _Tags$GetTags.includes('free')) && pickResult.pickedMesh.name != selected.name) return;
     var closestGrid = pickResult.pickedMesh;
     if (closestGrid) {
+      var _closestGrid$metadata, _closestGrid$metadata2;
       scene.getMeshesByTags('free').forEach(function (mesh) {
         return mesh.material.alpha = 0.2;
       });
       actualHQRObj.setAbsolutePosition(new Vector3(closestGrid.absolutePosition.x, closestGrid.absolutePosition.y, closestGrid.absolutePosition.z));
-      actualHQRObj.position = actualHQRObj.position.addInPlace(closestGrid.metadata.geoPos);
+      actualHQRObj.position = actualHQRObj.position.addInPlace((_closestGrid$metadata = (_closestGrid$metadata2 = closestGrid.metadata) === null || _closestGrid$metadata2 === void 0 ? void 0 : _closestGrid$metadata2.geoPos) !== null && _closestGrid$metadata !== void 0 ? _closestGrid$metadata : Vector3.Zero());
       actualHQRObj.rotation = new Vector3(closestGrid.rotation.x, closestGrid.rotation.y, closestGrid.rotation.z);
       var size = closestGrid.getBoundingInfo().maximum.subtract(closestGrid.getBoundingInfo().minimum);
-      utilStore.moveObjectInDirection(actualHQRObj, Vector3.Right(), -size.x / 2 + closestGrid.metadata.rulePos.x);
-      utilStore.moveObjectInDirection(actualHQRObj, Vector3.Up(), -size.y / 2 + closestGrid.metadata.rulePos.y);
-      utilStore.moveObjectInDirection(actualHQRObj, Vector3.Forward(), size.z / 2 + closestGrid.metadata.rulePos.z);
+      var moveValue = new Vector3(-size.x / 2, -size.y / 2, size.z / 2);
+      if (metadata.type == 'GRID') {
+        moveValue.x += closestGrid.metadata.rulePos.x;
+        moveValue.y += closestGrid.metadata.rulePos.y;
+        moveValue.z += closestGrid.metadata.rulePos.z;
+      }
+      utilStore.moveObjectInDirection(actualHQRObj, Vector3.Right(), moveValue.x);
+      utilStore.moveObjectInDirection(actualHQRObj, Vector3.Up(), moveValue.y);
+      utilStore.moveObjectInDirection(actualHQRObj, Vector3.Forward(), moveValue.z);
       _curGrid = closestGrid;
     }
   };
-  var register = function register(basketId, gridIdx, shelfIdx, accessoireBasketId) {
+  var registerGrid = function registerGrid(basketId, gridIdx, shelfIdx, accessoireBasketId) {
     var _onGridMoveOut = function onGridMoveOut() {
       var _curGrid2, _curGrid3, _scene$activeCamera2;
       element === null || element === void 0 || element.removeEventListener('pointermove', onGridMove, false);
@@ -356,21 +369,38 @@ function getGridControls(scene, element, selected, elements, selectMesh) {
         var _utilStore$viewHandle;
         (_utilStore$viewHandle = utilStore.viewHandler) === null || _utilStore$viewHandle === void 0 || _utilStore$viewHandle.divaWebPlanner.moveShelfItemToGrid(accessoireBasketId, curBasketId, gridName, curShelfIdx);
       }
-      var tags = Tags.GetTags(_curGrid);
-      selectMesh(_curGrid, curGridIdx, curShelfIdx, curBasketId, tags.includes('disableDelete'), tags.includes('disableMove'));
+      Tags.GetTags(_curGrid);
+      //selectMesh(_curGrid, curGridIdx, curShelfIdx, curBasketId, tags.includes('disableDelete'), tags.includes('disableMove'));
       (_scene$activeCamera2 = scene.activeCamera) === null || _scene$activeCamera2 === void 0 || _scene$activeCamera2.attachControl();
     };
     element === null || element === void 0 || element.addEventListener('pointermove', onGridMove, false);
     element === null || element === void 0 || element.addEventListener('pointerup', _onGridMoveOut, false);
   };
+  var registerBox = function registerBox() {
+    var _onGridMoveOut2 = function onGridMoveOut() {
+      var _scene$activeCamera3, _curGrid4;
+      element === null || element === void 0 || element.removeEventListener('pointermove', onGridMove, false);
+      element === null || element === void 0 || element.removeEventListener('pointerup', _onGridMoveOut2, false);
+      (_scene$activeCamera3 = scene.activeCamera) === null || _scene$activeCamera3 === void 0 || _scene$activeCamera3.attachControl();
+      _curGrid = scene.getMeshByName((_curGrid4 = _curGrid) === null || _curGrid4 === void 0 ? void 0 : _curGrid4.name);
+      if (!_curGrid) return;
+      /* Wait for dedicated function this only works when moved to nearby grid where copy works 
+      utilStore.onElementDeleted(_curGrid.metadata.setId, _curGrid.metadata.elementId)
+      utilStore.viewHandler?.viewPlannerHandler.onElementCopy(_curGrid.metadata.setId, _curGrid.metadata.elementId, _curGrid.metadata.direction);
+      */
+    };
+    element === null || element === void 0 || element.addEventListener('pointermove', onGridMove, false);
+    element === null || element === void 0 || element.addEventListener('pointerup', _onGridMoveOut2, false);
+  };
   return {
-    register: register
+    registerGrid: registerGrid,
+    registerBox: registerBox
   };
 }
 
-function _createForOfIteratorHelper$8(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$8(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$8(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$8(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$8(r, a) : void 0; } }
-function _arrayLikeToArray$8(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 _createForOfIteratorHelper$9(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$9(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$9(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$9(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$9(r, a) : void 0; } }
+function _arrayLikeToArray$9(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 Grids () {
   var utilStore = useUtilStoreContext();
   var sceneStore = useSceneStoreContext();
@@ -380,6 +410,41 @@ function Grids () {
     sceneStore.scene.getMeshesByTags('grid').forEach(function (m) {
       return m.dispose();
     });
+    sceneStore.scene.getMeshesByTags('box').forEach(function (m) {
+      return m.dispose();
+    });
+  }
+  function setupPreviewBoxs(generalPlanningState) {
+    var entries = Object.entries(generalPlanningState);
+    entries.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        gp = _ref2[1];
+      gp.grids.forEach(function (grid) {
+        grid.matrix.forEach(function (c) {
+          c.forEach(function (cell) {
+            var _cell$plannedElement$, _cell$plannedElement, _cell$plannedElement$2, _cell$plannedElement2, _gp$selectedElement;
+            if (!gp.selectedElement && !cell.plannedElement) return; // no selection=no planning; can only delete existing 
+            var name = 'box_' + cell.index.x + '_' + cell.index.y;
+            var size = (_cell$plannedElement$ = (_cell$plannedElement = cell.plannedElement) === null || _cell$plannedElement === void 0 ? void 0 : _cell$plannedElement.size) !== null && _cell$plannedElement$ !== void 0 ? _cell$plannedElement$ : gp.selectedElement.size;
+            var pos = new Vector3(-(size.width * cell.index.x) / 100, (size.height * cell.index.y + size.height / 2) / 100, (-size.depth + size.depth / 2) / 100);
+            createPreviewBox('box', name, {
+              width: size.width / 100,
+              height: size.height / 100,
+              depth: size.depth / 100
+            }, pos, 0, true, true, undefined, {
+              elementId: (_cell$plannedElement$2 = (_cell$plannedElement2 = cell.plannedElement) === null || _cell$plannedElement2 === void 0 ? void 0 : _cell$plannedElement2.elementId) !== null && _cell$plannedElement$2 !== void 0 ? _cell$plannedElement$2 : (_gp$selectedElement = gp.selectedElement) === null || _gp$selectedElement === void 0 ? void 0 : _gp$selectedElement.elementId,
+              setId: key,
+              direction: 'LEFT',
+              type: 'BOX'
+            });
+          });
+        });
+        if (grid.overlapping) {
+          console.warn("overlapping logic is not yet implemented");
+        }
+      });
+    });
   }
   function setupPreviewGrids(allGrids, plannedPlacesOnGrids, freePlacesOnGrids) {
     deleteAllGrids();
@@ -439,7 +504,7 @@ function Grids () {
           var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
             gridName = _Object$entries2$_i[0];
             _Object$entries2$_i[1];
-          var _iterator = _createForOfIteratorHelper$8(plannedPlaceOnGrid.grids[gridName].accessories),
+          var _iterator = _createForOfIteratorHelper$9(plannedPlaceOnGrid.grids[gridName].accessories),
             _step;
           try {
             var _loop4 = function _loop4() {
@@ -491,7 +556,7 @@ function Grids () {
     }
   }
   function createGrid(data, elementId, shelfIdx, gridIdx, isFree, noDelete, noMove, articleCodex) {
-    var _sceneStore$elements, _sceneStore$scene$get;
+    var _sceneStore$elements;
     var grid = data.grid;
     var elementName = (_sceneStore$elements = sceneStore.elements) === null || _sceneStore$elements === void 0 || (_sceneStore$elements = _sceneStore$elements.find(function (el) {
       return el.bbn.name.endsWith(elementId);
@@ -499,28 +564,42 @@ function Grids () {
     if (!elementName) return;
     var element = sceneStore.scene.getTransformNodeByName(elementName);
     if (!element) return;
-    var box = MeshBuilder.CreateBox(elementId + '.' + gridIdx + '.' + shelfIdx + '.' + grid.gridName, {
+    var box = createPreviewBox('grid', elementId + '.' + gridIdx + '.' + shelfIdx + '.' + grid.gridName, {
       width: data.bboxSize.x / 100,
       height: data.bboxSize.y / 100,
       depth: data.bboxSize.z / 100
-    }, sceneStore.scene);
-    box.parent = element;
-    box.isPickable = true;
-    box.position = new Vector3(-grid.originPosition.x / 100, grid.originPosition.y / 100, -grid.originPosition.z / 100);
-    if (grid.rotation) box.rotation.y = grid.rotation * Math.PI / 180;
-    box.metadata = {
+    }, new Vector3(-grid.originPosition.x / 100, grid.originPosition.y / 100, -grid.originPosition.z / 100), grid.rotation, isFree, noMove, element, {
       elementId: elementId,
       rulePos: {
         x: data.rulePosition.x / 100,
         y: data.rulePosition.y / 100,
         z: data.rulePosition.z / 100
       },
-      geoPos: new Vector3(data.geoPosition.x / 100, data.geoPosition.y / 100, data.geoPosition.z / 100)
-    };
+      geoPos: new Vector3(data.geoPosition.x / 100, data.geoPosition.y / 100, data.geoPosition.z / 100),
+      type: 'GRID'
+    });
     var bboxDiff = data.bboxSize.subtract(data.geoSize);
     utilStore.moveObjectInDirection(box, new Vector3(1, 0, 0), (shelfIdx * -grid.deltaGrid.x - data.geoPosition.x) / 100 + (data.geoSize.x + bboxDiff.x) / 200 - box.metadata.rulePos.x);
     utilStore.moveObjectInDirection(box, new Vector3(0, 1, 0), (shelfIdx * grid.deltaGrid.y + data.geoPosition.y) / 100 + (data.geoSize.y + bboxDiff.y) / 200 - box.metadata.rulePos.y);
     utilStore.moveObjectInDirection(box, new Vector3(0, 0, 1), (shelfIdx * grid.deltaGrid.z - data.geoPosition.z) / 100 - (data.geoSize.z + bboxDiff.z) / 200 - box.metadata.rulePos.z);
+    Tags.AddTagsTo(box, noDelete ? 'disableDelete' : 'allowDelete');
+    Tags.AddTagsTo(box, 'ac:' + articleCodex);
+    if (gridStore.selectedGrid && box.name == gridStore.selectedGrid.name && utilStore.viewHandler && Tags.GetTags(gridStore.selectedGrid).includes('ac:' + articleCodex)) {
+      var _gridStore$plannedPla;
+      var basketId = (_gridStore$plannedPla = gridStore.plannedPlacesOnGrids) === null || _gridStore$plannedPla === void 0 || (_gridStore$plannedPla = _gridStore$plannedPla.find(function (plannedPlacesOnGrid) {
+        return plannedPlacesOnGrid.elementId == elementId;
+      })) === null || _gridStore$plannedPla === void 0 ? void 0 : _gridStore$plannedPla.basketId;
+      if (basketId) gridStore.selectGrid(box, gridIdx, shelfIdx, basketId, noDelete, noMove);
+    }
+  }
+  function createPreviewBox(type, name, size, position, rotationY, isFree, noMove, parent, metadata) {
+    var _sceneStore$scene$get, _sceneStore$scene$get3;
+    var box = MeshBuilder.CreateBox(name, size, sceneStore.scene);
+    box.parent = parent;
+    box.isPickable = true;
+    box.position = position;
+    if (rotationY) box.rotation.y = rotationY * Math.PI / 180;
+    box.metadata = metadata;
     box.material = (_sceneStore$scene$get = sceneStore.scene.getMaterialByName('grid_visible')) !== null && _sceneStore$scene$get !== void 0 ? _sceneStore$scene$get : new PBRMaterial('grid_visible', sceneStore.scene);
     box.material.alpha = 0.6;
     if (!isFree) {
@@ -533,26 +612,21 @@ function Grids () {
     box.edgesColor = new Color4(0.15, 0.15, 0.3, 1);
     box.material.environmentIntensity = 0;
     box.material.emissiveColor = new Color3(0.5, 0.5, 0.5);
-    Tags.AddTagsTo(box, 'grid');
-    Tags.AddTagsTo(box, isFree ? 'free' : 'planned');
-    Tags.AddTagsTo(box, noDelete ? 'disableDelete' : 'allowDelete');
-    Tags.AddTagsTo(box, noMove ? 'disableMove' : 'allowMove');
-    Tags.AddTagsTo(box, 'ac:' + articleCodex);
+    box.material = (_sceneStore$scene$get3 = sceneStore.scene.getMaterialByName('grid_visible')) !== null && _sceneStore$scene$get3 !== void 0 ? _sceneStore$scene$get3 : new PBRMaterial('grid_visible', sceneStore.scene);
+    box.material.alpha = 0.6;
+    if (!isFree) {
+      var _sceneStore$scene$get4;
+      box.material = (_sceneStore$scene$get4 = sceneStore.scene.getMaterialByName('grid_invisible')) !== null && _sceneStore$scene$get4 !== void 0 ? _sceneStore$scene$get4 : new PBRMaterial('grid_invisible', sceneStore.scene);
+      box.material.alpha = 0;
+    }
+
     // the actionmanager can't use the bbox, therefore need to fake it https://forum.babylonjs.com/t/action-manager-pointer-trigger-with-bounding-box/43891
     var fakeBBox = MeshBuilder.CreateBox('binfo_' + box.name, {
-      width: data.bboxSize.x / 99,
-      height: data.bboxSize.y / 99,
-      depth: data.bboxSize.z / 99
+      width: size.width * 1.01,
+      height: size.height * 1.01,
+      depth: size.depth * 1.01
     }, sceneStore.scene);
-    fakeBBox.metadata = {
-      elementId: elementId,
-      rulePos: {
-        x: data.rulePosition.x / 100,
-        y: data.rulePosition.y / 100,
-        z: data.rulePosition.z / 100
-      },
-      geoPos: new Vector3(data.geoPosition.x / 100, data.geoPosition.y / 100, data.geoPosition.z / 100)
-    };
+    fakeBBox.metadata = metadata;
     fakeBBox.parent = box;
     fakeBBox.position = Vector3.Zero();
     fakeBBox.isPickable = true;
@@ -565,7 +639,7 @@ function Grids () {
       return box.edgesWidth = 0.5;
     }));
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPickTrigger, function () {
-      return onGridClick(gridStore.getSelectedGrid());
+      return onPreviewClick(gridStore.getSelectedGrid());
     }));
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPickDownTrigger, function () {
       return gridStore.selectedGrid == gridStore.getSelectedGrid() && noMove == false && gridStore.onGridMove(gridStore.getSelectedGrid());
@@ -573,29 +647,33 @@ function Grids () {
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function () {
       return box.edgesWidth = 0.2;
     }));
-    if (gridStore.selectedGrid && box.name == gridStore.selectedGrid.name && utilStore.viewHandler && Tags.GetTags(gridStore.selectedGrid).includes('ac:' + articleCodex)) {
-      var _gridStore$plannedPla;
-      var basketId = (_gridStore$plannedPla = gridStore.plannedPlacesOnGrids) === null || _gridStore$plannedPla === void 0 || (_gridStore$plannedPla = _gridStore$plannedPla.find(function (plannedPlacesOnGrid) {
-        return plannedPlacesOnGrid.elementId == elementId;
-      })) === null || _gridStore$plannedPla === void 0 ? void 0 : _gridStore$plannedPla.basketId;
-      if (basketId) gridStore.selectGrid(box, gridIdx, shelfIdx, basketId, noDelete, noMove);
-    }
+    Tags.AddTagsTo(box, type);
+    Tags.AddTagsTo(box, isFree ? 'free' : 'planned');
+    Tags.AddTagsTo(box, noMove ? 'disableMove' : 'allowMove');
+    return box;
+  }
+  function onPreviewClick(mesh) {
+    var tag = Tags.GetTags(mesh);
+    if (tag.includes('grid')) onGridClick(tag, mesh);else if (tag.includes('box')) onBoxClick(tag, mesh);
   }
-  function onGridClick(mesh) {
+  function onBoxClick(tag, mesh) {
+    var _utilStore$viewHandle;
+    (_utilStore$viewHandle = utilStore.viewHandler) === null || _utilStore$viewHandle === void 0 || _utilStore$viewHandle.viewPlannerHandler.onElementCopy(mesh.metadata.setId, mesh.metadata.elementId, mesh.metadata.direction);
+  }
+  function onGridClick(tag, mesh) {
     var _gridStore$selectedGr;
     if (!utilStore.viewHandler) return;
-    var tag = Tags.GetTags(mesh);
-    var _ref = gridStore.getDataFromGridName(mesh.name, mesh.metadata.elementId),
-      basketId = _ref.parentBasketId,
-      gridIdx = _ref.gridIdx,
-      shelfIdx = _ref.shelfIdx;
+    var _ref3 = gridStore.getDataFromGridName(mesh.name, mesh.metadata.elementId),
+      basketId = _ref3.parentBasketId,
+      gridIdx = _ref3.gridIdx,
+      shelfIdx = _ref3.shelfIdx;
     var plannedPlace = _plannedPlaceOnGrids.find(function (plannedPlace) {
       return plannedPlace.elementId == mesh.metadata.elementId;
     });
-    var grid = Object.entries(plannedPlace.grids).find(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2);
-        _ref3[0];
-        var grid = _ref3[1];
+    var grid = Object.entries(plannedPlace.grids).find(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2);
+        _ref5[0];
+        var grid = _ref5[1];
       return grid.idx == gridIdx;
     })[1];
     var accessorie = grid.accessories.find(function (accessorie) {
@@ -608,21 +686,25 @@ function Grids () {
       utilStore.viewHandler.paletteViewHandler.selectShelfAccessorie(accessorie === null || accessorie === void 0 ? void 0 : accessorie.articleCodex, accessorie === null || accessorie === void 0 ? void 0 : accessorie.basketId);
       gridStore.selectGrid(mesh, gridIdx, shelfIdx, basketId, tag.includes('disableDelete'), tag.includes('disableMove'));
     }
-    return;
   }
   return {
+    setupPreviewBoxs: setupPreviewBoxs,
     setupPreviewGrids: setupPreviewGrids,
-    onGridClick: onGridClick,
+    onPreviewClick: onPreviewClick,
     deleteAllGrids: deleteAllGrids
   };
 }
 
+function _createForOfIteratorHelper$8(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$8(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$8(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$8(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$8(r, a) : void 0; } }
+function _arrayLikeToArray$8(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
 */
 var GridStore = /*#__PURE__*/function () {
-  function GridStore(sceneStore, uiStore, viewHandler) {
+  function GridStore(sceneStore, uiStore, type, viewHandler) {
     _classCallCheck(this, GridStore);
     _defineProperty(this, "_gridControls", undefined);
     _defineProperty(this, "_allGrids", void 0);
@@ -634,9 +716,14 @@ var GridStore = /*#__PURE__*/function () {
     _defineProperty(this, "_viewHandler", void 0);
     _defineProperty(this, "_selectedGrid", void 0);
     _defineProperty(this, "_uiStore", void 0);
+    _defineProperty(this, "_type", void 0);
+    _defineProperty(this, "_plannerInteractionInformation", void 0);
+    _defineProperty(this, "_generalPlanningState", void 0);
+    _defineProperty(this, "_elementsInfos", void 0);
     this._sceneStore = sceneStore;
     this._viewHandler = viewHandler;
     this._uiStore = uiStore;
+    this._type = type !== null && type !== void 0 ? type : '3DCOMB';
   }
   return _createClass(GridStore, [{
     key: "plannedPlacesOnGrids",
@@ -656,25 +743,33 @@ var GridStore = /*#__PURE__*/function () {
   }, {
     key: "getSelectedGrid",
     value: function getSelectedGrid() {
-      var pickInfo = this._sceneStore.scene.multiPick(this._sceneStore.scene.pointerX, this._sceneStore.scene.pointerY);
+      var _this$_sceneStore$sce;
+      var pickInfo = (_this$_sceneStore$sce = this._sceneStore.scene.multiPick(this._sceneStore.scene.pointerX, this._sceneStore.scene.pointerY)) === null || _this$_sceneStore$sce === void 0 ? void 0 : _this$_sceneStore$sce.filter(function (p) {
+        return p !== undefined;
+      });
       var pickedGrids = pickInfo === null || pickInfo === void 0 ? void 0 : pickInfo.filter(function (pick) {
-        var _Tags$GetTags;
-        return (_Tags$GetTags = Tags.GetTags(pick.pickedMesh)) === null || _Tags$GetTags === void 0 ? void 0 : _Tags$GetTags.includes('grid');
+        var _Tags$GetTags, _Tags$GetTags2;
+        return ((_Tags$GetTags = Tags.GetTags(pick.pickedMesh)) === null || _Tags$GetTags === void 0 ? void 0 : _Tags$GetTags.includes('grid')) || ((_Tags$GetTags2 = Tags.GetTags(pick.pickedMesh)) === null || _Tags$GetTags2 === void 0 ? void 0 : _Tags$GetTags2.includes('box'));
       });
       return pickedGrids[pickedGrids.length - 1].pickedMesh;
     }
   }, {
     key: "onGridMove",
     value: function onGridMove(box) {
-      var _ref = this.getDataFromGridName(box.name, box.metadata.elementId),
-        accessoireBasketId = _ref.accessoireBasketId,
-        parentBasketId = _ref.parentBasketId,
-        gridIdx = _ref.gridIdx,
-        shelfIdx = _ref.shelfIdx,
-        gridName = _ref.gridName;
-      this.getMoveGrids(gridName, accessoireBasketId);
-      this._gridControls = getGridControls(this._sceneStore.scene, this._sceneStore.scene.getEngine().getRenderingCanvas(), this._sceneStore.scene.getMeshByName(box.name), this._sceneStore.elements, this.selectGrid.bind(this));
-      this._gridControls.register(parentBasketId, gridIdx, shelfIdx, accessoireBasketId);
+      if (this._type == 'RTViewer') {
+        var _ref = this.getDataFromGridName(box.name, box.metadata.elementId),
+          accessoireBasketId = _ref.accessoireBasketId,
+          parentBasketId = _ref.parentBasketId,
+          gridIdx = _ref.gridIdx,
+          shelfIdx = _ref.shelfIdx,
+          gridName = _ref.gridName;
+        this.getMoveGrids(gridName, accessoireBasketId);
+        this._gridControls = getGridControls(this._sceneStore.scene, this._sceneStore.scene.getEngine().getRenderingCanvas(), this._sceneStore.scene.getMeshByName(box.name), this._sceneStore.elements, this.selectGrid.bind(this));
+        this._gridControls.registerGrid(parentBasketId, gridIdx, shelfIdx, accessoireBasketId);
+      } else if (this._type == 'BoxPlanner') {
+        this._gridControls = getGridControls(this._sceneStore.scene, this._sceneStore.scene.getEngine().getRenderingCanvas(), this._sceneStore.scene.getTransformNodeByName(box.name), this._sceneStore.elements, this.selectGrid.bind(this));
+        this._gridControls.registerBox();
+      }
     }
   }, {
     key: "selectGrid",
@@ -696,20 +791,22 @@ var GridStore = /*#__PURE__*/function () {
     key: "getMoveGrids",
     value: function () {
       var _getMoveGrids = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(gridName, basketId) {
-        var _this$_viewHandler;
-        var fp;
+        var freePlaces, _this$_viewHandler;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              fp = (_this$_viewHandler = this._viewHandler) === null || _this$_viewHandler === void 0 ? void 0 : _this$_viewHandler.divaWebPlanner.getFreeToMovePlacesOnGrids(gridName, basketId);
-              if (!(!fp || !this._plannedPlacesOnGrids)) {
-                _context.next = 3;
+              freePlaces = [];
+              if (this._type == 'RTViewer') {
+                freePlaces = (_this$_viewHandler = this._viewHandler) === null || _this$_viewHandler === void 0 ? void 0 : _this$_viewHandler.divaWebPlanner.getFreeToMovePlacesOnGrids(gridName, basketId);
+              }
+              if (!(!freePlaces || !this._plannedPlacesOnGrids)) {
+                _context.next = 4;
                 break;
               }
               return _context.abrupt("return");
-            case 3:
-              this.getGrids(fp, this._plannedPlacesOnGrids, true, true);
             case 4:
+              this.getGrids(freePlaces, this._plannedPlacesOnGrids, true, true);
+            case 5:
             case "end":
               return _context.stop();
           }
@@ -755,33 +852,56 @@ var GridStore = /*#__PURE__*/function () {
       });
       return res;
     }
+  }, {
+    key: "getGrids1",
+    value: function () {
+      var _getGrids = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(generalPlanningState, callback) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this._generalPlanningState = generalPlanningState;
+              if (!this._grid) this._grid = Grids();
+              this._grid.deleteAllGrids();
+              this._grid.setupPreviewBoxs(generalPlanningState);
+              callback();
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function getGrids1(_x3, _x4) {
+        return _getGrids.apply(this, arguments);
+      }
+      return getGrids1;
+    }()
   }, {
     key: "getGrids",
     value: function () {
-      var _getGrids = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(freePlacesOnGrids, plannedPlacesOnGrids, doNotRelod, doNotOverwrite) {
+      var _getGrids2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(freePlacesOnGrids, plannedPlacesOnGrids, doNotRelod, doNotOverwrite) {
         var _this$_viewHandler3, _this$_viewHandler4;
         var _this$_sceneStore$api, res;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               if (!this._grid) this._grid = Grids();
               if (!(!((_this$_viewHandler3 = this._viewHandler) !== null && _this$_viewHandler3 !== void 0 && _this$_viewHandler3.tabgroupTypeActive('SHELFPLANNER')) || !freePlacesOnGrids && !plannedPlacesOnGrids)) {
-                _context2.next = 5;
+                _context3.next = 5;
                 break;
               }
               this._grid.deleteAllGrids();
               this._uiStore.removeGridGui();
-              return _context2.abrupt("return");
+              return _context3.abrupt("return");
             case 5:
               if (!(!doNotRelod && plannedPlacesOnGrids && JSON.stringify(plannedPlacesOnGrids[0].plannedOptions) != JSON.stringify(this._plannedOptions))) {
-                _context2.next = 15;
+                _context3.next = 15;
                 break;
               }
               this._plannedOptions = this._buildPlannedOptions(plannedPlacesOnGrids);
               plannedPlacesOnGrids.forEach(function (pP) {
                 return pP.shelf3DName;
               });
-              _context2.next = 10;
+              _context3.next = 10;
               return fetch(((_this$_sceneStore$api = this._sceneStore.apiConfig) === null || _this$_sceneStore$api === void 0 ? void 0 : _this$_sceneStore$api.constructorService) + '/articles/grids/all?catalogCodex=' + plannedPlacesOnGrids[0].catalogCodex + '&catalogILN=' + plannedPlacesOnGrids[0].iln + '&debug=' + !!this._sceneStore.apiConfig.useDebugUrl, {
                 headers: {
                   Authorization: "Bearer ".concat(this._sceneStore.jwt),
@@ -794,40 +914,40 @@ var GridStore = /*#__PURE__*/function () {
                 })
               });
             case 10:
-              res = _context2.sent;
+              res = _context3.sent;
               this._plannedOptions = this._buildPlannedOptions(plannedPlacesOnGrids);
-              _context2.next = 14;
+              _context3.next = 14;
               return res.json();
             case 14:
-              this._allGrids = _context2.sent;
+              this._allGrids = _context3.sent;
             case 15:
               if (this._allGrids) {
-                _context2.next = 17;
+                _context3.next = 17;
                 break;
               }
-              return _context2.abrupt("return");
+              return _context3.abrupt("return");
             case 17:
               if (!(!((_this$_viewHandler4 = this._viewHandler) !== null && _this$_viewHandler4 !== void 0 && _this$_viewHandler4.tabgroupTypeActive('SHELFPLANNER')) || !freePlacesOnGrids && !plannedPlacesOnGrids)) {
-                _context2.next = 21;
+                _context3.next = 21;
                 break;
               }
               this._grid.deleteAllGrids();
               this._uiStore.removeGridGui();
-              return _context2.abrupt("return");
+              return _context3.abrupt("return");
             case 21:
-              this._grid.setupPreviewGrids(this._allGrids, plannedPlacesOnGrids, freePlacesOnGrids);
+              if (plannedPlacesOnGrids) this._grid.setupPreviewGrids(this._allGrids, plannedPlacesOnGrids, freePlacesOnGrids);
               if (!doNotOverwrite) {
                 this._freePlacesOnGrids = freePlacesOnGrids;
                 this._plannedPlacesOnGrids = plannedPlacesOnGrids;
               }
             case 23:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
-      function getGrids(_x3, _x4, _x5, _x6) {
-        return _getGrids.apply(this, arguments);
+      function getGrids(_x5, _x6, _x7, _x8) {
+        return _getGrids2.apply(this, arguments);
       }
       return getGrids;
     }()
@@ -858,6 +978,58 @@ var GridStore = /*#__PURE__*/function () {
         gridName: gridName
       };
     }
+  }, {
+    key: "setupElementMove",
+    value: function setupElementMove(elementNames, moveObjectInDirection) {
+      var _this2 = this;
+      if (this._type != 'BoxPlanner') return;
+      var _iterator = _createForOfIteratorHelper$8(elementNames),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var element = _step.value;
+          var node = _this2._sceneStore.scene.getTransformNodeByName(element);
+          if (!node) return 1; // continue
+          var bbox = node.getHierarchyBoundingVectors();
+          var width = bbox.max.x - bbox.min.x;
+          var height = bbox.max.y - bbox.min.y;
+          var depth = bbox.max.y - bbox.min.y;
+          var fakeBBox = MeshBuilder.CreateBox('element_bbox_' + node.name, {
+            width: width * 1.01,
+            height: height * 1.01,
+            depth: depth * 1.01
+          }, _this2._sceneStore.scene);
+          fakeBBox.parent = node;
+          fakeBBox.position = Vector3.Zero();
+          fakeBBox.isPickable = true;
+          fakeBBox.setEnabled(true);
+          fakeBBox.isVisible = false;
+          fakeBBox.enablePointerMoveEvents = true;
+          fakeBBox.actionManager = new ActionManager(_this2._sceneStore.scene);
+          fakeBBox.actionManager.hoverCursor = 'pointer';
+          fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPickDownTrigger, function () {
+            return _this2.onGridMove(node);
+          }));
+          Tags.AddTagsTo(node, 'grid');
+          Tags.AddTagsTo(node, 'free');
+          Tags.AddTagsTo(node, 'allowMove');
+          node.metadata = {
+            elementId: node.name,
+            type: 'BOX'
+          };
+          moveObjectInDirection(fakeBBox, Vector3.Right(), width / 2);
+          moveObjectInDirection(fakeBBox, Vector3.Up(), height / 2);
+          moveObjectInDirection(fakeBBox, Vector3.Forward(), -depth / 2);
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          if (_loop()) continue;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
   }]);
 }();
 
@@ -902,9 +1074,9 @@ function shadow() {
     var lightl = new DirectionalLight('dirb', new Vector3(0, 0, 1), scene);
     var topLight = new DirectionalLight('dirt', new Vector3(0, -1, 0), scene);
     lightl.intensity = .5;
-    lightf.intensity = 2;
+    lightf.intensity = 1;
     light.intensity = 1;
-    topLight.intensity = 1.5;
+    topLight.intensity = 1;
     lightl.range = 5;
     lightl.falloffType = 1;
     topLight.range = 5;
@@ -1354,7 +1526,7 @@ var SceneStore = /*#__PURE__*/function () {
     key: "runRenderLoop",
     value: function runRenderLoop() {
       var engine = this._scene.getEngine();
-      if (this && engine.activeRenderLoops.length != 0) return;
+      if (!this._scene || !this._scene.activeCamera || engine.activeRenderLoops.length != 0) return;
       engine.runRenderLoop(this.renderLoop.bind(this));
     }
   }, {
@@ -1509,42 +1681,52 @@ var SceneStore = /*#__PURE__*/function () {
   }, {
     key: "exportScene",
     value: function () {
-      var _exportScene = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var res;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _exportScene = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(setGlb) {
+        var _this3 = this;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!this._cancelSceneExport) {
-                _context.next = 2;
+                _context2.next = 2;
                 break;
               }
-              return _context.abrupt("return", new Promise(function () {
-                return undefined;
-              }));
+              return _context2.abrupt("return");
             case 2:
-              _context.next = 4;
-              return GLTF2Export.GLBAsync(this._scene, 'fileName', {
-                shouldExportNode: this.shouldExport.bind(this),
-                exportUnusedUVs: false,
-                exportWithoutWaitingForScene: false,
-                removeNoopRootNodes: false,
-                shouldExportAnimation: function shouldExportAnimation() {
-                  return false;
-                },
-                metadataSelector: function metadataSelector() {
-                  return false;
-                }
-              });
+              this._scene.render();
+              this._scene.executeWhenReady(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                var res;
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      _context.next = 2;
+                      return GLTF2Export.GLBAsync(_this3._scene, 'fileName', {
+                        shouldExportNode: _this3.shouldExport.bind(_this3),
+                        exportUnusedUVs: false,
+                        exportWithoutWaitingForScene: false,
+                        removeNoopRootNodes: false,
+                        shouldExportAnimation: function shouldExportAnimation() {
+                          return false;
+                        },
+                        metadataSelector: function metadataSelector() {
+                          return false;
+                        }
+                      });
+                    case 2:
+                      res = _context.sent;
+                      setGlb(res.files['fileName.glb']);
+                    case 4:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              })));
             case 4:
-              res = _context.sent;
-              return _context.abrupt("return", res);
-            case 6:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
-      function exportScene() {
+      function exportScene(_x) {
         return _exportScene.apply(this, arguments);
       }
       return exportScene;
@@ -1719,7 +1901,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, runRenderLoopForTime, tabgroupTypeActive, isMobile) {
+  function UIStore(scene, enableSSAO, _utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy, runRenderLoopForTime, tabgroupTypeActive, isMobile, getPlannerInteractionInformation) {
     var _this = this,
       _overlayImage$base;
     _classCallCheck(this, UIStore);
@@ -1754,6 +1936,7 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "_tabgroupTypeActive", void 0);
     _defineProperty(this, "_isMobile", void 0);
     _defineProperty(this, "_guiIsPicked", void 0);
+    _defineProperty(this, "_getPlannerInteractionInformation", 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;
@@ -1764,9 +1947,8 @@ var UIStore = /*#__PURE__*/function () {
         // no highlightlayer on static room bg
         _this.deactivateHighlightLayer();
         _this._plane.setEnabled(true);
-      } else
-        // never switch to rtv when in room
-        _this._plane.setEnabled(false);
+      } // never switch to rtv when in room
+      else _this._plane.setEnabled(false);
       _this.resize();
       _this._diffuseTexture.updateURL(overlayImage.base64, undefined, function () {
         return _this.fadeInOverlayImage(_this._plane.visibility == 1 || !!_this._isStaticBg);
@@ -1776,23 +1958,24 @@ var UIStore = /*#__PURE__*/function () {
     this._tabgroupTypeActive = tabgroupTypeActive;
     this._isMobile = window.innerWidth < 768; // == is phone for now
     this._guiIsPicked = false;
+    this._getPlannerInteractionInformation = getPlannerInteractionInformation;
 
     // Define shader
-    Effect.ShadersStore["customVertexShader"] = "\n      precision highp float;\n\n      attribute vec3 position;\n      attribute vec2 uv;\n\n      uniform mat4 worldViewProjection;\n\n      varying vec2 vUV;\n\n      void main(void) {\n        gl_Position = worldViewProjection * vec4(position, 1.0);\n        vUV = uv;\n      }\n    ";
-    Effect.ShadersStore["customFragmentShader"] = "\n      precision highp float;\n\n      varying vec2 vUV;\n\n      uniform sampler2D textureSampler;\n      uniform vec2 scale;\n      uniform float visibility;\n\n      void main(void) {\n        vec2 center = vec2(0.5, 0.5);\n        vec2 halfScale = scale * 0.5;\n        vec2 minUV = center - halfScale;\n        vec2 maxUV = center + halfScale;\n\n        // Always sample the texture\n        vec2 localUV = (vUV - minUV) / scale;\n        vec4 texColor = texture2D(textureSampler, localUV);\n\n        // Calculate mask: 1.0 inside, 0.0 outside\n        float inside = step(minUV.x, vUV.x) * step(vUV.x, maxUV.x)\n          * step(minUV.y, vUV.y) * step(vUV.y, maxUV.y);\n\n        // Mix texture and white\n        vec4 finalColor = mix(vec4(1.0), texColor, inside);\n        gl_FragColor = finalColor;\n        gl_FragColor.a *= visibility;\n      }\n    ";
+    Effect.ShadersStore['customVertexShader'] = "\n      precision highp float;\n\n      attribute vec3 position;\n      attribute vec2 uv;\n\n      uniform mat4 worldViewProjection;\n\n      varying vec2 vUV;\n\n      void main(void) {\n        gl_Position = worldViewProjection * vec4(position, 1.0);\n        vUV = uv;\n      }\n    ";
+    Effect.ShadersStore['customFragmentShader'] = "\n      precision highp float;\n\n      varying vec2 vUV;\n\n      uniform sampler2D textureSampler;\n      uniform vec2 scale;\n      uniform float visibility;\n\n      void main(void) {\n        vec2 center = vec2(0.5, 0.5);\n        vec2 halfScale = scale * 0.5;\n        vec2 minUV = center - halfScale;\n        vec2 maxUV = center + halfScale;\n\n        // Always sample the texture\n        vec2 localUV = (vUV - minUV) / scale;\n        vec4 texColor = texture2D(textureSampler, localUV);\n\n        // Calculate mask: 1.0 inside, 0.0 outside\n        float inside = step(minUV.x, vUV.x) * step(vUV.x, maxUV.x)\n          * step(minUV.y, vUV.y) * step(vUV.y, maxUV.y);\n\n        // Mix texture and white\n        vec4 finalColor = mix(vec4(1.0), texColor, inside);\n        gl_FragColor = finalColor;\n        gl_FragColor.a *= visibility;\n      }\n    ";
 
     // Create material
-    var shaderMat = new ShaderMaterial("shader", scene, {
-      vertex: "custom",
-      fragment: "custom"
+    var shaderMat = new ShaderMaterial('shader', scene, {
+      vertex: 'custom',
+      fragment: 'custom'
     }, {
-      attributes: ["position", "uv"],
-      uniforms: ["worldViewProjection", "scale", "visibility"],
-      samplers: ["textureSampler"]
+      attributes: ['position', 'uv'],
+      uniforms: ['worldViewProjection', 'scale', 'visibility'],
+      samplers: ['textureSampler']
     });
     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);
-    shaderMat.setTexture("textureSampler", this._diffuseTexture);
-    shaderMat.setVector2("scale", new Vector2(1, 1)); // adjust scale here
+    shaderMat.setTexture('textureSampler', this._diffuseTexture);
+    shaderMat.setVector2('scale', new Vector2(1, 1)); // adjust scale here
     shaderMat.alpha = 1;
     shaderMat.backFaceCulling = true;
 
@@ -1806,7 +1989,8 @@ var UIStore = /*#__PURE__*/function () {
     this._shaderMat = shaderMat;
 
     // Position it in front of the camera
-    this._plane.position.z = 0.11;
+    this._plane.position.z = -0.11;
+    this._plane.rotation.y = 180 * Math.PI / 180;
     this._plane.isPickable = false;
     this._plane.parent = scene.activeCamera;
     this._selectedHl = new HighlightLayer('hl', this._scene);
@@ -1826,7 +2010,8 @@ var UIStore = /*#__PURE__*/function () {
       templateConfig: 'standard',
       posNumIcon: 'TOP_LEFT_BACK',
       posTrashIcon: 'POSNUM_TOP',
-      hideUiIcons: false
+      hideUiIcons: false,
+      plannerMode: '3DCOMB'
     };
     if (this._uiConfig.templateConfig == 'gold') {
       this._colors.defaultBg = '#dfdfdf';
@@ -1876,7 +2061,7 @@ var UIStore = /*#__PURE__*/function () {
     key: "fadeOutOverlayImage",
     value: function fadeOutOverlayImage() {
       this._plane.visibility = 0;
-      this._shaderMat.setFloat("visiblity", 0);
+      this._shaderMat.setFloat('visiblity', 0);
       var root = this._scene.getTransformNodeByName('Root');
       if (root) root.getChildMeshes().forEach(function (m) {
         m.visibility = 1;
@@ -1897,7 +2082,7 @@ var UIStore = /*#__PURE__*/function () {
         var progress = Math.min(elapsedTime / 500, 1); // Normalize progress (0 to 1)
 
         _this3._plane.visibility = skip ? 1 : progress;
-        _this3._shaderMat.setFloat("visibility", skip ? 1 : progress);
+        _this3._shaderMat.setFloat('visibility', skip ? 1 : progress);
         if (!skip && progress < 1) {
           requestAnimationFrame(_animate);
         } else {
@@ -1907,7 +2092,7 @@ var UIStore = /*#__PURE__*/function () {
           var engine = _this3._scene.getEngine();
           var ratio = size.width / size.height;
           var engineRatio = engine.getRenderWidth() / engine.getRenderHeight();
-          _this3._shaderMat.setVector2("scale", new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
+          _this3._shaderMat.setVector2('scale', new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
 
           var root = _this3._scene.getTransformNodeByName('Root');
           if (root) root.getChildMeshes().forEach(function (m) {
@@ -1923,10 +2108,18 @@ var UIStore = /*#__PURE__*/function () {
       };
       _animate();
     }
+  }, {
+    key: "excludePreviewBoxes",
+    value: function excludePreviewBoxes() {
+      var _this4 = this;
+      this._scene.getMeshesByTags('box').forEach(function (m) {
+        return _this4._selectedHl.addExcludedMesh(m);
+      });
+    }
   }, {
     key: "createGridGui",
     value: function createGridGui(mesh, onClickDel) {
-      var _this4 = this;
+      var _this5 = this;
       if (!this._selectionHandler || !mesh || this._uiConfig.hideUiIcons) return;
       this.removeGridGui();
       var guiElem = new TransformNode('gridGuiElem', this._scene);
@@ -1951,10 +2144,10 @@ var UIStore = /*#__PURE__*/function () {
       dbt.height = this._uiConfig.templateConfig == 'standard' ? nSize : '70%';
       dbt.onPointerClickObservable.add(onClickDel);
       dtarget.onPointerEnterObservable = new Observable(function () {
-        return dtarget.background = _this4._colors.gridHoverBg;
+        return dtarget.background = _this5._colors.gridHoverBg;
       });
       dtarget.onPointerOutObservable = new Observable(function () {
-        return dtarget.background = _this4._colors.defaultBg;
+        return dtarget.background = _this5._colors.defaultBg;
       });
       if (this._uiConfig.templateConfig == 'standard') dtarget.linkOffsetY = -48;
       dtarget.addControl(dbt);
@@ -1982,7 +2175,7 @@ var UIStore = /*#__PURE__*/function () {
       engine.resize();
       var ratio = size.width / size.height;
       var engineRatio = engine.getRenderWidth() / engine.getRenderHeight();
-      this._shaderMat.setVector2("scale", new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
+      this._shaderMat.setVector2('scale', new Vector2(1 / (engineRatio / ratio), 1)); // adjust scale here */
       this._gui.dispose();
       this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI', true, this._scene);
       this._gui.renderScale = 1;
@@ -2004,7 +2197,7 @@ var UIStore = /*#__PURE__*/function () {
     key: "pointerOverElement",
     value: function pointerOverElement(element) {
       var _this$_runRenderLoopF,
-        _this5 = this;
+        _this6 = this;
       this.unityCombActive && ((_this$_runRenderLoopF = this._runRenderLoopForTime) === null || _this$_runRenderLoopF === void 0 ? void 0 : _this$_runRenderLoopF.call(this, 5000));
       this._selectedHl.removeAllMeshes();
       this._selectedHl.addExcludedMesh(this._plane);
@@ -2013,14 +2206,14 @@ var UIStore = /*#__PURE__*/function () {
       });
       element.getChildMeshes().forEach(function (_m) {
         _m.visibility = 1;
-        _this5._selectedHl.addMesh(_m, Color3.Black());
+        _this6._selectedHl.addMesh(_m, Color3.Black());
       });
     }
   }, {
     key: "pointerOutElement",
     value: function pointerOutElement(element) {
       var _this$_runRenderLoopF2,
-        _this6 = this;
+        _this7 = this;
       this.unityCombActive && ((_this$_runRenderLoopF2 = this._runRenderLoopForTime) === null || _this$_runRenderLoopF2 === void 0 ? void 0 : _this$_runRenderLoopF2.call(this, 5000));
       this._selectedHl.removeAllMeshes();
       this._selectedHl.addExcludedMesh(this._plane);
@@ -2029,15 +2222,44 @@ var UIStore = /*#__PURE__*/function () {
       });
       this._selectedMeshes.forEach(function (_m) {
         _m.visibility = 1;
-        _this6._selectedHl.addMesh(_m, Color3.Black());
+        _this7._selectedHl.addMesh(_m, Color3.Black());
       });
     }
+  }, {
+    key: "createTrash",
+    value: function createTrash(guiElem, node, elementInfo) {
+      var _this$_tabgroupTypeAc,
+        _this8 = this;
+      if (((_this$_tabgroupTypeAc = this._tabgroupTypeActive) !== null && _this$_tabgroupTypeAc !== void 0 && _this$_tabgroupTypeAc.call(this, 'PLANNER') || this._uiConfig.plannerMode == 'BoxPlanner') && elementInfo.active) {
+        var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
+        guiElem.elements.push(dtarget);
+        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';
+        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 _this8._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
+        });
+        if (this._uiConfig.templateConfig == 'standard' && !node) dtarget.linkOffsetY = !this._isMobile ? -48 : -30;
+        dtarget.addControl(dbt);
+        this._gui.addControl(dtarget);
+        dtarget.linkWithMesh(node);
+      }
+    }
   }, {
     key: "createPosNr",
-    value: function createPosNr(elementInfo, element, isBoxPlanner, onElSelected) {
-      var _this7 = this,
+    value: function createPosNr(elementInfo, element, onElSelected) {
+      var _this9 = this,
+        _guiElemRightBack,
         _this$_elementsInfo,
-        _this$_tabgroupTypeAc;
+        _this$_tabgroupTypeAc2;
       var guiElem = {
         elementId: elementInfo.elementId,
         elements: []
@@ -2045,14 +2267,15 @@ var UIStore = /*#__PURE__*/function () {
       var bbox = element.getHierarchyBoundingVectors();
       var guiElemLeftBack = null;
       var guiElemRightBack = null;
+      var isBoxPlanner = this._uiConfig.plannerMode == 'BoxPlanner';
       if (!isBoxPlanner && elementInfo.selectable && this._uiConfig.templateConfig != 'hidden') {
         guiElemLeftBack = new TransformNode('guiElem_' + elementInfo.elementId, this._scene);
         var forward = element.getDirection(Vector3.Forward()).normalize();
         var left = element.getDirection(Vector3.Left()).normalize();
         var x = bbox.max.x;
-        var z = bbox.min.z;
+        var z = bbox.max.z;
         if (forward.x < forward.z) x = bbox.min.x;
-        if (left.z > left.x) z = bbox.max.z;
+        if (left.z > left.x) z = bbox.min.z;
         guiElemLeftBack.position = new Vector3(x, bbox.max.y, z);
         guiElem.elements.push(guiElemLeftBack);
         guiElemRightBack = undefined;
@@ -2070,21 +2293,19 @@ var UIStore = /*#__PURE__*/function () {
         target.fontSize = this._uiConfig.templateConfig == 'standard' ? 50 : this._isMobile ? 10 : 20;
         target.background = this._colors.defaultBg;
         target.thickness = 0;
-        if (elementInfo.active) {
-          target.background = this._colors.selectedBg;
-        } else {
+        if (elementInfo.active) target.background = this._colors.selectedBg;else {
           target.onPointerClickObservable.add(function (evt) {
-            _this7._guiIsPicked = true;
-            _this7.selectElem(element.name.slice(-1), element, onElSelected);
+            _this9._guiIsPicked = true;
+            _this9.selectElem(element.name.slice(-1), element, onElSelected);
             setTimeout(function () {
-              return _this7._guiIsPicked = false;
+              return _this9._guiIsPicked = false;
             }, 10);
           });
           target.onPointerEnterObservable.add(function () {
-            return target.background = _this7._colors.hoverBg;
+            return target.background = _this9._colors.hoverBg;
           });
           target.onPointerOutObservable.add(function () {
-            target.background = _this7._colors.defaultBg;
+            target.background = _this9._colors.defaultBg;
           });
         }
         if (!elementInfo.selectable) target.background = '';
@@ -2105,6 +2326,7 @@ var UIStore = /*#__PURE__*/function () {
         var _pos = new Vector3(bbox.min.x, bbox.max.y, bbox.min.z);
         guiElemRightBack.position = _pos;
       }
+      if (elementInfo.active) this.createTrash(guiElem, (_guiElemRightBack = guiElemRightBack) !== null && _guiElemRightBack !== void 0 ? _guiElemRightBack : guiElemLeftBack, elementInfo);
       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) {
@@ -2112,7 +2334,7 @@ var UIStore = /*#__PURE__*/function () {
       });
       childMeshes.forEach(function (m) {
         if (!m.material) return;
-        if (_this7._plane.visibility == 1) {
+        if (_this9._plane.visibility == 1) {
           m.visibility = 0;
           m.material.depthFunction = Constants.ALWAYS;
           m.material.disableColorWrite = true;
@@ -2123,25 +2345,25 @@ var UIStore = /*#__PURE__*/function () {
         }
         if (elementInfo.active) m.visibility = 1;
         if (!cantSelect && !elementInfo.active && elementInfo.selectable) {
-          if (!m.actionManager) m.actionManager = new ActionManager(_this7._scene);
+          if (!m.actionManager) m.actionManager = new ActionManager(_this9._scene);
           m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function () {
-            return _this7.pointerOverElement(element);
+            return _this9.pointerOverElement(element);
           }));
           m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function () {
-            return _this7.pointerOutElement(element);
+            return _this9.pointerOutElement(element);
           }));
         } else if (!cantSelect && elementInfo.active) {
           var _m$actionManager;
-          _this7._selectedMeshes = [].concat(_toConsumableArray(_this7._selectedMeshes), _toConsumableArray(childMeshes));
-          _this7._selectedHl.addMesh(m, Color3.Black());
+          _this9._selectedMeshes = [].concat(_toConsumableArray(_this9._selectedMeshes), _toConsumableArray(childMeshes));
+          _this9._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;
+      if ((_this$_tabgroupTypeAc2 = this._tabgroupTypeActive) !== null && _this$_tabgroupTypeAc2 !== void 0 && _this$_tabgroupTypeAc2.call(this, 'PLANNER') && elementInfo.active) {
+        var _guiElemRightBack2;
         var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
         guiElem.elements.push(dtarget);
         var _size = this._uiConfig.templateConfig == 'standard' ? this._isMobile ? '75px' : '40px' : this._isMobile ? '100px' : '35px';
@@ -2156,12 +2378,12 @@ var UIStore = /*#__PURE__*/function () {
         dbt.width = this._uiConfig.templateConfig == 'standard' ? nSize : '60%';
         dbt.height = this._uiConfig.templateConfig == 'standard' ? nSize : '70%';
         dbt.onPointerClickObservable.add(function () {
-          return _this7._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
+          return _this9._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
         });
         if (this._uiConfig.templateConfig == 'standard' && !guiElemRightBack) dtarget.linkOffsetY = !this._isMobile ? -48 : -80;
         dtarget.addControl(dbt);
         this._gui.addControl(dtarget);
-        dtarget.linkWithMesh((_guiElemRightBack = guiElemRightBack) !== null && _guiElemRightBack !== void 0 ? _guiElemRightBack : guiElemLeftBack);
+        dtarget.linkWithMesh((_guiElemRightBack2 = guiElemRightBack) !== null && _guiElemRightBack2 !== void 0 ? _guiElemRightBack2 : guiElemLeftBack);
       }
       this._guiElements.push(guiElem);
     }
@@ -2170,7 +2392,7 @@ var UIStore = /*#__PURE__*/function () {
     value: function createBoxCopyButtons(elementInfo, element) {
       var _this$_scene$activeCa,
         _this$_scene$activeCa2,
-        _this8 = this,
+        _this10 = this,
         _this$_scene$activeCa3;
       var guiElem = {
         elementId: elementInfo.elementId,
@@ -2196,8 +2418,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 _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);
+            var _this10$_scene$active;
+            var _dir = (_this10$_scene$active = _this10._scene.activeCamera) === null || _this10$_scene$active === void 0 ? void 0 : _this10$_scene$active.getDirection(Axis.Z);
             if (_dir.z > 0) {
               target.rotation = 180 * Math.PI / 180;
             } else {
@@ -2205,8 +2427,8 @@ var UIStore = /*#__PURE__*/function () {
             }
           });
           target.onPointerClickObservable.add(function () {
-            var _this8$_onElementCopy;
-            return (_this8$_onElementCopy = _this8._onElementCopy) === null || _this8$_onElementCopy === void 0 ? void 0 : _this8$_onElementCopy.call(_this8, elementInfo.setId, elementInfo.elementId, 'LEFT');
+            var _this10$_onElementCop;
+            return (_this10$_onElementCop = _this10._onElementCopy) === null || _this10$_onElementCop === void 0 ? void 0 : _this10$_onElementCop.call(_this10, elementInfo.setId, elementInfo.elementId, 'LEFT');
           });
           break;
         case 'BoxCopyRight':
@@ -2219,8 +2441,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 _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);
+            var _this10$_scene$active2;
+            var _dir = (_this10$_scene$active2 = _this10._scene.activeCamera) === null || _this10$_scene$active2 === void 0 ? void 0 : _this10$_scene$active2.getDirection(Axis.Z);
             if (_dir.z < 0) {
               target.rotation = 180 * Math.PI / 180;
             } else {
@@ -2228,16 +2450,16 @@ var UIStore = /*#__PURE__*/function () {
             }
           });
           target.onPointerClickObservable.add(function () {
-            var _this8$_onElementCopy2;
-            return (_this8$_onElementCopy2 = _this8._onElementCopy) === null || _this8$_onElementCopy2 === void 0 ? void 0 : _this8$_onElementCopy2.call(_this8, elementInfo.setId, elementInfo.elementId, 'RIGHT');
+            var _this10$_onElementCop2;
+            return (_this10$_onElementCop2 = _this10._onElementCopy) === null || _this10$_onElementCop2 === void 0 ? void 0 : _this10$_onElementCop2.call(_this10, 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 _this8$_onElementCopy3;
-            return (_this8$_onElementCopy3 = _this8._onElementCopy) === null || _this8$_onElementCopy3 === void 0 ? void 0 : _this8$_onElementCopy3.call(_this8, elementInfo.setId, elementInfo.elementId, 'TOP');
+            var _this10$_onElementCop3;
+            return (_this10$_onElementCop3 = _this10._onElementCopy) === null || _this10$_onElementCop3 === void 0 ? void 0 : _this10$_onElementCop3.call(_this10, elementInfo.setId, elementInfo.elementId, 'TOP');
           });
           break;
       }
@@ -2248,7 +2470,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "initGui",
     value: function initGui(onElSelected, elements) {
-      var _this9 = this;
+      var _this11 = this;
       // elementinfo update before unity -- return and wait for after buildscene
       if (!this._selectionHandler) this.initSelectionHandler(onElSelected);
       if (!this._scene || !this._elementsInfo || this._elementsInfo.filter(function (e) {
@@ -2256,9 +2478,6 @@ var UIStore = /*#__PURE__*/function () {
       }).length > elements.length) return;
       this.clearGui();
       if (this._plane.parent == null) this._plane.parent = this._scene.activeCamera;
-      var isBoxPlanner = !this._elementsInfo.every(function (v) {
-        return v.type == 'PosNr';
-      });
       this._selectedHl.removeAllMeshes();
       this._selectedMeshes = [];
       this._elementsInfo.forEach(function (elementInfo) {
@@ -2266,16 +2485,16 @@ 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 = _this9._scene.getTransformNodeByName(emnt.bbn.name);
-        if (!element || _this9._uiConfig.hideUiIcons) return;
-        if (elementInfo.type == 'PosNr') _this9.createPosNr(elementInfo, element, isBoxPlanner, onElSelected);else _this9.createBoxCopyButtons(elementInfo, element);
+        var element = _this11._scene.getTransformNodeByName(emnt.bbn.name);
+        if (!element || _this11._uiConfig.hideUiIcons) return;
+        if (elementInfo.type == 'PosNr') _this11.createPosNr(elementInfo, element, onElSelected);
       });
     }
   }, {
     key: "selectElem",
     value: function selectElem(name, element, onElSelected) {
       var _this$_elementsInfo2,
-        _this10 = this;
+        _this12 = this;
       var elementInfo = (_this$_elementsInfo2 = this._elementsInfo) === null || _this$_elementsInfo2 === void 0 ? void 0 : _this$_elementsInfo2.find(function (ef) {
         return ef.elementId.toString() == name;
       });
@@ -2296,9 +2515,9 @@ 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 = _this10._colors.defaultBg;
+          if (element.typeName == 'Ellipse') element.color = _this12._colors.defaultBg;
           if (guiElem.elementId.toString() == name) {
-            if (element.typeName == 'label') element.color = _this10._colors.selectedBg;
+            if (element.typeName == 'label') element.color = _this12._colors.selectedBg;
             if (element.typeName == 'Ellipse') element.color = 'White';
           }
         });
@@ -2342,7 +2561,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "requestNewOverlayImage",
     value: function requestNewOverlayImage(viewpoint, focusedElement, targetCameraPosition, updateCameraInformation) {
-      var _this11 = this;
+      var _this13 = this;
       //this._overlayImage exists only when unity combi is enabled
       if (!this._isUnityComb || this._isStaticBg) return;
       var elementId = undefined;
@@ -2358,12 +2577,12 @@ 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 _this11$_requestNewOv;
-          _this11._latestViewpoint = viewpoint;
-          _this11._utilStore.addOutstandingImageCount();
-          _this11._utilStore.updateCam = true;
+          var _this13$_requestNewOv;
+          _this13._latestViewpoint = viewpoint;
+          _this13._utilStore.addOutstandingImageCount();
+          _this13._utilStore.updateCam = true;
           updateCameraInformation === null || updateCameraInformation === void 0 || updateCameraInformation(viewpoint);
-          (_this11$_requestNewOv = _this11._requestNewOverlayImage) === null || _this11$_requestNewOv === void 0 || _this11$_requestNewOv.call(_this11, viewpoint, {
+          (_this13$_requestNewOv = _this13._requestNewOverlayImage) === null || _this13$_requestNewOv === void 0 || _this13$_requestNewOv.call(_this13, viewpoint, {
             adjustZoomInUnity: false,
             onlyAdjustZoomBBChanged: false,
             rotationCenter: viewpoint.targetPos,
@@ -2601,17 +2820,17 @@ var UtilStore = /*#__PURE__*/function () {
 
 var _context;
 var unregisterContext = function unregisterContext() {
-  _context = undefined;
+  _context = null;
 };
 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), viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.tabgroupTypeActive, isMobile);
+  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, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.divaWebPlanner.getPlannerInteractionInformation.bind(viewHandler.divaWebPlanner));
   return _context = {
     utilStore: utilStore,
     sceneStore: sceneStore,
     uiStore: uiStore,
-    gridStore: new GridStore(sceneStore, uiStore, viewHandler)
+    gridStore: new GridStore(sceneStore, uiStore, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.plannerMode, viewHandler)
   };
 };
 var useUIStoreContext = function useUIStoreContext() {
@@ -2794,7 +3013,9 @@ var customMat = /*#__PURE__*/function () {
             if (!texture) return texture;
             var reCtrTex = new Texture(texture.url, _customMat.scene);
             reCtrTex.uScale = texture.uScale;
-            reCtrTex.vScale = texture.vScale;
+            reCtrTex.vScale = -texture.vScale;
+            reCtrTex.uOffset = 1;
+            reCtrTex.vOffset = -(1 - texture.vScale);
             reCtrTex._mimeType = texture.url.endsWith('.jpg') ? 'image/jpeg' : 'image/png';
             return reCtrTex;
           };
@@ -2812,7 +3033,6 @@ var customMat = /*#__PURE__*/function () {
         case 16:
           res = _context.sent;
           parsedMat = PBRMetallicRoughnessMaterial.Parse(res, _customMat.scene, '');
-          parsedMat.name = _customMat.name;
           parsedMat.baseTexture = doReCtrTex(parsedMat.baseTexture);
           parsedMat.metallicRoughnessTexture = doReCtrTex(parsedMat.metallicRoughnessTexture);
           parsedMat.normalTexture = doReCtrTex(parsedMat.normalTexture);
@@ -2830,8 +3050,8 @@ var customMat = /*#__PURE__*/function () {
             mat: parsedMat,
             found: true
           });
-        case 28:
-          _context.prev = 28;
+        case 27:
+          _context.prev = 27;
           _context.t0 = _context["catch"](9);
           if (setDataRow) useUtilStoreContext().setAnalyzeDataRow({
             type: 'MAT',
@@ -2841,17 +3061,17 @@ var customMat = /*#__PURE__*/function () {
             path: _customMat.blob,
             sizeMb: 0
           });
-        case 31:
+        case 30:
           mat = new PBRMetallicRoughnessMaterial(_customMat.name, sceneStore.scene);
           return _context.abrupt("return", {
             mat: mat,
             found: true
           });
-        case 33:
+        case 32:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[9, 28]]);
+    }, _callee, null, [[9, 27]]);
   }));
   return function customMat(_x) {
     return _ref.apply(this, arguments);
@@ -2970,7 +3190,7 @@ function _findAssets() {
                       geo: geo.name
                     });
                     geo.material = mat.mat;
-                    oldMat = sceneStore.scene.getMaterialByUniqueId(oldMatId);
+                    oldMat = sceneStore.scene.getMaterialByUniqueID(oldMatId);
                     if (oldMat) {
                       _context.next = 17;
                       break;
@@ -2988,7 +3208,7 @@ function _findAssets() {
                     } finally {
                       _iterator3.f();
                     }
-                    oldMat.dispose(true, true);
+                    oldMat.dispose();
                     _context.next = 39;
                     break;
                   case 22:
@@ -3311,11 +3531,11 @@ function _createOrGetMaterial() {
   return _createOrGetMaterial.apply(this, arguments);
 }
 
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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 _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(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$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(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$2(r, a) : void 0; } }
 function _arrayLikeToArray$2(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 ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-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; }
 var buildScene = function buildScene(_ref) {
   var _sceneStore$elements;
   var startNode = _ref.startNode,
@@ -3324,6 +3544,7 @@ var buildScene = function buildScene(_ref) {
     cachedAssets = _ref.cachedAssets;
   var sceneStore = useSceneStoreContext();
   var utilStore = useUtilStoreContext();
+  useGridStoreContext();
   var scene = sceneStore.scene;
   var hqsGeos = sceneStore.hqRenderScript.assets.geos;
   var curElement = (_sceneStore$elements = sceneStore.elements) === null || _sceneStore$elements === void 0 || (_sceneStore$elements = _sceneStore$elements[0]) === null || _sceneStore$elements === void 0 ? void 0 : _sceneStore$elements.hqs;
@@ -3341,10 +3562,12 @@ var buildScene = function buildScene(_ref) {
             return asset.id == curGeo.id;
           })) === null || _cachedAssets$find === void 0 || (_cachedAssets$find = _cachedAssets$find.geo) === null || _cachedAssets$find === void 0 || _cachedAssets$find.onElements.push(curElement); // TODO
           var geo = mesh.clone('geo_' + mesh.name, parentNode);
-          geo.position = new Vector3(curGeo.pos.x / 100, curGeo.pos.y / 100, -curGeo.pos.z / 100);
-          geo.rotation = utilStore.degreesToRadians(_objectSpread$1(_objectSpread$1({}, curGeo.rot), {}, {
-            x: hqsGeo.isIDM3D ? 90 - curGeo.rot.x : curGeo.rot.x
-          }));
+          geo.position = new Vector3(curGeo.pos.x / 100, curGeo.pos.y / 100, curGeo.pos.z / 100);
+          geo.rotation = utilStore.degreesToRadians({
+            x: hqsGeo.isIDM3D ? 90 - curGeo.rot.x : -curGeo.rot.x,
+            y: 360 - curGeo.rot.y,
+            z: curGeo.rot.z
+          });
           geo.setEnabled(true);
           utilStore.setAnalyzeDataRowStatus(curMeshName, true);
         }
@@ -3409,7 +3632,6 @@ var buildScene = function buildScene(_ref) {
     var node = new TransformNode(hqsNode.name, scene);
     if (hqsNode.name == 'Root') {
       //for model viewer direction
-      hqsNode.rot.y = 180;
       sceneStore.setRoot(node, hqsNode);
     }
     if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.name) == 'Wohnzimmer') sceneStore.addSet(node, hqsNode);
@@ -3418,8 +3640,11 @@ var buildScene = function buildScene(_ref) {
       sceneStore.addElement(node, hqsNode);
       curElement = hqsNode;
     }
-    node.position = new Vector3(hqsNode.pos.x / 100, hqsNode.pos.y / 100, -hqsNode.pos.z / 100);
-    node.rotation = utilStore.degreesToRadians(hqsNode.rot);
+    node.position = new Vector3(hqsNode.pos.x / 100, hqsNode.pos.y / 100, hqsNode.pos.z / 100);
+    node.rotation = utilStore.degreesToRadians(_objectSpread$1(_objectSpread$1({}, hqsNode.rot), {}, {
+      x: -hqsNode.rot.x,
+      y: 360 - hqsNode.rot.y
+    }));
     if (parentNode !== undefined) {
       node.parent = parentNode;
     }
@@ -3577,19 +3802,20 @@ function deacCache(cache) {
 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, gridStore, _yield$findAssets, cacheGroup, newCache, _changedElements$upda2, _sceneStore$scene$get, root;
     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();
+          gridStore = useGridStoreContext(); //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 = 7;
           return findAssets(hqRenderScript.assets, cache);
-        case 6:
+        case 7:
           _yield$findAssets = _context.sent;
           cacheGroup = _yield$findAssets.cacheGroup;
           newCache = _yield$findAssets.newCache;
@@ -3614,6 +3840,7 @@ var parser = /*#__PURE__*/function () {
                 parentNode: parent
               });
               findMaterials(newCache);
+              gridStore.setupElementMove([updatedElement.name], utilStore.moveObjectInDirection);
             });
           } else if (!hasRendered) {
             buildScene({
@@ -3622,13 +3849,17 @@ var parser = /*#__PURE__*/function () {
               cachedAssets: newCache
             });
             findMaterials(newCache);
+            root = (_sceneStore$scene$get = sceneStore.scene.getTransformNodeByName(hqRenderScript.scene.nodes[0].name)) === null || _sceneStore$scene$get === void 0 || (_sceneStore$scene$get = _sceneStore$scene$get.getChildren()) === null || _sceneStore$scene$get === void 0 || (_sceneStore$scene$get = _sceneStore$scene$get[0]) === null || _sceneStore$scene$get === void 0 || (_sceneStore$scene$get = _sceneStore$scene$get.getChildren()) === null || _sceneStore$scene$get === void 0 || (_sceneStore$scene$get = _sceneStore$scene$get[0]) === null || _sceneStore$scene$get === void 0 ? void 0 : _sceneStore$scene$get.getChildren().map(function (r) {
+              return r.name;
+            });
+            gridStore.setupElementMove(root !== null && root !== void 0 ? root : [], utilStore.moveObjectInDirection);
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
           sceneStore.scene.executeWhenReady(function () {
             return sceneStore.checkMaterialCache();
           });
-        case 15:
+        case 16:
         case "end":
           return _context.stop();
       }
@@ -3678,7 +3909,7 @@ function createCams(scene, viewpoint) {
       name: 'defaultCam',
       isEnabled: true,
       pos: new Vector3(4.5, 2.2, 8),
-      rot: new Vector3(7.75, -150, 0),
+      rot: new Vector3(7.75, 150, 0),
       parent: undefined
     })];
   }
@@ -3687,11 +3918,11 @@ function createCams(scene, viewpoint) {
   return [createCam({
     name: 'defaultCam',
     isEnabled: true,
-    pos: vector3ToBVector3(viewpoint.pos).multiply(new Vector3(-0.01, 0.01, 0.01)),
+    pos: vector3ToBVector3(viewpoint.pos).multiply(new Vector3(0.01, 0.01, 0.01)),
     rot: vector3ToBVector3(_objectSpread(_objectSpread({}, viewpoint.rot), {}, {
-      x: -viewpoint.rot.x
+      y: 360 - viewpoint.rot.y
     })),
-    target: vector3ToBVector3(viewpoint.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01)),
+    target: vector3ToBVector3(viewpoint.targetPos).multiply(new Vector3(0.01, 0.01, 0.01)),
     parent: undefined
   })];
 }
@@ -3708,11 +3939,11 @@ 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 position = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
+  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
+    y: 360 - camera.rot.y
   })));
-  var target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01));
+  var target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(0.01, 0.01, 0.01));
   cam.position = position;
   cam.rotation = rotation;
   cam.setTarget(target);
@@ -3724,17 +3955,17 @@ function updateCam(camera, scene) {
     lensShiftY: 0,
     name: cam.name,
     pos: {
-      x: position.x,
+      x: -position.x,
       y: position.y,
       z: position.z
     },
     rot: {
       x: rotation.x * 180 / Math.PI,
-      y: rotation.y * 180 / Math.PI,
+      y: 360 - rotation.y * 180 / Math.PI,
       z: rotation.z * 180 / Math.PI
     },
     targetPos: {
-      x: target.x,
+      x: -target.x,
       y: target.y,
       z: target.z
     },
@@ -3744,7 +3975,7 @@ function updateCam(camera, scene) {
 
 var LOG = getLogger('ARViewer', 'RealTimeRenderData');
 function useRealTimeRenderData (_ref) {
-  var _sceneStore3;
+  var _sceneStore4;
   var jwt = _ref.jwt,
     actions = _ref.actions,
     apiConfig = _ref.apiConfig,
@@ -3833,11 +4064,12 @@ function useRealTimeRenderData (_ref) {
             return parser();
           case 20:
             uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
+            if (viewHandler !== null && viewHandler !== void 0 && viewHandler.settingsState.generalPlanningState) gridStore.getGrids1(viewHandler.settingsState.generalPlanningState, uiStore.excludePreviewBoxes.bind(uiStore));
             if (freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids(freePlacesOnGrids, plannedPlacesOnGrids);
-            _context2.next = 29;
+            _context2.next = 30;
             break;
-          case 24:
-            _context2.prev = 24;
+          case 25:
+            _context2.prev = 25;
             _context2.t0 = _context2["catch"](16);
             LOG.errorTransaction('BUILD_SCENE', 'RTS_0001', _context2.t0.message);
             LOG.error(new DivaError('Error building scene', {
@@ -3845,12 +4077,9 @@ function useRealTimeRenderData (_ref) {
               code: 'RTS_0001'
             }));
             sceneStore.isInitializing = false;
-          case 29:
+          case 30:
             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']), res.glTFFiles['fileName.glb']);
-              });
+              sceneStore.exportScene(callbacks.setGlb);
             } else {
               LOG.debug('callbacks.setGlb is undefined');
             }
@@ -3860,11 +4089,11 @@ function useRealTimeRenderData (_ref) {
             sceneStore.runRenderLoopForTime(5000);
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
-          case 34:
+          case 35:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[16, 24]]);
+      }, _callee2, null, [[16, 25]]);
     }));
     return _onSceneReady.apply(this, arguments);
   }
@@ -3883,13 +4112,10 @@ function useRealTimeRenderData (_ref) {
   // trigger if gamecanvas did not update but renderjob
   if (gameCanvas.current && sceneStore && sceneStore.scene.getEngine()) {
     var _queueRerender = function queueRerender() {
-      if (sceneStore.isInitializing) setTimeout(_queueRerender, 150);else {
-        if (sceneStore.scene) {
-          if (sceneStore.scene.isReady()) onSceneReady();else sceneStore.scene.executeWhenReady(function () {
-            return onSceneReady();
-          });
-        }
-      }
+      var _sceneStore$scene;
+      if (sceneStore.isInitializing) setTimeout(_queueRerender, 150);else (_sceneStore$scene = sceneStore.scene) === null || _sceneStore$scene === void 0 || _sceneStore$scene.executeWhenReady(function () {
+        return onSceneReady();
+      });
     };
     _queueRerender();
   }
@@ -3900,12 +4126,14 @@ function useRealTimeRenderData (_ref) {
     }
   }, [gameCanvas.current]);
   useEffect(function () {
-    function init(_x) {
+    var disposed = false;
+    var engine = null;
+    function init() {
       return _init.apply(this, arguments);
     }
     function _init() {
-      _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(enginePromise) {
-        var babylonEngine, babylonScene, context;
+      _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var babylonEngine, babylonScene, context, _observer;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -3922,12 +4150,28 @@ function useRealTimeRenderData (_ref) {
               return _context.abrupt("return");
             case 4:
               _context.next = 6;
-              return enginePromise;
+              return EngineFactory.CreateAsync(gameCanvas.current, {
+                antialias: true,
+                stencil: true,
+                audioEngine: false,
+                adaptToDeviceRatio: true,
+                useHighPrecisionFloats: true,
+                preserveDrawingBuffer: true
+              });
             case 6:
               babylonEngine = _context.sent;
+              engine = babylonEngine;
+              if (!disposed) {
+                _context.next = 11;
+                break;
+              }
+              engine.dispose();
+              return _context.abrupt("return");
+            case 11:
               babylonEngine.renderEvenInBackground = renderInBackground;
               babylonEngine.disablePerformanceMonitorInBackground = true;
               babylonScene = new Scene(babylonEngine, undefined);
+              babylonScene.useRightHandedSystem = true;
               babylonScene.clearColor = new Color4(255, 255, 255, 255);
               context = registerContext(babylonScene, renderjob, apiConfig, jwt, viewHandler, callbacks.onMissingGeo, callbacks.requestNewOverlayImage, overlayImage, uiConfig, callbacks.updateCameraInformation, !!isMobile);
               createCams(babylonScene, viewpoint);
@@ -3935,23 +4179,13 @@ function useRealTimeRenderData (_ref) {
               utilStore = context.utilStore;
               gridStore = context.gridStore;
               uiStore = context.uiStore;
-              if (!babylonScene.isReady()) {
-                _context.next = 22;
-                break;
-              }
-              _context.next = 20;
-              return onSceneReady();
-            case 20:
-              _context.next = 23;
-              break;
-            case 22:
               babylonScene.executeWhenReady(function () {
                 return onSceneReady();
               });
-            case 23:
               if (window && gameCanvas.current) {
                 window.addEventListener('resize', resize);
-                new ResizeObserver(resize).observe(gameCanvas.current);
+                _observer = new ResizeObserver(resize);
+                _observer.observe(gameCanvas.current);
               }
             case 24:
             case "end":
@@ -3970,26 +4204,27 @@ function useRealTimeRenderData (_ref) {
       uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
     };
     if (!gameCanvas.current) return;
-    var enginePrmise = EngineFactory.CreateAsync(gameCanvas.current, {
-      antialias: true,
-      stencil: true,
-      audioEngine: false,
-      adaptToDeviceRatio: true,
-      useHighPrecisionFloats: true,
-      preserveDrawingBuffer: true
-    });
-    init(enginePrmise);
+    init();
     return function () {
-      enginePrmise.then(function (e) {
-        return e.dispose();
-      });
-      if (sceneStore && sceneStore.scene) {
-        unregisterContext();
-        sceneStore.scene.dispose();
-        if (window) {
-          window.removeEventListener('resize', resize);
-        }
+      disposed = true;
+      actions.toggleLoading('buildScene', false, false);
+      if (engine) {
+        engine.scenes.forEach(function (s) {
+          s.textures.forEach(function (t) {
+            return t.dispose();
+          });
+          s.materials.forEach(function (m) {
+            return m.dispose();
+          });
+          s.meshes.forEach(function (m) {
+            return m.dispose(false, true);
+          });
+          s.dispose();
+        });
+        engine.dispose();
       }
+      unregisterContext();
+      if (window) window.removeEventListener('resize', resize);
     };
   }, []);
   useEffect(function () {
@@ -4001,13 +4236,21 @@ function useRealTimeRenderData (_ref) {
       if (viewpoint) updateCam(viewpoint, sceneStore.scene);
     }
   }, [overlayImage]);
+  useEffect(function () {
+    var _sceneStore3;
+    if (!(viewHandler !== null && viewHandler !== void 0 && viewHandler.settingsState.generalPlanningState) || !((_sceneStore3 = sceneStore) !== null && _sceneStore3 !== void 0 && _sceneStore3.scene) || !elementsInfo) return;
+    sceneStore.scene.executeWhenReady(function () {
+      gridStore.getGrids1(viewHandler.settingsState.generalPlanningState, uiStore.excludePreviewBoxes.bind(uiStore));
+    });
+    sceneStore.runRenderLoopForTime(5000);
+  }, [viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.settingsState.generalPlanningState]);
   useEffect(function () {
     if (sceneStore && elementsInfo && gameCanvas.current && sceneStore.scene.getEngine()) {
       uiStore.addElementsInfo(elementsInfo);
       uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
       sceneStore.runRenderLoopForTime(5000);
     }
-  }, [elementsInfo, (_sceneStore3 = sceneStore) === null || _sceneStore3 === void 0 ? void 0 : _sceneStore3.elements]);
+  }, [elementsInfo, (_sceneStore4 = sceneStore) === null || _sceneStore4 === void 0 ? void 0 : _sceneStore4.elements]);
   useEffect(function () {
     if (!gameCanvas.current || !sceneStore) return;
     if (inBackground) {
@@ -4049,31 +4292,18 @@ function styleInject(css, ref) {
 }
 
 var canvas = "canvas-gZFEa";
-var css_248z = ".canvas-gZFEa.focus-visible-ubYpO {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-gZFEa.focus-visible-ubYpO {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-gZFEa.focus-visible-ubYpO {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-gZFEa:focus-visible {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.flex-container-column-XYHvU {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  background-color: white;\n  gap: 15px;\n  padding: 10px;\n  margin-top: 50px;\n  border: 0.5px solid;\n  border-top-right-radius: 10px;\n  border-bottom-right-radius: 10px;\n}\n\n.flex-container-column-closed-2D7IF {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  background-color: white;\n  gap: 15px;\n  padding: 10px;\n}\n\n.flex-container-row-ENPOV {\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  background-color: white;\n  gap: 5px;\n}\n\n.create-button-NPGTz {\n  width: 200px;\n  height: 35px;\n  border-radius: 5px;\n  border-style: none;\n  color: #fff;\n  background-color: #713434;\n}\n\n.create-button-NPGTz:hover {\n  background-color: #42090e;\n}\n\n.check-box-2GPp1 {\n  width: 20px;\n  height: 20px;\n  margin: 0px;\n}\n\n.input-field-uCQ0h {\n  width: 193px;\n  height: 35px;\n  border-radius: 5px;\n  border-style: none;\n  color: rgb(0, 0, 0);\n  border-style: solid;\n  border-color: #000000;\n  background-color: #f7f7f7;\n  border-width: 0.5px;\n}\n\n.input-field-uCQ0h:hover {\n  background-color: #ebebeb;\n}\n";
+var canvasWrapper = "canvas-wrapper-Taxav";
+var css_248z = ".canvas-gZFEa {\n  height: 100%;\n  width: 100%;\n  margin: auto;\n  display: block;\n  backgroundColor: white;\n}\n\n.canvas-gZFEa.focus-visible-ubYpO {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-gZFEa.focus-visible-ubYpO {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-gZFEa.focus-visible-ubYpO {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-gZFEa:focus-visible {\n  outline: medium none invert;\n  outline: initial;\n}\n\n.canvas-wrapper-Taxav {\n  position: absolute;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n  backgroundColor: white;\n  zIndex: 2;\n}\n\n.flex-container-column-XYHvU {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  background-color: white;\n  gap: 15px;\n  padding: 10px;\n  margin-top: 50px;\n  border: 0.5px solid;\n  border-top-right-radius: 10px;\n  border-bottom-right-radius: 10px;\n}\n\n.flex-container-column-closed-2D7IF {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  background-color: white;\n  gap: 15px;\n  padding: 10px;\n}\n\n.flex-container-row-ENPOV {\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  background-color: white;\n  gap: 5px;\n}\n\n.create-button-NPGTz {\n  width: 200px;\n  height: 35px;\n  border-radius: 5px;\n  border-style: none;\n  color: #fff;\n  background-color: #713434;\n}\n\n.create-button-NPGTz:hover {\n  background-color: #42090e;\n}\n\n.check-box-2GPp1 {\n  width: 20px;\n  height: 20px;\n  margin: 0px;\n}\n\n.input-field-uCQ0h {\n  width: 193px;\n  height: 35px;\n  border-radius: 5px;\n  border-style: none;\n  color: rgb(0, 0, 0);\n  border-style: solid;\n  border-color: #000000;\n  background-color: #f7f7f7;\n  border-width: 0.5px;\n}\n\n.input-field-uCQ0h:hover {\n  background-color: #ebebeb;\n}\n";
 styleInject(css_248z);
 
 var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
   var _useRealTimeRenderDat = useRealTimeRenderData(props),
     gameCanvas = _useRealTimeRenderDat.gameCanvas;
   return /*#__PURE__*/jsx("div", {
-    style: {
-      position: 'absolute',
-      top: '0px',
-      width: '100%',
-      height: '100%',
-      backgroundColor: 'white',
-      zIndex: 2
-    },
+    className: canvasWrapper,
     children: /*#__PURE__*/jsx("canvas", {
       id: "gameCanvas",
       ref: gameCanvas,
-      style: {
-        height: '100%',
-        width: '100%',
-        margin: 'auto',
-        display: 'block',
-        backgroundColor: 'white'
-      },
       className: canvas
     })
   });