hart-estate-widget 0.0.49 → 0.0.52

package/build/components/PanoramaTab.js

@@ -1,26 +1,12 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-require("core-js/modules/es.array.reduce.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.split.js");
-
-require("core-js/modules/es.string.includes.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
-require("core-js/modules/es.array.flat.js");
-
-require("core-js/modules/es.array.unscopables.flat.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _store = _interopRequireDefault(require("../store"));
@@ -33,10 +19,14 @@ var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orien
 
 var _geometric = require("geometric");
 
-var _deviceOrientationStatus = require("../enums/deviceOrientationStatus");
+var _deviceOrientationStatuses = require("../enums/deviceOrientationStatuses");
+
+var _deviceWidth = require("../enums/deviceWidth");
 
 var _imageExtentions = require("../enums/imageExtentions");
 
+var _helpers = require("../utils/helpers");
+
 var _panoramaHelpers = require("../utils/panoramaHelpers");
 
 var _Loader = _interopRequireDefault(require("./Loader"));
@@ -63,88 +53,107 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-const instructionSteps = [{
+var instructionSteps = [{
   icon: _handMove.default,
   text: 'Вращать планировку'
 }, {
   icon: _handResearch.default,
   text: 'Исследовать планировку'
 }];
-const {
-  DEVICEORIENTATION,
-  ORBIT
-} = PANOLENS.CONTROLS;
-const pathName = 'Panorama_0_0_';
-const cameraFovValues = {
+var _PANOLENS$CONTROLS = PANOLENS.CONTROLS,
+    DEVICEORIENTATION = _PANOLENS$CONTROLS.DEVICEORIENTATION,
+    ORBIT = _PANOLENS$CONTROLS.ORBIT;
+var pathName = 'Panorama_0_0_';
+var cameraFovValues = {
   x1: 90,
   x2: 60
 };
 
-const getDefaultUserData = () => ({
-  left: 0,
-  top: 0,
-  points: []
-});
+var getDefaultUserData = function getDefaultUserData() {
+  return {
+    left: 0,
+    top: 0,
+    points: []
+  };
+};
 
-const createPanorama = (image, index, setLoadingState) => {
-  const panorama = new PANOLENS.ImagePanorama(image);
+var createPanorama = function createPanorama(image, index, setLoadingState) {
+  var panorama = new PANOLENS.ImagePanorama(image);
   panorama.userData = getDefaultUserData();
   panorama['panorama_id'] = index + 1;
-  panorama.addEventListener('progress', event => {
+  panorama.addEventListener('progress', function (event) {
     setLoadingState(true);
 
     if (event.progress.loaded / event.progress.total * 100 === 100) {
       setLoadingState(false);
     }
   });
-  panorama.addEventListener('enter', () => setLoadingState(false));
+  panorama.addEventListener('enter', function () {
+    return setLoadingState(false);
+  });
   return panorama;
 };
 
-const getPanoramas = (json, images, setLoadingState) => {
-  if (!json) return images.map((image, index) => createPanorama(image, index, setLoadingState));
-  const panoramas = json.Floors[0].Units[0].Rooms.reduce((acc, jsonRoom, index) => {
-    const roomImages = images.filter(img => {
-      const panoramaIdIndex = img.indexOf(pathName) + pathName.length;
+var getPanoramas = function getPanoramas(json, images, setLoadingState) {
+  if (!json) return images.map(function (image, index) {
+    return createPanorama(image, index, setLoadingState);
+  });
+  var panoramas = json.Floors[0].Units[0].Rooms.reduce(function (acc, jsonRoom, index) {
+    var roomImages = images.filter(function (img) {
+      var panoramaIdIndex = img.indexOf(pathName) + pathName.length;
       if (panoramaIdIndex < pathName.length) return false;
-      const indexAsString = String(index);
-      let panoramaId = String((0, _imageExtentions.removeExtention)(img.substring(panoramaIdIndex))).split('.')[0];
+      var indexAsString = String(index);
+      var panoramaId = String((0, _imageExtentions.removeExtention)(img.substring(panoramaIdIndex))).split('.')[0];
 
-      if (panoramaId.includes(_panoramaHelpers.cameraIdBeginning)) {
-        const cameraIdIndex = panoramaId.indexOf(_panoramaHelpers.cameraIdBeginning) - 1;
+      if (panoramaId.toLowerCase().includes(_panoramaHelpers.cameraIdBeginning)) {
+        var cameraIdIndex = panoramaId.toLowerCase().indexOf(_panoramaHelpers.cameraIdBeginning) - 1;
         panoramaId = panoramaId.slice(0, cameraIdIndex);
       }
 
-      const maxIndexLength = Math.max(indexAsString.length, panoramaId.length);
-      const imageInRoom = (0, _panoramaHelpers.getArrayFromNumber)(maxIndexLength).every(i => {
+      var maxIndexLength = Math.max(indexAsString.length, panoramaId.length);
+      var imageInRoom = (0, _panoramaHelpers.getArrayFromNumber)(maxIndexLength).every(function (i) {
         return panoramaId[i] === indexAsString[i];
       });
       return imageInRoom;
     });
     if (!roomImages.length) return acc;
-    roomImages.forEach(image => {
-      const panorama = createPanorama(image, index, setLoadingState);
+    roomImages.forEach(function (image) {
+      var panorama = createPanorama(image, index, setLoadingState);
       panorama['room_images'] = roomImages;
       panorama['room_id'] = jsonRoom.ID;
-      const roomPoints = (0, _panoramaHelpers.getRoomCoordinates)(jsonRoom, json.Floors[0].Walls, json.Vertices);
-      let [left, top] = (0, _geometric.polygonMean)(roomPoints);
-
-      if (!panorama.linkedSpots.length) {
-        if (panorama.src.includes('_CameraId')) {
-          const currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, panorama.src);
-          left = currentCamera.Location.X;
-          top = currentCamera.Location.Y;
-        }
-
-        panorama.userData = {
-          left,
-          top,
-          points: roomPoints
-        };
+      var roomPoints = (0, _panoramaHelpers.getRoomCoordinates)(jsonRoom, json.Floors[0].Walls, json.Vertices);
+
+      var _polygonMean = (0, _geometric.polygonMean)(roomPoints),
+          _polygonMean2 = _slicedToArray(_polygonMean, 2),
+          left = _polygonMean2[0],
+          top = _polygonMean2[1];
+
+      if (panorama.src.toLowerCase().includes(_panoramaHelpers.cameraIdBeginning)) {
+        var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, panorama.src);
+        left = currentCamera.Location.X;
+        top = currentCamera.Location.Y;
       }
 
+      panorama.userData = {
+        left: left,
+        top: top,
+        points: roomPoints
+      };
+
       if (panorama['room_id'] === _store.default.initialPanoramaRoomId) {
         acc.unshift(panorama);
       } else {
@@ -153,9 +162,11 @@ const getPanoramas = (json, images, setLoadingState) => {
     });
     return acc;
   }, []);
-  return panoramas.map((panorama, index) => {
+  return panoramas.map(function (panorama, index) {
     panorama['panorama_index'] = index;
-    const currentRoom = json.Floors[0].Units[0].Rooms.find(room => room.ID === panorama['room_id']);
+    var currentRoom = json.Floors[0].Units[0].Rooms.find(function (room) {
+      return room.ID === panorama['room_id'];
+    });
 
     if (!panorama.linkedSpots.length) {
       return setPanoramaLinks(json, currentRoom, panorama, panoramas);
@@ -165,128 +176,202 @@ const getPanoramas = (json, images, setLoadingState) => {
   });
 };
 
-const setPanoramaLinks = (json, currentRoom, panorama, panoramas) => {
-  const center = [panorama.userData.left, panorama.userData.top];
-  panorama['room_images'].forEach(image => {
+var setPanoramaLinks = function setPanoramaLinks(json, currentRoom, panorama, panoramas) {
+  var center = [panorama.userData.left, panorama.userData.top];
+  panorama['room_images'].forEach(function (image) {
     if (image === panorama.src) return;
-    const connectedPanorama = panoramas.find(_ref => {
-      let {
-        src
-      } = _ref;
+    var connectedPanorama = panoramas.find(function (_ref) {
+      var src = _ref.src;
       return src === image;
     });
-    const currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, connectedPanorama.src);
+    var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, connectedPanorama.src);
     if (!currentCamera) return;
     connectPanorama(panorama, connectedPanorama, currentCamera.Location, center, false);
   });
-  json.Floors[0].Doors.forEach(_ref2 => {
-    let {
-      Location,
-      Walls
-    } = _ref2;
-    if (!Walls.some(doorWallId => currentRoom.Walls.some(roomWallId => roomWallId === doorWallId))) return;
-    const connectedRoom = json.Floors[0].Units[0].Rooms.find(room => {
-      const roomHasSameWall = room.Walls.some(roomWallId => Walls.some(doorWallId => roomWallId === doorWallId));
-      const isSameRoom = room.ID === currentRoom.ID;
+  json.Floors[0].Doors.forEach(function (_ref2) {
+    var Location = _ref2.Location,
+        Walls = _ref2.Walls;
+    if (!Walls.some(function (doorWallId) {
+      return currentRoom.Walls.some(function (roomWallId) {
+        return roomWallId === doorWallId;
+      });
+    })) return;
+    var connectedRoom = json.Floors[0].Units[0].Rooms.find(function (room) {
+      var roomHasSameWall = room.Walls.some(function (roomWallId) {
+        return Walls.some(function (doorWallId) {
+          return roomWallId === doorWallId;
+        });
+      });
+      var isSameRoom = room.ID === currentRoom.ID;
       return roomHasSameWall && !isSameRoom;
     });
     if (!connectedRoom) return;
-    const availablePanoramas = panoramas.filter(_ref3 => {
-      let {
-        room_id
-      } = _ref3;
+    var availablePanoramas = panoramas.filter(function (_ref3) {
+      var room_id = _ref3.room_id;
       return room_id === connectedRoom.ID;
     });
-    const {
-      panorama: connectedPanorama
-    } = (0, _panoramaHelpers.getClosestPanorama)([Location.X, Location.Y], availablePanoramas);
+
+    var _getClosestPanorama = (0, _panoramaHelpers.getClosestPanorama)([Location.X, Location.Y], availablePanoramas),
+        connectedPanorama = _getClosestPanorama.panorama;
+
     if (!connectedPanorama) return;
     connectPanorama(panorama, connectedPanorama, Location, center, true);
   });
   return panorama;
 };
 
-const connectPanorama = function connectPanorama(panorama, connectedPanorama, location, center) {
-  let isDoorLink = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  const locationX = location.Y - center[1];
-  const locationY = location.X - center[0];
-  const locationZ = isDoorLink ? -10 : -100;
-  const icon = isDoorLink ? _doorIcon.default : _spotIcon.default;
-  const iconUrl = "".concat(icon, "?id=").concat(panorama['panorama_index'], "-").concat(panorama['panorama_id'], "-").concat(Math.random());
-  const defaultScale = 20;
-  const maxScale = 50;
-  const defaultLength = 120;
-  const length = (0, _geometric.lineLength)([[0, 0], [locationX, locationY]]);
-  const scale = length / defaultLength * defaultScale;
-  const finalScale = scale > maxScale ? maxScale : scale;
-  const resultScale = isDoorLink ? finalScale : finalScale - 15;
-  const position = new THREE.Vector3(locationX, locationZ, locationY);
+var connectPanorama = function connectPanorama(panorama, connectedPanorama, location, center) {
+  var isDoorLink = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var locationX = location.Y - center[1];
+  var locationY = location.X - center[0];
+  var locationZ = isDoorLink ? -10 : -100;
+  var icon = isDoorLink ? _doorIcon.default : _spotIcon.default;
+  var iconUrl = "".concat(icon, "?id=").concat(panorama['panorama_index'], "-").concat(panorama['panorama_id'], "-").concat(Math.random());
+  var defaultScale = 20;
+  var maxScale = 50;
+  var defaultLength = 120;
+  var length = (0, _geometric.lineLength)([[0, 0], [locationX, locationY]]);
+  var scale = length / defaultLength * defaultScale;
+  var finalScale = scale > maxScale ? maxScale : scale;
+  var resultScale = isDoorLink ? finalScale : finalScale - 15;
+  var position = new THREE.Vector3(locationX, locationZ, locationY);
   panorama.link(connectedPanorama, position, resultScale, iconUrl);
 };
 
-const PanoramaTab = _ref4 => {
+var PanoramaTab = function PanoramaTab(_ref4) {
   var _panoramas$currentRoo;
 
-  let {
-    json,
-    planImage,
-    images,
-    disabled
-  } = _ref4;
-  const [showInstructions, setInstructionsState] = (0, _react.useState)(true);
-  const [loadingState, setLoadingState] = (0, _react.useState)(true);
-  const [windowWidth, setWindowWidth] = (0, _react.useState)(0);
-  const [isMapDisabled, setMapDisabledState] = (0, _react.useState)(true);
-  const [planScale, setPlanScale] = (0, _react.useState)({
+  var json = _ref4.json,
+      planImage = _ref4.planImage,
+      images = _ref4.images,
+      disabled = _ref4.disabled;
+
+  var _useState = (0, _react.useState)(_deviceOrientationStatuses.deviceOrientationStatuses.DENIED),
+      _useState2 = _slicedToArray(_useState, 2),
+      deviceOrientationStatus = _useState2[0],
+      setDeviceOrientationStatus = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showInstructions = _useState4[0],
+      setInstructionsState = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loadingState = _useState6[0],
+      setLoadingState = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({
+    width: 0,
+    height: 0
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      windowSize = _useState8[0],
+      setWindowSize = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({
+    width: '195px',
+    height: 'auto'
+  }),
+      _useState10 = _slicedToArray(_useState9, 2),
+      mapSize = _useState10[0],
+      setMapSize = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({
     X: 1,
     Y: 1
-  });
-  const [autoplayEnabled, setAutoplayState] = (0, _react.useState)(false);
-  const [cameraFov, setCameraFov] = (0, _react.useState)(cameraFovValues.x1);
-  const [currentRoomIndex, setCurrentRoomIndex] = (0, _react.useState)(0);
-  const [panoramas, setPanoramas] = (0, _react.useState)([]);
-  const [viewer, setViewer] = (0, _react.useState)(null);
-
-  const changePanorama = panorama => {
+  }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      planScale = _useState12[0],
+      setPlanScale = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(true),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isMapDisabled = _useState14[0],
+      setMapDisabledState = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      autoplayEnabled = _useState16[0],
+      setAutoplayState = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(cameraFovValues.x1),
+      _useState18 = _slicedToArray(_useState17, 2),
+      cameraFov = _useState18[0],
+      setCameraFov = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(0),
+      _useState20 = _slicedToArray(_useState19, 2),
+      currentRoomIndex = _useState20[0],
+      setCurrentRoomIndex = _useState20[1];
+
+  var _useState21 = (0, _react.useState)([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      panoramas = _useState22[0],
+      setPanoramas = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(null),
+      _useState24 = _slicedToArray(_useState23, 2),
+      viewer = _useState24[0],
+      setViewer = _useState24[1];
+
+  var changePanorama = function changePanorama(panorama) {
     setCurrentRoomIndex(panorama['panorama_index']);
     viewer.setPanorama(panorama);
   };
 
-  const setScale = () => {
-    const image = document.querySelector('.widget-tab__panorama-map img');
-    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
+  var setScale = function setScale() {
+    if (!viewer) return;
+    var image = document.querySelector('.widget-tab__panorama-map img');
+    var _viewer$container = viewer.container,
+        clientWidth = _viewer$container.clientWidth,
+        clientHeight = _viewer$container.clientHeight;
+    var imageWidth = image.naturalWidth;
+    var imageHeight = image.naturalHeight;
+    var imageDelta = imageWidth / imageHeight;
+    var maxWidth = 195;
+    var maxHeight = clientHeight - 200;
+    var width = maxWidth;
+    var height = width / imageDelta;
+
+    if (height >= maxHeight) {
+      height = maxHeight;
+      width = height * imageDelta;
+    }
+
+    setMapSize({
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    });
+    setPlanScale((0, _panoramaHelpers.getScale)({
+      width: width,
+      height: height
+    }, json));
+    viewer.onWindowResize(clientWidth, clientHeight);
   };
 
-  const onImageLoaded = () => {
+  var onImageLoaded = function onImageLoaded() {
     setScale();
     setMapDisabledState(!json);
   };
 
-  const getDotClassName = index => {
-    let className = 'widget-tab__panorama-map__dot widget-tab__panorama-map__dot--big';
-    if (currentRoomIndex === index) className += ' widget-tab__panorama-map__dot--active';
-    return className;
-  };
-
-  const getDotPosition = _ref5 => {
-    let {
-      left,
-      top
-    } = _ref5;
+  var getDotPosition = function getDotPosition(_ref5) {
+    var left = _ref5.left,
+        top = _ref5.top;
     return {
       left: "".concat(left * planScale.X, "px"),
       top: "".concat(top * planScale.Y, "px")
     };
   };
 
-  const updateCameraFov = fov => {
+  var updateCameraFov = function updateCameraFov(fov) {
     setCameraFov(fov);
     viewer.camera.fov = fov;
     viewer.camera.currentFov = fov;
     viewer.camera.updateProjectionMatrix();
   };
 
-  const toggleFov = () => {
+  var toggleFov = function toggleFov() {
     if (viewer.camera.fov === cameraFovValues.x1) {
       updateCameraFov(cameraFovValues.x2);
       return;
@@ -295,38 +380,58 @@ const PanoramaTab = _ref4 => {
     updateCameraFov(cameraFovValues.x1);
   };
 
-  const toggleAutoplay = () => {
+  var toggleAutoplay = function toggleAutoplay() {
     setAutoplayState(!autoplayEnabled);
 
     if (autoplayEnabled) {
       viewer.disableAutoRate();
+
+      if (deviceOrientationStatus === _deviceOrientationStatuses.deviceOrientationStatuses.GRANTED) {
+        viewer.enableControl(DEVICEORIENTATION);
+      }
+
       return;
     }
 
+    if (viewer.getControlId() !== 'orbit') {
+      viewer.enableControl(ORBIT);
+    }
+
     viewer.enableAutoRate();
   };
 
-  const updateWindowWidth = () => setWindowWidth(window.innerWidth);
+  var updateWindowWidth = function updateWindowWidth() {
+    return setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  };
+
+  var rescaleMap = function rescaleMap() {
+    var map = document.querySelector('.widget-tab__panorama-map');
+    if (!map) return;
+    map.classList.remove('widget-tab__panorama-map--scaled');
+  };
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     window.addEventListener('resize', updateWindowWidth);
+    updateWindowWidth();
     return function cleanup() {
       window.removeEventListener('resize', updateWindowWidth);
     };
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (!panoramas.length) return;
-    const container = document.querySelector('.widget-tab__panorama-overlay');
-    const newViewer = new PANOLENS.Viewer({
-      autoRotateActivationDuration: 1,
+    var container = document.querySelector('.widget-tab__panorama-overlay');
+    var newViewer = new PANOLENS.Viewer({
+      autoRotateActivationDuration: 1000,
+      cameraFov: cameraFovValues.x1,
       autoHideInfospot: false,
       controlButtons: [],
-      controlBar: false,
-      cameraFov: cameraFovValues.x1,
-      container
+      container: container
     });
 
-    const preventCameraFovChange = e => {
+    var preventCameraFovChange = function preventCameraFovChange(e) {
       e.preventDefault();
       e.stopPropagation();
       newViewer.camera.fov = newViewer.camera.currentFov;
@@ -335,12 +440,10 @@ const PanoramaTab = _ref4 => {
 
     container.addEventListener('mousewheel', preventCameraFovChange);
     container.addEventListener('touchmove', preventCameraFovChange);
-    panoramas.forEach(panorama => {
+    panoramas.forEach(function (panorama) {
       if (!panorama.panorama_id) return;
-      panorama.addEventListener('enter', _ref6 => {
-        let {
-          target
-        } = _ref6;
+      panorama.addEventListener('enter', function (_ref6) {
+        var target = _ref6.target;
         return setCurrentRoomIndex(target['panorama_index']);
       });
       newViewer.add(panorama);
@@ -348,68 +451,94 @@ const PanoramaTab = _ref4 => {
     newViewer.scene.rotation.y = Math.PI / 2;
     newViewer.camera.currentFov = cameraFovValues.x1;
     setViewer(newViewer);
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
-    const orientationControls = new _threeDeviceOrientation.default(camera);
+    var camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 1, 1000);
+    var orientationControls = new _threeDeviceOrientation.default(camera);
+
+    var getAngle = function getAngle(control) {
+      if (control.alpha) {
+        return control.alpha - THREE.MathUtils.degToRad(control.screenOrientation);
+      }
+
+      return control.getAzimuthalAngle();
+    };
 
-    const animate = () => {
+    var animate = function animate() {
       window.requestAnimationFrame(animate);
-      camera.aspect = window.innerWidth / window.innerHeight;
-      camera.updateProjectionMatrix();
       orientationControls.update();
-      const fovElement = document.querySelector('.widget-tab__panorama-map__fov');
+      var fovElement = document.querySelector('.widget-tab__panorama-map__fov');
       if (!fovElement) return;
-      const control = newViewer.getControl();
-      const angle = -(control.alpha || control.getAzimuthalAngle());
+      var angle = -getAngle(newViewer.getControl());
       fovElement.style.transform = "translate(-50%, -50%) rotate(".concat(angle, "rad)");
     };
 
     animate();
   }, [panoramas]);
-  (0, _react.useEffect)(setScale, [json, windowWidth]);
-  (0, _react.useEffect)(() => setPanoramas(getPanoramas(json, images, setLoadingState)), [json, images]);
+  (0, _react.useEffect)(setScale, [json, windowSize, viewer]);
+  (0, _react.useEffect)(function () {
+    return setPanoramas(getPanoramas(json, images, setLoadingState));
+  }, [json, images]);
+
+  var requestDeviceOrientation = function requestDeviceOrientation() {
+    return DeviceOrientationEvent.requestPermission().then(function (status) {
+      setDeviceOrientationStatus(status);
+
+      if (status !== _deviceOrientationStatuses.deviceOrientationStatuses.GRANTED) {
+        viewer.enableControl(ORBIT);
+        return;
+      }
 
-  const onStart = () => {
+      viewer.enableControl(DEVICEORIENTATION);
+    });
+  };
+
+  var onStart = function onStart() {
     setInstructionsState(false);
 
     try {
       if (!DeviceOrientationEvent.requestPermission) return;
-      return DeviceOrientationEvent.requestPermission().then(status => {
-        if (status !== _deviceOrientationStatus.deviceOrientationStatus.GRANTED) {
-          setTimeout(() => viewer.enableControl(ORBIT), 100);
-          return;
-        }
-
-        setTimeout(() => viewer.enableControl(DEVICEORIENTATION), 100);
-      });
+      return requestDeviceOrientation();
     } catch (error) {
       console.error(error.message);
     }
   };
 
-  const getRoomPointsAsString = points => {
-    return points.map(_ref7 => {
-      let [x, y] = _ref7;
+  var getRoomPointsAsString = function getRoomPointsAsString(points) {
+    return points.map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+          x = _ref8[0],
+          y = _ref8[1];
+
       return [x * planScale.X, y * planScale.Y];
-    }).flat().filter(num => !isNaN(num)).toString();
+    }).flat().filter(function (num) {
+      return !isNaN(num);
+    }).toString();
   };
 
-  const onMapClick = event => {
-    const image = document.querySelector('.widget-tab__panorama-map img');
-    const {
-      clientX,
-      clientY
-    } = event;
-    const x = (clientX - image.x) / planScale.X;
-    const y = (clientY - image.y) / planScale.Y;
-    const availablePanoramas = panoramas.filter(_ref8 => {
-      let {
-        userData
-      } = _ref8;
+  var onMapClick = function onMapClick(event) {
+    if (loadingState) return;
+    var map = document.querySelector('.widget-tab__panorama-map');
+
+    if (windowSize.width <= _deviceWidth.deviceWidth.tablet) {
+      if (!map.classList.contains('widget-tab__panorama-map--scaled')) {
+        map.classList.add('widget-tab__panorama-map--scaled');
+        return;
+      }
+    }
+
+    rescaleMap();
+    var image = document.querySelector('.widget-tab__panorama-map img');
+    var clientX = event.clientX,
+        clientY = event.clientY;
+    var x = (clientX - image.x) / planScale.X;
+    var y = (clientY - image.y) / planScale.Y;
+    var availablePanoramas = panoramas.filter(function (_ref9) {
+      var userData = _ref9.userData;
       return (0, _geometric.pointInPolygon)([x, y], userData.points);
     });
-    const {
-      panorama
-    } = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas);
+
+    var _getClosestPanorama2 = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas),
+        panorama = _getClosestPanorama2.panorama;
+
     if (!panorama) return;
     changePanorama(panorama);
   };
@@ -417,30 +546,26 @@ const PanoramaTab = _ref4 => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-overlay"
+    className: "widget-tab__panorama-overlay",
+    onContextMenu: _helpers.preventRightClick
   }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     absolute: true
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama-map ".concat(isMapDisabled ? 'widget-tab__panorama-map--hidden' : '')
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: planImage,
-    onLoad: onImageLoaded,
-    alt: "plan"
-  }), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map((panorama, index) => /*#__PURE__*/_react.default.createElement("button", {
-    key: index,
-    className: getDotClassName(index),
-    style: getDotPosition(panorama.userData),
-    onClick: () => changePanorama(panorama)
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: mapSize,
+    alt: "plan",
+    onLoad: onImageLoaded
+  }), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__panorama-map__fov",
     style: getDotPosition(((_panoramas$currentRoo = panoramas[currentRoomIndex]) === null || _panoramas$currentRoo === void 0 ? void 0 : _panoramas$currentRoo.userData) || getDefaultUserData())
   }), /*#__PURE__*/_react.default.createElement("svg", {
+    width: mapSize.width,
     key: "X-".concat(planScale.X, "-Y-").concat(planScale.Y),
     onClick: onMapClick
-  }, panoramas.map((_ref9, index) => {
-    let {
-      userData
-    } = _ref9;
+  }, panoramas.map(function (_ref10, index) {
+    var userData = _ref10.userData;
     return /*#__PURE__*/_react.default.createElement("polygon", {
       key: index,
       points: getRoomPointsAsString(userData.points)