@configuratorware/configurator-frontendgui 1.38.7 → 1.39.0

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

@@ -164,7 +164,8 @@ var AddImagePanel = /*#__PURE__*/function (_React$Component) {
           loaderComponent = _this$props3.loaderComponent,
           width = _this$props3.width,
           open = _this$props3.open,
-          onSelectTag = _this$props3.onSelectTag;
+          onSelectTag = _this$props3.onSelectTag,
+          client = _this$props3.client;
       var selectedImage = this.state.selectedImage;
       var showImageLibrary = images.length > 0;
       var showFilters = tags.length > 0;
@@ -193,7 +194,8 @@ var AddImagePanel = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement(_ImageLibraryThumbnail["default"], {
         motives: images,
         onSelect: this.onSelectImage,
-        selected: selectedImage
+        selected: selectedImage,
+        client: client
       }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], {
         classes: {
           root: classes.actionsRoot
@@ -224,7 +226,8 @@ _defineProperty(AddImagePanel, "propTypes", {
   width: _propTypes["default"].string,
   open: _propTypes["default"].bool.isRequired,
   loadTags: _propTypes["default"].func,
-  dismissError: _propTypes["default"].func
+  dismissError: _propTypes["default"].func,
+  client: _propTypes["default"].object
 });
 
 var _default = (0, _withWidth["default"])()((0, _styles.withStyles)(styles, {

package/App/Modules/Designer/Components/ImageLibraryThumbnail/index.js

@@ -19,6 +19,8 @@ var _AnalyticsWrapper = _interopRequireDefault(require("../../../../Shared/Compo
 
 require("./Styles.scss");
 
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
 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); }
@@ -50,7 +52,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 var styles = function styles() {
   return {
     imageLibraryThumbnail: {
-      width: 100,
+      width: 150,
       height: 'auto',
       borderRadius: 6,
       marginBottom: 10,
@@ -59,11 +61,26 @@ var styles = function styles() {
         cursor: 'pointer'
       }
     },
+    imageContainer: {
+      position: 'relative',
+      display: 'inline-block'
+    },
+    priceLabel: {
+      position: 'absolute',
+      background: '#0000005E',
+      borderRadius: 6,
+      padding: '4px',
+      bottom: '15px',
+      right: '10px'
+    },
+    priceLabelText: {
+      color: '#ffffff'
+    },
     activeGalleryImage: {
       border: '2px solid #ED1C29'
     },
     inactiveGalleryImage: {
-      border: '1px solid #212121',
+      border: '1px solid #0000005E',
       padding: 1
     }
   };
@@ -71,7 +88,7 @@ var styles = function styles() {
 
 var motivesWrapper = {
   maxHeight: 600,
-  minHeight: 255
+  minHeight: 355
 };
 var ImageThumbnail = (0, _styles.withStyles)(styles, {
   name: 'ImageThumbnail'
@@ -79,20 +96,29 @@ var ImageThumbnail = (0, _styles.withStyles)(styles, {
   var selected = _ref.selected,
       classes = _ref.classes,
       motive = _ref.motive,
-      onSelect = _ref.onSelect;
-  return /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+      onSelect = _ref.onSelect,
+      hidePrices = _ref.hidePrices;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.imageContainer
+  }, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
     targetId: "image_thumbnail_select",
     data: motive
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: classes.imageLibraryThumbnail + ' ' + (selected === motive ? classes.activeGalleryImage : classes.inactiveGalleryImage),
     src: _typeof(motive) === 'object' ? motive.url : motive,
+    alt: _typeof(motive) === 'object' ? motive.title : motive,
     onClick: function onClick() {
       return onSelect(motive);
     },
     style: {
       background: motive.thumbnail && motive.thumbnail.isThumbnailBright ? '#c4c4c4' : 'transparent'
     }
-  }));
+  })), !hidePrices && _typeof(motive) === 'object' && motive.priceFormatted !== null && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.priceLabel
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.priceLabelText,
+    variant: "body2"
+  }, motive.priceFormatted)));
 });
 
 var ImageLibraryThumbnail = /*#__PURE__*/function (_React$Component) {
@@ -126,7 +152,10 @@ var ImageLibraryThumbnail = /*#__PURE__*/function (_React$Component) {
 
       var _this$props = this.props,
           motives = _this$props.motives,
-          selected = _this$props.selected;
+          selected = _this$props.selected,
+          client = _this$props.client;
+      var query = new URLSearchParams(location.search);
+      var hidePrices = query.has('_hide_prices') ? query.get('_hide_prices') === '1' : client && !!client.hidePrices;
       return /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars.Scrollbars, {
         autoHeightMin: 250,
         autoHide: true,
@@ -146,7 +175,8 @@ var ImageLibraryThumbnail = /*#__PURE__*/function (_React$Component) {
           key: i,
           motive: motive,
           onSelect: _this2.onSelect,
-          selected: selected
+          selected: selected,
+          hidePrices: hidePrices
         });
       }));
     }
@@ -158,7 +188,8 @@ var ImageLibraryThumbnail = /*#__PURE__*/function (_React$Component) {
 _defineProperty(ImageLibraryThumbnail, "propTypes", {
   motives: _propTypes["default"].array,
   onSelect: _propTypes["default"].func,
-  selected: _propTypes["default"].object
+  selected: _propTypes["default"].object,
+  client: _propTypes["default"].object
 });
 
 var _default = ImageLibraryThumbnail;

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

@@ -61,6 +61,8 @@ var _ImageEditUtils = require("../Utils/ImageEditUtils");
 
 var _Transformers = require("../Utils/Transformers");
 
+var _Selectors5 = require("../../../Reducers/Configurator/Selectors");
+
 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); }
@@ -941,7 +943,8 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
           ImageUploadComponent = _this$props6.ImageUploadComponent,
           customControlElements = _this$props6.customControlElements,
           checkOwnership = _this$props6.checkOwnership,
-          designProductionMethod = _this$props6.designProductionMethod;
+          designProductionMethod = _this$props6.designProductionMethod,
+          client = _this$props6.client;
       var _this$state3 = this.state,
           preview = _this$state3.preview,
           clipping = _this$state3.clipping,
@@ -1031,7 +1034,8 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(_AddGalleryImage["default"], {
         open: this.state.showAddImagePanel,
         onClose: this.closeAddImagePanel,
-        onSelectImage: this.onSelectImage
+        onSelectImage: this.onSelectImage,
+        client: client
       }));
     }
   }]);
@@ -1073,7 +1077,8 @@ _defineProperty(ImageEditDialogContainer, "propTypes", {
   ImageColorizeComponent: _propTypes["default"].elementType,
   ImageUploadComponent: _propTypes["default"].elementType,
   customControlElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
-  checkOwnership: _propTypes["default"].bool
+  checkOwnership: _propTypes["default"].bool,
+  client: _propTypes["default"].object
 });
 
 _defineProperty(ImageEditDialogContainer, "defaultProps", {
@@ -1119,6 +1124,7 @@ var mapStateToProps = function mapStateToProps(state) {
   var imageColorsWereEdited = userImage && !!userImage.imageColorsWereEdited;
   var initialColorMaxAmount = (0, _Selectors2.getInitialMaxColorAmount)(state);
   var colorPreviewRequirementFulfilled = (0, _Selectors3.isColorPreviewCompatible)(state, userImage);
+  var client = (0, _Selectors5.getClient)((0, _Selectors5.getConfigurator)(state));
   return {
     Component: open ? ImageEditDialogContainer : function () {
       return null;
@@ -1145,7 +1151,8 @@ var mapStateToProps = function mapStateToProps(state) {
     hasPlaceHolderImage: hasPlaceHolderImage,
     initialColorMaxAmount: initialColorMaxAmount,
     colorPreviewRequirementFulfilled: colorPreviewRequirementFulfilled,
-    designProductionMethod: designProductionMethod
+    designProductionMethod: designProductionMethod,
+    client: client
   };
 };
 

package/App/configuration.js

@@ -176,7 +176,16 @@ var applicationConfiguration = {
       // create a ground to show a shadow under the model
       useShadowGround: true,
       // remove the shadow ground for screenshots
-      removeGroundForScreenshot: true
+      removeGroundForScreenshot: true,
+      // use an environment map
+      useEnvironmentMap: true,
+      // use programmatically generated baked shadow (instead of directional light shadow)
+      useBakedShadows: false,
+      // baked shadow parameters (for all available see redhotmagma-visualization/src/Three/Three3DScene.js)
+      bakedShadow: {
+        blurRadius: 6,
+        shadowOpacity: 0.8
+      }
     }
   },
   designer: {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.38.7",
+  "version": "1.39.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.38.7",
+    "@configuratorware/scripts": "1.39.0",
     "@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.7",
-    "redhotmagma-visualization": "1.38.7",
+    "redhotmagma-graphics-editor": "1.39.0",
+    "redhotmagma-visualization": "1.39.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Designer/Components/AddGalleryImage/__snapshots__/index.test.jsx.snap

@@ -39,51 +39,147 @@ exports[`renders correctly 1`] = `
       </span>
     </button>
     <div
-      style="position:relative;overflow:hidden;width:100%;height:100%;max-height:600px;min-height:255px"
+      style="position:relative;overflow:hidden;width:100%;height:100%;max-height:600px;min-height:355px"
     >
       <div
         style="position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:0;margin-bottom:0"
       >
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Kreis.jpg"
-          style="background:#c4c4c4"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Kreis.jpg"
-          style="background:transparent"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Rechteck.jpg"
-          style="background:transparent"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Rechteck.jpg"
-          style="background:transparent"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Kreis.jpg"
-          style="background:transparent"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Kreis.jpg"
-          style="background:transparent"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Stern.jpg"
-          style="background:transparent"
-        />
-        <img
-          class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-14"
-          src="./res/Stern.jpg"
-          style="background:transparent"
-        />
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Symbole"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Kreis.jpg"
+            style="background:#c4c4c4"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Branchen"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Kreis.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Männer"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Rechteck.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Frauen"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Rechteck.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Figuren"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Kreis.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Geometrisch1"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Kreis.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Figuren1"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Stern.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageThumbnail-imageContainer-13"
+        >
+          <img
+            alt="Geometrisch"
+            class="ImageThumbnail-imageLibraryThumbnail-12 ImageThumbnail-inactiveGalleryImage-17"
+            src="./res/Stern.jpg"
+            style="background:transparent"
+          />
+          <div
+            class="ImageThumbnail-priceLabel-14"
+          >
+            <p
+              class="MuiTypography-root ImageThumbnail-priceLabelText-15 MuiTypography-body2"
+            />
+          </div>
+        </div>
       </div>
       <div
         style="position:absolute;height:6px;transition:opacity 200ms;opacity:0;display:none;right:2px;bottom:2px;left:2px;border-radius:3px"
@@ -107,13 +203,13 @@ exports[`renders correctly 1`] = `
     class="MuiDialogActions-root AddImagePanel-actionsRoot-4 MuiDialogActions-spacing"
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MainButton-root-15 MuiButton-contained AddImagePanel-applyButton-5 Mui-disabled Mui-disabled"
+      class="MuiButtonBase-root MuiButton-root MainButton-root-18 MuiButton-contained AddImagePanel-applyButton-5 Mui-disabled Mui-disabled"
       disabled=""
       tabindex="-1"
       type="button"
     >
       <span
-        class="MuiButton-label MainButton-label-16"
+        class="MuiButton-label MainButton-label-19"
       >
         fileUpload.apply
       </span>

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

@@ -61,6 +61,7 @@ class AddImagePanel extends React.Component {
         open: PropTypes.bool.isRequired,
         loadTags: PropTypes.func,
         dismissError: PropTypes.func,
+        client: PropTypes.object,
     };
 
     componentDidUpdate(prevProps) {
@@ -88,7 +89,17 @@ class AddImagePanel extends React.Component {
     };
 
     render() {
-        const { tags, images, onClose, classes, loaderComponent, width, open, onSelectTag } = this.props;
+        const {
+            tags,
+            images,
+            onClose,
+            classes,
+            loaderComponent,
+            width,
+            open,
+            onSelectTag,
+            client,
+        } = this.props;
         const { selectedImage } = this.state;
 
         const showImageLibrary = images.length > 0;
@@ -122,6 +133,7 @@ class AddImagePanel extends React.Component {
                                 motives={images}
                                 onSelect={this.onSelectImage}
                                 selected={selectedImage}
+                                client={client}
                             />
                         </>
                     )}

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

@@ -5,10 +5,11 @@ import { Scrollbars } from 'react-custom-scrollbars';
 import { preventEventDoubling } from 'Utils/Events/preventEventDoubling';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
 import './Styles.scss';
+import Typography from '@material-ui/core/Typography/Typography';
 
 const styles = () => ({
     imageLibraryThumbnail: {
-        width: 100,
+        width: 150,
         height: 'auto',
         borderRadius: 6,
         marginBottom: 10,
@@ -18,37 +19,64 @@ const styles = () => ({
             cursor: 'pointer',
         },
     },
+    imageContainer: {
+        position: 'relative',
+        display: 'inline-block',
+    },
+    priceLabel: {
+        position: 'absolute',
+        background: '#0000005E',
+        borderRadius: 6,
+        padding: '4px',
+        bottom: '15px',
+        right: '10px',
+    },
+    priceLabelText: {
+        color: '#ffffff',
+    },
     activeGalleryImage: {
         border: '2px solid #ED1C29',
     },
     inactiveGalleryImage: {
-        border: '1px solid #212121',
+        border: '1px solid #0000005E',
         padding: 1,
     },
 });
 
 const motivesWrapper = {
     maxHeight: 600,
-    minHeight: 255,
+    minHeight: 355,
 };
 
 const ImageThumbnail = withStyles(styles, { name: 'ImageThumbnail' })(
-    ({ selected, classes, motive, onSelect }) => (
-        <AnalyticsWrapper targetId="image_thumbnail_select" data={motive}>
-            <img
-                className={
-                    classes.imageLibraryThumbnail +
-                    ' ' +
-                    (selected === motive ? classes.activeGalleryImage : classes.inactiveGalleryImage)
-                }
-                src={typeof motive === 'object' ? motive.url : motive}
-                onClick={() => onSelect(motive)}
-                style={{
-                    background:
-                        motive.thumbnail && motive.thumbnail.isThumbnailBright ? '#c4c4c4' : 'transparent',
-                }}
-            />
-        </AnalyticsWrapper>
+    ({ selected, classes, motive, onSelect, hidePrices }) => (
+        <div className={classes.imageContainer}>
+            <AnalyticsWrapper targetId="image_thumbnail_select" data={motive}>
+                <img
+                    className={
+                        classes.imageLibraryThumbnail +
+                        ' ' +
+                        (selected === motive ? classes.activeGalleryImage : classes.inactiveGalleryImage)
+                    }
+                    src={typeof motive === 'object' ? motive.url : motive}
+                    alt={typeof motive === 'object' ? motive.title : motive}
+                    onClick={() => onSelect(motive)}
+                    style={{
+                        background:
+                            motive.thumbnail && motive.thumbnail.isThumbnailBright
+                                ? '#c4c4c4'
+                                : 'transparent',
+                    }}
+                />
+            </AnalyticsWrapper>
+            {!hidePrices && typeof motive === 'object' && motive.priceFormatted !== null && (
+                <div className={classes.priceLabel}>
+                    <Typography className={classes.priceLabelText} variant="body2">
+                        {motive.priceFormatted}
+                    </Typography>
+                </div>
+            )}
+        </div>
     )
 );
 
@@ -57,6 +85,7 @@ class ImageLibraryThumbnail extends React.Component {
         motives: PropTypes.array,
         onSelect: PropTypes.func,
         selected: PropTypes.object,
+        client: PropTypes.object,
     };
     onSelect = preventEventDoubling(item => {
         const { onSelect } = this.props;
@@ -64,8 +93,11 @@ class ImageLibraryThumbnail extends React.Component {
     });
 
     render() {
-        const { motives, selected } = this.props;
-
+        const { motives, selected, client } = this.props;
+        const query = new URLSearchParams(location.search);
+        const hidePrices = query.has('_hide_prices')
+            ? query.get('_hide_prices') === '1'
+            : client && !!client.hidePrices;
         return (
             <Scrollbars
                 autoHeightMin={250}
@@ -75,7 +107,13 @@ class ImageLibraryThumbnail extends React.Component {
                 style={motivesWrapper}
             >
                 {motives.map((motive, i) => (
-                    <ImageThumbnail key={i} motive={motive} onSelect={this.onSelect} selected={selected} />
+                    <ImageThumbnail
+                        key={i}
+                        motive={motive}
+                        onSelect={this.onSelect}
+                        selected={selected}
+                        hidePrices={hidePrices}
+                    />
                 ))}
             </Scrollbars>
         );

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

@@ -52,6 +52,7 @@ import { getConf } from 'App/configuration';
 import { EventTypes } from 'App/Constant';
 import { expandVectorizeColorsMap, getClosestColorFromMap } from '../Utils/ImageEditUtils';
 import { getRasterURL, isOriginalVector } from '../Utils/Transformers';
+import { getClient, getConfigurator } from '../../../Reducers/Configurator/Selectors';
 
 const getOperationsFromState = state => {
     const { clipping, clippingColor, vectorize, vectorizeThreshold, vectorizeColorsMap } = state;
@@ -124,6 +125,7 @@ export class ImageEditDialogContainer extends React.Component {
         ImageUploadComponent: PropTypes.elementType,
         customControlElements: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
         checkOwnership: PropTypes.bool,
+        client: PropTypes.object,
     };
 
     static defaultProps = {
@@ -650,6 +652,7 @@ export class ImageEditDialogContainer extends React.Component {
             customControlElements,
             checkOwnership,
             designProductionMethod,
+            client,
         } = this.props;
         const {
             preview,
@@ -751,6 +754,7 @@ export class ImageEditDialogContainer extends React.Component {
                     open={this.state.showAddImagePanel}
                     onClose={this.closeAddImagePanel}
                     onSelectImage={this.onSelectImage}
+                    client={client}
                 />
             </React.Fragment>
         );
@@ -795,6 +799,7 @@ const mapStateToProps = state => {
     const imageColorsWereEdited = userImage && !!userImage.imageColorsWereEdited;
     const initialColorMaxAmount = getInitialMaxColorAmount(state);
     const colorPreviewRequirementFulfilled = isColorPreviewCompatible(state, userImage);
+    const client = getClient(getConfigurator(state));
 
     return {
         Component: open ? ImageEditDialogContainer : () => null,
@@ -821,6 +826,7 @@ const mapStateToProps = state => {
         initialColorMaxAmount,
         colorPreviewRequirementFulfilled,
         designProductionMethod,
+        client,
     };
 };
 

package/src/App/configuration.js

@@ -193,6 +193,15 @@ let applicationConfiguration = {
             useShadowGround: true,
             // remove the shadow ground for screenshots
             removeGroundForScreenshot: true,
+            // use an environment map
+            useEnvironmentMap: true,
+            // use programmatically generated baked shadow (instead of directional light shadow)
+            useBakedShadows: false,
+            // baked shadow parameters (for all available see redhotmagma-visualization/src/Three/Three3DScene.js)
+            bakedShadow: {
+                blurRadius: 6,
+                shadowOpacity: 0.8,
+            },
         },
     },