hart-estate-widget 0.0.8 → 0.0.11

package/README.md

@@ -3,24 +3,79 @@
 
 ## Способ установки с помощью NPM:
 
-### `npm install hart-estate-widget`
+`npm install hart-estate-widget  --save`
 
+## Пример использования:
 
+```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',],
+  tabPanes: true,
+  planImage: '/path/to/plan.jpg',
+  topView: '/path/to/top_view.jpg',
+  topDownView: '/path/to/top_down_view.jpg',
+  rotationImages: [
+    '/path/to/rotation_image_1.jpg',
+    '/path/to/rotation_image_2.jpg',
+    '/path/to/rotation_image_3.jpg',
+    '/path/to/rotation_image_4.jpg',
+    '/path/to/rotation_image_5.jpg',
+  ],
+};
+
+const App = () => {
+  const [widget, setWidget] = useState(null);
+
+  useEffect(() => {
+    const createdWidget = new Widget('#widget-container', WIDGET_OPTIONS);
+
+    setState(createdWidget);
+  }, []);
+  
+  return (
+    <div>
+      <div id="#widget-container" />
+    </div>
+  );
+}
+
+export App;
+
+```
+
+
+## Параметры:
+
+```js
+{
+  // элементы  
+  tabs: ['planImage', 'topView', 'topDownView', 'rotation'], // включенные элементы
+  tabPanes: true,
 
+  // ширина/высота
+  width: 500, 
+  height: 750,
 
-### `const myWidget = new Widget('#container', options);`
+  // значения
+  planImage: '', // путь к изображению планировки
+  topView: '', // путь к изображению вида сверху
+  topDownView: '', // путь к изображению вида сверху под углом
+  rotationImages: [], // пути к изображениям кругового просмотра (порядок обязателен)
+}
 
+```
 
-## Параметры по умолчанию:
+## Типы элементов
+```js
+tabs: [
+  'planImage', // изображение планировки
+  'topView', // изображение вида сверху
+  'topDownView', // изображение вида сверху под углом
+  'rotation', // изображения кругового просмотра (порядок обязателен)
+]
+```
 
-####  `tabs: ['planImage', 'topView', 'topDownView', 'rotation', 'panorama', 'model']` - Элементы, которые необходимо активировать
-####  `tabPanes: true` - Показывать / Скрывать навигационную панель
-####  `width: null` - Ширина компонента (по умолчанию 100%)
-####  `height: null` - Высота компонента (по умолчанию 100vh)
-####  `planImage: ''` - Путь к изображению планировки
-####  `topView: ''` - Путь к изображению модели сверху
-####  `topDownView: ''` - Путь к изображению модели сверху под углом
-####  `rotationImages: []` - Массив изображений для 360 визуализатора
-####  `panoramaImages: []` - Массив изображений сфер для виртуальной панорамы

package/build/api/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadFurnitureData = exports.STAGE_API_URL = exports.API_URL = void 0;
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.array.reduce.js");
+
+const API_URL = 'https://backend.estate.myhart.ru';
+exports.API_URL = API_URL;
+const STAGE_API_URL = 'https://backend-stage.estate.myhart.ru';
+exports.STAGE_API_URL = STAGE_API_URL;
+
+const loadFurnitureData = async furniture => {
+  const furnitureQuery = furniture.reduce((acc, item, i) => acc += "".concat(i === 0 ? '' : ',').concat(item.Model), '');
+  const path = "".concat(API_URL, "/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/loader.sass

@@ -0,0 +1,51 @@
+@import '../vars'
+
+.widget-loader
+  display: block
+  position: relative
+  width: 80px
+  height: 80px
+  &--absolute
+    position: absolute
+    left: 50%
+    top: 50%
+    transform: translate(-50%, -50%)
+  div
+    position: absolute
+    top: 33px
+    width: 13px
+    height: 13px
+    border-radius: 50%
+    background: $mainColor
+    animation-timing-function: cubic-bezier(0, 1, 1, 0)
+    &:nth-child(1)
+      left: 8px
+      animation: widget-loader-1 0.6s infinite
+    &:nth-child(2)
+      left: 8px
+      animation: widget-loader-2 0.6s infinite
+    &:nth-child(3)
+      left: 32px
+      animation: widget-loader-2 0.6s infinite
+    &:nth-child(4)
+      left: 56px
+      animation: widget-loader-3 0.6s infinite
+
+@keyframes widget-loader-1
+  0%
+    transform: scale(0)
+  100%
+    transform: scale(1)
+
+@keyframes widget-loader-3
+  0%
+    transform: scale(1)
+  100%
+    transform: scale(0)
+
+@keyframes widget-loader-2
+  0%
+    transform: translate(0, 0)
+
+  100%
+    transform: translate(24px, 0)

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

@@ -0,0 +1,14 @@
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__model
+      width: 100%
+      height: 100%
+      position: absolute
+      left: 0
+      top: 0
+      &-scene
+        width: 100%
+        height: 100%
+        display: block

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

@@ -0,0 +1,65 @@
+@import '../vars'
+
+.widget-application
+  .widget-tab
+    &__panorama
+      width: 100%
+      height: 100%
+      position: absolute
+      left: 0
+      top: 0
+      &-overlay
+        width: 100%
+        height: 100%
+        overflow: hidden
+      &-mode,
+      &-standart
+        position: absolute
+        right: 15px
+        bottom: 20px
+        color: $black
+        background-color: $mainColor
+        padding: 5px 15px
+        border-radius: 10px
+        font-size: 1rem
+        font-weight: bold
+        border: none
+        cursor: pointer
+        @include noSelect
+        &:hover
+          box-shadow: 1px 1px 10px rgba(0, 0, 0, .15)
+      &-standart
+        right: 100px
+      &-map
+        position: absolute
+        right: 15px
+        bottom: 70px
+        z-index: 10000
+        &--hidden
+          display: none !important
+        img
+          width: 100px
+          border-radius: 10px
+          &.active
+            width: 240px
+          &:hover
+            box-shadow: 1px 1px 10px rgba(0,0,0,0.15)
+        &__dot
+          position: absolute
+          left: 0
+          top: 0
+          transform: translate(-50%, -50%)
+          width: 5px
+          height: 5px
+          background-color: $mainColor
+          border-radius: 50%
+          cursor: pointer
+          z-index: 10
+          &--big
+            border: 2px solid $mainColor
+            box-shadow: inset 0 0 0 2px #ffffff
+            width: 15px
+            height: 15px
+          &--active
+            background-color: red
+            border: 2px solid red

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

@@ -46,3 +46,6 @@ html, body
 
 @import './components/tabs'
 @import './components/instructions'
+@import './components/panorama'
+@import './components/loader'
+@import './components/model'

package/build/components/Application.js

@@ -19,6 +19,10 @@ var _ImageTab = _interopRequireDefault(require("./ImageTab"));
 
 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"));
@@ -69,14 +73,20 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
       title: "Panoramic tour",
       text: ['Use mouse to rotate', 'To move through the rooms, click on the layout thumbnail'],
       onStart: hideTabPanes
-    }, /*#__PURE__*/_react.default.createElement("p", null, "Work in progress")),
+    }, /*#__PURE__*/_react.default.createElement(_PanoramaTab.default, {
+      json: config.json,
+      planImage: config.planImage,
+      images: config.panoramaImages
+    })),
     'model': /*#__PURE__*/_react.default.createElement(_TabWrapper.default, {
       isActive: !isTabPanesVisible,
       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,

package/build/components/Loader.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Loader = _ref => {
+  let {
+    absolute
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-loader ".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));
+};
+
+var _default = Loader;
+exports.default = _default;

package/build/components/ModelTab.js

@@ -0,0 +1,120 @@
+"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"));
+
+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]);
+
+  const getNextWallsMaterialType = () => {
+    if (houseStore.wallsMaterialType === 'texture') return 'color';
+    return 'texture';
+  };
+
+  const onImageUploaded = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    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-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: _ref3 => {
+      let {
+        target
+      } = _ref3;
+      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((_ref4, index) => {
+    let {
+      image,
+      texture
+    } = _ref4;
+    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;