hart-estate-widget 0.0.21 → 0.0.24

package/build/components/ModelTab.js

@@ -109,6 +109,8 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
   }, "View from above"), /*#__PURE__*/_react.default.createElement("li", {
     onClick: () => _modelStore.default.setCurrentControlsType('orbit')
   }, "Free camera"), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => houseStore.setShadowsVisibility(!houseStore.isShadowsVisible)
+  }, "Shadows: ", houseStore.isShadowsVisible ? 'On' : 'Off'), /*#__PURE__*/_react.default.createElement("li", {
     onClick: () => houseStore.setPlanMode()
   }, "Plan"), /*#__PURE__*/_react.default.createElement("li", {
     onClick: () => houseStore.setFullBuildingVisibility(!houseStore.isFullBuildingVisible)

package/build/components/PanoramaTab.js

@@ -23,6 +23,8 @@ var _Loader = _interopRequireDefault(require("./Loader"));
 
 var _panoramaHelpers = require("../utils/panoramaHelpers");
 
+var _geometric = require("geometric");
+
 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); }
@@ -63,21 +65,22 @@ const getPanoramas = (json, images, setLoadingState) => {
 
 const getPanoramaRooms = (json, panoramas) => {
   return panoramas.map((panorama, index) => {
-    let currentRoom = {
-      Type: "Room - ".concat(panorama['panorama_id'])
+    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']);
+    const [left, top] = (0, _geometric.polygonMean)((0, _panoramaHelpers.getRoomCoordinates)(currentRoom, json.Floors[0].Walls, json.Vertices));
 
-    if (json) {
-      currentRoom = json.Floors[0].Units[0].Rooms.find(room => room.ID === panorama['room_id']);
+    if (!panorama.linkedSpots.length) {
+      setPanoramaLinks(json, currentRoom, [left, top], panorama, panoramas);
     }
 
-    const {
-      left,
-      top
-    } = json ? (0, _panoramaHelpers.findRoomCenter)(currentRoom, json.Floors[0].Walls, json.Vertices) : {
-      left: 0,
-      top: 0
-    };
     return {
       type: currentRoom.Type,
       id: index,
@@ -88,6 +91,39 @@ const getPanoramaRooms = (json, panoramas) => {
   }, []);
 };
 
+const setPanoramaLinks = (json, currentRoom, center, panorama, panoramas) => {
+  json.Floors[0].Doors.forEach(_ref => {
+    let {
+      Location,
+      Walls
+    } = _ref;
+    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));
+      const isSameRoom = room.ID === currentRoom.ID;
+      return roomHasSameWall && !isSameRoom;
+    });
+    if (!connectedRoom) return;
+    const connectedPanorama = panoramas.find(_ref2 => {
+      let {
+        room_id
+      } = _ref2;
+      return room_id === connectedRoom.ID;
+    });
+    if (!connectedPanorama) return;
+    const locationX = Location.X - center[0];
+    const locationY = -(Location.Y - center[1]);
+    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);
+  });
+};
+
 const initPanorama = () => {
   let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
   let controls = new _threeDeviceOrientation.default(camera);
@@ -113,12 +149,12 @@ const initPanorama = () => {
   };
 };
 
-const PanoramaTab = _ref => {
+const PanoramaTab = _ref3 => {
   let {
     json,
     planImage,
     images
-  } = _ref;
+  } = _ref3;
   const [menuState, setMenuState] = (0, _react.useState)(false);
   const [loadingState, setLoadingState] = (0, _react.useState)(true);
   const [isMapActive, setMapState] = (0, _react.useState)(false);
@@ -178,6 +214,12 @@ const PanoramaTab = _ref => {
     });
     panoramas.forEach(panorama => {
       if (!panorama.panorama_id) return;
+      panorama.addEventListener('enter', _ref4 => {
+        let {
+          target
+        } = _ref4;
+        return setCurrentRoomIndex(target['panorama_index']);
+      });
       newViewer.add(panorama);
     });
     setViewer(newViewer);

package/build/store/houseStore.js

@@ -35,6 +35,8 @@ var _doorTexture = _interopRequireDefault(require("../assets/img/door-texture.jp
 
 var _exteriorWallTexture = _interopRequireDefault(require("../assets/img/exterior-wall-texture.jpeg"));
 
+var _exteriorWallTextureRoughness = _interopRequireDefault(require("../assets/img/exterior-wall-texture-roughness.jpg"));
+
 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; }
@@ -57,7 +59,10 @@ const doorMaterialOptions = {
 };
 const modelLoader = new _FBXLoader.FBXLoader();
 
-const createDefaultMaterial = options => new THREE.MeshPhongMaterial(options);
+const createDefaultMaterial = options => new THREE.MeshStandardMaterial(_objectSpread({
+  roughness: 1,
+  metalness: 0
+}, options));
 
 class HouseStore {
   constructor(modelStore) {
@@ -77,6 +82,11 @@ class HouseStore {
 
     _defineProperty(this, "wallsColor", '#FFFFFF');
 
+    _defineProperty(this, "exteriorWallsMaps", {
+      map: null,
+      roughnessMap: null
+    });
+
     _defineProperty(this, "exteriorWallsMaterial", null);
 
     _defineProperty(this, "wallsTextures", []);
@@ -97,6 +107,8 @@ class HouseStore {
 
     _defineProperty(this, "loadedTextures", {});
 
+    _defineProperty(this, "isShadowsVisible", true);
+
     (0, _mobx.makeAutoObservable)(this);
     this.modelStore = modelStore;
     this.houseGroup.name = 'House-Group';
@@ -268,15 +280,28 @@ class HouseStore {
         side: THREE.DoubleSide
       });
       const mesh = new THREE.Mesh(geometry, material);
+      mesh.receiveShadow = true;
+      mesh.castShadow = false;
       mesh.name = 'FloorMesh';
-      this.loadTexture(params.texture, [0.5, 0.5], texture => {
+
+      const callback = (texture, roughnessMap) => {
         const textureMaterial = createDefaultMaterial({
           color: params.color,
           side: THREE.DoubleSide,
           map: texture
         });
         mesh.material = textureMaterial;
+        if (roughnessMap) mesh.material.roughnessMap = roughnessMap;
         this.houseGroup.add(mesh);
+      };
+
+      this.loadTexture(params.texture, [0.5, 0.5], texture => {
+        if (!params.roughnessMap) {
+          callback(texture);
+          return;
+        }
+
+        this.loadTexture(params.roughnessMap, [0.5, 0.5], roughnessMap => callback(texture, roughnessMap));
       });
     });
     return this;
@@ -319,6 +344,8 @@ class HouseStore {
     const clippedMesh = new THREE.Mesh(clippedGeometry, clippedMaterial);
     const flatMesh = new THREE.Mesh(flatGeometry, material);
     const mesh = new THREE.Mesh(geometry, material);
+    flatMesh.receiveShadow = false;
+    flatMesh.castShadow = false;
     clippedMesh.position.z = -0.005;
     flatMesh.position.z = -0.005;
     mesh.position.z = -0.001;
@@ -328,6 +355,10 @@ class HouseStore {
     clippedMeshWithApertures.name = 'ClippedSpaceBetweenWalls';
     meshWithApertures.name = 'SpaceBetweenWalls';
     flatMesh.name = 'FlatSpaceBetweenWalls';
+    clippedMeshWithApertures.receiveShadow = false;
+    clippedMeshWithApertures.castShadow = false;
+    meshWithApertures.receiveShadow = false;
+    meshWithApertures.castShadow = false;
     this.houseGroup.add(flatMesh, clippedMeshWithApertures, meshWithApertures);
     return this;
   }
@@ -360,10 +391,18 @@ class HouseStore {
       const wallMesh = this.subtractApertures(new THREE.Mesh(wallGeometry, wallMaterial), apertures);
       const wallPadMesh = new THREE.Mesh(wallPadGeometry, wallPadMaterial);
       const wallClippedPadMesh = new THREE.Mesh(wallPadGeometry, wallClippedPadMaterial);
+      wallMesh.castShadow = true;
+      wallMesh.receiveShadow = !isExterior;
+      wallPadMesh.castShadow = false;
+      wallPadMesh.receiveShadow = false;
+      wallClippedPadMesh.castShadow = false;
+      wallClippedPadMesh.receiveShadow = false;
       wallPadMesh.position.z = this.wallsHeight;
       wallClippedPadMesh.position.z = (this.wallsHeight + 0.5) * clippedBuildingConstant + 0.001;
       const wallClippedPadMeshWithApertures = this.subtractApertures(wallClippedPadMesh, apertures);
       wallClippedPadMeshWithApertures.visible = false;
+      wallClippedPadMeshWithApertures.castShadow = false;
+      wallClippedPadMeshWithApertures.receiveShadow = false;
       const wallGroup = new THREE.Group();
       wallGroup.name = 'Wall';
       wallGroup.buildingId = wallId;
@@ -372,6 +411,11 @@ class HouseStore {
       this.wallsGroup.add(wallGroup);
     };
 
+    this.exteriorWallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+      map: this.exteriorWallsMaps.map,
+      roughnessMap: this.exteriorWallsMaps.roughnessMap,
+      color: '#FFFFFF'
+    }));
     this.rooms.forEach(_ref7 => {
       let {
         Walls
@@ -396,6 +440,8 @@ class HouseStore {
       mesh.position.y = Location.Y * this.sceneScale;
       mesh.position.z = this.doorsHeight / 2;
       mesh.rotation.z = THREE.Math.degToRad(Rotation.Yaw);
+      mesh.receiveShadow = true;
+      mesh.castShadow = true;
       this.doorsGroup.add(mesh);
     });
     this.houseGroup.add(this.doorsGroup);
@@ -444,7 +490,60 @@ class HouseStore {
       maxY,
       minY
     } = (0, _modelHelpers.getMinMaxCoordinates)(walls);
-    this.houseGroup.position.set(-(maxX + minX) / 2, -(maxY + minY) / 2);
+    const centerX = (maxX + minX) / 2;
+    const centerY = (maxY + minY) / 2;
+    const lightsOffset = 25;
+    this.houseGroup.position.set(-centerX, -centerY);
+    const lights = [{
+      x: centerX - lightsOffset,
+      y: centerY - lightsOffset,
+      z: this.wallsHeight * 3,
+      power: 0.4,
+      castShadow: true
+    }, {
+      x: centerX - lightsOffset,
+      y: centerY - lightsOffset,
+      z: this.wallsHeight * 2,
+      power: 1,
+      castShadow: false
+    }, {
+      x: centerX + lightsOffset,
+      y: centerY + lightsOffset,
+      z: this.wallsHeight * 2,
+      power: 1.1,
+      castShadow: false
+    }, {
+      x: centerX,
+      y: centerY,
+      z: this.wallsHeight * 5,
+      power: 0.1,
+      castShadow: false
+    }];
+    const targetObject = new THREE.Object3D();
+    targetObject.position.set(centerX, centerY, 0);
+    this.houseGroup.add(targetObject);
+    lights.forEach(_ref10 => {
+      let {
+        x,
+        y,
+        z,
+        power,
+        castShadow
+      } = _ref10;
+      const light = new THREE.DirectionalLight(0xffffff, power);
+      light.position.set(x, y, z);
+      light.shadowLight = castShadow;
+      light.castShadow = castShadow;
+      light.shadow.camera.left = -centerX * 2;
+      light.shadow.camera.right = centerX * 2;
+      light.shadow.camera.top = centerY * 2;
+      light.shadow.camera.bottom = -centerY * 2;
+      light.shadow.camera.zoom = 1;
+      light.shadow.mapSize = new THREE.Vector2(2048, 2048);
+      light.shadow.normalBias = 1;
+      light.target = targetObject;
+      this.houseGroup.add(light);
+    });
     return this;
   }
 
@@ -480,10 +579,17 @@ class HouseStore {
           image: _exteriorWallTexture.default,
           texture: texture
         });
-        this.exteriorWallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
-          map: texture,
-          color: '#FFFFFF'
-        }));
+        this.exteriorWallsMaps.map = texture;
+      }
+    }, {
+      img: _exteriorWallTextureRoughness.default,
+      repeat: [1, 1],
+      callback: texture => {
+        this.wallsTextures.push({
+          image: _exteriorWallTextureRoughness.default,
+          texture: texture
+        });
+        this.exteriorWallsMaps.roughnessMap = texture;
       }
     }, {
       img: _doorTexture.default,
@@ -494,12 +600,12 @@ class HouseStore {
         }));
       }
     }];
-    return Promise.all(assets.map(_ref10 => {
+    return Promise.all(assets.map(_ref11 => {
       let {
         img,
         repeat,
         callback
-      } = _ref10;
+      } = _ref11;
       return new Promise(resolve => {
         this.loadTexture(img, repeat, texture => {
           callback(texture);
@@ -542,31 +648,31 @@ class HouseStore {
     });
 
     const onTexturesLoaded = (result, model) => {
-      const materialsCount = result.reduce((acc, _ref11) => {
+      const materialsCount = result.reduce((acc, _ref12) => {
         let {
           image
-        } = _ref11;
+        } = _ref12;
         if (!image.currentSrc.includes('_D.') && !image.currentSrc.includes('_DA.')) return acc;
         return acc += 1;
       }, 0);
 
       const createMaterial = num => {
-        const map = result.find(_ref12 => {
+        const map = result.find(_ref13 => {
           let {
             image
-          } = _ref12;
+          } = _ref13;
           return image.currentSrc.includes("".concat(num, "_D.")) || image.currentSrc.includes("".concat(num, "_DA."));
         });
-        const envMap = result.find(_ref13 => {
+        const envMap = result.find(_ref14 => {
           let {
             image
-          } = _ref13;
+          } = _ref14;
           return image.currentSrc.includes("".concat(num, "_RMO."));
         });
-        const normalMap = result.find(_ref14 => {
+        const normalMap = result.find(_ref15 => {
           let {
             image
-          } = _ref14;
+          } = _ref15;
           return image.currentSrc.includes("".concat(num, "_N."));
         });
         const material = new THREE.MeshStandardMaterial({
@@ -601,7 +707,11 @@ class HouseStore {
       }
 
       model.traverse(node => {
-        if (node.isMesh) node.material = materials;
+        if (node.isMesh) {
+          node.material = materials;
+          node.receiveShadow = true;
+          node.castShadow = true;
+        }
       });
       this.houseGroup.add(model);
       this.loadFurniture(index + 1);
@@ -639,6 +749,16 @@ class HouseStore {
   } // Actions
 
 
+  setShadowsVisibility(value) {
+    this.isShadowsVisible = value;
+    this.houseGroup.children.forEach(node => {
+      const isLight = node instanceof THREE.DirectionalLight;
+      if (!isLight) return;
+      if (!node.shadowLight) return;
+      node.castShadow = value;
+    });
+  }
+
   setDoorsVisibility(value) {
     this.isDoorsVisible = value;
     this.doorsGroup.children.forEach(door => door.visible = value);
@@ -646,11 +766,11 @@ class HouseStore {
 
   setCurrentWallsMaterialType(value) {
     this.wallsMaterialType = value;
-    this.wallsGroup.children.forEach(_ref15 => {
+    this.wallsGroup.children.forEach(_ref16 => {
       let {
         children,
         isExterior
-      } = _ref15;
+      } = _ref16;
       const wall = children[0];
 
       if (value === 'texture') {
@@ -676,11 +796,11 @@ class HouseStore {
   setCurrentWallColor(color) {
     this.wallsColor = color;
     this.wallsMaterial.color.set(color);
-    this.wallsGroup.children.forEach(_ref16 => {
+    this.wallsGroup.children.forEach(_ref17 => {
       let {
         children,
         isExterior
-      } = _ref16;
+      } = _ref17;
       if (isExterior) return;
       const wall = children[0];
       wall.material.color.set(color);
@@ -707,10 +827,10 @@ class HouseStore {
   setFullBuildingVisibility(value) {
     this.isFullBuildingVisible = value;
     this.globalPlane.constant = this.isFullBuildingVisible ? 1 : clippedBuildingConstant;
-    this.wallsGroup.children.forEach(_ref17 => {
+    this.wallsGroup.children.forEach(_ref18 => {
       let {
         children
-      } = _ref17;
+      } = _ref18;
       return children[2].visible = !value;
     });
   }

package/build/store/modelStore.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.promise.js");
+
 require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireDefault(require("react"));
@@ -92,25 +94,30 @@ class ModelStore {
 
     _defineProperty(this, "createScene", () => {
       this.scene = new THREE.Scene();
-      const light = new THREE.AmbientLight(0xffffff);
       this.scene.rotation.x = -Math.PI / 2;
       this.scene.scale.y = -1;
-      this.scene.background = new THREE.Color('#FAFAFA');
-      this.scene.add(light);
+      this.scene.background = new THREE.Color('#E7E7E7');
+      this.scene.fog = new THREE.Fog('#E7E7E7', 5, 200);
       this.createGround();
       return this;
     });
 
     _defineProperty(this, "createGround", () => {
-      this.textureLoader.load(_grass.default, texture => {
-        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-        texture.repeat.set(70, 70);
-        let groundMaterial = new THREE.MeshBasicMaterial({
-          map: texture,
-          color: 'rgb(255,255,255)'
+      const textures = {};
+      const assets = [new Promise(resolve => this.loadTexture(_grass.default, [75, 75], texture => {
+        textures.map = texture;
+        resolve();
+      }))];
+      Promise.all(assets).then(() => {
+        let groundMaterial = new THREE.MeshStandardMaterial({
+          map: textures.map,
+          normalMap: textures.normalMap,
+          envMap: textures.envMap,
+          color: 0xe7e7e7
         });
-        let groundMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(300, 300), groundMaterial);
+        let groundMesh = new THREE.Mesh(new THREE.CircleGeometry(250, 100), groundMaterial);
         groundMesh.position.z = -0.01;
+        groundMesh.receiveShadow = true;
         this.scene.add(groundMesh);
       });
       return this;
@@ -121,6 +128,8 @@ class ModelStore {
       this.renderer.setPixelRatio(window.devicePixelRatio);
       this.updateRendererSize();
       this.renderer.localClippingEnabled = true;
+      this.renderer.shadowMap.enabled = true;
+      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
       return this;
     });
 
@@ -253,6 +262,17 @@ class ModelStore {
     return ((_this$container2 = this.container) === null || _this$container2 === void 0 ? void 0 : _this$container2.offsetHeight) || window.innerHeight;
   }
 
+  loadTexture(img) {
+    let repeat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
+    let callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
+    this.textureLoader.load(img, texture => {
+      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+      texture.repeat.set(repeat[0], repeat[1]);
+      texture.flipY = false;
+      callback(texture);
+    });
+  }
+
 }
 
 var _default = new ModelStore();

package/build/utils/modelHelpers.js

@@ -28,18 +28,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const FloorParams = {
   'default': {
     texture: _floorDark.default,
+    roughnessMap: null,
     color: '#FFFFFF'
   },
   'Kitchen': {
     texture: _floorWhite.default,
+    roughnessMap: null,
     color: '#FFFFFF'
   },
   'Balcony': {
     texture: _floor.default,
+    roughnessMap: null,
     color: '#DADADA'
   },
   'Bathroom': {
     texture: _floorBathroom.default,
+    roughnessMap: null,
     color: '#FFFFFF'
   }
 };

package/build/utils/panoramaHelpers.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getVerticesLocations = exports.getScale = exports.findWallVertices = exports.findRoomCenter = exports.findMinMaxCoordinates = void 0;
+exports.getScale = exports.getRoomCoordinates = exports.findWallVertices = void 0;
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.reduce.js");
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,59 +13,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const findWallVertices = (walls, wall, vertices) => {
   const currentWall = walls.find(el => el.ID === wall);
-  return currentWall.Vertices.map(vertex => vertices.find(el => el.ID === vertex));
-};
-
-exports.findWallVertices = findWallVertices;
-
-const getVerticesLocations = vertices => vertices.map(vertex => vertex.Location);
-
-exports.getVerticesLocations = getVerticesLocations;
-
-const findMinMaxCoordinates = (room, walls, vertices) => {
-  let maxX = 0;
-  let minX = Infinity;
-  let maxY = 0;
-  let minY = Infinity;
-  room.Walls.forEach(wall => {
-    const [coord1, coord2] = getVerticesLocations(findWallVertices(walls, wall, vertices)); // CALCULATE MAX COORDS
-
-    if (coord1.X > maxX) maxX = coord1.X;
-    if (coord1.X > maxX) maxX = coord1.X;
-    if (coord2.Y > maxY) maxY = coord2.Y;
-    if (coord2.Y > maxY) maxY = coord2.Y; // CALCULATE MIN COORDS
-
-    if (coord1.X < minX) minX = coord1.X;
-    if (coord1.X < minX) minX = coord1.X;
-    if (coord2.Y < minY) minY = coord2.Y;
-    if (coord2.Y < minY) minY = coord2.Y;
+  return currentWall.Vertices.map(vertexId => {
+    const vertex = vertices.find(el => el.ID === vertexId);
+    return [vertex.Location.X, vertex.Location.Y];
   });
-  return {
-    maxX,
-    minX,
-    maxY,
-    minY
-  };
 };
 
-exports.findMinMaxCoordinates = findMinMaxCoordinates;
+exports.findWallVertices = findWallVertices;
 
-const findRoomCenter = (room, walls, vertices) => {
-  const {
-    maxX,
-    minX,
-    maxY,
-    minY
-  } = findMinMaxCoordinates(room, walls, vertices);
-  const left = (maxX + minX) / 2;
-  const top = (maxY + minY) / 2;
-  return {
-    left,
-    top
-  };
+const getRoomCoordinates = (room, walls, vertices) => {
+  const points = room.Walls.reduce((acc, wallId) => {
+    const wall = walls.find(wallObject => wallObject.ID === wallId);
+    findWallVertices(walls, wall.ID, vertices).forEach(vertex => acc.push(vertex));
+    return acc;
+  }, []);
+  return points;
 };
 
-exports.findRoomCenter = findRoomCenter;
+exports.getRoomCoordinates = getRoomCoordinates;
 
 const getScale = (image, json) => {
   if (!json) return {

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.21",
+  "version": "0.0.24",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
@@ -20,6 +20,7 @@
   "dependencies": {
     "camera-controls": "^1.34.1",
     "core-js": "^3.21.0",
+    "geometric": "^2.2.10",
     "hold-event": "^0.1.0",
     "mobx": "^6.3.13",
     "mobx-react-lite": "^3.2.3",