@configuratorware/configurator-admingui 1.38.0 → 1.38.1

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'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.38.0",
+  "version": "1.38.1",
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
@@ -29,7 +29,7 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^3.2.6",
     "react-sortable-hoc": "^1.11.0",
-    "redhotmagma-visualization": "1.38.0",
+    "redhotmagma-visualization": "1.38.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
 import {
     createImageObject,
     draw,
@@ -32,13 +33,34 @@ export class AreaEditor extends React.Component {
     activeControl = null;
     backgroundImage = null;
 
-    async componentDidMount() {
+    componentDidMount() {
+        this.setupAreaEditor();
+        window.addEventListener('resize', this.setupAreaEditor);
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        prevProps.areaData !== this.props.areaData && this.setupAreaEditor();
+    }
+
+    onChangeDebounced = debounce(prevArea => {
+        const { area } = this;
+        const { onChange } = this.props;
+        onChange && !isEqual(area, prevArea) && onChange();
+    }, 1000);
+
+    setupAreaEditor = async () => {
         const canvas = this.canvasRef.current;
         this.ctx = canvas.getContext('2d');
+        const { width } = canvas.parentElement.getBoundingClientRect();
+        const { backgroundImageElement } = this.props;
+
+        // resize the canvas to fit the texture aspect ratio
+        const textureAspectRatio = backgroundImageElement.width / backgroundImageElement.height;
+        canvas.width = width;
+        canvas.height = width / textureAspectRatio;
 
         this.area = await this.createScaledArea();
 
-        const { backgroundImageElement } = this.props;
         if (backgroundImageElement) {
             this.backgroundImage = fitSize(
                 createImageObject(backgroundImageElement),
@@ -59,19 +81,22 @@ export class AreaEditor extends React.Component {
 
                 this.onRedraw();
             },
-            controlFactory: object => setDefaultControls(object),
+            controlFactory: object => setDefaultControls(object, 20, 0),
             onUpdate: ({ getData }) => {
                 const { object } = getData();
+                const { area } = this;
                 this.area = object;
+                this.onChangeDebounced(area);
             },
         });
 
         this._movableArea.init();
 
         this.onUpdate();
-    }
+    };
 
     componentWillUnmount() {
+        window.removeEventListener('resize', this.setupAreaEditor);
         this._movableArea.dispose();
     }
 
@@ -144,6 +169,6 @@ export class AreaEditor extends React.Component {
     canvasRef = React.createRef();
 
     render() {
-        return <canvas ref={this.canvasRef} width={500} height={500} style={{ border: '1px solid #000' }} />;
+        return <canvas ref={this.canvasRef} style={{ border: '1px solid #000', maxWidth: '100%' }} />;
     }
 }

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

@@ -0,0 +1,139 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import get from 'lodash/get';
+import debounce from 'lodash/debounce';
+import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
+import { t } from '../../../../../App/i18n';
+
+const toNumber = value => Number(value) || 0;
+
+const toRad = deg => (Math.PI * deg) / 180;
+
+const toDeg = rad => ((180 * rad) / Math.PI).toFixed(2);
+
+const formatters = {
+    angle: v => toDeg(toNumber(v)),
+    number: v => toNumber(v).toFixed(2),
+    boolean: v => !!v,
+};
+
+function persistEvent(fn) {
+    return function(evt) {
+        evt.persist();
+        fn(evt);
+    };
+}
+
+const NumberInput = withStyles({
+    root: {
+        maxWidth: 100,
+        marginRight: 20,
+    },
+})(({ classes, onChange, value, ...props }) => {
+    const [_value, _setValue] = useState(value);
+    const [focused, setFocused] = useState(false);
+    const onFocus = () => setFocused(true);
+    const onBlur = useMemo(
+        () => () => {
+            _setValue(value);
+            setFocused(false);
+        },
+        [value]
+    );
+    useEffect(() => {
+        !focused && _setValue(value);
+    }, [value, focused]);
+    const onChangeDebounced = useMemo(() => persistEvent(debounce(onChange, 50)), [onChange]);
+    return (
+        <TextField
+            type="number"
+            className={classes.root}
+            onChange={evt => {
+                _setValue(evt.target.value);
+                onChangeDebounced(evt);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            value={_value}
+            {...props}
+        />
+    );
+});
+
+export const AreaEditorForm = withStyles({
+    sectionTitle: {
+        fontSize: '1.2em',
+        marginTop: '1.2em',
+        marginBottom: '0.6em',
+    },
+    groupTitle: {
+        marginTop: '0.6em',
+    },
+})(({ designAreaData, onChange, className, classes }) => {
+    const numberChangeHandler = evt => {
+        if (evt.target.value) {
+            onChange(evt.target.name, toNumber(evt.target.value));
+        }
+    };
+
+    const angleChangeHandler = evt => {
+        if (evt.target.value) {
+            onChange(evt.target.name, toRad(toNumber(evt.target.value)));
+        }
+    };
+
+    const format = (path, formatter = formatters.number) => formatter(toNumber(get(designAreaData, path)));
+
+    return (
+        <div className={className}>
+            <div>
+                <NumberInput
+                    name={'position.angle'}
+                    label={t('designer.advancedEditor.rotation')}
+                    onChange={angleChangeHandler}
+                    value={format('position.angle', formatters.angle)}
+                />
+            </div>
+
+            <div>
+                <div className={classes.groupTitle}>{t('designer.advancedEditor.scaling')}</div>
+                <NumberInput
+                    name={'position.width'}
+                    label={t('designer.advancedEditor.width')}
+                    onChange={numberChangeHandler}
+                    value={format('position.width')}
+                    inputProps={{
+                        min: 1,
+                    }}
+                />
+                <NumberInput
+                    name={'position.height'}
+                    label={t('designer.advancedEditor.height')}
+                    onChange={numberChangeHandler}
+                    value={format('position.height')}
+                    inputProps={{
+                        min: 1,
+                    }}
+                />
+            </div>
+
+            <div>
+                <div className={classes.groupTitle}>{t('designer.advancedEditor.positioning')}</div>
+                <NumberInput
+                    name={'position.x'}
+                    label={'x'}
+                    onChange={numberChangeHandler}
+                    value={format('position.x')}
+                />
+                <NumberInput
+                    name={'position.y'}
+                    label={'y'}
+                    onChange={numberChangeHandler}
+                    value={format('position.y')}
+                />
+            </div>
+        </div>
+    );
+});
+
+export default AreaEditorForm;

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

@@ -57,7 +57,11 @@ export const multiplyToPixel = m => v => Math.round(v * m);
 const sizeMin = 5;
 
 export const applyLinks = (prevData, nextData, options = {}) => {
-    const { positionRatio, baseShapePadding = DEFAULT_BASE_SHAPE_PADDING } = options;
+    const {
+        positionRatio,
+        baseShapePadding = DEFAULT_BASE_SHAPE_PADDING,
+        recalculatePosition = true,
+    } = options;
 
     // set min value for area size
     if (get(nextData, 'position.width') <= sizeMin) {
@@ -105,11 +109,13 @@ export const applyLinks = (prevData, nextData, options = {}) => {
             set(nextData, 'baseShape.r', minRadius);
         }
     }
-    // recalculating the position with the baseShape size change ratio
-    withRatio(prevData, nextData, 'baseShape.width', r => {
-        isFinite(r) && calcPathValue(nextData, 'position.x', v => v * r);
-    });
-    withRatio(prevData, nextData, 'baseShape.height', r => {
-        isFinite(r) && calcPathValue(nextData, 'position.y', v => v * r);
-    });
+    if (recalculatePosition) {
+        // recalculating the position with the baseShape size change ratio
+        withRatio(prevData, nextData, 'baseShape.width', r => {
+            isFinite(r) && calcPathValue(nextData, 'position.x', v => v * r);
+        });
+        withRatio(prevData, nextData, 'baseShape.height', r => {
+            isFinite(r) && calcPathValue(nextData, 'position.y', v => v * r);
+        });
+    }
 };

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

@@ -48,6 +48,7 @@ import Checkbox from '../../../../../../UIComponents/Checkbox';
 import FormControlLabel from '../../../../../../UIComponents/FormControlLabel';
 import { sendMessage } from '../../../../../../Utils/Function/sendMessage';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import AreaEditorForm from '../../Components/AreaEditorForm';
 
 const styles = theme => {
     const breakPoint = {
@@ -57,22 +58,37 @@ const styles = theme => {
         editorRoot: {
             display: 'flex',
             flexDirection: 'row',
+            height: 'calc(100vh - 180px)',
             '& > $header': {
                 display: 'none',
                 [breakPoint.max]: {
                     display: 'block',
                 },
             },
+            '& > $header3DContainer': {
+                display: 'none',
+                [breakPoint.max]: {
+                    display: 'flex',
+                },
+            },
             [breakPoint.max]: {
                 flexDirection: 'column',
             },
         },
         leftSide: {
             marginRight: 2 * theme.spacing.unit,
+            flex: 1,
         },
         header: {
             flex: 1,
         },
+        header3D: {
+            flex: 1,
+        },
+        header3DContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
         rightSide: {
             flex: 1,
             '& > $header': {
@@ -81,6 +97,27 @@ const styles = theme => {
                 },
             },
         },
+        rightSide3D: {
+            flex: 1,
+            '& > $header3DContainer': {
+                [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,
@@ -120,6 +157,12 @@ const styles = theme => {
             width: '100%',
             height: '39vw',
         },
+        visualizationContainer3D: {
+            width: 'auto',
+            flex: 1,
+            maxHeight: '100%',
+            overflow: 'hidden',
+        },
         loaderContainer: {
             minHeight: 400,
             display: 'flex',
@@ -475,10 +518,10 @@ export class VisualizationSettingsEdit extends Component {
             designArea: { width, height },
         } = this.props;
 
-        this.baseShapeEditor &&
-            applyLinks(previousData, nextData, {
-                positionRatio: (width || 1) / (height || 1),
-            });
+        applyLinks(previousData, nextData, {
+            positionRatio: (width || 1) / (height || 1),
+            recalculatePosition: isKindOf2D(this.props.mode),
+        });
 
         data.updateValues(nextData);
         if (data.validate()) {
@@ -520,7 +563,7 @@ export class VisualizationSettingsEdit extends Component {
             .map(dpm => dpm.title)
             .join(', ');
         return (
-            <div className={classes.header}>
+            <div className={isKindOf3D(mode) ? classes.header3D : classes.header}>
                 <Typography variant="h3" className={classes.title}>
                     <TranslationFinder
                         data={designArea.texts}
@@ -572,6 +615,20 @@ export class VisualizationSettingsEdit extends Component {
         );
     }
 
+    renderHeader3D(designAreaData) {
+        const { classes } = this.props;
+        return (
+            <div className={classes.header3DContainer}>
+                {this.renderHeader()}
+                <AreaEditorForm
+                    designAreaData={designAreaData}
+                    onChange={this.onChangeData}
+                    className={classes.areaEditorForm}
+                />
+            </div>
+        );
+    }
+
     renderVisualization(designAreaData) {
         const { mode, classes } = this.props;
         const { three } = this;
@@ -598,8 +655,8 @@ export class VisualizationSettingsEdit extends Component {
         if (isKindOf3D(mode)) {
             return (
                 <React.Fragment>
-                    {this.renderHeader()}
-                    <VisualizationContainer three={three} />
+                    {this.renderHeader3D(designAreaData)}
+                    <VisualizationContainer three={three} className={classes.visualizationContainer3D} />
                 </React.Fragment>
             );
         }
@@ -607,7 +664,7 @@ export class VisualizationSettingsEdit extends Component {
     }
 
     render() {
-        const { designArea, classes } = this.props;
+        const { designArea, classes, mode } = this.props;
         const { three } = this;
         if (!designArea) {
             return null;
@@ -634,7 +691,7 @@ export class VisualizationSettingsEdit extends Component {
             <div className={classes.editorRoot}>
                 {loading && <LoadingComponent fullSize />}
 
-                {this.renderHeader()}
+                {isKindOf3D(mode) ? this.renderHeader3D(data) : this.renderHeader()}
 
                 {imageElement && (
                     <div className={classes.leftSide}>
@@ -645,11 +702,12 @@ export class VisualizationSettingsEdit extends Component {
                             areaData={data && data.position}
                             areaRatio={areaRatio}
                             ref={this.areaEditorRef}
+                            onChange={this.updateData}
                         />
                     </div>
                 )}
 
-                <div className={classes.rightSide}>
+                <div className={isKindOf3D(mode) ? classes.rightSide3D : classes.rightSide}>
                     {this.renderVisualization(data)}
 
                     {errors && (

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

@@ -13,7 +13,7 @@ import { provideLocalState, withLocalState } from '../../../../Utils/HOCs/LocalS
 const styles = () => ({
     paperRoot: {
         maxWidth: '90vw',
-        maxHeight: '90vw',
+        maxHeight: '90vh',
         marginTop: '16px',
         marginBottom: '16px',
     },