@configuratorware/configurator-frontendgui 1.28.1 → 1.29.0

package/App/Screens/DesignerProductPreview/Screen.js

@@ -0,0 +1,407 @@
+"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.ConnectedDesignerProductPreviewScreen = exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactHotLoader = require("react-hot-loader");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _reactRedux = require("react-redux");
+
+var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+
+var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _MainButton = _interopRequireDefault(require("../../../Shared/Components/MainButton"));
+
+var _i18n = require("../../../Framework/i18n");
+
+var _Selectors = require("../../Reducers/DesignArea/Selectors");
+
+var _Selectors2 = require("../../Reducers/ImageGallery/Selectors");
+
+var _Modifiers = require("../../Reducers/DesignData/Modifiers");
+
+var _Actions = require("../../Reducers/ImageGallery/Actions");
+
+var _Selectors3 = require("../../Reducers/UI/Selectors");
+
+var _ImageUpload = _interopRequireDefault(require("../../Modules/Designer/Components/ImageEditDialog/ImageUpload"));
+
+var _ImageColorPicker = _interopRequireDefault(require("../../Modules/Designer/Components/ImageColorPicker/ImageColorPicker"));
+
+var _Transformers = require("../../Modules/Designer/Utils/Transformers");
+
+var _Progress = _interopRequireDefault(require("../../Shared/Components/Progress/Progress"));
+
+var _ThemeProvider = _interopRequireDefault(require("../Configurator/ThemeProvider"));
+
+var _DesignerProductPreviewManager = require("./DesignerProductPreviewManager");
+
+var _Constants = require("./Constants");
+
+var _createCheckerBoardBackground = require("../../../Utils/Styles/createCheckerBoardBackground");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _baseline_colorize_black_24dp = _interopRequireDefault(require("../../Modules/Designer/Components/ImageEditDialog/res/baseline_colorize_black_24dp.png"));
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var manager = (0, _DesignerProductPreviewManager.createDesignerProductPreviewManager)();
+var Steps = {
+  upload: 1,
+  removeBackground: 2
+};
+var ClippingModes = {
+  flood: 'flood',
+  replace: 'replace'
+};
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      overflowX: 'hidden',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      padding: theme.spacing(1),
+      minHeight: 522,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      boxSizing: 'border-box'
+    },
+    colorPickerRoot: {
+      width: '100%',
+      maxWidth: '100%',
+      height: '100vh',
+      minHeight: '20vh',
+      maxHeight: '50vh',
+      textAlign: 'center',
+      display: 'flex',
+      overflow: 'hidden',
+      '& canvas': {
+        margin: 'auto',
+        // use the colorize icon as cursor directly
+        cursor: "url(".concat(_baseline_colorize_black_24dp["default"], ") 2 21, auto")
+      }
+    },
+    checkerBoard: _objectSpread({}, (0, _createCheckerBoardBackground.createCheckerBoardBackground)()),
+    imageUploadDropZone: {
+      maxHeight: '50vh',
+      minHeight: 266
+    },
+    colorPickerInfo: {
+      color: '#757575',
+      display: 'flex',
+      alignItems: 'center',
+      marginTop: theme.spacing(1)
+    },
+    colorPickerInfoText: {
+      marginLeft: theme.spacing(1),
+      fontStyle: 'italic'
+    },
+    backgroundRemovalTools: {
+      flex: 'auto',
+      padding: '12px 0px 12px 12px'
+    }
+  };
+};
+
+var DesignerProductPreviewScreen = function DesignerProductPreviewScreen(props) {
+  var ThemeProvider = props.ThemeProvider,
+      ProgressComponent = props.ProgressComponent,
+      uploadSize = props.uploadSize,
+      imageData = props.imageData,
+      editFile = props.editFile,
+      classes = props.classes,
+      loading = props.loading;
+
+  var _useState = (0, _react.useState)(Steps.upload),
+      _useState2 = _slicedToArray(_useState, 2),
+      step = _useState2[0],
+      setStep = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    isValid: false
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      uploadValidation = _useState4[0],
+      setUploadValidation = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      editParams = _useState6[0],
+      setEditParams = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      applied = _useState8[0],
+      setApplied = _useState8[1];
+
+  var imageUploadRef = (0, _react.useRef)(null);
+  var operations = imageData && imageData.operations || null;
+  (0, _react.useEffect)(function () {
+    operations && setEditParams(operations);
+  }, [operations]);
+  (0, _react.useEffect)(function () {
+    manager.init({
+      onRestoreImage: function onRestoreImage() {
+        setStep(Steps.removeBackground);
+        setApplied(true);
+      }
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (step === Steps.upload) {
+      setEditParams({});
+      setUploadValidation({
+        isValid: false
+      });
+    }
+  }, [step]);
+  (0, _react.useEffect)(function () {
+    setApplied(false);
+  }, [editParams]);
+  var previewSrc = (0, _react.useMemo)(function () {
+    return imageData && "".concat((0, _Transformers.getRasterURL)((0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview)), "?").concat(Math.random());
+  }, [imageData]);
+
+  var nextAction = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.t0 = step;
+              _context.next = _context.t0 === Steps.upload ? 3 : _context.t0 === Steps.removeBackground ? 5 : 10;
+              break;
+
+            case 3:
+              imageUploadRef.current.uploadFile();
+              return _context.abrupt("break", 10);
+
+            case 5:
+              _context.next = 7;
+              return editFile(_objectSpread(_objectSpread({}, editParams), {}, {
+                vectorize: true
+              }), imageData);
+
+            case 7:
+              manager.useImage();
+              setApplied(true);
+              return _context.abrupt("break", 10);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function nextAction() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var updateParams = function updateParams(params) {
+    setEditParams(params);
+    editFile(_objectSpread(_objectSpread({}, params), {}, {
+      vectorize: false
+    }), imageData);
+  };
+
+  var onColorChange = function onColorChange(color) {
+    var params = _objectSpread(_objectSpread({}, editParams), {}, {
+      clippingColor: color.hex
+    });
+
+    if (!params.clipping) {
+      params.clipping = ClippingModes.replace;
+    }
+
+    updateParams(params);
+  };
+
+  var toggleBackgroundRemoval = function toggleBackgroundRemoval() {
+    return updateParams(_objectSpread(_objectSpread({}, editParams), {}, {
+      clipping: editParams.clipping ? null : ClippingModes.replace,
+      clippingColor: editParams.clippingColor || _Constants.defaultClippingColor
+    }));
+  };
+
+  var onClippingChange = function onClippingChange(_ref2) {
+    var clipping = _ref2.target.value;
+    return updateParams(_objectSpread(_objectSpread({}, editParams), {}, {
+      clipping: clipping
+    }));
+  };
+
+  var clippingEnabled = !!editParams.clipping;
+  return /*#__PURE__*/_react["default"].createElement(ThemeProvider, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.root
+  }, step === Steps.upload && /*#__PURE__*/_react["default"].createElement(_ImageUpload["default"], {
+    innerRef: imageUploadRef,
+    uploadSize: uploadSize,
+    onUploadFinished: function onUploadFinished() {
+      return setStep(Steps.removeBackground);
+    },
+    onValidate: setUploadValidation,
+    classes: {
+      imageUploadDropZone: classes.imageUploadDropZone
+    }
+  }), step === Steps.removeBackground && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ImageColorPicker["default"], {
+    src: previewSrc,
+    onChange: onColorChange,
+    wrapperClassName: (0, _clsx["default"])(classes.colorPickerRoot, classes.checkerBoard)
+  }), /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+    component: "fieldset",
+    className: classes.backgroundRemovalTools
+  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+    control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      checked: clippingEnabled,
+      onChange: toggleBackgroundRemoval,
+      color: "primary"
+    }),
+    label: (0, _i18n.T)('fileUpload.removeBackground')
+  }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    value: editParams.clipping || '',
+    onChange: onClippingChange
+  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+    disabled: !clippingEnabled,
+    value: ClippingModes.flood,
+    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      color: "primary"
+    }),
+    label: (0, _i18n.T)('fileUpload.removeBackgroundFromBorder')
+  }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+    disabled: !clippingEnabled,
+    value: ClippingModes.replace,
+    control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      color: "primary"
+    }),
+    label: (0, _i18n.T)('fileUpload.removeBackgroundEverywhere')
+  })), clippingEnabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "caption",
+    className: classes.colorPickerInfo
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "colorize"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.colorPickerInfoText
+  }, (0, _i18n.T)('fileUpload.chooseColorForRemove'))))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    container: true,
+    justify: "space-between"
+  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    item: true
+  }, step === Steps.removeBackground && /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+    onClick: function onClick() {
+      return setStep(Steps.upload);
+    },
+    variant: "contained"
+  }, (0, _i18n.T)('fileUpload.changeImage'))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    item: true
+  }, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+    onClick: nextAction,
+    variant: "contained",
+    disabled: step === Steps.upload && !uploadValidation.isValid || step === Steps.removeBackground && applied
+  }, (0, _i18n.T)('fileUpload.continue')))), /*#__PURE__*/_react["default"].createElement(ProgressComponent, {
+    loading: loading
+  })));
+};
+
+DesignerProductPreviewScreen.propTypes = {
+  // Components
+  ThemeProvider: _propTypes["default"].elementType,
+  ProgressComponent: _propTypes["default"].elementType,
+  imageData: _propTypes["default"].object,
+  uploadSize: _propTypes["default"].number.isRequired,
+  editFile: _propTypes["default"].func.isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  loading: _propTypes["default"].bool.isRequired
+};
+DesignerProductPreviewScreen.defaultProps = {
+  // Components
+  ThemeProvider: _ThemeProvider["default"],
+  ProgressComponent: _Progress["default"]
+}; // Export the non connected Screen
+
+var _default = DesignerProductPreviewScreen;
+exports["default"] = _default;
+var getLoadingState = (0, _Selectors3.createBackgroundWorkStateSelector)(_Actions.WN_UPLOAD_IMAGE);
+
+var mapStateToProps = function mapStateToProps(state) {
+  var selectedDesignArea = state.designArea.selectedDesignArea;
+  var uploadSize = (0, _Selectors.getMaxUploadSize)(state);
+  var imageData = state.imageGallery.selectedImage;
+  var loading = !!(getLoadingState(state.ui) || state.ui.visibilityMap[_Constants.loaderKey]);
+  return {
+    selectedDesignArea: selectedDesignArea,
+    uploadSize: uploadSize,
+    imageData: imageData,
+    loading: loading
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    editFile: function editFile(operations, imageData) {
+      var editData = (0, _Modifiers.getEditDataFromOperations)(imageData.fileName, operations);
+      return dispatch((0, _Actions.editImage)(editData, _objectSpread(_objectSpread({}, imageData), {}, {
+        operations: operations
+      })));
+    }
+  };
+};
+
+var ConnectedDesignerProductPreviewScreen = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _reactHotLoader.hot)(module)((0, _withStyles["default"])(styles, {
+  name: 'DesignProductionPreviewScreen'
+})(DesignerProductPreviewScreen)));
+exports.ConnectedDesignerProductPreviewScreen = ConnectedDesignerProductPreviewScreen;

package/App/Screens.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _configuration = require("./configuration");
+
+var screens = (0, _configuration.getConf)('screens', {}); // IMPORTANT
+// FIXME: after babel update (to 7) use conditional compilation to skip import (reduce bundle size)
+// use the package babel-plugin-conditional-compile or babel-plugin-conditional-compilation
+// import base Screens if not replaced in custom project
+// note: require should be used here to avoid importing the screen when it's not used
+
+if (!screens.Configurator) {
+  var _require = require("./Screens/Configurator/Screen"),
+      ConnectedConfiguratorScreen = _require.ConnectedConfiguratorScreen;
+
+  screens.Configurator = ConnectedConfiguratorScreen;
+}
+
+if (!screens.CalculationWidget) {
+  var _require2 = require("./Screens/Configurator/CalculationWidgetScreen"),
+      ConnectedCalculationWidgetScreen = _require2.ConnectedCalculationWidgetScreen;
+
+  screens.CalculationWidget = ConnectedCalculationWidgetScreen;
+}
+
+if (!screens.DesignerProductPreview) {
+  var _require3 = require("./Screens/DesignerProductPreview/Screen"),
+      ConnectedDesignerProductPreviewScreen = _require3.ConnectedDesignerProductPreviewScreen;
+
+  screens.DesignerProductPreview = ConnectedDesignerProductPreviewScreen;
+}
+
+if (!screens.Configurator) {
+  throw new Error('The Configurator Screen component must be specified in the application configuration!');
+}
+
+var _default = screens;
+exports["default"] = _default;