@configuratorware/configurator-admingui 1.37.3 → 1.38.1

package/Screens/Item/Components/CopyCreatorItemDialog.js

@@ -0,0 +1,246 @@
+"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"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRedux = require("react-redux");
+
+var _i18n = require("../../../App/i18n");
+
+var _Dialog = _interopRequireDefault(require("../../../UIComponents/Dialog"));
+
+var _FlatButton = _interopRequireDefault(require("../../../UIComponents/FlatButton"));
+
+var _TextField = _interopRequireDefault(require("../../../UIComponents/TextField"));
+
+var _IconButton = _interopRequireDefault(require("../../../UIComponents/IconButton"));
+
+var _Tooltip = _interopRequireDefault(require("../../../UIComponents/Tooltip"));
+
+var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
+
+var _Actions = _interopRequireDefault(require("../Reducers/Actions"));
+
+var _IntlInput = _interopRequireDefault(require("../../../Components/FormFragments/IntlInput"));
+
+var _Form = require("../../../Components/Form");
+
+var _Data = require("../../../App/Data");
+
+var _Actions2 = require("../../../App/Reducers/Frame/Actions");
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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; }
+
+var IntlInput = (0, _IntlInput["default"])(_Form.InputSwitch);
+
+var CopyCreatorItemDialog = function CopyCreatorItemDialog(_ref) {
+  var data = _ref.data,
+      selected = _ref.selected,
+      copyCreatorItem = _ref.copyCreatorItem,
+      clearSelection = _ref.clearSelection,
+      reloadList = _ref.reloadList,
+      showErrorMessage = _ref.showErrorMessage;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showEditor = _useState2[0],
+      setShowEditor = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      identifier = _useState4[0],
+      setIdentifier = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      identifierError = _useState6[0],
+      setIdentifierError = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      titles = _useState8[0],
+      setTitles = _useState8[1];
+
+  var hasSelection = selected && selected.length === 1;
+  var hasOnlyCreatorItemsSelected = hasSelection;
+
+  if (hasSelection) {
+    selected.map(function (selectedIndex) {
+      return hasOnlyCreatorItemsSelected = data[selectedIndex].configurationMode === 'creator';
+    });
+  }
+
+  var onTitleChange = function onTitleChange(name, values) {
+    setTitles(values);
+  };
+
+  var onIdentifierChange = function onIdentifierChange(name, identifier) {
+    setIdentifier(identifier);
+  };
+
+  var validateIdentifier = function validateIdentifier() {
+    var isSameIdentifier = identifier === data[selected[0]].identifier;
+
+    if (identifier.match(_Data.identifierPattern) && identifier.match(_Data.identifierPattern)[0] === identifier && !isSameIdentifier) {
+      setIdentifierError(null);
+    } else {
+      setIdentifierError((0, _i18n.t)('customValidators.identifier'));
+    }
+  };
+
+  var onSave = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var saveResult;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return copyCreatorItem(data[selected[0]].id, identifier, titles);
+
+            case 2:
+              saveResult = _context.sent;
+
+              if (saveResult.error) {
+                showErrorMessage((0, _i18n.t)('entity.saveError'));
+              } else {
+                clearSelection();
+                reloadList();
+              }
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onSave() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (!hasOnlyCreatorItemsSelected) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: (0, _i18n.t)('item.copyCreatorItemDialogTitle')
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    color: hasSelection ? 'primary' : '',
+    onClick: function onClick() {
+      return setShowEditor(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_FileCopy["default"], null))), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+    title: (0, _i18n.t)('item.copyCreatorItemDialogTitle'),
+    actions: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_FlatButton["default"], {
+      label: (0, _i18n.t)('cancel'),
+      onClick: function onClick() {
+        return setShowEditor(false);
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_FlatButton["default"], {
+      label: (0, _i18n.t)('duplicate'),
+      primary: true,
+      onClick: onSave,
+      disabled: identifier === '' || identifierError !== null
+    })),
+    open: showEditor && hasOnlyCreatorItemsSelected
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      mindWidth: '620px',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    label: (0, _i18n.t)('item.copyItemIdentifier'),
+    onChange: function onChange(evt) {
+      onIdentifierChange(name, evt.target.value);
+    },
+    onBlur: validateIdentifier,
+    style: {
+      width: '100%'
+    },
+    error: identifierError !== null,
+    helperText: identifierError,
+    value: identifier,
+    type: 'text'
+  }), /*#__PURE__*/_react["default"].createElement(IntlInput, {
+    intl: {
+      name: 'title',
+      type: 'text'
+    },
+    label: (0, _i18n.t)('item.copyItemTitle'),
+    onChange: onTitleChange,
+    style: {
+      width: 200
+    },
+    value: titles
+  }))));
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    copyCreatorItem: function () {
+      var _copyCreatorItem = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(sourceItemId, newItemIdentifier, itemTexts) {
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return dispatch(_Actions["default"].copyCreatorItem(sourceItemId, newItemIdentifier, itemTexts));
+
+              case 2:
+                return _context2.abrupt("return", _context2.sent);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      function copyCreatorItem(_x, _x2, _x3) {
+        return _copyCreatorItem.apply(this, arguments);
+      }
+
+      return copyCreatorItem;
+    }(),
+    showErrorMessage: function showErrorMessage(errorMessage) {
+      return dispatch((0, _Actions2.showErrorMessage)(errorMessage));
+    }
+  };
+};
+
+var _default = (0, _reactRedux.connect)(function () {
+  return null;
+}, mapDispatchToProps)(CopyCreatorItemDialog);
+
+exports["default"] = _default;

package/Screens/Item/Containers/Edit.js

@@ -371,7 +371,7 @@ var formFields = [{
   }
 }, {
   name: 'itemclassifications',
-  label: 'itemclassifications',
+  label: 'ItemClassifications',
   type: 'dynSource',
   sourceConfig: {
     value: 'id',

package/Screens/Item/Containers/List.js

@@ -17,6 +17,8 @@ var _DefaultConnectedList = _interopRequireDefault(require("../../../Components/
 
 var _ListItemStatusEditor = _interopRequireDefault(require("../Components/ListItemStatusEditor"));
 
+var _CopyCreatorItemDialog = _interopRequireDefault(require("../Components/CopyCreatorItemDialog"));
+
 var _excluded = ["listProps"];
 
 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); }
@@ -108,7 +110,7 @@ var ItemList = function ItemList(_ref) {
   return /*#__PURE__*/_react["default"].createElement(ConnectedItemList, _extends({}, props, {
     listProps: _objectSpread({
       renderAction: function renderAction(props) {
-        return /*#__PURE__*/_react["default"].createElement(_ListItemStatusEditor["default"], props);
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ListItemStatusEditor["default"], props), /*#__PURE__*/_react["default"].createElement(_CopyCreatorItemDialog["default"], props));
       }
     }, listProps)
   }));

package/Screens/Item/Reducers/Actions.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ITEM_REDUCER_NAME = exports.ITEM_DATA_KEY = exports.ITEM_STATUS_URL = exports.ITEM_LIST_URL = exports.ITEM_LIST_KEY = void 0;
+exports["default"] = exports.ITEM_REDUCER_NAME = exports.ITEM_DATA_KEY = exports.ITEM_STATUS_URL = exports.ITEM_COPY_URL = exports.ITEM_LIST_URL = exports.ITEM_LIST_KEY = void 0;
 
 var apiActions = _interopRequireWildcard(require("../../../App/Reducers/Api/Actions"));
 
@@ -27,6 +27,12 @@ var ITEM_LIST_KEY = 'items';
 exports.ITEM_LIST_KEY = ITEM_LIST_KEY;
 var ITEM_LIST_URL = 'items';
 exports.ITEM_LIST_URL = ITEM_LIST_URL;
+
+var ITEM_COPY_URL = function ITEM_COPY_URL(id) {
+  return "items/".concat(id, "/duplicate");
+};
+
+exports.ITEM_COPY_URL = ITEM_COPY_URL;
 var ITEM_STATUS_URL = 'items/status';
 exports.ITEM_STATUS_URL = ITEM_STATUS_URL;
 var ITEM_DATA_KEY = 'item';
@@ -73,6 +79,15 @@ var setItemStatusForMultipleItems = function setItemStatusForMultipleItems(selec
   };
 };
 
+var copyCreatorItem = function copyCreatorItem(sourceItemId, newItemIdentifier, itemTexts) {
+  return function (dispatch, getState) {
+    return dispatch(apiActions.postData(ITEM_COPY_URL(sourceItemId), {
+      "identifier": newItemIdentifier,
+      itemTexts: itemTexts
+    }));
+  };
+};
+
 var setFieldData = function setFieldData(field, value) {
   return function (dispatch, getState) {
     var entityState = getState()[ITEM_REDUCER_NAME];
@@ -91,7 +106,8 @@ var setFieldData = function setFieldData(field, value) {
 var _default = _objectSpread(_objectSpread({}, actions), {}, {
   setFieldData: setFieldData,
   setItemStatusForMultipleItems: setItemStatusForMultipleItems,
-  loadItemStatus: loadItemStatus
+  loadItemStatus: loadItemStatus,
+  copyCreatorItem: copyCreatorItem
 });
 
 exports["default"] = _default;

package/Screens/Item/Translations.js

@@ -17,7 +17,7 @@ require("../../App/i18n").use({
     save: 'Save',
     editDialogTitle: 'Edit selected entries',
     editDialogHint: 'Use the checkboxes to select one or more entries in the list</br>and then click this icon to set the item status for them.',
-    itemclassifications: 'Product categories',
+    ItemClassifications: 'Product categories',
     visualizationData: {
       '2d': "2D",
       '3d': "3D",
@@ -56,7 +56,10 @@ require("../../App/i18n").use({
         coreData: {
           dialogTitle: 'Edit core data'
         }
-      }
+      },
+      copyCreatorItemDialogTitle: 'Copy selected product',
+      copyItemIdentifier: 'New identifier',
+      copyItemTitle: 'New title'
     },
     configuratorQuickView: {
       buttonText: 'Preview'
@@ -93,8 +96,9 @@ require("../../App/i18n").use({
     cancel: 'Abbrechen',
     save: 'Speichern',
     editDialogTitle: 'Gewählte Einträge bearbeiten',
+    duplicate: 'Duplizieren',
     editDialogHint: 'Nutze die Checkboxen in der Liste und klicke dann dieses Icon,</br>um den Status für einen oder mehrere Einträge zu setzen.',
-    itemclassifications: 'Produktkategorien',
+    ItemClassifications: 'Produktkategorien',
     visualizationData: {
       '2d': "2D",
       '3d': "3D",
@@ -117,6 +121,9 @@ require("../../App/i18n").use({
         searchOrAddAttributeValue: 'Suche einen Attributwert oder lege einen neuen mit dem + an'
       },
       headline: 'Dieses Produkt ist folgendermaßen definiert:',
+      copyCreatorItemDialogTitle: 'Gewähltes Produkt kopieren',
+      copyItemIdentifier: 'Neuer Identifier',
+      copyItemTitle: 'Neuer Titel',
       editorPopup: {
         attribute: {
           dialogTitle: 'Attribut hinzufügen'

package/Screens/Itemclassification/Reducers/Actions.js

@@ -7,6 +7,8 @@ exports["default"] = exports.postData = exports.loadEntity = exports.hideDetails
 
 var _Actions = require("../../../App/Reducers/Entity/Actions");
 
+var _Actions2 = require("../../Item/DataStructures/Attributes/Actions");
+
 var ITEMCLASSIFICATION_LIST_KEY = 'itemclassifications';
 exports.ITEMCLASSIFICATION_LIST_KEY = ITEMCLASSIFICATION_LIST_KEY;
 var ITEMCLASSIFICATION_DATA_KEY = 'itemclassification';
@@ -15,7 +17,9 @@ var ITEMCLASSIFICATION_REDUCER_NAME = 'itemclassificationData';
 exports.ITEMCLASSIFICATION_REDUCER_NAME = ITEMCLASSIFICATION_REDUCER_NAME;
 var ITEMCLASSIFICATIONS_URL = 'itemclassifications';
 exports.ITEMCLASSIFICATIONS_URL = ITEMCLASSIFICATIONS_URL;
-var actions = (0, _Actions.generateDefaultActions)(ITEMCLASSIFICATION_LIST_KEY, ITEMCLASSIFICATION_DATA_KEY, ITEMCLASSIFICATION_REDUCER_NAME, ITEMCLASSIFICATIONS_URL);
+var actions = (0, _Actions.generateDefaultActions)(ITEMCLASSIFICATION_LIST_KEY, ITEMCLASSIFICATION_DATA_KEY, ITEMCLASSIFICATION_REDUCER_NAME, ITEMCLASSIFICATIONS_URL, {
+  customDispatchHandler: _Actions2.customDispatchHandler
+});
 var hideDetails = actions.hideDetails,
     loadEntity = actions.loadEntity,
     postData = actions.postData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.37.3",
+  "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.37.3",
+    "redhotmagma-visualization": "1.38.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Data.js

@@ -5,6 +5,8 @@ import { t } from './i18n';
 
 export const whiteSpacePattern = /^[\S]+$/;
 
+export const identifierPattern = /^[A-za-z0-9_.-]+$/;
+
 validate.validators.nonEmptyArray = function(value, options) {
     if (options && options === true && isArray(value) && value.length !== 0) {
         return null;
@@ -30,13 +32,12 @@ validate.validators.numericOrEmpty = function (value, options) {
 }
 
 validate.validators.identifier = function(value, options) {
-    const pattern = /^[A-za-z0-9_.-]+$/;
     if (
         options &&
         options === true &&
         typeof value === 'string' &&
-        value.match(pattern) &&
-        value.match(pattern)[0] === value
+        value.match(identifierPattern) &&
+        value.match(identifierPattern)[0] === value
     ) {
         return null;
     }

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;