hart-estate-widget 0.0.40 → 0.0.43

package/build/components/PanoramaTab.js

@@ -9,11 +9,17 @@ require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
-require("core-js/modules/es.string.replace.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.string.includes.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"));
 
@@ -25,50 +31,66 @@ var PANOLENS = _interopRequireWildcard(require("panolens"));
 
 var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orientation"));
 
-var _Loader = _interopRequireDefault(require("./Loader"));
+var _geometric = require("geometric");
+
+var _deviceOrientationStatus = require("../enums/deviceOrientationStatus");
+
+var _imageExtentions = require("../enums/imageExtentions");
 
 var _panoramaHelpers = require("../utils/panoramaHelpers");
 
-var _geometric = require("geometric");
+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"));
+
 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; }
 
+const instructionSteps = [{
+  icon: _handMove.default,
+  text: 'Вращать планировку'
+}, {
+  icon: _handResearch.default,
+  text: 'Исследовать планировку'
+}];
 const {
   DEVICEORIENTATION,
   ORBIT
 } = PANOLENS.CONTROLS;
-const imgExtentions = ['.png', '.PNG', '.jpg', '.JPG'];
 const pathName = 'Panorama_0_0_';
-const cameraIdBeginning = 'CameraId';
-
-const removeExtention = str => imgExtentions.reduce((acc, extention) => {
-  return acc.replace(extention, '');
-}, str);
-
-const getCameraFromSrc = (json, src) => {
-  var _json$Floors$0$Camera;
-
-  const cameraIdIndex = src.indexOf(cameraIdBeginning);
-  if (cameraIdIndex === -1) return null;
-  const cameraId = removeExtention(src.substring(cameraIdIndex));
-  return ((_json$Floors$0$Camera = json.Floors[0].CameraPoints) === null || _json$Floors$0$Camera === void 0 ? void 0 : _json$Floors$0$Camera.find(_ref => {
-    let {
-      ID
-    } = _ref;
-    return ID === cameraId;
-  })) || null;
+const cameraFovValues = {
+  x1: 90,
+  x2: 60
 };
 
+const getDefaultUserData = () => ({
+  left: 0,
+  top: 0,
+  points: []
+});
+
 const createPanorama = (image, index, setLoadingState) => {
   const panorama = new PANOLENS.ImagePanorama(image);
+  panorama.userData = getDefaultUserData();
   panorama['panorama_id'] = index + 1;
   panorama.addEventListener('progress', event => {
     setLoadingState(true);
@@ -83,12 +105,18 @@ const createPanorama = (image, index, setLoadingState) => {
 
 const getPanoramas = (json, images, setLoadingState) => {
   if (!json) return images.map((image, index) => createPanorama(image, index, setLoadingState));
-  return json.Floors[0].Units[0].Rooms.reduce((acc, jsonRoom, index) => {
+  const panoramas = json.Floors[0].Units[0].Rooms.reduce((acc, jsonRoom, index) => {
     const roomImages = images.filter(img => {
       const panoramaIdIndex = img.indexOf(pathName) + pathName.length;
       if (panoramaIdIndex < pathName.length) return false;
       const indexAsString = String(index);
-      const panoramaId = String(removeExtention(img.substring(panoramaIdIndex)));
+      let panoramaId = String((0, _imageExtentions.removeExtention)(img.substring(panoramaIdIndex))).split('.')[0];
+
+      if (panoramaId.includes(_panoramaHelpers.cameraIdBeginning)) {
+        const cameraIdIndex = panoramaId.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 => {
         return panoramaId[i] === indexAsString[i];
@@ -100,8 +128,24 @@ const getPanoramas = (json, images, setLoadingState) => {
       const 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
+        };
+      }
 
-      if (panorama['room_id'] === _store.default.hallRoomId) {
+      if (panorama['room_id'] === _store.default.initialPanoramaRoomId) {
         acc.unshift(panorama);
       } else {
         acc.push(panorama);
@@ -109,64 +153,37 @@ const getPanoramas = (json, images, setLoadingState) => {
     });
     return acc;
   }, []);
-};
-
-const getPanoramaRooms = (json, panoramas) => {
   return panoramas.map((panorama, index) => {
     panorama['panorama_index'] = index;
-    const type = "Room - ".concat(panorama['panorama_id']);
-    if (!json) return {
-      type,
-      id: index,
-      panorama,
-      left: 0,
-      top: 0
-    };
     const currentRoom = json.Floors[0].Units[0].Rooms.find(room => room.ID === panorama['room_id']);
-    let [left, top] = (0, _geometric.polygonMean)((0, _panoramaHelpers.getRoomCoordinates)(currentRoom, json.Floors[0].Walls, json.Vertices));
-    panorama['roomType'] = currentRoom.Type;
 
     if (!panorama.linkedSpots.length) {
-      if (panorama.src.includes('_CameraId')) {
-        const currentCamera = getCameraFromSrc(json, panorama.src);
-        const {
-          Location
-        } = currentCamera;
-        left = Location.X;
-        top = Location.Y;
-      }
-
-      setPanoramaLinks(json, currentRoom, [left, top], panorama, panoramas);
+      return setPanoramaLinks(json, currentRoom, panorama, panoramas);
     }
 
-    return {
-      type: currentRoom.Type,
-      id: index,
-      panorama,
-      left,
-      top
-    };
-  }, []);
+    return panorama;
+  });
 };
 
-const setPanoramaLinks = (json, currentRoom, center, panorama, panoramas) => {
+const setPanoramaLinks = (json, currentRoom, panorama, panoramas) => {
+  const center = [panorama.userData.left, panorama.userData.top];
   panorama['room_images'].forEach(image => {
     if (image === panorama.src) return;
-    const connectedPanorama = panoramas.find(_ref2 => {
+    const connectedPanorama = panoramas.find(_ref => {
       let {
         src
-      } = _ref2;
+      } = _ref;
       return src === image;
     });
-    const currentCamera = getCameraFromSrc(json, connectedPanorama.src);
+    const currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, connectedPanorama.src);
     if (!currentCamera) return;
     connectPanorama(panorama, connectedPanorama, currentCamera.Location, center, false);
   });
-  json.Floors[0].Doors.forEach(_ref3 => {
+  json.Floors[0].Doors.forEach(_ref2 => {
     let {
       Location,
       Walls
-    } = _ref3;
+    } = _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));
@@ -174,15 +191,19 @@ const setPanoramaLinks = (json, currentRoom, center, panorama, panoramas) => {
       return roomHasSameWall && !isSameRoom;
     });
     if (!connectedRoom) return;
-    const connectedPanorama = panoramas.find(_ref4 => {
+    const availablePanoramas = panoramas.filter(_ref3 => {
       let {
         room_id
-      } = _ref4;
+      } = _ref3;
       return room_id === connectedRoom.ID;
     });
+    const {
+      panorama: connectedPanorama
+    } = (0, _panoramaHelpers.getClosestPanorama)([Location.X, Location.Y], availablePanoramas);
     if (!connectedPanorama) return;
     connectPanorama(panorama, connectedPanorama, Location, center, true);
   });
+  return panorama;
 };
 
 const connectPanorama = function connectPanorama(panorama, connectedPanorama, location, center) {
@@ -203,107 +224,117 @@ const connectPanorama = function connectPanorama(panorama, connectedPanorama, lo
   panorama.link(connectedPanorama, position, resultScale, iconUrl);
 };
 
-const initPanorama = () => {
-  let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
-  let controls = new _threeDeviceOrientation.default(camera);
-  window.addEventListener('resize', () => {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-  });
+const PanoramaTab = _ref4 => {
+  var _panoramas$currentRoo;
 
-  const animate = () => {
-    window.requestAnimationFrame(animate);
-    controls.update();
-  };
-
-  animate();
-  return {
-    camera,
-    controls
-  };
-};
-
-const PanoramaTab = _ref5 => {
   let {
     json,
     planImage,
-    images
-  } = _ref5;
-  const [menuState, setMenuState] = (0, _react.useState)(false);
+    images,
+    disabled
+  } = _ref4;
+  const [showInstructions, setInstructionsState] = (0, _react.useState)(true);
   const [loadingState, setLoadingState] = (0, _react.useState)(true);
-  const [isMapActive, setMapState] = (0, _react.useState)(false);
-  const [currentRoomIndex, setCurrentRoomIndex] = (0, _react.useState)(0);
-  const [panoramas] = (0, _react.useState)(getPanoramas(json, images, setLoadingState));
-  const [panoramaRooms] = (0, _react.useState)(getPanoramaRooms(json, panoramas));
-  const [viewer, setViewer] = (0, _react.useState)(null);
+  const [windowWidth, setWindowWidth] = (0, _react.useState)(0);
+  const [isMapDisabled, setMapDisabledState] = (0, _react.useState)(true);
   const [planScale, setPlanScale] = (0, _react.useState)({
     X: 1,
     Y: 1
   });
-  const isMapDisabled = !json;
+  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, index) => {
-    setCurrentRoomIndex(index);
+  const changePanorama = panorama => {
+    setCurrentRoomIndex(panorama['panorama_index']);
     viewer.setPanorama(panorama);
   };
 
-  const toggleVrMode = () => {
-    if (viewer.mode === 3) {
-      viewer.disableEffect();
-      return;
-    }
+  const setScale = () => {
+    const image = document.querySelector('.widget-tab__panorama-map img');
+    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
+  };
+
+  const 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;
+  };
 
-    viewer.enableEffect(PANOLENS.MODES.STEREO);
+  const getDotPosition = _ref5 => {
+    let {
+      left,
+      top
+    } = _ref5;
+    return {
+      left: "".concat(left * planScale.X, "px"),
+      top: "".concat(top * planScale.Y, "px")
+    };
   };
 
-  const toggleOrientationMode = () => {
-    if (viewer.control.id === 'orbit') {
-      viewer.enableControl(DEVICEORIENTATION);
+  const updateCameraFov = fov => {
+    setCameraFov(fov);
+    viewer.camera.fov = fov;
+    viewer.camera.currentFov = fov;
+    viewer.camera.updateProjectionMatrix();
+  };
+
+  const toggleFov = () => {
+    if (viewer.camera.fov === cameraFovValues.x1) {
+      updateCameraFov(cameraFovValues.x2);
       return;
     }
 
-    viewer.enableControl(ORBIT);
+    updateCameraFov(cameraFovValues.x1);
   };
 
-  const toggleMap = () => setMapState(!isMapActive);
+  const toggleAutoplay = () => {
+    setAutoplayState(!autoplayEnabled);
 
-  const setScale = () => {
-    const image = document.querySelector('.widget-tab__panorama-map img');
-    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
-  };
+    if (autoplayEnabled) {
+      viewer.disableAutoRate();
+      return;
+    }
 
-  const getDotClassName = index => {
-    let className = 'widget-tab__panorama-map__dot';
-    if (isMapActive) className += ' widget-tab__panorama-map__dot--big';
-    if (currentRoomIndex === index) className += ' widget-tab__panorama-map__dot--active';
-    return className;
+    viewer.enableAutoRate();
   };
 
+  const updateWindowWidth = () => setWindowWidth(window.innerWidth);
+
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', updateWindowWidth);
+    return function cleanup() {
+      window.removeEventListener('resize', updateWindowWidth);
+    };
+  }, []);
   (0, _react.useEffect)(() => {
+    if (!panoramas.length) return;
     const container = document.querySelector('.widget-tab__panorama-overlay');
     const newViewer = new PANOLENS.Viewer({
-      container,
+      autoRotateActivationDuration: 1,
       autoHideInfospot: false,
       controlButtons: [],
-      cameraFov: 90
+      controlBar: false,
+      cameraFov: cameraFovValues.x1,
+      container
     });
-    container.addEventListener('mousewheel', e => {
+
+    const preventCameraFovChange = e => {
       e.preventDefault();
       e.stopPropagation();
-      const scope = newViewer.getControl();
-      const fovStep = 2;
-
-      if (e.deltaY > 0) {
-        const newFov = scope.object.fov + fovStep;
-        scope.object.fov = newFov < scope.maxFov ? newFov : scope.maxFov;
-        scope.object.updateProjectionMatrix();
-        return;
-      }
+      newViewer.camera.fov = newViewer.camera.currentFov;
+      newViewer.camera.updateProjectionMatrix();
+    };
 
-      const newFov = scope.object.fov - fovStep;
-      scope.object.fov = newFov > scope.minFov ? newFov : scope.minFov;
-      scope.object.updateProjectionMatrix();
-    });
+    container.addEventListener('mousewheel', preventCameraFovChange);
+    container.addEventListener('touchmove', preventCameraFovChange);
     panoramas.forEach(panorama => {
       if (!panorama.panorama_id) return;
       panorama.addEventListener('enter', _ref6 => {
@@ -315,46 +346,124 @@ const PanoramaTab = _ref5 => {
       newViewer.add(panorama);
     });
     newViewer.scene.rotation.y = Math.PI / 2;
+    newViewer.camera.currentFov = cameraFovValues.x1;
     setViewer(newViewer);
-    initPanorama();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+    const orientationControls = new _threeDeviceOrientation.default(camera);
+
+    const animate = () => {
+      window.requestAnimationFrame(animate);
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      orientationControls.update();
+      const fovElement = document.querySelector('.widget-tab__panorama-map__fov');
+      if (!fovElement) return;
+      const control = newViewer.getControl();
+      const angle = -(control.alpha || control.getAzimuthalAngle());
+      fovElement.style.transform = "translate(-50%, -50%) rotate(".concat(angle, "rad)");
+    };
+
+    animate();
   }, [panoramas]);
-  (0, _react.useEffect)(setScale, [json, isMapActive]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useEffect)(setScale, [json, windowWidth]);
+  (0, _react.useEffect)(() => setPanoramas(getPanoramas(json, images, setLoadingState)), [json, images]);
+
+  const 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);
+      });
+    } catch (error) {
+      console.error(error.message);
+    }
+  };
+
+  const getRoomPointsAsString = points => {
+    return points.map(_ref7 => {
+      let [x, y] = _ref7;
+      return [x * planScale.X, y * planScale.Y];
+    }).flat().filter(num => !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;
+      return (0, _geometric.pointInPolygon)([x, y], userData.points);
+    });
+    const {
+      panorama
+    } = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas);
+    if (!panorama) return;
+    changePanorama(panorama);
+  };
+
+  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"
   }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     absolute: true
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab-menu"
-  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
-    onClick: () => setMenuState(!menuState)
-  }, "Rooms"), menuState && panoramaRooms.map((room, index) => /*#__PURE__*/_react.default.createElement("li", {
-    key: index,
-    onClick: () => changePanorama(room.panorama, index)
-  }, currentRoomIndex === index && '• ', " ", room.type)))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-map ".concat(planImage ? '' : 'widget-tab__panorama-map--hidden')
+    className: "widget-tab__panorama-map ".concat(isMapDisabled ? 'widget-tab__panorama-map--hidden' : '')
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: planImage,
-    className: isMapActive ? 'active' : '',
-    onClick: toggleMap,
-    onLoad: setScale,
+    onLoad: onImageLoaded,
     alt: "plan"
-  }), !isMapDisabled && panoramaRooms.map((room, index) => /*#__PURE__*/_react.default.createElement("div", {
+  }), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map((panorama, index) => /*#__PURE__*/_react.default.createElement("button", {
     key: index,
-    style: {
-      left: "".concat(room.left * planScale.X, "px"),
-      top: "".concat(room.top * planScale.Y, "px")
-    },
     className: getDotClassName(index),
-    onClick: () => changePanorama(room.panorama, index)
-  }))), /*#__PURE__*/_react.default.createElement("button", {
-    className: "widget-tab__panorama-mode",
-    onClick: toggleVrMode
-  }, "VR"), /*#__PURE__*/_react.default.createElement("button", {
-    className: "widget-tab__panorama-standart",
-    onClick: toggleOrientationMode
-  }, "Standart"));
+    style: getDotPosition(panorama.userData),
+    onClick: () => changePanorama(panorama)
+  })), /*#__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", {
+    key: "X-".concat(planScale.X, "-Y-").concat(planScale.Y),
+    onClick: onMapClick
+  }, panoramas.map((_ref9, index) => {
+    let {
+      userData
+    } = _ref9;
+    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;

package/build/components/RotationTab.js

@@ -13,22 +13,38 @@ var _panzoom = _interopRequireDefault(require("panzoom"));
 
 var _threesixty = _interopRequireDefault(require("../threesixty"));
 
+var _Instructions = _interopRequireDefault(require("./Instructions"));
+
+var _handMove = _interopRequireDefault(require("../assets/icons/hand-move.svg"));
+
+var _rotation = _interopRequireDefault(require("../assets/icons/rotation.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; }
 
+const instructionSteps = [{
+  icon: _handMove.default,
+  text: 'Вращать планировку'
+}];
+
 const RotationTab = _ref => {
   let {
-    images
+    images,
+    disabled = false
   } = _ref;
+  const [showInstructions, setInstructionsState] = (0, _react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
+  const [active, setActiveState] = (0, _react.useState)(false);
+
+  const onStart = () => {
+    setInstructionsState(false);
     const container = document.querySelector('.widget-tab__threesixty-container');
     const widgetTab = document.querySelector('.widget-tab');
     const rotation = new _threesixty.default(container, {
-      image: images.map(img => img),
+      image: [...images],
       parentElement: widgetTab,
       inverted: true
     });
@@ -51,19 +67,33 @@ const RotationTab = _ref => {
 
       rotation._update = () => setActiveIndex(rotation.index);
     });
-  }, [images]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__threesixty"
+  };
+
+  const openInstructions = () => {
+    setInstructionsState(true);
+    setActiveState(true);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__threesixty ".concat(active ? 'widget-tab__threesixty--active' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__threesixty-container"
   }, images.map((img, index) => /*#__PURE__*/_react.default.createElement("img", {
     src: img,
     key: index,
     alt: "rotation-view-".concat(index),
-    style: {
-      opacity: activeIndex === index ? 1 : 0
-    }
-  }))));
+    className: activeIndex === index ? 'active' : ''
+  })))), !active && !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__threesixty-start",
+    onClick: openInstructions
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _rotation.default,
+    alt: "start-icon"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "\u0412\u0440\u0430\u0449\u0430\u0442\u044C")), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
+    disabled: disabled,
+    steps: instructionSteps,
+    onClick: onStart
+  }));
 };
 
 var _default = RotationTab;