@configuratorware/configurator-frontendgui 1.29.4 → 1.30.0

package/App/configuration.js

@@ -31,7 +31,7 @@ var DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local'; // eslint-disabl
 var DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 var hostsByNodeEnv = {
   production: '',
-  development: DEVELOPMENT_HOST_INT,
+  development: DEVELOPMENT_HOST_LOCAL,
   test: ''
 };
 var resourceUrlsByNodeEnv = {

package/package.json

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

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

@@ -128,7 +128,7 @@ exports[`Option renders with Incompatibility link 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-50"
+                  class="MuiSvgIcon-root Option-materialIcon-50 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -397,7 +397,7 @@ exports[`Option renders with details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-39"
+                  class="MuiSvgIcon-root Option-materialIcon-39 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >

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

@@ -357,7 +357,12 @@ const Option = ({ children, render, ...props }) => {
                 {displayDetails && (
                     <div>
                         <a className={classes.iconWithText} onClick={onDetailsClicked}>
-                            <InfoRoundedIcon className={classes.materialIcon} />
+                            <InfoRoundedIcon
+                                className={clsx(
+                                    classes.materialIcon,
+                                    customClassName('rule-info-icon-option')
+                                )}
+                            />
                             <Typography variant={'body2'} className={classes.iconWithText}>
                                 {translations.details}
                             </Typography>
@@ -368,7 +373,12 @@ const Option = ({ children, render, ...props }) => {
                 {resultStatus !== true && (
                     <div>
                         <a className={classes.iconWithText} onClick={onIncompatibilityClicked}>
-                            <WarningRoundedIcon className={classes.materialIcon} />
+                            <WarningRoundedIcon
+                                className={clsx(
+                                    classes.materialIcon,
+                                    customClassName('rule-alert-icon-option')
+                                )}
+                            />
                             <Typography variant={'body2'}>{translations.incompatibility}</Typography>
                         </a>
                     </div>

package/src/App/Modules/Creator/Components/OptionsList/index.js

@@ -56,22 +56,24 @@ const useStyles = makeStyles(
     }
 );
 
-const OptionsList = ({
-    addCheckedOptionclassification,
-    children,
-    isLoading,
-    onClose,
-    onSelect,
-    onToggle,
-    optionclassification,
-    options,
-    show,
-    viewDetails,
-    viewStockInformation,
-    LoadingComponent,
-    OptionComponent,
-    isAdminMode,
-}) => {
+const OptionsList = ({ render, ...props }) => {
+    const {
+        addCheckedOptionclassification,
+        children,
+        isLoading,
+        onClose,
+        onSelect,
+        onToggle,
+        optionclassification,
+        options,
+        show,
+        viewDetails,
+        viewStockInformation,
+        LoadingComponent,
+        OptionComponent,
+        isAdminMode,
+    } = props;
+
     const classes = useStyles();
 
     const createOptions = () => {
@@ -130,22 +132,33 @@ const OptionsList = ({
         );
     };
 
-    return (
-        <CustomDialog
-            className={clsx(classes.dialogStyle, customClassName('options'))}
-            dialogTitle={optionclassification.title}
-            onCancel={onClose}
-            onClose={onClose}
-            open={show && !!optionclassification.identifier}
-            BackdropProps={{
-                classes: {
-                    root: classes.backDrop,
-                },
-            }}
-        >
-            <DialogContent className={classes.contentStyle}>{renderOptions()}</DialogContent>
-        </CustomDialog>
-    );
+    const renderOptionsList = () => {
+        return (
+            <CustomDialog
+                className={clsx(classes.dialogStyle, customClassName('options'))}
+                dialogTitle={optionclassification.title}
+                onCancel={onClose}
+                onClose={onClose}
+                open={show && !!optionclassification.identifier}
+                BackdropProps={{
+                    classes: {
+                        root: classes.backDrop,
+                    },
+                }}
+            >
+                <DialogContent className={classes.contentStyle}>{renderOptions()}</DialogContent>
+            </CustomDialog>
+        );
+    };
+
+    const getRenderProps = () => ({
+        ...props,
+        renderOptions,
+        createOptions,
+        renderOptionsList,
+    });
+
+    return typeof render === 'function' ? render(getRenderProps()) : renderOptionsList();
 };
 
 OptionsList.defaultProps = {
@@ -178,6 +191,7 @@ OptionsList.propTypes = {
     LoadingComponent: PropTypes.elementType,
     OptionComponent: PropTypes.elementType,
     isAdminMode: PropTypes.bool,
+    render: PropTypes.func,
 };
 
 export default OptionsList;

package/src/App/Modules/Designer/Components/ImageColorPicker/ImageColorPicker.js

@@ -210,17 +210,16 @@ export class ImageColorPicker extends React.Component {
         const { width: pw, height: ph } = container.getBoundingClientRect();
         const { width: ow, height: oh } = img;
 
-        const pa = pw / ph;
         const oa = ow / oh;
 
-        if (pa >= oa) {
-            const height = Math.min(ph, oh);
-            const width = (height * ow) / oh;
+        if (oa <= 1) {
+            const height = ph;
+            const width = height * (ow / oh);
 
             this.updateCanvasDimensionsAndContent(canvas, img, width, height);
         } else {
-            const width = Math.min(pw, ow);
-            const height = (width * oh) / ow;
+            const width = pw;
+            const height = width * (oh / ow);
 
             this.updateCanvasDimensionsAndContent(canvas, img, width, height);
         }

package/src/App/Modules/Designer/Components/ImageEditDialog/ImageThumbnail.js

@@ -52,7 +52,7 @@ class ImageThumbnail extends React.Component {
         }
 
         if (!image.displayColorPreview && !image.gallery) {
-            return getRasterURL(image.preview.url);
+            return getRasterURL(getPreviewUrlFromImageData(image.thumbnail));
         }
 
         this.downloadSvg(image);

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

@@ -32,6 +32,7 @@ import ColorPicker from '../ImageColorPicker/ImageColorPicker';
 import ImageThumbnail from './ImageThumbnail';
 import colorizeIcon from './res/baseline_colorize_black_24dp.png';
 import checkers from './res/checkers_tile.png';
+import { isOriginalVector } from '../../Utils/Transformers';
 
 const styles = theme => ({
     dialogContent: {
@@ -499,7 +500,8 @@ class ImageEditDialog extends React.Component {
                                         src={
                                             [0, 2].includes(activeTabIndex) &&
                                             !displayColorPreview &&
-                                            !image.gallery
+                                            !image.gallery &&
+                                            !isOriginalVector(image)
                                                 ? originalImagePreview
                                                 : preview
                                         }

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

@@ -51,7 +51,7 @@ import createSelector from 'Utils/Function/createSelector';
 import { getConf } from 'App/configuration';
 import { EventTypes } from 'App/Constant';
 import { expandVectorizeColorsMap, getClosestColorFromMap } from '../Utils/ImageEditUtils';
-import { getRasterURL } from '../Utils/Transformers';
+import { getRasterURL, isOriginalVector } from '../Utils/Transformers';
 
 const getOperationsFromState = state => {
     const { clipping, clippingColor, vectorize, vectorizeThreshold, vectorizeColorsMap } = state;
@@ -197,12 +197,10 @@ export class ImageEditDialogContainer extends React.Component {
             image.preview &&
             image.preview.url &&
             activeTabIndex === 2 &&
-            originalImagePreview === null
+            originalImagePreview === null &&
+            !isOriginalVector(image)
         ) {
-            const previewUrl = `${getConf('network.host')}${image.preview.url}`;
-            this.setState({
-                originalImagePreview: image.gallery ? previewUrl : previewUrl.replace(/.svg$/, '.png'),
-            });
+            this.updateOriginalPreview();
         }
 
         if (operationsChanged) {
@@ -285,6 +283,24 @@ export class ImageEditDialogContainer extends React.Component {
         }
     }
 
+    updateOriginalPreview = async () => {
+        const { image } = this.props;
+        const previewUrl = `${getConf('network.host')}${image.preview.url}`;
+        const isSvg = previewUrl && /\.svg$/.test(previewUrl);
+        if (isSvg) {
+            const svgContent = await getSvgContent(previewUrl, true);
+            const preview = applySvgContentOperations(image.preview, null, svgContent);
+
+            this.setState({
+                originalImagePreview: preview,
+            });
+        } else {
+            this.setState({
+                originalImagePreview: previewUrl,
+            });
+        }
+    };
+
     setUpload = upload => {
         this.setState({ upload });
     };
@@ -471,25 +487,33 @@ export class ImageEditDialogContainer extends React.Component {
         let preview = null;
         let originalImagePreview = null;
 
+        let previewUrl = image?.preview?.url;
+        if (previewUrl && activeTabIndex === 1) {
+            previewUrl = getRasterURL(previewUrl);
+        }
+
+        const isSvg = previewUrl && /\.svg$/.test(previewUrl);
+
         if (image) {
-            const updateSVG =
-                activeTabIndex !== 1 &&
-                (image.displayColorPreview || image.gallery) &&
-                isEditableVectorImage(image.preview);
+            const updateSVG = isSvg;
 
             if (updateSVG) {
                 if (!svgContent) {
                     svgContent = await getSvgContent(image.preview.url, false, forceFetch);
                 }
 
-                preview = applySvgContentOperations(image.preview, image.operations, svgContent);
+                preview = applySvgContentOperations(
+                    image.preview,
+                    image.displayColorPreview ? image.operations : null,
+                    svgContent
+                );
             } else {
                 const forceUpdate = isImageInvalidatedByChange(this.lastImageUpdateData, image);
                 if (forceUpdate) {
                     this.previewVersion = Math.random();
                 }
                 preview =
-                    getRasterURL(getPreviewUrlFromImageData(image.preview)) +
+                    getPreviewUrlFromImageData(previewUrl) +
                     (this.previewVersion ? `?${this.previewVersion}` : '');
                 originalImagePreview = preview;
             }

package/src/App/Modules/Designer/Utils/SvgFixers.js

@@ -0,0 +1,36 @@
+export const getMatchAt = (str, regexp, idx = 1, defaultValue = '') => {
+    const matches = ('' + str).match(regexp);
+    return (matches && matches[idx]) || defaultValue;
+};
+
+export const embeddedSvgImageToInlineSvgContent = svgStr =>
+    svgStr.replace(/<image([^>]+)xlink:href="data:image\/svg\+xml;base64,([^"]+)"[^>]*>/g, function(
+        _,
+        attributesStr,
+        base64Str
+    ) {
+        const x = getMatchAt(attributesStr, /x="([^"]+)"/, 1, 0);
+        const y = getMatchAt(attributesStr, /y="([^"]+)"/, 1, 0);
+        const transform = getMatchAt(attributesStr, /transform="([^"]+)"/, 1, '');
+        const svgContent = atob(base64Str).replace(/(<\?xml[^>]+>)|(<!--[^>]+-->)/gi, '');
+        return `<g transform="${transform} translate(${x},${y})">${svgContent}</g>`;
+    });
+
+export const alterObjectValues = (obj, fn) => {
+    Object.keys(obj).forEach(key => {
+        obj[key] = fn(obj[key], key);
+    });
+    return obj;
+};
+
+export const alterArrayValues = (arr, fn) => {
+    arr.forEach((value, key) => {
+        arr[key] = fn(value, key);
+    });
+    return arr;
+};
+
+export const prepareDesignDataSnapshots = svgArrMap =>
+    alterObjectValues(svgArrMap, arr => alterArrayValues(arr, embeddedSvgImageToInlineSvgContent));
+
+export const preparePrintDesignData = svgMap => alterObjectValues(svgMap, embeddedSvgImageToInlineSvgContent);

package/src/App/Modules/Designer/Utils/Transformers.js

@@ -19,6 +19,8 @@ export const fixSrcURL = src => {
 
 export const getRasterURL = imageURL => ('' + imageURL).replace(/svg$/, 'png');
 
+export const isOriginalVector = imageData => /svg|pdf|eps|ai/i.test(get(imageData, 'original.format', ''));
+
 export const noCache = src => `${src}?${Math.random()}`;
 
 export const prepareImageObjectData = rawObject => {
@@ -29,21 +31,22 @@ export const prepareImageObjectData = rawObject => {
         src: fixSrcURL(rawObject.src),
     };
 
-    data.transformImageSrc = async (url, { preview, operations } = {}) => {
+    data.transformImageSrc = async (url, { operations } = {}) => {
         if (!isEditableVectorImage({ url })) {
             return noCache(url);
         }
 
         const { displayColorPreview, gallery, isPlaceHolderImage } = image;
+        const originalVector = isOriginalVector(image);
 
-        if (!displayColorPreview && !gallery && !isPlaceHolderImage) {
+        if (!originalVector && !displayColorPreview && !gallery && !isPlaceHolderImage) {
             return noCache(fixSrcURL(getRasterURL(get(image, 'preview.url', ''))));
         }
 
         const svgContent = await getSvgContent(url, true);
 
         return applySvgContentOperations(
-            preview ? preview : image.preview,
+            image.preview,
             displayColorPreview || gallery ? (operations ? operations : image.operations) : null,
             svgContent
         );

package/src/App/Modules/Designer/Utils/__tests__/Transformers.test.js

@@ -94,7 +94,7 @@ describe('App/Modules/Designer/Utils/Transformers', () => {
         expect(transformedSrc).toBe('base64encodedSVG');
     });
 
-    it('transformImageSrc uses the raster image if color preview is disabled but the original format is SVG', async () => {
+    it('transformImageSrc uses the SVG image if color preview is disabled but the original format is SVG', async () => {
         DesignDataHelpers.getSvgContent.mockResolvedValue('<svg></svg>');
         DesignDataHelpers.applySvgContentOperations.mockReturnValue('base64encodedSVG');
         const currentSrc = 'path/to/image.svg';
@@ -113,7 +113,7 @@ describe('App/Modules/Designer/Utils/Transformers', () => {
         };
         const preparedImageData = prepareImageObjectData(imageObjectData);
         const transformedSrc = await preparedImageData.transformImageSrc(currentSrc);
-        expect(transformedSrc.indexOf('path/to/image.png')).toBe(0);
+        expect(transformedSrc).toBe('base64encodedSVG');
     });
 
     it('transformImageSrc applies the operations (vectorizeColorsMap) on gallery images', async () => {

package/src/App/Reducers/ImageGallery/Selectors.js

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 import find from 'lodash/find';
+import isString from 'lodash/isString';
 import flatten from 'lodash/flatten';
 import { getConf } from '../../configuration';
 import { getConfiguration, getConfigurator } from '../Configurator/Selectors';
@@ -15,11 +16,12 @@ import {
 import isEqual from 'lodash/isEqual';
 
 export const getPreviewUrlFromImageData = (preview, options = {}) => {
-    if (/^data:image/.test(preview.url)) {
-        return preview.url;
+    const previewUrl = isString(preview) ? preview : preview.url;
+    if (/^data:image/.test(previewUrl)) {
+        return previewUrl;
     }
     const { host = getConf('network.host', '') } = options;
-    return `${host}${preview.url}`;
+    return `${host}${previewUrl}`;
 };
 
 export const isEditableVectorImage = preview => {

package/src/App/Services/AnalyticsService.js

@@ -356,34 +356,21 @@ export default class AnalyticsService {
 
     EventTypes = EventTypes;
 
-    async setDataLayer(dataLayer) {
-        await Services.store.addMiddleware(this.createMiddleware(dataLayer));
+    setDataLayer(dataLayer) {
+        this.dataLayer = dataLayer;
         const loadIdentifier = Services.configurator.state.loadIdentifier;
         loadIdentifier && this.triggerEvent(EventTypes.load_item, Services.configurator.state.loadIdentifier);
     }
 
-    createMiddleware(dataLayer) {
-        return store => next => action => {
-            const result = next(action);
-
-            const actionsToTrack = this.getActionsToTrack();
-            if (!actionsToTrack[action.type]) {
-                return result;
-            }
-            const nextState = store.getState();
-            if (action.type) {
-                const data = actionsToTrack[action.type](action, nextState);
-                dataLayer.push(data);
-            }
-            return result;
-        };
-    }
-
     getActionsToTrack() {
         return actionsToTrack;
     }
 
     triggerEvent(type, data = {}) {
-        Services.store.dispatch({ type, data });
+        const actionsToTrack = this.getActionsToTrack();
+        if (type && actionsToTrack[type]) {
+            const gaData = actionsToTrack[type]({ type, data }, Services.store.state);
+            this.dataLayer && this.dataLayer.push(gaData);
+        }
     }
 }

package/src/App/Services/ConfiguratorService.js

@@ -44,6 +44,7 @@ import createMessageInterface, {
     METHOD_ADD_TO_CART,
     METHOD_CONFIGURATION_SAVED_REMOTELY,
 } from '../Utils/createMessageInterface';
+import { prepareDesignDataSnapshots, preparePrintDesignData } from '../Modules/Designer/Utils/SvgFixers';
 
 const getSelectedAmountsBySizes = (item, selectedAmounts) => {
     const itemGroupMap = (rootItem, fn) => {
@@ -363,10 +364,10 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
         const fontMapping = getFontMapping(Services.store.state);
 
         const svgs = await Services.designData.getScreenshotsOfElements(fontMapping);
-        mediaData.designDataSnapshots = svgs;
+        mediaData.designDataSnapshots = prepareDesignDataSnapshots(svgs);
 
         const fullSvgs = await Services.designData.getScreenshots(fontMapping);
-        mediaData.printDesignData = fullSvgs;
+        mediaData.printDesignData = preparePrintDesignData(fullSvgs);
         const usedAreas = Object.keys(fullSvgs);
 
         const { designArea } = Services.store.state;

package/src/App/Services/DesignDataService.js

@@ -373,16 +373,18 @@ export const makeOperationsCompatible = (operations, compatibilityInfo, colorPal
 
 export const getSvgContent = (() => {
     const svgContentMap = new Map();
-    return async function getSvgContent(url, absolute = false, forceFetch = false) {
+    return function getSvgContent(url, absolute = false, forceFetch = false) {
         const absUrl = absolute ? url : `${getConf('network.host')}${url}`;
         if (!forceFetch && svgContentMap.has(absUrl)) {
             return svgContentMap.get(absUrl);
         }
         try {
-            const result = await axios.get(absUrl);
-            const svgContent = initDefaultColor(result.data);
-            svgContentMap.set(absUrl, svgContent);
-            return svgContent;
+            const promise = (async function() {
+                const result = await axios.get(absUrl);
+                return initDefaultColor(result.data);
+            })();
+            svgContentMap.set(absUrl, promise);
+            return promise;
         } catch (e) {
             return '';
         }
@@ -1042,12 +1044,18 @@ export default class DesignDataService {
         );
 
         const designArea = getSelectedDesignArea(state);
-        const images = getImagesByDesignArea(state, designArea.identifier);
+        const nonVectorizedImages = getImagesByDesignArea(state, designArea.identifier).filter(
+            obj => !get(obj, 'imageData.operations.vectorize')
+        );
 
         if (
-            images.length === 1 &&
+            nonVectorizedImages.length === 1 &&
             ((!currentVectorsRequired && newVectorsRequired) ||
-                !isColorPreviewCompatible(state, images[0].imageData, designProductionMethodIdentifier))
+                !isColorPreviewCompatible(
+                    state,
+                    nonVectorizedImages[0].imageData,
+                    designProductionMethodIdentifier
+                ))
         ) {
             await Services.store.dispatch(showSwitchToProductionMethodWithVectorization());
             return true;
@@ -1083,7 +1091,7 @@ export default class DesignDataService {
                       }
 
                       return (
-                          !isEditableVectorImage(obj.imageData.preview) ||
+                          !get(obj, 'imageData.operations.vectorize') ||
                           !isColorPreviewCompatible(state, obj.imageData, designProductionMethodIdentifier)
                       );
                   })
@@ -1183,12 +1191,14 @@ export default class DesignDataService {
             const state = Services.store.state;
             const designArea = getSelectedDesignArea(state);
             const canvas = this._getCanvas(designArea);
-            const images = getImagesByDesignArea(state, designArea.identifier);
+            const firstNonVectorizedImage = getImagesByDesignArea(state, designArea.identifier).find(
+                obj => !get(obj, 'imageData.operations.vectorize')
+            );
             const operations = {
-                ...images[0].imageData.operations,
+                ...firstNonVectorizedImage.imageData.operations,
                 vectorize: true,
             };
-            const imageData = images[0].imageData;
+            const imageData = firstNonVectorizedImage.imageData;
 
             try {
                 //returing if placeHolderImage, from executing edit operations
@@ -1202,10 +1212,14 @@ export default class DesignDataService {
                     .find(obj => obj._imageData.identifier === imageData.identifier);
                 imageToSelect.selected = true;
 
-                await Services.designer.openImageEditDialog(images[0].imageData.identifier, canvas, {
-                    placeholderImageUpdate: false,
-                    submitOnExitClick: true,
-                });
+                await Services.designer.openImageEditDialog(
+                    firstNonVectorizedImage.imageData.identifier,
+                    canvas,
+                    {
+                        placeholderImageUpdate: false,
+                        submitOnExitClick: true,
+                    }
+                );
             } finally {
                 Services.ui.hide('globalLoader');
             }
@@ -1875,8 +1889,8 @@ export default class DesignDataService {
 
                 const isBackendNeeded = createCopy || !isEqual(editData, currentEditData);
 
-                isBackendNeeded &&
-                    (await Services.store.dispatch(
+                if (isBackendNeeded) {
+                    await Services.store.dispatch(
                         editImage(
                             {
                                 ...editData,
@@ -1890,12 +1904,13 @@ export default class DesignDataService {
                             },
                             { immediateCommit }
                         )
-                    ));
-                const {
-                    imageGallery: { selectedImage },
-                } = Services.store.state;
-                preview = get(selectedImage, 'preview');
-                imageIdentifier = get(selectedImage, 'identifier');
+                    );
+                    const {
+                        imageGallery: { selectedImage },
+                    } = Services.store.state;
+                    preview = get(selectedImage, 'preview');
+                    imageIdentifier = get(selectedImage, 'identifier');
+                }
             }
         }