hart-estate-widget 0.0.30 → 0.0.33

package/build/components/Application.js

@@ -81,8 +81,8 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     })),
     'panorama': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
       isActive: !isTabPanesVisible,
-      disabled: !config.panoramaImages[0],
-      image: config.panoramaImages[0],
+      disabled: !_store.default.hallRoomImage,
+      image: _store.default.hallRoomImage,
       title: "Panoramic tour",
       text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
       onStart: hideTabPanes

package/build/components/PanoramaTab.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.match.js");
+
 require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.string.includes.js");
@@ -13,6 +17,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _store = _interopRequireDefault(require("../store"));
+
 var THREE = _interopRequireWildcard(require("three"));
 
 var PANOLENS = _interopRequireWildcard(require("panolens"));
@@ -25,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); }
@@ -36,6 +46,19 @@ const {
   ORBIT
 } = PANOLENS.CONTROLS;
 const pathName = 'Panorama_0_0_';
+(0, _panoramaHelpers.imageToUri)(_spotIcon.default, img => PANOLENS.DataImage.Spot = img);
+(0, _panoramaHelpers.imageToUri)(_doorIcon.default, img => PANOLENS.DataImage.Door = img);
+
+const getCameraFromSrc = (json, src) => {
+  const cameraIdTimestamp = src.match(/(?<=CameraId)[\s\S]*?(?=\.png)/);
+  const cameraId = "CameraId".concat(cameraIdTimestamp);
+  return json.Floors[0].CameraPoints.find(_ref => {
+    let {
+      ID
+    } = _ref;
+    return ID === cameraId;
+  });
+};
 
 const createPanorama = (image, index, setLoadingState) => {
   const panorama = new PANOLENS.ImagePanorama(image);
@@ -54,11 +77,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;
-    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;
   }, []);
 };
@@ -75,9 +106,18 @@ 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));
 
     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);
     }
 
@@ -92,11 +132,22 @@ 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);
+    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));
@@ -104,26 +155,33 @@ 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 : -50;
+  const icon = isDoorLink ? PANOLENS.DataImage.Door : PANOLENS.DataImage.Spot;
+  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, locationZ, locationY);
+  panorama.link(connectedPanorama, position, finalScale, icon);
+};
+
 const initPanorama = () => {
   let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
   let controls = new _threeDeviceOrientation.default(camera);
@@ -149,12 +207,12 @@ const initPanorama = () => {
   };
 };
 
-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);
@@ -232,10 +290,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/build/components/TabPanes.js

@@ -28,7 +28,6 @@ const TabPanes = (0, _mobxReactLite.observer)(_ref => {
     planImage,
     topView,
     topDownView,
-    panoramaImages,
     rotationImages,
     tabs
   } = _store.default.config;
@@ -46,7 +45,7 @@ const TabPanes = (0, _mobxReactLite.observer)(_ref => {
       icon: null
     },
     'panorama': {
-      img: panoramaImages[0],
+      img: _store.default.hallRoomImage,
       icon: null
     },
     'rotation': {

package/build/store/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.string.includes.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _mobx = require("mobx");
@@ -29,6 +31,39 @@ class Store {
     (0, _mobx.makeAutoObservable)(this);
   }
 
+  get hallRoomId() {
+    const {
+      json
+    } = this.config;
+    if (!json) return 0;
+    const exteriorWallWithDoor = json.Floors[0].ExteriorWalls.find(wallId => {
+      return json.Floors[0].Doors.some(door => door.Walls.some(doorWallId => doorWallId === wallId));
+    });
+    const exteriorDoor = json.Floors[0].Doors.find(door => {
+      const isSameDoor = door.Walls.some(doorWallId => doorWallId === exteriorWallWithDoor);
+      const isExterior = door.Walls.some(doorWallId => json.Floors[0].ExteriorWalls.some(exteriorWallId => exteriorWallId === doorWallId));
+      return isSameDoor && isExterior;
+    });
+    const wallWithExteriorDoor = exteriorDoor.Walls.find(wallId => wallId !== exteriorWallWithDoor);
+    const room = json.Floors[0].Units[0].Rooms.find(_ref => {
+      let {
+        Walls
+      } = _ref;
+      return Walls.some(wallId => wallId === wallWithExteriorDoor);
+    });
+    return room.ID;
+  }
+
+  get hallRoomImage() {
+    const {
+      json,
+      panoramaImages
+    } = this.config;
+    const roomIndex = json.Floors[0].Units[0].Rooms.findIndex(room => room.ID === this.hallRoomId);
+    const image = panoramaImages.find(url => url.includes("".concat(roomIndex, ".png")));
+    return image || panoramaImages[0];
+  }
+
   setConfig(config) {
     this.config = config;
   }

package/build/utils/panoramaHelpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getScale = exports.getRoomCoordinates = exports.findWallVertices = void 0;
+exports.imageToUri = exports.getScale = exports.getRoomCoordinates = exports.findWallVertices = void 0;
 
 require("core-js/modules/es.array.reduce.js");
 
@@ -49,4 +49,21 @@ const getScale = (image, json) => {
   };
 };
 
-exports.getScale = getScale;
+exports.getScale = getScale;
+
+const imageToUri = (url, callback) => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  const image = new Image();
+  image.src = url;
+
+  image.onload = () => {
+    canvas.width = image.width;
+    canvas.height = image.height;
+    ctx.drawImage(image, 0, 0);
+    callback(canvas.toDataURL('image/png'));
+    canvas.remove();
+  };
+};
+
+exports.imageToUri = imageToUri;

package/package.json

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