hart-estate-widget 0.0.32 → 0.0.35

package/build/components/Application.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.promise.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _mobxReactLite = require("mobx-react-lite");
@@ -56,6 +58,19 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     _store.default.dispatchEvent('enterComponent');
   };
 
+  const openPanorama = async () => {
+    try {
+      if (DeviceOrientationEvent.requestPermission) {
+        await DeviceOrientationEvent.requestPermission();
+      }
+    } catch (e) {
+      console.error(e);
+      console.log('Device motion not allowed');
+    }
+
+    hideTabPanes();
+  };
+
   const tabsList = {
     'planImage': /*#__PURE__*/_react.default.createElement(_ImageTab.default, {
       image: config.planImage,
@@ -85,7 +100,7 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
       image: _store.default.hallRoomImage,
       title: "Panoramic tour",
       text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
-      onStart: hideTabPanes
+      onStart: openPanorama
     }, /*#__PURE__*/_react.default.createElement(_PanoramaTab.default, {
       json: config.json,
       planImage: config.planImage,

package/build/components/PanoramaTab.js

@@ -7,6 +7,10 @@ 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.replace.js");
+
 require("core-js/modules/es.string.includes.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -27,6 +31,10 @@ var _panoramaHelpers = require("../utils/panoramaHelpers");
 
 var _geometric = require("geometric");
 
+var _spotIcon = _interopRequireDefault(require("../assets/img/spot-icon.png"));
+
+var _doorIcon = _interopRequireDefault(require("../assets/img/door-icon.png"));
+
 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); }
@@ -39,6 +47,23 @@ const {
 } = PANOLENS.CONTROLS;
 const pathName = 'Panorama_0_0_';
 
+const getCameraFromSrc = (json, src) => {
+  var _json$Floors$0$Camera;
+
+  const cameraIdIndex = src.indexOf('CameraId');
+  const imgExtentions = ['.png', '.PNG', '.jpg', '.JPG'];
+  if (cameraIdIndex === -1) return null;
+  const cameraId = imgExtentions.reduce((acc, extention) => {
+    return acc.replace(extention, '');
+  }, 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 createPanorama = (image, index, setLoadingState) => {
   const panorama = new PANOLENS.ImagePanorama(image);
   panorama['panorama_id'] = index + 1;
@@ -56,17 +81,19 @@ 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 image = images.find(img => img.includes(pathName + index));
-    if (!image) return acc;
-    const panorama = createPanorama(image, index, setLoadingState);
-    panorama['room_id'] = jsonRoom.ID;
-
-    if (panorama['room_id'] === _store.default.hallRoomId) {
-      acc.unshift(panorama);
-    } else {
-      acc.push(panorama);
-    }
-
+    const roomImages = images.filter(img => img.includes(pathName + index));
+    if (!roomImages.length) return acc;
+    roomImages.forEach(image => {
+      const panorama = createPanorama(image, index, setLoadingState);
+      panorama['room_images'] = roomImages;
+      panorama['room_id'] = jsonRoom.ID;
+
+      if (panorama['room_id'] === _store.default.hallRoomId) {
+        acc.unshift(panorama);
+      } else {
+        acc.push(panorama);
+      }
+    });
     return acc;
   }, []);
 };
@@ -83,9 +110,19 @@ const getPanoramaRooms = (json, panoramas) => {
       top: 0
     };
     const currentRoom = json.Floors[0].Units[0].Rooms.find(room => room.ID === panorama['room_id']);
-    const [left, top] = (0, _geometric.polygonMean)((0, _panoramaHelpers.getRoomCoordinates)(currentRoom, json.Floors[0].Walls, json.Vertices));
+    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);
     }
 
@@ -100,11 +137,23 @@ const getPanoramaRooms = (json, panoramas) => {
 };
 
 const setPanoramaLinks = (json, currentRoom, center, panorama, panoramas) => {
-  json.Floors[0].Doors.forEach(_ref => {
+  panorama['room_images'].forEach(image => {
+    if (image === panorama.src) return;
+    const connectedPanorama = panoramas.find(_ref2 => {
+      let {
+        src
+      } = _ref2;
+      return src === image;
+    });
+    const currentCamera = getCameraFromSrc(json, connectedPanorama.src);
+    if (!currentCamera) return;
+    connectPanorama(panorama, connectedPanorama, currentCamera.Location, center, false);
+  });
+  json.Floors[0].Doors.forEach(_ref3 => {
     let {
       Location,
       Walls
-    } = _ref;
+    } = _ref3;
     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));
@@ -112,26 +161,35 @@ const setPanoramaLinks = (json, currentRoom, center, panorama, panoramas) => {
       return roomHasSameWall && !isSameRoom;
     });
     if (!connectedRoom) return;
-    const connectedPanorama = panoramas.find(_ref2 => {
+    const connectedPanorama = panoramas.find(_ref4 => {
       let {
         room_id
-      } = _ref2;
+      } = _ref4;
       return room_id === connectedRoom.ID;
     });
     if (!connectedPanorama) return;
-    const locationX = Location.Y - center[1];
-    const locationY = Location.X - center[0];
-    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 position = new THREE.Vector3(locationX, -10, locationY);
-    panorama.link(connectedPanorama, position, finalScale);
+    connectPanorama(panorama, connectedPanorama, Location, center, true);
   });
 };
 
+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);
+  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);
@@ -146,23 +204,18 @@ const initPanorama = () => {
   };
 
   animate();
-
-  if (DeviceOrientationEvent.requestPermission) {
-    DeviceOrientationEvent.requestPermission().catch(() => console.log('Device motion not allowed'));
-  }
-
   return {
     camera,
     controls
   };
 };
 
-const PanoramaTab = _ref3 => {
+const PanoramaTab = _ref5 => {
   let {
     json,
     planImage,
     images
-  } = _ref3;
+  } = _ref5;
   const [menuState, setMenuState] = (0, _react.useState)(false);
   const [loadingState, setLoadingState] = (0, _react.useState)(true);
   const [isMapActive, setMapState] = (0, _react.useState)(false);
@@ -240,10 +293,10 @@ const PanoramaTab = _ref3 => {
     });
     panoramas.forEach(panorama => {
       if (!panorama.panorama_id) return;
-      panorama.addEventListener('enter', _ref4 => {
+      panorama.addEventListener('enter', _ref6 => {
         let {
           target
-        } = _ref4;
+        } = _ref6;
         return setCurrentRoomIndex(target['panorama_index']);
       });
       newViewer.add(panorama);

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.32",
+  "version": "0.0.35",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",