@configuratorware/configurator-admingui 1.37.3 → 1.38.1

package/App/Data.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getErrorsFromValidatedDataObject = exports.validateDataObject = exports.DataValidator = exports["default"] = exports.whiteSpacePattern = void 0;
+exports.getErrorsFromValidatedDataObject = exports.validateDataObject = exports.DataValidator = exports["default"] = exports.identifierPattern = exports.whiteSpacePattern = void 0;
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
@@ -29,6 +29,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var whiteSpacePattern = /^[\S]+$/;
 exports.whiteSpacePattern = whiteSpacePattern;
+var identifierPattern = /^[A-za-z0-9_.-]+$/;
+exports.identifierPattern = identifierPattern;
 
 _validate.validate.validators.nonEmptyArray = function (value, options) {
   if (options && options === true && (0, _isArray["default"])(value) && value.length !== 0) {
@@ -55,9 +57,7 @@ _validate.validate.validators.numericOrEmpty = function (value, options) {
 };
 
 _validate.validate.validators.identifier = function (value, options) {
-  var pattern = /^[A-za-z0-9_.-]+$/;
-
-  if (options && options === true && typeof value === 'string' && value.match(pattern) && value.match(pattern)[0] === value) {
+  if (options && options === true && typeof value === 'string' && value.match(identifierPattern) && value.match(identifierPattern)[0] === value) {
     return null;
   }
 

package/Screens/Designer/SubScreens/Visualization/Components/AreaEditor.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _funDraw = require("../../../../../Utils/FunDraw/funDraw");
 
 var _movableObject = require("../../../../../Utils/FunDraw/movableObject");
@@ -75,6 +77,80 @@ var AreaEditor = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "backgroundImage", null);
 
+    _defineProperty(_assertThisInitialized(_this), "onChangeDebounced", (0, _debounce["default"])(function (prevArea) {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          area = _assertThisInitialize.area;
+
+      var onChange = _this.props.onChange;
+      onChange && !(0, _isEqual["default"])(area, prevArea) && onChange();
+    }, 1000));
+
+    _defineProperty(_assertThisInitialized(_this), "setupAreaEditor", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var canvas, _canvas$parentElement, width, backgroundImageElement, textureAspectRatio;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              canvas = _this.canvasRef.current;
+              _this.ctx = canvas.getContext('2d');
+              _canvas$parentElement = canvas.parentElement.getBoundingClientRect(), width = _canvas$parentElement.width;
+              backgroundImageElement = _this.props.backgroundImageElement; // resize the canvas to fit the texture aspect ratio
+
+              textureAspectRatio = backgroundImageElement.width / backgroundImageElement.height;
+              canvas.width = width;
+              canvas.height = width / textureAspectRatio;
+              _context.next = 9;
+              return _this.createScaledArea();
+
+            case 9:
+              _this.area = _context.sent;
+
+              if (backgroundImageElement) {
+                _this.backgroundImage = (0, _funDraw.fitSize)((0, _funDraw.createImageObject)(backgroundImageElement), canvas.width, canvas.height);
+              }
+
+              _this._movableArea = (0, _movableObject.createMovableObjectWithControls)(canvas, _this.area, {
+                drawFunction: function drawFunction(object, ctx) {
+                  (0, _funDraw.draw)(object, ctx); // draw the background image behind the area
+
+                  ctx.save();
+                  ctx.globalCompositeOperation = 'destination-over';
+                  _this.backgroundImage && (0, _funDraw.draw)(_this.backgroundImage, ctx);
+                  ctx.restore();
+
+                  _this.onRedraw();
+                },
+                controlFactory: function controlFactory(object) {
+                  return (0, _funDraw.setDefaultControls)(object, 20, 0);
+                },
+                onUpdate: function onUpdate(_ref2) {
+                  var getData = _ref2.getData;
+
+                  var _getData = getData(),
+                      object = _getData.object;
+
+                  var _assertThisInitialize2 = _assertThisInitialized(_this),
+                      area = _assertThisInitialize2.area;
+
+                  _this.area = object;
+
+                  _this.onChangeDebounced(area);
+                }
+              });
+
+              _this._movableArea.init();
+
+              _this.onUpdate();
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+
     _defineProperty(_assertThisInitialized(_this), "onRedraw", (0, _debounce["default"])(function () {
       var onRedraw = _this.props.onRedraw;
 
@@ -98,73 +174,20 @@ var AreaEditor = /*#__PURE__*/function (_React$Component) {
 
   _createClass(AreaEditor, [{
     key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _this2 = this;
-
-        var canvas, backgroundImageElement;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                canvas = this.canvasRef.current;
-                this.ctx = canvas.getContext('2d');
-                _context.next = 4;
-                return this.createScaledArea();
-
-              case 4:
-                this.area = _context.sent;
-                backgroundImageElement = this.props.backgroundImageElement;
-
-                if (backgroundImageElement) {
-                  this.backgroundImage = (0, _funDraw.fitSize)((0, _funDraw.createImageObject)(backgroundImageElement), canvas.width, canvas.height);
-                }
-
-                this._movableArea = (0, _movableObject.createMovableObjectWithControls)(canvas, this.area, {
-                  drawFunction: function drawFunction(object, ctx) {
-                    (0, _funDraw.draw)(object, ctx); // draw the background image behind the area
-
-                    ctx.save();
-                    ctx.globalCompositeOperation = 'destination-over';
-                    _this2.backgroundImage && (0, _funDraw.draw)(_this2.backgroundImage, ctx);
-                    ctx.restore();
-
-                    _this2.onRedraw();
-                  },
-                  controlFactory: function controlFactory(object) {
-                    return (0, _funDraw.setDefaultControls)(object);
-                  },
-                  onUpdate: function onUpdate(_ref) {
-                    var getData = _ref.getData;
-
-                    var _getData = getData(),
-                        object = _getData.object;
-
-                    _this2.area = object;
-                  }
-                });
-
-                this._movableArea.init();
-
-                this.onUpdate();
-
-              case 10:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function componentDidMount() {
-        return _componentDidMount.apply(this, arguments);
-      }
-
-      return componentDidMount;
-    }()
+    value: function componentDidMount() {
+      this.setupAreaEditor();
+      window.addEventListener('resize', this.setupAreaEditor);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState, snapshot) {
+      prevProps.areaData !== this.props.areaData && this.setupAreaEditor();
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.setupAreaEditor);
+
       this._movableArea.dispose();
     }
   }, {
@@ -277,10 +300,9 @@ var AreaEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement("canvas", {
         ref: this.canvasRef,
-        width: 500,
-        height: 500,
         style: {
-          border: '1px solid #000'
+          border: '1px solid #000',
+          maxWidth: '100%'
         }
       });
     }

package/Screens/Designer/SubScreens/Visualization/Components/AreaEditorForm.js

@@ -0,0 +1,203 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AreaEditorForm = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _i18n = require("../../../../../App/i18n");
+
+var _excluded = ["classes", "onChange", "value"];
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var toNumber = function toNumber(value) {
+  return Number(value) || 0;
+};
+
+var toRad = function toRad(deg) {
+  return Math.PI * deg / 180;
+};
+
+var toDeg = function toDeg(rad) {
+  return (180 * rad / Math.PI).toFixed(2);
+};
+
+var formatters = {
+  angle: function angle(v) {
+    return toDeg(toNumber(v));
+  },
+  number: function number(v) {
+    return toNumber(v).toFixed(2);
+  },
+  "boolean": function boolean(v) {
+    return !!v;
+  }
+};
+
+function persistEvent(fn) {
+  return function (evt) {
+    evt.persist();
+    fn(evt);
+  };
+}
+
+var NumberInput = (0, _styles.withStyles)({
+  root: {
+    maxWidth: 100,
+    marginRight: 20
+  }
+})(function (_ref) {
+  var classes = _ref.classes,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      _value = _useState2[0],
+      _setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var onFocus = function onFocus() {
+    return setFocused(true);
+  };
+
+  var onBlur = (0, _react.useMemo)(function () {
+    return function () {
+      _setValue(value);
+
+      setFocused(false);
+    };
+  }, [value]);
+  (0, _react.useEffect)(function () {
+    !focused && _setValue(value);
+  }, [value, focused]);
+  var onChangeDebounced = (0, _react.useMemo)(function () {
+    return persistEvent((0, _debounce["default"])(onChange, 50));
+  }, [onChange]);
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+    type: "number",
+    className: classes.root,
+    onChange: function onChange(evt) {
+      _setValue(evt.target.value);
+
+      onChangeDebounced(evt);
+    },
+    onFocus: onFocus,
+    onBlur: onBlur,
+    value: _value
+  }, props));
+});
+var AreaEditorForm = (0, _styles.withStyles)({
+  sectionTitle: {
+    fontSize: '1.2em',
+    marginTop: '1.2em',
+    marginBottom: '0.6em'
+  },
+  groupTitle: {
+    marginTop: '0.6em'
+  }
+})(function (_ref2) {
+  var designAreaData = _ref2.designAreaData,
+      onChange = _ref2.onChange,
+      className = _ref2.className,
+      classes = _ref2.classes;
+
+  var numberChangeHandler = function numberChangeHandler(evt) {
+    if (evt.target.value) {
+      onChange(evt.target.name, toNumber(evt.target.value));
+    }
+  };
+
+  var angleChangeHandler = function angleChangeHandler(evt) {
+    if (evt.target.value) {
+      onChange(evt.target.name, toRad(toNumber(evt.target.value)));
+    }
+  };
+
+  var format = function format(path) {
+    var formatter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : formatters.number;
+    return formatter(toNumber((0, _get["default"])(designAreaData, path)));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(NumberInput, {
+    name: 'position.angle',
+    label: (0, _i18n.t)('designer.advancedEditor.rotation'),
+    onChange: angleChangeHandler,
+    value: format('position.angle', formatters.angle)
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.groupTitle
+  }, (0, _i18n.t)('designer.advancedEditor.scaling')), /*#__PURE__*/_react["default"].createElement(NumberInput, {
+    name: 'position.width',
+    label: (0, _i18n.t)('designer.advancedEditor.width'),
+    onChange: numberChangeHandler,
+    value: format('position.width'),
+    inputProps: {
+      min: 1
+    }
+  }), /*#__PURE__*/_react["default"].createElement(NumberInput, {
+    name: 'position.height',
+    label: (0, _i18n.t)('designer.advancedEditor.height'),
+    onChange: numberChangeHandler,
+    value: format('position.height'),
+    inputProps: {
+      min: 1
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.groupTitle
+  }, (0, _i18n.t)('designer.advancedEditor.positioning')), /*#__PURE__*/_react["default"].createElement(NumberInput, {
+    name: 'position.x',
+    label: 'x',
+    onChange: numberChangeHandler,
+    value: format('position.x')
+  }), /*#__PURE__*/_react["default"].createElement(NumberInput, {
+    name: 'position.y',
+    label: 'y',
+    onChange: numberChangeHandler,
+    value: format('position.y')
+  })));
+});
+exports.AreaEditorForm = AreaEditorForm;
+var _default = AreaEditorForm;
+exports["default"] = _default;

package/Screens/Designer/SubScreens/Visualization/Containers/Edit/DataLinks.js

@@ -89,7 +89,9 @@ var applyLinks = function applyLinks(prevData, nextData) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var positionRatio = options.positionRatio,
       _options$baseShapePad = options.baseShapePadding,
-      baseShapePadding = _options$baseShapePad === void 0 ? _Constants.DEFAULT_BASE_SHAPE_PADDING : _options$baseShapePad; // set min value for area size
+      baseShapePadding = _options$baseShapePad === void 0 ? _Constants.DEFAULT_BASE_SHAPE_PADDING : _options$baseShapePad,
+      _options$recalculateP = options.recalculatePosition,
+      recalculatePosition = _options$recalculateP === void 0 ? true : _options$recalculateP; // set min value for area size
 
   if ((0, _get["default"])(nextData, 'position.width') <= sizeMin) {
     (0, _set["default"])(nextData, 'position.width', sizeMin);
@@ -142,19 +144,21 @@ var applyLinks = function applyLinks(prevData, nextData) {
     if ((0, _get["default"])(nextData, 'baseShape.r', 0) < minRadius) {
       (0, _set["default"])(nextData, 'baseShape.r', minRadius);
     }
-  } // recalculating the position with the baseShape size change ratio
-
+  }
 
-  withRatio(prevData, nextData, 'baseShape.width', function (r) {
-    isFinite(r) && calcPathValue(nextData, 'position.x', function (v) {
-      return v * r;
+  if (recalculatePosition) {
+    // recalculating the position with the baseShape size change ratio
+    withRatio(prevData, nextData, 'baseShape.width', function (r) {
+      isFinite(r) && calcPathValue(nextData, 'position.x', function (v) {
+        return v * r;
+      });
     });
-  });
-  withRatio(prevData, nextData, 'baseShape.height', function (r) {
-    isFinite(r) && calcPathValue(nextData, 'position.y', function (v) {
-      return v * r;
+    withRatio(prevData, nextData, 'baseShape.height', function (r) {
+      isFinite(r) && calcPathValue(nextData, 'position.y', function (v) {
+        return v * r;
+      });
     });
-  });
+  }
 };
 
 exports.applyLinks = applyLinks;

package/Screens/Designer/SubScreens/Visualization/Containers/Edit/Edit.js

@@ -81,6 +81,8 @@ var _sendMessage = require("../../../../../../Utils/Function/sendMessage");
 
 var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
 
+var _AreaEditorForm = _interopRequireDefault(require("../../Components/AreaEditorForm"));
+
 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); }
@@ -125,26 +127,58 @@ var styles = function styles(theme) {
     editorRoot: _defineProperty({
       display: 'flex',
       flexDirection: 'row',
+      height: 'calc(100vh - 180px)',
       '& > $header': _defineProperty({
         display: 'none'
       }, breakPoint.max, {
         display: 'block'
+      }),
+      '& > $header3DContainer': _defineProperty({
+        display: 'none'
+      }, breakPoint.max, {
+        display: 'flex'
       })
     }, breakPoint.max, {
       flexDirection: 'column'
     }),
     leftSide: {
-      marginRight: 2 * theme.spacing.unit
+      marginRight: 2 * theme.spacing.unit,
+      flex: 1
     },
     header: {
       flex: 1
     },
+    header3D: {
+      flex: 1
+    },
+    header3DContainer: {
+      display: 'flex',
+      flexDirection: 'row'
+    },
     rightSide: {
       flex: 1,
       '& > $header': _defineProperty({}, breakPoint.max, {
         display: 'none'
       })
     },
+    rightSide3D: _defineProperty({
+      flex: 1,
+      '& > $header3DContainer': _defineProperty({}, breakPoint.max, {
+        display: 'none'
+      }),
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: '50%',
+      marginLeft: 'auto',
+      overflow: 'hidden'
+    }, breakPoint.max, {
+      maxWidth: '100%'
+    }),
+    areaEditorForm: {
+      marginLeft: 4 * theme.spacing.unit,
+      marginBottom: 2 * theme.spacing.unit,
+      flex: 1
+    },
     title: {
       fontSize: 20,
       marginBottom: theme.spacing.unit
@@ -183,6 +217,12 @@ var styles = function styles(theme) {
       width: '100%',
       height: '39vw'
     },
+    visualizationContainer3D: {
+      width: 'auto',
+      flex: 1,
+      maxHeight: '100%',
+      overflow: 'hidden'
+    },
     loaderContainer: {
       minHeight: 400,
       display: 'flex',
@@ -337,8 +377,9 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
       var _this$props$designAre = _this.props.designArea,
           width = _this$props$designAre.width,
           height = _this$props$designAre.height;
-      _this.baseShapeEditor && (0, _DataLinks.applyLinks)(previousData, nextData, {
-        positionRatio: (width || 1) / (height || 1)
+      (0, _DataLinks.applyLinks)(previousData, nextData, {
+        positionRatio: (width || 1) / (height || 1),
+        recalculatePosition: isKindOf2D(_this.props.mode)
       });
       data.updateValues(nextData);
 
@@ -754,7 +795,7 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
         return dpm.title;
       }).join(', ');
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.header
+        className: isKindOf3D(mode) ? classes.header3D : classes.header
       }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "h3",
         className: classes.title
@@ -790,6 +831,18 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
         label: (0, _i18n.t)('designer.designArea.isDefaultView')
       }));
     }
+  }, {
+    key: "renderHeader3D",
+    value: function renderHeader3D(designAreaData) {
+      var classes = this.props.classes;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.header3DContainer
+      }, this.renderHeader(), /*#__PURE__*/_react["default"].createElement(_AreaEditorForm["default"], {
+        designAreaData: designAreaData,
+        onChange: this.onChangeData,
+        className: classes.areaEditorForm
+      }));
+    }
   }, {
     key: "renderVisualization",
     value: function renderVisualization(designAreaData) {
@@ -818,8 +871,9 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
       }
 
       if (isKindOf3D(mode)) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderHeader(), /*#__PURE__*/_react["default"].createElement(_VisualizationContainer["default"], {
-          three: three
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderHeader3D(designAreaData), /*#__PURE__*/_react["default"].createElement(_VisualizationContainer["default"], {
+          three: three,
+          className: classes.visualizationContainer3D
         }));
       }
 
@@ -830,7 +884,8 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props6 = this.props,
           designArea = _this$props6.designArea,
-          classes = _this$props6.classes;
+          classes = _this$props6.classes,
+          mode = _this$props6.mode;
       var three = this.three;
 
       if (!designArea) {
@@ -861,7 +916,7 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
         className: classes.editorRoot
       }, loading && /*#__PURE__*/_react["default"].createElement(LoadingComponent, {
         fullSize: true
-      }), this.renderHeader(), imageElement && /*#__PURE__*/_react["default"].createElement("div", {
+      }), isKindOf3D(mode) ? this.renderHeader3D(data) : this.renderHeader(), imageElement && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.leftSide
       }, /*#__PURE__*/_react["default"].createElement(_AreaEditor.AreaEditor, {
         backgroundImageElement: imageElement,
@@ -869,9 +924,10 @@ var VisualizationSettingsEdit = /*#__PURE__*/function (_Component) {
         maskObject: this.getCurrentMaskObject(),
         areaData: data && data.position,
         areaRatio: areaRatio,
-        ref: this.areaEditorRef
+        ref: this.areaEditorRef,
+        onChange: this.updateData
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.rightSide
+        className: isKindOf3D(mode) ? classes.rightSide3D : classes.rightSide
       }, this.renderVisualization(data), errors && /*#__PURE__*/_react["default"].createElement("ul", {
         className: classes.errors
       }, errors.map(function (e) {

package/Screens/Designer/SubScreens/Visualization/Screen.js

@@ -35,7 +35,7 @@ var styles = function styles() {
   return {
     paperRoot: {
       maxWidth: '90vw',
-      maxHeight: '90vw',
+      maxHeight: '90vh',
       marginTop: '16px',
       marginBottom: '16px'
     }