hart-estate-widget 0.0.8 → 0.0.11

package/build/components/PanoramaTab.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var PANOLENS = _interopRequireWildcard(require("panolens"));
+
+var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orientation"));
+
+var _Loader = _interopRequireDefault(require("./Loader"));
+
+var _panoramaHelpers = require("../utils/panoramaHelpers");
+
+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 {
+  DEVICEORIENTATION,
+  ORBIT
+} = PANOLENS.CONTROLS;
+const pathName = 'Panorama_0_0_';
+
+const getPanoramas = (json, images, setLoadingState) => {
+  return json.Floors[0].Units[0].Rooms.reduce((acc, jsonRoom, index) => {
+    const image = images.find(img => img.includes(pathName + index));
+    if (!image) return acc;
+    const panorama = new PANOLENS.ImagePanorama(image);
+    panorama['panorama_id'] = index + 1;
+    panorama['room_id'] = jsonRoom.ID;
+    panorama.addEventListener('progress', event => {
+      setLoadingState(true);
+
+      if (event.progress.loaded / event.progress.total * 100 === 100) {
+        setLoadingState(false);
+      }
+    });
+    panorama.addEventListener('enter', () => setLoadingState(false));
+    acc.push(panorama);
+    return acc;
+  }, []);
+};
+
+const getPanoramaRooms = (json, panoramas) => {
+  const {
+    Vertices,
+    Floors
+  } = json;
+  const {
+    Walls
+  } = Floors[0];
+  return panoramas.map((panorama, index) => {
+    const currentRoom = Floors[0].Units[0].Rooms.find(room => room.ID === panorama['room_id']);
+    const {
+      left,
+      top
+    } = (0, _panoramaHelpers.findRoomCenter)(currentRoom, Walls, Vertices);
+    return {
+      type: currentRoom.Type,
+      id: index,
+      panorama,
+      left,
+      top
+    };
+  }, []);
+};
+
+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 animate = () => {
+    window.requestAnimationFrame(animate);
+    controls.update();
+  };
+
+  animate();
+
+  if (DeviceOrientationEvent.requestPermission) {
+    DeviceOrientationEvent.requestPermission().catch(() => console.log('Device motion not allowed'));
+  }
+
+  return {
+    camera,
+    controls
+  };
+};
+
+const PanoramaTab = _ref => {
+  let {
+    json,
+    planImage,
+    images
+  } = _ref;
+  const [menuState, setMenuState] = (0, _react.useState)(false);
+  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 [planScale, setPlanScale] = (0, _react.useState)({
+    X: 1,
+    Y: 1
+  });
+
+  const changePanorama = (panorama, index) => {
+    setCurrentRoomIndex(index);
+    viewer.setPanorama(panorama);
+  };
+
+  const toggleVrMode = () => {
+    if (viewer.mode === 3) {
+      viewer.disableEffect();
+      return;
+    }
+
+    viewer.enableEffect(PANOLENS.MODES.STEREO);
+  };
+
+  const toggleOrientationMode = () => {
+    if (viewer.control.id === 'orbit') {
+      viewer.enableControl(DEVICEORIENTATION);
+      return;
+    }
+
+    viewer.enableControl(ORBIT);
+  };
+
+  const toggleMap = () => setMapState(!isMapActive);
+
+  const setScale = () => {
+    const image = document.querySelector('.widget-tab__panorama-map img');
+    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
+  };
+
+  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;
+  };
+
+  (0, _react.useEffect)(() => {
+    const newViewer = new PANOLENS.Viewer({
+      container: document.querySelector('.widget-tab__panorama-overlay'),
+      autoHideInfospot: false,
+      controlButtons: [],
+      cameraFov: 90
+    });
+    panoramas.forEach(panorama => {
+      if (!panorama.panorama_id) return;
+      newViewer.add(panorama);
+    });
+    setViewer(newViewer);
+    initPanorama();
+  }, [panoramas]);
+  (0, _react.useEffect)(setScale, [json, isMapActive]);
+  return /*#__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')
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: planImage,
+    className: isMapActive ? 'active' : '',
+    onClick: toggleMap,
+    alt: "plan"
+  }), panoramaRooms.map((room, index) => /*#__PURE__*/_react.default.createElement("div", {
+    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"));
+};
+
+var _default = PanoramaTab;
+exports.default = _default;

package/build/config/defaultConfig.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _defaultJSON = _interopRequireDefault(require("./defaultJSON"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultConfig = {
@@ -18,7 +20,8 @@ const defaultConfig = {
   topView: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopView_0_0.png',
   topDownView: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/MiddleCut_0_0_0.png',
   rotationImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_7.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_8.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_9.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_10.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_11.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_12.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_13.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_14.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_15.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_16.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_17.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_18.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_19.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_20.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_21.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_22.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_23.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_24.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_25.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_26.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_27.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_28.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_29.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_30.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_31.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_32.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_33.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_34.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_35.png'],
-  panoramaImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_7.png']
+  panoramaImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_7.png'],
+  json: _defaultJSON.default
 };
 var _default = defaultConfig;
 exports.default = _default;