@crystaldesign/real-time-viewer 25.13.0-beta.9 → 25.14.0-beta.1

package/build/esm/index.js

@@ -1,15 +1,16 @@
-import { useRef, useEffect, memo } from 'react';
+import { useRef, useState, useEffect, memo } from 'react';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { makeAutoObservable, toJS } from 'mobx';
 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 { ActionManager } from '@babylonjs/core/Actions/actionManager';
 import { ExecuteCodeAction } from '@babylonjs/core/Actions/directActions';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
@@ -49,7 +50,6 @@ import { DracoCompression } from '@babylonjs/core/Meshes/Compression/dracoCompre
 import { loadAssetContainerAsync } from '@babylonjs/core/Loading/index';
 import '@babylonjs/loaders/glTF/2.0/';
 import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera';
-import { toJS } from 'mobx';
 import { jsx } from 'react/jsx-runtime';
 
 (function() {
@@ -89,26 +89,26 @@ function GetCameraControls(camera) {
       stopRender = false;
     }
     var cam = {
-      horiFov: camera.fov * 180 / Math.PI,
+      horiFov: Math.round(camera.fov * 180 / Math.PI * 1000) / 1000,
       lensShiftX: 0,
       lensShiftY: 0,
       name: camera.name,
       pos: {
-        x: -camera.position.x,
-        y: camera.position.y,
-        z: camera.position.z
+        x: Math.round(-camera.position.x * 1000) / 1000,
+        y: Math.round(camera.position.y * 1000) / 1000,
+        z: Math.round(camera.position.z * 1000) / 1000
       },
       rot: {
-        x: -camera.rotation.x * 180 / Math.PI,
-        y: 180 - camera.rotation.y * 180 / Math.PI,
-        z: camera.rotation.z * 180 / Math.PI
+        x: Math.round(-camera.rotation.x * 180 / Math.PI * 1000) / 1000,
+        y: Math.round((180 - camera.rotation.y * 180 / Math.PI) * 1000) / 1000,
+        z: Math.round(camera.rotation.z * 180 / Math.PI * 1000) / 1000
       },
       targetPos: {
-        x: -camera.target.x,
-        y: camera.target.y,
-        z: camera.target.z
+        x: Math.round(-camera.target.x * 1000) / 1000,
+        y: Math.round(camera.target.y * 1000) / 1000,
+        z: Math.round(camera.target.z * 1000) / 1000
       },
-      vertFov: camera.fov * 180 / Math.PI
+      vertFov: Math.round(camera.fov * 180 / Math.PI * 1000) / 1000
     };
     uistore.requestNewOverlayImage(cam, sceneStore.focusedElement, sceneStore.targetCameraPosition, sceneStore.updateCameraInformation);
     if (stopRender) {
@@ -335,7 +335,7 @@ function getGridControls(scene, element, selected, elements, selectMesh) {
     if (closestGrid) {
       var _closestGrid$metadata, _closestGrid$metadata2;
       scene.getMeshesByTags('free').forEach(function (mesh) {
-        return mesh.material.alpha = 0.2;
+        return mesh.material.alpha = 0.1;
       });
       actualHQRObj.setAbsolutePosition(new Vector3(closestGrid.absolutePosition.x, closestGrid.absolutePosition.y, closestGrid.absolutePosition.z));
       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());
@@ -386,15 +386,15 @@ function getGridControls(scene, element, selected, elements, selectMesh) {
       _curGrid = scene.getMeshByName((_curGrid4 = _curGrid) === null || _curGrid4 === void 0 ? void 0 : _curGrid4.name);
       if (!_curGrid) return;
       var r = _curGrid.name.split('_');
-      (_scene$activeCamera3 = scene.activeCamera) === null || _scene$activeCamera3 === void 0 || _scene$activeCamera3.attachControl();
-      if (_curGrid.name == selected.name) return;
-      (_utilStore$viewHandle2 = utilStore.viewHandler) === null || _utilStore$viewHandle2 === void 0 || _utilStore$viewHandle2.viewPlannerHandler.onElementCopy(_curGrid.metadata.setId, _curGrid.metadata.elementId, {
+      selected.name.split('_');
+      var absoluteNewIndex = {
         x: Number(r[1]),
         y: Number(r[2]),
         z: 0
-      }).then(function () {
-        return utilStore.onElementDeleted(selected.metadata.setId, selected.metadata.elementId);
-      });
+      };
+      (_scene$activeCamera3 = scene.activeCamera) === null || _scene$activeCamera3 === void 0 || _scene$activeCamera3.attachControl();
+      if (_curGrid.metadata.planned) return;
+      (_utilStore$viewHandle2 = utilStore.viewHandler) === null || _utilStore$viewHandle2 === void 0 || _utilStore$viewHandle2.paletteViewHandler.movePlannerElement(_curGrid.metadata.setId, _curGrid.metadata.elementId, absoluteNewIndex);
     };
     element === null || element === void 0 || element.addEventListener('pointermove', onGridMove, false);
     element === null || element === void 0 || element.addEventListener('pointerup', _onGridMoveOut2, false);
@@ -423,19 +423,31 @@ function Grids () {
   }
   function setupPreviewBoxs(generalPlanningState) {
     var entries = Object.entries(generalPlanningState);
+    var isMovableToNegativeSpace = false;
     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;
+        var countX = 0;
+        var matrix = grid.matrix;
+        for (var x = 0; x < matrix.length; countX++) {
+          var _row$0$plannedElement, _row$0$plannedElement2;
+          var row = matrix[x];
+          var countY = 0;
+          for (var y = 0; y < row.length; countY++) {
+            var _cell$plannedElement$, _cell$plannedElement, _cell$plannedElement$2, _cell$plannedElement2, _gp$selectedElement, _cell$plannedElement3, _cell$plannedElement$3, _cell$plannedElement4;
+            var cell = row[y];
             if (!gp.selectedElement) 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, 0);
-            createPreviewBox('box', name, {
+            var pos = new Vector3(size.width * countX / 100, (size.height * countY + size.height / 2) / 100, 0);
+            if (cell.index.x == -1) {
+              isMovableToNegativeSpace = true;
+              pos.x = size.width * -0.01;
+              countX -= 1;
+            }
+            var box = createPreviewBox('box', name, {
               width: (size.width + 1) / 100,
               height: (size.height + 1) / 100,
               depth: (size.depth + 1) / 100
@@ -443,10 +455,15 @@ function Grids () {
               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: cell.index.y > 0 ? 'TOP' : cell.index.x < 0 ? 'LEFT' : 'RIGHT',
-              type: 'BOX'
+              type: 'BOX',
+              planned: !!cell.plannedElement
             });
-          });
-        });
+            if (gp.selectedElement.elementId == ((_cell$plannedElement3 = cell.plannedElement) === null || _cell$plannedElement3 === void 0 ? void 0 : _cell$plannedElement3.elementId)) gridStore.selectBox(box);
+            y = (_cell$plannedElement$3 = (_cell$plannedElement4 = cell.plannedElement) === null || _cell$plannedElement4 === void 0 ? void 0 : _cell$plannedElement4.area.toY) !== null && _cell$plannedElement$3 !== void 0 ? _cell$plannedElement$3 : y + 1;
+          }
+          var toX = (_row$0$plannedElement = (_row$0$plannedElement2 = row[0].plannedElement) === null || _row$0$plannedElement2 === void 0 ? void 0 : _row$0$plannedElement2.area.toX) !== null && _row$0$plannedElement !== void 0 ? _row$0$plannedElement : x + 1;
+          x = isMovableToNegativeSpace && row[0].plannedElement ? toX + 1 : toX;
+        }
         if (grid.overlapping) {
           console.warn("overlapping logic is not yet implemented");
         }
@@ -586,7 +603,7 @@ function Grids () {
       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(-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');
@@ -608,19 +625,19 @@ function Grids () {
     if (rotationY) box.rotation.y = (360 - 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;
+    box.material.alpha = type == "grid" ? 0.6 : 0;
     if (!isFree) {
       var _sceneStore$scene$get2;
       box.material = (_sceneStore$scene$get2 = sceneStore.scene.getMaterialByName('grid_invisible')) !== null && _sceneStore$scene$get2 !== void 0 ? _sceneStore$scene$get2 : new PBRMaterial('grid_invisible', sceneStore.scene);
       box.material.alpha = 0;
     }
     box.enableEdgesRendering();
-    box.edgesWidth = 0.4;
+    box.edgesWidth = type == "grid" ? 0.1 : 0;
     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);
     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;
+    box.material.alpha = type == "grid" ? 0.6 : 0;
     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);
@@ -629,9 +646,9 @@ function Grids () {
 
     // 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: size.width * 1.05,
-      height: size.height * 1.05,
-      depth: size.depth * 1.05
+      width: size.width * 1.2,
+      height: size.height * 1.2,
+      depth: size.depth * 1.2
     }, sceneStore.scene);
     fakeBBox.metadata = metadata;
     fakeBBox.parent = box;
@@ -643,17 +660,17 @@ function Grids () {
     fakeBBox.actionManager = new ActionManager(sceneStore.scene);
     fakeBBox.actionManager.hoverCursor = 'pointer';
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function () {
-      return box.edgesWidth = 0.5;
+      return box.edgesWidth = type == "grid" ? 0.1 : 0;
     }));
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPickTrigger, function () {
       return onPreviewClick(gridStore.getSelectedGrid());
     }));
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPickDownTrigger, function () {
       var _gridStore$selectedGr, _gridStore$getSelecte;
-      return ((_gridStore$selectedGr = gridStore.selectedGrid) === null || _gridStore$selectedGr === void 0 ? void 0 : _gridStore$selectedGr.id) == ((_gridStore$getSelecte = gridStore.getSelectedGrid()) === null || _gridStore$getSelecte === void 0 ? void 0 : _gridStore$getSelecte.id) && noMove == false && gridStore.onGridMove(gridStore.getSelectedGrid());
+      if (((_gridStore$selectedGr = gridStore.selectedGrid) === null || _gridStore$selectedGr === void 0 ? void 0 : _gridStore$selectedGr.id) == ((_gridStore$getSelecte = gridStore.getSelectedGrid()) === null || _gridStore$getSelecte === void 0 ? void 0 : _gridStore$getSelecte.id) && noMove == false) gridStore.onGridMove(gridStore.getSelectedGrid());
     }));
     fakeBBox.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function () {
-      return box.edgesWidth = 0.2;
+      return box.edgesWidth = type == "grid" ? 0.1 : 0;
     }));
     Tags.AddTagsTo(box, type);
     Tags.AddTagsTo(box, isFree ? 'free' : 'planned');
@@ -795,9 +812,9 @@ var GridStore = /*#__PURE__*/function () {
     key: "selectBox",
     value: function selectBox(mesh) {
       this._sceneStore.scene.getMeshesByTags('box').forEach(function (mesh) {
-        return mesh.edgesWidth = 0.2;
+        return mesh.edgesWidth = 0;
       });
-      mesh.edgesWidth = 0.7;
+      mesh.edgesWidth = 0;
       mesh.enableEdgesRendering();
       this._selectedGrid = mesh;
     }
@@ -806,9 +823,9 @@ var GridStore = /*#__PURE__*/function () {
     value: function selectGrid(mesh, gridIdx, shelfIdx, basketId, disableDelete, disableMove) {
       var _this = this;
       this._sceneStore.scene.getMeshesByTags('grid').forEach(function (mesh) {
-        return mesh.edgesWidth = 0.2;
+        return mesh.edgesWidth = 0.1;
       });
-      mesh.edgesWidth = 0.7;
+      mesh.edgesWidth = 0.1;
       mesh.enableEdgesRendering();
       this._selectedGrid = mesh;
       this._uiStore.createGridGui(this._selectedGrid, !disableDelete ? function () {
@@ -932,7 +949,7 @@ var GridStore = /*#__PURE__*/function () {
             case 15:
               this._allGrids = _context2.sent;
             case 16:
-              _context2.next = 25;
+              _context2.next = 26;
               break;
             case 18:
               this._generalPlanningState = generalPlanningState;
@@ -945,28 +962,30 @@ var GridStore = /*#__PURE__*/function () {
               return _context2.abrupt("return");
             case 23:
               this._grid.setupPreviewBoxs(generalPlanningState);
+              this._uiStore.excludePreviewBoxes();
               callback === null || callback === void 0 || callback();
-            case 25:
+            case 26:
               if (this._allGrids) {
-                _context2.next = 27;
+                _context2.next = 28;
                 break;
               }
               return _context2.abrupt("return");
-            case 27:
+            case 28:
               if (!(!((_this$_viewHandler4 = this._viewHandler) !== null && _this$_viewHandler4 !== void 0 && _this$_viewHandler4.tabgroupTypeActive('SHELFPLANNER')) || !freePlacesOnGrids && !plannedPlacesOnGrids)) {
-                _context2.next = 31;
+                _context2.next = 32;
                 break;
               }
               this._grid.deleteAllGrids();
               this._uiStore.removeGridGui();
               return _context2.abrupt("return");
-            case 31:
+            case 32:
               if (plannedPlacesOnGrids) this._grid.setupPreviewGrids(this._allGrids, plannedPlacesOnGrids, freePlacesOnGrids);
+              this._uiStore.excludePreviewBoxes();
               if (!doNotOverwrite) {
                 this._freePlacesOnGrids = freePlacesOnGrids;
                 this._plannedPlacesOnGrids = plannedPlacesOnGrids;
               }
-            case 33:
+            case 35:
             case "end":
               return _context2.stop();
           }
@@ -1910,7 +1929,7 @@ function SelHandler (_ref) {
   };
   var onElementSelected = function onElementSelected(elem, hit, doubleClick) {
     var _sceneStore$focusedEl, _sceneStore$focusedEl2;
-    var elemName = elem.name.slice(-1);
+    var elemName = elem.name.slice(elem.name.lastIndexOf('E') + 1);
     var curElemName = (_sceneStore$focusedEl = sceneStore.focusedElement) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl = _sceneStore$focusedEl.name) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl2 = _sceneStore$focusedEl.slice) === null || _sceneStore$focusedEl2 === void 0 ? void 0 : _sceneStore$focusedEl2.call(_sceneStore$focusedEl, -1);
     if (doubleClick && curElemName == elemName && hit.pickedMesh) {
       var _getParent = function getParent(mesh) {
@@ -1983,15 +2002,19 @@ var UIStore = /*#__PURE__*/function () {
       var utilStore = useUtilStoreContext();
       if (!utilStore || !utilStore.updateCam) return;
       _this._isStaticBg = overlayImage.isStaticBg;
+      _this._plane.parent = _this._scene.activeCamera;
+      _this._plane.setEnabled(true);
       if (_this._isStaticBg) {
         // no highlightlayer on static room bg
         _this.deactivateHighlightLayer();
-        _this._plane.setEnabled(true);
       } // 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);
+
+      _this.resize(function () {
+        return setTimeout(function () {
+          return _this._diffuseTexture.updateURL(overlayImage.base64, undefined, function () {
+            return _this.fadeInOverlayImage(_this._plane.visibility == 1 || !!_this._isStaticBg);
+          });
+        }, 100);
       });
     });
     this._scene = scene;
@@ -2060,6 +2083,7 @@ var UIStore = /*#__PURE__*/function () {
     this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
     if (_overlayImage) {
       this._plane.visibility = 1;
+      this._plane.setEnabled(true);
       this._isUnityComb = true;
       this._enableSSAO(false);
       if (_overlayImage.isStaticBg) this.fadeInOverlayImage(true);
@@ -2153,7 +2177,7 @@ var UIStore = /*#__PURE__*/function () {
     value: function excludePreviewBoxes() {
       var _this4 = this;
       this._scene.getMeshesByTags('box').forEach(function (m) {
-        return _this4._selectedHl.addExcludedMesh(m);
+        _this4._selectedHl.addExcludedMesh(m);
       });
     }
   }, {
@@ -2209,7 +2233,7 @@ var UIStore = /*#__PURE__*/function () {
     key: "resize",
     value: function resize(callback) {
       var _this$_runRenderLoopF;
-      if (!this._scene || !this._scene.getEngine() || !this._scene.isReady() || !this._scene.activeCamera) return;
+      if (!this._scene || !this._scene.getEngine() || !this._scene.activeCamera) return;
       (_this$_runRenderLoopF = this._runRenderLoopForTime) === null || _this$_runRenderLoopF === void 0 || _this$_runRenderLoopF.call(this, 10000);
       this._scene.getEngine().resize(true);
       // if rendering is cached it gets updated before resize is triggered, so check if the image is already correct
@@ -2245,10 +2269,12 @@ var UIStore = /*#__PURE__*/function () {
       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);
+      this.excludePreviewBoxes();
       if (this._plane.visibility == 1) this._selectedMeshes.forEach(function (_m) {
         return _m.visibility = 0;
       });
       element.getChildMeshes().forEach(function (_m) {
+        if (_m.name.includes("ABDECKPLATTE")) return;
         _m.visibility = 1;
         _this6._selectedHl.addMesh(_m, Color3.Black());
       });
@@ -2261,10 +2287,12 @@ var UIStore = /*#__PURE__*/function () {
       this.unityCombActive && ((_this$_runRenderLoopF3 = this._runRenderLoopForTime) === null || _this$_runRenderLoopF3 === void 0 ? void 0 : _this$_runRenderLoopF3.call(this, 5000));
       this._selectedHl.removeAllMeshes();
       this._selectedHl.addExcludedMesh(this._plane);
+      this.excludePreviewBoxes();
       if (this._plane.visibility == 1) element.getChildMeshes().forEach(function (_m) {
         return _m.visibility = 0;
       });
       this._selectedMeshes.forEach(function (_m) {
+        if (_m.name.includes("ABDECKPLATTE")) return;
         _m.visibility = 1;
         _this7._selectedHl.addMesh(_m, Color3.Black());
       });
@@ -2373,6 +2401,7 @@ var UIStore = /*#__PURE__*/function () {
       if (elementInfo.active) this.createTrash(guiElem, (_guiElemRightBack = guiElemRightBack) !== null && _guiElemRightBack !== void 0 ? _guiElemRightBack : guiElemLeftBack, elementInfo);
       var childMeshes = element.getChildMeshes();
       this._selectedHl.addExcludedMesh(this._plane);
+      this.excludePreviewBoxes();
       var cantSelect = (_this$_elementsInfo = this._elementsInfo) === null || _this$_elementsInfo === void 0 ? void 0 : _this$_elementsInfo.every(function (ei) {
         return ei.active;
       });
@@ -2399,7 +2428,7 @@ var UIStore = /*#__PURE__*/function () {
         } else if (!cantSelect && elementInfo.active) {
           var _m$actionManager;
           _this9._selectedMeshes = [].concat(_toConsumableArray(_this9._selectedMeshes), _toConsumableArray(childMeshes));
-          _this9._selectedHl.addMesh(m, Color3.Black());
+          if (!m.name.includes("ABDECKPLATTE")) _this9._selectedHl.addMesh(m, Color3.Black());
           (_m$actionManager = m.actionManager) === null || _m$actionManager === void 0 || _m$actionManager.dispose();
         } else {
           var _m$actionManager2;
@@ -2419,7 +2448,10 @@ var UIStore = /*#__PURE__*/function () {
         elementId: elementInfo.elementId,
         elements: []
       };
-      var bbox = element.getHierarchyBoundingVectors();
+      var bbox = element.getHierarchyBoundingVectors(true, function (m) {
+        if (m.name.includes("ABDECKPLATTE")) return false;
+        return true;
+      });
       var guiElement = new TransformNode('boxCopyButton', this._scene);
       guiElem.elements.push(guiElement);
       guiElement.billboardMode = Mesh.BILLBOARDMODE_ALL;
@@ -2430,9 +2462,9 @@ var UIStore = /*#__PURE__*/function () {
       target.height = '40px';
       var dir = (_this$_scene$activeCa = this._scene.activeCamera) === null || _this$_scene$activeCa === void 0 ? void 0 : _this$_scene$activeCa.getDirection(Axis.Z);
       switch (elementInfo.type) {
-        case 'BoxCopyLeft':
-          guiElement.position = element.absolutePosition.add(new Vector3(0, (bbox.max.y - bbox.min.y) / 2, bbox.max.z - bbox.min.z));
-          target.name = 'copyleft';
+        case 'BoxCopyRight':
+          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));
+          target.name = 'copyright';
           if (dir.z > 0) {
             target.rotation = 180 * Math.PI / 180;
           } else {
@@ -2450,20 +2482,20 @@ var UIStore = /*#__PURE__*/function () {
           target.onPointerClickObservable.add(function () {
             var _this10$_onElementCop;
             return (_this10$_onElementCop = _this10._onElementCopy) === null || _this10$_onElementCop === void 0 ? void 0 : _this10$_onElementCop.call(_this10, elementInfo.setId, elementInfo.elementId, {
-              x: -1,
+              x: 1,
               y: 0,
               z: 0
             });
           });
           break;
-        case 'BoxCopyRight':
+        case 'BoxCopyLeft':
           if (dir.z < 0) {
             target.rotation = 180 * Math.PI / 180;
           } else {
             target.rotation = 0;
           }
-          target.name = 'copyright';
-          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));
+          target.name = 'copyleft';
+          guiElement.position = element.absolutePosition.add(new Vector3(0, (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 _this10$_scene$active2;
@@ -2477,7 +2509,7 @@ var UIStore = /*#__PURE__*/function () {
           target.onPointerClickObservable.add(function () {
             var _this10$_onElementCop2;
             return (_this10$_onElementCop2 = _this10._onElementCopy) === null || _this10$_onElementCop2 === void 0 ? void 0 : _this10$_onElementCop2.call(_this10, elementInfo.setId, elementInfo.elementId, {
-              x: 1,
+              x: -1,
               y: 0,
               z: 0
             });
@@ -2485,7 +2517,7 @@ var UIStore = /*#__PURE__*/function () {
           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));
+          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 _this10$_onElementCop3;
             return (_this10$_onElementCop3 = _this10._onElementCopy) === null || _this10$_onElementCop3 === void 0 ? void 0 : _this10$_onElementCop3.call(_this10, elementInfo.setId, elementInfo.elementId, {
@@ -2506,9 +2538,7 @@ var UIStore = /*#__PURE__*/function () {
       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) {
-        return !!e.posNr;
-      }).length > elements.length) return;
+      if (!this._scene || !this._elementsInfo) return;
       this.clearGui();
       if (this._plane.parent == null) this._plane.parent = this._scene.activeCamera;
       this._selectedHl.removeAllMeshes();
@@ -2521,6 +2551,7 @@ var UIStore = /*#__PURE__*/function () {
         var element = _this11._scene.getTransformNodeByName(emnt.bbn.name);
         if (!element || _this11._uiConfig.hideUiIcons) return;
         if (elementInfo.type == 'PosNr') _this11.createPosNr(elementInfo, element, onElSelected);
+        if (elementInfo.type == 'BoxCopyLeft' || elementInfo.type == 'BoxCopyRight' || elementInfo.type == 'BoxCopyTop') _this11.createBoxCopyButtons(elementInfo, element);
       });
     }
   }, {
@@ -2852,19 +2883,37 @@ var UtilStore = /*#__PURE__*/function () {
 }();
 
 var _context;
+var Context = /*#__PURE__*/function () {
+  function Context() {
+    _classCallCheck(this, Context);
+    _defineProperty(this, "sceneStore", void 0);
+    _defineProperty(this, "utilStore", void 0);
+    _defineProperty(this, "gridStore", void 0);
+    _defineProperty(this, "uiStore", void 0);
+    makeAutoObservable(this);
+  }
+  return _createClass(Context, [{
+    key: "registerContext",
+    value: function registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig, updateCameraInformation, isMobile) {
+      this.utilStore = new UtilStore(false, viewHandler);
+      this.sceneStore = new SceneStore(scene, hqRenderScript, this.utilStore, apiConfig, jwt, onMissingGeo, updateCameraInformation);
+      this.uiStore = new UIStore(scene, this.sceneStore.enableSSAO.bind(this.sceneStore), this.utilStore, uiConfig, requestNewOverlayImage, overlayImage, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.viewPlannerHandler.onElementCopy, this.sceneStore.runRenderLoopForTime.bind(this.sceneStore), viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.tabgroupTypeActive.bind(viewHandler), isMobile, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.divaWebPlanner.getPlannerInteractionInformation.bind(viewHandler.divaWebPlanner));
+      this.gridStore = new GridStore(this.sceneStore, this.uiStore, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.plannerMode, viewHandler);
+      return {
+        utilStore: this.utilStore,
+        sceneStore: this.sceneStore,
+        uiStore: this.uiStore,
+        gridStore: this.gridStore
+      };
+    }
+  }]);
+}();
 var unregisterContext = function unregisterContext() {
   _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.bind(viewHandler), 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, uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.plannerMode, viewHandler)
-  };
+  _context = new Context();
+  return _context.registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig, updateCameraInformation, isMobile);
 };
 var useContext = function useContext() {
   var _context2, _context3, _context4, _context5;
@@ -3987,33 +4036,32 @@ function updateCam(camera, scene) {
   sceneStore.targetCameraPosition = position;
   sceneStore.cameraTargetPosition = target;
   var camInfo = {
-    horiFov: cam.fov * 180 / Math.PI,
+    horiFov: Math.round(cam.fov * 180 / Math.PI * 1000) / 1000,
     lensShiftX: 0,
     lensShiftY: 0,
     name: cam.name,
     pos: {
-      x: -cam.position.x,
-      y: cam.position.y,
-      z: cam.position.z
+      x: Math.round(-cam.position.x * 1000) / 1000,
+      y: Math.round(cam.position.y * 1000) / 1000,
+      z: Math.round(cam.position.z * 1000) / 1000
     },
     rot: {
-      x: -cam.rotation.x * 180 / Math.PI,
-      y: 180 - cam.rotation.y * 180 / Math.PI,
-      z: cam.rotation.z * 180 / Math.PI
+      x: Math.round(-cam.rotation.x * 180 / Math.PI * 1000) / 1000,
+      y: Math.round((180 - cam.rotation.y * 180 / Math.PI) * 1000) / 1000,
+      z: Math.round(cam.rotation.z * 180 / Math.PI * 1000) / 1000
     },
     targetPos: {
-      x: -cam.target.x,
-      y: cam.target.y,
-      z: cam.target.z
+      x: Math.round(-cam.target.x * 1000) / 1000,
+      y: Math.round(cam.target.y * 1000) / 1000,
+      z: Math.round(cam.target.z * 1000) / 1000
     },
-    vertFov: cam.fov * 180 / Math.PI
+    vertFov: Math.round(cam.fov * 180 / Math.PI * 1000) / 1000
   };
   (_sceneStore$updateCam = sceneStore.updateCameraInformation) === null || _sceneStore$updateCam === void 0 || _sceneStore$updateCam.call(sceneStore, camInfo);
 }
 
 var LOG = getLogger('ARViewer', 'RealTimeRenderData');
 function useRealTimeRenderData (_ref) {
-  var _sceneStore4;
   var jwt = _ref.jwt,
     apiConfig = _ref.apiConfig,
     renderjob = _ref.renderjob,
@@ -4032,11 +4080,15 @@ function useRealTimeRenderData (_ref) {
     disableToggleLoading = _ref.disableToggleLoading;
   var gameCanvas = useRef(null);
   var actions = useDivaCore().actions;
+  var _useState = useState(useContext()),
+    _useState2 = _slicedToArray(_useState, 2),
+    context = _useState2[0],
+    setContext = _useState2[1];
   var _useContext = useContext(),
     sceneStore = _useContext.sceneStore,
     uiStore = _useContext.uiStore,
-    gridStore = _useContext.gridStore,
-    utilStore = _useContext.utilStore;
+    gridStore = _useContext.gridStore;
+    _useContext.utilStore;
   DracoCompression.Configuration = {
     decoder: {
       wasmUrl: apiConfig.diva3darchive + '/draco/draco_decoder_gltf.js',
@@ -4103,7 +4155,7 @@ function useRealTimeRenderData (_ref) {
             return parser();
           case 20:
             uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
-            if ((uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.plannerMode) == 'BoxPlanner' && viewHandler !== null && viewHandler !== void 0 && viewHandler.settingsState.generalPlanningState) gridStore.getGrids('BoxPlanner', viewHandler.settingsState.generalPlanningState, undefined, undefined, false, false, uiStore.excludePreviewBoxes.bind(uiStore));else if (freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids('ShelfPlanner', undefined, freePlacesOnGrids, plannedPlacesOnGrids);
+            if ((uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.plannerMode) == 'BoxPlanner' && freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids('ShelfPlanner', undefined, freePlacesOnGrids, plannedPlacesOnGrids);else if (viewHandler !== null && viewHandler !== void 0 && viewHandler.settingsState.generalPlanningState) gridStore.getGrids('BoxPlanner', viewHandler.settingsState.generalPlanningState);
             _context2.next = 29;
             break;
           case 24:
@@ -4137,6 +4189,7 @@ function useRealTimeRenderData (_ref) {
   }
   function onFirstFrame() {
     var _callbacks$onInitiali2;
+    //sceneStore?.scene?.debugLayer?.show?.();
     sceneStore.isInitializing = false;
     sceneStore.scene.onAfterRenderObservable.removeCallback(onFirstFrame);
     if (!overlayImage && !disableToggleLoading) actions.toggleLoading('buildScene', false, false);
@@ -4186,13 +4239,7 @@ function useRealTimeRenderData (_ref) {
               }
               return _context.abrupt("return");
             case 2:
-              if (!sceneStore) {
-                _context.next = 4;
-                break;
-              }
-              return _context.abrupt("return");
-            case 4:
-              _context.next = 6;
+              _context.next = 4;
               return EngineFactory.CreateAsync(gameCanvas.current, {
                 antialias: true,
                 stencil: true,
@@ -4209,25 +4256,26 @@ function useRealTimeRenderData (_ref) {
                   wasmPath: apiConfig.diva3darchive + '/twgsl/twgsl.wasm'
                 }
               });
-            case 6:
+            case 4:
               babylonEngine = _context.sent;
               engine = babylonEngine;
               if (!disposed) {
-                _context.next = 11;
+                _context.next = 9;
                 break;
               }
               engine.dispose();
               return _context.abrupt("return");
-            case 11:
+            case 9:
               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);
+              setContext(context);
               createCams(babylonScene, viewpoint);
               sceneStore = context.sceneStore;
-              utilStore = context.utilStore;
+              context.utilStore;
               gridStore = context.gridStore;
               uiStore = context.uiStore;
               babylonScene.executeWhenReady(function () {
@@ -4238,7 +4286,7 @@ function useRealTimeRenderData (_ref) {
                 _observer = new ResizeObserver(resize);
                 _observer.observe(gameCanvas.current);
               }
-            case 24:
+            case 23:
             case "end":
               return _context.stop();
           }
@@ -4271,13 +4319,26 @@ function useRealTimeRenderData (_ref) {
     };
   }, []);
   useEffect(function () {
-    if (overlayImage && uiStore && gameCanvas.current && sceneStore && sceneStore.scene.getEngine()) {
+    function debounceUpdateWithUnityData() {
+      var _useContext2 = useContext(),
+        sceneStore = _useContext2.sceneStore,
+        uiStore = _useContext2.uiStore,
+        utilStore = _useContext2.utilStore;
+      if (!overlayImage || !uiStore || !gameCanvas.current || !sceneStore || !sceneStore.scene.getEngine()) {
+        setTimeout(function () {
+          return debounceUpdateWithUnityData();
+        }, 300);
+        return;
+      }
       if (!utilStore.updateCam) return;
       sceneStore.runRenderLoopForTime(5000);
       shadow(); // make sure the lighting is set up otherwise the image has a wrong color
-      uiStore.updateOverlayImage(overlayImage);
-      if (viewpoint) updateCam(viewpoint, sceneStore.scene);
+      sceneStore.scene.executeWhenReady(function () {
+        uiStore.updateOverlayImage(overlayImage);
+        if (viewpoint) updateCam(viewpoint, sceneStore.scene);
+      });
     }
+    debounceUpdateWithUnityData();
   }, [overlayImage]);
   useEffect(function () {
     var _sceneStore2;
@@ -4285,20 +4346,28 @@ function useRealTimeRenderData (_ref) {
     if ((freePlacesOnGrids || plannedPlacesOnGrids) && uiConfig.plannerMode != 'BoxPlanner') {
       gridStore.getGrids('ShelfPlanner', undefined, freePlacesOnGrids, plannedPlacesOnGrids);
     } else if (viewHandler.settingsState.generalPlanningState) {
+      gridStore.getGrids('BoxPlanner', viewHandler.settingsState.generalPlanningState);
       LOG.debug('rtv -> generalPlanningState: ', toJS(viewHandler.settingsState.generalPlanningState));
-      sceneStore.scene.executeWhenReady(function () {
-        return gridStore.getGrids('BoxPlanner', viewHandler.settingsState.generalPlanningState, undefined, undefined, false, false, uiStore.excludePreviewBoxes.bind(uiStore));
-      });
       sceneStore.runRenderLoopForTime(5000);
     }
   }, [viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.settingsState.generalPlanningState, freePlacesOnGrids, plannedPlacesOnGrids]);
   useEffect(function () {
-    var _sceneStore3, _sceneStore3$getEngin;
-    if (!elementsInfo || !gameCanvas.current || !((_sceneStore3 = sceneStore) !== null && _sceneStore3 !== void 0 && (_sceneStore3 = _sceneStore3.scene) !== null && _sceneStore3 !== void 0 && (_sceneStore3$getEngin = _sceneStore3.getEngine) !== null && _sceneStore3$getEngin !== void 0 && _sceneStore3$getEngin.call(_sceneStore3))) return;
+    if (!elementsInfo || !uiStore) return;
     uiStore.addElementsInfo(elementsInfo);
-    uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
-    sceneStore.runRenderLoopForTime(5000);
-  }, [elementsInfo, (_sceneStore4 = sceneStore) === null || _sceneStore4 === void 0 ? void 0 : _sceneStore4.elements]);
+    function initGuiAwaiter() {
+      if (!elementsInfo || elementsInfo.filter(function (e) {
+        return !!e.posNr;
+      }).length > sceneStore.elements.length) {
+        setTimeout(function () {
+          return initGuiAwaiter();
+        }, 1000);
+        return;
+      }
+      uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
+      sceneStore.runRenderLoopForTime(5000);
+    }
+    initGuiAwaiter();
+  }, [elementsInfo, context]);
   useEffect(function () {
     if (!gameCanvas.current || !sceneStore) return;
     if (inBackground) sceneStore.stopRenderLoop();else if (sceneStore.hasRendered) sceneStore.runRenderLoopIndefinitely();