@crystaldesign/real-time-viewer 24.15.0-beta.9 → 24.16.0-beta.1

package/build/esm/index.js

@@ -1,13 +1,13 @@
-import { useRef, useState, useEffect, memo } from 'react';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useRef, 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 _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 { Tags } from '@babylonjs/core/Misc/tags';
 import { Vector3, Matrix } 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';
@@ -26,7 +26,7 @@ import { Tools, Observable, WebRequest } from '@babylonjs/core/Misc';
 import { SceneOptimizerOptions, ShadowsOptimization, RenderTargetsOptimization, SceneOptimizer } from '@babylonjs/core/Misc/sceneOptimizer';
 import { getLogger, DivaError } from '@crystaldesign/diva-core';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { Ellipse, Rectangle, Button, TextBlock, AdvancedDynamicTexture, Image } from '@babylonjs/gui';
+import { Ellipse, Rectangle, Button, AdvancedDynamicTexture, TextBlock, Image } from '@babylonjs/gui';
 import { Matrix as Matrix$1, Vector3 as Vector3$1 } from '@babylonjs/core/Maths/math';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { Scene } from '@babylonjs/core/scene';
@@ -35,7 +35,7 @@ import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
 import { PBRMetallicRoughnessMaterial } from '@babylonjs/core/Materials/PBR/pbrMetallicRoughnessMaterial';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
 import '@babylonjs/loaders/glTF/2.0/';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 (function() {
     const env = {"STAGE":"production"};
@@ -871,9 +871,9 @@ var lightning = function lightning(diva3durl, scene, cams, isMobile, sceneStore)
   sceneStore.ssao = ssao;
 };
 
-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 createCams(scene, activeViewpoint, viewPoints) {
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function createCams(scene, viewpoint) {
   var _useUtilStoreContext = useUtilStoreContext(),
     vector3ToBVector3 = _useUtilStoreContext.vector3ToBVector3,
     degreesToRadians = _useUtilStoreContext.degreesToRadians;
@@ -912,14 +912,13 @@ function createCams(scene, activeViewpoint, viewPoints) {
       parent: undefined
     })];
   }
-  var a = activeViewpoint;
-  if (!a) return createDefaultCam();
+  if (!viewpoint) return createDefaultCam();
   return [createCam({
     name: 'defaultCam',
     isEnabled: true,
-    pos: vector3ToBVector3(a.pos).multiply(new Vector3(-0.01, 0.01, 0.01)),
-    rot: vector3ToBVector3(_objectSpread$1(_objectSpread$1({}, a.rot), {}, {
-      x: -a.rot.x
+    pos: vector3ToBVector3(viewpoint.pos).multiply(new Vector3(-0.01, 0.01, 0.01)),
+    rot: vector3ToBVector3(_objectSpread(_objectSpread({}, viewpoint.rot), {}, {
+      x: -viewpoint.rot.x
     })),
     parent: undefined
   })];
@@ -930,10 +929,11 @@ function updateCam(camera, scene) {
   var utilStore = useUtilStoreContext();
   var sceneStore = useSceneStoreContext();
   var cam = scene.getCameraByName('defaultCam');
+  if (!cam) return;
   if (camera.pos.x == cam.position.x && camera.pos.y == cam.position.y && camera.pos.z == camera.pos.z) return;
   var newPos = utilStore.vector3ToBVector3(camera.pos).multiply(new Vector3(-0.01, 0.01, 0.01));
   cam.position = newPos;
-  cam.rotation = utilStore.degreesToRadians(utilStore.vector3ToBVector3(_objectSpread$1(_objectSpread$1({}, camera.rot), {}, {
+  cam.rotation = utilStore.degreesToRadians(utilStore.vector3ToBVector3(_objectSpread(_objectSpread({}, camera.rot), {}, {
     x: -camera.rot.x
   })));
   cam.target = utilStore.vector3ToBVector3(camera.targetPos).multiply(new Vector3(-0.01, 0.01, 0.01));
@@ -1359,9 +1359,9 @@ var SceneStore = /*#__PURE__*/function () {
     }
   }, {
     key: "setResolution",
-    value: function setResolution(resolutionDiv, gameCanvas, resolution) {
-      if (!resolution || !resolutionDiv || !gameCanvas) return;
-      var boundingClientRect = resolutionDiv.getBoundingClientRect();
+    value: function setResolution(gameCanvas, resolution) {
+      if (!resolution || !gameCanvas) return;
+      var boundingClientRect = gameCanvas.getBoundingClientRect();
       var maxX = boundingClientRect.right - boundingClientRect.left;
       var maxY = boundingClientRect.bottom - boundingClientRect.top;
       var ratio = Math.min(maxX / resolution.x, maxY / resolution.y);
@@ -1376,10 +1376,10 @@ var SceneStore = /*#__PURE__*/function () {
     }
   }, {
     key: "init",
-    value: function init(diva3durl, resolutionDiv, gameCanvas, initViewpoint, viewpoints, resolution) {
+    value: function init(diva3durl, gameCanvas, viewpoint, resolution) {
       Tools.fallbackTexture = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // blank white image
-      this.setResolution(resolutionDiv, gameCanvas, resolution);
-      var cams = createCams(this._scene, initViewpoint);
+      this.setResolution(gameCanvas, resolution);
+      var cams = createCams(this._scene, viewpoint);
       this._targetCameraPosition = cams[0].position;
       lightning(diva3durl, this._scene, cams, this._utilStore.isMobile, this);
     }
@@ -1536,10 +1536,10 @@ var SceneStore = /*#__PURE__*/function () {
       var radius = Vector3.Distance(bbox.min, bbox.max) / 2;
       if (radius == Infinity) return;
       var aspectRatio = engine.getRenderHeight() / engine.getRenderWidth();
-      var distance = radius / Math.tan(cam.fov * 0.55);
+      var distance = radius / Math.tan(cam.fov);
       var direction = cam.getDirection(Vector3.Backward());
       if (aspectRatio > 1) distance *= aspectRatio;
-      var newPosition = center.add(direction.scale(distance));
+      var newPosition = center.add(direction.scale(distance * 1.7));
       if (newPosition.x == 0 && newPosition.y == 0 && newPosition.z == 0) return;
       this.cameraTargetPosition = center;
       this.targetCameraPosition = newPosition;
@@ -1644,6 +1644,9 @@ function SelHandler (_ref) {
     } else if (((_sceneStore$focusedEl = sceneStore.focusedElement) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl = _sceneStore$focusedEl.name) === null || _sceneStore$focusedEl === void 0 || (_sceneStore$focusedEl2 = _sceneStore$focusedEl.slice) === null || _sceneStore$focusedEl2 === void 0 ? void 0 : _sceneStore$focusedEl2.call(_sceneStore$focusedEl, -1)) != elemName && (doubleClick || sceneStore.selectedElement == elemName)) {
       sceneStore.focusElement(elem);
     }
+
+    // is already selected
+    if (sceneStore.selectedElement == elemName) return;
     sceneStore.selectedElement = elemName;
     uiStore.selectElem(elemName);
     onElSelected === null || onElSelected === void 0 || onElSelected(elem.parent.name, Number(elemName));
@@ -1683,6 +1686,7 @@ var UIStore = /*#__PURE__*/function () {
     });
     _defineProperty(this, "_gridGui", void 0);
     _defineProperty(this, "_isStaticBg", void 0);
+    _defineProperty(this, "_elementsInfo", void 0);
     _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;
@@ -1796,19 +1800,32 @@ var UIStore = /*#__PURE__*/function () {
       (_this$_gridGui = this._gridGui) === null || _this$_gridGui === void 0 || _this$_gridGui.gui.dispose();
       (_this$_gridGui2 = this._gridGui) === null || _this$_gridGui2 === void 0 || _this$_gridGui2.node.dispose();
     }
+  }, {
+    key: "resize",
+    value: function resize() {
+      this._gui = AdvancedDynamicTexture.CreateFullscreenUI('UI');
+      this._gui.renderScale = 1;
+      if (this._overlayImage) this._overlayImage.isVisible = false;
+      if (this._latestViewpoint) this._latestViewpoint.isOutdated = true;
+    }
+  }, {
+    key: "addElementsInfo",
+    value: function addElementsInfo(elementsInfo) {
+      this._elementsInfo = elementsInfo;
+    }
   }, {
     key: "initGui",
-    value: function initGui(onElSelected, elements, elementsInfo) {
+    value: function initGui(onElSelected, elements) {
       var _this4 = this;
       if (!this._selectionHandler) this.initSelectionHandler(onElSelected);
       if (!this._scene) return;
-      if (!elementsInfo) return;
-      if (elementsInfo.filter(function (e) {
+      if (!this._elementsInfo) return;
+      if (this._elementsInfo.filter(function (e) {
         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 = elementsInfo[idx];
+          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;
           });
@@ -1817,7 +1834,7 @@ var UIStore = /*#__PURE__*/function () {
           if (!element) return 0; // continue
           var guiElemLeftBack = new TransformNode('guiElem_' + elementInfo.elementId, _this4._scene);
           var bbox = element.getHierarchyBoundingVectors();
-          guiElemLeftBack.position = new Vector3(bbox.max.x, bbox.max.y, bbox.min.z);
+          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);
@@ -1828,7 +1845,7 @@ var UIStore = /*#__PURE__*/function () {
         },
         guiElemRightBack,
         _ret;
-      for (var idx = elementsInfo.length - 1; idx >= 0; idx--) {
+      for (var idx = this._elementsInfo.length - 1; idx >= 0; idx--) {
         _ret = _loop();
         if (_ret === 0) continue;
       }
@@ -1951,19 +1968,23 @@ var UIStore = /*#__PURE__*/function () {
         setId = set === null || set === void 0 ? void 0 : set.replace('planning_', '');
       }
       clearTimeout(this._timeoutId);
-      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, {
-          adjustZoomInUnity: false,
-          onlyAdjustZoomBBChanged: false,
-          rotationCenter: viewpoint.targetPos,
-          elementId: elementId,
-          setId: setId
-        });
-        _this7._utilStore.updateCam = true;
-      }, 200);
+      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, {
+            adjustZoomInUnity: false,
+            onlyAdjustZoomBBChanged: false,
+            rotationCenter: viewpoint.targetPos,
+            elementId: elementId,
+            setId: setId
+          });
+          _this7._utilStore.updateCam = true;
+        }, 200);
+      } else {
+        this._overlayImage.isVisible = true;
+      }
     }
   }]);
 }();
@@ -2223,6 +2244,7 @@ function caching () {
     cache = _useSceneStoreContext.cache,
     hqRenderScript = _useSceneStoreContext.hqRenderScript,
     previousHQRenderScript = _useSceneStoreContext.previousHQRenderScript;
+    _useSceneStoreContext.scene;
   var elements = undefined;
   var chaching = function chaching() {
     var _hqRenderScript$scene, _scene$nodes, _curElementRoot$nodes, _curElementRoot$nodes2, _prevElementRoot$node;
@@ -3170,14 +3192,14 @@ function shadow() {
 var parser = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _changedElements$upda;
-    var sceneStore, hasRendered, hqRenderScript, scene, cache, changedElements, utilStore, uiStore, _yield$findAssets, cacheGroup, newCache, _changedElements$upda2;
+    var sceneStore, hasRendered, hqRenderScript, scene, cache, changedElements, utilStore, _yield$findAssets, cacheGroup, newCache, _changedElements$upda2;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           sceneStore = useSceneStoreContext();
           hasRendered = sceneStore.hasRendered, hqRenderScript = sceneStore.hqRenderScript, scene = sceneStore.scene, cache = sceneStore.cache, changedElements = sceneStore.changedElements;
           utilStore = useUtilStoreContext();
-          uiStore = useUIStoreContext(); //disable elementrows from old cache
+          useUIStoreContext(); //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);
           });
@@ -3220,8 +3242,7 @@ var parser = /*#__PURE__*/function () {
           }
           utilStore.setRTVAnalyzeData();
           deacCache(cacheGroup);
-          if (uiStore.unityCombActive) updateCam(hqRenderScript.cams[0], scene);
-        case 15:
+        case 14:
         case "end":
           return _context.stop();
       }
@@ -3232,21 +3253,18 @@ var parser = /*#__PURE__*/function () {
   };
 }();
 
-function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOG = getLogger('ARViewer', 'RealTimeRenderData');
 function useRealTimeRenderData (_ref) {
-  var _initViewpoint$name;
+  var _sceneStore3;
   var jwt = _ref.jwt,
     actions = _ref.actions,
     apiConfig = _ref.apiConfig,
     renderjob = _ref.renderjob,
-    viewpoints = _ref.viewpoints,
+    viewpoint = _ref.viewpoint,
     resolution = _ref.resolution,
     viewHandler = _ref.viewHandler,
     inBackground = _ref.inBackground,
     elementsInfo = _ref.elementsInfo,
-    initViewpoint = _ref.initViewpoint,
     overlayImage = _ref.overlayImage,
     freePlacesOnGrids = _ref.freePlacesOnGrids,
     plannedPlacesOnGrids = _ref.plannedPlacesOnGrids,
@@ -3254,17 +3272,6 @@ function useRealTimeRenderData (_ref) {
     uiConfig = _ref.uiConfig,
     renderInBackground = _ref.renderInBackground;
   var gameCanvas = useRef(null);
-  var resolutionDiv = useRef(null);
-  var _useState = useState({
-      activeViewpoint: {
-        current: initViewpoint ? viewpoints === null || viewpoints === void 0 ? void 0 : viewpoints.indexOf(initViewpoint) : 0,
-        name: (_initViewpoint$name = initViewpoint === null || initViewpoint === void 0 ? void 0 : initViewpoint.name) !== null && _initViewpoint$name !== void 0 ? _initViewpoint$name : 'defaultCam'
-      },
-      allViewpoints: viewpoints
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    viewpointState = _useState2[0],
-    setViewpointState = _useState2[1];
   var sceneStore = useSceneStoreContext();
   var utilStore = useUtilStoreContext();
   var gridStore = useGridStoreContext();
@@ -3295,7 +3302,6 @@ function useRealTimeRenderData (_ref) {
   }
   function _onSceneReady() {
     _onSceneReady = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var _sceneStore$hqRenderS, getEnableUnityRtvKombi, cams, filteredCustomViewpoints, activeViewpoint, activeViewpointIdx, activeElement, _activeElement;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -3308,79 +3314,46 @@ function useRealTimeRenderData (_ref) {
             sceneStore.isInitializing = true;
             if (!overlayImage) actions.toggleLoading('buildScene', false, true);
             if (sceneStore.hasRendered) {
-              _context2.next = 11;
+              _context2.next = 9;
               break;
             }
-            getEnableUnityRtvKombi = viewHandler === null || viewHandler === void 0 ? void 0 : viewHandler.divaWebPlanner.getEnableUnityRtvKombi();
             if (inBackground) sceneStore.scene.getEngine().setHardwareScalingLevel(5);
-            sceneStore.init(apiConfig.diva3darchive + '/', resolutionDiv.current, gameCanvas.current, getEnableUnityRtvKombi ? (_sceneStore$hqRenderS = sceneStore.hqRenderScript.cams) === null || _sceneStore$hqRenderS === void 0 ? void 0 : _sceneStore$hqRenderS[0] : initViewpoint, getEnableUnityRtvKombi ? sceneStore.hqRenderScript.cams : viewpoints, resolution);
-            if (viewpoints && sceneStore.activeCamera) {
-              cams = createCams(sceneStore.scene, initViewpoint);
-              filteredCustomViewpoints = viewpoints.filter(function (vp) {
-                return cams.find(function (cam) {
-                  return cam.name == vp.name;
-                }) != undefined;
-              });
-              activeViewpoint = filteredCustomViewpoints.find(function (vp) {
-                return vp.name == sceneStore.activeCamera.name;
-              });
-              activeViewpointIdx = filteredCustomViewpoints.indexOf(activeViewpoint);
-              setViewpointState(_objectSpread(_objectSpread({}, viewpointState), {}, {
-                activeViewpoint: {
-                  current: activeViewpointIdx,
-                  name: sceneStore.activeCamera.name
-                },
-                allViewpoints: filteredCustomViewpoints
-              }));
-            }
-            _context2.next = 17;
+            sceneStore.init(apiConfig.diva3darchive + '/', gameCanvas.current, viewpoint, resolution);
+            _context2.next = 14;
             break;
-          case 11:
+          case 9:
             sceneStore.hqRenderScript = JSON.parse(renderjob);
             if (checkCachedData()) {
-              _context2.next = 17;
+              _context2.next = 14;
               break;
             }
-            if (elementsInfo) {
-              activeElement = elementsInfo.find(function (e) {
-                return e.active;
-              });
-              if (activeElement) sceneStore.selectedElement = activeElement.elementId.toString();
-              uiStore.initGui(callbacks.onElementSelected, sceneStore.elements, elementsInfo);
-            }
             if (!overlayImage) actions.toggleLoading('buildScene', false, false);
             sceneStore.isInitializing = false;
             return _context2.abrupt("return");
-          case 17:
+          case 14:
             LOG.startTransaction({
               event: 'buildScene',
               message: 'Start Building Realtime Scene',
               eventId: 'BUILD_SCENE'
             });
-            _context2.prev = 18;
-            _context2.next = 21;
+            _context2.prev = 15;
+            _context2.next = 18;
             return parser();
-          case 21:
-            if (elementsInfo) {
-              _activeElement = elementsInfo.find(function (e) {
-                return e.active;
-              });
-              if (_activeElement) sceneStore.selectedElement = _activeElement.elementId.toString();
-              uiStore.initGui(callbacks.onElementSelected, sceneStore.elements, elementsInfo);
-            }
+          case 18:
+            uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
             if (freePlacesOnGrids || plannedPlacesOnGrids) gridStore.getGrids(freePlacesOnGrids, plannedPlacesOnGrids);
-            _context2.next = 30;
+            _context2.next = 27;
             break;
-          case 25:
-            _context2.prev = 25;
-            _context2.t0 = _context2["catch"](18);
+          case 22:
+            _context2.prev = 22;
+            _context2.t0 = _context2["catch"](15);
             LOG.errorTransaction('BUILD_SCENE', 'RTS_0001', _context2.t0.message);
             LOG.error(new DivaError('Error building scene', {
               cause: _context2.t0,
               code: 'RTS_0001'
             }));
             sceneStore.isInitializing = false;
-          case 30:
+          case 27:
             if (callbacks.setGlb) {
               sceneStore.exportScene().then(function (res) {
                 var _callbacks$setGlb;
@@ -3395,11 +3368,11 @@ function useRealTimeRenderData (_ref) {
             }
             sceneStore.scene.onAfterRenderObservable.add(onFirstFrame);
             LOG.successTransaction('BUILD_SCENE');
-          case 34:
+          case 31:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[18, 25]]);
+      }, _callee2, null, [[15, 22]]);
     }));
     return _onSceneReady.apply(this, arguments);
   }
@@ -3474,7 +3447,12 @@ function useRealTimeRenderData (_ref) {
               resize = function resize() {
                 if (inBackground || !scene || !scene.getEngine()) return;
                 if (sceneStore.hasPlanned) sceneStore.doRenderControlLoop = true;
-                return scene.getEngine().resize();
+                scene.getEngine().resize();
+                if (uiStore) {
+                  uiStore.onMove();
+                  uiStore.resize();
+                  uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
+                }
               };
               if (window) {
                 window.addEventListener('resize', resize);
@@ -3500,9 +3478,24 @@ function useRealTimeRenderData (_ref) {
     asyncUseEffect();
   }, []);
   useEffect(function () {
-    if (!utilStore.updateWithUnityData) return;
     if (overlayImage && uiStore) uiStore.updateOverlayImage(overlayImage);
+    // update cam pos for start viewpoints (hqr) could be the same, since it doesn't change when rotating
   }, [overlayImage]);
+  useEffect(function () {
+    if (utilStore && viewpoint) {
+      updateCam(viewpoint, sceneStore.scene);
+    }
+  }, [viewpoint]);
+  useEffect(function () {
+    if (sceneStore && elementsInfo) {
+      var activeElement = elementsInfo.find(function (e) {
+        return e.active;
+      });
+      if (activeElement) sceneStore.selectedElement = activeElement.elementId.toString();
+      uiStore.addElementsInfo(elementsInfo);
+      uiStore.initGui(callbacks.onElementSelected, sceneStore.elements);
+    }
+  }, [elementsInfo, (_sceneStore3 = sceneStore) === null || _sceneStore3 === void 0 ? void 0 : _sceneStore3.elements]);
   useEffect(function () {
     if (inBackground) {
       sceneStore.scene.getEngine().stopRenderLoop();
@@ -3510,66 +3503,8 @@ function useRealTimeRenderData (_ref) {
       sceneStore.scene.getEngine().runRenderLoop(renderLoop);
     }
   }, [inBackground]);
-  var createViewpoint = function createViewpoint(name, global) {
-    if (!callbacks.viewpointCreated) return;
-    var cam = sceneStore.scene.activeCamera;
-    var parent = cam.parent;
-    var camRotation = utilStore.radiansToDegrees(cam.rotation);
-    var parentRotation = utilStore.radiansToDegrees(parent.rotation);
-    callbacks.viewpointCreated(name, global, {
-      position: utilStore.bvector3ToVector3(new Vector3(cam.position.x * -100, cam.position.y * 100, cam.position.z * 100)),
-      rotation: utilStore.bvector3ToVector3(new Vector3(camRotation.x - 180, camRotation.y, parentRotation.z))
-    }, {
-      position: utilStore.bvector3ToVector3(new Vector3(parent.position.x * -100, parent.position.y * 100, parent.position.z * 100)),
-      rotation: utilStore.bvector3ToVector3(new Vector3(parentRotation.x - 90, parentRotation.y + 180, parentRotation.z))
-    });
-  };
-  function nextViewpoint(forward) {
-    var _sceneStore$scene;
-    if (!sceneStore) return;
-    if (!viewpointState || !viewpointState.allViewpoints) return;
-    var scene = sceneStore.scene;
-
-    //deactivate old viewpoint
-    var oldViewpoint = scene.cameras.find(function (cam) {
-      return cam.name == viewpointState.allViewpoints[viewpointState.activeViewpoint.current].name;
-    });
-    oldViewpoint.detachControl();
-    var nextViewpointIdx = 0;
-    if (forward) {
-      nextViewpointIdx = 1;
-      if (viewpointState.allViewpoints.length == nextViewpointIdx + viewpointState.activeViewpoint.current) {
-        nextViewpointIdx = -(viewpointState.allViewpoints.length - 1);
-      }
-    } else {
-      nextViewpointIdx = -1;
-      if (viewpointState.activeViewpoint.current + nextViewpointIdx < 0) {
-        nextViewpointIdx = viewpointState.allViewpoints.length - 1;
-      }
-    }
-    var viewpoint = scene.cameras.find(function (cam) {
-      return cam.name == viewpointState.allViewpoints[viewpointState.activeViewpoint.current + nextViewpointIdx].name;
-    });
-    if (!viewpoint) throw new Error('missing viewpoint in scene');
-    setViewpointState(_objectSpread(_objectSpread({}, viewpointState), {}, {
-      activeViewpoint: {
-        current: viewpointState.activeViewpoint.current + nextViewpointIdx,
-        name: viewpoint.name
-      }
-    }));
-    scene.activeCamera = viewpoint;
-    viewpoint.attachControl((_sceneStore$scene = sceneStore.scene) === null || _sceneStore$scene === void 0 ? void 0 : _sceneStore$scene.getEngine().getRenderingCanvas(), true);
-  }
   return {
-    gameCanvas: gameCanvas,
-    resolutionDiv: resolutionDiv,
-    viewpoints: {
-      state: viewpointState,
-      methods: {
-        create: createViewpoint,
-        next: nextViewpoint
-      }
-    }
+    gameCanvas: gameCanvas
   };
 }
 
@@ -3601,142 +3536,13 @@ function styleInject(css, ref) {
 }
 
 var canvas = "canvas-gZFEa";
-var flexContainerColumn = "flex-container-column-XYHvU";
-var flexContainerRow = "flex-container-row-ENPOV";
-var createButton = "create-button-NPGTz";
-var checkBox = "check-box-2GPp1";
-var inputField = "input-field-uCQ0h";
 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";
 styleInject(css_248z);
 
-var arrowLeft = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248%22%20width%3D%2248%22%3E%3Cpath%20d%3D%22M28.05%2036%2016%2023.95%2028.05%2011.9l2.15%202.15-9.9%209.9%209.9%209.9Z%22%2F%3E%3C%2Fsvg%3E";
-
-var arrowRight = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248%22%20width%3D%2248%22%3E%3Cpath%20d%3D%22m18.75%2036-2.15-2.15%209.9-9.9-9.9-9.9%202.15-2.15L30.8%2023.95Z%22%2F%3E%3C%2Fsvg%3E";
-
-function ViewpointCreationGui(_ref) {
-  var callback = _ref.callback;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    name = _useState2[0],
-    setName = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    global = _useState4[0],
-    setGlobal = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showViewpointGui = _useState6[0],
-    setShowViewpointGui = _useState6[1];
-  return /*#__PURE__*/jsxs("div", {
-    children: [/*#__PURE__*/jsxs("div", {
-      id: "Viewpoint Gui",
-      style: showViewpointGui ? {
-        position: 'absolute',
-        width: '250px'
-      } : {
-        display: 'none'
-      },
-      className: flexContainerColumn,
-      children: [/*#__PURE__*/jsxs("div", {
-        className: flexContainerRow,
-        children: [/*#__PURE__*/jsx("input", {
-          className: inputField,
-          onChange: function onChange(e) {
-            return setName(e.target.value);
-          }
-        }), /*#__PURE__*/jsx("div", {
-          onClick: function onClick() {
-            return setShowViewpointGui(false);
-          },
-          style: {
-            width: '28px',
-            height: '34px',
-            backgroundImage: "url(".concat(arrowLeft, ")")
-          }
-        })]
-      }), /*#__PURE__*/jsxs("div", {
-        className: flexContainerRow,
-        children: [/*#__PURE__*/jsx("div", {
-          children: "Global"
-        }), /*#__PURE__*/jsx("input", {
-          type: "checkbox",
-          className: checkBox,
-          onClick: function onClick() {
-            return setGlobal(!global);
-          }
-        })]
-      }), /*#__PURE__*/jsx("button", {
-        className: createButton,
-        onClick: function onClick() {
-          return callback(name, global);
-        },
-        children: "create"
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      onClick: function onClick() {
-        return setShowViewpointGui(true);
-      },
-      style: showViewpointGui ? {
-        display: 'none'
-      } : {
-        position: 'absolute',
-        marginTop: '50px',
-        width: '30px',
-        height: '36px',
-        backgroundImage: "url(".concat(arrowRight, ")")
-      }
-    })]
-  });
-}
-function ViewpointSelectionGui(_ref2) {
-  var name = _ref2.name,
-    nextViewpoint = _ref2.nextViewpoint;
-  return /*#__PURE__*/jsxs("div", {
-    id: "viewpointSelectionGui",
-    style: {
-      position: 'absolute',
-      bottom: 5,
-      left: '41%',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    children: [/*#__PURE__*/jsx("div", {
-      id: "setLastViewpoint",
-      style: {
-        width: 50,
-        height: 35,
-        backgroundImage: "url(".concat(arrowLeft, ")")
-      },
-      onClick: function onClick() {
-        return nextViewpoint(false);
-      }
-    }), /*#__PURE__*/jsxs("div", {
-      style: {
-        paddingTop: '12px'
-      },
-      children: [" ", name, " "]
-    }), /*#__PURE__*/jsx("div", {
-      id: "setNextViewpoint",
-      style: {
-        width: 50,
-        height: 35,
-        backgroundImage: "url(".concat(arrowRight, ")")
-      },
-      onClick: function onClick() {
-        return nextViewpoint(true);
-      }
-    })]
-  });
-}
-
 var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
-  var _viewpoints$state$all;
   var _useRealTimeRenderDat = useRealTimeRenderData(props),
-    resolutionDiv = _useRealTimeRenderDat.resolutionDiv,
-    viewpoints = _useRealTimeRenderDat.viewpoints,
     gameCanvas = _useRealTimeRenderDat.gameCanvas;
-  return /*#__PURE__*/jsxs("div", {
-    ref: resolutionDiv,
+  return /*#__PURE__*/jsx("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -3745,19 +3551,7 @@ var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
       backgroundColor: 'white',
       zIndex: 2
     },
-    onKeyDown: function onKeyDown(ev) {
-      if (ev.key == 'ArrowLeft') {
-        viewpoints.methods.next(false);
-      } else if (ev.key == 'ArrowRight') {
-        viewpoints.methods.next(false);
-      }
-    },
-    children: [props.viewpoints && /*#__PURE__*/jsx(ViewpointCreationGui, {
-      callback: viewpoints.methods.create
-    }), viewpoints.state.allViewpoints && ((_viewpoints$state$all = viewpoints.state.allViewpoints) === null || _viewpoints$state$all === void 0 ? void 0 : _viewpoints$state$all.length) > 0 && /*#__PURE__*/jsx(ViewpointSelectionGui, {
-      nextViewpoint: viewpoints.methods.next,
-      name: viewpoints.state.activeViewpoint.name
-    }), /*#__PURE__*/jsx("canvas", {
+    children: /*#__PURE__*/jsx("canvas", {
       id: "gameCanvas",
       ref: gameCanvas,
       style: {
@@ -3767,11 +3561,11 @@ var RealTimeRenderer = /*#__PURE__*/memo(function (props) {
         display: 'block'
       },
       className: canvas
-    })]
+    })
   });
 }, function (prevProps, curProps) {
-  var _prevProps$overlayIma, _curProps$overlayImag, _prevProps$overlayIma2, _curProps$overlayImag2;
-  if (((_prevProps$overlayIma = prevProps.overlayImage) === null || _prevProps$overlayIma === void 0 ? void 0 : _prevProps$overlayIma.base64) != ((_curProps$overlayImag = curProps.overlayImage) === null || _curProps$overlayImag === void 0 ? void 0 : _curProps$overlayImag.base64) || ((_prevProps$overlayIma2 = prevProps.overlayImage) === null || _prevProps$overlayIma2 === void 0 ? void 0 : _prevProps$overlayIma2.isStaticBg) != ((_curProps$overlayImag2 = curProps.overlayImage) === null || _curProps$overlayImag2 === void 0 ? void 0 : _curProps$overlayImag2.isStaticBg)) return false;
+  var _prevProps$overlayIma, _curProps$overlayImag, _prevProps$overlayIma2, _curProps$overlayImag2, _curProps$overlayImag3;
+  if (((_prevProps$overlayIma = prevProps.overlayImage) === null || _prevProps$overlayIma === void 0 ? void 0 : _prevProps$overlayIma.base64) != ((_curProps$overlayImag = curProps.overlayImage) === null || _curProps$overlayImag === void 0 ? void 0 : _curProps$overlayImag.base64) || ((_prevProps$overlayIma2 = prevProps.overlayImage) === null || _prevProps$overlayIma2 === void 0 ? void 0 : _prevProps$overlayIma2.isStaticBg) != ((_curProps$overlayImag2 = curProps.overlayImage) === null || _curProps$overlayImag2 === void 0 ? void 0 : _curProps$overlayImag2.isStaticBg) || (_curProps$overlayImag3 = curProps.overlayImage) !== null && _curProps$overlayImag3 !== void 0 && _curProps$overlayImag3.isStart) return false;
   if (prevProps.renderjob != curProps.renderjob) return false;
   if (JSON.stringify(prevProps.elementsInfo) != JSON.stringify(curProps.elementsInfo)) return false;
   if (prevProps.inBackground != curProps.inBackground) return false;