@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

package/package.json

@@ -1,44 +1,20 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.28.4",
+  "version": "1.29.0",
   "license": "UNLICENSED",
   "private": false,
-  "main": "./lib/index.js",
-  "files": [
-    "App",
-    "Framework",
-    "Resources",
-    "src",
-    "scripts",
-    "babel.config.js",
-    "tsconfig.json",
-    "public/translations",
-    "public/favicon.ico",
-    "public/invoke.js",
-    "public/DesignerPreviewWidgetDemo.html",
-    "public/ConfigurationMessagingDemo.html"
-  ],
+  "main": "./index.js",
   "dependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.14",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.13.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
+    "@configuratorware/scripts": "1.29.0",
     "@hot-loader/react-dom": "^17.0.1",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@tweenjs/tween.js": "^17.6.0",
     "axios": "^0.21.1",
-    "babel-plugin-module-resolver": "^4.1.0",
     "clsx": "^1.1.1",
     "console-polyfill": "^0.3.0",
-    "cross-env": "^7.0.3",
     "css-element-queries": "^1.2.3",
     "fontfaceobserver": "^2.1.0",
     "hyphenated-de": "^1.2.0",
@@ -56,73 +32,34 @@
     "react-file-drop": "^0.2.8",
     "react-hot-loader": "^4.13.0",
     "react-hyphen": "^1.4.0",
-    "react-intersection-observer": "^8.31.0",
-    "react-redux": "^7.2.3",
+    "react-intersection-observer": "^8.32.0",
+    "react-redux": "^7.2.4",
     "react-redux-i18n": "^1.9.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.28.4",
-    "redhotmagma-visualization": "1.28.4",
-    "redux": "^4.0.5",
+    "redhotmagma-graphics-editor": "1.29.0",
+    "redhotmagma-visualization": "1.29.0",
+    "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
-    "rimraf": "^3.0.2",
     "showdown": "^1.9.1",
     "storage-factory": "^0.2.0",
     "typeface-roboto": "^1.1.13",
     "url-search-params-polyfill": "^8.1.1",
     "uuid": "^3.4.0"
   },
-  "devDependencies": {
-    "@sambego/storybook-state": "^2.0.1",
-    "@storybook/addon-actions": "^6.2.1",
-    "@storybook/addon-essentials": "^6.2.1",
-    "@storybook/addon-links": "^6.2.1",
-    "@storybook/builder-webpack5": "^6.2.1",
-    "@storybook/react": "^6.2.1",
-    "@types/jest": "^26.0.22",
-    "@types/lodash": "^4.14.168",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^3.1.0",
-    "jest": "^26.6.3",
-    "jest-environment-enzyme": "^7.1.2",
-    "jest-enzyme": "^7.1.2",
-    "jsdom": "^16.5.2",
-    "lint-staged": "^9.5.0",
-    "mini-css-extract-plugin": "^1.4.0",
-    "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "prettier": "^1.19.1",
-    "redux-mock-store": "^1.5.4",
-    "resolve-url-loader": "^3.1.2",
-    "sass-loader": "^11.0.1",
-    "sinon": "^10.0.0",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
-    "ts-jest": "^26.5.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.28.0",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2"
-  },
   "peerDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
     "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^1.4.0",
@@ -137,26 +74,8 @@
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
-    "start": "webpack serve --port 3001 --host 0.0.0.0",
-    "start:dev": "webpack-dev-server --port 3333 --config dev/webpack.config.js",
-    "build": "webpack --config webpack.production.config.js",
-    "package": "npm run package:clean && npm run package:compile && npm run package:copy && npm run package:after",
-    "package:clean": "rimraf ./lib",
-    "package:compile": "cross-env NODE_ENV=production babel ./src --out-dir ./lib --extensions .ts,.tsx,.js,.jsx",
-    "package:copy": "node ./scripts/cpPath.js ./src ./lib \"\\.(scss|eot|svg|ttf|woff|woff2|png)$\"",
-    "package:install-packages": "node ./packages/install.js",
-    "package:after": "node ./scripts/moveLibToPackageRoot.js",
     "copy-public": "node ./scripts/cpPublic.js",
-    "install": "npm run package && npm run copy-public",
-    "build:test": "npm run build && http-server -P http://localhost:10030",
-    "build:profile": "webpack --config webpack.production.config.js --profile --json > stats.json",
-    "storybook": "start-storybook -p 6006",
-    "test": "jest",
-    "test:dev": "jest --watch",
-    "analyze": "npm run build:profile && webpack-bundle-analyzer stats.json ./public",
-    "lint": "eslint ./ --ext .js,.jsx",
-    "lint-ci": "eslint ./ --ext .js,.jsx -c .eslintrc.ci.json --quiet",
-    "lint-fix": "eslint ./ --ext .js,.jsx --fix",
-    "build-storybook": "build-storybook"
-  }
-}
+    "install": "npm run copy-public"
+  },
+  "readme": "# configurator-frontendgui\n\n## Setup for Development\n1. Follow the \"preparation\", \"install\" and \"start development\" steps in frontend/README.md\n1. Open the core app in the browser: http://localhost:3001/identifier:softshell_designer_2d\n1. 'hostsByNodeEnv.development' in src/App/configuration.js is configurable  \n    thus allowing to use e.g. your local api\n\n## Ready to build the artifacts\n- run `pnpm build` from project scope (does not build workspace dependencies automatically)\n- or run `pnpm build` from workspace root\n\n## Start storybook in project \n1. `pnpm run storybook`\n1. `storybook starts on http://localhost:9001/` \n\n## [Guidelines for automated testing](docs/TestingGuidelines.md)\n"
+}

package/scripts/cpPublic.js

@@ -23,8 +23,8 @@
 
 const path = require('path');
 
-const { cpDirDeep, testMatchers } = require('./utils/fileSystem');
-const { isDependency } = require('./utils/process');
+const { cpDirDeep, testMatchers } = require('@configuratorware/scripts/utils/fileSystem');
+const { isDependency } = require('@configuratorware/scripts/utils/process');
 
 // keep existing files listed below
 const test = testMatchers.keepIfExists(/favicon\.ico$/);
@@ -38,5 +38,5 @@ if (isDependency()) {
     const src = path.resolve(__dirname, '../public');
     const dst = path.resolve(__dirname, '../../../../public');
 
-    cpDirDeep(src, dst, test);
+    cpDirDeep(src, dst, { testFn: test });
 }

package/scripts/getDefaultWebpackConfig.js

@@ -6,7 +6,7 @@ const path = require('path');
 const webpack = require('webpack');
 const fs = require('fs');
 
-const version = require('../package.json').version;
+const { version } = require('../package.json');
 
 function getConfig(mode, dirname) {
     try {
@@ -84,7 +84,8 @@ function getConfig(mode, dirname) {
                     'process.env.FRONTENDGUI_VERSION': JSON.stringify(version),
                 });
 
-                return Object.assign({}, commonConfig, {
+                return {
+                    ...commonConfig,
                     mode: 'development',
                     cache: true,
                     devtool: 'eval-cheap-module-source-map',
@@ -132,20 +133,21 @@ function getConfig(mode, dirname) {
                     },
                     plugins: [env, new webpack.HotModuleReplacementPlugin()],
                     resolve: Object.assign({}, commonConfig.resolve, {
+                        ...commonConfig.resolve,
                         alias: {
-                            'react-dom': '@hot-loader/react-dom',
+                            ...commonConfig.resolve.alias,
+                            'react-dom': path.resolve(dirname, 'node_modules/@hot-loader/react-dom'),
                         },
                     }),
                     optimization: {
                         moduleIds: 'named',
                     },
-                });
+                };
             }
 
             case 'prod': {
                 const TerserPlugin = require('terser-webpack-plugin');
                 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-                const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
                 const env = new webpack.DefinePlugin({
                     'process.env.NODE_ENV': JSON.stringify('production'),
@@ -156,8 +158,6 @@ function getConfig(mode, dirname) {
                     filename: 'bundle.css',
                 });
 
-                const optimizeCss = new OptimizeCSSAssetsPlugin({});
-
                 const minimizer = new TerserPlugin({
                     parallel: true,
                     terserOptions: {
@@ -167,7 +167,8 @@ function getConfig(mode, dirname) {
                     },
                 });
 
-                return Object.assign({}, commonConfig, {
+                return {
+                    ...commonConfig,
                     mode: 'production',
                     devtool: 'source-map',
                     devServer: {
@@ -204,11 +205,11 @@ function getConfig(mode, dirname) {
                             },
                         ].concat(commonRules),
                     },
-                    plugins: [env, extractSass, optimizeCss],
+                    plugins: [env, extractSass],
                     optimization: {
                         minimizer: [minimizer],
                     },
-                });
+                };
             }
         }
     } catch (e) {

package/src/App/Error/ProductionErrorPage/Style.scss

@@ -37,7 +37,7 @@ $font-color: #282828;
   }
 
   .error-icon {
-    background: url('./res/error_gears.png');
+    background: url('res/error_gears.png');
     background-size: 100% 100%;
     height: 20vh;
     width: 20vh;

package/src/App/Modules/Creator/Components/Option/index.test.js

@@ -4,7 +4,7 @@ import { mount, render } from 'enzyme';
 import { Provider } from 'react-redux';
 import { noop } from 'lodash';
 import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
-import Option from '../Option';
+import Option from './index';
 
 const reducer = (state = {}, action) => {
     return { ...action, ...state };

package/src/App/Modules/Creator/Components/OptionAmount/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import OptionAmount from '../OptionAmount';
+import OptionAmount from './index';
 import { mount, render } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { TextField } from '@material-ui/core';

package/src/App/Modules/Creator/Components/ProductPart/index.test.js

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { mount, render } from 'enzyme';
 import { noop } from 'lodash';
 import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
-import ProductPart from '../ProductPart';
+import ProductPart from './index';
 
 const initialState = {
     displaySwitchedOptions: false,

package/src/App/Modules/Designer/Components/AddGalleryImage/index.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import ServiceLocator from 'App/ServiceLocator';
-import AddGalleryImage from './';
+import AddGalleryImage from './index';
 import blueImg from './res/blau.jpg';
 import greyIMG from './res/grau.jpg';
 import redIMG from './res/rot.jpg';

package/src/App/Modules/Designer/Components/ColorPalettes/index.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
-import ColorPalettes from '../ColorPalettes';
+import ColorPalettes from './index';
 
 const colorPalettes = {
     colorPalettes: [

package/src/App/Modules/Designer/Components/DesignAreaControlbox/index.js

@@ -51,7 +51,9 @@ const styles = theme => ({
             padding: 0,
         },
         '&:last-child': {
-            paddingBottom: 16,
+            [theme.breakpoints.up('sm')]: {
+                paddingBottom: 16,
+            },
         },
     },
     listItemText: {
@@ -101,13 +103,28 @@ const styles = theme => ({
         },
     },
     underlineInputText: {
-        marginBottom: 8,
+        marginBottom: 0,
+        [theme.breakpoints.up('sm')]: {
+            marginBottom: 8,
+        },
+        '&:before': {
+            borderBottom: 0,
+            [theme.breakpoints.up('sm')]: {
+                borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
+            },
+        },
         //https://github.com/mui-org/material-ui/issues/12192#issuecomment-406182809
         '&&&&:hover:before': {
-            borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
+            borderBottom: 0,
+            [theme.breakpoints.up('sm')]: {
+                borderBottom: '1px solid rgba(0, 0, 0, 0.42)',
+            },
         },
         '&:after': {
-            borderBottom: '1px solid transparent',
+            borderBottom: 0,
+            [theme.breakpoints.up('sm')]: {
+                borderBottom: '1px solid transparent',
+            },
         },
     },
     iconRootCheck: {

package/src/App/Modules/Designer/Components/DesignAreaControlbox/index.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
-import DesignAreaControlbox from '../DesignAreaControlbox';
+import DesignAreaControlbox from './index';
 import MenuItem from '@material-ui/core/MenuItem';
 import ServiceLocator from 'App/ServiceLocator';
 

package/src/App/Modules/Designer/Components/TextControlbox/index.test.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { noop } from 'lodash';
 import { mount, render } from 'enzyme';
 import MenuItem from '@material-ui/core/MenuItem';
-import TextControlbox from '../TextControlbox';
+import TextControlbox from './index';
 import ServiceLocator from 'App/ServiceLocator';
 
 const mockedFontsList = [

package/src/App/Modules/Designer/Containers/Designer.js

@@ -1,6 +1,6 @@
 import { containerConnect } from 'Framework/ComponentContainer';
 import { designAreaAppliesMask, getCurrentCanvasSize } from 'App/Reducers/DesignArea/Selectors';
-import { DefaultDesigner } from 'App/Screens/Configurator/DesignerUI';
+import { DefaultDesigner } from '../DesignerUI';
 import { Services } from 'App/ServiceLocator';
 import { getClientHighlightColor, visualizationModeCheck } from 'App/Reducers/Configurator/Selectors';
 import { isFallbackVisualizationMode } from 'App/Reducers/Configurator/Selectors';

package/src/App/Modules/Designer/DesignerScreen.js

@@ -25,6 +25,7 @@ import DesignerSelectionToolbox from './Containers/DesignerSelectionToolbox';
 import AddVisualElement from './Containers/AddVisualElement';
 import ScreenPropTypes from '../../Screens/Configurator/ScreenPropTypes';
 import FullScreenView from './Components/FullScreenView/FullScreenView';
+import DesignerClickAwayListener from './MultilayerComponents/DesignerClickAwayListener';
 
 /**
  * Main Screen of the configurator
@@ -59,6 +60,7 @@ export function DesignerScreen(props) {
         renderLoader,
         renderLicenseNotice,
         customElements,
+        visualizationOverlayMode,
 
         // Components
         CanvasProvider,
@@ -78,6 +80,16 @@ export function DesignerScreen(props) {
                     renderProps.width === 'xs' && showDesigner ? () => <div /> : renderHeader()
                 }
                 fallbackMode={fallbackMode}
+                showDesigner={showDesigner}
+                visualizationOverlayMode={visualizationOverlayMode}
+                renderDesigner={
+                    visualizationOverlayMode &&
+                    (props => (
+                        <FallbackVisualization fallbackMode={fallbackMode} showContent={showDesigner}>
+                            {showDesigner && renderDesigner({ visualizationOverlayMode, ...props })}
+                        </FallbackVisualization>
+                    ))
+                }
                 renderVisualization={() =>
                     renderVisualization({
                         fullScreenViewProps: {
@@ -100,9 +112,11 @@ export function DesignerScreen(props) {
                                 : !showProductViewButton && renderEditDesignButton({ styledButton: false })
                             : null}
                         {!fallbackMode && <DesignerAlignTarget />}
-                        <FallbackVisualization fallbackMode={fallbackMode} showContent={showDesigner}>
-                            {showDesigner && renderDesigner()}
-                        </FallbackVisualization>
+                        {!visualizationOverlayMode && (
+                            <FallbackVisualization fallbackMode={fallbackMode} showContent={showDesigner}>
+                                {showDesigner && renderDesigner()}
+                            </FallbackVisualization>
+                        )}
                         {renderError()}
                         {renderAlertMessages()}
                         {renderConfirm()}
@@ -230,11 +244,21 @@ const renderEditDesignButton = ({ styledButton }) => <EditDesignButton buttonXS=
 DesignerScreen.defaultProps = {
     // Render props
     renderCreator: () => null,
-    renderDesigner: () => (
-        <React.Suspense fallback={<div>Loading Designer Component...</div>}>
-            <Designer />
-        </React.Suspense>
-    ),
+    renderDesigner: ({ designerClassName, visualizationOverlayMode } = {}) => {
+        const designer = <Designer visualizationOverlayMode={visualizationOverlayMode} />;
+        return (
+            <React.Suspense fallback={<div>Loading Designer Component...</div>}>
+                {visualizationOverlayMode ? (
+                    <>
+                        <DesignerClickAwayListener />
+                        <div className={designerClassName}>{designer}</div>
+                    </>
+                ) : (
+                    designer
+                )}
+            </React.Suspense>
+        );
+    },
     renderDesignerSelectionToolbox: () => (
         <React.Suspense fallback={<div>Loading Designer Toolbox...</div>}>
             <DesignerSelectionToolbox />

package/src/App/{Screens/Configurator → Modules/Designer}/DesignerUI.js

@@ -7,8 +7,8 @@ import IconDelete from '@material-ui/icons/Delete';
 import IconRotate from '@material-ui/icons/RotateRight';
 import IconScale from '@material-ui/icons/UnfoldMore';
 
-import Designer from 'App/Modules/Designer/Designer';
-import AddVisualElement from 'App/Modules/Designer/Containers/AddVisualElement';
+import Designer from './Designer';
+import AddVisualElement from './Containers/AddVisualElement';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth/withWidth';
 
 import { getConf } from 'App/configuration';
@@ -16,6 +16,8 @@ import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import { useSelector } from 'react-redux';
 import { getSelectedDesignProductionMethod } from '../../Reducers/DesignArea/Selectors';
+import StandardToolboxPortal from './MultilayerComponents/StandardToolboxPortal';
+import InlineToolboxPortal from './MultilayerComponents/InlineToolboxPortal';
 
 const StandardToolboxWithCanvasState = withWidth()(
     ({ width }) =>
@@ -26,15 +28,23 @@ const StandardToolboxWithCanvasState = withWidth()(
         )
 );
 
-const renderStandardToolbox = ({ upload, components: { StandardToolbox } }) => (
-    <StandardToolbox {...{ upload }}>
-        {({ canvas }) => (
-            <CanvasStateProvider canvas={canvas}>
-                <StandardToolboxWithCanvasState canvas={canvas} />
-            </CanvasStateProvider>
-        )}
-    </StandardToolbox>
-);
+const renderStandardToolbox = ({ visualizationOverlayMode } = {}) => ({
+    upload,
+    components: { StandardToolbox },
+}) => {
+    const ContainerComponent = visualizationOverlayMode ? StandardToolboxPortal : React.Fragment;
+    return (
+        <ContainerComponent>
+            <StandardToolbox {...{ upload }}>
+                {({ canvas }) => (
+                    <CanvasStateProvider canvas={canvas}>
+                        <StandardToolboxWithCanvasState canvas={canvas} />
+                    </CanvasStateProvider>
+                )}
+            </StandardToolbox>
+        </ContainerComponent>
+    );
+};
 
 const toolboxButtonStyle = {
     width: 40,
@@ -119,8 +129,12 @@ const renderAngleLabel = angleLabel => {
     return <AngleLabel angleLabel={angleLabel} />;
 };
 
-const renderInlineToolbox = ({ components: { InlineToolbox } }) => (
-    <InlineToolbox renderToolboxButton={renderInlineToolButton} renderAngleLabel={renderAngleLabel} />
+const renderInlineToolbox = ({ visualizationOverlayMode }) => ({ components: { InlineToolbox } }) => (
+    <InlineToolbox
+        renderToolboxButton={renderInlineToolButton}
+        renderAngleLabel={renderAngleLabel}
+        ContainerComponent={visualizationOverlayMode ? InlineToolboxPortal : React.Fragment}
+    />
 );
 
 renderInlineToolButton.propTypes = {
@@ -134,17 +148,19 @@ renderInlineToolbox.propTypes = {
     components: PropTypes.element,
 };
 
-renderStandardToolbox.propTypes = {
-    upload: PropTypes.array,
-    components: PropTypes.element,
+export const DefaultDesigner = ({ visualizationOverlayMode, ...props }) => {
+    return (
+        <Designer
+            renderStandardToolbox={renderStandardToolbox({ visualizationOverlayMode })}
+            renderSelectionToolbox={() => null /*disable the default*/}
+            renderInlineToolbox={renderInlineToolbox({ visualizationOverlayMode })}
+            renderRulers={getConf('displayEditorRulers', true) ? null : noop}
+            fillContainer
+            {...props}
+        />
+    );
+};
+
+DefaultDesigner.propTypes = {
+    visualizationOverlayMode: PropTypes.bool.isRequired,
 };
-export const DefaultDesigner = props => (
-    <Designer
-        renderStandardToolbox={renderStandardToolbox}
-        renderSelectionToolbox={() => null /*disable the default*/}
-        renderInlineToolbox={renderInlineToolbox}
-        renderRulers={getConf('displayEditorRulers', true) ? null : noop}
-        fillContainer
-        {...props}
-    />
-);

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 const styles = theme => ({
     root: {
@@ -97,6 +98,26 @@ const styles = theme => ({
             top: 69,
         },
     },
+    visualizationOverlay: {
+        pointerEvents: 'none',
+        zIndex: 1,
+    },
+    designer: {
+        position: 'absolute',
+        width: '100%',
+        height: 'calc(100% - 342px)',
+        display: 'flex',
+        pointerEvents: 'none',
+        top: 60,
+        [theme.breakpoints.up('sm')]: {
+            top: 0,
+        },
+        [theme.orientation.landscape]: {
+            width: 'calc(100% - 366px)',
+            height: 'calc(100% - 150px)',
+            top: 0,
+        },
+    },
     toBottom: {
         marginTop: 'auto',
     },
@@ -129,6 +150,9 @@ const DefaultLayout = ({
     fallbackMode,
     isPortraitMode,
     imageOnly,
+    renderDesigner,
+    showDesigner,
+    visualizationOverlayMode,
 }) => {
     return imageOnly ? (
         <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
@@ -155,7 +179,17 @@ const DefaultLayout = ({
                 })}
             </div>
             <div className={`${classes.container} ${isPortraitMode ? classes.containerTabletPortrait : ''}`}>
-                {!fallbackMode && <div className={classes.visualization}>{renderVisualization()}</div>}
+                {renderDesigner && renderDesigner({ designerClassName: classes.designer })}
+                {!fallbackMode && (
+                    <div
+                        className={clsx(
+                            classes.visualization,
+                            showDesigner && visualizationOverlayMode && classes.visualizationOverlay
+                        )}
+                    >
+                        {renderVisualization()}
+                    </div>
+                )}
                 <div className={classes.main}>
                     {renderMain({
                         area: 'main',

package/src/App/Modules/Designer/MultilayerComponents/DesignerClickAwayListener.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Services } from 'App/ServiceLocator';
+import { withStyles } from '@material-ui/core';
+
+const styles = () => ({
+    root: { position: 'absolute', height: '100%', width: '100%' },
+});
+
+export const DesignerClickAwayListener = ({ classes }) => (
+    <div className={classes.root} onClick={() => Services.designData.clearDesignAreaSelection()} />
+);
+
+DesignerClickAwayListener.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { name: 'DesignerClickAwayListener' })(DesignerClickAwayListener);