hart-estate-widget 0.0.9 → 0.0.10

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/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

@@ -95,4 +95,4 @@
                 display: block
                 position: absolute
                 right: 10px
-                top: 50%
+                top: 50%

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"));
@@ -82,7 +84,9 @@ const Application = (0, _mobxReactLite.observer)(_ref => {
       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/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

@@ -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 }; }
 
@@ -68,7 +68,7 @@ const getPanoramaRooms = (json, panoramas) => {
     const {
       left,
       top
-    } = (0, _helpers.findRoomCenter)(currentRoom, Walls, Vertices);
+    } = (0, _panoramaHelpers.findRoomCenter)(currentRoom, Walls, Vertices);
     return {
       type: currentRoom.Type,
       id: index,
@@ -92,6 +92,8 @@ const initPanorama = () => {
     controls.update();
   };
 
+  animate();
+
   if (DeviceOrientationEvent.requestPermission) {
     DeviceOrientationEvent.requestPermission().catch(() => console.log('Device motion not allowed'));
   }
@@ -147,7 +149,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 => {

package/build/index.css

@@ -1 +1 @@
-*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Lato",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:400;text-decoration:none}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px 125px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px 90px 15px}}.widget-application .widget-tab--panes-hidden{padding:60px 30px}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;cursor:move;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab--panorama .widget-tab__image,.widget-application .widget-tab--model .widget-tab__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover}.widget-application .widget-tab-panes{position:absolute;z-index:3;left:50%;bottom:5px;max-width:100%;padding:0 30px 15px 30px;transform:translateX(-50%);display:flex;align-items:center;justify-content:flex-start;overflow-x:auto}@media(max-width: 630px){.widget-application .widget-tab-panes{padding:0 15px 15px 15px}}.widget-application .widget-tab-panes .widget-tab-pane{width:85px;height:85px;border-radius:5px;margin:0 10px;background-color:#f4f7f7;cursor:pointer;border-width:3px;border-style:solid;border-color:#f4f7f7;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;transition:border .3s ease;position:relative;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane{width:50px;height:50px;margin:0 5px}}.widget-application .widget-tab-panes .widget-tab-pane::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 1px 1px 10px rgba(0,0,0,.3)}.widget-application .widget-tab-panes .widget-tab-pane--active,.widget-application .widget-tab-panes .widget-tab-pane:hover{border-color:#fad436}.widget-application .widget-tab-panes .widget-tab-pane__image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.widget-application .widget-tab-panes .widget-tab-pane__icon{width:16px;height:16px;object-fit:contain;object-position:center;display:block;position:absolute;left:10px;bottom:8px}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane__icon{width:12px;height:12px;left:5px;bottom:3px}}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.3)}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:#fff;box-shadow:1px 1px 10px rgba(0,0,0,.5);border-radius:5px;overflow:hidden;width:350px}.widget-application .widget-instructions__head{width:100%;padding:10px;border-bottom:1px solid #d1d1d1;color:rgba(74,74,74,.7);text-align:center;font-size:.8rem}.widget-application .widget-instructions__body{width:100%;padding:10px;text-align:center;font-size:.7rem}.widget-application .widget-instructions__body p{margin:10px 0}.widget-application .widget-instructions__footer{width:100%}.widget-application .widget-instructions__footer button{width:100%;background-color:#fad436;font-size:.8rem;font-weight:500;text-align:center;color:#000;cursor:pointer;border:none;padding:10px 5px}/*# sourceMappingURL=index.css.map */
+*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Lato",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:400;text-decoration:none}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px 125px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px 90px 15px}}.widget-application .widget-tab--panes-hidden{padding:60px 30px}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;cursor:move;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab--panorama .widget-tab__image,.widget-application .widget-tab--model .widget-tab__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover}.widget-application .widget-tab-panes{position:absolute;z-index:3;left:50%;bottom:5px;max-width:100%;padding:0 30px 15px 30px;transform:translateX(-50%);display:flex;align-items:center;justify-content:flex-start;overflow-x:auto}@media(max-width: 630px){.widget-application .widget-tab-panes{padding:0 15px 15px 15px}}.widget-application .widget-tab-panes .widget-tab-pane{width:85px;height:85px;border-radius:5px;margin:0 10px;background-color:#f4f7f7;cursor:pointer;border-width:3px;border-style:solid;border-color:#f4f7f7;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;transition:border .3s ease;position:relative;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane{width:50px;height:50px;margin:0 5px}}.widget-application .widget-tab-panes .widget-tab-pane::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 1px 1px 10px rgba(0,0,0,.3)}.widget-application .widget-tab-panes .widget-tab-pane--active,.widget-application .widget-tab-panes .widget-tab-pane:hover{border-color:#fad436}.widget-application .widget-tab-panes .widget-tab-pane__image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.widget-application .widget-tab-panes .widget-tab-pane__icon{width:16px;height:16px;object-fit:contain;object-position:center;display:block;position:absolute;left:10px;bottom:8px}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane__icon{width:12px;height:12px;left:5px;bottom:3px}}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.3)}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:#fff;box-shadow:1px 1px 10px rgba(0,0,0,.5);border-radius:5px;overflow:hidden;width:350px}.widget-application .widget-instructions__head{width:100%;padding:10px;border-bottom:1px solid #d1d1d1;color:rgba(74,74,74,.7);text-align:center;font-size:.8rem}.widget-application .widget-instructions__body{width:100%;padding:10px;text-align:center;font-size:.7rem}.widget-application .widget-instructions__body p{margin:10px 0}.widget-application .widget-instructions__footer{width:100%}.widget-application .widget-instructions__footer button{width:100%;background-color:#fad436;font-size:.8rem;font-weight:500;text-align:center;color:#000;cursor:pointer;border:none;padding:10px 5px}.widget-application .widget-tab__panorama{width:100%;height:100%;position:absolute;left:0;top:0}.widget-application .widget-tab__panorama-overlay{width:100%;height:100%;overflow:hidden}.widget-application .widget-tab__panorama-mode,.widget-application .widget-tab__panorama-standart{position:absolute;right:15px;bottom:20px;color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:1rem;font-weight:bold;border:none;cursor:pointer;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__panorama-mode:hover,.widget-application .widget-tab__panorama-standart:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-standart{right:100px}.widget-application .widget-tab__panorama-map{position:absolute;right:15px;bottom:70px;z-index:10000}.widget-application .widget-tab__panorama-map img{width:100px;border-radius:10px}.widget-application .widget-tab__panorama-map img.active{width:240px}.widget-application .widget-tab__panorama-map img:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-map__dot{position:absolute;left:0;top:0;transform:translate(-50%, -50%);width:5px;height:5px;background-color:#fad436;border-radius:50%;cursor:pointer;z-index:10}.widget-application .widget-tab__panorama-map__dot--big{border:2px solid #fad436;box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px}.widget-application .widget-tab__panorama-map__dot--active{background-color:red;border:2px solid red}.widget-application .widget-tab__panorama-menu{position:absolute;z-index:3;left:15px;top:15px;max-height:100%;overflow-y:auto;padding-bottom:30px}.widget-application .widget-tab__panorama-menu ul{list-style-type:none}.widget-application .widget-tab__panorama-menu ul li{color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer;margin-bottom:15px;width:150px;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__panorama-menu ul li:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-menu ul li:nth-child(1){position:relative}.widget-application .widget-tab__panorama-menu ul li:nth-child(1)::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-loader{display:block;position:relative;width:80px;height:80px}.widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fad436;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(4){left:56px;animation:widget-loader-3 .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)}}.widget-application .widget-tab__model{width:100%;height:100%;position:absolute;left:0;top:0}.widget-application .widget-tab__model-scene{width:100%;height:100%;display:block}/*# sourceMappingURL=index.css.map */

package/build/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/assets/sass/index.sass","../src/assets/sass/vars.sass","../src/assets/sass/components/tabs.sass","../src/assets/sass/components/instructions.sass"],"names":[],"mappings":"AAEA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UAEA,+EACE,8BACA,mCACA,kCACA,aACA,gBACA,qBAEF,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MC9BI,KD+BJ,iBC7BQ,QD8BR,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCEzCJ,gCACE,WACA,YACA,aACA,mBACA,uBACA,6BACA,yBAPF,gCAQI,6BACF,8CACE,kBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,sDACE,sBACA,uBACA,kBACA,YACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,mBD1BR,iBACA,yBACA,eACA,uBC2BI,uHACE,kBACA,UACA,OACA,MACA,WACA,YACA,iBAEN,sCACE,kBACA,UACA,SACA,WACA,eACA,yBACA,2BACA,aACA,mBACA,2BACA,gBACA,yBAZF,sCAaI,0BACF,uDACE,WACA,YACA,kBACA,cACA,iBD9DM,QC+DN,eACA,iBACA,mBACA,aDlEM,QCmEN,gBACA,aACA,mBACA,uBACA,UACA,2BACA,kBDrEJ,iBACA,yBACA,eACA,uBCoEI,yBAlBF,uDAmBI,WACA,YACA,cACF,+DACE,WACA,kBACA,OACA,MACA,WACA,YACA,6CACF,4HAEE,aDxFI,QCyFN,8DACE,WACA,YACA,iBACA,uBACA,cACF,6DACE,WACA,YACA,mBACA,uBACA,cACA,kBACA,UACA,WACA,yBATF,6DAUI,WACA,YACA,SACA,YCjHR,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,gCACA,kDACE,aACA,sBACA,uBACA,2BACA,iBFdE,KEeF,uCACA,kBACA,gBACA,YACF,+CACE,WACA,aACA,gCACA,wBACA,kBACA,gBACF,+CACE,WACA,aACA,kBACA,gBACA,iDACE,cACJ,iDACE,WACA,wDACE,WACA,iBFlCI,QEmCJ,gBACA,gBACA,kBACA,WACA,eACA,YACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../src/assets/sass/index.sass","../src/assets/sass/vars.sass","../src/assets/sass/components/tabs.sass","../src/assets/sass/components/instructions.sass","../src/assets/sass/components/panorama.sass","../src/assets/sass/components/loader.sass","../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAEA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UAEA,+EACE,8BACA,mCACA,kCACA,aACA,gBACA,qBAEF,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MC9BI,KD+BJ,iBC7BQ,QD8BR,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCEzCJ,gCACE,WACA,YACA,aACA,mBACA,uBACA,6BACA,yBAPF,gCAQI,6BACF,8CACE,kBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,sDACE,sBACA,uBACA,kBACA,YACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,mBD1BR,iBACA,yBACA,eACA,uBC2BI,uHACE,kBACA,UACA,OACA,MACA,WACA,YACA,iBAEN,sCACE,kBACA,UACA,SACA,WACA,eACA,yBACA,2BACA,aACA,mBACA,2BACA,gBACA,yBAZF,sCAaI,0BACF,uDACE,WACA,YACA,kBACA,cACA,iBD9DM,QC+DN,eACA,iBACA,mBACA,aDlEM,QCmEN,gBACA,aACA,mBACA,uBACA,UACA,2BACA,kBDrEJ,iBACA,yBACA,eACA,uBCoEI,yBAlBF,uDAmBI,WACA,YACA,cACF,+DACE,WACA,kBACA,OACA,MACA,WACA,YACA,6CACF,4HAEE,aDxFI,QCyFN,8DACE,WACA,YACA,iBACA,uBACA,cACF,6DACE,WACA,YACA,mBACA,uBACA,cACA,kBACA,UACA,WACA,yBATF,6DAUI,WACA,YACA,SACA,YCjHR,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,gCACA,kDACE,aACA,sBACA,uBACA,2BACA,iBFdE,KEeF,uCACA,kBACA,gBACA,YACF,+CACE,WACA,aACA,gCACA,wBACA,kBACA,gBACF,+CACE,WACA,aACA,kBACA,gBACA,iDACE,cACJ,iDACE,WACA,wDACE,WACA,iBFlCI,QEmCJ,gBACA,gBACA,kBACA,WACA,eACA,YACA,iBC7CJ,0CACE,WACA,YACA,kBACA,OACA,MACA,kDACE,WACA,YACA,gBACF,kGAEE,kBACA,WACA,YACA,MHbA,KGcA,iBHZI,QGaJ,iBACA,mBACA,eACA,iBACA,YACA,eHfN,iBACA,yBACA,eACA,uBGcM,8GACE,wCACJ,mDACE,YACF,8CACE,kBACA,WACA,YACA,cACA,kDACE,YACA,mBACA,yDACE,YACF,wDACE,wCACJ,mDACE,kBACA,OACA,MACA,gCACA,UACA,WACA,iBH3CE,QG4CF,kBACA,eACA,WACA,wDACE,yBACA,gCACA,WACA,YACF,2DACE,qBACA,qBACN,+CACE,kBACA,UACA,UACA,SACA,gBACA,gBACA,oBACA,kDACE,qBACA,qDACE,MHpEJ,KGqEI,iBHnEA,QGoEA,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YHvEV,iBACA,yBACA,eACA,uBGsEU,2DACE,wCACF,kEACE,kBACA,yEACE,cACA,yCACA,eACA,iBACA,iBACA,cACA,kBACA,WACA,QC/FhB,eACE,cACA,kBACA,WACA,YACA,yBACE,kBACA,SACA,QACA,gCACF,mBACE,kBACA,SACA,WACA,YACA,kBACA,WJVQ,QIWR,mDACA,gCACE,SACA,uCACF,gCACE,SACA,uCACF,gCACE,UACA,uCACF,gCACE,UACA,uCAEN,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BC9CA,uCACE,WACA,YACA,kBACA,OACA,MACA,6CACE,WACA,YACA","file":"index.css"}

package/build/index.js

@@ -15,6 +15,18 @@ Object.defineProperty(exports, "Instructions", {
     return _Instructions.default;
   }
 });
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.default;
+  }
+});
+Object.defineProperty(exports, "ModelTab", {
+  enumerable: true,
+  get: function get() {
+    return _ModelTab.default;
+  }
+});
 Object.defineProperty(exports, "PanoramaTab", {
   enumerable: true,
   get: function get() {
@@ -54,4 +66,8 @@ var _PanoramaTab = _interopRequireDefault(require("./components/PanoramaTab"));
 
 var _TabWrapper = _interopRequireDefault(require("./components/TabWrapper"));
 
+var _ModelTab = _interopRequireDefault(require("./components/ModelTab"));
+
+var _Loader = _interopRequireDefault(require("./components/Loader"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/utils/modelHelpers.js

@@ -0,0 +1,81 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setDefaultControls = exports.addKeyboardControls = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var holdEvent = _interopRequireWildcard(require("hold-event"));
+
+var _cameraControls = _interopRequireDefault(require("camera-controls"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const setDefaultControls = (controls, angle) => {
+  controls.dollyTo(20, true);
+  controls.moveTo(0, 0, 0, true);
+  controls.mouseButtons.wheel = _cameraControls.default.ACTION.DOLLY;
+  controls.touches.two = _cameraControls.default.ACTION.NONE;
+  controls.rotateTo(0, angle, true); // this.destroyNipple();
+};
+
+exports.setDefaultControls = setDefaultControls;
+
+const addKeyboardControls = controls => {
+  const KEYCODE = {
+    W: 87,
+    A: 65,
+    S: 83,
+    D: 68,
+    ARROW_LEFT: 37,
+    ARROW_UP: 38,
+    ARROW_RIGHT: 39,
+    ARROW_DOWN: 40
+  };
+  const wKey = new holdEvent.KeyboardKeyHold(KEYCODE.W, 100);
+  const upKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_UP, 100);
+  const upArr = [wKey, upKey];
+  const aKey = new holdEvent.KeyboardKeyHold(KEYCODE.A, 100);
+  const leftKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_LEFT, 100);
+  const leftArr = [aKey, leftKey];
+  const sKey = new holdEvent.KeyboardKeyHold(KEYCODE.S, 100);
+  const downKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_DOWN, 100);
+  const downArr = [sKey, downKey];
+  const dKey = new holdEvent.KeyboardKeyHold(KEYCODE.D, 100);
+  const rightKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_RIGHT, 100);
+  const rightArr = [dKey, rightKey];
+  upArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.forward(1, true);
+    });
+  });
+  leftArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.truck(-1, 0, true);
+    });
+  });
+  downArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.forward(-1, true);
+    });
+  });
+  rightArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.truck(1, 0, true);
+    });
+  });
+};
+
+exports.addKeyboardControls = addKeyboardControls;

package/build/utils/{helpers.js → panoramaHelpers.js}

@@ -7,6 +7,10 @@ exports.getVerticesLocations = exports.getScale = exports.findWallVertices = exp
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const findWallVertices = (walls, wall, vertices) => {
   const currentWall = walls.find(el => el.ID === wall);
   return currentWall.Vertices.map(vertex => vertices.find(el => el.ID === vertex));

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
@@ -22,7 +22,9 @@
     "build:sass": "sass src/assets/sass/index.sass:build/index.css --style compressed"
   },
   "dependencies": {
+    "camera-controls": "^1.34.1",
     "core-js": "^3.21.0",
+    "hold-event": "^0.1.0",
     "mobx": "^6.3.13",
     "mobx-react-lite": "^3.2.3",
     "panolens": "^0.12.1",
@@ -37,10 +39,18 @@
     "@babel/core": "^7.17.0",
     "@babel/eslint-parser": "^7.16.3",
     "@babel/preset-env": "^7.16.11",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.6.0",
     "eslint": "^8.0.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "sass": "^1.46.0"
+    "path": "^0.12.7",
+    "sass": "^1.46.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "browserslist": {
     "production": [