hart-estate-widget 0.0.41 → 0.0.42

package/build/components/ModelTab.js

@@ -17,87 +17,105 @@ var _modelHelpers = require("../utils/modelHelpers");
 
 var _nipplejs = _interopRequireDefault(require("nipplejs"));
 
+var _Instructions = _interopRequireDefault(require("./Instructions"));
+
+var _handMove = _interopRequireDefault(require("../assets/icons/hand-move.svg"));
+
+var _D = _interopRequireDefault(require("../assets/img/3D.jpg"));
+
 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 instructionSteps = [{
+  icon: _handMove.default,
+  text: 'Вращать планировку'
+}];
 const ModelTab = (0, _mobxReactLite.observer)(_ref => {
   let {
-    json
+    json,
+    disabled
   } = _ref;
+  const [showInstructions, setInstructionsState] = (0, _react.useState)(true);
   const [menuState, setMenuState] = (0, _react.useState)(false);
   const {
     houseStore
   } = _modelStore.default;
-  (0, _react.useEffect)(() => {
-    const container = document.querySelector('.widget-tab__model-scene');
-
-    _modelStore.default.setContainer(container);
-
-    container.appendChild(_modelStore.default.renderer.domElement);
 
-    _modelStore.default.setCurrentControlsType('orbit');
+  const getNextWallsMaterialType = () => {
+    if (houseStore.wallsMaterialType === 'texture') return 'color';
+    return 'texture';
+  };
 
-    if (_modelStore.default.initialized) {
-      _modelStore.default.houseStore.setDoorsVisibility(true);
+  const onImageUploaded = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    if (!target.files.length) return;
+    const reader = new FileReader();
 
-      _modelStore.default.houseStore.setFullBuildingVisibility(true);
+    reader.onload = e => houseStore.addWallTexture(e.target.result);
 
-      _modelStore.default.houseStore.setCurrentWallsMaterialType('texture');
+    reader.readAsDataURL(target.files[0]);
+  };
 
-      return;
-    }
+  const initJoystick = () => {
+    const zone = document.querySelector('.widget-tab__model-joystick');
 
-    _modelStore.default.init(json);
-  }, [json]);
-  (0, _react.useEffect)(() => {
     const joystick = _nipplejs.default.create({
-      zone: document.querySelector('.widget-tab__model-joystick'),
-      color: '#F4C833',
-      mode: 'static',
+      zone,
       position: {
         left: '50%',
         top: '50%'
-      }
+      },
+      color: '#F4C833',
+      mode: 'static'
     });
 
     joystick.on('start', () => _modelStore.default.setJoystickState(true));
     joystick.on('end', () => _modelStore.default.setJoystickState(false));
-    joystick.on('move', (_, _ref2) => {
+    joystick.on('move', (_, _ref3) => {
       let {
         angle
-      } = _ref2;
+      } = _ref3;
       const directions = (0, _modelHelpers.getDirectionsFromDegrees)(angle.degree);
 
       _modelStore.default.setJoystickDirections(directions);
     });
-  }, []);
-
-  const getNextWallsMaterialType = () => {
-    if (houseStore.wallsMaterialType === 'texture') return 'color';
-    return 'texture';
   };
 
-  const onImageUploaded = _ref3 => {
-    let {
-      target
-    } = _ref3;
-    if (!target.files.length) return;
-    const reader = new FileReader();
+  const onStart = () => {
+    setInstructionsState(false);
+    initJoystick();
+    const container = document.querySelector('.widget-tab__model-scene');
 
-    reader.onload = e => houseStore.addWallTexture(e.target.result);
+    _modelStore.default.setContainer(container);
 
-    reader.readAsDataURL(target.files[0]);
+    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);
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__model"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "widget-tab__model-scene"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__model-joystick \n          ".concat(_modelStore.default.currentControlsType === 'wasd' ? 'widget-tab__model-joystick--active' : '')
+    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", {
@@ -147,7 +165,12 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
     onChange: onImageUploaded,
     type: "file",
     accept: ".jpg, .jpeg, .png"
-  })))))));
+  }))))))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
+    disabled: disabled,
+    steps: instructionSteps,
+    onClick: onStart,
+    background: _D.default
+  }));
 });
 var _default = ModelTab;
 exports.default = _default;