hart-estate-widget 0.0.62 → 0.0.65

package/build/components/PanoramaTab.js

@@ -268,63 +268,55 @@ var PanoramaTab = function PanoramaTab(_ref4) {
       setLoadingState = _useState6[1];
 
   var _useState7 = (0, _react.useState)({
-    width: 0,
-    height: 0
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      windowSize = _useState8[0],
-      setWindowSize = _useState8[1];
-
-  var _useState9 = (0, _react.useState)({
     width: '200px',
     height: 'auto'
   }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      mapSize = _useState10[0],
-      setMapSize = _useState10[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      mapSize = _useState8[0],
+      setMapSize = _useState8[1];
 
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      mapOpen = _useState12[0],
-      setMapState = _useState12[1];
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      mapOpen = _useState10[0],
+      setMapState = _useState10[1];
 
-  var _useState13 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)({
     X: 1,
     Y: 1
   }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      planScale = _useState12[0],
+      setPlanScale = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(true),
       _useState14 = _slicedToArray(_useState13, 2),
-      planScale = _useState14[0],
-      setPlanScale = _useState14[1];
+      isMapDisabled = _useState14[0],
+      setMapDisabledState = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(true),
+  var _useState15 = (0, _react.useState)(false),
       _useState16 = _slicedToArray(_useState15, 2),
-      isMapDisabled = _useState16[0],
-      setMapDisabledState = _useState16[1];
+      autoplayEnabled = _useState16[0],
+      setAutoplayState = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(false),
+  var _useState17 = (0, _react.useState)(cameraFovValues.x1),
       _useState18 = _slicedToArray(_useState17, 2),
-      autoplayEnabled = _useState18[0],
-      setAutoplayState = _useState18[1];
+      cameraFov = _useState18[0],
+      setCameraFov = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(cameraFovValues.x1),
+  var _useState19 = (0, _react.useState)(0),
       _useState20 = _slicedToArray(_useState19, 2),
-      cameraFov = _useState20[0],
-      setCameraFov = _useState20[1];
+      currentRoomIndex = _useState20[0],
+      setCurrentRoomIndex = _useState20[1];
 
-  var _useState21 = (0, _react.useState)(0),
+  var _useState21 = (0, _react.useState)([]),
       _useState22 = _slicedToArray(_useState21, 2),
-      currentRoomIndex = _useState22[0],
-      setCurrentRoomIndex = _useState22[1];
+      panoramas = _useState22[0],
+      setPanoramas = _useState22[1];
 
-  var _useState23 = (0, _react.useState)([]),
+  var _useState23 = (0, _react.useState)(null),
       _useState24 = _slicedToArray(_useState23, 2),
-      panoramas = _useState24[0],
-      setPanoramas = _useState24[1];
-
-  var _useState25 = (0, _react.useState)(null),
-      _useState26 = _slicedToArray(_useState25, 2),
-      viewer = _useState26[0],
-      setViewer = _useState26[1];
+      viewer = _useState24[0],
+      setViewer = _useState24[1];
 
   var changePanorama = function changePanorama(panorama) {
     setCurrentRoomIndex(panorama['panorama_index']);
@@ -334,14 +326,11 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   var setScale = function setScale() {
     if (!viewer) return;
     var image = document.querySelector('.widget-tab__panorama-map img');
-    var _viewer$container = viewer.container,
-        clientWidth = _viewer$container.clientWidth,
-        clientHeight = _viewer$container.clientHeight;
     var imageWidth = image.naturalWidth;
     var imageHeight = image.naturalHeight;
     var imageDelta = imageWidth / imageHeight;
     var maxWidth = 200;
-    var maxHeight = clientHeight - 200;
+    var maxHeight = _store.default.config.height - 200;
     var width = maxWidth;
     var height = width / imageDelta;
 
@@ -358,7 +347,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
       width: width,
       height: height
     }, json));
-    viewer.onWindowResize(clientWidth, clientHeight);
+    viewer.onWindowResize(_store.default.config.width, _store.default.config.height);
   };
 
   var onImageLoaded = function onImageLoaded() {
@@ -419,21 +408,6 @@ var PanoramaTab = function PanoramaTab(_ref4) {
     viewer.enableAutoRate();
   };
 
-  (0, _react.useEffect)(function () {
-    var onResize = function onResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-      closeMap();
-    };
-
-    onResize();
-    window.addEventListener('resize', onResize);
-    return function cleanup() {
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
   (0, _react.useEffect)(function () {
     if (!panoramas.length) return;
     var container = document.querySelector('.widget-tab__panorama-overlay');
@@ -479,7 +453,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
 
     animate();
   }, [panoramas]);
-  (0, _react.useEffect)(setScale, [json, windowSize, viewer]);
+  (0, _react.useEffect)(setScale, [json, viewer, _store.default.config.width, _store.default.config.height]);
   (0, _react.useEffect)(function () {
     return setPanoramas(getPanoramas(json, images, setLoadingState));
   }, [json, images]);
@@ -546,7 +520,7 @@ var PanoramaTab = function PanoramaTab(_ref4) {
   var onMapClick = function onMapClick(event) {
     if (loadingState) return;
 
-    if (windowSize.width <= _deviceWidth.deviceWidth.tablet) {
+    if (_store.default.config.width <= _deviceWidth.deviceWidth.tablet) {
       if (!mapOpen) {
         openMap();
         return;

package/build/components/RotationTab/DefaultView.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _surface = _interopRequireDefault(require("../../assets/icons/surface.svg"));
+
+var _render = _interopRequireDefault(require("../../assets/icons/render.svg"));
+
+var _plan = _interopRequireDefault(require("../../assets/icons/plan.svg"));
+
+var _arrowRight = _interopRequireDefault(require("../../assets/icons/arrow-right.svg"));
+
+var _arrowLeft = _interopRequireDefault(require("../../assets/icons/arrow-left.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DefaultView = function DefaultView(_ref) {
+  var topViewImage = _ref.topViewImage,
+      activeIndex = _ref.activeIndex,
+      currentStep = _ref.currentStep,
+      planImage = _ref.planImage,
+      images = _ref.images,
+      steps = _ref.steps,
+      setCurrentStep = _ref.setCurrentStep,
+      setActiveIndex = _ref.setActiveIndex;
+
+  var getCurrentButtonIcon = function getCurrentButtonIcon() {
+    switch (getNextStep()) {
+      case 'carousel':
+        return _render.default;
+
+      case 'plan':
+        return _surface.default;
+
+      case 'topView':
+        return _plan.default;
+
+      default:
+        return _plan.default;
+    }
+  };
+
+  var getNextStep = function getNextStep() {
+    var currentStepIndex = steps.findIndex(function (step) {
+      return step === currentStep;
+    });
+    return steps[currentStepIndex + 1] || steps[0];
+  };
+
+  var onNextArrowClick = function onNextArrowClick() {
+    var index = activeIndex + 1;
+
+    if (!images[index]) {
+      setActiveIndex(0);
+      return;
+    }
+
+    setActiveIndex(index);
+  };
+
+  var onPrevArrowClick = function onPrevArrowClick() {
+    var index = activeIndex - 1;
+
+    if (!images[index]) {
+      setActiveIndex(images.length - 1);
+      return;
+    }
+
+    setActiveIndex(index);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__isometry"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__isometry-container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "widget-tab__isometry--plan ".concat(currentStep === 'plan' ? 'active' : ''),
+    src: planImage,
+    alt: "plan-view"
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    className: "widget-tab__isometry--top-view ".concat(currentStep === 'topView' ? 'active' : ''),
+    src: topViewImage,
+    alt: "top-view"
+  }), images.map(function (img, index) {
+    return /*#__PURE__*/_react.default.createElement("img", {
+      className: currentStep === 'carousel' && activeIndex === index ? 'active' : '',
+      alt: "rotation-view-".concat(index),
+      key: index,
+      src: img
+    });
+  }))), currentStep === 'carousel' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__isometry-arrows"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__isometry-arrow widget-tab__isometry-arrow--prev",
+    onClick: onPrevArrowClick
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _arrowLeft.default,
+    alt: "arrow-left"
+  })), /*#__PURE__*/_react.default.createElement("span", null, activeIndex + 1, "/", images.length), /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__isometry-arrow widget-tab__isometry-arrow--next",
+    onClick: onNextArrowClick
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _arrowRight.default,
+    alt: "arrow-right"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__isometry-buttons"
+  }, steps.length > 1 && /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__isometry-button",
+    onClick: function onClick() {
+      return setCurrentStep(getNextStep());
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: getCurrentButtonIcon(),
+    alt: "".concat(currentStep, "-icon")
+  }))));
+};
+
+var _default = DefaultView;
+exports.default = _default;

package/build/components/RotationTab/ThreesixtyView.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _locale = _interopRequireDefault(require("../../locale"));
+
+var _rotation = _interopRequireDefault(require("../../assets/icons/rotation.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ThreesixtyView = function ThreesixtyView(_ref) {
+  var initialized = _ref.initialized,
+      showInstructions = _ref.showInstructions,
+      images = _ref.images,
+      activeIndex = _ref.activeIndex,
+      openInstructions = _ref.openInstructions;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__threesixty ".concat(initialized ? 'widget-tab__threesixty--active' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__threesixty-container"
+  }, images.map(function (img, index) {
+    return /*#__PURE__*/_react.default.createElement("img", {
+      className: activeIndex === index ? 'active' : '',
+      alt: "rotation-view-".concat(index),
+      key: index,
+      src: img
+    });
+  }))), !initialized && !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
+    className: "widget-tab__rotation-start",
+    onClick: openInstructions
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__rotation-start-icon"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _rotation.default,
+    alt: "start-icon"
+  })), /*#__PURE__*/_react.default.createElement("span", null, _locale.default.getLocaleText('rotate'))));
+};
+
+var _default = ThreesixtyView;
+exports.default = _default;

package/build/components/{RotationTab.js → RotationTab/index.js}

@@ -11,17 +11,21 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _panzoom = _interopRequireDefault(require("panzoom"));
 
-var _threesixty = _interopRequireDefault(require("../threesixty"));
+var _threesixty = _interopRequireDefault(require("../../threesixty"));
 
-var _helpers = require("../utils/helpers");
+var _rotationModes = require("../../enums/rotationModes");
 
-var _locale = _interopRequireDefault(require("../locale"));
+var _helpers = require("../../utils/helpers");
 
-var _Instructions = _interopRequireDefault(require("./Instructions"));
+var _locale = _interopRequireDefault(require("../../locale"));
 
-var _handMove = _interopRequireDefault(require("../assets/icons/hand-move.svg"));
+var _ThreesixtyView = _interopRequireDefault(require("./ThreesixtyView"));
 
-var _rotation = _interopRequireDefault(require("../assets/icons/rotation.svg"));
+var _Instructions = _interopRequireDefault(require("../Instructions"));
+
+var _DefaultView = _interopRequireDefault(require("./DefaultView"));
+
+var _handMove = _interopRequireDefault(require("../../assets/icons/hand-move.svg"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,9 +54,21 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var RotationTab = function RotationTab(_ref) {
-  var images = _ref.images,
+  var planImage = _ref.planImage,
+      topViewImage = _ref.topViewImage,
+      images = _ref.images,
+      mode = _ref.mode,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+
+  var getSteps = function getSteps() {
+    var availableSteps = [];
+    if (images && images.length > 0) availableSteps.push('carousel');
+    if (planImage) availableSteps.push('plan');
+    if (topViewImage) availableSteps.push('topView');
+    return availableSteps;
+  };
+
   var instructionSteps = [{
     icon: _handMove.default,
     text: _locale.default.getLocaleText('rotate-plan')
@@ -68,25 +84,43 @@ var RotationTab = function RotationTab(_ref) {
       initialized = _useState4[0],
       setInitState = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(0),
+  var _useState5 = (0, _react.useState)(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      activeIndex = _useState6[0],
-      setActiveIndex = _useState6[1];
+      controller = _useState6[0],
+      setController = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(null),
+  var _useState7 = (0, _react.useState)(0),
       _useState8 = _slicedToArray(_useState7, 2),
-      rotation = _useState8[0],
-      setRotation = _useState8[1];
+      activeIndex = _useState8[0],
+      setActiveIndex = _useState8[1];
 
-  var updateRotation = function updateRotation() {
-    setActiveIndex(this.index);
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      rotation = _useState10[0],
+      setRotation = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(getSteps()),
+      _useState12 = _slicedToArray(_useState11, 1),
+      steps = _useState12[0];
+
+  var _useState13 = (0, _react.useState)(steps[0]),
+      _useState14 = _slicedToArray(_useState13, 2),
+      currentStep = _useState14[0],
+      setCurrentStep = _useState14[1];
+
+  var openInstructions = function openInstructions() {
+    return setInstructionsState(true);
   };
 
-  var onStart = function onStart() {
+  function updateRotation() {
+    setActiveIndex(this.index);
+  }
+
+  var createThreesixty = function createThreesixty() {
     setInstructionsState(false);
     setInitState(true);
     var container = document.querySelector('.widget-tab__threesixty-container');
-    var widgetTab = document.querySelector('.widget-tab');
+    var widgetTab = document.querySelector('.widget-tab__rotation');
     var newRotation = new _threesixty.default(container, {
       image: _toConsumableArray(images),
       parentElement: widgetTab,
@@ -94,57 +128,58 @@ var RotationTab = function RotationTab(_ref) {
       speed: 150
     });
     newRotation._update = updateRotation;
-    newRotation.play();
-    var lastIndex = 0;
-    var controller = (0, _panzoom.default)(container, {
-      maxZoom: 3,
-      minZoom: 0.5,
-      beforeMouseDown: function beforeMouseDown(event) {
-        return !event.shiftKey;
-      }
-    });
-    newRotation.controller = controller;
+    newRotation.play(true);
     controller.on('panstart', function () {
-      lastIndex = newRotation.index;
       newRotation.stop();
 
       newRotation._update = function () {};
     });
     controller.on('panend', function () {
-      newRotation.goto(lastIndex);
+      newRotation.goto(newRotation.index);
       newRotation._update = updateRotation;
     });
     setRotation(newRotation);
   };
 
-  var openInstructions = function openInstructions() {
-    return setInstructionsState(true);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__threesixty ".concat(initialized ? 'widget-tab__threesixty--active' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__threesixty-container",
-    onContextMenu: _helpers.preventRightClick
-  }, images.map(function (img, index) {
-    return /*#__PURE__*/_react.default.createElement("img", {
-      src: img,
-      key: index,
-      alt: "rotation-view-".concat(index),
-      className: activeIndex === index ? 'active' : ''
+  (0, _react.useEffect)(function () {
+    var threesixtyContainer = document.querySelector('.widget-tab__threesixty-container');
+    var defaultContainer = document.querySelector('.widget-tab__isometry-container');
+    var container = mode === _rotationModes.rotationModes.THREESIXTY ? threesixtyContainer : defaultContainer;
+    var controller = (0, _panzoom.default)(container, {
+      beforeMouseDown: function beforeMouseDown(event) {
+        return !event.shiftKey;
+      },
+      onDoubleClick: function onDoubleClick(e) {
+        console.log(e);
+        return true;
+      },
+      minZoom: 0.5,
+      maxZoom: 3
     });
-  }))), !initialized && !showInstructions && /*#__PURE__*/_react.default.createElement("button", {
-    className: "widget-tab__threesixty-start",
-    onClick: openInstructions
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widget-tab__threesixty-start-icon"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _rotation.default,
-    alt: "start-icon"
-  })), /*#__PURE__*/_react.default.createElement("span", null, _locale.default.getLocaleText('rotate'))), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
-    disabled: disabled,
+    setController(controller);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "widget-tab__rotation",
+    onContextMenu: _helpers.preventRightClick
+  }, mode === _rotationModes.rotationModes.THREESIXTY && /*#__PURE__*/_react.default.createElement(_ThreesixtyView.default, {
+    showInstructions: showInstructions,
+    openInstructions: openInstructions,
+    initialized: initialized,
+    activeIndex: activeIndex,
+    images: images
+  }), mode === _rotationModes.rotationModes.DEFAULT && /*#__PURE__*/_react.default.createElement(_DefaultView.default, {
+    setActiveIndex: setActiveIndex,
+    setCurrentStep: setCurrentStep,
+    topViewImage: topViewImage,
+    activeIndex: activeIndex,
+    currentStep: currentStep,
+    planImage: planImage,
+    images: images,
+    steps: steps
+  }), showInstructions && /*#__PURE__*/_react.default.createElement(_Instructions.default, {
+    onClick: createThreesixty,
     steps: instructionSteps,
-    onClick: onStart
+    disabled: disabled
   }));
 };
 

package/build/components/Widget.js

@@ -11,9 +11,9 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _store = _interopRequireDefault(require("../store"));
 
-var _modelStore = _interopRequireDefault(require("../store/modelStore"));
+var _fullScreenStore = _interopRequireDefault(require("../store/fullScreenStore"));
 
-var _locale = _interopRequireDefault(require("../locale"));
+var _modelStore = _interopRequireDefault(require("../store/modelStore"));
 
 var _Application = _interopRequireDefault(require("./Application"));
 
@@ -25,36 +25,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-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; }
-
 var Widget = /*#__PURE__*/function () {
   function Widget(container) {
+    var _this = this;
+
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
     _classCallCheck(this, Widget);
 
-    _defineProperty(this, "requiredParams", ['tabs', 'width', 'height', 'locale', 'API_URL']);
-
     var config = _objectSpread(_objectSpread({}, _defaultConfig.default), options);
 
     var 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));
+
+    if (!options.width) {
+      config.width = widgetContainer.offsetWidth;
+    }
+
+    if (!options.height) {
+      config.height = widgetContainer.offsetHeight;
+    }
+
     config.containerElement = widgetContainer;
 
     _store.default.setConfig(config);
 
-    _locale.default.setCurrentLocale(config.locale);
+    _fullScreenStore.default.resize(config);
+
+    if (config.resizable) {
+      window.addEventListener('resize', function () {
+        return _this.onResize();
+      });
+    }
 
-    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_Application.default, {
-      width: config.width,
-      height: config.height
-    }), widgetContainer);
+    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_Application.default, null), widgetContainer);
   }
 
   _createClass(Widget, [{
@@ -63,22 +75,26 @@ var Widget = /*#__PURE__*/function () {
       return _store.default.config;
     }
   }, {
-    key: "updateOptions",
-    value: function updateOptions(config) {
-      var _this = this;
-
-      var newConfig = _objectSpread({}, config);
-
-      this.requiredParams.forEach(function (param) {
-        if (config[param]) return;
-        newConfig[param] = _this.options[param];
-      });
+    key: "updateSize",
+    value: function updateSize(size) {
+      var newConfig = _objectSpread(_objectSpread({}, this.options), size);
 
       _modelStore.default.removeHouse();
 
       _store.default.setConfig(newConfig);
 
-      _locale.default.setCurrentLocale(config.locale);
+      _fullScreenStore.default.resize(newConfig);
+    }
+  }, {
+    key: "onResize",
+    value: function onResize() {
+      var _this$options$contain = this.options.containerElement,
+          width = _this$options$contain.offsetWidth,
+          height = _this$options$contain.offsetHeight;
+      this.updateSize({
+        width: width,
+        height: height
+      });
     }
   }, {
     key: "on",

package/build/config/defaultConfig.js

@@ -7,17 +7,21 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _rotationModes = require("../enums/rotationModes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var defaultConfig = {
   tabs: ['rotation', 'panorama'],
+  name: null,
   logo: null,
   logoUrl: null,
-  width: null,
-  height: null,
+  resizable: true,
+  width: 1920,
+  height: 1080,
   planImage: null,
-  topView: null,
-  topDownView: null,
+  topViewImage: null,
+  rotationMode: _rotationModes.rotationModes.default,
   rotationImages: [],
   panoramaImages: [],
   json: null,