hart-estate-widget 0.0.64 → 0.0.67

package/build/components/PanoramaTab.js

@@ -1,620 +0,0 @@
-"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;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _deviceStore = _interopRequireDefault(require("../store/deviceStore"));
-
-var _locale = _interopRequireDefault(require("../locale"));
-
-var _store = _interopRequireDefault(require("../store"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var PANOLENS = _interopRequireWildcard(require("panolens"));
-
-var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orientation"));
-
-var _geometric = require("geometric");
-
-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"));
-
-var _Instructions = _interopRequireDefault(require("./Instructions"));
-
-var _spotIcon = _interopRequireDefault(require("../assets/img/spot-icon.png"));
-
-var _doorIcon = _interopRequireDefault(require("../assets/img/door-icon.png"));
-
-var _handMove = _interopRequireDefault(require("../assets/icons/hand-move.svg"));
-
-var _handResearch = _interopRequireDefault(require("../assets/icons/hand-research.svg"));
-
-var _rotationClose = _interopRequireDefault(require("../assets/icons/rotation-close.svg"));
-
-var _rotation = _interopRequireDefault(require("../assets/icons/rotation.svg"));
-
-var _x = _interopRequireDefault(require("../assets/icons/1x.svg"));
-
-var _x2 = _interopRequireDefault(require("../assets/icons/2x.svg"));
-
-var _close = _interopRequireDefault(require("../assets/icons/close.svg"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _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; }
-
-var _PANOLENS$CONTROLS = PANOLENS.CONTROLS,
-    DEVICEORIENTATION = _PANOLENS$CONTROLS.DEVICEORIENTATION,
-    ORBIT = _PANOLENS$CONTROLS.ORBIT;
-var pathName = 'Panorama_0_0_';
-var cameraFovValues = {
-  x1: 90,
-  x2: 60
-};
-
-var getDefaultUserData = function getDefaultUserData() {
-  return {
-    left: 0,
-    top: 0,
-    points: []
-  };
-};
-
-var createPanorama = function createPanorama(image, index, setLoadingState) {
-  var panorama = new PANOLENS.ImagePanorama(image);
-  panorama.userData = getDefaultUserData();
-  panorama['panorama_id'] = index + 1;
-  panorama.addEventListener('progress', function (event) {
-    setLoadingState(true);
-
-    if (event.progress.loaded / event.progress.total * 100 === 100) {
-      setLoadingState(false);
-    }
-  });
-  panorama.addEventListener('enter', function () {
-    return setLoadingState(false);
-  });
-  return panorama;
-};
-
-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;
-      var indexAsString = String(index);
-      var panoramaId = String((0, _imageExtentions.removeExtention)(img.substring(panoramaIdIndex))).split('.')[0];
-
-      if (panoramaId.toLowerCase().includes(_panoramaHelpers.cameraIdBeginning)) {
-        var cameraIdIndex = panoramaId.toLowerCase().indexOf(_panoramaHelpers.cameraIdBeginning) - 1;
-        panoramaId = panoramaId.slice(0, cameraIdIndex);
-      }
-
-      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(function (image) {
-      var panorama = createPanorama(image, index, setLoadingState);
-      panorama['room_images'] = roomImages;
-      panorama['room_id'] = jsonRoom.ID;
-      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 {
-        acc.push(panorama);
-      }
-    });
-    return acc;
-  }, []);
-  return panoramas.map(function (panorama, index) {
-    panorama['panorama_index'] = index;
-    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);
-    }
-
-    return panorama;
-  });
-};
-
-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;
-    var connectedPanorama = panoramas.find(function (_ref) {
-      var src = _ref.src;
-      return src === image;
-    });
-    var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, connectedPanorama.src);
-    if (!currentCamera) return;
-    connectPanorama(panorama, connectedPanorama, currentCamera.Location, center, false);
-  });
-  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;
-    var availablePanoramas = panoramas.filter(function (_ref3) {
-      var room_id = _ref3.room_id;
-      return room_id === connectedRoom.ID;
-    });
-
-    var _getClosestPanorama = (0, _panoramaHelpers.getClosestPanorama)([Location.X, Location.Y], availablePanoramas),
-        connectedPanorama = _getClosestPanorama.panorama;
-
-    if (!connectedPanorama) return;
-    connectPanorama(panorama, connectedPanorama, Location, center, true);
-  });
-  return panorama;
-};
-
-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);
-};
-
-var PanoramaTab = function PanoramaTab(_ref4) {
-  var _panoramas$currentRoo;
-
-  var json = _ref4.json,
-      planImage = _ref4.planImage,
-      images = _ref4.images,
-      disabled = _ref4.disabled;
-  var instructionSteps = [{
-    icon: _handMove.default,
-    text: _locale.default.getLocaleText('rotate-plan')
-  }, {
-    icon: _handResearch.default,
-    text: _locale.default.getLocaleText('research-plan')
-  }];
-
-  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: '200px',
-    height: 'auto'
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      mapSize = _useState8[0],
-      setMapSize = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      mapOpen = _useState10[0],
-      setMapState = _useState10[1];
-
-  var _useState11 = (0, _react.useState)({
-    X: 1,
-    Y: 1
-  }),
-      _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);
-  };
-
-  var setScale = function setScale() {
-    if (!viewer) return;
-    var image = document.querySelector('.widget-tab__panorama-map img');
-    var imageWidth = image.naturalWidth;
-    var imageHeight = image.naturalHeight;
-    var imageDelta = imageWidth / imageHeight;
-    var maxWidth = 200;
-    var maxHeight = _store.default.config.height - 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(_store.default.config.width, _store.default.config.height);
-  };
-
-  var onImageLoaded = function onImageLoaded() {
-    setScale();
-    setMapDisabledState(!json);
-  };
-
-  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")
-    };
-  };
-
-  var updateCameraFov = function updateCameraFov(fov) {
-    setCameraFov(fov);
-    viewer.camera.fov = fov;
-    viewer.camera.currentFov = fov;
-    viewer.camera.updateProjectionMatrix();
-  };
-
-  var toggleFov = function toggleFov() {
-    if (viewer.camera.fov === cameraFovValues.x1) {
-      updateCameraFov(cameraFovValues.x2);
-      return;
-    }
-
-    updateCameraFov(cameraFovValues.x1);
-  };
-
-  var getAngle = function getAngle(control) {
-    if (control.alpha) {
-      return control.alpha - THREE.MathUtils.degToRad(control.screenOrientation);
-    }
-
-    return control.getAzimuthalAngle();
-  };
-
-  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();
-  };
-
-  (0, _react.useEffect)(function () {
-    if (!panoramas.length) return;
-    var container = document.querySelector('.widget-tab__panorama-overlay');
-    var newViewer = new PANOLENS.Viewer({
-      autoRotateActivationDuration: 1000,
-      cameraFov: cameraFovValues.x1,
-      autoHideInfospot: false,
-      controlButtons: [],
-      container: container
-    });
-
-    var preventCameraFovChange = function preventCameraFovChange(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      newViewer.camera.fov = newViewer.camera.currentFov;
-      newViewer.camera.updateProjectionMatrix();
-    };
-
-    container.addEventListener('mousewheel', preventCameraFovChange);
-    container.addEventListener('touchmove', preventCameraFovChange);
-    panoramas.forEach(function (panorama) {
-      if (!panorama.panorama_id) return;
-      panorama.addEventListener('enter', function (_ref6) {
-        var target = _ref6.target;
-        return setCurrentRoomIndex(target['panorama_index']);
-      });
-      newViewer.add(panorama);
-    });
-    newViewer.scene.rotation.y = Math.PI / 2;
-    newViewer.camera.currentFov = cameraFovValues.x1;
-    setViewer(newViewer);
-    var camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 1, 1000);
-    var orientationControls = new _threeDeviceOrientation.default(camera);
-
-    var animate = function animate() {
-      window.requestAnimationFrame(animate);
-      orientationControls.update();
-      var fovElement = document.querySelector('.widget-tab__panorama-map__fov');
-      if (!fovElement) return;
-      var angle = -getAngle(newViewer.getControl());
-      fovElement.style.transform = "translate(-50%, -50%) rotate(".concat(angle, "rad)");
-    };
-
-    animate();
-  }, [panoramas]);
-  (0, _react.useEffect)(setScale, [json, viewer, _store.default.config.width, _store.default.config.height]);
-  (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;
-      }
-
-      viewer.enableControl(DEVICEORIENTATION);
-    });
-  };
-
-  var onStart = function onStart() {
-    setInstructionsState(false);
-    if (!_deviceStore.default.isMobile && !_deviceStore.default.isTablet) return;
-
-    var allowDeviceOrientation = function allowDeviceOrientation() {
-      window.removeEventListener('deviceorientation', allowDeviceOrientation);
-      setDeviceOrientationStatus(_deviceOrientationStatuses.deviceOrientationStatuses.GRANTED);
-      viewer.enableControl(DEVICEORIENTATION);
-    };
-
-    try {
-      if (!DeviceOrientationEvent.requestPermission) {
-        window.addEventListener('deviceorientation', allowDeviceOrientation);
-        return;
-      }
-
-      return requestDeviceOrientation();
-    } catch (error) {
-      console.error(error.message);
-    }
-  };
-
-  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(function (num) {
-      return !isNaN(num);
-    }).toString();
-  };
-
-  var openMap = function openMap() {
-    _store.default.hideControls();
-
-    setMapState(true);
-  };
-
-  var closeMap = function closeMap() {
-    _store.default.showControls();
-
-    setMapState(false);
-  };
-
-  var onMapClick = function onMapClick(event) {
-    if (loadingState) return;
-
-    if (_store.default.config.width <= _deviceWidth.deviceWidth.tablet) {
-      if (!mapOpen) {
-        openMap();
-        return;
-      }
-    }
-
-    var map = document.querySelector('.widget-tab__panorama-map');
-    var mapScale = map.getBoundingClientRect().width / map.offsetWidth;
-    var image = document.querySelector('.widget-tab__panorama-map img');
-    var offset = image.getBoundingClientRect();
-    var clientX = event.clientX,
-        clientY = event.clientY;
-    var x = (clientX - offset.left) / mapScale / planScale.X;
-    var y = (clientY - offset.top) / mapScale / planScale.Y;
-    var availablePanoramas = panoramas.filter(function (_ref9) {
-      var userData = _ref9.userData;
-      return (0, _geometric.pointInPolygon)([x, y], userData.points);
-    });
-
-    var _getClosestPanorama2 = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas),
-        panorama = _getClosestPanorama2.panorama;
-
-    closeMap();
-    if (!panorama) return;
-    changePanorama(panorama);
-  };
-
-  var getMapClass = function getMapClass() {
-    var className = 'widget-tab__panorama-map';
-
-    if (isMapDisabled) {
-      className += ' widget-tab__panorama-map--hidden';
-    }
-
-    if (mapOpen) {
-      className += ' widget-tab__panorama-map--scaled';
-    }
-
-    return className;
-  };
-
-  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",
-    onContextMenu: _helpers.preventRightClick
-  }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
-    absolute: true
-  }), mapOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-close-map",
-    onClick: closeMap
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _close.default,
-    alt: "close-map"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: getMapClass()
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: planImage,
-    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(function (_ref10, index) {
-    var userData = _ref10.userData;
-    return /*#__PURE__*/_react.default.createElement("polygon", {
-      key: index,
-      points: getRoomPointsAsString(userData.points)
-    });
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-controls"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "widget-tab__panorama-controls-button",
-    onClick: toggleFov
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: cameraFov === cameraFovValues.x1 ? _x.default : _x2.default,
-    alt: "scale-icon"
-  })), /*#__PURE__*/_react.default.createElement("button", {
-    className: "widget-tab__panorama-controls-button",
-    onClick: toggleAutoplay
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: autoplayEnabled ? _rotationClose.default : _rotation.default,
-    alt: "rotation-icon"
-  })))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
-    disabled: disabled,
-    steps: instructionSteps,
-    onClick: onStart
-  }));
-};
-
-var _default = PanoramaTab;
-exports.default = _default;