@ndmspc/ndmvr 0.1.1 → 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++) {
@@ -77,7 +77,7 @@ var JsrootService = /*#__PURE__*/function () {
     var _info$obj$secondaryAx;
 
     if (!info || !projectionAxis || _classPrivateFieldLooseBase(this, _jsroot)[_jsroot] === null) {
-      return false;
+      return;
     }
 
     var projectionTargetAxis = projectionAxis === axisArray[0];
@@ -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]));
     }
 
@@ -105,16 +106,14 @@ var JsrootService = /*#__PURE__*/function () {
     _classPrivateFieldLooseBase(this, _jsroot)[_jsroot].redraw(idTargetElm, h1);
   };
 
-  _proto.openTH1Projection = function openTH1Projection(projectionAxis, info, idTargetElm, axisArray, projections) {
+  _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[0];
+      var projection = projections.fFolders.arr[xBin].fFolders.arr[yBin].fFolders.arr[projIndex || 0];
 
       _classPrivateFieldLooseBase(this, _jsroot)[_jsroot].redraw(idTargetElm, projection);
 
@@ -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',
@@ -212,7 +213,8 @@ var styles = {
 var JsrootHistogram = function JsrootHistogram(_ref) {
   var histogram = _ref.histogram,
       projectionAxes = _ref.projectionAxes,
-      projections = _ref.projections;
+      projections = _ref.projections,
+      projIndex = _ref.projIndex;
   var subscription;
 
   var _useState = React.useState('X'),
@@ -220,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() {
@@ -241,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
-      }, 'projectionContainer', projectionAxes, projections);
+        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');
@@ -268,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");
@@ -324,1264 +324,1352 @@ 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;
-
-  _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;
-    }
+  var _proto = BinSubject.prototype;
 
-    return currentBin;
+  _proto.saveSelectedBinToLocalStorage = function saveSelectedBinToLocalStorage() {
+    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(true);
   };
 
-  _proto.loadProperty = function loadProperty(property) {
-    return JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem(property));
+  _proto.deleteBinFromLocalStorage = function deleteBinFromLocalStorage() {
+    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(false);
   };
 
-  _proto.storeProperty = function storeProperty(property, object) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem(property, JSON.stringify(object));
+  _proto.getKeyboardEvent = function getKeyboardEvent() {
+    return _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].asObservable();
   };
 
-  _proto.initHistogramData = function initHistogramData(histogram) {
-    if (histogram._typename.includes('TH3')) {
-      this.storeTH3HistogramLimits(histogram);
-    } else if (histogram._typename.includes('TH2')) {
-      this.storeTH2HistogramLimits(histogram);
-    }
-  };
+  return BinSubject;
+}();
 
-  _proto.storeTH2Offsets = function storeTH2Offsets(xOffset, yOffset, range) {
-    var object = this.loadProperty('TH2');
-    var section;
+var binSubject = new BinSubject();
 
-    if (object === null) {
-      object = {};
-      section = {
-        name: 'TH2',
-        xOffset: 1,
-        yOffset: 1,
-        range: 8
-      };
-    } else {
-      section = {
-        name: 'TH2',
-        xOffset: xOffset,
-        yOffset: yOffset,
-        range: range
-      };
-    }
+var keyPressed = {};
+var cameraService = new CameraService();
+var aframeObj;
+var geoAttributes;
+var toolsSelector = new rxjs.Subject();
+var activeTool;
 
-    object.section = section;
-    this.storeProperty('TH2', object);
-  };
+var handlePositioning = function handlePositioning(property, event) {
+  var difference = 0.2;
+  if (property.name === 'scale') difference = 0.01;else if (property.name === 'rotation') difference = 2;
 
-  _proto.storeTH3Offsets = function storeTH3Offsets(xOffset, yOffset, zOffset, range) {
-    var object = this.loadProperty('TH3');
-    var section;
+  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;
+  }
 
-    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
-      };
-    }
+  aframeObj.setAttribute(property.name, property.xValue + " " + property.yValue + " " + property.zValue);
+};
 
-    object.section = section;
-    this.storeProperty('TH3', object);
-  };
+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);
+  }
+};
 
-  _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 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.storeFilePath = function storeFilePath(filePath) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('rootFile', filePath);
-  };
+var keyPressHandlerFunction = function keyPressHandlerFunction(event) {
+  keyPressed[event.key] = true;
 
-  _proto.loadFilePath = function loadFilePath() {
-    var filename = _classPrivateFieldLooseBase(this, _storage)[_storage].getItem('rootFile');
+  if (keyPressed.Z || keyPressed.z) {
+    handlePositioning(geoAttributes[0], event);
+  }
 
-    if (filename === null || filename === undefined) {
-      return 'defaultHistogram';
-    }
+  if (keyPressed.X || keyPressed.x) {
+    handlePositioning(geoAttributes[1], event);
+  }
 
-    return filename;
-  };
+  if (keyPressed.C || keyPressed.c) {
+    handlePositioning(geoAttributes[2], event);
+  }
 
-  _proto.loadTH2Offsets = function loadTH2Offsets() {
-    var object = this.loadProperty('TH2');
+  if (keyPressed.Shift) {
+    handleChangeHistogramSectionByOwnRange(event);
+  }
 
-    if (object !== null) {
-      return object.section;
-    } else {
-      return null;
-    }
-  };
+  handleChangeHistogramSectionByDefaultRange(event);
 
-  _proto.loadTH3Offsets = function loadTH3Offsets() {
-    var object = this.loadProperty('TH3');
+  if (event.key === ' ') {
+    cameraService.verticalMoveCamera(true, 0.3);
+  }
 
-    if (object !== null) {
-      return object.section;
-    } else {
-      return null;
-    }
-  };
+  if (event.shiftKey) {
+    cameraService.verticalMoveCamera(false, 0.3);
+  }
 
-  _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 === '1') {
+    toolsSelector.next(1);
+    activeTool = 1;
+  }
 
-  return NdmVrStorageService;
-}();
-var localStorageService = new NdmVrStorageService();
+  if (event.key === '2') {
+    toolsSelector.next(2);
+    activeTool = 2;
+  }
 
-var _subject$2 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
+  if (event.key === '3') {
+    toolsSelector.next(3);
+    activeTool = 3;
+  }
 
-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 === '4') {
+    toolsSelector.next(4);
+    activeTool = 4;
   }
 
-  var _proto = BinSubject.prototype;
+  if (event.key === '5') {
+    toolsSelector.next(5);
+    activeTool = 5;
+  }
 
-  _proto.saveSelectedBinToLocalStorage = function saveSelectedBinToLocalStorage() {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next(true);
-  };
+  if (event.key === '6') {
+    toolsSelector.next(6);
+    activeTool = 6;
+  }
 
-  _proto.deleteBinFromLocalStorage = function deleteBinFromLocalStorage() {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next(false);
-  };
+  if (event.key === '7') {
+    toolsSelector.next(7);
+    activeTool = 7;
+  }
 
-  _proto.getKeyboardEvent = function getKeyboardEvent() {
-    return _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].asObservable();
-  };
+  if (event.key === '8') {
+    toolsSelector.next(8);
+    activeTool = 8;
+  }
 
-  return BinSubject;
-}();
+  if (event.key === '9') {
+    toolsSelector.next(9);
+    activeTool = 9;
+  }
 
-var binSubject = new BinSubject();
+  if (event.key === '0') {
+    toolsSelector.next(0);
+    activeTool = 0;
+  }
 
-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;
+  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');
+      }
+    });
+  }
 
-      checked = false;
-      var intersection = evt.detail.intersection;
-      subscription = binSubject.getKeyboardEvent().subscribe(function (save) {
-        if (save) {
-          localStorageService.storeBinToLocalStorage(_this.userData);
-          localStorageService.storeCurrentBinToLocalStorage(_this.userData);
-          _this.userData.markedColor = _this.userData.selectColor;
+  if (event.key === 'r' || event.key === 'R') {
+    binSubject.deleteBinFromLocalStorage();
+  }
 
-          _this.setAttribute('material', 'opacity', '1');
+  if (event.key === 'm' || event.key === 'M') {
+    histogramTH2Service.changeHistogramFunction('feet', 'TH2');
+  }
 
-          jsrootSubject.showBinProjection(_this.userData);
-        } else {
-          localStorageService.deleteBinFromLocalStorage(_this.userData);
-          _this.userData.markedColor = _this.userData.color;
+  if (event.key === 'n' || event.key === 'N') {
+    histogramTH2Service.changeHistogramFunction('default', 'TH2');
+  }
 
-          _this.setAttribute('material', 'opacity', '0.75');
-        }
-      });
+  if (event.key === 'c' || event.key === 'C') {
+    cameraSubject.setUserState();
+  }
 
-      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);
-      }
+  if (event.key === 'v' || event.key === 'V') {
+    cameraSubject.setVisibilityOfBanners('keyboard');
+  }
 
-      this.setAttribute('material', 'opacity', '1');
-    });
-    el.addEventListener('mouseleave', function setPassive() {
-      subscription.unsubscribe();
+  if (event.key === 'x' || event.key === 'X') {
+    cameraSubject.shiftBanners();
+  }
 
-      if (checked === false) {
-        this.setAttribute('material', 'color', this.userData.markedColor);
-        this.setAttribute('material', 'opacity', '0.75');
-      }
+  if (event.key === 'x' || event.key === 'X') {
+    cameraSubject.shiftBanners();
+  }
+};
 
-      clickCount = 0;
-    });
-    el.addEventListener('click', function setActive(evt) {
-      clickCount = clickCount + 1;
-      checked = false;
-      setTimeout(function () {
-        clickCount = 0;
-      }, 600);
+var switchDisplayModeOnBin = function switchDisplayModeOnBin(event) {
+  event.preventDefault();
+  var binDisplayMode;
 
-      if (clickCount === 2) {
-        clickCount = 0;
-        checked = true;
-        this.setAttribute('material', 'color', '#99ff00');
-        this.setAttribute('material', 'opacity', '1');
-        var camera = document.getElementById('cameraWrapper');
+  if (event.deltaY > 0) {
+    binDisplayMode = 1;
+  } else {
+    binDisplayMode = -1;
+  }
 
-        if (camera !== null) {
-          camera.object3D.position.y = this.object3D.position.y + 0.4;
+  histogramTH2Service.changeTypeOfBinMark(binDisplayMode, 'TH2');
+  histogramTH3Service.changeTypeOfBinMark(binDisplayMode, 'TH3');
+};
 
-          if (this.userData.content > 0.5) {
-            camera.setAttribute('animation', "property: position; to: " + (-0.5 + this.object3D.position.x) + " " + this.object3D.position.y + " " + this.object3D.position.z + "\n              ; dur: 600; easing: linear;");
-          } else if (this.userData.content > 0.2) {
-            camera.setAttribute('animation', "property: position; to: " + (-0.5 + this.object3D.position.x) + " " + (this.object3D.position.y + 0.1) + " " + (this.object3D.position.z + 0.5) + "\n              ; dur: 600; easing: linear;");
-          } else {
-            camera.setAttribute('animation', "property: position; to: " + (this.object3D.position.x + 2) + " " + (this.object3D.position.y + 0.1) + " " + (this.object3D.position.z + 8.5) + "\n              ; dur: 600; easing: linear;");
-          }
-        }
-      } else if (clickCount === 1) {
-        this.setAttribute('material', 'color', '#99ff00');
-        this.setAttribute('material', 'opacity', '1');
-        localStorageService.storeCurrentBinToLocalStorage(this.userData);
-        jsrootSubject.showBinProjection(this.userData);
-      }
+var getActiveTool = function getActiveTool() {
+  return activeTool;
+};
 
-      var infoBanner = document.getElementById('th2-banner');
+var keyReleaseHandlerFunction = function keyReleaseHandlerFunction(event) {
+  delete keyPressed[event.key];
+};
 
-      if (infoBanner === null) {
-        infoBanner = document.getElementById('th3-banner');
-      }
+var initialKeyboardController = function initialKeyboardController(data, object) {
+  aframeObj = object;
+  geoAttributes = [data.position, data.scale, data.rotation];
 
-      if (infoBanner !== null) {
-        var planes = infoBanner.childNodes;
+  for (var i = 0; i < 3; i++) {
+    aframeObj.setAttribute(geoAttributes[i].name, geoAttributes[i].xValue + " " + geoAttributes[i].yValue + " " + geoAttributes[i].zValue);
+  }
+};
 
-        if (this.userData.typeName === 'TH3' && planes.length === 5) {
-          var zCor = "[" + this.userData.zTitle + "] [" + this.userData.zMin + "," + this.userData.zMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\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');
-          var content = "Content: " + this.userData.absoluteContent + " [" + this.userData.content + "]\n";
-          planes[0].setAttribute('text', "value: " + content + "; color: " + this.userData.color + "; align: 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;");
-          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 keyboardUpdateCameraReference = function keyboardUpdateCameraReference() {
+  cameraService = new CameraService();
+};
 
-          var _xCor = "[" + this.userData.xTitle + "] [" + this.userData.xMin + "," + this.userData.xMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
+var _storage = /*#__PURE__*/_classPrivateFieldLooseKey("storage");
 
-          var _yCor = "[" + this.userData.yTitle + "] [" + this.userData.yMin + "," + this.userData.yMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
+var _camera = /*#__PURE__*/_classPrivateFieldLooseKey("camera");
 
-          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;");
-        }
-      } else {
-        console.log('You dont have any information banner!!!');
+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;
+        });
       }
     });
-  },
-  update: function update() {
-    var el = this.el;
-    el.setAttribute('material', 'color', el.userData.markedColor);
-    el.setAttribute('material', 'opacity', '0.75');
-  }
-});
 
-AFRAME.registerComponent('binth2', {
-  schema: {
-    id: {
-      type: 'string'
-    },
-    content: {
-      "default": 0
-    },
-    absoluteContent: {
-      "default": 0
-    },
-    binName: {
-      "default": ''
-    },
-    xTitle: {
-      type: 'string'
-    },
-    yTitle: {
-      type: 'string'
-    },
-    xMin: {
-      type: 'number'
-    },
-    yMin: {
-      type: 'number'
-    },
-    xMax: {
-      type: 'number'
-    },
-    yMax: {
-      type: 'number'
-    },
-    xCenter: {
-      type: 'number'
-    },
-    yCenter: {
-      type: 'number'
-    },
-    xWidth: {
-      type: 'number'
-    },
-    yWidth: {
-      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: 'TH2',
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
+    this.containThisBin = function (binData) {
+      var updatedArray = _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
+        return item.id === binData.id;
+      });
+
+      return updatedArray.length !== 0;
     };
-  },
-  update: function update() {
-    var el = this.el;
-    el.userData = {
-      typeName: 'TH2',
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
+
+    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();
   }
-});
 
-AFRAME.registerComponent('binth3', {
-  schema: {
-    id: {
-      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'
+  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;
     }
-  },
-  init: function init() {
-    var el = this.el;
-    el.userData = {
-      typeName: 'TH3',
-      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: 'TH3',
-      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
-    };
+
+    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 _cameraWrapper = /*#__PURE__*/_classPrivateFieldLooseKey("cameraWrapper");
+  var _proto = BinDataDistributor.prototype;
 
-var _setVerticalOffset = /*#__PURE__*/_classPrivateFieldLooseKey("setVerticalOffset");
+  _proto.sendDataOfTheSelectedBin = function sendDataOfTheSelectedBin(binData) {
+    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].next(binData);
+  };
 
-var CameraService = function CameraService() {
-  var _this = this;
+  _proto.getBinDistributor = function getBinDistributor() {
+    return _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].asObservable();
+  };
 
-  Object.defineProperty(this, _cameraWrapper, {
-    writable: true,
-    value: void 0
-  });
+  return BinDataDistributor;
+}();
 
-  this.verticalMoveCamera = function (moveUp, speed) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
+var binDataDistributor = new BinDataDistributor();
 
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      if (moveUp) {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y += speed;
+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 {
-        if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y > 0) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y -= speed;
+        this.setAttribute('material', 'color', this.userData.axisX);
       }
-    }
-  };
 
-  this.horizontalMoveCamera = function (axis, increment, speed) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
+      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;
+    });
+    el.addEventListener('click', function setActive(evt) {
+      clickCount = clickCount + 1;
+      checked = false;
+      setTimeout(function () {
+        clickCount = 0;
+      }, 600);
+
+      if (clickCount === 2) {
+        clickCount = 0;
+        checked = true;
+        this.setAttribute('material', 'color', '#99ff00');
+        this.setAttribute('material', 'opacity', '1');
+        var camera = document.getElementById('cameraWrapper');
+
+        if (camera !== null) {
+          camera.object3D.position.y = this.object3D.position.y + 0.4;
+
+          if (this.userData.content > 0.5) {
+            camera.setAttribute('animation', "property: position; to: " + (-0.5 + this.object3D.position.x) + " " + this.object3D.position.y + " " + this.object3D.position.z + "\n              ; dur: 600; easing: linear;");
+          } else if (this.userData.content > 0.2) {
+            camera.setAttribute('animation', "property: position; to: " + (-0.5 + this.object3D.position.x) + " " + (this.object3D.position.y + 0.1) + " " + (this.object3D.position.z + 0.5) + "\n              ; dur: 600; easing: linear;");
+          } else {
+            camera.setAttribute('animation', "property: position; to: " + (this.object3D.position.x + 2) + " " + (this.object3D.position.y + 0.1) + " " + (this.object3D.position.z + 8.5) + "\n              ; dur: 600; easing: linear;");
+          }
+        }
+      } else if (clickCount === 1) {
+        this.setAttribute('material', 'color', '#99ff00');
+        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');
+
+      if (infoBanner === null) {
+        infoBanner = document.getElementById('th3-banner');
+      }
+
+      if (infoBanner !== null) {
+        var planes = infoBanner.childNodes;
+
+        if (this.userData.typeName === 'TH3' && planes.length === 5) {
+          var zCor = "[" + this.userData.zTitle + "] [" + this.userData.zMin + "," + this.userData.zMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\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');
+          var content = "Content: " + this.userData.absoluteContent + " [" + this.userData.content + "]\n";
+          planes[0].setAttribute('text', "value: " + content + "; color: " + this.userData.color + "; align: 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;");
+          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');
 
-    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 _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');
+  }
+});
 
-  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 (offset) {
-    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$3 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var HistogramSubject = /*#__PURE__*/function () {
-  function HistogramSubject() {
-    Object.defineProperty(this, _subject$3, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3] = new rxjs.Subject();
-  }
-
-  var _proto = HistogramSubject.prototype;
-
-  _proto.changeHistogramSectionByOffset = function changeHistogramSectionByOffset(axis, histogramType, increment, defaultRange) {
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next({
-      name: histogramType,
-      axis: axis,
-      increment: increment,
-      defaultRange: defaultRange
-    });
-  };
-
-  _proto.changeHistogramFunction = function changeHistogramFunction(typeFunction, histogramType) {
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next({
-      fFunction: typeFunction,
-      name: histogramType
-    });
-  };
-
-  _proto.getChangedSection = function getChangedSection() {
-    return _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].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);
-  }
+  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 === '1') {
-    cameraService.setPredefinedDownPosition();
-  }
+    if (!show) {
+      camera.object3D.position.y = 1.6;
 
-  if (event.key === '2') {
-    cameraService.setPredefinedUpPosition();
-  }
+      if (prevPosition !== null) {
+        camera.object3D.position.x = prevPosition.x;
+        camera.object3D.position.z = prevPosition.z;
+        camera.object3D.position.y = prevPosition.y;
+      }
 
-  if (event.key === '3') {
-    cameraService.setPredefinedRightPosition();
-  }
+      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 === '4') {
-    cameraService.setPredefinedLeftPosition();
-  }
+  var renderActiveTool = function renderActiveTool() {
+    switch (activeTool) {
+      case 1:
+        activeToolHighlight = '-0.675 -0.825 -1';
+        break;
 
-  if (event.key === '5') {
-    cameraService.setPredefinedDownPositionWithOffset();
-  }
+      case 2:
+        activeToolHighlight = '-0.525 -0.825 -1';
+        break;
 
-  if (event.key === '6') {
-    cameraService.setPredefinedUpPositionWithOffset();
-  }
+      case 3:
+        activeToolHighlight = '-0.375 -0.825 -1';
+        break;
 
-  if (event.key === '7') {
-    cameraService.setPredefinedRightPositionWithOffset();
-  }
+      case 4:
+        activeToolHighlight = '-0.225 -0.825 -1';
+        break;
 
-  if (event.key === '8') {
-    cameraService.setPredefinedLeftPositionWithOffset();
-  }
+      case 5:
+        activeToolHighlight = '-0.075 -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 6:
+        activeToolHighlight = '0.075 -0.825 -1';
+        break;
 
-  if (event.key === 'r' || event.key === 'R') {
-    binSubject.deleteBinFromLocalStorage();
-  }
+      case 7:
+        activeToolHighlight = '0.225 -0.825 -1';
+        break;
 
-  if (event.key === 'm' || event.key === 'M') {
-    histogramTH2Service.changeHistogramFunction('feet', 'TH2');
-  }
+      case 8:
+        activeToolHighlight = '0.375 -0.825 -1';
+        break;
 
-  if (event.key === 'n' || event.key === 'N') {
-    histogramTH2Service.changeHistogramFunction('default', 'TH2');
-  }
+      case 9:
+        activeToolHighlight = '0.525 -0.825 -1';
+        break;
 
-  if (event.key === 'c' || event.key === 'C') {
-    cameraSubject.setUserState();
-  }
+      case 0:
+        activeToolHighlight = '0.675 -0.825 -1';
+        break;
+    }
 
-  if (event.key === 'v' || event.key === 'V') {
-    cameraSubject.setVisibilityOfBanners('keyboard');
-  }
+    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;"
+    }));
+  };
 
-  if (event.key === 'x' || event.key === 'X') {
-    cameraSubject.shiftBanners();
-  }
-};
+  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
+    }));
+  };
 
-var keyReleaseHandlerFunction = function keyReleaseHandlerFunction(event) {
-  delete keyPressed[event.key];
+  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 initialKeyboardController = function initialKeyboardController(data, object) {
-  aframeObj = object;
-  geoAttributes = [data.position, data.scale, data.rotation];
-
-  for (var i = 0; i < 3; i++) {
-    aframeObj.setAttribute(geoAttributes[i].name, geoAttributes[i].xValue + " " + geoAttributes[i].yValue + " " + geoAttributes[i].zValue);
+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
+    };
   }
-};
-
-var keyboardUpdateCameraReference = function keyboardUpdateCameraReference() {
-  cameraService = new CameraService();
-};
+});
 
-AFRAME.registerComponent('histogram-control', {
+AFRAME$1.registerComponent('histogram-control', {
   schema: {
     position: {
       name: 'position',
@@ -1607,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'
@@ -1926,6 +2015,14 @@ var _zWidth = /*#__PURE__*/_classPrivateFieldLooseKey("zWidth");
 
 var _range = /*#__PURE__*/_classPrivateFieldLooseKey("range");
 
+var _labels = /*#__PURE__*/_classPrivateFieldLooseKey("labels");
+
+var _contentScale = /*#__PURE__*/_classPrivateFieldLooseKey("contentScale");
+
+var _minDisplayedContent = /*#__PURE__*/_classPrivateFieldLooseKey("minDisplayedContent");
+
+var _binScaleCoef = /*#__PURE__*/_classPrivateFieldLooseKey("binScaleCoef");
+
 var _shift = /*#__PURE__*/_classPrivateFieldLooseKey("shift");
 
 var _previousBins = /*#__PURE__*/_classPrivateFieldLooseKey("previousBins");
@@ -1936,6 +2033,10 @@ var _checkBinState = /*#__PURE__*/_classPrivateFieldLooseKey("checkBinState");
 
 var _createAxisEntity = /*#__PURE__*/_classPrivateFieldLooseKey("createAxisEntity");
 
+var _createTH3Histogram = /*#__PURE__*/_classPrivateFieldLooseKey("createTH3Histogram");
+
+var _createTH2Histogram = /*#__PURE__*/_classPrivateFieldLooseKey("createTH2Histogram");
+
 var _optimizeBinContent = /*#__PURE__*/_classPrivateFieldLooseKey("optimizeBinContent");
 
 var _getValidOffset = /*#__PURE__*/_classPrivateFieldLooseKey("getValidOffset");
@@ -2016,7 +2117,27 @@ var HistogramReactFactory = /*#__PURE__*/function () {
     });
     Object.defineProperty(this, _range, {
       writable: true,
-      value: 4
+      value: 8
+    });
+    Object.defineProperty(this, _labels, {
+      writable: true,
+      value: {
+        xInitial: 0,
+        yInitial: 0,
+        zInitial: 0
+      }
+    });
+    Object.defineProperty(this, _contentScale, {
+      writable: true,
+      value: 1
+    });
+    Object.defineProperty(this, _minDisplayedContent, {
+      writable: true,
+      value: 0
+    });
+    Object.defineProperty(this, _binScaleCoef, {
+      writable: true,
+      value: 2
     });
     Object.defineProperty(this, _shift, {
       writable: true,
@@ -2072,17 +2193,656 @@ var HistogramReactFactory = /*#__PURE__*/function () {
     Object.defineProperty(this, _createAxisEntity, {
       writable: true,
       value: function value(id, positionX, positionY, positionZ, rotationX, rotationY, rotationZ, width, height, _value, color, fontColor) {
-        return /*#__PURE__*/React__default.createElement("a-entity", {
+        return {
           key: id + _classPrivateFieldLooseBase(_this, _id)[_id],
-          geometry: "primitive: plane; width:" + width + "; height:" + height + ";",
-          text: "color: " + fontColor + "; width: 4; height:auto; align:center;",
-          "label-handler": "value: " + _value + "; delay:" + 500,
-          rotation: rotationX + " " + rotationY + " " + rotationZ,
-          material: "color: " + color + ";",
-          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: " + (positionX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset) + " " + (positionY + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset) + " " + (positionZ + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset) + "; to: " + positionX + " " + positionY + " " + positionZ + "; dur: 1005;"
-        });
+          geometry: {
+            primitive: 'plane',
+            width: width,
+            height: height
+          },
+          text: {
+            color: fontColor,
+            width: 4,
+            height: 'auto'
+          },
+          labelHandler: {
+            value: _value,
+            delay: 500
+          },
+          rotation: {
+            x: rotationX,
+            y: rotationY,
+            z: rotationZ
+          },
+          material: {
+            color: color
+          },
+          animation: {
+            fromX: positionX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: positionY + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: positionZ + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: positionX,
+            toY: positionY,
+            toZ: positionZ
+          }
+        };
+      }
+    });
+    Object.defineProperty(this, _createTH3Histogram, {
+      writable: true,
+      value: function value() {
+        _classPrivateFieldLooseBase(_this, _selectedBins$1)[_selectedBins$1] = localStorageService.getBinsFromLocalStorage();
+        var elements = {
+          type: 'TH3',
+          bins: [],
+          labels: [],
+          banners: [],
+          ground: {},
+          titles: [],
+          axisLabels: []
+        };
+        var xcenter, xmin, xmax, xwidth;
+        var ycenter, ymin, ymax, ywidth;
+        var zcenter, zmin, zmax, zwidth;
+        var binName = '';
+        var absoluteContent;
+        var c;
+        var count = 0;
+        var maxXLength = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] : _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
+        var maxYLength = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] : _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
+        var maxZLength = _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _zLimit)[_zLimit] ? _classPrivateFieldLooseBase(_this, _zLimit)[_zLimit] : _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
+
+        var xTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fTitle;
+
+        var yTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fTitle;
+
+        var zTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.fTitle;
+
+        var xLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels.arr : [];
+        var yLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels.arr : [];
+        var zLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.fLabels.arr : [];
+        var currentBinScales = [];
+
+        for (var iz = _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset]; iz <= maxZLength; iz++) {
+          for (var iy = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; iy <= maxYLength; iy++) {
+            for (var ix = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; ix <= maxXLength; ix++) {
+              xcenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinCenter(ix);
+              xmin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinLowEdge(ix);
+              xmax = xcenter + (xcenter - xmin);
+              xwidth = xmax - xmin;
+              ycenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinCenter(iy);
+              ymin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinLowEdge(iy);
+              ymax = ycenter + (ycenter - ymin);
+              ywidth = ymax - ymin;
+              zcenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.GetBinCenter(iz);
+              zmin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.GetBinLowEdge(iz);
+              zmax = zcenter + (zcenter - zmin);
+              zwidth = zmax - zmin;
+              absoluteContent = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].getBinContent(ix, iy, iz);
+              c = _classPrivateFieldLooseBase(_this, _optimizeBinContent)[_optimizeBinContent](absoluteContent, _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fMaximum);
+
+              if (c > _classPrivateFieldLooseBase(_this, _minDisplayedContent)[_minDisplayedContent]) {
+                var size = c;
+                if (c < 0.15) size = 0.15;
+
+                var color = _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getBinColor(c);
+
+                var id = _classPrivateFieldLooseBase(_this, _id)[_id] + xmin + 'th3' + xmax + 'th3' + zmin + 'th3' + zmax + 'th3' + ymin + 'th3' + ymax;
+                var markedColor = void 0;
+
+                if (_classPrivateFieldLooseBase(_this, _checkBinState)[_checkBinState](id)) {
+                  markedColor = _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor();
+                } else {
+                  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              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),
+                    fromDepth: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
+                    toWidth: width,
+                    toHeight: width,
+                    toDepth: width
+                  },
+                  animation2: {
+                    fromX: posX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+                    fromY: posY + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+                    fromZ: posZ + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+                    toX: posX,
+                    toY: posY,
+                    toZ: posZ
+                  },
+                  animation3: {
+                    fromColor: _classPrivateFieldLooseBase(_this, _getPreviousBinColor)[_getPreviousBinColor](id),
+                    toColor: markedColor
+                  }
+                };
+                currentBinScales[count] = {
+                  key: id,
+                  scale: width,
+                  color: markedColor
+                };
+              }
+
+              count++;
+            }
+          }
+        }
+
+        _classPrivateFieldLooseBase(_this, _previousBins)[_previousBins] = currentBinScales;
+        var normalAxis = [];
+        var reversedAxis = [];
+        count = 0;
+
+        for (var _iz = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; _iz <= maxYLength; _iz++) {
+          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](50000 + count, -2.5 + _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset], _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _iz - 1, 270, 180, 0, 2, 1, "" + (yLabels[_iz - 1] ? yLabels[_iz - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + _iz - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](55000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _iz - 1, 270, 360, 0, 2, 1, "" + (yLabels[_iz - 1] ? yLabels[_iz - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + _iz - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          count++;
+        }
+
+        elements.axisLabels[0] = {
+          id: 'leftLabel',
+          key: 6000 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: yTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
+          },
+          rotation: {
+            x: 270,
+            y: 270,
+            z: 0
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4,
+            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5
+          }
+        };
+        elements.axisLabels[1] = {
+          id: 'rightLabel',
+          key: 64001 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: yTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
+          },
+          rotation: {
+            x: 270,
+            y: 90,
+            z: 0
+          },
+          animation: {
+            fromX: maxXLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: maxYLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: maxXLength + 2,
+            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
+            toZ: maxYLength - 2.5
+          }
+        };
+
+        for (var _ix = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; _ix <= maxXLength; _ix++) {
+          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](70000 + count, _ix - 1, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 270, 0, 2, 1, "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + _ix - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](75000 + count, _ix - 1, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 90, 0, 2, 1, "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + _ix - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          count++;
+        }
+
+        elements.axisLabels[2] = {
+          id: 'downLabel',
+          key: 84002 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: xTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
+          },
+          rotation: {
+            x: 270,
+            y: 180,
+            z: 0
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset],
+            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4
+          }
+        };
+        elements.axisLabels[3] = {
+          id: 'upLabel',
+          key: 85003 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: xTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
+          },
+          rotation: {
+            x: 270,
+            y: 0,
+            z: 0
+          },
+          animation: {
+            fromX: maxXLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: maxYLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: maxXLength - 2.5,
+            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
+            toZ: maxYLength + 2
+          }
+        };
+        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](90000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 360, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](91000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 90, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        count++;
+        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](92000 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 270, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](93000 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        count++;
+        elements.axisLabels[4] = {
+          id: 'upLabel1',
+          key: 95004 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: zTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
+          },
+          rotation: {
+            x: 0,
+            y: 270,
+            z: 90
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 1.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 1.5,
+            toY: maxZLength - 1,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2
+          }
+        };
+        elements.axisLabels[5] = {
+          id: 'upLabel2',
+          key: 100005 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: zTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
+          },
+          rotation: {
+            x: 0,
+            y: 90,
+            z: 90
+          },
+          animation: {
+            fromX: maxXLength - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: maxYLength + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: maxXLength - 0.5,
+            toY: maxZLength - 1,
+            toZ: maxYLength
+          }
+        };
+        elements.axisLabels[6] = {
+          id: 'upLabel3',
+          key: 105006 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: zTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
+          },
+          rotation: {
+            x: 0,
+            y: 360,
+            z: 90
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: maxYLength - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2,
+            toY: maxZLength - 1,
+            toZ: maxYLength - 0.5
+          }
+        };
+        elements.axisLabels[7] = {
+          id: 'upLabel4',
+          key: 105007 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: zTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
+          },
+          rotation: {
+            x: 0,
+            y: 180,
+            z: 90
+          },
+          animation: {
+            fromX: maxXLength - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 1.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: maxXLength - 0.5,
+            toY: maxZLength - 1,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 1.5
+          }
+        };
+        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];
+        elements.ground = {
+          key: 125000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
+          scale: {
+            width: bannerWidthX + 8,
+            height: 0.2,
+            depth: bannerWidthY + 8
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1,
+            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1.5,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5
+          }
+        };
+        count++;
+        elements.banners[1] = {
+          key: 130000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
+          id: 'th-mapping',
+          geometry: {
+            width: 1,
+            height: 15,
+            depth: 22
+          },
+          position: {
+            x: maxXLength + 8,
+            y: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 0.5,
+            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 2.5
+          },
+          material: {
+            color: '#ffffff',
+            transparent: true
+          }
+        };
+        elements.labels = [].concat(normalAxis, reversedAxis);
+        return elements;
+      }
+    });
+    Object.defineProperty(this, _createTH2Histogram, {
+      writable: true,
+      value: function value(projectionFunction) {
+        _classPrivateFieldLooseBase(_this, _selectedBins$1)[_selectedBins$1] = localStorageService.getBinsFromLocalStorage();
+        var elements = {
+          type: 'TH2',
+          bins: [],
+          labels: [],
+          banners: [],
+          ground: {},
+          titles: [],
+          axisLabels: []
+        };
+        var centeredYPosition;
+        var xcenter, xmin, xmax, xwidth;
+        var ycenter, ymin, ymax, ywidth;
+        var c;
+        var binName = '';
+        var absoluteContent;
+        var count = 0;
+        var maxXLength = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fNbins ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fNbins : _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
+        var maxYLength = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fNbins ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fNbins : _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
+        var xTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fTitle !== '' ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fTitle : 'x';
+        var yTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fTitle !== '' ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fTitle : 'y';
+        var xLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels.arr : [];
+        var yLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels.arr : [];
+        var currentBinScales = [];
+
+        for (var iy = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; iy <= maxYLength; iy++) {
+          for (var ix = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; ix <= maxXLength; ix++) {
+            xcenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinCenter(ix);
+            xmin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinLowEdge(ix);
+            xmax = xcenter + (xcenter - xmin);
+            xwidth = xmax - xmin;
+            ycenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinCenter(iy);
+            ymin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinLowEdge(iy);
+            ymax = ycenter + (ycenter - ymin);
+            ywidth = ymax - ymin;
+            absoluteContent = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].getBinContent(ix, iy);
+            c = _classPrivateFieldLooseBase(_this, _optimizeBinContent)[_optimizeBinContent](absoluteContent, _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fMaximum);
+            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);
+
+              var color = projectionColor === '' ? _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getBinColor(c) : projectionColor;
+              var id = _classPrivateFieldLooseBase(_this, _id)[_id] + xmin + 'th2' + xmax + 'th2' + ymin + 'th2' + ymax;
+              var markedColor = void 0;
+
+              if (_classPrivateFieldLooseBase(_this, _checkBinState)[_checkBinState](id)) {
+                markedColor = _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor();
+              } else {
+                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            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];
+
+              var depth = ywidth / _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth] / _classPrivateFieldLooseBase(_this, _binScaleCoef)[_binScaleCoef];
+
+              var posX = ix - 1;
+              var posY = iy - 1;
+              elements.bins[count] = {
+                id: id,
+                color: color,
+                binData: binData,
+                content: absoluteContent,
+                animation: {
+                  fromWidth: width,
+                  fromHeight: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
+                  fromDepth: depth,
+                  toWidth: width,
+                  toHeight: c * _classPrivateFieldLooseBase(_this, _range)[_range] * _classPrivateFieldLooseBase(_this, _contentScale)[_contentScale] / 8,
+                  toDepth: depth
+                },
+                animation2: {
+                  fromX: posX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+                  fromY: centeredYPosition,
+                  fromZ: posY + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+                  toX: posX,
+                  toY: centeredYPosition,
+                  toZ: posY
+                },
+                animation3: {
+                  fromColor: _classPrivateFieldLooseBase(_this, _getPreviousBinColor)[_getPreviousBinColor](id),
+                  toColor: markedColor
+                }
+              };
+              currentBinScales[count] = {
+                key: id,
+                scale: c,
+                color: markedColor
+              };
+            }
+
+            count++;
+          }
+        }
+
+        _classPrivateFieldLooseBase(_this, _previousBins)[_previousBins] = currentBinScales;
+        var normalAxis = [];
+        var reversedAxis = [];
+        count = 0;
+
+        for (var _iy = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; _iy <= maxYLength; _iy++) {
+          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](1500 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, 0, _iy - 1, 270, 180, 0, 2, 1, "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + (_iy - 1) * _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](3000 + count, maxXLength + 0.5, 0, _iy - 1, 270, 360, 0, 2, 1, "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + (_iy - 1) * _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          count++;
+        }
+
+        elements.axisLabels[0] = {
+          id: 'leftLabel',
+          key: 4500 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: yTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
+          },
+          rotation: {
+            x: 270,
+            y: 270,
+            z: 0
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4,
+            toY: 0,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5
+          }
+        };
+        elements.axisLabels[1] = {
+          id: 'rightLabel',
+          key: 6001 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: yTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
+          },
+          rotation: {
+            x: 270,
+            y: 90,
+            z: 0
+          },
+          animation: {
+            fromX: maxXLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: maxYLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: maxXLength + 2,
+            toY: 0,
+            toZ: maxYLength - 2.5
+          }
+        };
+
+        for (var _ix2 = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; _ix2 <= maxXLength; _ix2++) {
+          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](7500 + count, _ix2 - 1, 0, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 270, 0, 2, 1, "" + (xLabels[_ix2 - 1] ? xLabels[_ix2 - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + (_ix2 - 1) * _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](9000 + count, _ix2 - 1, 0, maxYLength + 0.5, 270, 90, 0, 2, 1, "" + (xLabels[_ix2 - 1] ? xLabels[_ix2 - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + (_ix2 - 1) * _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+          count++;
+        }
+
+        elements.axisLabels[2] = {
+          id: 'downLabel',
+          key: 10502 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: xTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
+          },
+          rotation: {
+            x: 270,
+            y: 180,
+            z: 0
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset],
+            toY: 0,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4
+          }
+        };
+        elements.axisLabels[3] = {
+          id: 'upLabel',
+          key: 12003 + _classPrivateFieldLooseBase(_this, _id)[_id],
+          text: {
+            value: xTitle,
+            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
+          },
+          rotation: {
+            x: 270,
+            y: 0,
+            z: 0
+          },
+          animation: {
+            fromX: maxXLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
+            fromZ: maxYLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: maxXLength - 2.5,
+            toY: 0,
+            toZ: maxYLength + 2
+          }
+        };
+        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](13500 + count, maxXLength + 0.5, 0, maxYLength + 0.5, 270, 360, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](15000 + count, maxXLength + 0.5, 0, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        count++;
+        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](16500 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, 0, maxYLength + 0.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](18000 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, 0, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+        count++;
+        elements.titles[0] = {
+          key: 195000 + _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: 16.5,
+            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 90
+          },
+          innerText: {
+            value: 'Press V 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];
+        elements.ground = {
+          key: 22500 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
+          scale: {
+            width: bannerWidthX + 8,
+            height: 0.2,
+            depth: bannerWidthY + 8
+          },
+          animation: {
+            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
+            fromY: -0.5,
+            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
+            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1,
+            toY: -0.5,
+            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5
+          }
+        };
+        count++;
+        elements.banners[1] = {
+          key: 240000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
+          id: 'th-mapping',
+          geometry: {
+            width: 0.1,
+            height: 15,
+            depth: 22
+          },
+          position: {
+            x: maxXLength + 8,
+            y: 7,
+            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 2.5
+          },
+          material: {
+            color: '#ffffff',
+            transparent: true
+          }
+        };
+        elements.labels = [].concat(normalAxis, reversedAxis);
+        return elements;
       }
     });
     Object.defineProperty(this, _optimizeBinContent, {
@@ -2250,505 +3010,71 @@ var HistogramReactFactory = /*#__PURE__*/function () {
   var _proto = HistogramReactFactory.prototype;
 
   _proto.initializeFactory = function initializeFactory(uniqueName, histogram, section, range, projections, theme) {
+    this.setUniqueName(uniqueName);
+    this.setTheme(theme);
+    this.setHistogram(histogram, projections);
+    this.setSection(section);
+    this.setRange(range);
+  };
+
+  _proto.setUniqueName = function setUniqueName(uniqueName) {
     _classPrivateFieldLooseBase(this, _id)[_id] = uniqueName;
-    _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider] = new ThemeProvider(theme);
-    _classPrivateFieldLooseBase(this, _projections)[_projections] = projections;
-    _classPrivateFieldLooseBase(this, _histogram)[_histogram] = histogram;
-    _classPrivateFieldLooseBase(this, _type)[_type] = histogram._typename;
-    _classPrivateFieldLooseBase(this, _range)[_range] = 8;
-    _classPrivateFieldLooseBase(this, _xLimit)[_xLimit] = histogram.fXaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _yLimit)[_yLimit] = histogram.fYaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _xWidth)[_xWidth] = histogram.fXaxis.fXmax / histogram.fXaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _yWidth)[_yWidth] = histogram.fYaxis.fXmax / histogram.fYaxis.fNbins;
+  };
 
+  _proto.setSection = function setSection(section) {
     if (section !== null && section !== undefined) {
-      _classPrivateFieldLooseBase(this, _range)[_range] = section.range;
       if (section.xOffset) _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](section.xOffset, _classPrivateFieldLooseBase(this, _xLimit)[_xLimit]);
       if (section.yOffset) _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](section.yOffset, _classPrivateFieldLooseBase(this, _yLimit)[_yLimit]);
-    } else {
-      if (range) _classPrivateFieldLooseBase(this, _range)[_range] = range;
     }
 
-    if (histogram._typename.includes('TH3')) {
-      _classPrivateFieldLooseBase(this, _range)[_range] = 4;
-      _classPrivateFieldLooseBase(this, _zLimit)[_zLimit] = histogram.fZaxis.fNbins;
-      _classPrivateFieldLooseBase(this, _zWidth)[_zWidth] = histogram.fZaxis.fXmax / histogram.fZaxis.fNbins;
-
+    if (_classPrivateFieldLooseBase(this, _histogram)[_histogram]._typename.includes('TH3')) {
       if (section !== null && section !== undefined) {
         if (section.zOffset) _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](section.zOffset, _classPrivateFieldLooseBase(this, _zLimit)[_zLimit]);
-      } else {
-        if (range) _classPrivateFieldLooseBase(this, _range)[_range] = range;
       }
     }
   };
 
-  _proto.createTH3Histogram = function createTH3Histogram() {
-    _classPrivateFieldLooseBase(this, _selectedBins$1)[_selectedBins$1] = localStorageService.getBinsFromLocalStorage();
-    var elements = {
-      bins: [],
-      normalAxis: [],
-      reversedAxis: [],
-      banners: []
-    };
-    var xcenter, xmin, xmax, xwidth;
-    var ycenter, ymin, ymax, ywidth;
-    var zcenter, zmin, zmax, zwidth;
-    var binName = '';
-    var absoluteContent;
-    var c;
-    var count = 0;
-    var maxXLength = _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(this, _range)[_range] > _classPrivateFieldLooseBase(this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(this, _xLimit)[_xLimit] : _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(this, _range)[_range];
-    var maxYLength = _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(this, _range)[_range] > _classPrivateFieldLooseBase(this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(this, _yLimit)[_yLimit] : _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(this, _range)[_range];
-    var maxZLength = _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(this, _range)[_range] > _classPrivateFieldLooseBase(this, _zLimit)[_zLimit] ? _classPrivateFieldLooseBase(this, _zLimit)[_zLimit] : _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(this, _range)[_range];
-
-    var xTitle = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fTitle;
-
-    var yTitle = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fTitle;
-
-    var zTitle = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fZaxis.fTitle;
-
-    var xLabels = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fLabels ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fLabels.arr : [];
-    var yLabels = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fLabels ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fLabels.arr : [];
-    var zLabels = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fZaxis.fLabels ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fZaxis.fLabels.arr : [];
-    var currentBinScales = [];
-
-    for (var iz = _classPrivateFieldLooseBase(this, _zOffset)[_zOffset]; iz <= maxZLength; iz++) {
-      for (var iy = _classPrivateFieldLooseBase(this, _yOffset)[_yOffset]; iy <= maxYLength; iy++) {
-        for (var ix = _classPrivateFieldLooseBase(this, _xOffset)[_xOffset]; ix <= maxXLength; ix++) {
-          xcenter = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.GetBinCenter(ix);
-          xmin = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.GetBinLowEdge(ix);
-          xmax = xcenter + (xcenter - xmin);
-          xwidth = xmax - xmin;
-          ycenter = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.GetBinCenter(iy);
-          ymin = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.GetBinLowEdge(iy);
-          ymax = ycenter + (ycenter - ymin);
-          ywidth = ymax - ymin;
-          zcenter = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fZaxis.GetBinCenter(iz);
-          zmin = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fZaxis.GetBinLowEdge(iz);
-          zmax = zcenter + (zcenter - zmin);
-          zwidth = zmax - zmin;
-          absoluteContent = _classPrivateFieldLooseBase(this, _histogram)[_histogram].getBinContent(ix, iy, iz);
-          c = _classPrivateFieldLooseBase(this, _optimizeBinContent)[_optimizeBinContent](absoluteContent, _classPrivateFieldLooseBase(this, _histogram)[_histogram].fMaximum);
-
-          if (c > 0) {
-            var size = c;
-            if (c < 0.15) size = 0.15;
-
-            var color = _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getBinColor(c);
-
-            var id = _classPrivateFieldLooseBase(this, _id)[_id] + xmin + 'th3' + xmax + 'th3' + zmin + 'th3' + zmax + 'th3' + ymin + 'th3' + ymax;
-            var markedColor = void 0;
-
-            if (_classPrivateFieldLooseBase(this, _checkBinState)[_checkBinState](id)) {
-              markedColor = _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryAccentColor();
-            } else {
-              markedColor = color;
-            }
-
-            var binData = "id: " + id + ";\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 = xmin / _classPrivateFieldLooseBase(this, _xWidth)[_xWidth];
-
-            var posY = zmin / _classPrivateFieldLooseBase(this, _zWidth)[_zWidth] + 0.2;
-
-            var posZ = ymin / _classPrivateFieldLooseBase(this, _yWidth)[_yWidth];
-
-            elements.bins[count] = /*#__PURE__*/React__default.createElement("a-box", {
-              key: count,
-              "class": "clickable",
-              material: "color: " + markedColor + ";",
-              binth3: binData,
-              mouseevent: true,
-              animation: "property: scale; from: " + _classPrivateFieldLooseBase(this, _getPreviousBinScales)[_getPreviousBinScales](id) + " " + _classPrivateFieldLooseBase(this, _getPreviousBinScales)[_getPreviousBinScales](id) + " " + _classPrivateFieldLooseBase(this, _getPreviousBinScales)[_getPreviousBinScales](id) + "; to: " + width + " " + width + " " + width + "; dur: 1500; easing: linear;",
-              animation__1: "property: material.opacity; from: 0; to: 0.75; dur: 2600;",
-              animation__2: "property: position; from: " + (posX + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (posY + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (posZ + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + posX + " " + posY + " " + posZ + "; dur: 1000;",
-              animation__3: "property: material.color; from: " + _classPrivateFieldLooseBase(this, _getPreviousBinColor)[_getPreviousBinColor](id) + "; to: " + markedColor + "; dur: 2600;"
-            });
-            currentBinScales[count] = {
-              key: id,
-              scale: width,
-              color: markedColor
-            };
-          }
-
-          count++;
-        }
-      }
-    }
-
-    _classPrivateFieldLooseBase(this, _previousBins)[_previousBins] = currentBinScales;
-    count = 0;
-
-    for (var _iz = _classPrivateFieldLooseBase(this, _yOffset)[_yOffset]; _iz <= maxYLength; _iz++) {
-      var normalAxis = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](50000 + count, -2.5 + _classPrivateFieldLooseBase(this, _xOffset)[_xOffset], _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, _iz - 1, 270, 180, 0, 2, 1, "" + (yLabels[_iz - 1] ? yLabels[_iz - 1].fString : _iz - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-
-      var reversedAxis = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](55000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, _iz - 1, 270, 360, 0, 2, 1, "" + (yLabels[_iz - 1] ? yLabels[_iz - 1].fString : _iz - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-
-      elements.normalAxis[count] = normalAxis;
-      elements.reversedAxis[count] = reversedAxis;
-      count++;
-    }
-
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "leftLabel",
-      key: 60000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + yTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 270 + " " + 0,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 4 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 4) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 0.5) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "rightLabel",
-      key: 65000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + yTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 90 + " " + 0,
-      animation: "property: position; from: " + (maxXLength + 2 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (maxYLength - 2.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (maxXLength + 2) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1) + " " + (maxYLength - 2.5) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    count++;
-
-    for (var _ix = _classPrivateFieldLooseBase(this, _xOffset)[_xOffset]; _ix <= maxXLength; _ix++) {
-      var _normalAxis = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](70000 + count, _ix - 1, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2.5, 270, 270, 0, 2, 1, "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : _ix - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-
-      var _reversedAxis = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](75000 + count, _ix - 1, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 90, 0, 2, 1, "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : _ix - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+  _proto.setHistogram = function setHistogram(histogram, projections) {
+    _classPrivateFieldLooseBase(this, _projections)[_projections] = projections;
+    _classPrivateFieldLooseBase(this, _histogram)[_histogram] = histogram;
+    _classPrivateFieldLooseBase(this, _type)[_type] = histogram._typename;
+    _classPrivateFieldLooseBase(this, _xLimit)[_xLimit] = histogram.fXaxis.fNbins;
+    _classPrivateFieldLooseBase(this, _yLimit)[_yLimit] = histogram.fYaxis.fNbins;
+    _classPrivateFieldLooseBase(this, _xWidth)[_xWidth] = (histogram.fXaxis.fXmax - histogram.fXaxis.fXmin) / histogram.fXaxis.fNbins;
+    _classPrivateFieldLooseBase(this, _yWidth)[_yWidth] = (histogram.fYaxis.fXmax - histogram.fYaxis.fXmin) / histogram.fYaxis.fNbins;
+    _classPrivateFieldLooseBase(this, _labels)[_labels].xInitial = histogram.fXaxis.fXmin;
+    _classPrivateFieldLooseBase(this, _labels)[_labels].yInitial = histogram.fYaxis.fXmin;
+    _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](_classPrivateFieldLooseBase(this, _xOffset)[_xOffset], _classPrivateFieldLooseBase(this, _xLimit)[_xLimit]);
+    _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](_classPrivateFieldLooseBase(this, _yOffset)[_yOffset], _classPrivateFieldLooseBase(this, _yLimit)[_yLimit]);
 
-      elements.normalAxis[count] = _normalAxis;
-      elements.reversedAxis[count] = _reversedAxis;
-      count++;
+    if (histogram._typename.includes('TH3')) {
+      _classPrivateFieldLooseBase(this, _zLimit)[_zLimit] = histogram.fZaxis.fNbins;
+      _classPrivateFieldLooseBase(this, _zWidth)[_zWidth] = histogram.fZaxis.fXmax / histogram.fZaxis.fNbins;
+      _classPrivateFieldLooseBase(this, _labels)[_labels].zInitial = histogram.fZaxis.fXmin;
+      _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](_classPrivateFieldLooseBase(this, _zOffset)[_zOffset], _classPrivateFieldLooseBase(this, _zLimit)[_zLimit]);
     }
-
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "downLabel",
-      key: 80000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + xTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 180 + " " + 0,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 4 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 4) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "upLabel",
-      key: 85000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + xTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 0 + " " + 0,
-      animation: "property: position; from: " + (maxXLength - 2.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (maxYLength + 2 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (maxXLength - 2.5) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1) + " " + (maxYLength + 2) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    count++;
-    elements.normalAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](90000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 360, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1].fString : _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    elements.reversedAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](91000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2.5, 270, 90, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1].fString : _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    count++;
-    elements.normalAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](92000 + count, _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2.5, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 270, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1].fString : _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    elements.reversedAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](93000 + count, _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2.5, _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1].fString : _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    count++;
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 95000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + zTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y') + "; width: 10; height:auto; align:center;",
-      rotation: 0 + " " + 270 + " " + 90,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 1.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (maxZLength - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 1.5) + " " + (maxZLength - 1) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 100000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + zTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y') + "; width: 10; height:auto; align:center;",
-      rotation: 0 + " " + 90 + " " + 90,
-      animation: "property: position; from: " + (maxXLength - 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (maxZLength - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (maxYLength + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (maxXLength - 0.5) + " " + (maxZLength - 1) + " " + maxYLength + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    count++;
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 105000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + zTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y') + "; width: 10; height:auto; align:center;",
-      rotation: 0 + " " + 360 + " " + 90,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (maxZLength - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (maxYLength - 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2) + " " + (maxZLength - 1) + " " + (maxYLength - 0.5) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 110000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + zTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y') + "; width: 10; height:auto; align:center;",
-      rotation: 0 + " " + 180 + " " + 90,
-      animation: "property: position; from: " + (maxXLength - 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (maxZLength - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 1.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (maxXLength - 0.5) + " " + (maxZLength - 1) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 1.5) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    count++;
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 115000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + _classPrivateFieldLooseBase(this, _histogram)[_histogram].fTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor() + "; width: 270; height:auto; align:center;",
-      rotation: 0 + " " + 123 + " " + 0,
-      position: _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 90 + " " + (maxZLength + 16.5) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 90)
-    }, /*#__PURE__*/React__default.createElement("a-text", {
-      value: "Press V to show projections or controls",
-      position: "0 10 0",
-      width: "150",
-      height: "auto",
-      align: "center",
-      color: _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: plane; width:170; height:30;",
-      position: "0 0 -1",
-      material: "opacity: 0.9; color: white;"
-    }));
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 120000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + _classPrivateFieldLooseBase(this, _histogram)[_histogram].fName + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor() + "; width: 230; height:auto; align:center;",
-      rotation: 0 + " " + 330 + " " + 0,
-      position: _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + 120 + " " + (maxZLength + 16.5) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 70)
-    }, /*#__PURE__*/React__default.createElement("a-text", {
-      value: "Press buttonY to show projections or controls",
-      position: "0 10 0",
-      width: "150",
-      height: "auto",
-      align: "center",
-      color: _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: plane; width:170; height:30;",
-      position: "0 0 -1",
-      material: "opacity: 0.9; color: white;"
-    }));
-    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];
-    elements.banners[0] = /*#__PURE__*/React__default.createElement("a-box", {
-      key: 125000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      width: bannerWidthX + 8,
-      material: "color: #171717",
-      height: 0.2,
-      depth: bannerWidthY + 8,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset) + "\n        " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + ";\n        to: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1) + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] - 1.5) + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5) + "dur: 1100;"
-    });
-    count++;
-    elements.banners[1] = /*#__PURE__*/React__default.createElement("a-box", {
-      key: 130000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      id: "th-mapping",
-      geometry: "width:1; height:15; depth:22;",
-      position: maxXLength + 8 + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(this, _range)[_range] / 2 + 0.5) + "\n       " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(this, _range)[_range] / 2 + 2.5),
-      material: "transparent:true"
-    });
-    count++;
-    elements.banners[2] = /*#__PURE__*/React__default.createElement("a-box", {
-      key: 135000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      id: "th-background",
-      geometry: "width:0.2; height:15; depth:24;",
-      position: maxXLength + 8.2 + " " + (_classPrivateFieldLooseBase(this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(this, _range)[_range] / 2 + 0.5) + "\n       " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 1 + _classPrivateFieldLooseBase(this, _range)[_range] / 2 + 1.5),
-      material: "color: white, transparent:false"
-    });
-    return elements;
   };
 
-  _proto.createTH2Histogram = function createTH2Histogram(projectionFunction) {
-    _classPrivateFieldLooseBase(this, _selectedBins$1)[_selectedBins$1] = localStorageService.getBinsFromLocalStorage();
-    var elements = {
-      bins: [],
-      normalAxis: [],
-      reversedAxis: [],
-      banners: []
-    };
-    var centeredYPosition;
-    var xcenter, xmin, xmax, xwidth;
-    var ycenter, ymin, ymax, ywidth;
-    var c;
-    var binName = '';
-    var absoluteContent;
-    var count = 0;
-    var maxXLength = _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(this, _range)[_range] > _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fNbins ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fNbins : _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(this, _range)[_range];
-    var maxYLength = _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(this, _range)[_range] > _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fNbins ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fNbins : _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(this, _range)[_range];
-    var xTitle = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fTitle !== '' ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fTitle : 'x';
-    var yTitle = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fTitle !== '' ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fTitle : 'y';
-    var xLabels = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fLabels ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.fLabels.arr : [];
-    var yLabels = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fLabels ? _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.fLabels.arr : [];
-    var currentBinScales = [];
-
-    for (var iy = _classPrivateFieldLooseBase(this, _yOffset)[_yOffset]; iy <= maxYLength; iy++) {
-      for (var ix = _classPrivateFieldLooseBase(this, _xOffset)[_xOffset]; ix <= maxXLength; ix++) {
-        xcenter = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.GetBinCenter(ix);
-        xmin = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fXaxis.GetBinLowEdge(ix);
-        xmax = xcenter + (xcenter - xmin);
-        xwidth = xmax - xmin;
-        ycenter = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.GetBinCenter(iy);
-        ymin = _classPrivateFieldLooseBase(this, _histogram)[_histogram].fYaxis.GetBinLowEdge(iy);
-        ymax = ycenter + (ycenter - ymin);
-        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;
-
-        if (c > 0) {
-          var projectionColor = _classPrivateFieldLooseBase(this, _projectionFunction)[_projectionFunction](projectionFunction, xmin, ymin);
-
-          var color = projectionColor === '' ? _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getBinColor(c) : projectionColor;
-          var id = _classPrivateFieldLooseBase(this, _id)[_id] + xmin + 'th2' + xmax + 'th2' + ymin + 'th2' + ymax;
-          var markedColor = void 0;
-
-          if (_classPrivateFieldLooseBase(this, _checkBinState)[_checkBinState](id)) {
-            markedColor = _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryAccentColor();
-          } else {
-            markedColor = color;
-          }
-
-          var binData = "id: " + id + ";\n         content: " + c + ";\n         color: " + color + ";\n         yTitle: " + yTitle + ";\n         xTitle: " + xTitle + ";\n         absoluteContent: " + absoluteContent + ";\n         binName: " + binName + ";\n         xMin: " + xmin + ";\n         yMin: " + ymin + ";\n         xMax: " + xmax + ";\n         yMax: " + ymax + ";\n         xCenter: " + xcenter + ";\n         yCenter: " + ycenter + ";\n         xWidth: " + xwidth + ";\n         yWidth: " + ywidth + ";\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] / 4;
-          var depth = ywidth / _classPrivateFieldLooseBase(this, _yWidth)[_yWidth] / 4;
-
-          var posX = xmin / _classPrivateFieldLooseBase(this, _xWidth)[_xWidth];
-
-          var posY = ymin / _classPrivateFieldLooseBase(this, _yWidth)[_yWidth];
-
-          elements.bins[count] = /*#__PURE__*/React__default.createElement("a-box", {
-            key: id,
-            "class": "clickable",
-            material: "color: " + markedColor + "; opacity: 0.75;",
-            binth2: binData,
-            mouseevent: true,
-            animation: "property: scale; from: " + width + " " + _classPrivateFieldLooseBase(this, _getPreviousBinScales)[_getPreviousBinScales](id) + " " + depth + "; to: " + width + " " + c + " " + depth + "; delay:100; dur: 1500; easing: linear;",
-            animation__1: "property: material.opacity; from: 0; to: 0.75; dur: 2000;",
-            animation__2: "property: position; from: " + (posX + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + centeredYPosition + " " + (posY + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + posX + " " + centeredYPosition + " " + posY + "; dur: 1000;"
-          });
-          currentBinScales[count] = {
-            key: id,
-            scale: c,
-            color: markedColor
-          };
-        }
-
-        count++;
-      }
-    }
-
-    _classPrivateFieldLooseBase(this, _previousBins)[_previousBins] = currentBinScales;
-    count = 0;
-
-    for (var _iy = _classPrivateFieldLooseBase(this, _yOffset)[_yOffset]; _iy <= maxYLength; _iy++) {
-      var normalAxis = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](1500 + count, _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2.5, 0, _iy - 1, 270, 180, 0, 2, 1, "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : (_iy - 1) * _classPrivateFieldLooseBase(this, _yWidth)[_yWidth]), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-
-      var reversedAxis = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](3000 + count, maxXLength + 0.5, 0, _iy - 1, 270, 360, 0, 2, 1, "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : (_iy - 1) * _classPrivateFieldLooseBase(this, _yWidth)[_yWidth]), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-
-      elements.normalAxis[count] = normalAxis;
-      elements.reversedAxis[count] = reversedAxis;
-      count++;
+  _proto.setRange = function setRange(range) {
+    if (range) {
+      if (range < 4) _classPrivateFieldLooseBase(this, _range)[_range] = 4;
+      _classPrivateFieldLooseBase(this, _range)[_range] = range;
     }
+  };
 
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "leftLabel",
-      key: 4500 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + yTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 270 + " " + 0,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 4 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 4) + " " + 0 + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 0.5) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "rightLabel",
-      key: 6000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + yTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('z') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 90 + " " + 0,
-      animation: "property: position; from: " + (maxXLength + 2 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset + " " + (maxYLength - 2.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (maxXLength + 2) + " " + 0 + " " + (maxYLength - 2.5) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    count++;
-
-    for (var _ix2 = _classPrivateFieldLooseBase(this, _xOffset)[_xOffset]; _ix2 <= maxXLength; _ix2++) {
-      var _normalAxis2 = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](7500 + count, _ix2 - 1, 0, _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2.5, 270, 270, 0, 2, 1, "" + (xLabels[_ix2 - 1] ? xLabels[_ix2 - 1].fString : (_ix2 - 1) * _classPrivateFieldLooseBase(this, _xWidth)[_xWidth]), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+  _proto.setTheme = function setTheme(theme) {
+    _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider] = new ThemeProvider(theme);
+  };
 
-      var _reversedAxis2 = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](9000 + count, _ix2 - 1, 0, maxYLength + 0.5, 270, 90, 0, 2, 1, "" + (xLabels[_ix2 - 1] ? xLabels[_ix2 - 1].fString : (_ix2 - 1) * _classPrivateFieldLooseBase(this, _xWidth)[_xWidth]), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
+  _proto.getElements = function getElements(projectionFunction) {
+    var elements = {};
 
-      elements.normalAxis[count] = _normalAxis2;
-      elements.reversedAxis[count] = _reversedAxis2;
-      count++;
+    if (_classPrivateFieldLooseBase(this, _type)[_type].includes('TH2')) {
+      elements = _classPrivateFieldLooseBase(this, _createTH2Histogram)[_createTH2Histogram](projectionFunction);
+    } else if (_classPrivateFieldLooseBase(this, _type)[_type].includes('TH3')) {
+      elements = _classPrivateFieldLooseBase(this, _createTH3Histogram)[_createTH3Histogram]();
     }
 
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "downLabel",
-      key: 10500 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + xTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 180 + " " + 0,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 4 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + " " + 0 + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 4) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      id: "upLabel",
-      key: 12000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      geometry: "primitive: plane; width:4; height:1;",
-      text: "value: " + xTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('x') + "; width: 10; height:auto; align:center;",
-      rotation: 270 + " " + 0 + " " + 0,
-      animation: "property: position; from: " + (maxXLength - 2.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + " " + _classPrivateFieldLooseBase(this, _shift)[_shift].zOffset + " " + (maxYLength + 2 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + "; to: " + (maxXLength - 2.5) + " " + 0 + " " + (maxYLength + 2) + "; dur: 1000;",
-      material: "opacity: 0;"
-    });
-    count++;
-    elements.normalAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](13500 + count, maxXLength + 0.5, 0, maxYLength + 0.5, 270, 360, 0, 2, 2, "0", _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    elements.reversedAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](15000 + count, maxXLength + 0.5, 0, _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    count++;
-    elements.normalAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](16500 + count, _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2.5, 0, maxYLength + 0.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    elements.reversedAxis[count] = _classPrivateFieldLooseBase(this, _createAxisEntity)[_createAxisEntity](18000 + count, _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 2.5, 0, _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-    count++;
-    elements.normalAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 19500 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + _classPrivateFieldLooseBase(this, _histogram)[_histogram].fTitle + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor() + "; width: 270; height:auto; align:center;",
-      rotation: 0 + " " + 123 + " " + 0,
-      position: _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] - 90 + " " + 16.5 + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 90)
-    }, /*#__PURE__*/React__default.createElement("a-text", {
-      value: "Press V to show projections or controls",
-      position: "0 10 0",
-      width: "150",
-      height: "auto",
-      align: "center",
-      color: _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: plane; width:170; height:30;",
-      position: "0 0 -1",
-      material: "opacity: 0.9; color: white;"
-    }));
-    elements.reversedAxis[count] = /*#__PURE__*/React__default.createElement("a-entity", {
-      key: 21000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      text: "value: " + _classPrivateFieldLooseBase(this, _histogram)[_histogram].fName + "; color: " + _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor() + "; width: 230; height:auto; align:center;",
-      rotation: 0 + " " + 330 + " " + 0,
-      position: _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + 120 + " " + 16.5 + " " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] - 70)
-    }, /*#__PURE__*/React__default.createElement("a-text", {
-      value: "Press buttonY to show projections or controls",
-      position: "0 10 0",
-      width: "150",
-      height: "auto",
-      align: "center",
-      color: _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: plane; width:170; height:30;",
-      position: "0 0 -1",
-      material: "opacity: 0.9; color: white;"
-    }));
-    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];
-    elements.banners[0] = /*#__PURE__*/React__default.createElement("a-box", {
-      key: 22500 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      width: bannerWidthX + 8,
-      material: "color: #171717",
-      height: 0.2,
-      depth: bannerWidthY + 8,
-      animation: "property: position; from: " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1 + _classPrivateFieldLooseBase(this, _shift)[_shift].xOffset) + "\n        -0.5\n        " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5 + _classPrivateFieldLooseBase(this, _shift)[_shift].yOffset) + ";\n         to:\n         " + (_classPrivateFieldLooseBase(this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1) + " -0.5 " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5) + "; dur: 1000;"
-    });
-    count++;
-    elements.banners[1] = /*#__PURE__*/React__default.createElement("a-box", {
-      key: 24000 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      id: "th-mapping",
-      geometry: "width:0.1; height:15; depth:22;",
-      position: maxXLength + 8 + " 7\n       " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(this, _range)[_range] / 2 + 2.5),
-      material: "transparent:true"
-    });
-    count++;
-    elements.banners[2] = /*#__PURE__*/React__default.createElement("a-box", {
-      key: 25500 + count + _classPrivateFieldLooseBase(this, _id)[_id],
-      id: "th-background",
-      geometry: "width:0.2; height:16; depth:24;",
-      position: maxXLength + 8.2 + " 7\n       " + (_classPrivateFieldLooseBase(this, _yOffset)[_yOffset] + 1 + _classPrivateFieldLooseBase(this, _range)[_range] / 2 + 1.5),
-      material: "color: white, transparent:false"
-    });
     return elements;
   };
 
@@ -2759,89 +3085,76 @@ var HistogramReactFactory = /*#__PURE__*/function () {
   return HistogramReactFactory;
 }();
 
-var NdmVrHistogram3D = function NdmVrHistogram3D(props) {
+var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
+  var name = _ref.name,
+      histogram = _ref.histogram,
+      histoSection = _ref.histoSection,
+      projections = _ref.projections,
+      range = _ref.range,
+      theme = _ref.theme;
   var subscription;
 
-  var _useState = React.useState(new HistogramReactFactory(props.name, props.histogram, props.histoSection ? props.histoSection : null, props.range, props.projections, props.theme ? props.theme : 'def')),
+  var _useState = React.useState(new HistogramReactFactory(name, histogram, histoSection || null, range, projections, theme || 'def')),
       factory = _useState[0];
 
-  var _useState2 = React.useState({
-    uniqueName: props.name,
-    histogram: props.histogram,
-    projections: props.projections ? props.projections : null,
-    typeName: props.histogram._typename,
-    xOffset: factory.getXOffset(),
-    zOffset: factory.getZOffset(),
-    yOffset: factory.getYOffset(),
-    range: factory.getRange()
-  }),
-      histo = _useState2[0],
-      setHisto = _useState2[1];
-
-  var _useState3 = React.useState('default'),
-      mode = _useState3[0],
-      setMode = _useState3[1];
-
-  var createElements = function createElements() {
-    var elements = {};
-
-    if (histo.typeName.includes('TH2')) {
-      elements = factory.createTH2Histogram(mode);
-    } else if (histo.typeName.includes('TH3')) {
-      elements = factory.createTH3Histogram();
-    }
-
-    return elements;
-  };
+  var _useState2 = React.useState('default'),
+      mode = _useState2[0],
+      setMode = _useState2[1];
 
-  var _useState4 = React.useState(createElements),
-      elements = _useState4[0],
-      setElements = _useState4[1];
+  var _useState3 = React.useState(factory.getElements(mode)),
+      elements = _useState3[0],
+      setElements = _useState3[1];
 
-  var updateHistogramSection = function updateHistogramSection(newSection) {
-    var object = histo;
-    object.xOffset = newSection.xOffset;
-    object.yOffset = newSection.yOffset;
-    object.zOffset = newSection.zOffset;
-    object.range = newSection.range;
-    setHisto(object);
-    setElements(createElements);
-  };
+  var _useState4 = React.useState(1),
+      binMarkState = _useState4[0],
+      setBinMarkState = _useState4[1];
 
   var handleSubscription = function handleSubscription(data) {
-    if (histo.typeName.includes(data.name)) {
+    if (histogram._typename.includes(data.name)) {
       if (data.axis) {
-        var section = factory.updateSection(data.axis, data.increment, data.defaultRange);
-        updateHistogramSection(section);
+        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(data.fFunction);
+        setMode(function (prevState) {
+          return prevState !== data.fFunction ? data.fFunction : prevState;
+        });
       }
     }
   };
 
   React.useEffect(function () {
-    setHisto({
-      uniqueName: props.name,
-      histogram: props.histogram,
-      typeName: props.histogram._typename,
-      projections: props.projections ? props.projections : null,
-      xOffset: factory.getXOffset(),
-      zOffset: factory.getZOffset(),
-      yOffset: factory.getYOffset(),
-      range: factory.getRange()
-    });
-  }, [props.histogram, props.histoSection, props.projections, props.name]);
+    factory.setUniqueName(name);
+    setElements(factory.getElements(mode));
+  }, [name]);
+  React.useEffect(function () {
+    factory.setHistogram(histogram, projections);
+    setElements(factory.getElements(mode));
+  }, [histogram, projections]);
+  React.useEffect(function () {
+    factory.setSection(histoSection);
+    setElements(factory.getElements(mode));
+  }, [histoSection]);
+  React.useEffect(function () {
+    factory.setRange(range);
+    setElements(factory.getElements(mode));
+  }, [range]);
   React.useEffect(function () {
-    factory.initializeFactory(props.name, props.histogram, props.histoSection, props.range, props.projections, props.theme);
-    setElements(createElements);
-  }, [histo, props.theme]);
+    factory.setTheme(theme);
+    setElements(factory.getElements(mode));
+  }, [theme]);
   React.useEffect(function () {
-    setElements(createElements);
+    setElements(factory.getElements(mode));
   }, [mode]);
   React.useEffect(function () {
-    if (histo.typeName.includes('TH2')) {
+    if (histogram._typename.includes('TH2')) {
       subscription = histogramTH2Service.getChangedSection().subscribe(handleSubscription);
-    } else if (histo.typeName.includes('TH3')) {
+    } else if (histogram._typename.includes('TH3')) {
       subscription = histogramTH3Service.getChangedSection().subscribe(handleSubscription);
     }
 
@@ -2854,13 +3167,81 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(props) {
     return /*#__PURE__*/React__default.createElement("a-entity", {
       "histogram-control": true
     }, elements.bins.map(function (bin) {
-      return bin;
-    }), elements.normalAxis.map(function (axis) {
-      return axis;
-    }), elements.reversedAxis.map(function (axis) {
-      return axis;
+      return /*#__PURE__*/React__default.createElement("a-box", {
+        key: bin.id,
+        "class": "clickable",
+        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.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,
+        geometry: "primitive: " + label.geometry.primitive + "; width:" + label.geometry.width + "; height:" + label.geometry.height + ";",
+        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 + "; 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;"
+      });
+    }), elements.titles.map(function (title) {
+      return /*#__PURE__*/React__default.createElement("a-entity", {
+        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,
+        material: "transparent: true"
+      }, /*#__PURE__*/React__default.createElement("a-text", {
+        value: title.innerText.value,
+        position: "0 10 0",
+        width: "150",
+        height: "auto",
+        align: "center",
+        color: title.innerText.color
+      }), /*#__PURE__*/React__default.createElement("a-entity", {
+        geometry: "primitive: plane; width:170; height:30;",
+        position: "0 0 -1",
+        material: "opacity: 0.9; color: white; transparent: true"
+      }));
+    }), elements.axisLabels.map(function (axisLabel) {
+      return /*#__PURE__*/React__default.createElement("a-entity", {
+        id: axisLabel.id,
+        key: axisLabel.key,
+        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; transparent: true"
+      });
+    }), elements.ground && /*#__PURE__*/React__default.createElement("a-box", {
+      key: elements.ground.key,
+      width: elements.ground.scale.width,
+      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;"
     }), elements.banners.map(function (banner) {
-      return banner;
+      return /*#__PURE__*/React__default.createElement("a-box", {
+        key: banner.key,
+        id: banner.id,
+        geometry: "width:" + banner.geometry.width + "; height:" + banner.geometry.height + "; depth:" + banner.geometry.depth + ";",
+        position: banner.position.x + " " + banner.position.y + " " + banner.position.z,
+        material: "color: " + banner.material.color + ", transparent: " + banner.material.transparent
+      });
     }));
   } else {
     return /*#__PURE__*/React__default.createElement("a-box", {
@@ -2872,17 +3253,22 @@ var NdmVrHistogram3D = function NdmVrHistogram3D(props) {
   }
 };
 
+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'
-  }),
-      background = _useState[0];
-
   return /*#__PURE__*/React__default.createElement("a-scene", {
     embedded: true,
     style: {
@@ -2892,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: "2048",
-    src: "#skyTexture",
-    position: "0 1000 0"
   }));
 };
 
@@ -3491,6 +3871,123 @@ var optimizeBinContent = function optimizeBinContent(binContent, maxContent) {
   return binContent;
 };
 
+AFRAME$1.registerComponent('binth2', {
+  schema: {
+    id: {
+      type: 'string'
+    },
+    content: {
+      "default": 0
+    },
+    absoluteContent: {
+      "default": 0
+    },
+    binName: {
+      "default": ''
+    },
+    xTitle: {
+      type: 'string'
+    },
+    yTitle: {
+      type: 'string'
+    },
+    xMin: {
+      type: 'number'
+    },
+    yMin: {
+      type: 'number'
+    },
+    xMax: {
+      type: 'number'
+    },
+    yMax: {
+      type: 'number'
+    },
+    xCenter: {
+      type: 'number'
+    },
+    yCenter: {
+      type: 'number'
+    },
+    xWidth: {
+      type: 'number'
+    },
+    yWidth: {
+      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: 'TH2',
+      id: this.data.id,
+      content: this.data.content,
+      absoluteContent: this.data.absoluteContent,
+      binName: this.data.binName,
+      xTitle: this.data.xTitle,
+      yTitle: this.data.yTitle,
+      xMin: this.data.xMin,
+      yMin: this.data.yMin,
+      xMax: this.data.xMax,
+      yMax: this.data.yMax,
+      xCenter: this.data.xCenter,
+      yCenter: this.data.yCenter,
+      xWidth: this.data.xWidth,
+      yWidth: this.data.yWidth,
+      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: 'TH2',
+      id: this.data.id,
+      content: this.data.content,
+      absoluteContent: this.data.absoluteContent,
+      binName: this.data.binName,
+      xTitle: this.data.xTitle,
+      yTitle: this.data.yTitle,
+      xMin: this.data.xMin,
+      yMin: this.data.yMin,
+      xMax: this.data.xMax,
+      yMax: this.data.yMax,
+      xCenter: this.data.xCenter,
+      yCenter: this.data.yCenter,
+      xWidth: this.data.xWidth,
+      yWidth: this.data.yWidth,
+      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 _jsroot$1 = /*#__PURE__*/_classPrivateFieldLooseKey("jsroot");
 
 var HistogramDemoFactory = /*#__PURE__*/function () {
@@ -3556,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'
@@ -3695,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',
@@ -3801,8 +4298,8 @@ var thumbStickPredefinedPositionWithOffset = function thumbStickPredefinedPositi
   }
 };
 
-var oculusUpSection = function oculusUpSection(typeOfRange) {
-  histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, typeOfRange);
+var oculusUpSection = function oculusUpSection(defaultRange) {
+  histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, defaultRange);
 };
 
 var oculusDownSection = function oculusDownSection(typeOfRange) {
@@ -3873,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;
@@ -3920,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;
@@ -3981,5 +4478,6 @@ exports.JSrootHistogram = JsrootHistogram;
 exports.LeftController = leftOculusController;
 exports.NdmVrScene = NdmVrScene;
 exports.RightController = rightOculusController;
+exports.binDataDistributor = binDataDistributor;
 exports.ndmVrStorage = ndmVrStorage;
 //# sourceMappingURL=index.js.map