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

package/build/esm/index.js

@@ -26,7 +26,17 @@ import { Tools, Observable, WebRequest } from '@babylonjs/core/Misc';
 import { SceneOptimizerOptions, ShadowsOptimization, RenderTargetsOptimization, SceneOptimizer } from '@babylonjs/core/Misc/sceneOptimizer';
 import { getLogger, DivaError } from '@crystaldesign/diva-core';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { Ellipse, Rectangle, Button, AdvancedDynamicTexture, TextBlock, Image } from '@babylonjs/gui';
+import { AdvancedDynamicTexture } from '@babylonjs/gui/2D/advancedDynamicTexture';
+import { Button } from '@babylonjs/gui/2D/controls/button';
+import { Ellipse } from '@babylonjs/gui/2D/controls/ellipse';
+import { Rectangle } from '@babylonjs/gui/2D/controls/rectangle';
+import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { Axis } from '@babylonjs/core/Maths/math.axis';
+import { HighlightLayer } from '@babylonjs/core/Layers/';
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { Constants } from '@babylonjs/core/Engines/constants';
 import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/math';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { Scene } from '@babylonjs/core/scene';
@@ -60,7 +70,6 @@ function GetCameraControls(camera) {
   function renderLoop() {
     var _sceneStore$updateCam;
     if (!sceneStore.doRenderControlLoop || sceneStore.isInitializing || uistore.isStaticBg) return;
-    if (sceneStore.cameraTargetPosition.x == 0 && sceneStore.cameraTargetPosition.y == 0 && sceneStore.cameraTargetPosition.z == 0) sceneStore.setCameraTarget();
     uistore.onMove();
     var stopRender = true;
     var delta = sceneStore.scene.getEngine().getDeltaTime();
@@ -883,12 +892,13 @@ function createCams(scene, viewpoint) {
       pos = _ref.pos,
       rot = _ref.rot,
       isEnabled = _ref.isEnabled,
-      parent = _ref.parent;
+      parent = _ref.parent,
+      target = _ref.target;
     var existingCam = scene.getCameraByName(name);
     if (existingCam) return existingCam;
     var camera = new UniversalCamera(name, pos, scene);
     camera.rotation = degreesToRadians(rot);
-    camera.minZ = 0.1;
+    camera.minZ = 0.01;
     camera.fov = 0.418879;
     if (isEnabled) scene.activeCamera = camera;
     if (parent) camera.parent = parent;
@@ -901,6 +911,7 @@ function createCams(scene, viewpoint) {
     if (isEnabled) {
       camera.attachControl(canvas, true);
     }
+    if (target) camera.target = target;
     return camera;
   }
   function createDefaultCam() {
@@ -912,6 +923,7 @@ function createCams(scene, viewpoint) {
       parent: undefined
     })];
   }
+  if (scene.activeCamera) return [scene.activeCamera];
   if (!viewpoint) return createDefaultCam();
   return [createCam({
     name: 'defaultCam',
@@ -920,6 +932,7 @@ function createCams(scene, viewpoint) {
     rot: vector3ToBVector3(_objectSpread(_objectSpread({}, viewpoint.rot), {}, {
       x: -viewpoint.rot.x
     })),
+    target: vector3ToBVector3(viewpoint.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01)),
     parent: undefined
   })];
 }
@@ -929,7 +942,12 @@ function updateCam(camera, scene) {
   var utilStore = useUtilStoreContext();
   var sceneStore = useSceneStoreContext();
   var cam = scene.getCameraByName('defaultCam');
-  if (!cam) return;
+  if (!cam) {
+    var _cam = createCams(scene, camera)[0];
+    sceneStore.targetCameraPosition = _cam.position;
+    sceneStore.cameraTargetPosition = _cam.target;
+    return;
+  }
   if (camera.pos.x == cam.position.x && camera.pos.y == cam.position.y && camera.pos.z == camera.pos.z) return;
   var newPos = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
   cam.position = newPos;
@@ -1656,22 +1674,25 @@ function SelHandler (_ref) {
   };
 }
 
+var arrowLeft = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.477%2013.12c-.325-.33-.487-.496-.487-.7%200-.205.162-.37.487-.7L11.825%201.174C12.553.434%2012.917.063%2013.228.19c.311.127.311.647.311%201.686v21.088c0%201.04%200%201.559-.31%201.686-.312.127-.676-.244-1.404-.986L1.477%2013.12Z%22%20fill%3D%22%234A4A4A%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220%2C5px%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
 function _createForOfIteratorHelper$5(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$5(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$5(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$5(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$5(r, a) : void 0; } }
 function _arrayLikeToArray$5(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; }
+
 /* 
   UIStore
 */
 
 var UIStore = /*#__PURE__*/function () {
-  function UIStore(scene, enableSSAO, utilStore, uiConfig, requestNewOverlayImage, _overlayImage) {
+  function UIStore(scene, enableSSAO, utilStore, uiConfig, requestNewOverlayImage, _overlayImage, onElementCopy) {
     var _this = this;
     _classCallCheck(this, UIStore);
     _defineProperty(this, "_utilStore", void 0);
     _defineProperty(this, "_uiConfig", void 0);
     _defineProperty(this, "_gui", void 0);
-    _defineProperty(this, "_overlayImage", void 0);
     _defineProperty(this, "_requestNewOverlayImage", void 0);
+    _defineProperty(this, "_onElementCopy", void 0);
     _defineProperty(this, "_timeoutId", void 0);
     _defineProperty(this, "_latestViewpoint", void 0);
     _defineProperty(this, "_guiElements", []);
@@ -1687,20 +1708,43 @@ var UIStore = /*#__PURE__*/function () {
     _defineProperty(this, "_gridGui", void 0);
     _defineProperty(this, "_isStaticBg", void 0);
     _defineProperty(this, "_elementsInfo", void 0);
+    _defineProperty(this, "_selectedHl", void 0);
+    _defineProperty(this, "_diffuseTexture", void 0);
+    _defineProperty(this, "_plane", void 0);
+    _defineProperty(this, "_selectedMeshes", []);
     _defineProperty(this, "updateOverlayImage", function (overlayImage) {
-      var _this$_overlayImage;
-      if (!overlayImage || !_this._scene || ((_this$_overlayImage = _this._overlayImage) === null || _this$_overlayImage === void 0 ? void 0 : _this$_overlayImage.source) == overlayImage.base64) return;
+      var _this$_diffuseTexture;
+      if (!overlayImage || !_this._scene || ((_this$_diffuseTexture = _this._diffuseTexture) === null || _this$_diffuseTexture === void 0 ? void 0 : _this$_diffuseTexture.url) == overlayImage.base64) return;
       _this._isStaticBg = overlayImage.isStaticBg;
-      _this._overlayImage.source = overlayImage.base64;
-      _this._overlayImage.isVisible = true;
+      _this._diffuseTexture.updateURL(overlayImage.base64);
+      _this._plane.visibility = 1;
       _this._enableSSAO(false);
     });
     this._scene = scene;
+    var plane = MeshBuilder.CreatePlane('overlayplane', {
+      size: 0.0047
+    }, scene);
+    var mat = new StandardMaterial('planeMat', scene);
+    this._diffuseTexture = new Texture('data:image/gif;base64,R0lGODlhAQABALMAAAAAAP///////////////////////////////////////////////////////////yH5BAEAAAEALAAAAAABAAEAAAQCMEQAOw==', scene);
+    mat.diffuseTexture = this._diffuseTexture;
+    mat.emissiveTexture = this._diffuseTexture;
+    mat.specularColor = Color3.Black();
+    this._plane = plane;
+    plane.material = mat;
+    var engine = this._scene.getEngine();
+    plane.scaling.x = engine.getRenderingCanvas().width / engine.getRenderingCanvas().height;
+    plane.position.z = 0.011;
+    plane.isPickable = false;
+    plane.parent = scene.activeCamera;
+    this._selectedHl = new HighlightLayer('hl', this._scene);
+    this._selectedHl.innerGlow = false;
     this._enableSSAO = enableSSAO;
     this._utilStore = utilStore;
     this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI');
+    this._gui.layer.layerMask = 0x0fffffff;
     this._gui.renderScale = 1;
     this._requestNewOverlayImage = requestNewOverlayImage;
+    this._onElementCopy = onElementCopy;
     this._uiConfig = uiConfig !== null && uiConfig !== void 0 ? uiConfig : {
       templateConfig: 'standard',
       posNumIcon: 'TOP_LEFT_BACK',
@@ -1712,13 +1756,8 @@ var UIStore = /*#__PURE__*/function () {
     }
     this._isStaticBg = _overlayImage === null || _overlayImage === void 0 ? void 0 : _overlayImage.isStaticBg;
     if (_overlayImage) {
-      this._overlayImage = new Image('overlayImage', _overlayImage.base64);
-      this._overlayImage.width = '100%';
-      this._overlayImage.height = '100%';
-      this._overlayImage.alpha = 1;
-      this._gui.addControl(this._overlayImage);
-      this._overlayImage.source = _overlayImage.base64;
-      this._overlayImage.isVisible = true;
+      this._diffuseTexture.updateURL(_overlayImage.base64);
+      this._plane.visibility = 1;
       this._enableSSAO(false);
     }
   }
@@ -1730,7 +1769,7 @@ var UIStore = /*#__PURE__*/function () {
   }, {
     key: "unityCombActive",
     get: function get() {
-      return !!this._overlayImage;
+      return !!this._plane;
     }
   }, {
     key: "initSelectionHandler",
@@ -1753,10 +1792,25 @@ var UIStore = /*#__PURE__*/function () {
         return mesh.isPickable && mesh.isReady() && mesh.isEnabled() && (!_this2._scene.cameraToUseForPointers || (_this2._scene.cameraToUseForPointers.layerMask & mesh.layerMask) !== 0);
       };
     }
+  }, {
+    key: "highlightObservable",
+    value: function highlightObservable(meshes) {
+      var _this3 = this;
+      meshes.forEach(function (m) {
+        if (_this3._plane.visibility == 1) {
+          m.material.depthFunction = Constants.ALWAYS;
+          m.material.disableColorWrite = true;
+        } else {
+          m.visibility = 1;
+          m.material.depthFunction = Constants.LESS;
+          m.material.disableColorWrite = false;
+        }
+      });
+    }
   }, {
     key: "createGridGui",
     value: function createGridGui(mesh, onClickDel) {
-      var _this3 = this;
+      var _this4 = this;
       if (!this._selectionHandler || !mesh) return;
       this.removeGridGui();
       var guiElem = new TransformNode('gridGuiElem', this._scene);
@@ -1779,10 +1833,10 @@ var UIStore = /*#__PURE__*/function () {
       dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
       dbt.onPointerClickObservable.add(onClickDel);
       dtarget.onPointerEnterObservable = new Observable(function () {
-        return dtarget.background = _this3._colors.hoverBg;
+        return dtarget.background = _this4._colors.hoverBg;
       });
       dtarget.onPointerOutObservable = new Observable(function () {
-        return dtarget.background = _this3._colors.defaultBg;
+        return dtarget.background = _this4._colors.defaultBg;
       });
       if (this._uiConfig.templateConfig == 'standard') dtarget.linkOffsetY = -48;
       dtarget.addControl(dbt);
@@ -1805,7 +1859,6 @@ var UIStore = /*#__PURE__*/function () {
     value: function resize(scene) {
       this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI', true, scene);
       this._gui.renderScale = 1;
-      if (this._overlayImage) this._overlayImage.isVisible = false;
       if (this._latestViewpoint) this._latestViewpoint.isOutdated = true;
     }
   }, {
@@ -1813,10 +1866,198 @@ var UIStore = /*#__PURE__*/function () {
     value: function addElementsInfo(elementsInfo) {
       this._elementsInfo = elementsInfo;
     }
+  }, {
+    key: "createPosNr",
+    value: function createPosNr(elementInfo, element, isBoxPlanner) {
+      var _this5 = this,
+        _this$_utilStore$view,
+        _this$_utilStore$view2;
+      var guiElem = {
+        elementId: elementInfo.elementId,
+        elements: []
+      };
+      var bbox = element.getHierarchyBoundingVectors();
+      var guiElemLeftBack = null;
+      var guiElemRightBack = null;
+      if (!isBoxPlanner) {
+        guiElemLeftBack = new TransformNode('guiElem_' + elementInfo.elementId, this._scene);
+        guiElemLeftBack.position = element.absolutePosition.add(new Vector3(0, bbox.max.y, 0));
+        guiElem.elements.push(guiElemLeftBack);
+        guiElemRightBack = undefined;
+        if (this._uiConfig.posTrashIcon == 'TOP_RIGHT_BACK' || isBoxPlanner) {
+          guiElemRightBack = new TransformNode('guiElem_' + elementInfo.elementId, this._scene);
+          var pos = new Vector3(bbox.min.x, bbox.max.y, bbox.min.z);
+          guiElemRightBack.position = pos;
+        }
+        var target = this._uiConfig.templateConfig == 'standard' ? new Ellipse('posnrEllipse') : new Rectangle('posnrRectangle');
+        if (this._uiConfig.templateConfig == 'gold') target.cornerRadius = 3;
+        guiElem.elements.push(target);
+        target.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '20px';
+        target.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '20px';
+        target.fontSize = this._uiConfig.templateConfig == 'standard' ? 50 : 20;
+        target.background = this._colors.defaultBg;
+        target.thickness = 0;
+        if (elementInfo.active) target.background = this._colors.selectedBg;
+        if (!elementInfo.selectable) target.background = '';
+        this._gui.addControl(target);
+        var label = new TextBlock('posnr_label');
+        label.color = 'Black';
+        label.fontFamily = 'Roboto';
+        label.fontWeight = '100';
+        if (elementInfo.active) label.color = 'White';
+        if (!elementInfo.selectable) label.color = 'rgb(175, 172, 172)';
+        label.text = elementInfo.posNr;
+        guiElem.elements.push(label);
+        target.addControl(label);
+        target.linkWithMesh(guiElemLeftBack);
+      } else {
+        guiElemRightBack = new TransformNode('guiElem_' + elementInfo.elementId, this._scene);
+        var _pos = new Vector3(bbox.min.x, bbox.max.y, bbox.min.z);
+        guiElemRightBack.position = _pos;
+      }
+      var childMeshes = element.getChildMeshes();
+      this._scene.onBeforeRenderObservable.add(function () {
+        return _this5.highlightObservable(childMeshes);
+      });
+      if (!elementInfo.active) {
+        childMeshes.forEach(function (m) {
+          m.visibility = 0;
+          if (!m.actionManager) m.actionManager = new ActionManager(_this5._scene);
+          m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger, function (ev) {
+            _this5._selectedHl.removeAllMeshes();
+            _this5._selectedMeshes.forEach(function (_m) {
+              return _m.visibility = 0;
+            });
+            element.getChildMeshes().forEach(function (_m) {
+              _m.visibility = 1;
+              _this5._selectedHl.addMesh(_m, Color3.Black());
+            });
+          }));
+          m.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger, function (ev) {
+            _this5._selectedHl.removeAllMeshes();
+            element.getChildMeshes().forEach(function (_m) {
+              return _m.visibility = 0;
+            });
+            _this5._selectedMeshes.forEach(function (_m) {
+              _m.visibility = 1;
+              _this5._selectedHl.addMesh(_m, Color3.Black());
+            });
+          }));
+        });
+      }
+      if (elementInfo.active && (((_this$_utilStore$view = this._utilStore.viewHandler) === null || _this$_utilStore$view === void 0 ? void 0 : _this$_utilStore$view.tabGroupState.curTabGroup.type) == 'PLANNER' || ((_this$_utilStore$view2 = this._utilStore.viewHandler) === null || _this$_utilStore$view2 === void 0 ? void 0 : _this$_utilStore$view2.tabGroupState.curTabGroup.type) == 'OPTION')) {
+        var _guiElemRightBack;
+        this._selectedMeshes = childMeshes;
+        this._selectedMeshes.forEach(function (_m) {
+          _m.visibility = 1;
+          _this5._selectedHl.addMesh(_m, Color3.Black());
+        });
+        this._selectedHl.addExcludedMesh(this._plane);
+        var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
+        guiElem.elements.push(dtarget);
+        dtarget.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
+        dtarget.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
+        dtarget.thickness = 1;
+        dtarget.background = this._colors.defaultBg;
+        var dbt = Button.CreateImageOnlyButton('buttond', this._uiConfig.templateConfig == 'standard' ? delButton : gdelButton);
+        guiElem.elements.push(dbt);
+        dbt.color = 'transparent';
+        dbt.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '60%';
+        dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
+        dbt.onPointerClickObservable.add(function () {
+          return _this5._utilStore.onElementDeleted(elementInfo.setId, elementInfo.elementId);
+        });
+        if (this._uiConfig.templateConfig == 'standard' && !guiElemRightBack) dtarget.linkOffsetY = -48;
+        dtarget.addControl(dbt);
+        this._gui.addControl(dtarget);
+        dtarget.linkWithMesh((_guiElemRightBack = guiElemRightBack) !== null && _guiElemRightBack !== void 0 ? _guiElemRightBack : guiElemLeftBack);
+      }
+      this._guiElements.push(guiElem);
+    }
+  }, {
+    key: "createBoxCopyButtons",
+    value: function createBoxCopyButtons(elementInfo, element) {
+      var _this$_scene$activeCa,
+        _this$_scene$activeCa2,
+        _this6 = this,
+        _this$_scene$activeCa3;
+      var guiElem = {
+        elementId: elementInfo.elementId,
+        elements: []
+      };
+      var bbox = element.getHierarchyBoundingVectors();
+      var guiElement = new TransformNode('boxCopyButton', this._scene);
+      guiElem.elements.push(guiElement);
+      guiElement.billboardMode = Mesh.BILLBOARDMODE_ALL;
+      var target = Button.CreateImageOnlyButton('but', arrowLeft);
+      guiElem.elements.push(target);
+      target.thickness = 0;
+      target.width = '20px';
+      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';
+          if (dir.z > 0) {
+            target.rotation = 180 * Math.PI / 180;
+          } else {
+            target.rotation = 0;
+          }
+          (_this$_scene$activeCa2 = this._scene.activeCamera) === null || _this$_scene$activeCa2 === void 0 || _this$_scene$activeCa2.onViewMatrixChangedObservable.add(function () {
+            var _this6$_scene$activeC;
+            var _dir = (_this6$_scene$activeC = _this6._scene.activeCamera) === null || _this6$_scene$activeC === void 0 ? void 0 : _this6$_scene$activeC.getDirection(Axis.Z);
+            if (_dir.z > 0) {
+              target.rotation = 180 * Math.PI / 180;
+            } else {
+              target.rotation = 0;
+            }
+          });
+          target.onPointerClickObservable.add(function () {
+            var _this6$_onElementCopy;
+            return (_this6$_onElementCopy = _this6._onElementCopy) === null || _this6$_onElementCopy === void 0 ? void 0 : _this6$_onElementCopy.call(_this6, elementInfo.setId, elementInfo.elementId, 'LEFT');
+          });
+          break;
+        case 'BoxCopyRight':
+          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));
+          guiElement.rotation = new Vector3(90 * Math.PI / 180, 0, 0);
+          (_this$_scene$activeCa3 = this._scene.activeCamera) === null || _this$_scene$activeCa3 === void 0 || _this$_scene$activeCa3.onViewMatrixChangedObservable.add(function () {
+            var _this6$_scene$activeC2;
+            var _dir = (_this6$_scene$activeC2 = _this6._scene.activeCamera) === null || _this6$_scene$activeC2 === void 0 ? void 0 : _this6$_scene$activeC2.getDirection(Axis.Z);
+            if (_dir.z < 0) {
+              target.rotation = 180 * Math.PI / 180;
+            } else {
+              target.rotation = 0;
+            }
+          });
+          target.onPointerClickObservable.add(function () {
+            var _this6$_onElementCopy2;
+            return (_this6$_onElementCopy2 = _this6._onElementCopy) === null || _this6$_onElementCopy2 === void 0 ? void 0 : _this6$_onElementCopy2.call(_this6, elementInfo.setId, elementInfo.elementId, 'RIGHT');
+          });
+          break;
+        case 'BoxCopyTop':
+          target.rotation = 90 * Math.PI / 180;
+          guiElement.position = element.absolutePosition.add(new Vector3(-(bbox.max.x - bbox.min.x) / 2, bbox.max.y - bbox.min.y, bbox.max.z - bbox.min.z));
+          target.onPointerClickObservable.add(function () {
+            var _this6$_onElementCopy3;
+            return (_this6$_onElementCopy3 = _this6._onElementCopy) === null || _this6$_onElementCopy3 === void 0 ? void 0 : _this6$_onElementCopy3.call(_this6, elementInfo.setId, elementInfo.elementId, 'TOP');
+          });
+          break;
+      }
+      this._gui.addControl(target);
+      target.linkWithMesh(guiElement);
+      this._guiElements.push(guiElem);
+    }
   }, {
     key: "initGui",
     value: function initGui(onElSelected, elements) {
-      var _this4 = this;
+      var _this7 = this;
       if (!this._selectionHandler) this.initSelectionHandler(onElSelected);
       if (!this._scene) return;
       if (!this._elementsInfo) return;
@@ -1824,36 +2065,24 @@ var UIStore = /*#__PURE__*/function () {
         return !!e.posNr;
       }).length > elements.length) return; // elementinfo update before unity -- return and wait for after buildscene
       this.clearGui();
-      var _loop = function _loop() {
-          var elementInfo = _this4._elementsInfo[idx];
-          var emnt = elements.find(function (el) {
-            return Number(el.bbn.name.slice(el.bbn.name.lastIndexOf('E') + 1, el.bbn.name.length)) == elementInfo.elementId;
-          });
-          if (!emnt || !elementInfo.posNr) return 0; // continue
-          var element = _this4._scene.getTransformNodeByName(emnt.bbn.name);
-          if (!element) return 0; // continue
-          var guiElemLeftBack = new TransformNode('guiElem_' + elementInfo.elementId, _this4._scene);
-          var bbox = element.getHierarchyBoundingVectors();
-          guiElemLeftBack.position = element.absolutePosition.add(new Vector3(0, bbox.max.y, 0));
-          guiElemRightBack = undefined;
-          if (_this4._uiConfig.posTrashIcon == 'TOP_RIGHT_BACK') {
-            guiElemRightBack = new TransformNode('guiElem_' + elementInfo.elementId, _this4._scene);
-            var pos = new Vector3(bbox.min.x, bbox.max.y, bbox.min.z);
-            guiElemRightBack.position = pos;
-          }
-          _this4.createGUIButton(guiElemLeftBack, elementInfo.posNr, elementInfo.active, elementInfo.selectable, element.parent.name, elementInfo.elementId, guiElemRightBack);
-        },
-        guiElemRightBack,
-        _ret;
-      for (var idx = this._elementsInfo.length - 1; idx >= 0; idx--) {
-        _ret = _loop();
-        if (_ret === 0) continue;
-      }
+      if (this._plane.parent == null) this._plane.parent = this._scene.activeCamera;
+      var isBoxPlanner = !this._elementsInfo.every(function (v) {
+        return v.type == 'PosNr';
+      });
+      this._elementsInfo.forEach(function (elementInfo) {
+        var emnt = elements.find(function (el) {
+          return Number(el.bbn.name.slice(el.bbn.name.lastIndexOf('E') + 1, el.bbn.name.length)) == elementInfo.elementId;
+        });
+        if (!emnt) return;
+        var element = _this7._scene.getTransformNodeByName(emnt.bbn.name);
+        if (!element) return;
+        if (elementInfo.type == 'PosNr') _this7.createPosNr(elementInfo, element, isBoxPlanner);else _this7.createBoxCopyButtons(elementInfo, element);
+      });
     }
   }, {
     key: "selectElem",
     value: function selectElem(name) {
-      var _this5 = this;
+      var _this8 = this;
       var _iterator = _createForOfIteratorHelper$5(this._gui.getControlsByType('ellipse')),
         _step;
       try {
@@ -1869,67 +2098,14 @@ var UIStore = /*#__PURE__*/function () {
       this._guiElements.forEach(function (guiElem) {
         return guiElem.elements.forEach(function (element) {
           if (element.typeName == 'label') element.color = 'Black';
-          if (element.typeName == 'Ellipse') element.color = _this5._colors.defaultBg;
+          if (element.typeName == 'Ellipse') element.color = _this8._colors.defaultBg;
           if (guiElem.elementId.toString() == name) {
-            if (element.typeName == 'label') element.color = _this5._colors.selectedBg;
+            if (element.typeName == 'label') element.color = _this8._colors.selectedBg;
             if (element.typeName == 'Ellipse') element.color = 'White';
           }
         });
       });
     }
-  }, {
-    key: "createGUIButton",
-    value: function createGUIButton(node, posNr, isSelected, isSelectable, setId, elementId, topRightNode) {
-      var _this$_utilStore$view,
-        _this6 = this;
-      var guiElem = {
-        elementId: elementId,
-        elements: []
-      };
-      var label = new TextBlock('posnr_label');
-      guiElem.elements.push(label);
-      label.color = 'Black';
-      label.fontFamily = 'Roboto';
-      label.fontWeight = '100';
-      if (isSelected) label.color = 'White';
-      if (!isSelectable) label.color = 'rgb(175, 172, 172)';
-      label.text = posNr;
-      var target = this._uiConfig.templateConfig == 'standard' ? new Ellipse('posnrEllipse') : new Rectangle('posnrRectangle');
-      if (this._uiConfig.templateConfig == 'gold') target.cornerRadius = 3;
-      guiElem.elements.push(target);
-      target.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '20px';
-      target.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '20px';
-      target.fontSize = this._uiConfig.templateConfig == 'standard' ? 50 : 20;
-      target.background = this._colors.defaultBg;
-      target.thickness = 0;
-      target.addControl(label);
-      if (isSelected) target.background = this._colors.selectedBg;
-      if (!isSelectable) target.background = '';
-      if (isSelected && ((_this$_utilStore$view = this._utilStore.viewHandler) === null || _this$_utilStore$view === void 0 ? void 0 : _this$_utilStore$view.tabGroupState.curTabGroup.type) == 'PLANNER') {
-        var dtarget = this._uiConfig.templateConfig == 'standard' ? new Ellipse('deleteEllipse') : new Rectangle('deleteEllipse');
-        guiElem.elements.push(dtarget);
-        dtarget.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
-        dtarget.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '35px';
-        dtarget.thickness = 1;
-        dtarget.background = this._colors.defaultBg;
-        var dbt = Button.CreateImageOnlyButton('buttond', this._uiConfig.templateConfig == 'standard' ? delButton : gdelButton);
-        guiElem.elements.push(dbt);
-        dbt.color = 'transparent';
-        dbt.width = this._uiConfig.templateConfig == 'standard' ? '40px' : '60%';
-        dbt.height = this._uiConfig.templateConfig == 'standard' ? '40px' : '70%';
-        dbt.onPointerClickObservable.add(function () {
-          return _this6._utilStore.onElementDeleted(setId, elementId);
-        });
-        if (this._uiConfig.templateConfig == 'standard') dtarget.linkOffsetY = -48;
-        dtarget.addControl(dbt);
-        this._gui.addControl(dtarget);
-        dtarget.linkWithMesh(topRightNode !== null && topRightNode !== void 0 ? topRightNode : node);
-      }
-      this._gui.addControl(target);
-      target.linkWithMesh(node);
-      guiElem.elements.push(node);
-      this._guiElements.push(guiElem);
-    }
   }, {
     key: "clearGui",
     value: function clearGui() {
@@ -1942,21 +2118,22 @@ var UIStore = /*#__PURE__*/function () {
       this._scene.transformNodes.forEach(function (tN) {
         return tN.name.startsWith('guiElem_') && tN.dispose();
       });
+      this._selectedHl.removeAllMeshes();
     }
   }, {
     key: "onMove",
     value: function onMove() {
-      if (!this._overlayImage) return;
-      this._overlayImage.isVisible = false;
+      if (!this._plane) return;
+      this._plane.visibility = 0;
       this._enableSSAO(true);
       this._utilStore.updateCam = false;
     }
   }, {
     key: "requestNewOverlayImage",
     value: function requestNewOverlayImage(viewpoint, focusedElement, targetCameraPosition) {
-      var _this7 = this;
+      var _this9 = this;
       //this._overlayImage exists only when unity combi is enabled
-      if (!this._overlayImage) return;
+      if (!this._plane) return;
       var elementId = undefined;
       var setId = undefined;
       var ob = this._scene.getTransformNodeByName(focusedElement.name);
@@ -1970,20 +2147,21 @@ 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 _this7$_requestNewOve;
-          _this7._utilStore.addOutstandingImage();
-          _this7._latestViewpoint = viewpoint;
-          (_this7$_requestNewOve = _this7._requestNewOverlayImage) === null || _this7$_requestNewOve === void 0 || _this7$_requestNewOve.call(_this7, viewpoint, {
+          var _this9$_requestNewOve;
+          _this9._utilStore.addOutstandingImage();
+          _this9._latestViewpoint = viewpoint;
+          console.log('requestNewOverlay Image');
+          (_this9$_requestNewOve = _this9._requestNewOverlayImage) === null || _this9$_requestNewOve === void 0 || _this9$_requestNewOve.call(_this9, viewpoint, {
             adjustZoomInUnity: false,
             onlyAdjustZoomBBChanged: false,
             rotationCenter: viewpoint.targetPos,
             elementId: elementId,
             setId: setId
           });
-          _this7._utilStore.updateCam = true;
+          _this9._utilStore.updateCam = true;
         }, 200);
       } else {
-        this._overlayImage.isVisible = true;
+        this._plane.visibility = 1;
       }
     }
   }]);
@@ -2211,7 +2389,7 @@ var unregisterContext = function unregisterContext() {
 var registerContext = function registerContext(scene, hqRenderScript, apiConfig, jwt, viewHandler, onMissingGeo, requestNewOverlayImage, overlayImage, uiConfig, updateCameraInformation) {
   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);
+  var uiStore = new UIStore(scene, sceneStore.enableSSAO.bind(sceneStore), utilStore, uiConfig, requestNewOverlayImage, overlayImage, viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.viewPlannerHandler.onElementCopy);
   return _context = {
     utilStore: utilStore,
     sceneStore: sceneStore,
@@ -2507,11 +2685,10 @@ function _findAssets() {
                     mesh.parent = null;
                     result.meshes[0].dispose();
                     mesh.name = geo.name;
-                    mesh.renderingGroupId = 0;
                     mesh.parent = cacheGroup;
                     return _context2.abrupt("return", mesh);
-                  case 21:
-                    _context2.prev = 21;
+                  case 20:
+                    _context2.prev = 20;
                     _context2.t0 = _context2["catch"](4);
                     (_sceneStore$onMissing = sceneStore.onMissingGeo) === null || _sceneStore$onMissing === void 0 || _sceneStore$onMissing.call(sceneStore);
                     utilStore.setAnalyzeDataRow({
@@ -2523,11 +2700,11 @@ function _findAssets() {
                       found: false
                     });
                     return _context2.abrupt("return", undefined);
-                  case 26:
+                  case 25:
                   case "end":
                     return _context2.stop();
                 }
-              }, _callee2, null, [[4, 21]]);
+              }, _callee2, null, [[4, 20]]);
             }));
             return _importGeo.apply(this, arguments);
           };
@@ -3418,7 +3595,7 @@ function useRealTimeRenderData (_ref) {
               }
               engine = new Engine(gameCanvas.current, true, {
                 antialias: true,
-                stencil: false,
+                stencil: true,
                 audioEngine: false
               }, true);
               engine.renderEvenInBackground = renderInBackground;
@@ -3449,7 +3626,6 @@ function useRealTimeRenderData (_ref) {
                 if (sceneStore.hasPlanned) sceneStore.doRenderControlLoop = true;
                 scene.getEngine().resize();
                 if (uiStore) {
-                  uiStore.onMove();
                   uiStore.resize(scene);
                   uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
                 }
@@ -3497,6 +3673,7 @@ function useRealTimeRenderData (_ref) {
     }
   }, [elementsInfo, (_sceneStore3 = sceneStore) === null || _sceneStore3 === void 0 ? void 0 : _sceneStore3.elements]);
   useEffect(function () {
+    if (!sceneStore) return;
     if (inBackground) {
       sceneStore.scene.getEngine().stopRenderLoop();
     } else if (sceneStore.hasRendered) {