hart-estate-widget 0.0.6 → 0.0.10

package/README.md

@@ -1,7 +1,81 @@
-# Компонент HART Estate
+# Компонент HART Estate Widget
 
-## Список доступных команд
 
-### `npm start` - запуск приложения
+## Способ установки с помощью NPM:
+
+`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,
+
+  // значения
+  planImage: '', // путь к изображению планировки
+  topView: '', // путь к изображению вида сверху
+  topDownView: '', // путь к изображению вида сверху под углом
+  rotationImages: [], // пути к изображениям кругового просмотра (порядок обязателен)
+}
+
+```
+
+## Типы элементов
+```js
+tabs: [
+  'planImage', // изображение планировки
+  'topView', // изображение вида сверху
+  'topDownView', // изображение вида сверху под углом
+  'rotation', // изображения кругового просмотра (порядок обязателен)
+]
+```
 
-### `npm run build` - билд приложения

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,98 @@
+@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
+        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
+      &-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/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/{Application.js → components/Application.js}

@@ -11,17 +11,21 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobxReactLite = require("mobx-react-lite");
 
-var _store = _interopRequireDefault(require("./store"));
+var _store = _interopRequireDefault(require("../store"));
 
-var _TabPanes = _interopRequireDefault(require("./components/TabPanes"));
+var _TabPanes = _interopRequireDefault(require("./TabPanes"));
 
-var _ImageTab = _interopRequireDefault(require("./components/ImageTab"));
+var _ImageTab = _interopRequireDefault(require("./ImageTab"));
 
-var _RotationTab = _interopRequireDefault(require("./components/RotationTab"));
+var _RotationTab = _interopRequireDefault(require("./RotationTab"));
 
-var _TabWrapper = _interopRequireDefault(require("./components/TabWrapper"));
+var _PanoramaTab = _interopRequireDefault(require("./PanoramaTab"));
 
-var _D = _interopRequireDefault(require("./assets/img/3D.jpg"));
+var _ModelTab = _interopRequireDefault(require("./ModelTab"));
+
+var _TabWrapper = _interopRequireDefault(require("./TabWrapper"));
+
+var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -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,115 @@
+"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 THREE = _interopRequireWildcard(require("three"));
+
+var _cameraControls = _interopRequireDefault(require("camera-controls"));
+
+var _modelHelpers = require("../utils/modelHelpers");
+
+var _grass = _interopRequireDefault(require("../assets/img/grass.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); }
+
+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; }
+
+_cameraControls.default.install({
+  THREE: THREE
+});
+
+const textureLoader = new THREE.TextureLoader();
+
+const createScene = () => {
+  const scene = new THREE.Scene();
+  const light = new THREE.AmbientLight(0xffffff);
+  scene.background = new THREE.Color('#FAFAFA');
+  scene.add(light);
+  createGround(scene);
+  return scene;
+};
+
+const createCamera = renderer => {
+  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+  camera.position.set(0, 0, 0);
+  window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+  });
+  return camera;
+};
+
+const createRenderer = () => {
+  const renderer = new THREE.WebGLRenderer();
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.localClippingEnabled = true;
+  return renderer;
+};
+
+const createControls = (clock, camera, scene, renderer) => {
+  const controls = new _cameraControls.default(camera, renderer.domElement);
+  controls.minDistance = 0.5;
+  controls.maxDistance = 180;
+  controls.maxPolarAngle = Math.PI / 2.1;
+  (0, _modelHelpers.setDefaultControls)(controls, Math.PI / 4);
+  controls.verticalDragToForward = true;
+  (0, _modelHelpers.addKeyboardControls)(controls);
+
+  const animate = () => {
+    controls.update(clock.getDelta());
+    window.requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+  };
+
+  animate();
+  return controls;
+};
+
+const createGround = scene => {
+  textureLoader.load(_grass.default, grassTexture => {
+    grassTexture.wrapS = grassTexture.wrapT = THREE.RepeatWrapping;
+    grassTexture.repeat.set(70, 70);
+    let groundMaterial = new THREE.MeshBasicMaterial({
+      map: grassTexture,
+      color: 'rgb(255,255,255)'
+    });
+    let groundMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500), groundMaterial);
+    groundMesh.rotation.x = -Math.PI / 2;
+    scene.add(groundMesh);
+  });
+};
+
+const ModelTab = _ref => {
+  let {
+    json
+  } = _ref;
+  const [clock] = (0, _react.useState)(new THREE.Clock());
+  const [scene] = (0, _react.useState)(createScene());
+  const [renderer] = (0, _react.useState)(createRenderer());
+  const [camera] = (0, _react.useState)(createCamera(renderer));
+  const [controls] = (0, _react.useState)(createControls(clock, camera, scene, renderer));
+  (0, _react.useEffect)(() => {
+    const container = document.querySelector('.widget-tab__model-scene');
+    if (container.children.length !== 0) return;
+    container.appendChild(renderer.domElement);
+  }, [renderer]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__model"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__model-scene"
+  }));
+};
+
+var _default = ModelTab;
+exports.default = _default;

package/build/components/PanoramaTab.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var PANOLENS = _interopRequireWildcard(require("panolens"));
+
+var _threeDeviceOrientation = _interopRequireDefault(require("three-device-orientation"));
+
+var _Loader = _interopRequireDefault(require("./Loader"));
+
+var _panoramaHelpers = require("../utils/panoramaHelpers");
+
+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 {
+  DEVICEORIENTATION,
+  ORBIT
+} = PANOLENS.CONTROLS;
+const pathName = 'Panorama_0_0_';
+
+const getPanoramas = (json, images, 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;
+    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']);
+    const {
+      left,
+      top
+    } = (0, _panoramaHelpers.findRoomCenter)(currentRoom, Walls, Vertices);
+    return {
+      type: currentRoom.Type,
+      id: index,
+      panorama,
+      left,
+      top
+    };
+  }, []);
+};
+
+const initPanorama = () => {
+  let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
+  let controls = new _threeDeviceOrientation.default(camera);
+  window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+  });
+
+  const animate = () => {
+    window.requestAnimationFrame(animate);
+    controls.update();
+  };
+
+  animate();
+
+  if (DeviceOrientationEvent.requestPermission) {
+    DeviceOrientationEvent.requestPermission().catch(() => console.log('Device motion not allowed'));
+  }
+
+  return {
+    camera,
+    controls
+  };
+};
+
+const PanoramaTab = _ref => {
+  let {
+    json,
+    planImage,
+    images
+  } = _ref;
+  const [menuState, setMenuState] = (0, _react.useState)(false);
+  const [loadingState, setLoadingState] = (0, _react.useState)(true);
+  const [isMapActive, setMapState] = (0, _react.useState)(false);
+  const [currentRoomIndex, setCurrentRoomIndex] = (0, _react.useState)(0);
+  const [panoramas] = (0, _react.useState)(getPanoramas(json, images, setLoadingState));
+  const [panoramaRooms] = (0, _react.useState)(getPanoramaRooms(json, panoramas));
+  const [viewer, setViewer] = (0, _react.useState)(null);
+  const [planScale, setPlanScale] = (0, _react.useState)({
+    X: 1,
+    Y: 1
+  });
+
+  const changePanorama = (panorama, index) => {
+    setCurrentRoomIndex(index);
+    viewer.setPanorama(panorama);
+  };
+
+  const toggleVrMode = () => {
+    if (viewer.mode === 3) {
+      viewer.disableEffect();
+      return;
+    }
+
+    viewer.enableEffect(PANOLENS.MODES.STEREO);
+  };
+
+  const toggleOrientationMode = () => {
+    if (viewer.control.id === 'orbit') {
+      viewer.enableControl(DEVICEORIENTATION);
+      return;
+    }
+
+    viewer.enableControl(ORBIT);
+  };
+
+  const toggleMap = () => setMapState(!isMapActive);
+
+  const setScale = () => {
+    const image = document.querySelector('.widget-tab__panorama-map img');
+    setPlanScale((0, _panoramaHelpers.getScale)(image, json));
+  };
+
+  const getDotClassName = index => {
+    let className = 'widget-tab__panorama-map__dot';
+    if (isMapActive) className += ' widget-tab__panorama-map__dot--big';
+    if (currentRoomIndex === index) className += ' widget-tab__panorama-map__dot--active';
+    return className;
+  };
+
+  (0, _react.useEffect)(() => {
+    const newViewer = new PANOLENS.Viewer({
+      container: document.querySelector('.widget-tab__panorama-overlay'),
+      autoHideInfospot: false,
+      controlButtons: [],
+      cameraFov: 90
+    });
+    panoramas.forEach(panorama => {
+      if (!panorama.panorama_id) return;
+      newViewer.add(panorama);
+    });
+    setViewer(newViewer);
+    initPanorama();
+  }, [panoramas]);
+  (0, _react.useEffect)(setScale, [json, isMapActive]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__panorama"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__panorama-overlay"
+  }), loadingState && /*#__PURE__*/_react.default.createElement(_Loader.default, {
+    absolute: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__panorama-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"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: planImage,
+    className: isMapActive ? 'active' : '',
+    onClick: toggleMap,
+    alt: "plan"
+  }), panoramaRooms.map((room, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: index,
+    style: {
+      left: "".concat(room.left * planScale.X, "px"),
+      top: "".concat(room.top * planScale.Y, "px")
+    },
+    className: getDotClassName(index),
+    onClick: () => changePanorama(room.panorama, index)
+  }))), /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__panorama-mode",
+    onClick: toggleVrMode
+  }, "VR"), /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__panorama-standart",
+    onClick: toggleOrientationMode
+  }, "Standart"));
+};
+
+var _default = PanoramaTab;
+exports.default = _default;

package/build/components/RotationTab.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _panzoom = _interopRequireDefault(require("panzoom"));
 
-var _threesixty = _interopRequireDefault(require("../lib/threesixty"));
+var _threesixty = _interopRequireDefault(require("../threesixty"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }