@ndmspc/ndmvr 0.2.0 → 0.20220401.0

package/dist/index.js

@@ -3,7 +3,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var rxjs = require('rxjs');
-var AFRAME = _interopDefault(require('aframe'));
+var AFRAME$1 = _interopDefault(require('aframe'));
 
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
@@ -85,7 +85,7 @@ var JsrootService = /*#__PURE__*/function () {
     var secondary = projectionTargetAxis ? axisArray[1] : axisArray[0];
     var primaryAxis = "f" + secondary + "axis";
     var secondaryAxis = "f" + primary + "axis";
-    var binAxis = primary.toLowerCase() + "Max";
+    var binAxis = primary.toLowerCase() + "Pos";
 
     var h1 = _classPrivateFieldLooseBase(this, _jsroot)[_jsroot].createHistogram('TH1I', info.obj[primaryAxis].fNbins);
 
@@ -96,6 +96,7 @@ var JsrootService = /*#__PURE__*/function () {
     var currLabel = ((_info$obj$secondaryAx = info.obj[secondaryAxis].fLabels) === null || _info$obj$secondaryAx === void 0 ? void 0 : _info$obj$secondaryAx.arr.length) > 0 ? info.obj[secondaryAxis].fLabels.arr[info.bin[binAxis] - 1].fString : '';
 
     for (var n = 0; n < info.obj[primaryAxis].fNbins; n++) {
+      console.log(info.obj);
       h1.setBinContent(n + 1, projectionAxis === axisArray[0] ? info.obj.getBinContent(info.bin[binAxis], n + 1) : info.obj.getBinContent(n + 1, info.bin[binAxis]));
     }
 
@@ -108,10 +109,8 @@ var JsrootService = /*#__PURE__*/function () {
   _proto.openTH1Projection = function openTH1Projection(projectionAxis, info, idTargetElm, axisArray, projections, projIndex) {
     var _this = this;
 
-    var xLength = info.obj.fXaxis.fXmax / info.obj.fXaxis.fNbins;
-    var yLength = info.obj.fYaxis.fXmax / info.obj.fYaxis.fNbins;
-    var xBin = info.bin.xMin / xLength;
-    var yBin = info.bin.yMin / yLength;
+    var xBin = info.bin.xPos - 1;
+    var yBin = info.bin.yPos - 1;
 
     try {
       var projection = projections.fFolders.arr[xBin].fFolders.arr[yBin].fFolders.arr[projIndex || 0];
@@ -137,6 +136,8 @@ var JsrootService = /*#__PURE__*/function () {
       canvas.setAttribute('width', width);
       var svgString = new XMLSerializer().serializeToString(sourceSvgElement);
       var ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
       var DOMURL = self.URL || self.webkitURL || self;
       var img = new Image();
       var svg = new Blob([svgString], {
@@ -177,13 +178,13 @@ var styles = {
     width: '90%',
     textAlign: 'center',
     align: 'center',
-    paddingTop: 2
+    paddingTop: 4
   },
   projection: {
     display: 'block',
     margin: 'auto',
-    width: '460px',
-    height: '380px'
+    width: '420px',
+    height: '350px'
   },
   form: {
     display: 'block',
@@ -221,12 +222,15 @@ var JsrootHistogram = function JsrootHistogram(_ref) {
       setAxis = _useState[1];
 
   var _useState2 = React.useState(null),
-      data = _useState2[0],
-      setData = _useState2[1];
+      selectedBin = _useState2[0],
+      setSelectedBin = _useState2[1];
 
   var handleInputChange = function handleInputChange(event) {
-    var axis = event.target.value;
-    setAxis(axis);
+    setAxis(event.target.value);
+  };
+
+  var handleSubscription = function handleSubscription(data) {
+    setSelectedBin(data);
   };
 
   var renderForm = function renderForm() {
@@ -242,24 +246,22 @@ var JsrootHistogram = function JsrootHistogram(_ref) {
       id: "axisProjection",
       style: styles.input
     }, /*#__PURE__*/React__default.createElement("option", {
-      defaultValue: projectionAxes[0]
+      value: projectionAxes[0]
     }, histogram["f" + projectionAxes[0] + "axis"].fTitle ? histogram["f" + projectionAxes[0] + "axis"].fTitle : projectionAxes[0]), /*#__PURE__*/React__default.createElement("option", {
       value: projectionAxes[1]
     }, histogram["f" + projectionAxes[1] + "axis"].fTitle ? histogram["f" + projectionAxes[1] + "axis"].fTitle : projectionAxes[1])));
   };
 
-  var handleSubscription = function handleSubscription(data) {
-    setData(data);
-
+  var createAndDisplayProjection = function createAndDisplayProjection() {
     if (projections !== null) {
       jsrootService.openTH1Projection(axis, {
         obj: histogram,
-        bin: data
+        bin: selectedBin
       }, 'projectionContainer', projectionAxes, projections, projIndex);
     } else {
       jsrootService.createTH1Projection(axis, {
         obj: histogram,
-        bin: data
+        bin: selectedBin
       }, 'projectionContainer', projectionAxes);
       setTimeout(function () {
         jsrootService.displayImageOfProjection('projectionContainer', 'th-mapping', '500px', '500px');
@@ -269,24 +271,21 @@ var JsrootHistogram = function JsrootHistogram(_ref) {
 
   React.useEffect(function () {
     jsrootService.jsrootLibrary = window.JSROOT;
+    setSelectedBin(null);
     subscription = jsrootSubject.getServiceEvent().subscribe(handleSubscription);
     return function () {
       return subscription.unsubscribe();
     };
-  }, [axis, projections, histogram]);
-
-  if (data !== null) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: styles.box
-    }, projections === null && renderForm(), /*#__PURE__*/React__default.createElement("div", {
-      id: "projectionContainer",
-      style: styles.projection
-    }));
-  } else {
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: styles.box
-    }, /*#__PURE__*/React__default.createElement("h3", null, "Empty"));
-  }
+  }, [histogram]);
+  React.useEffect(function () {
+    if (selectedBin != null) createAndDisplayProjection();
+  }, [axis, selectedBin, projections]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: styles.box
+  }, projections === null && selectedBin !== null && renderForm(), /*#__PURE__*/React__default.createElement("div", {
+    id: "projectionContainer",
+    style: styles.projection
+  }));
 };
 
 var _subject$1 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
@@ -325,604 +324,719 @@ var CameraSubject = /*#__PURE__*/function () {
 
 var cameraSubject = new CameraSubject();
 
-var NdmVrCamera = function NdmVrCamera() {
-  var subscription;
-  var offset = 30;
-
-  var _useState = React.useState(0),
-      rotation = _useState[0],
-      setRotation = _useState[1];
+var _cameraWrapper = /*#__PURE__*/_classPrivateFieldLooseKey("cameraWrapper");
 
-  var _useState2 = React.useState(null),
-      prevPosition = _useState2[0],
-      setPrevPosition = _useState2[1];
+var _setVerticalOffset = /*#__PURE__*/_classPrivateFieldLooseKey("setVerticalOffset");
 
-  var _useState3 = React.useState('keyboard'),
-      inputDevice = _useState3[0],
-      setInputDevice = _useState3[1];
+var CameraService = function CameraService() {
+  var _this = this;
 
-  var _useState4 = React.useState(false),
-      show = _useState4[0],
-      setShow = _useState4[1];
+  Object.defineProperty(this, _cameraWrapper, {
+    writable: true,
+    value: void 0
+  });
 
-  var _useState5 = React.useState(false),
-      showProjection = _useState5[0],
-      setShowProjection = _useState5[1];
+  this.verticalMoveCamera = function (moveUp, speed) {
+    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
 
-  var handleSubscription = function handleSubscription(data) {
-    if (data.device) {
-      if (inputDevice !== data.device) setInputDevice(data.device);
-      setShow(!show);
-    } else if (data === 'shift') {
-      compileRotation();
-    } else if (data === 'show') {
-      setShowProjection(!showProjection);
+    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
+      if (moveUp) {
+        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y += speed;
+      } else {
+        if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y > 0) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y -= speed;
+      }
     }
   };
 
-  var compileRotation = function compileRotation() {
-    var currentRotation = rotation + 90;
-    if (currentRotation >= 360) currentRotation = 0;
-    setRotation(currentRotation);
-  };
+  this.horizontalMoveCamera = function (axis, increment, speed) {
+    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
 
-  var renderProjectionsBanners = function renderProjectionsBanners() {
-    return /*#__PURE__*/React__default.createElement("a-entity", {
-      position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
-      animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;",
-      material: "color: white"
-    }, /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
-      position: "-30 28 0",
-      rotation: "45 90 0",
-      material: "color:white;"
-    }, /*#__PURE__*/React__default.createElement("a-text", {
-      color: "black",
-      width: 50,
-      value: inputDevice === 'keyboard' ? 'Press C to show help panels' : 'Press Button X to show help panels',
-      position: "-20 2.8 1"
-    }), /*#__PURE__*/React__default.createElement("a-text", {
-      color: "black",
-      width: 50,
-      value: inputDevice === 'keyboard' ? 'Press V to switch to histogram view' : 'Press Button Y to switch to histogram view',
-      position: "-20 0 1"
-    }), /*#__PURE__*/React__default.createElement("a-text", {
-      color: "black",
-      width: 50,
-      value: inputDevice === 'keyboard' ? 'Press X to shift panels' : 'Press right Trigger to shift panels',
-      position: "-20 -2.8 1"
-    })), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_1",
-      scale: "80 50 2",
-      animation__position: "property: position; from: 0 0 -60; to: 0 -1 -42; delay: 0; dur: 800; easing: linear;",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: 0 0 -60; to: 0 0 -42.5; delay: 0; dur: 800; easing: linear;",
-      material: "color: white;"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_2",
-      scale: "80 50 2",
-      animation__position: "property: position; from: 60 0 0; to: 42 -1 0; delay: 200; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: 60 0 0; to: 42.5 0 0; delay: 200; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "color: white;"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_3",
-      scale: "80 50 2",
-      animation__position: "property: position; from: 0 0 60; to: 0 -1 42; delay: 400; dur: 800; easing: linear;",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: 0 0 60; to: 0 0 42.5; delay: 400; dur: 800; easing: linear;",
-      material: "color: white;"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_4",
-      scale: "80 50 2",
-      animation__position: "property: position; from: -60 0 0; to: -42 -1 0; delay: 600; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: -60 0 0; to: -42.5 0 0; delay: 600; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "color: white;"
-    }));
+    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
+      if (increment) {
+        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position[axis] += speed;
+      } else {
+        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position[axis] -= speed;
+      }
+    }
   };
 
-  var renderBannersWithControls = function renderBannersWithControls() {
-    if (inputDevice === 'keyboard') {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
-        animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;",
-        material: "color: white"
-      }, /*#__PURE__*/React__default.createElement("a-entity", {
-        geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
-        position: "-30 28 0",
-        rotation: "45 90 0",
-        material: "color: white"
-      }, /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: showProjection ? 'Press C to show help panels' : 'Press C to show projection panels',
-        position: "-20 2.8 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press V to switch to histogram view",
-        position: "-20 0 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press X to shift panels",
-        position: "-20 -2.8 1"
-      })), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -30 0 60; to: -30 0 30; delay: 0; dur: 800; easing: linear;",
-        rotation: "0 -45 0",
-        src: "./ndmvr/keyboardControls/keyboard.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -30 0 -60; to: -30 0 -30; delay: 200; dur: 800; easing: linear;",
-        rotation: "0 45 0",
-        src: "./ndmvr/keyboardControls/keyboard1.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 30 0 -60; to: 30 0 -30; delay: 400; dur: 800; easing: linear;",
-        rotation: "0 -45 0",
-        src: "./ndmvr/keyboardControls/keyboard2.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 30 0 60; to: 30 0 30; delay: 600; dur: 800; easing: linear;",
-        rotation: " 0 45 0",
-        src: "./ndmvr/keyboardControls/keyboard3.png"
-      }));
-    } else {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
-        animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;"
-      }, /*#__PURE__*/React__default.createElement("a-entity", {
-        geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
-        position: "-30 28 0",
-        rotation: "45 90 0",
-        material: "color: white"
-      }, /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: showProjection ? 'Press Button X to show help panels' : 'Press Button X to show projection panels',
-        position: "-20 2.8 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press Button Y to switch to histogram view",
-        position: "-20 0 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press right Trigger to shift panels",
-        position: "-20 -2.8 1"
-      })), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -35 0 60; to: -32 0 32; delay: 0; dur: 800; easing: linear;",
-        rotation: "-10 -45 0",
-        src: "./ndmvr/oculusControls/oculus.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -35 0 -60; to: -32 0 -32; delay: 200; dur: 800; easing: linear;",
-        rotation: "10 45 0",
-        src: "./ndmvr/oculusControls/oculus2.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 35 0 -60; to: 32 0 -32; delay: 400; dur: 800; easing: linear;",
-        rotation: "10 -45 0",
-        src: "./ndmvr/oculusControls/oculus1.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 35 0 60; to: 32 0 32; delay: 600; dur: 800; easing: linear;",
-        rotation: "-10 45 0",
-        src: "./ndmvr/oculusControls/oculus3.png"
-      }));
+  Object.defineProperty(this, _setVerticalOffset, {
+    writable: true,
+    value: function value(elm, offset, rotation) {
+      if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null && elm !== null) {
+        var newXPos = elm.object3D.position.x + 1 * elm.object3D.position.x;
+        var newZPos = elm.object3D.position.z + 1 * elm.object3D.position.z;
+        var newYPos = offset;
+
+        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation', "property: position; to: " + (newXPos + 1) + " " + newYPos + " " + (newZPos + 1) + "; dur: 100;");
+
+        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation__1', "property: rotation; to: " + _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.rotation.x + " " + rotation + " " + _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.rotation.z + "; dur: 100;");
+      }
+    }
+  });
+
+  this.setCameraPosition = function (offsets) {
+    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
+      var newZPos = _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y;
+
+      if (offsets.zOffset !== undefined) {
+        newZPos = offsets.zOffset * 2;
+      }
+
+      var newXPos = offsets.xOffset + offsets.xOffset;
+      var newYPos = offsets.yOffset + offsets.yOffset;
+      setTimeout(function () {
+        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation', "property: position; to: " + (newXPos - 3) + " " + newZPos + " " + (newYPos - 3) + "; dur: 40;");
+      }, 1800);
     }
   };
 
-  var hideMappingBanner = function hideMappingBanner() {
-    var banner = document.getElementById('th-mapping');
-    var background = document.getElementById('th-background');
+  this.setPredefinedDownPosition = function () {
+    var labelElement = document.getElementById('downLabel');
 
-    if (banner !== undefined && background !== undefined) {
-      banner.setAttribute('material', 'opacity', 0);
-      background.setAttribute('material', 'opacity', 0);
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 180);
     }
   };
 
-  var showMappingBanner = function showMappingBanner() {
-    var banner = document.getElementById('th-mapping');
-    var background = document.getElementById('th-background');
+  this.setPredefinedUpPosition = function () {
+    var labelElement = document.getElementById('upLabel');
 
-    if (banner !== undefined && background !== undefined) {
-      banner.setAttribute('material', 'opacity', 1);
-      background.setAttribute('material', 'opacity', 1);
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 0);
     }
   };
 
-  React.useEffect(function () {
-    subscription = cameraSubject.getCameraSubject().subscribe(handleSubscription);
-    return function () {
-      return subscription.unsubscribe();
-    };
-  }, [show, showProjection, rotation]);
-  React.useEffect(function () {
-    var camera = document.getElementById('camera');
+  this.setPredefinedRightPosition = function () {
+    var labelElement = document.getElementById('rightLabel');
 
-    if (!show) {
-      camera.object3D.position.y = 1.6;
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 90);
+    }
+  };
 
-      if (prevPosition !== null) {
-        camera.object3D.position.x = prevPosition.x;
-        camera.object3D.position.z = prevPosition.z;
-        camera.object3D.position.y = prevPosition.y;
-      }
+  this.setPredefinedLeftPosition = function () {
+    var labelElement = document.getElementById('leftLabel');
 
-      showMappingBanner();
-    } else {
-      setPrevPosition({
-        x: camera.object3D.position.x,
-        y: camera.object3D.position.y,
-        z: camera.object3D.position.z
-      });
-      camera.object3D.position.y = camera.object3D.position.y + offset;
-      hideMappingBanner();
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 270);
     }
-  }, [show, inputDevice]);
-  React.useEffect(function () {
-    if (showProjection) {
-      jsrootService.displayImageOfProjection('projectionContainer', 'bannerId_1', '500px', '400px');
+  };
+
+  this.setPredefinedDownPositionWithOffset = function () {
+    var labelElement = document.getElementById('downLabel');
+
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 180);
     }
-  }, [showProjection]);
-  return /*#__PURE__*/React__default.createElement("a-entity", {
-    id: "cameraWrapper",
-    rotation: "0 180 0",
-    position: "0 2 0"
-  }, show && !showProjection && renderBannersWithControls(), show && showProjection && renderProjectionsBanners(), /*#__PURE__*/React__default.createElement("a-camera", {
-    id: "camera",
-    "look-control": true,
-    "wasd-controls-enabled": "acceleration:=50"
-  }, /*#__PURE__*/React__default.createElement("a-entity", {
-    cursor: "fuse: false; fuseTimeout: 2000;",
-    raycaster: "objects: .clickable; showLine: false; far: 100;",
-    animation__click: "property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1.4 1.4 1.4; dur: 150",
-    animation__mouseenter: "property: scale; startEvents: mouseenter; from: 1 1 1; to: 1.4 1.4 1.4; dur: 180",
-    animation__mouseleave: "property: scale; startEvents: mouseleave; from: 1.4 1.4 1.4; to: 1 1 1; dur: 180",
-    line: "color: orange; opacity: 0.5",
-    far: "100",
-    position: "0 0 -1",
-    geometry: "primitive: ring; radiusInner: 0.02; radiusOuter: 0.03",
-    material: "color: white; shader: flat"
-  }), /*#__PURE__*/React__default.createElement("a-entity", {
-    "oculus-touch-controls": "hand: left",
-    "left-controller-logging": true
-  }), /*#__PURE__*/React__default.createElement("a-entity", {
-    "oculus-touch-controls": "hand: right",
-    "right-controller-logging": true
-  })));
-};
+  };
 
-var _storage = /*#__PURE__*/_classPrivateFieldLooseKey("storage");
+  this.setPredefinedUpPositionWithOffset = function () {
+    var labelElement = document.getElementById('upLabel');
 
-var _camera = /*#__PURE__*/_classPrivateFieldLooseKey("camera");
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 0);
+    }
+  };
 
-var _selectedBins = /*#__PURE__*/_classPrivateFieldLooseKey("selectedBins");
+  this.setPredefinedRightPositionWithOffset = function () {
+    var labelElement = document.getElementById('rightLabel');
 
-var _deleteCurrentBin = /*#__PURE__*/_classPrivateFieldLooseKey("deleteCurrentBin");
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 90);
+    }
+  };
 
-var NdmVrStorageService = /*#__PURE__*/function () {
-  function NdmVrStorageService() {
-    var _this = this;
+  this.setPredefinedLeftPositionWithOffset = function () {
+    var labelElement = document.getElementById('leftLabel');
 
-    Object.defineProperty(this, _storage, {
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, _camera, {
+    if (labelElement !== undefined) {
+      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 270);
+    }
+  };
+
+  _classPrivateFieldLooseBase(this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
+};
+
+var _subject$2 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
+
+var HistogramSubject = /*#__PURE__*/function () {
+  function HistogramSubject() {
+    Object.defineProperty(this, _subject$2, {
       writable: true,
       value: void 0
     });
-    Object.defineProperty(this, _selectedBins, {
-      writable: true,
-      value: []
-    });
-    Object.defineProperty(this, _deleteCurrentBin, {
-      writable: true,
-      value: function value(binData) {
-        return _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
-          return item.id !== binData.id;
-        });
-      }
-    });
+    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2] = new rxjs.Subject();
+  }
 
-    this.containThisBin = function (binData) {
-      var updatedArray = _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
-        return item.id === binData.id;
-      });
+  var _proto = HistogramSubject.prototype;
 
-      return updatedArray.length !== 0;
-    };
+  _proto.changeHistogramSectionByOffset = function changeHistogramSectionByOffset(axis, histogramType, increment, defaultRange) {
+    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next({
+      name: histogramType,
+      axis: axis,
+      increment: increment,
+      defaultRange: defaultRange
+    });
+  };
 
-    this.storeBinToLocalStorage = function (binData) {
-      if (!_this.containThisBin(binData)) {
-        _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].push(binData);
+  _proto.changeHistogramFunction = function changeHistogramFunction(typeFunction, histogramType) {
+    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next({
+      fFunction: typeFunction,
+      name: histogramType
+    });
+  };
 
-        _classPrivateFieldLooseBase(_this, _storage)[_storage].setItem('selectedBins', JSON.stringify(_classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins]));
-      }
-    };
+  _proto.changeTypeOfBinMark = function changeTypeOfBinMark(value, histogramType) {
+    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next({
+      binMarkMode: value,
+      name: histogramType
+    });
+  };
 
-    this.deleteBinFromLocalStorage = function (binData) {
-      if (_this.containThisBin(binData)) {
-        _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins] = _classPrivateFieldLooseBase(_this, _deleteCurrentBin)[_deleteCurrentBin](binData);
+  _proto.getChangedSection = function getChangedSection() {
+    return _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].asObservable();
+  };
 
-        _classPrivateFieldLooseBase(_this, _storage)[_storage].setItem('selectedBins', JSON.stringify(_classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins]));
-      }
-    };
+  return HistogramSubject;
+}();
 
-    this.getBinsFromLocalStorage = function () {
-      var selectedBins = JSON.parse(_classPrivateFieldLooseBase(_this, _storage)[_storage].getItem('selectedBins'));
+var histogramTH2Service = new HistogramSubject();
+var histogramTH3Service = new HistogramSubject();
 
-      if (selectedBins === null) {
-        return [];
-      } else {
-        return selectedBins;
-      }
-    };
+var _subject$3 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
 
-    _classPrivateFieldLooseBase(this, _storage)[_storage] = window.localStorage;
-    _classPrivateFieldLooseBase(this, _camera)[_camera] = document.getElementById('cameraWrapper');
-    _classPrivateFieldLooseBase(this, _selectedBins)[_selectedBins] = this.getBinsFromLocalStorage();
+var BinSubject = /*#__PURE__*/function () {
+  function BinSubject() {
+    Object.defineProperty(this, _subject$3, {
+      writable: true,
+      value: void 0
+    });
+    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3] = new rxjs.Subject();
   }
 
-  var _proto = NdmVrStorageService.prototype;
+  var _proto = BinSubject.prototype;
 
-  _proto.storeCurrentBinToLocalStorage = function storeCurrentBinToLocalStorage(binData) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('currentBin', JSON.stringify(binData));
+  _proto.saveSelectedBinToLocalStorage = function saveSelectedBinToLocalStorage() {
+    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(true);
   };
 
-  _proto.getCurrentBinFromLocalStorage = function getCurrentBinFromLocalStorage() {
-    var currentBin = JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem('currentBin'));
-
-    if (currentBin === undefined || currentBin === '') {
-      return null;
-    }
-
-    return currentBin;
+  _proto.deleteBinFromLocalStorage = function deleteBinFromLocalStorage() {
+    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(false);
   };
 
-  _proto.loadProperty = function loadProperty(property) {
-    return JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem(property));
+  _proto.getKeyboardEvent = function getKeyboardEvent() {
+    return _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].asObservable();
   };
 
-  _proto.storeProperty = function storeProperty(property, object) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem(property, JSON.stringify(object));
-  };
+  return BinSubject;
+}();
 
-  _proto.initHistogramData = function initHistogramData(histogram) {
-    if (histogram._typename.includes('TH3')) {
-      this.storeTH3HistogramLimits(histogram);
-    } else if (histogram._typename.includes('TH2')) {
-      this.storeTH2HistogramLimits(histogram);
-    }
-  };
+var binSubject = new BinSubject();
 
-  _proto.storeTH2Offsets = function storeTH2Offsets(xOffset, yOffset, range) {
-    var object = this.loadProperty('TH2');
-    var section;
+var keyPressed = {};
+var cameraService = new CameraService();
+var aframeObj;
+var geoAttributes;
+var toolsSelector = new rxjs.Subject();
+var activeTool;
 
-    if (object === null) {
-      object = {};
-      section = {
-        name: 'TH2',
-        xOffset: 1,
-        yOffset: 1,
-        range: 8
-      };
-    } else {
-      section = {
-        name: 'TH2',
-        xOffset: xOffset,
-        yOffset: yOffset,
-        range: range
-      };
-    }
+var handlePositioning = function handlePositioning(property, event) {
+  var difference = 0.2;
+  if (property.name === 'scale') difference = 0.01;else if (property.name === 'rotation') difference = 2;
 
-    object.section = section;
-    this.storeProperty('TH2', object);
-  };
+  if (event.key === 'ArrowDown') {
+    property.xValue = property.xValue + difference;
+  } else if (event.key === 'ArrowUp') {
+    property.xValue = property.xValue - difference;
+  } else if (event.key === '=') {
+    property.yValue = property.yValue + difference;
+  } else if (event.key === '-') {
+    property.yValue = property.yValue - difference;
+  } else if (event.key === 'ArrowRight') {
+    property.zValue = property.zValue + difference;
+  } else if (event.key === 'ArrowLeft') {
+    property.zValue = property.zValue - difference;
+  }
 
-  _proto.storeTH3Offsets = function storeTH3Offsets(xOffset, yOffset, zOffset, range) {
-    var object = this.loadProperty('TH3');
-    var section;
+  aframeObj.setAttribute(property.name, property.xValue + " " + property.yValue + " " + property.zValue);
+};
 
-    if (object === null) {
-      object = {};
-      section = {
-        name: 'TH3',
-        xOffset: 1,
-        yOffset: 1,
-        zOffset: 1,
-        range: 4
-      };
-    } else {
-      section = {
-        name: 'TH3',
-        xOffset: xOffset,
-        yOffset: yOffset,
-        zOffset: zOffset,
-        range: range
-      };
-    }
+var handleChangeHistogramSectionByDefaultRange = function handleChangeHistogramSectionByDefaultRange(event) {
+  if (event.key === 'k' || event.key === 'K') {
+    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, true);
+    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, true);
+  } else if (event.key === 'i' || event.key === 'I') {
+    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, true);
+    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, true);
+  } else if (event.key === 'u' || event.key === 'U') {
+    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, true);
+  } else if (event.key === 'o' || event.key === 'O') {
+    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, true);
+  } else if (event.key === 'l' || event.key === 'L') {
+    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, true);
+    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, true);
+  } else if (event.key === 'j' || event.key === 'J') {
+    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, true);
+    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, true);
+  }
+};
 
-    object.section = section;
-    this.storeProperty('TH3', object);
-  };
+var handleChangeHistogramSectionByOwnRange = function handleChangeHistogramSectionByOwnRange(event) {
+  if (event.key === 'k' || event.key === 'K') {
+    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, false);
+    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, false);
+  } else if (event.key === 'i' || event.key === 'I') {
+    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, false);
+    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, false);
+  } else if (event.key === 'u' || event.key === 'U') {
+    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, false);
+  } else if (event.key === 'o' || event.key === 'O') {
+    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, false);
+  } else if (event.key === 'l' || event.key === 'L') {
+    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, false);
+    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, false);
+  } else if (event.key === 'j' || event.key === 'J') {
+    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, false);
+    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, false);
+  }
+};
 
-  _proto.storeOffsets = function storeOffsets(section) {
-    if (section.name.includes('TH3') || section.name.includes('th3')) {
-      this.storeTH3Offsets(section.xOffset, section.yOffset, section.zOffset, section.range);
-    } else if (section.name.includes('TH2') || section.name.includes('th2')) {
-      this.storeTH2Offsets(section.xOffset, section.yOffset, section.range);
-    }
-  };
+var keyPressHandlerFunction = function keyPressHandlerFunction(event) {
+  keyPressed[event.key] = true;
 
-  _proto.storeFilePath = function storeFilePath(filePath) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('rootFile', filePath);
-  };
+  if (keyPressed.Z || keyPressed.z) {
+    handlePositioning(geoAttributes[0], event);
+  }
 
-  _proto.loadFilePath = function loadFilePath() {
-    var filename = _classPrivateFieldLooseBase(this, _storage)[_storage].getItem('rootFile');
+  if (keyPressed.X || keyPressed.x) {
+    handlePositioning(geoAttributes[1], event);
+  }
 
-    if (filename === null || filename === undefined) {
-      return 'defaultHistogram';
-    }
+  if (keyPressed.C || keyPressed.c) {
+    handlePositioning(geoAttributes[2], event);
+  }
 
-    return filename;
-  };
+  if (keyPressed.Shift) {
+    handleChangeHistogramSectionByOwnRange(event);
+  }
 
-  _proto.loadTH2Offsets = function loadTH2Offsets() {
-    var object = this.loadProperty('TH2');
+  handleChangeHistogramSectionByDefaultRange(event);
 
-    if (object !== null) {
-      return object.section;
-    } else {
-      return null;
-    }
-  };
+  if (event.key === ' ') {
+    cameraService.verticalMoveCamera(true, 0.3);
+  }
 
-  _proto.loadTH3Offsets = function loadTH3Offsets() {
-    var object = this.loadProperty('TH3');
+  if (event.shiftKey) {
+    cameraService.verticalMoveCamera(false, 0.3);
+  }
 
-    if (object !== null) {
-      return object.section;
-    } else {
-      return null;
-    }
-  };
+  if (event.key === '1') {
+    toolsSelector.next(1);
+    activeTool = 1;
+  }
 
-  _proto.loadOffsets = function loadOffsets(type) {
-    if (type.includes('TH3') || type.includes('th3')) {
-      return this.loadTH3Offsets();
-    } else if (type.includes('TH2') || type.includes('th2')) {
-      return this.loadTH2Offsets();
-    }
-  };
+  if (event.key === '2') {
+    toolsSelector.next(2);
+    activeTool = 2;
+  }
 
-  return NdmVrStorageService;
-}();
-var localStorageService = new NdmVrStorageService();
+  if (event.key === '3') {
+    toolsSelector.next(3);
+    activeTool = 3;
+  }
 
-var _subject$2 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
+  if (event.key === '4') {
+    toolsSelector.next(4);
+    activeTool = 4;
+  }
 
-var BinSubject = /*#__PURE__*/function () {
-  function BinSubject() {
-    Object.defineProperty(this, _subject$2, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2] = new rxjs.Subject();
+  if (event.key === '5') {
+    toolsSelector.next(5);
+    activeTool = 5;
   }
 
-  var _proto = BinSubject.prototype;
+  if (event.key === '6') {
+    toolsSelector.next(6);
+    activeTool = 6;
+  }
 
-  _proto.saveSelectedBinToLocalStorage = function saveSelectedBinToLocalStorage() {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next(true);
-  };
+  if (event.key === '7') {
+    toolsSelector.next(7);
+    activeTool = 7;
+  }
 
-  _proto.deleteBinFromLocalStorage = function deleteBinFromLocalStorage() {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next(false);
-  };
+  if (event.key === '8') {
+    toolsSelector.next(8);
+    activeTool = 8;
+  }
 
-  _proto.getKeyboardEvent = function getKeyboardEvent() {
-    return _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].asObservable();
-  };
+  if (event.key === '9') {
+    toolsSelector.next(9);
+    activeTool = 9;
+  }
 
-  return BinSubject;
-}();
+  if (event.key === '0') {
+    toolsSelector.next(0);
+    activeTool = 0;
+  }
 
-var binSubject = new BinSubject();
+  if (event.key === 'Enter') {
+    binSubject.saveSelectedBinToLocalStorage();
+    ['th-mapping', 'bannerId_1', 'bannerId_2', 'bannerId_3', 'bannerId_4'].forEach(function (targetId) {
+      if (document.getElementById(targetId) !== null) {
+        jsrootService.displayImageOfProjection('projectionContainer', targetId, '500px', '400px');
+      }
+    });
+  }
 
-var _subject$3 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
+  if (event.key === 'r' || event.key === 'R') {
+    binSubject.deleteBinFromLocalStorage();
+  }
 
-var BinDataDistributor = /*#__PURE__*/function () {
-  function BinDataDistributor() {
-    Object.defineProperty(this, _subject$3, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3] = new rxjs.Subject();
+  if (event.key === 'm' || event.key === 'M') {
+    histogramTH2Service.changeHistogramFunction('feet', 'TH2');
   }
 
-  var _proto = BinDataDistributor.prototype;
+  if (event.key === 'n' || event.key === 'N') {
+    histogramTH2Service.changeHistogramFunction('default', 'TH2');
+  }
 
-  _proto.sendDataOfTheSelectedBin = function sendDataOfTheSelectedBin(binData) {
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(binData);
-  };
+  if (event.key === 'c' || event.key === 'C') {
+    cameraSubject.setUserState();
+  }
 
-  _proto.getBinDistributor = function getBinDistributor() {
-    return _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].asObservable();
-  };
+  if (event.key === 'v' || event.key === 'V') {
+    cameraSubject.setVisibilityOfBanners('keyboard');
+  }
 
-  return BinDataDistributor;
-}();
+  if (event.key === 'x' || event.key === 'X') {
+    cameraSubject.shiftBanners();
+  }
 
-var binDataDistributor = new BinDataDistributor();
+  if (event.key === 'x' || event.key === 'X') {
+    cameraSubject.shiftBanners();
+  }
+};
 
-AFRAME.registerComponent('mouseevent', {
-  init: function init() {
-    var subscription;
-    var el = this.el;
-    var clickCount = 0;
-    var checked = false;
-    el.addEventListener('mouseenter', function setHover(evt) {
-      var _this = this;
+var switchDisplayModeOnBin = function switchDisplayModeOnBin(event) {
+  event.preventDefault();
+  var binDisplayMode;
 
-      checked = false;
-      var intersection = evt.detail.intersection;
-      subscription = binSubject.getKeyboardEvent().subscribe(function (save) {
-        if (save) {
-          localStorageService.storeBinToLocalStorage(_this.userData);
-          localStorageService.storeCurrentBinToLocalStorage(_this.userData);
-          binDataDistributor.sendDataOfTheSelectedBin(_this.userData);
-          _this.userData.markedColor = _this.userData.selectColor;
+  if (event.deltaY > 0) {
+    binDisplayMode = 1;
+  } else {
+    binDisplayMode = -1;
+  }
 
-          _this.setAttribute('material', 'opacity', '1');
+  histogramTH2Service.changeTypeOfBinMark(binDisplayMode, 'TH2');
+  histogramTH3Service.changeTypeOfBinMark(binDisplayMode, 'TH3');
+};
 
-          jsrootSubject.showBinProjection(_this.userData);
-        } else {
-          localStorageService.deleteBinFromLocalStorage(_this.userData);
-          _this.userData.markedColor = _this.userData.color;
+var getActiveTool = function getActiveTool() {
+  return activeTool;
+};
 
-          _this.setAttribute('material', 'opacity', '0.75');
-        }
-      });
+var keyReleaseHandlerFunction = function keyReleaseHandlerFunction(event) {
+  delete keyPressed[event.key];
+};
 
-      if (intersection.face.normal.x !== 0) {
-        this.setAttribute('material', 'color', this.userData.axisZ);
-      } else if (intersection.face.normal.y !== 0) {
-        this.setAttribute('material', 'color', this.userData.axisY);
-      } else {
-        this.setAttribute('material', 'color', this.userData.axisX);
-      }
+var initialKeyboardController = function initialKeyboardController(data, object) {
+  aframeObj = object;
+  geoAttributes = [data.position, data.scale, data.rotation];
 
-      this.setAttribute('material', 'opacity', '1');
-    });
-    el.addEventListener('mouseleave', function setPassive() {
-      subscription.unsubscribe();
+  for (var i = 0; i < 3; i++) {
+    aframeObj.setAttribute(geoAttributes[i].name, geoAttributes[i].xValue + " " + geoAttributes[i].yValue + " " + geoAttributes[i].zValue);
+  }
+};
 
-      if (checked === false) {
-        this.setAttribute('material', 'color', this.userData.markedColor);
-        this.setAttribute('material', 'opacity', '0.75');
-      }
+var keyboardUpdateCameraReference = function keyboardUpdateCameraReference() {
+  cameraService = new CameraService();
+};
+
+var _storage = /*#__PURE__*/_classPrivateFieldLooseKey("storage");
+
+var _camera = /*#__PURE__*/_classPrivateFieldLooseKey("camera");
+
+var _selectedBins = /*#__PURE__*/_classPrivateFieldLooseKey("selectedBins");
+
+var _deleteCurrentBin = /*#__PURE__*/_classPrivateFieldLooseKey("deleteCurrentBin");
+
+var NdmVrStorageService = /*#__PURE__*/function () {
+  function NdmVrStorageService() {
+    var _this = this;
+
+    Object.defineProperty(this, _storage, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _camera, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _selectedBins, {
+      writable: true,
+      value: []
+    });
+    Object.defineProperty(this, _deleteCurrentBin, {
+      writable: true,
+      value: function value(binData) {
+        return _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
+          return item.id !== binData.id;
+        });
+      }
+    });
+
+    this.containThisBin = function (binData) {
+      var updatedArray = _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
+        return item.id === binData.id;
+      });
+
+      return updatedArray.length !== 0;
+    };
+
+    this.storeBinToLocalStorage = function (binData) {
+      if (!_this.containThisBin(binData)) {
+        _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].push(binData);
+
+        _classPrivateFieldLooseBase(_this, _storage)[_storage].setItem('selectedBins', JSON.stringify(_classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins]));
+      }
+    };
+
+    this.deleteBinFromLocalStorage = function (binData) {
+      if (_this.containThisBin(binData)) {
+        _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins] = _classPrivateFieldLooseBase(_this, _deleteCurrentBin)[_deleteCurrentBin](binData);
+
+        _classPrivateFieldLooseBase(_this, _storage)[_storage].setItem('selectedBins', JSON.stringify(_classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins]));
+      }
+    };
+
+    this.getBinsFromLocalStorage = function () {
+      var selectedBins = JSON.parse(_classPrivateFieldLooseBase(_this, _storage)[_storage].getItem('selectedBins'));
+
+      if (selectedBins === null) {
+        return [];
+      } else {
+        return selectedBins;
+      }
+    };
+
+    _classPrivateFieldLooseBase(this, _storage)[_storage] = window.localStorage;
+    _classPrivateFieldLooseBase(this, _camera)[_camera] = document.getElementById('cameraWrapper');
+    _classPrivateFieldLooseBase(this, _selectedBins)[_selectedBins] = this.getBinsFromLocalStorage();
+  }
+
+  var _proto = NdmVrStorageService.prototype;
+
+  _proto.storeCurrentBinToLocalStorage = function storeCurrentBinToLocalStorage(binData) {
+    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('currentBin', JSON.stringify(binData));
+  };
+
+  _proto.getCurrentBinFromLocalStorage = function getCurrentBinFromLocalStorage() {
+    var currentBin = JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem('currentBin'));
+
+    if (currentBin === undefined || currentBin === '') {
+      return null;
+    }
+
+    return currentBin;
+  };
+
+  _proto.loadProperty = function loadProperty(property) {
+    return JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem(property));
+  };
+
+  _proto.storeProperty = function storeProperty(property, object) {
+    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem(property, JSON.stringify(object));
+  };
+
+  _proto.initHistogramData = function initHistogramData(histogram) {
+    if (histogram._typename.includes('TH3')) {
+      this.storeTH3HistogramLimits(histogram);
+    } else if (histogram._typename.includes('TH2')) {
+      this.storeTH2HistogramLimits(histogram);
+    }
+  };
+
+  _proto.storeTH2Offsets = function storeTH2Offsets(xOffset, yOffset, range) {
+    var object = this.loadProperty('TH2');
+    var section;
+
+    if (object === null) {
+      object = {};
+      section = {
+        name: 'TH2',
+        xOffset: 1,
+        yOffset: 1,
+        range: 8
+      };
+    } else {
+      section = {
+        name: 'TH2',
+        xOffset: xOffset,
+        yOffset: yOffset,
+        range: range
+      };
+    }
+
+    object.section = section;
+    this.storeProperty('TH2', object);
+  };
+
+  _proto.storeTH3Offsets = function storeTH3Offsets(xOffset, yOffset, zOffset, range) {
+    var object = this.loadProperty('TH3');
+    var section;
+
+    if (object === null) {
+      object = {};
+      section = {
+        name: 'TH3',
+        xOffset: 1,
+        yOffset: 1,
+        zOffset: 1,
+        range: 4
+      };
+    } else {
+      section = {
+        name: 'TH3',
+        xOffset: xOffset,
+        yOffset: yOffset,
+        zOffset: zOffset,
+        range: range
+      };
+    }
+
+    object.section = section;
+    this.storeProperty('TH3', object);
+  };
+
+  _proto.storeOffsets = function storeOffsets(section) {
+    if (section.name.includes('TH3') || section.name.includes('th3')) {
+      this.storeTH3Offsets(section.xOffset, section.yOffset, section.zOffset, section.range);
+    } else if (section.name.includes('TH2') || section.name.includes('th2')) {
+      this.storeTH2Offsets(section.xOffset, section.yOffset, section.range);
+    }
+  };
+
+  _proto.storeFilePath = function storeFilePath(filePath) {
+    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('rootFile', filePath);
+  };
+
+  _proto.loadFilePath = function loadFilePath() {
+    var filename = _classPrivateFieldLooseBase(this, _storage)[_storage].getItem('rootFile');
+
+    if (filename === null || filename === undefined) {
+      return 'defaultHistogram';
+    }
+
+    return filename;
+  };
+
+  _proto.loadTH2Offsets = function loadTH2Offsets() {
+    var object = this.loadProperty('TH2');
+
+    if (object !== null) {
+      return object.section;
+    } else {
+      return null;
+    }
+  };
+
+  _proto.loadTH3Offsets = function loadTH3Offsets() {
+    var object = this.loadProperty('TH3');
+
+    if (object !== null) {
+      return object.section;
+    } else {
+      return null;
+    }
+  };
+
+  _proto.loadOffsets = function loadOffsets(type) {
+    if (type.includes('TH3') || type.includes('th3')) {
+      return this.loadTH3Offsets();
+    } else if (type.includes('TH2') || type.includes('th2')) {
+      return this.loadTH2Offsets();
+    }
+  };
+
+  return NdmVrStorageService;
+}();
+var localStorageService = new NdmVrStorageService();
+
+var _subject$4 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
+
+var BinDataDistributor = /*#__PURE__*/function () {
+  function BinDataDistributor() {
+    Object.defineProperty(this, _subject$4, {
+      writable: true,
+      value: void 0
+    });
+    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4] = new rxjs.Subject();
+  }
+
+  var _proto = BinDataDistributor.prototype;
+
+  _proto.sendDataOfTheSelectedBin = function sendDataOfTheSelectedBin(binData) {
+    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].next(binData);
+  };
+
+  _proto.getBinDistributor = function getBinDistributor() {
+    return _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].asObservable();
+  };
+
+  return BinDataDistributor;
+}();
+
+var binDataDistributor = new BinDataDistributor();
+
+var binData = new rxjs.Subject();
+AFRAME$1.registerComponent('mouseevent', {
+  init: function init() {
+    var subscription;
+    var el = this.el;
+    var clickCount = 0;
+    var checked = false;
+    el.addEventListener('mouseenter', function setHover(evt) {
+      var _this = this;
+
+      checked = false;
+      var intersection = evt.detail.intersection;
+      subscription = binSubject.getKeyboardEvent().subscribe(function (save) {
+        if (save) {
+          localStorageService.storeBinToLocalStorage(_this.userData);
+          localStorageService.storeCurrentBinToLocalStorage(_this.userData);
+          binDataDistributor.sendDataOfTheSelectedBin(_this.userData);
+          _this.userData.markedColor = _this.userData.selectColor;
+
+          _this.setAttribute('material', 'opacity', '0.70');
+
+          jsrootSubject.showBinProjection(_this.userData);
+        } else {
+          localStorageService.deleteBinFromLocalStorage(_this.userData);
+          _this.userData.markedColor = _this.userData.color;
+
+          _this.setAttribute('material', 'opacity', '0.50');
+        }
+      });
+
+      if (intersection.face.normal.x !== 0) {
+        this.setAttribute('material', 'color', this.userData.axisZ);
+      } else if (intersection.face.normal.y !== 0) {
+        this.setAttribute('material', 'color', this.userData.axisY);
+      } else {
+        this.setAttribute('material', 'color', this.userData.axisX);
+      }
+
+      this.setAttribute('material', 'opacity', '0.70');
+    });
+    el.addEventListener('mouseleave', function setPassive() {
+      subscription.unsubscribe();
+
+      if (checked === false) {
+        this.setAttribute('material', 'color', this.userData.markedColor);
+        this.setAttribute('material', 'opacity', '0.50');
+      }
 
       clickCount = 0;
     });
@@ -956,6 +1070,12 @@ AFRAME.registerComponent('mouseevent', {
         this.setAttribute('material', 'opacity', '1');
         localStorageService.storeCurrentBinToLocalStorage(this.userData);
         jsrootSubject.showBinProjection(this.userData);
+
+        switch (getActiveTool()) {
+          case 1:
+            binData.next(this.userData);
+            break;
+        }
       }
 
       var infoBanner = document.getElementById('th2-banner');
@@ -976,524 +1096,580 @@ AFRAME.registerComponent('mouseevent', {
           planes[1].setAttribute('text', "value: " + xCor + "; color: " + this.userData.axisX + "; align: center; width: 30; height: auto;");
           planes[2].setAttribute('text', "value: " + yCor + "; color: " + this.userData.axisY + "; align: center; width: 30; height: auto;");
           planes[3].setAttribute('text', "value: " + zCor + "; color: " + this.userData.axisZ + "; align: center; width: 30; height: auto;");
-        } else {
-          var _content = "Content: " + this.userData.absoluteContent + " [" + this.userData.content + "]\n";
-
-          var _xCor = "[" + this.userData.xTitle + "] [" + this.userData.xMin + "," + this.userData.xMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-
-          var _yCor = "[" + this.userData.yTitle + "] [" + this.userData.yMin + "," + this.userData.yMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-
-          planes[0].setAttribute('text', "value: " + _content + "; color: " + this.userData.color + "; align: center; baseline: center; width: 30; height: auto;");
-          planes[1].setAttribute('text', "value: " + _xCor + "; color: " + this.userData.axisX + "; align: center; width: 30; height: auto;");
-          planes[2].setAttribute('text', "value: " + _yCor + "; color: " + this.userData.axisY + "; align: center; width: 30; height: auto;");
-        }
-      }
-    });
-  },
-  update: function update() {
-    var el = this.el;
-    el.setAttribute('material', 'color', el.userData.markedColor);
-    el.setAttribute('material', 'opacity', '0.75');
-  }
-});
-
-AFRAME.registerComponent('binth', {
-  schema: {
-    id: {
-      type: 'string'
-    },
-    typeName: {
-      type: 'string'
-    },
-    content: {
-      "default": 0
-    },
-    absoluteContent: {
-      "default": 0
-    },
-    binName: {
-      "default": ''
-    },
-    xTitle: {
-      type: 'string'
-    },
-    yTitle: {
-      type: 'string'
-    },
-    zTitle: {
-      type: 'string'
-    },
-    xMin: {
-      type: 'number'
-    },
-    yMin: {
-      type: 'number'
-    },
-    zMin: {
-      type: 'number'
-    },
-    xMax: {
-      type: 'number'
-    },
-    yMax: {
-      type: 'number'
-    },
-    zMax: {
-      type: 'number'
-    },
-    xCenter: {
-      type: 'number'
-    },
-    yCenter: {
-      type: 'number'
-    },
-    zCenter: {
-      type: 'number'
-    },
-    xWidth: {
-      type: 'number'
-    },
-    yWidth: {
-      type: 'number'
-    },
-    zWidth: {
-      type: 'number'
-    },
-    color: {
-      type: 'string'
-    },
-    axisX: {
-      type: 'string'
-    },
-    axisY: {
-      type: 'string'
-    },
-    axisZ: {
-      type: 'string'
-    },
-    selectColor: {
-      type: 'string'
-    },
-    markedColor: {
-      type: 'string'
-    }
-  },
-  init: function init() {
-    var el = this.el;
-    el.userData = {
-      typeName: this.data.typeName,
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      zTitle: this.data.zTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      zMin: this.data.zMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      zMax: this.data.zMax,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      zCenter: this.data.zCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      zWidth: this.data.zWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
-    };
-  },
-  update: function update() {
-    var el = this.el;
-    el.userData = {
-      typeName: this.data.typeName,
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      zTitle: this.data.zTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      zMin: this.data.zMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      zMax: this.data.zMax,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      zCenter: this.data.zCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      zWidth: this.data.zWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
-    };
-  }
-});
-
-var _cameraWrapper = /*#__PURE__*/_classPrivateFieldLooseKey("cameraWrapper");
-
-var _setVerticalOffset = /*#__PURE__*/_classPrivateFieldLooseKey("setVerticalOffset");
-
-var CameraService = function CameraService() {
-  var _this = this;
-
-  Object.defineProperty(this, _cameraWrapper, {
-    writable: true,
-    value: void 0
-  });
-
-  this.verticalMoveCamera = function (moveUp, speed) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
+        } else {
+          var _content = "Content: " + this.userData.absoluteContent + " [" + this.userData.content + "]\n";
 
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      if (moveUp) {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y += speed;
-      } else {
-        if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y > 0) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y -= speed;
-      }
-    }
-  };
+          var _xCor = "[" + this.userData.xTitle + "] [" + this.userData.xMin + "," + this.userData.xMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
 
-  this.horizontalMoveCamera = function (axis, increment, speed) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
+          var _yCor = "[" + this.userData.yTitle + "] [" + this.userData.yMin + "," + this.userData.yMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
 
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      if (increment) {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position[axis] += speed;
-      } else {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position[axis] -= speed;
+          planes[0].setAttribute('text', "value: " + _content + "; color: " + this.userData.color + "; align: center; baseline: center; width: 30; height: auto;");
+          planes[1].setAttribute('text', "value: " + _xCor + "; color: " + this.userData.axisX + "; align: center; width: 30; height: auto;");
+          planes[2].setAttribute('text', "value: " + _yCor + "; color: " + this.userData.axisY + "; align: center; width: 30; height: auto;");
+        }
       }
-    }
-  };
+    });
+  },
+  update: function update() {
+    var el = this.el;
+    el.setAttribute('material', 'color', el.userData.markedColor);
+    el.setAttribute('material', 'opacity', '0.75');
+  }
+});
 
-  Object.defineProperty(this, _setVerticalOffset, {
-    writable: true,
-    value: function value(elm, offset, rotation) {
-      if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null && elm !== null) {
-        var newXPos = elm.object3D.position.x + 1 * elm.object3D.position.x;
-        var newZPos = elm.object3D.position.z + 1 * elm.object3D.position.z;
-        var newYPos = offset;
+var AFRAME = window.AFRAME;
 
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation', "property: position; to: " + (newXPos + 1) + " " + newYPos + " " + (newZPos + 1) + "; dur: 100;");
+var NdmVrCamera = function NdmVrCamera() {
+  var subscription;
+  var activeToolHighlight = '0 -0.75 -1';
+  var binDataSubscription;
 
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation__1', "property: rotation; to: " + _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.rotation.x + " " + rotation + " " + _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.rotation.z + "; dur: 100;");
-      }
-    }
-  });
+  var _useState = React.useState('value: Bin data:\nX: null\nY: null\nZ: null;color: black;'),
+      selectedBinData = _useState[0],
+      setSelectedBinData = _useState[1];
 
-  this.setCameraPosition = function (offsets) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      var newZPos = _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y;
+  var offset = 30;
 
-      if (offsets.zOffset !== undefined) {
-        newZPos = offsets.zOffset * 2;
-      }
+  var _useState2 = React.useState(0),
+      rotation = _useState2[0],
+      setRotation = _useState2[1];
 
-      var newXPos = offsets.xOffset + offsets.xOffset;
-      var newYPos = offsets.yOffset + offsets.yOffset;
-      setTimeout(function () {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation', "property: position; to: " + (newXPos - 3) + " " + newZPos + " " + (newYPos - 3) + "; dur: 40;");
-      }, 1800);
-    }
-  };
+  var _useState3 = React.useState(null),
+      prevPosition = _useState3[0],
+      setPrevPosition = _useState3[1];
 
-  this.setPredefinedDownPosition = function () {
-    var labelElement = document.getElementById('downLabel');
+  var _useState4 = React.useState('keyboard'),
+      inputDevice = _useState4[0],
+      setInputDevice = _useState4[1];
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 180);
-    }
-  };
+  var _useState5 = React.useState(false),
+      show = _useState5[0],
+      setShow = _useState5[1];
 
-  this.setPredefinedUpPosition = function () {
-    var labelElement = document.getElementById('upLabel');
+  var _useState6 = React.useState(false),
+      showProjection = _useState6[0],
+      setShowProjection = _useState6[1];
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 0);
-    }
-  };
+  var _useState7 = React.useState(3),
+      activeTool = _useState7[0],
+      setActiveTool = _useState7[1];
 
-  this.setPredefinedRightPosition = function () {
-    var labelElement = document.getElementById('rightLabel');
+  toolsSelector.subscribe(function (value) {
+    setActiveTool(value);
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 90);
+    if (value === 1) {
+      binDataSubscription = binData.subscribe(function (value) {
+        return setSelectedBinData(String('value: Bin data:\n' + 'X: ' + value.xPos + '\n' + 'Y: ' + value.yPos + '\n' + 'Z: ' + value.zPos + '; color: black;'));
+      });
+    } else {
+      if (binDataSubscription) binDataSubscription.unsubscribe();
     }
-  };
+  });
 
-  this.setPredefinedLeftPosition = function () {
-    var labelElement = document.getElementById('leftLabel');
+  var handleSubscription = function handleSubscription(data) {
+    if (data.device) {
+      if (inputDevice !== data.device) {
+        setInputDevice(data.device);
+      }
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 270);
+      setShow(!show);
+    } else if (data === 'shift') {
+      compileRotation();
+    } else if (data === 'show') {
+      setShowProjection(!showProjection);
     }
   };
 
-  this.setPredefinedDownPositionWithOffset = function () {
-    var labelElement = document.getElementById('downLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 180);
-    }
+  var compileRotation = function compileRotation() {
+    var currentRotation = rotation + 90;
+    if (currentRotation >= 360) currentRotation = 0;
+    setRotation(currentRotation);
   };
 
-  this.setPredefinedUpPositionWithOffset = function () {
-    var labelElement = document.getElementById('upLabel');
+  var renderProjectionsBanners = function renderProjectionsBanners() {
+    return /*#__PURE__*/React__default.createElement("a-entity", {
+      position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
+      animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;",
+      material: "color: white"
+    }, /*#__PURE__*/React__default.createElement("a-entity", {
+      geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
+      position: "-30 28 0",
+      rotation: "45 90 0",
+      material: "color:white;"
+    }, /*#__PURE__*/React__default.createElement("a-text", {
+      color: "black",
+      width: 50,
+      value: inputDevice === 'keyboard' ? 'Press C to show help panels' : 'Press Button X to show help panels',
+      position: "-20 2.8 1"
+    }), /*#__PURE__*/React__default.createElement("a-text", {
+      color: "black",
+      width: 50,
+      value: inputDevice === 'keyboard' ? 'Press V to switch to histogram view' : 'Press Button Y to switch to histogram view',
+      position: "-20 0 1"
+    }), /*#__PURE__*/React__default.createElement("a-text", {
+      color: "black",
+      width: 50,
+      value: inputDevice === 'keyboard' ? 'Press X to shift panels' : 'Press right Trigger to shift panels',
+      position: "-20 -2.8 1"
+    })), /*#__PURE__*/React__default.createElement("a-box", {
+      id: "bannerId_1",
+      scale: "80 50 2",
+      animation__position: "property: position; from: 0 0 -60; to: 0 -1 -42; delay: 0; dur: 800; easing: linear;",
+      material: "transparent:true"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      scale: "80 52 2",
+      animation__position: "property: position; from: 0 0 -60; to: 0 0 -42.5; delay: 0; dur: 800; easing: linear;",
+      material: "color: white;"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      id: "bannerId_2",
+      scale: "80 50 2",
+      animation__position: "property: position; from: 60 0 0; to: 42 -1 0; delay: 200; dur: 800; easing: linear;",
+      rotation: "0 90 0",
+      material: "transparent:true"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      scale: "80 52 2",
+      animation__position: "property: position; from: 60 0 0; to: 42.5 0 0; delay: 200; dur: 800; easing: linear;",
+      rotation: "0 90 0",
+      material: "color: white;"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      id: "bannerId_3",
+      scale: "80 50 2",
+      animation__position: "property: position; from: 0 0 60; to: 0 -1 42; delay: 400; dur: 800; easing: linear;",
+      material: "transparent:true"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      scale: "80 52 2",
+      animation__position: "property: position; from: 0 0 60; to: 0 0 42.5; delay: 400; dur: 800; easing: linear;",
+      material: "color: white;"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      id: "bannerId_4",
+      scale: "80 50 2",
+      animation__position: "property: position; from: -60 0 0; to: -42 -1 0; delay: 600; dur: 800; easing: linear;",
+      rotation: "0 90 0",
+      material: "transparent:true"
+    }), /*#__PURE__*/React__default.createElement("a-box", {
+      scale: "80 52 2",
+      animation__position: "property: position; from: -60 0 0; to: -42.5 0 0; delay: 600; dur: 800; easing: linear;",
+      rotation: "0 90 0",
+      material: "color: white;"
+    }));
+  };
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 0);
+  var renderBannersWithControls = function renderBannersWithControls() {
+    if (inputDevice === 'keyboard') {
+      return /*#__PURE__*/React__default.createElement("a-entity", {
+        position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
+        animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;",
+        material: "color: white"
+      }, /*#__PURE__*/React__default.createElement("a-entity", {
+        geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
+        position: "-30 28 0",
+        rotation: "45 90 0",
+        material: "color: white"
+      }, /*#__PURE__*/React__default.createElement("a-text", {
+        color: "black",
+        width: "50",
+        value: showProjection ? 'Press C to show help panels' : 'Press C to show projection panels',
+        position: "-20 2.8 1"
+      }), /*#__PURE__*/React__default.createElement("a-text", {
+        color: "black",
+        width: "50",
+        value: "Press V to switch to histogram view",
+        position: "-20 0 1"
+      }), /*#__PURE__*/React__default.createElement("a-text", {
+        color: "black",
+        width: "50",
+        value: "Press X to shift panels",
+        position: "-20 -2.8 1"
+      })), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: -30 0 60; to: -30 0 30; delay: 0; dur: 800; easing: linear;",
+        rotation: "0 -45 0",
+        src: "./ndmvr/keyboardControls/keyboard.png"
+      }), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: -30 0 -60; to: -30 0 -30; delay: 200; dur: 800; easing: linear;",
+        rotation: "0 45 0",
+        src: "./ndmvr/keyboardControls/keyboard1.png"
+      }), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: 30 0 -60; to: 30 0 -30; delay: 400; dur: 800; easing: linear;",
+        rotation: "0 -45 0",
+        src: "./ndmvr/keyboardControls/keyboard2.png"
+      }), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: 30 0 60; to: 30 0 30; delay: 600; dur: 800; easing: linear;",
+        rotation: " 0 45 0",
+        src: "./ndmvr/keyboardControls/keyboard3.png"
+      }));
+    } else {
+      return /*#__PURE__*/React__default.createElement("a-entity", {
+        position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
+        animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;"
+      }, /*#__PURE__*/React__default.createElement("a-entity", {
+        geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
+        position: "-30 28 0",
+        rotation: "45 90 0",
+        material: "color: white"
+      }, /*#__PURE__*/React__default.createElement("a-text", {
+        color: "black",
+        width: "50",
+        value: showProjection ? 'Press Button X to show help panels' : 'Press Button X to show projection panels',
+        position: "-20 2.8 1"
+      }), /*#__PURE__*/React__default.createElement("a-text", {
+        color: "black",
+        width: "50",
+        value: "Press Button Y to switch to histogram view",
+        position: "-20 0 1"
+      }), /*#__PURE__*/React__default.createElement("a-text", {
+        color: "black",
+        width: "50",
+        value: "Press right Trigger to shift panels",
+        position: "-20 -2.8 1"
+      })), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: -35 0 60; to: -32 0 32; delay: 0; dur: 800; easing: linear;",
+        rotation: "-10 -45 0",
+        src: "./ndmvr/oculusControls/oculus.png"
+      }), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: -35 0 -60; to: -32 0 -32; delay: 200; dur: 800; easing: linear;",
+        rotation: "10 45 0",
+        src: "./ndmvr/oculusControls/oculus2.png"
+      }), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: 35 0 -60; to: 32 0 -32; delay: 400; dur: 800; easing: linear;",
+        rotation: "10 -45 0",
+        src: "./ndmvr/oculusControls/oculus1.png"
+      }), /*#__PURE__*/React__default.createElement("a-box", {
+        scale: "80 50 2",
+        animation__position: "property: position; from: 35 0 60; to: 32 0 32; delay: 600; dur: 800; easing: linear;",
+        rotation: "-10 45 0",
+        src: "./ndmvr/oculusControls/oculus3.png"
+      }));
     }
   };
 
-  this.setPredefinedRightPositionWithOffset = function () {
-    var labelElement = document.getElementById('rightLabel');
+  var hideMappingBanner = function hideMappingBanner() {
+    var banner = document.getElementById('th-mapping');
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 90);
+    if (banner !== undefined) {
+      banner.setAttribute('material', 'opacity', 0);
     }
   };
 
-  this.setPredefinedLeftPositionWithOffset = function () {
-    var labelElement = document.getElementById('leftLabel');
+  var showMappingBanner = function showMappingBanner() {
+    var banner = document.getElementById('th-mapping');
 
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 270);
+    if (banner !== undefined) {
+      banner.setAttribute('material', 'opacity', 1);
     }
   };
 
-  _classPrivateFieldLooseBase(this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
-};
-
-var _subject$4 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var HistogramSubject = /*#__PURE__*/function () {
-  function HistogramSubject() {
-    Object.defineProperty(this, _subject$4, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4] = new rxjs.Subject();
-  }
-
-  var _proto = HistogramSubject.prototype;
-
-  _proto.changeHistogramSectionByOffset = function changeHistogramSectionByOffset(axis, histogramType, increment, defaultRange) {
-    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].next({
-      name: histogramType,
-      axis: axis,
-      increment: increment,
-      defaultRange: defaultRange
-    });
-  };
-
-  _proto.changeHistogramFunction = function changeHistogramFunction(typeFunction, histogramType) {
-    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].next({
-      fFunction: typeFunction,
-      name: histogramType
-    });
-  };
-
-  _proto.getChangedSection = function getChangedSection() {
-    return _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].asObservable();
-  };
-
-  return HistogramSubject;
-}();
-
-var histogramTH2Service = new HistogramSubject();
-var histogramTH3Service = new HistogramSubject();
-
-var keyPressed = {};
-var cameraService = new CameraService();
-var aframeObj;
-var geoAttributes;
-
-var handlePositioning = function handlePositioning(property, event) {
-  var difference = 0.2;
-  if (property.name === 'scale') difference = 0.01;else if (property.name === 'rotation') difference = 2;
-
-  if (event.key === 'ArrowDown') {
-    property.xValue = property.xValue + difference;
-  } else if (event.key === 'ArrowUp') {
-    property.xValue = property.xValue - difference;
-  } else if (event.key === '=') {
-    property.yValue = property.yValue + difference;
-  } else if (event.key === '-') {
-    property.yValue = property.yValue - difference;
-  } else if (event.key === 'ArrowRight') {
-    property.zValue = property.zValue + difference;
-  } else if (event.key === 'ArrowLeft') {
-    property.zValue = property.zValue - difference;
-  }
-
-  aframeObj.setAttribute(property.name, property.xValue + " " + property.yValue + " " + property.zValue);
-};
-
-var handleChangeHistogramSectionByDefaultRange = function handleChangeHistogramSectionByDefaultRange(event) {
-  if (event.key === 'k' || event.key === 'K') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, true);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, true);
-  } else if (event.key === 'i' || event.key === 'I') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, true);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, true);
-  } else if (event.key === 'u' || event.key === 'U') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, true);
-  } else if (event.key === 'o' || event.key === 'O') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, true);
-  } else if (event.key === 'l' || event.key === 'L') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, true);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, true);
-  } else if (event.key === 'j' || event.key === 'J') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, true);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, true);
-  }
-};
-
-var handleChangeHistogramSectionByOwnRange = function handleChangeHistogramSectionByOwnRange(event) {
-  if (event.key === 'k' || event.key === 'K') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, false);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, false);
-  } else if (event.key === 'i' || event.key === 'I') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, false);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, false);
-  } else if (event.key === 'u' || event.key === 'U') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, false);
-  } else if (event.key === 'o' || event.key === 'O') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, false);
-  } else if (event.key === 'l' || event.key === 'L') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, false);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, false);
-  } else if (event.key === 'j' || event.key === 'J') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, false);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, false);
-  }
-};
-
-var keyPressHandlerFunction = function keyPressHandlerFunction(event) {
-  keyPressed[event.key] = true;
-
-  if (keyPressed.Z || keyPressed.z) {
-    handlePositioning(geoAttributes[0], event);
-  }
-
-  if (keyPressed.X || keyPressed.x) {
-    handlePositioning(geoAttributes[1], event);
-  }
-
-  if (keyPressed.C || keyPressed.c) {
-    handlePositioning(geoAttributes[2], event);
-  }
-
-  if (keyPressed.Shift) {
-    handleChangeHistogramSectionByOwnRange(event);
-  }
-
-  handleChangeHistogramSectionByDefaultRange(event);
-
-  if (event.key === 'q' || event.key === 'Q') {
-    cameraService.verticalMoveCamera(true, 0.3);
-  }
-
-  if (event.key === 'e' || event.key === 'E') {
-    cameraService.verticalMoveCamera(false, 0.3);
-  }
-
-  if (event.key === '1') {
-    cameraService.setPredefinedDownPosition();
-  }
-
-  if (event.key === '2') {
-    cameraService.setPredefinedUpPosition();
-  }
+  React.useEffect(function () {
+    subscription = cameraSubject.getCameraSubject().subscribe(handleSubscription);
+    return function () {
+      return subscription.unsubscribe();
+    };
+  }, [show, showProjection, rotation]);
+  React.useEffect(function () {
+    var camera = document.getElementById('camera');
 
-  if (event.key === '3') {
-    cameraService.setPredefinedRightPosition();
-  }
+    if (!show) {
+      camera.object3D.position.y = 1.6;
 
-  if (event.key === '4') {
-    cameraService.setPredefinedLeftPosition();
-  }
+      if (prevPosition !== null) {
+        camera.object3D.position.x = prevPosition.x;
+        camera.object3D.position.z = prevPosition.z;
+        camera.object3D.position.y = prevPosition.y;
+      }
 
-  if (event.key === '5') {
-    cameraService.setPredefinedDownPositionWithOffset();
-  }
+      showMappingBanner();
+    } else {
+      setPrevPosition({
+        x: camera.object3D.position.x,
+        y: camera.object3D.position.y,
+        z: camera.object3D.position.z
+      });
+      camera.object3D.position.y = camera.object3D.position.y + offset;
+      hideMappingBanner();
+    }
+  }, [show, inputDevice]);
+  React.useEffect(function () {
+    if (showProjection) {
+      jsrootService.displayImageOfProjection('projectionContainer', 'bannerId_1', '500px', '400px');
+    }
+  }, [showProjection]);
 
-  if (event.key === '6') {
-    cameraService.setPredefinedUpPositionWithOffset();
-  }
+  var renderActiveTool = function renderActiveTool() {
+    switch (activeTool) {
+      case 1:
+        activeToolHighlight = '-0.675 -0.825 -1';
+        break;
 
-  if (event.key === '7') {
-    cameraService.setPredefinedRightPositionWithOffset();
-  }
+      case 2:
+        activeToolHighlight = '-0.525 -0.825 -1';
+        break;
 
-  if (event.key === '8') {
-    cameraService.setPredefinedLeftPositionWithOffset();
-  }
+      case 3:
+        activeToolHighlight = '-0.375 -0.825 -1';
+        break;
 
-  if (event.key === 'Enter') {
-    binSubject.saveSelectedBinToLocalStorage();
-    ['th-mapping', 'bannerId_1', 'bannerId_2', 'bannerId_3', 'bannerId_4'].forEach(function (targetId) {
-      if (document.getElementById(targetId) !== null) {
-        jsrootService.displayImageOfProjection('projectionContainer', targetId, '500px', '400px');
-      }
-    });
-  }
+      case 4:
+        activeToolHighlight = '-0.225 -0.825 -1';
+        break;
 
-  if (event.key === 'r' || event.key === 'R') {
-    binSubject.deleteBinFromLocalStorage();
-  }
+      case 5:
+        activeToolHighlight = '-0.075 -0.825 -1';
+        break;
 
-  if (event.key === 'm' || event.key === 'M') {
-    histogramTH2Service.changeHistogramFunction('feet', 'TH2');
-  }
+      case 6:
+        activeToolHighlight = '0.075 -0.825 -1';
+        break;
 
-  if (event.key === 'n' || event.key === 'N') {
-    histogramTH2Service.changeHistogramFunction('default', 'TH2');
-  }
+      case 7:
+        activeToolHighlight = '0.225 -0.825 -1';
+        break;
 
-  if (event.key === 'c' || event.key === 'C') {
-    cameraSubject.setUserState();
-  }
+      case 8:
+        activeToolHighlight = '0.375 -0.825 -1';
+        break;
 
-  if (event.key === 'v' || event.key === 'V') {
-    cameraSubject.setVisibilityOfBanners('keyboard');
-  }
+      case 9:
+        activeToolHighlight = '0.525 -0.825 -1';
+        break;
 
-  if (event.key === 'x' || event.key === 'X') {
-    cameraSubject.shiftBanners();
-  }
-};
+      case 0:
+        activeToolHighlight = '0.675 -0.825 -1';
+        break;
+    }
 
-var keyReleaseHandlerFunction = function keyReleaseHandlerFunction(event) {
-  delete keyPressed[event.key];
-};
+    var tools = ['info', 2, 3, 4, 5, 6, 7, 8, 9, 0];
+    var toolNumXPos = -0.825;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, tools.map(function (tool) {
+      var txt;
+      toolNumXPos = toolNumXPos + 0.15;
+      var txtPos = String(toolNumXPos + ' -0.78' + ' -1');
+      if (tools.indexOf(tool) + 1 === activeTool) txt = String('value: ' + tool + '; color: #0F52BA;width:1.4;align:center');else txt = String('value: ' + tool + '; color: black;width:1;align:center');
+      return /*#__PURE__*/React__default.createElement("a-entity", {
+        key: tools.indexOf(tool),
+        text: txt,
+        position: txtPos,
+        material: "shader: flat;"
+      });
+    }), /*#__PURE__*/React__default.createElement("a-entity", {
+      geometry: "primitive: plane; height: 0.007; width: 0.17",
+      position: activeToolHighlight,
+      material: "color: #0F52BA;"
+    }));
+  };
 
-var initialKeyboardController = function initialKeyboardController(data, object) {
-  aframeObj = object;
-  geoAttributes = [data.position, data.scale, data.rotation];
+  var renderOculusControls = function renderOculusControls() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("a-entity", {
+      "laser-controls": "hand: right",
+      raycaster: "objects: .clickable;  lineOpacity: 0.5;  far: 20;"
+    }), /*#__PURE__*/React__default.createElement("a-entity", {
+      "oculus-touch-controls": "hand: left",
+      "left-controller-logging": true
+    }), /*#__PURE__*/React__default.createElement("a-entity", {
+      "oculus-touch-controls": "hand: right",
+      "right-controller-logging": true
+    }));
+  };
 
-  for (var i = 0; i < 3; i++) {
-    aframeObj.setAttribute(geoAttributes[i].name, geoAttributes[i].xValue + " " + geoAttributes[i].yValue + " " + geoAttributes[i].zValue);
-  }
+  return /*#__PURE__*/React__default.createElement("a-entity", {
+    id: "cameraWrapper",
+    rotation: "0 -135 0",
+    position: "-7 2 -7"
+  }, show && !showProjection && renderBannersWithControls(), show && showProjection && renderProjectionsBanners(), /*#__PURE__*/React__default.createElement("a-camera", {
+    id: "camera",
+    "look-control": true,
+    "wasd-controls-enabled": "acceleration:=50"
+  }, /*#__PURE__*/React__default.createElement("a-entity", {
+    geometry: "primitive: plane; height: 0.2; width: 2",
+    position: "0 -0.825 -1",
+    material: "color: #eee;shader: flat;"
+  }), /*#__PURE__*/React__default.createElement("a-entity", {
+    geometry: "primitive: plane; height: 0.001; width: 1.75",
+    position: "0 -0.825 -1",
+    material: "color: #aaa;shader: flat;"
+  }), activeTool === 1 && /*#__PURE__*/React__default.createElement("a-entity", {
+    text: selectedBinData,
+    position: "-0.8 0.7 -1"
+  }), renderActiveTool(), !AFRAME.utils.device.checkHeadsetConnected() && /*#__PURE__*/React__default.createElement("a-entity", {
+    cursor: "fuse: false; fuseTimeout: 2000;",
+    raycaster: "objects: .clickable; showLine: false; far: 100;",
+    animation__click: "property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1.4 1.4 1.4; dur: 150",
+    animation__mouseenter: "property: scale; startEvents: mouseenter; from: 1 1 1; to: 1.4 1.4 1.4; dur: 180",
+    animation__mouseleave: "property: scale; startEvents: mouseleave; from: 1.4 1.4 1.4; to: 1 1 1; dur: 180",
+    line: "color: orange; opacity: 0.5",
+    far: "100",
+    position: "0 0 -1",
+    geometry: "primitive: ring; radiusInner: 0.02; radiusOuter: 0.03",
+    material: "color: white; shader: flat"
+  })), AFRAME.utils.device.checkHeadsetConnected() && renderOculusControls());
 };
 
-var keyboardUpdateCameraReference = function keyboardUpdateCameraReference() {
-  cameraService = new CameraService();
-};
+AFRAME$1.registerComponent('binth', {
+  schema: {
+    id: {
+      type: 'string'
+    },
+    typeName: {
+      type: 'string'
+    },
+    content: {
+      "default": 0
+    },
+    absoluteContent: {
+      "default": 0
+    },
+    binName: {
+      "default": ''
+    },
+    xTitle: {
+      type: 'string'
+    },
+    yTitle: {
+      type: 'string'
+    },
+    zTitle: {
+      type: 'string'
+    },
+    xMin: {
+      type: 'number'
+    },
+    yMin: {
+      type: 'number'
+    },
+    zMin: {
+      type: 'number'
+    },
+    xMax: {
+      type: 'number'
+    },
+    yMax: {
+      type: 'number'
+    },
+    zMax: {
+      type: 'number'
+    },
+    xPos: {
+      type: 'number'
+    },
+    yPos: {
+      type: 'number'
+    },
+    zPos: {
+      type: 'number'
+    },
+    xCenter: {
+      type: 'number'
+    },
+    yCenter: {
+      type: 'number'
+    },
+    zCenter: {
+      type: 'number'
+    },
+    xWidth: {
+      type: 'number'
+    },
+    yWidth: {
+      type: 'number'
+    },
+    zWidth: {
+      type: 'number'
+    },
+    color: {
+      type: 'string'
+    },
+    axisX: {
+      type: 'string'
+    },
+    axisY: {
+      type: 'string'
+    },
+    axisZ: {
+      type: 'string'
+    },
+    selectColor: {
+      type: 'string'
+    },
+    markedColor: {
+      type: 'string'
+    }
+  },
+  init: function init() {
+    var el = this.el;
+    el.userData = {
+      typeName: this.data.typeName,
+      id: this.data.id,
+      content: this.data.content,
+      absoluteContent: this.data.absoluteContent,
+      binName: this.data.binName,
+      xTitle: this.data.xTitle,
+      yTitle: this.data.yTitle,
+      zTitle: this.data.zTitle,
+      xMin: this.data.xMin,
+      yMin: this.data.yMin,
+      zMin: this.data.zMin,
+      xMax: this.data.xMax,
+      yMax: this.data.yMax,
+      zMax: this.data.zMax,
+      xPos: this.data.xPos,
+      yPos: this.data.yPos,
+      zPos: this.data.zPos,
+      xCenter: this.data.xCenter,
+      yCenter: this.data.yCenter,
+      zCenter: this.data.zCenter,
+      xWidth: this.data.xWidth,
+      yWidth: this.data.yWidth,
+      zWidth: this.data.zWidth,
+      color: this.data.color,
+      axisX: this.data.axisX,
+      axisY: this.data.axisY,
+      axisZ: this.data.axisZ,
+      selectColor: this.data.selectColor,
+      markedColor: this.data.markedColor
+    };
+  },
+  update: function update() {
+    var el = this.el;
+    el.userData = {
+      typeName: this.data.typeName,
+      id: this.data.id,
+      content: this.data.content,
+      absoluteContent: this.data.absoluteContent,
+      binName: this.data.binName,
+      xTitle: this.data.xTitle,
+      yTitle: this.data.yTitle,
+      zTitle: this.data.zTitle,
+      xMin: this.data.xMin,
+      yMin: this.data.yMin,
+      zMin: this.data.zMin,
+      xMax: this.data.xMax,
+      yMax: this.data.yMax,
+      zMax: this.data.zMax,
+      xPos: this.data.xPos,
+      yPos: this.data.yPos,
+      zPos: this.data.zPos,
+      xCenter: this.data.xCenter,
+      yCenter: this.data.yCenter,
+      zCenter: this.data.zCenter,
+      xWidth: this.data.xWidth,
+      yWidth: this.data.yWidth,
+      zWidth: this.data.zWidth,
+      color: this.data.color,
+      axisX: this.data.axisX,
+      axisY: this.data.axisY,
+      axisZ: this.data.axisZ,
+      selectColor: this.data.selectColor,
+      markedColor: this.data.markedColor
+    };
+  }
+});
 
-AFRAME.registerComponent('histogram-control', {
+AFRAME$1.registerComponent('histogram-control', {
   schema: {
     position: {
       name: 'position',
@@ -1519,13 +1695,14 @@ AFRAME.registerComponent('histogram-control', {
     initialKeyboardController(this.schema, el);
     document.addEventListener('keydown', keyPressHandlerFunction);
     document.addEventListener('keyup', keyReleaseHandlerFunction);
+    document.addEventListener('wheel', switchDisplayModeOnBin);
   },
   update: function update() {
     keyboardUpdateCameraReference();
   }
 });
 
-AFRAME.registerComponent('label-handler', {
+AFRAME$1.registerComponent('label-handler', {
   schema: {
     value: {
       type: 'string'
@@ -1840,7 +2017,7 @@ var _range = /*#__PURE__*/_classPrivateFieldLooseKey("range");
 
 var _labels = /*#__PURE__*/_classPrivateFieldLooseKey("labels");
 
-var _contentCoef = /*#__PURE__*/_classPrivateFieldLooseKey("contentCoef");
+var _contentScale = /*#__PURE__*/_classPrivateFieldLooseKey("contentScale");
 
 var _minDisplayedContent = /*#__PURE__*/_classPrivateFieldLooseKey("minDisplayedContent");
 
@@ -1950,7 +2127,7 @@ var HistogramReactFactory = /*#__PURE__*/function () {
         zInitial: 0
       }
     });
-    Object.defineProperty(this, _contentCoef, {
+    Object.defineProperty(this, _contentScale, {
       writable: true,
       value: 1
     });
@@ -2119,20 +2296,17 @@ var HistogramReactFactory = /*#__PURE__*/function () {
                   markedColor = color;
                 }
 
-                var binData = "id: " + id + ";\n              typeName: 'TH2'\n              content: " + c + ";\n              color: " + color + ";\n              yTitle: " + yTitle + ";\n              xTitle: " + xTitle + ";\n              zTitle: " + zTitle + ";\n              absoluteContent: " + absoluteContent + ";\n              binName: " + binName + ";\n              xMin: " + xmin + ";\n              yMin: " + ymin + ";\n              zMin: " + zmin + ";\n              xMax: " + xmax + ";\n              yMax: " + ymax + ";\n              zMax: " + zmax + ";\n              xCenter: " + xcenter + ";\n              yCenter: " + ycenter + ";\n              zCenter: " + zcenter + ";\n              xWidth: " + xwidth + ";\n              yWidth: " + ywidth + ";\n              zWidth: " + zwidth + ";\n              markedColor: " + markedColor + ";\n              selectColor: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor() + ";\n              axisX: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x') + ";\n              axisY: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y') + ";\n              axisZ: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z');
-
-                var width = size * 0.9;
-
-                var posX = (ix - 1) / _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth];
-
-                var posY = (iz - 1) / _classPrivateFieldLooseBase(_this, _zWidth)[_zWidth] + 0.2;
-
-                var posZ = (iy - 1) / _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth];
+                var binData = "id: " + id + ";\n              typeName: 'TH2'\n              content: " + c + ";\n              color: " + color + ";\n              yTitle: " + yTitle + ";\n              xTitle: " + xTitle + ";\n              zTitle: " + zTitle + ";\n              absoluteContent: " + absoluteContent + ";\n              binName: " + binName + ";\n              xMin: " + xmin + ";\n              yMin: " + ymin + ";\n              zMin: " + zmin + ";\n              xMax: " + xmax + ";\n              yMax: " + ymax + ";\n              zMax: " + zmax + ";\n              xPos: " + ix + ";\n              yPos: " + iy + ";\n              zPos: " + iz + ";\n              xCenter: " + xcenter + ";\n              yCenter: " + ycenter + ";\n              zCenter: " + zcenter + ";\n              xWidth: " + xwidth + ";\n              yWidth: " + ywidth + ";\n              zWidth: " + zwidth + ";\n              markedColor: " + markedColor + ";\n              selectColor: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor() + ";\n              axisX: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x') + ";\n              axisY: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y') + ";\n              axisZ: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z');
 
+                var width = size * 0.8;
+                var posX = ix - 1;
+                var posY = iz - 1;
+                var posZ = iy - 1;
                 elements.bins[count] = {
                   id: id,
                   color: color,
                   binData: binData,
+                  content: absoluteContent,
                   animation: {
                     fromWidth: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
                     fromHeight: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
@@ -2358,48 +2532,6 @@ var HistogramReactFactory = /*#__PURE__*/function () {
             toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 1.5
           }
         };
-        elements.titles[0] = {
-          key: 150000 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          },
-          rotation: {
-            x: 0,
-            y: 123,
-            z: 0
-          },
-          position: {
-            x: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 90,
-            y: maxZLength + 16.5,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 90
-          },
-          innerText: {
-            value: 'Press V to show projections or controls',
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          }
-        };
-        elements.titles[1] = {
-          key: 120001 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fName,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          },
-          rotation: {
-            x: 0,
-            y: 330,
-            z: 0
-          },
-          position: {
-            x: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + 120,
-            y: maxZLength + 16.5,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 70
-          },
-          innerText: {
-            value: 'Press buttonY to show projections or controls',
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          }
-        };
         count++;
         var bannerWidthX = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
         var bannerWidthY = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
@@ -2438,25 +2570,6 @@ var HistogramReactFactory = /*#__PURE__*/function () {
             transparent: true
           }
         };
-        count++;
-        elements.banners[2] = {
-          key: 135000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
-          id: 'th-background',
-          geometry: {
-            width: 0.2,
-            height: 15,
-            depth: 24
-          },
-          position: {
-            x: maxXLength + 8.2,
-            y: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 0.5,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 1 + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 1.5
-          },
-          material: {
-            color: '#ffffff',
-            transparent: false
-          }
-        };
         elements.labels = [].concat(normalAxis, reversedAxis);
         return elements;
       }
@@ -2501,7 +2614,7 @@ var HistogramReactFactory = /*#__PURE__*/function () {
             ywidth = ymax - ymin;
             absoluteContent = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].getBinContent(ix, iy);
             c = _classPrivateFieldLooseBase(_this, _optimizeBinContent)[_optimizeBinContent](absoluteContent, _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fMaximum);
-            centeredYPosition = c / 2;
+            centeredYPosition = c * _classPrivateFieldLooseBase(_this, _range)[_range] * _classPrivateFieldLooseBase(_this, _contentScale)[_contentScale] / 16;
 
             if (c > _classPrivateFieldLooseBase(_this, _minDisplayedContent)[_minDisplayedContent]) {
               var projectionColor = _classPrivateFieldLooseBase(_this, _projectionFunction)[_projectionFunction](projectionFunction, xmin, ymin);
@@ -2516,7 +2629,7 @@ var HistogramReactFactory = /*#__PURE__*/function () {
                 markedColor = color;
               }
 
-              var binData = "id: " + id + ";\n            typeName: 'TH2'\n            content: " + c + ";\n            color: " + color + ";\n            yTitle: " + yTitle + ";\n            xTitle: " + xTitle + ";\n            zTitle: 'none';\n            absoluteContent: " + absoluteContent + ";\n            binName: " + binName + ";\n            xMin: " + xmin + ";\n            yMin: " + ymin + ";\n            zMin: " + 0 + ";\n            xMax: " + xmax + ";\n            yMax: " + ymax + ";\n            zMax: " + 0 + ";\n            xCenter: " + xcenter + ";\n            yCenter: " + ycenter + ";\n            yCenter: " + 0 + ";\n            xWidth: " + xwidth + ";\n            yWidth: " + ywidth + ";\n            zWidth: " + 0 + ";\n            markedColor: " + markedColor + ";\n            selectColor: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor() + ";\n            axisX: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x') + ";\n            axisY: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y') + ";\n            axisZ: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z');
+              var binData = "id: " + id + ";\n            typeName: 'TH2'\n            content: " + c + ";\n            color: " + color + ";\n            yTitle: " + yTitle + ";\n            xTitle: " + xTitle + ";\n            zTitle: 'none';\n            absoluteContent: " + absoluteContent + ";\n            binName: " + binName + ";\n            xMin: " + xmin + ";\n            yMin: " + ymin + ";\n            zMin: " + 0 + ";\n            xMax: " + xmax + ";\n            yMax: " + ymax + ";\n            zMax: " + 0 + ";\n            xPos: " + ix + ";\n            yPos: " + iy + ";\n            zPos: " + 0 + ";\n            xCenter: " + xcenter + ";\n            yCenter: " + ycenter + ";\n            yCenter: " + 0 + ";\n            xWidth: " + xwidth + ";\n            yWidth: " + ywidth + ";\n            zWidth: " + 0 + ";\n            markedColor: " + markedColor + ";\n            selectColor: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor() + ";\n            axisX: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x') + ";\n            axisY: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y') + ";\n            axisZ: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z');
 
               var width = xwidth / _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth] / _classPrivateFieldLooseBase(_this, _binScaleCoef)[_binScaleCoef];
 
@@ -2528,12 +2641,13 @@ var HistogramReactFactory = /*#__PURE__*/function () {
                 id: id,
                 color: color,
                 binData: binData,
+                content: absoluteContent,
                 animation: {
                   fromWidth: width,
                   fromHeight: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
                   fromDepth: depth,
                   toWidth: width,
-                  toHeight: c,
+                  toHeight: c * _classPrivateFieldLooseBase(_this, _range)[_range] * _classPrivateFieldLooseBase(_this, _contentScale)[_contentScale] / 8,
                   toDepth: depth
                 },
                 animation2: {
@@ -2689,27 +2803,6 @@ var HistogramReactFactory = /*#__PURE__*/function () {
             color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
           }
         };
-        elements.titles[1] = {
-          key: 195001 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fName,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          },
-          rotation: {
-            x: 0,
-            y: 330,
-            z: 0
-          },
-          position: {
-            x: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + 120,
-            y: 16.5,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 70
-          },
-          innerText: {
-            value: 'Press buttonY to show projections or controls',
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          }
-        };
         count++;
         var bannerWidthX = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
         var bannerWidthY = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
@@ -2748,25 +2841,6 @@ var HistogramReactFactory = /*#__PURE__*/function () {
             transparent: true
           }
         };
-        count++;
-        elements.banners[2] = {
-          key: 255000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
-          id: 'th-background',
-          geometry: {
-            width: 0.2,
-            height: 16,
-            depth: 24
-          },
-          position: {
-            x: maxXLength + 8.2,
-            y: 7,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 1 + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 1.5
-          },
-          material: {
-            color: '#ffffff',
-            transparent: false
-          }
-        };
         elements.labels = [].concat(normalAxis, reversedAxis);
         return elements;
       }
@@ -2777,7 +2851,7 @@ var HistogramReactFactory = /*#__PURE__*/function () {
         if (binContent <= 0) return 0;
 
         if (maxContent > 1) {
-          binContent = Math.round((binContent / (maxContent * _classPrivateFieldLooseBase(_this, _contentCoef)[_contentCoef]) + Number.EPSILON) * 100) / 100;
+          binContent = Math.round((binContent / maxContent + Number.EPSILON) * 100) / 100;
         }
 
         return binContent;
@@ -3031,11 +3105,21 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
       elements = _useState3[0],
       setElements = _useState3[1];
 
+  var _useState4 = React.useState(1),
+      binMarkState = _useState4[0],
+      setBinMarkState = _useState4[1];
+
   var handleSubscription = function handleSubscription(data) {
     if (histogram._typename.includes(data.name)) {
       if (data.axis) {
         factory.updateSection(data.axis, data.increment, data.defaultRange);
         setElements(factory.getElements(mode));
+      } else if (data.binMarkMode) {
+        setBinMarkState(function (prevState) {
+          if (prevState + data.binMarkMode > 2) return 2;
+          if (prevState + data.binMarkMode < 1) return 1;
+          return prevState + data.binMarkMode;
+        });
       } else {
         setMode(function (prevState) {
           return prevState !== data.fFunction ? data.fFunction : prevState;
@@ -3086,14 +3170,23 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
       return /*#__PURE__*/React__default.createElement("a-box", {
         key: bin.id,
         "class": "clickable",
-        material: "color: " + bin.color + "; opacity: 0.75;",
+        material: "color: " + bin.color + "; transparent: true",
         binth: bin.binData,
         mouseevent: true,
         animation: "property: scale; from: " + bin.animation.fromWidth + " " + bin.animation.fromHeight + " " + bin.animation.fromDepth + "; to: " + bin.animation.toWidth + " " + bin.animation.toHeight + " " + bin.animation.toDepth + "; delay:100; dur: 1500; easing: linear;",
-        animation__1: "property: material.opacity; from: 0; to: 0.75; dur: 2000;",
+        animation__1: "property: material.opacity; from: 0; to: 0.50; dur: 2000;",
         animation__2: "property: position; from: " + bin.animation2.fromX + " " + bin.animation2.fromY + " " + bin.animation2.fromZ + "; to: " + bin.animation2.toX + " " + bin.animation2.toY + " " + bin.animation2.toZ + "; dur: 1000;",
         animation__3: "property: material.color; from: " + bin.animation3.fromColor + "; to: " + bin.animation3.toColor + "; dur: 1600;"
-      });
+      }, /*#__PURE__*/React__default.createElement("a-text", {
+        value: bin.content,
+        align: "center",
+        width: "10",
+        color: "black",
+        geometry: "primitive:plane; width: 1; height: 1",
+        material: "color: " + bin.animation3.toColor + "; opacity: 0.50; transparent: true",
+        rotation: "270 180 0",
+        position: "0 " + (binMarkState === 1 ? -0.5 : 0.501) + " 0"
+      }));
     }), elements.labels.map(function (label) {
       return /*#__PURE__*/React__default.createElement("a-entity", {
         key: label.key,
@@ -3101,7 +3194,7 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
         text: "color: " + label.text.color + "; width: " + label.text.width + "; height: " + label.text.height + "; align:center;",
         "label-handler": "value: " + label.labelHandler.value + "; delay:" + label.labelHandler.delay,
         rotation: label.rotation.x + " " + label.rotation.y + " " + label.rotation.z,
-        material: "color: " + label.material.color + ";",
+        material: "color: " + label.material.color + "; transparent: true",
         animation: "property: text.width; from: 0; to: 4; dur: 1000;",
         animation__1: "property: material.opacity; from: 0; to: 0.8; dur: 1500;",
         animation__2: "property: position; from: " + label.animation.fromX + " " + label.animation.fromY + " " + label.animation.fromZ + "; to: " + label.animation.toX + " " + label.animation.toY + " " + label.animation.toZ + "; dur: 1005;"
@@ -3111,7 +3204,8 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
         key: title.key,
         text: "value: " + title.text.value + "; color: " + title.text.color + "; width: 230; height:auto; align:center;",
         rotation: title.rotation.x + " " + title.rotation.y + " " + title.rotation.z,
-        position: title.position.x + " " + title.position.y + " " + title.position.z
+        position: title.position.x + " " + title.position.y + " " + title.position.z,
+        material: "transparent: true"
       }, /*#__PURE__*/React__default.createElement("a-text", {
         value: title.innerText.value,
         position: "0 10 0",
@@ -3122,7 +3216,7 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
       }), /*#__PURE__*/React__default.createElement("a-entity", {
         geometry: "primitive: plane; width:170; height:30;",
         position: "0 0 -1",
-        material: "opacity: 0.9; color: white;"
+        material: "opacity: 0.9; color: white; transparent: true"
       }));
     }), elements.axisLabels.map(function (axisLabel) {
       return /*#__PURE__*/React__default.createElement("a-entity", {
@@ -3131,12 +3225,12 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
         text: "value: " + axisLabel.text.value + "; color: " + axisLabel.text.color + "; width: 10; height:auto; align:center;",
         rotation: axisLabel.rotation.x + " " + axisLabel.rotation.y + " " + axisLabel.rotation.z,
         animation: "property: position; from: " + axisLabel.animation.fromX + " " + axisLabel.animation.fromY + " " + axisLabel.animation.fromZ + "; to: " + axisLabel.animation.toX + " " + axisLabel.animation.toY + " " + axisLabel.animation.toZ + "; dur: 1000;",
-        material: "opacity: 0;"
+        material: "opacity: 0; transparent: true"
       });
     }), elements.ground && /*#__PURE__*/React__default.createElement("a-box", {
       key: elements.ground.key,
       width: elements.ground.scale.width,
-      material: "color: #171717",
+      material: "color: #fafafa",
       height: elements.ground.scale.height,
       depth: elements.ground.scale.depth,
       animation: "property: position; from: " + elements.ground.animation.fromX + " " + elements.ground.animation.fromY + " " + elements.ground.animation.fromZ + ";\n         to:\n         " + elements.ground.animation.toX + " " + elements.ground.animation.toY + " " + elements.ground.animation.toZ + "; dur: 1000;"
@@ -3159,18 +3253,22 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
   }
 };
 
+function NdmVrLaboratory() {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("a-sky", {
+    color: "#dbf0fe"
+  }), /*#__PURE__*/React__default.createElement("a-plane", {
+    rotation: "-90 0 0",
+    position: "0 -0.5 0",
+    width: "1000",
+    height: "1000",
+    color: "#aaa",
+    material: "shader:flat;"
+  }));
+}
+
 var NdmVrScene = function NdmVrScene(_ref) {
   var data = _ref.data,
       info = _ref.info;
-
-  var _useState = React.useState({
-    url: info.background.url ? info.background.url : './ndmvr/backgrounds/background1.jpg',
-    radius: info.background.radius ? info.background.radius : '3000',
-    height: info.background.height ? info.background.height : '2048',
-    width: info.background.width ? info.background.width : '2048'
-  }),
-      background = _useState[0];
-
   return /*#__PURE__*/React__default.createElement("a-scene", {
     embedded: true,
     style: {
@@ -3180,21 +3278,15 @@ var NdmVrScene = function NdmVrScene(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("a-assets", null, /*#__PURE__*/React__default.createElement("img", {
     id: "skyTexture",
-    src: background.url,
+    src: info.background.url,
     alt: "background"
-  })), /*#__PURE__*/React__default.createElement(NdmVrCamera, null), /*#__PURE__*/React__default.createElement(NdmVrHistogram3D, {
+  })), /*#__PURE__*/React__default.createElement(NdmVrLaboratory, null), /*#__PURE__*/React__default.createElement(NdmVrCamera, null), /*#__PURE__*/React__default.createElement(NdmVrHistogram3D, {
     name: info.name,
     histogram: data.histogram,
     histoSection: data.section,
     projections: data.projections,
     range: data.range,
     theme: info.theme
-  }), /*#__PURE__*/React__default.createElement("a-sky", {
-    height: background.height,
-    radius: background.radius,
-    width: background.width,
-    src: "#skyTexture",
-    position: "0 1000 0"
   }));
 };
 
@@ -3779,7 +3871,7 @@ var optimizeBinContent = function optimizeBinContent(binContent, maxContent) {
   return binContent;
 };
 
-AFRAME.registerComponent('binth2', {
+AFRAME$1.registerComponent('binth2', {
   schema: {
     id: {
       type: 'string'
@@ -3961,7 +4053,7 @@ var HistogramDemoFactory = /*#__PURE__*/function () {
   return HistogramDemoFactory;
 }();
 
-var index = AFRAME.registerComponent('th2-histogram', {
+var index = AFRAME$1.registerComponent('th2-histogram', {
   schema: {
     section: {
       type: 'string'
@@ -4100,7 +4192,7 @@ var index = AFRAME.registerComponent('th2-histogram', {
   }
 });
 
-var infoBannerAframeComponent = AFRAME.registerComponent('banner-control', {
+var infoBannerAframeComponent = AFRAME$1.registerComponent('banner-control', {
   schema: {
     position: {
       name: 'position',
@@ -4278,7 +4370,7 @@ var oculusRedrawHistogramBanners = function oculusRedrawHistogramBanners() {
   });
 };
 
-var leftOculusController = AFRAME.registerComponent('left-controller-logging', {
+var leftOculusController = AFRAME$1.registerComponent('left-controller-logging', {
   init: function init() {
     var gripActive = false;
     var speed = 1;
@@ -4325,7 +4417,7 @@ var leftOculusController = AFRAME.registerComponent('left-controller-logging', {
   }
 });
 
-var rightOculusController = AFRAME.registerComponent('right-controller-logging', {
+var rightOculusController = AFRAME$1.registerComponent('right-controller-logging', {
   init: function init() {
     var gripActive = false;
     var el = this.el;