@configuratorware/configurator-frontendgui 1.38.2 → 1.38.3

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

@@ -104,7 +104,7 @@ var styles = function styles(theme) {
       }), _horizontal),
       '&.vertical': {
         "float": 'left',
-        height: 'calc(100% - 310px)',
+        height: 'calc(100% - 68px)',
         minHeight: 120,
         width: 140,
         left: theme.spacing(1),
@@ -141,7 +141,7 @@ var styles = function styles(theme) {
     }, _defineProperty(_visualization, theme.breakpoints.down('xs'), {
       height: '75%'
     }), _defineProperty(_visualization, theme.breakpoints.down(theme.creator.viewSelectBreakpoint), {
-      height: 'calc(100% - 152px)'
+      height: 'calc(100% - 18px)'
     }), _defineProperty(_visualization, '&.withBottomList', (_withBottomList2 = {}, _defineProperty(_withBottomList2, theme.breakpoints.between('xs', 'sm'), {
       height: 'calc(100% - 198px)'
     }), _defineProperty(_withBottomList2, theme.breakpoints.up('sm'), {

package/App/Modules/Visualization/AlignTargetContainer.js

@@ -13,6 +13,8 @@ var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withS
 
 var _AlignTargetProvider = require("redhotmagma-visualization/AlignTargetProvider");
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 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); }
@@ -36,7 +38,8 @@ var AlignTargetContainer = (0, _withStyles["default"])(style, {
 })((0, _AlignTargetProvider.withAlignTarget)(function (_ref) {
   var alignTarget = _ref.alignTarget,
       children = _ref.children,
-      classes = _ref.classes;
+      classes = _ref.classes,
+      className = _ref.className;
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     if (ref.current) {
@@ -49,7 +52,7 @@ var AlignTargetContainer = (0, _withStyles["default"])(style, {
   }, [alignTarget]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: ref,
-    className: classes.root
+    className: (0, _clsx["default"])(classes.root, className)
   }, children);
 }));
 exports.AlignTargetContainer = AlignTargetContainer;

package/App/Modules/Visualization/CreatorAlignTarget.js

@@ -5,37 +5,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CreatorAlignTarget = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _Containers = require("../Creator/Containers");
 
 var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
 
+var _reactRedux = require("react-redux");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _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 _root;
+  var _withDesignViews, _root;
 
   return {
     root: (_root = {
       marginTop: 36
     }, _defineProperty(_root, theme.breakpoints.down('xs'), {
       maxHeight: 'calc(100% - 270px)'
-    }), _defineProperty(_root, theme.breakpoints.up('sm'), {
+    }), _defineProperty(_root, theme.breakpoints.up('sm'), _defineProperty({
+      maxHeight: 'calc(100% - 58px)'
+    }, theme.orientation.portrait, {
       maxHeight: 'calc(100% - 260px)'
-    }), _defineProperty(_root, theme.breakpoints.up(theme.creator.viewSelectBreakpoint), {
+    })), _defineProperty(_root, theme.breakpoints.up(theme.creator.viewSelectBreakpoint), {
       marginTop: 0
     }), _defineProperty(_root, theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg'), {
-      maxHeight: 'calc(100% - 286px)'
+      maxHeight: 'calc(100% - 152px)'
     }), _defineProperty(_root, theme.breakpoints.up('lg'), {
-      maxHeight: 'calc(100% - 196px)'
+      maxHeight: 'calc(100% - 154px)'
     }), _defineProperty(_root, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)', {
       maxHeight: '100%'
-    }), _root)
+    }), _defineProperty(_root, '&.withDesignViews', (_withDesignViews = {}, _defineProperty(_withDesignViews, theme.breakpoints.up('sm'), _defineProperty({
+      maxHeight: 'calc(100% - 136px)'
+    }, theme.orientation.portrait, {
+      maxHeight: 'calc(100% - 260px)'
+    })), _defineProperty(_withDesignViews, theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg'), {
+      maxHeight: 'calc(100% - 156px)'
+    }), _defineProperty(_withDesignViews, theme.breakpoints.up('lg'), {
+      maxHeight: 'calc(100% - 196px)'
+    }), _withDesignViews)), _root)
   };
 };
 
-var CreatorAlignTarget = (0, _withStyles["default"])(styles, {
+var StyledAlignTargetContainer = (0, _withStyles["default"])(styles, {
   name: 'CreatorAlignTarget'
 })(_Containers.AlignTargetContainer);
+
+var CreatorAlignTarget = function CreatorAlignTarget(props) {
+  var className = (0, _reactRedux.useSelector)(function (state) {
+    var _state$designView;
+
+    return ((_state$designView = state.designView) === null || _state$designView === void 0 ? void 0 : _state$designView.designViews.length) > 1;
+  }) && 'withDesignViews';
+  return /*#__PURE__*/_react["default"].createElement(StyledAlignTargetContainer, _extends({
+    className: className
+  }, props));
+};
+
 exports.CreatorAlignTarget = CreatorAlignTarget;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.38.2",
+  "version": "1.38.3",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.38.2",
+    "@configuratorware/scripts": "1.38.3",
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
@@ -39,8 +39,8 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.38.2",
-    "redhotmagma-visualization": "1.38.2",
+    "redhotmagma-graphics-editor": "1.38.3",
+    "redhotmagma-visualization": "1.38.3",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

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

@@ -102,7 +102,7 @@ const styles = theme => ({
         },
         '&.vertical': {
             float: 'left',
-            height: 'calc(100% - 310px)',
+            height: 'calc(100% - 68px)',
             minHeight: 120,
             width: 140,
             left: theme.spacing(1),
@@ -148,7 +148,7 @@ const styles = theme => ({
             height: '75%',
         },
         [theme.breakpoints.down(theme.creator.viewSelectBreakpoint)]: {
-            height: 'calc(100% - 152px)',
+            height: 'calc(100% - 18px)',
         },
         '&.withBottomList': {
             [theme.breakpoints.between('xs', 'sm')]: {

package/src/App/Modules/Visualization/AlignTargetContainer.js

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { withAlignTarget } from 'redhotmagma-visualization/AlignTargetProvider';
+import clsx from 'clsx';
 
 const style = {
     root: {
@@ -15,7 +16,7 @@ const style = {
 };
 
 export const AlignTargetContainer = withStyles(style, { name: 'AlignTargetContainer' })(
-    withAlignTarget(({ alignTarget, children, classes }) => {
+    withAlignTarget(({ alignTarget, children, classes, className }) => {
         const ref = useRef();
         useEffect(() => {
             if (ref.current) {
@@ -24,7 +25,7 @@ export const AlignTargetContainer = withStyles(style, { name: 'AlignTargetContai
             return () => alignTarget.remove(ref.current);
         }, [alignTarget]);
         return (
-            <div ref={ref} className={classes.root}>
+            <div ref={ref} className={clsx(classes.root, className)}>
                 {children}
             </div>
         );

package/src/App/Modules/Visualization/CreatorAlignTarget.js

@@ -1,5 +1,7 @@
+import React from 'react';
 import { AlignTargetContainer } from '../Creator/Containers';
 import withStyles from '@material-ui/core/styles/withStyles';
+import { useSelector } from 'react-redux';
 
 const styles = theme => ({
     root: {
@@ -9,20 +11,43 @@ const styles = theme => ({
             maxHeight: 'calc(100% - 270px)',
         },
         [theme.breakpoints.up('sm')]: {
-            maxHeight: 'calc(100% - 260px)',
+            maxHeight: 'calc(100% - 58px)',
+            [theme.orientation.portrait]: {
+                maxHeight: 'calc(100% - 260px)',
+            },
         },
         [theme.breakpoints.up(theme.creator.viewSelectBreakpoint)]: {
             marginTop: 0,
         },
         [theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg')]: {
-            maxHeight: 'calc(100% - 286px)',
+            maxHeight: 'calc(100% - 152px)',
         },
         [theme.breakpoints.up('lg')]: {
-            maxHeight: 'calc(100% - 196px)',
+            maxHeight: 'calc(100% - 154px)',
         },
         '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
             maxHeight: '100%',
         },
+        '&.withDesignViews': {
+            [theme.breakpoints.up('sm')]: {
+                maxHeight: 'calc(100% - 136px)',
+                [theme.orientation.portrait]: {
+                    maxHeight: 'calc(100% - 260px)',
+                },
+            },
+            [theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg')]: {
+                maxHeight: 'calc(100% - 156px)',
+            },
+            [theme.breakpoints.up('lg')]: {
+                maxHeight: 'calc(100% - 196px)',
+            },
+        },
     },
 });
-export const CreatorAlignTarget = withStyles(styles, { name: 'CreatorAlignTarget' })(AlignTargetContainer);
+
+const StyledAlignTargetContainer = withStyles(styles, { name: 'CreatorAlignTarget' })(AlignTargetContainer);
+
+export const CreatorAlignTarget = props => {
+    const className = useSelector(state => state.designView?.designViews.length > 1) && 'withDesignViews';
+    return <StyledAlignTargetContainer className={className} {...props} />;
+};