hart-estate-widget 0.0.11 → 0.0.14

package/build/api/index.js

@@ -3,20 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loadFurnitureData = exports.STAGE_API_URL = exports.API_URL = void 0;
+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");
 
-const API_URL = 'https://backend.estate.myhart.ru';
-exports.API_URL = API_URL;
+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 furniture => {
+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, "/api/furniture?only=").concat(furnitureQuery);
+  const path = "".concat(API_URL[env], "/api/furniture?only=").concat(furnitureQuery);
   const response = await fetch(path);
   return await response.json();
 };

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

@@ -12,3 +12,15 @@
         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

@@ -40,8 +40,10 @@
         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

package/build/components/Application.js

@@ -50,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'],
@@ -69,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'],
@@ -80,6 +85,7 @@ 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'],
@@ -101,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

@@ -13,6 +13,10 @@ 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); }
@@ -45,16 +49,38 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
 
     _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 = _ref2 => {
+  const onImageUploaded = _ref3 => {
     let {
       target
-    } = _ref2;
+    } = _ref3;
     if (!target.files.length) return;
     const reader = new FileReader();
 
@@ -67,6 +93,8 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
     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", {
@@ -87,10 +115,10 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
     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 => {
+    onChange: _ref4 => {
       let {
         target
-      } = _ref3;
+      } = _ref4;
       return houseStore.setCurrentWallColor(target.value);
     },
     style: {
@@ -99,11 +127,11 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
     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) => {
+  }, houseStore && houseStore.wallsTextures.map((_ref5, index) => {
     let {
       image,
       texture
-    } = _ref4;
+    } = _ref5;
     return /*#__PURE__*/_react.default.createElement("img", {
       key: index,
       src: image,

package/build/components/PanoramaTab.js

@@ -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, _panoramaHelpers.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,
@@ -121,6 +130,7 @@ const PanoramaTab = _ref => {
     X: 1,
     Y: 1
   });
+  const isMapDisabled = !json;
 
   const changePanorama = (panorama, index) => {
     setCurrentRoomIndex(index);
@@ -194,7 +204,7 @@ const PanoramaTab = _ref => {
     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"),

package/build/components/TabPanes.js

@@ -11,6 +11,8 @@ var _mobxReactLite = require("mobx-react-lite");
 
 var _store = _interopRequireDefault(require("../store"));
 
+var _Loader = _interopRequireDefault(require("./Loader"));
+
 var _refreshIcon = _interopRequireDefault(require("../assets/img/refresh-icon.svg"));
 
 var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
@@ -77,7 +79,10 @@ const TabPane = _ref2 => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab-pane ".concat(active ? 'widget-tab-pane--active' : ''),
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement("img", {
+  }, !image && /*#__PURE__*/_react.default.createElement(_Loader.default, {
+    absolute: true,
+    size: "sm"
+  }), image && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
     className: "widget-tab-pane__image",
     src: image,
     alt: "tab-pane"
@@ -85,7 +90,7 @@ const TabPane = _ref2 => {
     className: "widget-tab-pane__icon",
     src: icon,
     alt: "tab-pane-icon"
-  }));
+  })));
 };
 
 var _default = TabPanes;

package/build/components/TabWrapper.js

@@ -19,6 +19,7 @@ const TabWrapper = _ref => {
     image,
     title,
     text,
+    disabled,
     onStart,
     children
   } = _ref;
@@ -27,6 +28,7 @@ const TabWrapper = _ref => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ImageTab.default, {
       image: image
     }), /*#__PURE__*/_react.default.createElement(_Instructions.default, {
+      disabled: disabled,
       title: title,
       text: text,
       onClick: onStart

package/build/components/Widget.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -19,10 +17,18 @@ var _defaultConfig = _interopRequireDefault(require("../config/defaultConfig"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 class Widget {
   constructor(container) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const config = Object.assign(_defaultConfig.default, options);
+
+    const config = _objectSpread(_objectSpread({}, _defaultConfig.default), options);
+
     const widgetContainer = document.querySelector(container);
     if (!widgetContainer) throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043D\u0430\u0439\u0442\u0438 \u044D\u043B\u0435\u043C\u0435\u043D\u0442: #".concat(container));
     config.containerElement = widgetContainer;
@@ -35,6 +41,14 @@ class Widget {
     }), widgetContainer);
   }
 
+  get options() {
+    return _store.default.config;
+  }
+
+  updateOptions(config) {
+    _store.default.setConfig(_objectSpread(_objectSpread({}, this.options), config));
+  }
+
 }
 
 var _default = Widget;

package/build/config/defaultConfig.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultJSON = _interopRequireDefault(require("./defaultJSON"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultConfig = {
@@ -16,12 +14,13 @@ const defaultConfig = {
   tabPanes: true,
   width: null,
   height: null,
-  planImage: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/952c2131-5a8b-4afd-8083-b56d4357aa5c/plan.png',
-  topView: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopView_0_0.png',
-  topDownView: 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/MiddleCut_0_0_0.png',
-  rotationImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_7.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_8.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_9.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_10.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_11.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_12.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_13.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_14.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_15.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_16.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_17.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_18.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_19.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_20.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_21.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_22.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_23.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_24.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_25.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_26.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_27.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_28.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_29.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_30.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_31.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_32.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_33.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_34.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/TopDownView_0_0_35.png'],
-  panoramaImages: ['https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_0.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_1.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_2.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_3.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_4.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_5.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_6.png', 'https://backend-stage.estate.myhart.ru/storage/projects/202112/a5768629-fa1a-48f4-87de-15fea894deed/unreal/Style_2/Panorama_0_0_7.png'],
-  json: _defaultJSON.default
+  planImage: null,
+  topView: null,
+  topDownView: null,
+  rotationImages: [],
+  panoramaImages: [],
+  json: null,
+  env: 'production'
 };
 var _default = defaultConfig;
 exports.default = _default;

package/build/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ApiStore", {
+  enumerable: true,
+  get: function get() {
+    return _apiStore.default;
+  }
+});
 Object.defineProperty(exports, "ImageTab", {
   enumerable: true,
   get: function get() {
@@ -70,4 +76,6 @@ var _ModelTab = _interopRequireDefault(require("./components/ModelTab"));
 
 var _Loader = _interopRequireDefault(require("./components/Loader"));
 
+var _apiStore = _interopRequireDefault(require("./store/apiStore"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/store/apiStore.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.array.reduce.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobx = require("mobx");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+(0, _mobx.configure)({
+  useProxies: 'never'
+});
+
+class ApiStore {
+  constructor() {
+    let env = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'production';
+
+    _defineProperty(this, "PRODUCTION_API_URL", 'https://backend.estate.myhart.ru');
+
+    _defineProperty(this, "STAGE_API_URL", 'https://backend-stage.estate.myhart.ru');
+
+    _defineProperty(this, "env", null);
+
+    _defineProperty(this, "loadFurnitureData", async furniture => {
+      const furnitureQuery = furniture.reduce((acc, item, i) => acc += "".concat(i === 0 ? '' : ',').concat(item.Model), '');
+      const path = "".concat(this.API_URL, "/api/furniture?only=").concat(furnitureQuery);
+      const response = await fetch(path);
+      return await response.json();
+    });
+
+    _defineProperty(this, "loadWidgetData", async planId => {
+      const path = "".concat(this.API_URL, "/api/plans/").concat(planId, "/widget");
+      const response = await fetch(path);
+      return await response.json();
+    });
+
+    _defineProperty(this, "loadPanoramaData", async planId => {
+      const path = "".concat(this.API_URL, "/api/plans/").concat(planId, "/panorama");
+      const response = await fetch(path);
+      return await response.json();
+    });
+
+    _defineProperty(this, "loadJson", async path => {
+      const response = await fetch(path);
+      return await response.json();
+    });
+
+    (0, _mobx.makeAutoObservable)(this);
+    this.env = env;
+  }
+
+  get API_URL() {
+    return this.env === 'stage' ? this.STAGE_API_URL : this.PRODUCTION_API_URL;
+  }
+
+}
+
+var _default = ApiStore;
+exports.default = _default;

package/build/store/houseStore.js

@@ -15,7 +15,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _mobx = require("mobx");
 
-var _api = require("../api");
+var _apiStore = _interopRequireDefault(require("../store/apiStore"));
+
+var _store = _interopRequireDefault(require("../store"));
 
 var THREE = _interopRequireWildcard(require("three"));
 
@@ -57,6 +59,8 @@ class HouseStore {
   constructor(modelStore) {
     _defineProperty(this, "modelStore", null);
 
+    _defineProperty(this, "apiStore", new _apiStore.default(_store.default.config.env));
+
     _defineProperty(this, "houseGroup", new THREE.Group());
 
     _defineProperty(this, "wallsGroup", new THREE.Group());
@@ -96,7 +100,7 @@ class HouseStore {
     this.setCenterPosition().loadTextures().then(() => {
       this.createFloors().createSpaceBetweenWalls().createWalls().createDoors();
     });
-    (0, _api.loadFurnitureData)(this.furniture).then(resp => {
+    this.apiStore.loadFurnitureData(this.furniture).then(resp => {
       this.furnitureData = resp;
       this.loadFurniture(0);
     });
@@ -514,7 +518,7 @@ class HouseStore {
       mesh,
       textures
     } = furnitureData;
-    const modelPath = "".concat(_api.API_URL, "/storage/furniture/").concat(mesh);
+    const modelPath = "".concat(this.apiStore.API_URL, "/storage/furniture/").concat(mesh);
     const {
       Location,
       Rotation,
@@ -526,7 +530,7 @@ class HouseStore {
       Z
     } = Location;
     const promises = textures.map(url => {
-      const texturePath = "".concat(_api.API_URL, "/storage/furniture/").concat(url);
+      const texturePath = "".concat(this.apiStore.API_URL, "/storage/furniture/").concat(url);
       return new Promise(resolve => {
         this.textureLoader.load(texturePath, texture => resolve(texture));
       });

package/build/store/modelStore.js

@@ -57,6 +57,12 @@ class ModelStore {
 
     _defineProperty(this, "wallsHeight", 280 * this.sceneScale);
 
+    _defineProperty(this, "currentControlsType", 'orbit');
+
+    _defineProperty(this, "isJoystickActive", false);
+
+    _defineProperty(this, "joystickDirections", []);
+
     _defineProperty(this, "init", json => {
       this.json = json;
       this.initialized = true;
@@ -64,15 +70,21 @@ class ModelStore {
       this.scene.add(this.houseStore.houseGroup);
     });
 
+    _defineProperty(this, "setJoystickState", value => {
+      this.isJoystickActive = value;
+    });
+
+    _defineProperty(this, "setJoystickDirections", directions => {
+      this.joystickDirections = directions;
+    });
+
     _defineProperty(this, "createScene", () => {
       this.scene = new THREE.Scene();
       const light = new THREE.AmbientLight(0xffffff);
       this.scene.rotation.x = -Math.PI / 2;
       this.scene.scale.y = -1;
       this.scene.background = new THREE.Color('#FAFAFA');
-      this.scene.add(light); // const axesHelper = new THREE.AxesHelper( 50 );
-      // this.scene.add( axesHelper );
-
+      this.scene.add(light);
       this.createGround();
       return this;
     });
@@ -118,11 +130,31 @@ class ModelStore {
       this.controls.maxPolarAngle = Math.PI / 2.1;
       this.setDefaultControls(Math.PI / 4);
       this.controls.verticalDragToForward = true;
-      this.controls.currentControlsType = 'orbit';
+      this.currentControlsType = 'orbit';
 
       const animate = () => {
         this.controls.update(this.clock.getDelta());
         window.requestAnimationFrame(animate);
+        const distance = 0.2;
+
+        if (this.isJoystickActive) {
+          if (this.joystickDirections.some(direction => direction === 'forward')) {
+            this.controls.forward(distance, true);
+          }
+
+          if (this.joystickDirections.some(direction => direction === 'backward')) {
+            this.controls.forward(-distance, true);
+          }
+
+          if (this.joystickDirections.some(direction => direction === 'right')) {
+            this.controls.truck(distance, 0, true);
+          }
+
+          if (this.joystickDirections.some(direction => direction === 'left')) {
+            this.controls.truck(-distance, 0, true);
+          }
+        }
+
         this.renderer.render(this.scene, this.camera);
       };
 
@@ -134,12 +166,12 @@ class ModelStore {
       this.controls.dollyTo(20, true);
       this.controls.moveTo(0, 0, 0, true);
       this.controls.mouseButtons.wheel = _cameraControls.default.ACTION.DOLLY;
-      this.controls.touches.two = _cameraControls.default.ACTION.NONE;
+      this.controls.touches.two = _cameraControls.default.ACTION.TOUCH_DOLLY_TRUCK;
       this.controls.rotateTo(0, angle, true); // this.destroyNipple();
     });
 
     _defineProperty(this, "setCurrentControlsType", type => {
-      this.controls.currentControlsType = type;
+      this.currentControlsType = type;
       const EPS = 1e-5;
 
       if (type === 'orbit') {
@@ -173,7 +205,7 @@ class ModelStore {
           callback
         } = _ref;
         keys.forEach(key => key.addEventListener('holding', () => {
-          if (this.controls.currentControlsType !== 'wasd') return;
+          if (this.currentControlsType !== 'wasd') return;
           callback();
         }));
       });

package/build/utils/modelHelpers.js

@@ -5,7 +5,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMinMaxCoordinates = exports.getKeyEvents = exports.getFloorParams = void 0;
+exports.getMinMaxCoordinates = exports.getKeyEvents = exports.getFloorParams = exports.getDirectionsFromDegrees = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -122,4 +122,30 @@ const getMinMaxCoordinates = walls => {
   };
 };
 
-exports.getMinMaxCoordinates = getMinMaxCoordinates;
+exports.getMinMaxCoordinates = getMinMaxCoordinates;
+
+const getDirectionsFromDegrees = deg => {
+  let directions = [];
+
+  if (deg > 80 && deg < 100) {
+    directions = ['forward'];
+  } else if (deg > 10 && deg < 80) {
+    directions = ['forward', 'right'];
+  } else if (deg > 100 && deg < 170) {
+    directions = ['forward', 'left'];
+  } else if (deg > 260 && deg < 280) {
+    directions = ['backward'];
+  } else if (deg > 190 && deg < 260) {
+    directions = ['backward', 'left'];
+  } else if (deg > 280 && deg < 350) {
+    directions = ['backward', 'right'];
+  } else if (deg > 350 || deg < 10) {
+    directions = ['right'];
+  } else if (deg > 170 && deg < 190) {
+    directions = ['left'];
+  }
+
+  return directions;
+};
+
+exports.getDirectionsFromDegrees = getDirectionsFromDegrees;

package/build/utils/panoramaHelpers.js

@@ -68,6 +68,10 @@ const findRoomCenter = (room, walls, vertices) => {
 exports.findRoomCenter = findRoomCenter;
 
 const getScale = (image, json) => {
+  if (!json) return {
+    X: 1,
+    Y: 1
+  };
   const imageWidth = image.width;
   const imageHeight = image.height;
   const baseImageWidth = 1024;

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.11",
+  "version": "0.0.14",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
@@ -11,10 +11,6 @@
     "build",
     "README.md"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
-  },
   "scripts": {
     "start": "babel src --watch --out-dir build --copy-files",
     "start-example": "cd ./example && npm run start",
@@ -27,6 +23,7 @@
     "hold-event": "^0.1.0",
     "mobx": "^6.3.13",
     "mobx-react-lite": "^3.2.3",
+    "nipplejs": "^0.9.0",
     "panolens": "^0.12.1",
     "panzoom": "^9.4.2",
     "react": "^17.0.2",