@configuratorware/configurator-frontendgui 1.27.3-beta.1 → 1.27.3-beta.5

package/App/Modules/Designer/Designer.js

@@ -0,0 +1,231 @@
+"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.Designer = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _Editor = _interopRequireDefault(require("redhotmagma-graphics-editor/Components/Editor/Editor"));
+
+var _EditorContainer = _interopRequireDefault(require("redhotmagma-graphics-editor/Components/Editor/EditorContainer"));
+
+var _AlignTargetProvider = require("redhotmagma-visualization/AlignTargetProvider");
+
+var _createCheckerBoardBackground = require("../../../Utils/Styles/createCheckerBoardBackground");
+
+var _excluded = ["children"];
+
+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 _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; }
+
+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 mockUploadFunction = function mockUploadFunction(files) {
+  return new Promise(function (resolve, reject) {
+    var reader = new FileReader();
+
+    reader.onload = function () {
+      var dataURL = reader.result;
+      resolve([{
+        src: dataURL
+      }]);
+    };
+
+    reader.onerror = reject;
+    reader.readAsDataURL(files[0]);
+  });
+};
+
+var styles = function styles(theme) {
+  var _root;
+
+  return {
+    root: (_root = {
+      flexShrink: 1,
+      flexBasis: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: '100%',
+      alignItems: 'center'
+    }, _defineProperty(_root, theme.breakpoints.down('xs'), {
+      minHeight: '150px'
+    }), _defineProperty(_root, '&:before', {
+      content: "''",
+      display: 'block',
+      marginTop: 'auto'
+    }), _defineProperty(_root, '&:after', {
+      content: "''",
+      display: 'block',
+      marginBottom: 'auto'
+    }), _defineProperty(_root, '& > :not(.resize-sensor)', {
+      /**
+       * The pointer events are passed through in the "main" class of DefaultLayout,
+       * but the contained elements may need it (like the Designer and its controls)
+       * @see DefaultLayout
+       */
+      pointerEvents: 'all'
+    }), _root),
+    checkerBoardBackground: _objectSpread({}, (0, _createCheckerBoardBackground.createCheckerBoardBackground)({
+      darkColor: 'rgba(0, 0, 0, 0.1)',
+      lightColor: 'rgba(0, 0, 0, 0.01)'
+    }))
+  };
+};
+
+var CustomEditorContainer = (0, _withStyles["default"])({
+  closeButton: {
+    position: 'absolute',
+    top: -20,
+    right: -20,
+    cursor: 'pointer'
+  }
+}, {
+  name: 'CustomEditorContainer'
+})(function (_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_EditorContainer["default"], props, children);
+});
+
+var getCustomEditorStyle = function getCustomEditorStyle(_ref2) {
+  var hasBorder = _ref2.hasBorder;
+  var style = {};
+
+  if (!hasBorder) {
+    style.borderWidth = 0;
+  }
+
+  return style;
+};
+
+var Designer = function Designer(_ref3) {
+  var renderStandardToolbox = _ref3.renderStandardToolbox,
+      renderSelectionToolbox = _ref3.renderSelectionToolbox,
+      renderInlineToolbox = _ref3.renderInlineToolbox,
+      renderRulers = _ref3.renderRulers,
+      canvasSize = _ref3.canvasSize,
+      classes = _ref3.classes,
+      show = _ref3.show,
+      selectedColor = _ref3.selectedColor,
+      alignTarget = _ref3.alignTarget,
+      EditorContainer = _ref3.EditorContainer,
+      hideDesigner = _ref3.hideDesigner,
+      hasBorder = _ref3.hasBorder,
+      useCheckerBoardBackground = _ref3.useCheckerBoardBackground,
+      renderInCanvasContainer = _ref3.renderInCanvasContainer;
+  var containerReadyHandler = (0, _react.useMemo)(function () {
+    return function (_ref4) {
+      var container = _ref4.container;
+      alignTarget.add(container); // it has to be delayed in the next message, when the correct size is already available
+
+      return function () {
+        return setTimeout(function () {
+          return alignTarget.remove(container);
+        });
+      };
+    };
+  }, [alignTarget]);
+  var containerUpdateHandler = (0, _react.useMemo)(function () {
+    return function () {
+      // re-add it on update to trigger the change which updates the offset
+      setTimeout(function () {
+        alignTarget.add(null);
+        alignTarget.remove(null);
+      });
+    };
+  }, [alignTarget]);
+  var EditorContainerWithInjectedProps = (0, _react.useMemo)(function () {
+    return function (props) {
+      return /*#__PURE__*/_react["default"].createElement(EditorContainer, _extends({}, props, {
+        onClickClose: hideDesigner
+      }));
+    };
+  }, [hideDesigner]);
+  return show && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react["default"].createElement(_Editor["default"], {
+    style: getCustomEditorStyle({
+      hasBorder: hasBorder
+    }),
+    containerClassName: useCheckerBoardBackground && classes.checkerBoardBackground,
+    canvasSize: canvasSize,
+    upload: mockUploadFunction,
+    renderStandardToolbox: renderStandardToolbox,
+    renderSelectionToolbox: renderSelectionToolbox,
+    renderInlineToolbox: renderInlineToolbox,
+    renderRulers: renderRulers,
+    subtractSiblingsHeight: true,
+    allowUpScaling: true,
+    selectedColor: selectedColor,
+    onContainerReady: containerReadyHandler,
+    onContainerUpdate: containerUpdateHandler,
+    EditorContainer: EditorContainerWithInjectedProps,
+    renderInCanvasContainer: renderInCanvasContainer
+  }));
+};
+
+exports.Designer = Designer;
+Designer.propTypes = {
+  renderStandardToolbox: _propTypes["default"].func,
+  renderSelectionToolbox: _propTypes["default"].func,
+  renderInlineToolbox: _propTypes["default"].func,
+  renderRulers: _propTypes["default"].func,
+  show: _propTypes["default"].bool,
+  EditorContainer: _propTypes["default"].elementType,
+  hasBorder: _propTypes["default"].bool,
+  selectedColor: _propTypes["default"].string,
+  hideDesigner: _propTypes["default"].func,
+  alignTarget: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    remove: _propTypes["default"].func.isRequired
+  }).isRequired,
+  classes: _propTypes["default"].object.isRequired,
+  canvasSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired,
+    isMetric: _propTypes["default"].bool,
+    dpi: _propTypes["default"].number
+  }).isRequired,
+  useCheckerBoardBackground: _propTypes["default"].bool,
+  renderInCanvasContainer: _propTypes["default"].func
+};
+Designer.defaultProps = {
+  renderStandardToolbox: null,
+  renderSelectionToolbox: null,
+  renderInlineToolbox: null,
+  show: true,
+  hasBorder: true,
+  renderRulers: null,
+  selectedColor: '',
+  hideDesigner: null,
+  EditorContainer: CustomEditorContainer,
+  useCheckerBoardBackground: false
+};
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'Designer'
+})((0, _AlignTargetProvider.withAlignTarget)(Designer));
+
+exports["default"] = _default;

package/App/Modules/Designer/DesignerScreen.js

@@ -0,0 +1,233 @@
+"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.DesignerScreen = DesignerScreen;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ReactComponent = _interopRequireDefault(require("../../../Shared/PropTypes/ReactComponent"));
+
+var _Header = _interopRequireDefault(require("../../Shared/Containers/Header"));
+
+var _DesignAreaControlbox = _interopRequireDefault(require("./Containers/DesignAreaControlbox"));
+
+var _EditDesignButton = _interopRequireDefault(require("./Containers/EditDesignButton"));
+
+var _CloseGraphicsEditorButton = _interopRequireDefault(require("./Containers/CloseGraphicsEditorButton"));
+
+var _CloseDesignEditor = _interopRequireDefault(require("./Containers/CloseDesignEditor"));
+
+var _ImageEditDialog = _interopRequireDefault(require("./Containers/ImageEditDialog"));
+
+var _DefaultCanvasProvider = require("../../Shared/Providers/DefaultCanvasProvider");
+
+var _DesignerAlignTarget = require("../Visualization/DesignerAlignTarget");
+
+var _DefaultLayout = _interopRequireDefault(require("./Layouts/DefaultLayout"));
+
+var _PopupAreaProvider = require("./Layouts/PopupAreaProvider");
+
+var _TwoSideBottomBar = require("./Layouts/Mobile/TwoSideBottomBar");
+
+var _Designer = _interopRequireDefault(require("./Containers/Designer"));
+
+var _DesignerSelectionToolbox = _interopRequireDefault(require("./Containers/DesignerSelectionToolbox"));
+
+var _AddVisualElement = _interopRequireDefault(require("./Containers/AddVisualElement"));
+
+var _ScreenPropTypes = _interopRequireDefault(require("../../Screens/Configurator/ScreenPropTypes"));
+
+var _FullScreenView = _interopRequireDefault(require("./Components/FullScreenView/FullScreenView"));
+
+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 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; }
+
+/**
+ * Main Screen of the configurator
+ */
+function DesignerScreen(props) {
+  var imageOnly = props.imageOnly,
+      showDesigner = props.showDesigner,
+      showProductViewButton = props.showProductViewButton,
+      fallbackMode = props.fallbackMode,
+      is3DvisualMode = props.is3DvisualMode,
+      isPortraitMode = props.isPortraitMode,
+      _renderHeader = props.renderHeader,
+      renderSaveConfiguration = props.renderSaveConfiguration,
+      renderSendEmail = props.renderSendEmail,
+      renderPdfDownload = props.renderPdfDownload,
+      renderLoadConfiguration = props.renderLoadConfiguration,
+      renderError = props.renderError,
+      renderAlertMessages = props.renderAlertMessages,
+      renderConfirm = props.renderConfirm,
+      renderAmountPrice = props.renderAmountPrice,
+      renderDesigner = props.renderDesigner,
+      renderDesignerSelectionToolbox = props.renderDesignerSelectionToolbox,
+      renderDesignerFallback = props.renderDesignerFallback,
+      _renderVisualization = props.renderVisualization,
+      renderDesignAreaControlbox = props.renderDesignAreaControlbox,
+      renderEditDesignButton = props.renderEditDesignButton,
+      renderCloseGraphicsEditorButton = props.renderCloseGraphicsEditorButton,
+      renderImageEditDialog = props.renderImageEditDialog,
+      renderCloseDesignEditor = props.renderCloseDesignEditor,
+      renderAddVisualElement = props.renderAddVisualElement,
+      renderLoader = props.renderLoader,
+      renderLicenseNotice = props.renderLicenseNotice,
+      customElements = props.customElements,
+      CanvasProvider = props.CanvasProvider,
+      CanvasStateProvider = props.CanvasStateProvider,
+      TextEditorStateProvider = props.TextEditorStateProvider,
+      Layout = props.Layout,
+      PopupArea = props.PopupArea,
+      FallbackVisualization = props.FallbackVisualization;
+  return /*#__PURE__*/React.createElement(CanvasProvider, null, /*#__PURE__*/React.createElement(Layout, {
+    imageOnly: imageOnly,
+    isPortraitMode: isPortraitMode,
+    renderHeader: function renderHeader(renderProps) {
+      return renderProps.width === 'xs' && showDesigner ? function () {
+        return /*#__PURE__*/React.createElement("div", null);
+      } : _renderHeader();
+    },
+    fallbackMode: fallbackMode,
+    renderVisualization: function renderVisualization() {
+      return _renderVisualization({
+        fullScreenViewProps: {
+          Component: _FullScreenView["default"],
+          showPreviewButton: !showDesigner
+        }
+      });
+    },
+    renderMain: function renderMain(renderProps) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, renderProps.width !== 'xs' && isPortraitMode ? /*#__PURE__*/React.createElement("div", {
+        className: renderProps.classes.graphicsEditorWrapper
+      }, showProductViewButton && renderCloseGraphicsEditorButton(renderProps), !showDesigner && renderEditDesignButton({
+        styledButton: false
+      })) : null, renderProps.width === 'xs' ? showDesigner ? renderDesignAreaControlbox(renderProps) : !showProductViewButton && renderEditDesignButton({
+        styledButton: false
+      }) : null, !fallbackMode && /*#__PURE__*/React.createElement(_DesignerAlignTarget.DesignerAlignTarget, null), /*#__PURE__*/React.createElement(FallbackVisualization, {
+        fallbackMode: fallbackMode,
+        showContent: showDesigner
+      }, showDesigner && renderDesigner()), renderError(), renderAlertMessages(), renderConfirm(), renderSaveConfiguration(), renderSendEmail(), renderPdfDownload(), renderLoadConfiguration(), renderImageEditDialog(), renderProps.width !== 'xs' && showDesigner && is3DvisualMode && renderCloseDesignEditor(), customElements.main);
+    },
+    renderSidebar: function renderSidebar(renderProps) {
+      return /*#__PURE__*/React.createElement(CanvasStateProvider, null, /*#__PURE__*/React.createElement(TextEditorStateProvider, null, /*#__PURE__*/React.createElement(PopupArea, null, renderProps.width !== 'xs' && isPortraitMode ? /*#__PURE__*/React.createElement(_TwoSideBottomBar.TwoSideBottomBar, {
+        leftSide: showDesigner && /*#__PURE__*/React.createElement(React.Suspense, {
+          fallback: renderDesignerFallback()
+        }, renderDesignerSelectionToolbox()),
+        rightSide: /*#__PURE__*/React.createElement(React.Fragment, null, renderDesignAreaControlbox(renderProps), renderAmountPrice(props))
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null, renderProps.width !== 'xs' ? showDesigner ? /*#__PURE__*/React.createElement(React.Fragment, null, renderCloseGraphicsEditorButton(renderProps), renderDesignAreaControlbox(renderProps)) : /*#__PURE__*/React.createElement(React.Fragment, null, showProductViewButton && renderCloseGraphicsEditorButton(renderProps), renderEditDesignButton({
+        styledButton: false
+      })) : null, showDesigner ? /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: renderDesignerFallback()
+      }, renderDesignerSelectionToolbox(), renderProps.width === 'xs' && /*#__PURE__*/React.createElement(React.Fragment, null, renderAddVisualElement(), is3DvisualMode && renderCloseDesignEditor())) : renderProps.width === 'xs' && props.activeDesignArea && renderEditDesignButton({
+        styledButton: true
+      }), /*#__PURE__*/React.createElement("div", {
+        className: renderProps.classes.toBottom
+      }, renderProps.width !== 'xs' ? renderAmountPrice(props) : props.activeDesignArea ? renderCloseGraphicsEditorButton(renderProps) : renderAmountPrice(props))))));
+    },
+    renderLoader: renderLoader,
+    renderLicenseNotice: renderLicenseNotice
+  }));
+}
+
+DesignerScreen.propTypes = _objectSpread(_objectSpread({}, _ScreenPropTypes["default"]), {}, {
+  showProductViewButton: _propTypes["default"].bool,
+  showPreviewButton: _propTypes["default"].bool,
+  area: _propTypes["default"].string,
+  customElements: _propTypes["default"].shape({
+    main: _propTypes["default"].node
+  }),
+  // Render props
+  renderDesignerSelectionToolbox: _propTypes["default"].func,
+  renderVisualizationEdit: _propTypes["default"].func,
+  renderDesignerFallback: _propTypes["default"].func,
+  renderHeader: _propTypes["default"].func,
+  renderDesignAreaControlbox: _propTypes["default"].func,
+  renderEditDesignButton: _propTypes["default"].func,
+  renderCloseGraphicsEditorButton: _propTypes["default"].func,
+  renderImageEditDialog: _propTypes["default"].func,
+  renderCloseDesignEditor: _propTypes["default"].func,
+  renderAddVisualElement: _propTypes["default"].func,
+  // Components
+  CanvasProvider: _ReactComponent["default"].isRequired,
+  CanvasStateProvider: _ReactComponent["default"].isRequired,
+  TextEditorStateProvider: _ReactComponent["default"].isRequired,
+  Layout: _ReactComponent["default"].isRequired,
+  PopupArea: _ReactComponent["default"].isRequired,
+  imageOnly: _propTypes["default"].bool
+}); // eslint-disable-next-line react/prop-types
+
+var renderDesignAreaControlbox = function renderDesignAreaControlbox(_ref) {
+  var area = _ref.area;
+  return /*#__PURE__*/React.createElement(_DesignAreaControlbox["default"], {
+    boxed: area === 'sidebar'
+  });
+}; // eslint-disable-next-line react/prop-types
+
+
+var renderEditDesignButton = function renderEditDesignButton(_ref2) {
+  var styledButton = _ref2.styledButton;
+  return /*#__PURE__*/React.createElement(_EditDesignButton["default"], {
+    buttonXS: styledButton
+  });
+};
+
+DesignerScreen.defaultProps = {
+  // Render props
+  renderCreator: function renderCreator() {
+    return null;
+  },
+  renderDesigner: function renderDesigner() {
+    return /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement("div", null, "Loading Designer Component...")
+    }, /*#__PURE__*/React.createElement(_Designer["default"], null));
+  },
+  renderDesignerSelectionToolbox: function renderDesignerSelectionToolbox() {
+    return /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement("div", null, "Loading Designer Toolbox...")
+    }, /*#__PURE__*/React.createElement(_DesignerSelectionToolbox["default"], null));
+  },
+  renderHeader: function renderHeader() {
+    return /*#__PURE__*/React.createElement(_Header["default"], null);
+  },
+  renderDesignerFallback: function renderDesignerFallback() {
+    return /*#__PURE__*/React.createElement("div", null, "Loading Designer Component...");
+  },
+  renderCloseGraphicsEditorButton: function renderCloseGraphicsEditorButton() {
+    return /*#__PURE__*/React.createElement(_CloseGraphicsEditorButton["default"], null);
+  },
+  renderImageEditDialog: function renderImageEditDialog() {
+    return /*#__PURE__*/React.createElement(_ImageEditDialog["default"], null);
+  },
+  renderCloseDesignEditor: function renderCloseDesignEditor() {
+    return /*#__PURE__*/React.createElement(_CloseDesignEditor["default"], null);
+  },
+  renderAddVisualElement: function renderAddVisualElement() {
+    return /*#__PURE__*/React.createElement(_AddVisualElement["default"], {
+      autoHide: true
+    });
+  },
+  renderEditDesignButton: renderEditDesignButton,
+  renderDesignAreaControlbox: renderDesignAreaControlbox,
+  // Components
+  CanvasProvider: _DefaultCanvasProvider.DefaultCanvasProvider,
+  CanvasStateProvider: _DefaultCanvasProvider.DefaultCanvasStateProvider,
+  TextEditorStateProvider: _DefaultCanvasProvider.DefaultTextEditorStateProvider,
+  Layout: _DefaultLayout["default"],
+  PopupArea: _PopupAreaProvider.PopupArea
+};

package/App/Modules/Designer/Layouts/DefaultLayout.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 styles = function styles(theme) {
+  var _$main, _container;
+
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      overflowX: 'hidden',
+      '&$fallbackMode': {
+        '& $main': (_$main = {}, _defineProperty(_$main, theme.breakpoints.up('md'), {
+          width: "calc(100% - ".concat(theme.layout.sidebar.width, "px)")
+        }), _defineProperty(_$main, '@media (orientation: landscape)', {
+          flexDirection: 'row'
+        }), _$main)
+      },
+      // helper classes can be used on contained elements
+      '& .noShrink': {
+        flexShrink: 0
+      },
+      '& .verticalSpacing': {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+      },
+      '& .md': _defineProperty({}, theme.breakpoints.up('md'), {}),
+      '& .sm': _defineProperty({}, theme.breakpoints.down('sm'), {})
+    },
+    fallbackMode: {},
+    header: {},
+    container: (_container = {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'row'
+    }, _defineProperty(_container, theme.breakpoints.up('md'), {
+      margin: '8px 20px 24px 8px'
+    }), _defineProperty(_container, theme.breakpoints.down('md'), {
+      margin: '8px 20px 16px 8px'
+    }), _defineProperty(_container, theme.breakpoints.down('xs'), {
+      flexDirection: 'column',
+      margin: theme.smallScreen.padding
+    }), _defineProperty(_container, "position", 'relative'), _container),
+    containerTabletPortrait: {
+      flexDirection: 'column'
+    },
+    main: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      // the pointer events should be passed through to the visualization component
+      pointerEvents: 'none' // important: don't remove this
+
+    },
+    sidebar: function sidebar(_ref) {
+      var _ref2;
+
+      var isPortraitMode = _ref.isPortraitMode;
+      return _ref2 = {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: theme.spacing(1),
+        width: !isPortraitMode ? theme.layout.sidebar.width : ''
+      }, _defineProperty(_ref2, theme.breakpoints.up('sm'), {
+        marginTop: 0,
+        marginLeft: theme.spacing(1)
+      }), _defineProperty(_ref2, theme.breakpoints.down('xs'), {
+        maxWidth: 'none'
+      }), _defineProperty(_ref2, '& > *', {
+        // make the components in the sidebar overlap the visualization
+        zIndex: 1
+      }), _defineProperty(_ref2, "pointerEvents", 'none'), _ref2;
+    },
+    visualization: _defineProperty({
+      // the visualization is in the background with absolute positioning
+      position: 'absolute',
+      width: '100%',
+      height: '100%'
+    }, theme.breakpoints.down('xs'), {
+      height: 'calc(100% - 156px)',
+      top: 69
+    }),
+    toBottom: {
+      marginTop: 'auto'
+    },
+    overlayContainer: _defineProperty({
+      position: 'absolute',
+      height: '100%',
+      zIndex: 1
+    }, theme.breakpoints.down('xs'), {
+      position: 'absolute'
+    }),
+    graphicsEditorWrapper: {
+      maxWidth: theme.layout.sidebar.width,
+      width: '100%',
+      marginLeft: 'auto',
+      marginRight: '0'
+    }
+  };
+};
+
+var DefaultLayout = function DefaultLayout(_ref3) {
+  var width = _ref3.width,
+      classes = _ref3.classes,
+      renderHeader = _ref3.renderHeader,
+      renderMain = _ref3.renderMain,
+      renderSidebar = _ref3.renderSidebar,
+      renderVisualization = _ref3.renderVisualization,
+      renderLoader = _ref3.renderLoader,
+      renderLicenseNotice = _ref3.renderLicenseNotice,
+      fallbackMode = _ref3.fallbackMode,
+      isPortraitMode = _ref3.isPortraitMode,
+      imageOnly = _ref3.imageOnly;
+  return imageOnly ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '')
+  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.visualization
+  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.main
+  }, renderMain({
+    area: 'main',
+    width: width,
+    classes: classes
+  }))), renderLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
+  }, renderLicenseNotice(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.header
+  }, renderHeader({
+    area: 'header',
+    width: width,
+    classes: classes
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '')
+  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.visualization
+  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.main
+  }, renderMain({
+    area: 'main',
+    width: width,
+    classes: classes
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.sidebar
+  }, renderSidebar({
+    area: 'sidebar',
+    width: width,
+    classes: classes
+  }))), renderLoader());
+};
+
+DefaultLayout.propTypes = {
+  classes: _propTypes["default"].object,
+  width: _propTypes["default"].string,
+  renderHeader: _propTypes["default"].func,
+  renderMain: _propTypes["default"].func,
+  renderSidebar: _propTypes["default"].func,
+  renderVisualization: _propTypes["default"].func,
+  renderLoader: _propTypes["default"].func,
+  renderLicenseNotice: _propTypes["default"].func,
+  fallbackMode: _propTypes["default"].bool,
+  isPortraitMode: _propTypes["default"].bool,
+  imageOnly: _propTypes["default"].bool
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'DefaultLayout'
+})((0, _withWidth["default"])({
+  initialWidth: 'xl'
+})(DefaultLayout));
+
+exports["default"] = _default;