hart-estate-widget 0.0.9 → 0.0.12

package/README.md

@@ -10,6 +10,7 @@
 ```js
 import React, { useEffect, useState } from 'react';
 import { Widget } from 'hart-estate-widget';
+import 'hart-estate-widget/build/index.css';
 
 const WIDGET_OPTIONS = {
   tabs: ['planImage', 'topView', 'topDownView', 'rotation',],

package/build/api/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadFurnitureData = exports.STAGE_API_URL = exports.PRODUCTION_API_URL = void 0;
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.array.reduce.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PRODUCTION_API_URL = 'https://backend.estate.myhart.ru';
+exports.PRODUCTION_API_URL = PRODUCTION_API_URL;
+const STAGE_API_URL = 'https://backend-stage.estate.myhart.ru';
+exports.STAGE_API_URL = STAGE_API_URL;
+const API_URL = {
+  'production': PRODUCTION_API_URL,
+  'stage': STAGE_API_URL
+};
+
+const loadFurnitureData = async function loadFurnitureData(furniture) {
+  let env = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'production';
+  const furnitureQuery = furniture.reduce((acc, item, i) => acc += "".concat(i === 0 ? '' : ',').concat(item.Model), '');
+  const path = "".concat(API_URL[env], "/api/furniture?only=").concat(furnitureQuery);
+  const response = await fetch(path);
+  return await response.json();
+};
+
+exports.loadFurnitureData = loadFurnitureData;

package/build/assets/img/ground.svg

@@ -0,0 +1,9 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="125" height="125" fill="white"/>
+<rect x="125" y="125" width="125" height="125" fill="white"/>
+<rect y="125" width="125" height="125" fill="black"/>
+<rect x="125" width="125" height="125" fill="black"/>
+<rect x="124" width="2" height="250" fill="#00A3FF"/>
+<rect y="126" width="2" height="250" transform="rotate(-90 0 126)" fill="#00A3FF"/>
+<rect x="0.5" y="0.5" width="249" height="249" stroke="#00A3FF"/>
+</svg>

package/build/assets/sass/animation.sass

@@ -0,0 +1,5 @@
+@keyframes fadeIn
+  0%
+    opacity: 0
+  100%
+    opacity: 1

package/build/assets/sass/components/instructions.sass

@@ -48,3 +48,6 @@
         cursor: pointer
         border: none
         padding: 10px 5px
+        &:disabled
+          opacity: .75
+          cursor: not-allowed

package/build/assets/sass/components/loader.sass

@@ -10,6 +10,8 @@
     left: 50%
     top: 50%
     transform: translate(-50%, -50%)
+  &--sm
+    transform: translate(-50%, -50%) scale(.75)
   div
     position: absolute
     top: 33px

package/build/assets/sass/components/model.sass

@@ -0,0 +1,26 @@
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__model
+      width: 100%
+      height: 100%
+      position: absolute
+      left: 0
+      top: 0
+      &-scene
+        width: 100%
+        height: 100%
+        display: block
+      &-joystick
+        position: absolute
+        left: 100px
+        bottom: 100px
+        opacity: 0
+        pointer-events: none
+        @media #{$mobile}
+          left: 50%
+          transform: translateX(-50%)
+        &--active
+          opacity: 1
+          pointer-events: unset

package/build/assets/sass/components/panorama.sass

@@ -35,11 +35,15 @@
         right: 15px
         bottom: 70px
         z-index: 10000
+        &--hidden
+          display: none !important
         img
           width: 100px
           border-radius: 10px
+          cursor: zoom-in
           &.active
             width: 240px
+            cursor: zoom-out
           &:hover
             box-shadow: 1px 1px 10px rgba(0,0,0,0.15)
         &__dot
@@ -61,38 +65,3 @@
           &--active
             background-color: red
             border: 2px solid red
-      &-menu
-        position: absolute
-        z-index: 3
-        left: 15px
-        top: 15px
-        max-height: 100%
-        overflow-y: auto
-        padding-bottom: 30px
-        ul
-          list-style-type: none
-          li
-            color: $black
-            background-color: $mainColor
-            padding: 5px 15px
-            border-radius: 10px
-            font-size: .8rem
-            border: none
-            cursor: pointer
-            margin-bottom: 15px
-            width: 150px
-            @include noSelect
-            &:hover
-              box-shadow: 1px 1px 10px rgba(0, 0, 0, .15)
-            &:nth-child(1)
-              position: relative
-              &::after
-                content: '|||'
-                transform: translateY(-50%) rotate(90deg)
-                font-size: 20px
-                line-height: 20px
-                margin-left: 10px
-                display: block
-                position: absolute
-                right: 10px
-                top: 50%

package/build/assets/sass/components/tabs.sass

@@ -48,6 +48,72 @@
         height: 100%
         object-fit: cover
 
+    &-menu
+      position: absolute
+      z-index: 3
+      left: 15px
+      top: 15px
+      max-height: 100%
+      overflow-y: auto
+      padding-bottom: 30px
+      &__wallpapers
+        display: flex
+        flex-wrap: wrap
+        align-items: flex-start
+        margin-top: 10px
+        width: 100%
+        img
+          width: 30px
+          height: 30px
+          display: block
+          object-fit: cover
+          cursor: pointer
+          margin-right: 10px
+          margin-block-end: 10px
+      ul
+        list-style-type: none
+        li
+          color: $black
+          background-color: $mainColor
+          padding: 5px 15px
+          border-radius: 10px
+          font-size: .8rem
+          border: none
+          cursor: pointer
+          margin-bottom: 15px
+          width: 200px
+          @include noSelect
+          label
+            display: flex
+            cursor: inherit
+            width: 100%
+          input
+            &[type=color]
+              cursor: pointer
+              margin-left: auto
+              width: 50px
+              height: 20px
+              border: 0
+              border-radius: 5px
+              &::-webkit-color-swatch-wrapper
+                display: none !important
+            &[type=file]
+              display: none
+          &:hover
+            box-shadow: 1px 1px 10px rgba(0, 0, 0, .15)
+          &:nth-child(1)
+            position: relative
+            &::after
+              content: '|||'
+              transform: translateY(-50%) rotate(90deg)
+              font-size: 20px
+              line-height: 20px
+              margin-left: 10px
+              display: block
+              position: absolute
+              right: 10px
+              top: 50%
+
   .widget-tab-panes
     position: absolute
     z-index: 3

package/build/assets/sass/index.sass

@@ -48,3 +48,4 @@ html, body
 @import './components/instructions'
 @import './components/panorama'
 @import './components/loader'
+@import './components/model'

package/build/components/Application.js

@@ -21,6 +21,8 @@ var _RotationTab = _interopRequireDefault(require("./RotationTab"));
 
 var _PanoramaTab = _interopRequireDefault(require("./PanoramaTab"));
 
+var _ModelTab = _interopRequireDefault(require("./ModelTab"));
+
 var _TabWrapper = _interopRequireDefault(require("./TabWrapper"));
 
 var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
@@ -48,16 +50,20 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
 
   const tabsList = {
     'planImage': /*#__PURE__*/_react.default.createElement(_ImageTab.default, {
-      image: config.planImage
+      image: config.planImage,
+      alt: "plan-view"
     }),
     'topView': /*#__PURE__*/_react.default.createElement(_ImageTab.default, {
-      image: config.topView
+      image: config.topView,
+      alt: "top-view"
     }),
     'topDownView': /*#__PURE__*/_react.default.createElement(_ImageTab.default, {
-      image: config.topDownView
+      image: config.topDownView,
+      alt: "top-down-view"
     }),
     'rotation': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
       isActive: !isTabPanesVisible,
+      disabled: !config.rotationImages[0],
       image: config.rotationImages[0],
       title: "360\xB0 overview",
       text: ['Use mouse to rotate', 'Shift + LMB to move'],
@@ -67,6 +73,7 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     })),
     'panorama': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
       isActive: !isTabPanesVisible,
+      disabled: !config.panoramaImages[0],
       image: config.panoramaImages[0],
       title: "Panoramic tour",
       text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
@@ -78,11 +85,14 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     })),
     'model': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
       isActive: !isTabPanesVisible,
+      disabled: !config.json,
       image: _D.default,
       title: "3D Model",
       text: ['Use mouse to rotate', 'Use the right mouse button to move'],
       onStart: hideTabPanes
-    }, /*#__PURE__*/_react.default.createElement("p", null, "Work in progress"))
+    }, /*#__PURE__*/_react.default.createElement(_ModelTab.default, {
+      json: config.json
+    }))
   };
   const appStyle = {
     width,
@@ -97,6 +107,10 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
     window.addEventListener('resize', setWindowHeight);
     setWindowHeight();
   }, []);
+  (0, _react.useEffect)(() => {
+    if (config.tabs.some(tab => tab === currentTab)) return;
+    setCurrentTab(config.tabs[0]);
+  }, [config, currentTab]);
   return /*#__PURE__*/_react.default.createElement("main", {
     className: "widget-application",
     style: appStyle

package/build/components/ImageTab.js

@@ -11,12 +11,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ImageTab = _ref => {
   let {
-    image
+    image,
+    alt
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("img", {
     className: "widget-tab__image",
     src: image,
-    alt: "plan-view"
+    alt: alt
   });
 };
 

package/build/components/Instructions.js

@@ -13,6 +13,7 @@ const Instructions = _ref => {
   let {
     title,
     text,
+    disabled,
     onClick
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -28,6 +29,7 @@ const Instructions = _ref => {
   }, row))), /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-instructions__footer"
   }, /*#__PURE__*/_react.default.createElement("button", {
+    disabled: disabled,
     onClick: onClick,
     type: "button"
   }, "Start"))));

package/build/components/Loader.js

@@ -11,10 +11,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Loader = _ref => {
   let {
-    absolute
+    absolute,
+    size = 'lg'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-loader ".concat(absolute ? 'widget-loader--absolute' : '')
+    className: "widget-loader widget-loader--".concat(size, " ").concat(absolute ? 'widget-loader--absolute' : '')
   }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null));
 };
 

package/build/components/ModelTab.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReactLite = require("mobx-react-lite");
+
+var _modelStore = _interopRequireDefault(require("../store/modelStore"));
+
+var _modelHelpers = require("../utils/modelHelpers");
+
+var _nipplejs = _interopRequireDefault(require("nipplejs"));
+
+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 ModelTab = (0, _mobxReactLite.observer)(_ref => {
+  let {
+    json
+  } = _ref;
+  const [menuState, setMenuState] = (0, _react.useState)(false);
+  const {
+    houseStore
+  } = _modelStore.default;
+  (0, _react.useEffect)(() => {
+    const container = document.querySelector('.widget-tab__model-scene');
+    container.appendChild(_modelStore.default.renderer.domElement);
+
+    _modelStore.default.setCurrentControlsType('orbit');
+
+    if (_modelStore.default.initialized) {
+      _modelStore.default.houseStore.setDoorsVisibility(true);
+
+      _modelStore.default.houseStore.setFullBuildingVisibility(true);
+
+      _modelStore.default.houseStore.setCurrentWallsMaterialType('texture');
+
+      return;
+    }
+
+    _modelStore.default.init(json);
+  }, [json]);
+  (0, _react.useEffect)(() => {
+    const joystick = _nipplejs.default.create({
+      zone: document.querySelector('.widget-tab__model-joystick'),
+      color: '#F4C833',
+      mode: 'static',
+      position: {
+        left: '50%',
+        top: '50%'
+      }
+    });
+
+    joystick.on('start', () => _modelStore.default.setJoystickState(true));
+    joystick.on('end', () => _modelStore.default.setJoystickState(false));
+    joystick.on('move', (_, _ref2) => {
+      let {
+        angle
+      } = _ref2;
+      const directions = (0, _modelHelpers.getDirectionsFromDegrees)(angle.degree);
+
+      _modelStore.default.setJoystickDirections(directions);
+    });
+  }, []);
+
+  const getNextWallsMaterialType = () => {
+    if (houseStore.wallsMaterialType === 'texture') return 'color';
+    return 'texture';
+  };
+
+  const onImageUploaded = _ref3 => {
+    let {
+      target
+    } = _ref3;
+    if (!target.files.length) return;
+    const reader = new FileReader();
+
+    reader.onload = e => houseStore.addWallTexture(e.target.result);
+
+    reader.readAsDataURL(target.files[0]);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__model"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__model-scene"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__model-joystick \n          ".concat(_modelStore.default.currentControlsType === 'wasd' ? 'widget-tab__model-joystick--active' : '')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab-menu"
+  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => setMenuState(!menuState)
+  }, "Menu"), menuState && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => _modelStore.default.setCurrentControlsType('wasd')
+  }, "WASD"), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => _modelStore.default.setCurrentControlsType('plan')
+  }, "View from above"), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => _modelStore.default.setCurrentControlsType('orbit')
+  }, "Free camera"), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => houseStore.setPlanMode()
+  }, "Plan"), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => houseStore.setFullBuildingVisibility(!houseStore.isFullBuildingVisible)
+  }, houseStore.isFullBuildingVisible ? 'Hide walls' : 'Show walls'), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => houseStore.setDoorsVisibility(!houseStore.isDoorsVisible)
+  }, houseStore.isDoorsVisible ? 'Hide doors' : 'Show doors'), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: () => houseStore.setCurrentWallsMaterialType(getNextWallsMaterialType())
+  }, "Material: ", houseStore.wallsMaterialType === 'texture' ? 'Texture' : 'Color'), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("label", null, "Wall color:", /*#__PURE__*/_react.default.createElement("input", {
+    type: "color",
+    onChange: _ref4 => {
+      let {
+        target
+      } = _ref4;
+      return houseStore.setCurrentWallColor(target.value);
+    },
+    style: {
+      background: houseStore.wallsColor
+    },
+    value: houseStore.wallsColor
+  }))), /*#__PURE__*/_react.default.createElement("li", null, "Wall texture:", /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab-menu__wallpapers"
+  }, houseStore && houseStore.wallsTextures.map((_ref5, index) => {
+    let {
+      image,
+      texture
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement("img", {
+      key: index,
+      src: image,
+      onClick: () => houseStore.setCurrentWallTexture(texture),
+      alt: "texture=".concat(index)
+    });
+  }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("label", null, "Upload wall texture", /*#__PURE__*/_react.default.createElement("input", {
+    onChange: onImageUploaded,
+    type: "file",
+    accept: ".jpg, .jpeg, .png"
+  })))))));
+});
+var _default = ModelTab;
+exports.default = _default;

package/build/components/PanoramaTab.js

@@ -21,7 +21,7 @@ var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orien
 
 var _Loader = _interopRequireDefault(require("./Loader"));
 
-var _helpers = require("../utils/helpers");
+var _panoramaHelpers = require("../utils/panoramaHelpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,40 +35,49 @@ const {
 } = PANOLENS.CONTROLS;
 const pathName = 'Panorama_0_0_';
 
+const createPanorama = (image, index, setLoadingState) => {
+  const panorama = new PANOLENS.ImagePanorama(image);
+  panorama['panorama_id'] = index + 1;
+  panorama.addEventListener('progress', event => {
+    setLoadingState(true);
+
+    if (event.progress.loaded / event.progress.total * 100 === 100) {
+      setLoadingState(false);
+    }
+  });
+  panorama.addEventListener('enter', () => setLoadingState(false));
+  return panorama;
+};
+
 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 = new PANOLENS.ImagePanorama(image);
-    panorama['panorama_id'] = index + 1;
+    const panorama = createPanorama(image, index, setLoadingState);
     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']);
+    let currentRoom = {
+      Type: "Room - ".concat(panorama['panorama_id'])
+    };
+
+    if (json) {
+      currentRoom = json.Floors[0].Units[0].Rooms.find(room => room.ID === panorama['room_id']);
+    }
+
     const {
       left,
       top
-    } = (0, _helpers.findRoomCenter)(currentRoom, Walls, Vertices);
+    } = json ? (0, _panoramaHelpers.findRoomCenter)(currentRoom, json.Floors[0].Walls, json.Vertices) : {
+      left: 0,
+      top: 0
+    };
     return {
       type: currentRoom.Type,
       id: index,
@@ -92,6 +101,8 @@ const initPanorama = () => {
     controls.update();
   };
 
+  animate();
+
   if (DeviceOrientationEvent.requestPermission) {
     DeviceOrientationEvent.requestPermission().catch(() => console.log('Device motion not allowed'));
   }
@@ -119,6 +130,7 @@ const PanoramaTab = _ref => {
     X: 1,
     Y: 1
   });
+  const isMapDisabled = !json;
 
   const changePanorama = (panorama, index) => {
     setCurrentRoomIndex(index);
@@ -147,7 +159,7 @@ const PanoramaTab = _ref => {
 
   const setScale = () => {
     const image = document.querySelector('.widget-tab__panorama-map img');
-    setPlanScale((0, _helpers.getScale)(image, json));
+    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
   };
 
   const getDotClassName = index => {
@@ -179,20 +191,20 @@ const PanoramaTab = _ref => {
   }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     absolute: true
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__panorama-menu"
+    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"
+    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", {
+  }), !isMapDisabled && panoramaRooms.map((room, index) => /*#__PURE__*/_react.default.createElement("div", {
     key: index,
     style: {
       left: "".concat(room.left * planScale.X, "px"),