@configuratorware/configurator-frontendgui 1.40.2 → 1.40.4

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

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

@@ -97,6 +97,7 @@ export class ImageEditDialogContainer extends React.Component {
         open: PropTypes.bool,
         editMode: PropTypes.bool,
         vectorsRequired: PropTypes.bool,
+        vectorizedLogoMandatory: PropTypes.bool,
         colorDisabled: PropTypes.bool,
         loading: PropTypes.bool,
         errorCode: PropTypes.string,
@@ -180,6 +181,7 @@ export class ImageEditDialogContainer extends React.Component {
             isImageCompatible,
             isColorMappingCompatible,
             vectorsRequired,
+            vectorizedLogoMandatory,
         } = this.props;
 
         const { vectorize, vectorizeColorsMap, activeTabIndex, originalImagePreview } = this.state;
@@ -256,13 +258,32 @@ export class ImageEditDialogContainer extends React.Component {
             Object.assign(newState, { vectorizeColorsMap });
         }
 
-        if (activeTabIndex === 2 && vectorsRequired && !vectorize && !image.gallery) {
+        if (
+            activeTabIndex === 2 &&
+            (vectorsRequired || vectorizedLogoMandatory) &&
+            !vectorize &&
+            !image.gallery
+        ) {
             Object.assign(newState, {
                 vectorize: true,
             });
         }
 
-        !isMatch(this.state, newState) && this.handleStateChange(newState);
+        let options;
+        if (
+            activeTabIndex === 2 &&
+            !image.gallery &&
+            vectorizedLogoMandatory &&
+            !image.displayColorPreview &&
+            !this.state.displayColorPreview
+        ) {
+            options = { displayColorPreview: true };
+            Object.assign(newState, {
+                displayColorPreview: true,
+            });
+        }
+
+        (!isMatch(this.state, newState) || options) && this.handleStateChange(newState, options);
 
         if ((justOpened || imageChanged) && !image.incomplete) {
             this.updatePreview(null, { forceFetch: operationsChanged });
@@ -514,10 +535,12 @@ export class ImageEditDialogContainer extends React.Component {
                 if (forceUpdate) {
                     this.previewVersion = Math.random();
                 }
-                preview =
-                    getPreviewUrlFromImageData(previewUrl) +
-                    (this.previewVersion ? `?${this.previewVersion}` : '');
-                originalImagePreview = preview;
+                if (previewUrl) {
+                    preview =
+                        getPreviewUrlFromImageData(previewUrl) +
+                        (this.previewVersion ? `?${this.previewVersion}` : '');
+                    originalImagePreview = preview;
+                }
             }
         }
 
@@ -641,6 +664,7 @@ export class ImageEditDialogContainer extends React.Component {
             maxColorAmount,
             colorDisabled,
             vectorsRequired,
+            vectorizedLogoMandatory,
             image,
             usedColors,
             imageColorsWereEdited,
@@ -680,6 +704,7 @@ export class ImageEditDialogContainer extends React.Component {
             activeTabIndex === 2 &&
             colorCount > 0 &&
             !isGalleryImage &&
+            !vectorizedLogoMandatory &&
             (colorPreviewEnabled || !colorPreviewRequirementFulfilled);
 
         return (
@@ -779,6 +804,7 @@ const mapStateToProps = state => {
     const colorPalettes = getColorPalettes(state);
     const designProductionMethod = getSelectedDesignProductionMethod(state);
     const vectorsRequired = !!get(designProductionMethod, 'options.vectorsRequired');
+    const vectorizedLogoMandatory = !!get(designProductionMethod, 'options.vectorizedLogoMandatory');
     const colorDisabled = isColoringDisabled(state);
     const userImages = getUserImages(imageGallery);
     const hasPlaceHolderImage = hasPlaceHolderImagesForActiveDesignArea(state);
@@ -818,6 +844,7 @@ const mapStateToProps = state => {
         userImages,
         colorPalettes,
         vectorsRequired,
+        vectorizedLogoMandatory,
         colorDisabled,
         uploadSize,
         galleryHasImages,

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

@@ -13,6 +13,7 @@ import intersectionBy from 'lodash/intersectionBy';
 import isEqual from 'lodash/isEqual';
 import values from 'lodash/values';
 import createSelector from 'Utils/Function/createSelector';
+import memoize from 'Utils/Function/memoize';
 import { getConf } from '../../configuration';
 import { getMissingColorPalettesColors } from '../../Services/DesignDataService';
 import { getConfigurator, getSelectedVariantIdentifier } from '../Configurator/Selectors';
@@ -368,17 +369,19 @@ export function getCurrentCanvasSize(state, defaultSize = zeroSize) {
     return getCanvasSizeFromDesignProductionMethod(designProductionMethod);
 }
 
+const memoizedCanvasSize = memoize((width, height, isMetric, dpi) => ({
+    width,
+    height,
+    isMetric,
+    dpi,
+}));
+
 export function getCanvasSizeFromDesignProductionMethod(designProductionMethod, defaultSize = zeroSize) {
     const { width, height, dpi } = designProductionMethod;
     if (!width || !height) {
         return defaultSize;
     }
-    return {
-        width,
-        height,
-        isMetric: true,
-        dpi: dpi || getConf('designer.dpi', 300),
-    };
+    return memoizedCanvasSize(width, height, true, dpi || getConf('designer.dpi', 300));
 }
 
 export function getCanvasSizeFromDesignArea(state, designArea, defaultSize = zeroSize) {
@@ -800,7 +803,8 @@ export const getDesignAreaImageCompatibilityInfo = designProductionMethod => {
         .sort();
     const vectorsRequired = !!get(designProductionMethod, 'options.vectorsRequired');
     const maxColorAmount = get(designProductionMethod, 'options.maxColorAmount', 0);
-    return { colorPalettes, vectorsRequired, maxColorAmount };
+    const vectorizedLogoMandatory = get(designProductionMethod, 'options.vectorizedLogoMandatory', false);
+    return { colorPalettes, vectorsRequired, maxColorAmount, vectorizedLogoMandatory };
 };
 
 export const getCurrentCompatibilityInfoHash = state =>
@@ -812,6 +816,7 @@ export const areHashesCompatible = (storedHash, targetHash) => {
             (storedHash &&
                 isEqual(storedHash.colorPalettes, targetHash.colorPalettes) &&
                 (!targetHash.vectorsRequired || storedHash.vectorsRequired) &&
+                (!targetHash.vectorizedLogoMandatory || storedHash.vectorizedLogoMandatory) &&
                 (!targetHash.maxColorAmount || storedHash.maxColorAmount <= targetHash.maxColorAmount))
     );
 };
@@ -895,14 +900,21 @@ export const getDesignAreaColorAmount = (maxColorAmount, preSelectionColorAmount
     return amount;
 };
 
+export const isVectorizedLogoMandatory = designProductionMethod =>
+    !!designProductionMethod?.options?.vectorizedLogoMandatory;
+
 export const getVectorizeForDesignProductionMethods = (state, designProductionMethodIdentifier) => {
     const { designProductionMethod } = getSelectedDesignAreaProperties(state);
     const newProductionMethod = getDesignProductionMethodByIdentifier(
         state,
         designProductionMethodIdentifier
     );
-    const currentVectorsRequired = !!get(designProductionMethod, 'options.vectorsRequired');
-    const newVectorsRequired = !!get(newProductionMethod, 'options.vectorsRequired');
+    const currentVectorsRequired =
+        !!get(designProductionMethod, 'options.vectorsRequired') &&
+        isVectorizedLogoMandatory(designProductionMethod);
+    const newVectorsRequired =
+        !!get(newProductionMethod, 'options.vectorsRequired') &&
+        isVectorizedLogoMandatory(newProductionMethod);
 
     return {
         currentVectorsRequired,
@@ -910,6 +922,24 @@ export const getVectorizeForDesignProductionMethods = (state, designProductionMe
     };
 };
 
+export const getMandatoryVectorizationForDesignProductionMethods = (
+    state,
+    designProductionMethodIdentifier
+) => {
+    const { designProductionMethod } = getSelectedDesignAreaProperties(state);
+    const newProductionMethod = getDesignProductionMethodByIdentifier(
+        state,
+        designProductionMethodIdentifier
+    );
+    const currentVectorsMandatory = isVectorizedLogoMandatory(designProductionMethod);
+    const newVectorsMandatory = isVectorizedLogoMandatory(newProductionMethod);
+
+    return {
+        currentVectorsMandatory,
+        newVectorsMandatory,
+    };
+};
+
 export const getImagesByDesignArea = (state, designAreaIdentifier) => {
     if (!designAreaIdentifier) {
         designAreaIdentifier = getSelectedDesignArea(state).identifier;

package/src/App/Reducers/DesignArea/__tests__/Selectors.test.js

@@ -1588,6 +1588,7 @@ describe('Reducers/DesignArea/Selectors', () => {
         expect(compatibilityInfo).toEqual({
             colorPalettes: ['default'],
             vectorsRequired: true,
+            vectorizedLogoMandatory: false,
             maxColorAmount: 4,
         });
     });
@@ -1602,6 +1603,7 @@ describe('Reducers/DesignArea/Selectors', () => {
                         options: {
                             maxColorAmount: 4,
                             vectorsRequired: true,
+                            vectorizedLogoMandatory: true,
                         },
                         colorPalettes: [
                             {
@@ -1631,6 +1633,7 @@ describe('Reducers/DesignArea/Selectors', () => {
         expect(compatibilityInfo).toEqual({
             colorPalettes: ['default'],
             vectorsRequired: true,
+            vectorizedLogoMandatory: true,
             maxColorAmount: 4,
         });
     });
@@ -1664,6 +1667,22 @@ describe('Reducers/DesignArea/Selectors', () => {
                 }
             )
         ).toBe(false);
+        expect(
+            areHashesCompatible(
+                {
+                    colorPalettes: ['palette_1'],
+                    vectorsRequired: true,
+                    maxColorAmount: 4,
+                    vectorizedLogoMandatory: false,
+                },
+                {
+                    colorPalettes: ['palette_1'],
+                    vectorsRequired: true,
+                    maxColorAmount: 4,
+                    vectorizedLogoMandatory: true,
+                }
+            )
+        ).toBe(false);
     });
 
     test('areHashesCompatible returns the correct result compatible hashes', () => {

package/src/App/Reducers/DesignData/Modifiers.js

@@ -46,11 +46,14 @@ export const getEditDataFromOperations = (imageFileName, operations, designProdu
     } = operations;
 
     const maxColorAmount = +get(designProductionMethod, 'options.maxColorAmount', 0);
+
+    const vectorizedLogoMandatory = get(designProductionMethod, 'options.vectorizedLogoMandatory', false);
     const vectorizeMonochrome = maxColorAmount === 1 && vectorizeThreshold === 1;
 
     const result = {
         fileName: imageFileName,
         operations: [],
+        vectorizedLogoMandatory,
     };
 
     if (clipping && clippingColor) {

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

@@ -3,7 +3,11 @@ import { createAsyncTask } from '../UI/Actions';
 import { getUserImagesByDesignArea } from './Selectors';
 import { calculateImageBrightness } from '../../Services/DesignDataService';
 import { getImageUsageInfo } from './Selectors';
-import { getCurrentCompatibilityInfoHash } from '../DesignArea/Selectors';
+import {
+    getCurrentCompatibilityInfoHash,
+    getSelectedDesignProductionMethod,
+    isVectorizedLogoMandatory,
+} from '../DesignArea/Selectors';
 
 export const RECEIVE_GALLERY = 'imageGallery/RECEIVE_GALLERY';
 export const RECEIVE_GALLERY_TAGS = 'imageGallery/RECEIVE_GALLERY_TAGS';
@@ -94,7 +98,9 @@ export const updateImage = (identifier, imageDataPatch, immediateCommit = false)
 };
 
 export const uploadImage = file =>
-    createAsyncTask(WN_UPLOAD_IMAGE, async dispatch => {
+    createAsyncTask(WN_UPLOAD_IMAGE, async (dispatch, getState) => {
+        const designProductionMethod = getSelectedDesignProductionMethod(getState());
+        const vectorizedLogoMandatory = isVectorizedLogoMandatory(designProductionMethod);
         const data = new FormData();
         data.append('userImage', file);
         data.append('userImageEditData', JSON.stringify({}));
@@ -103,7 +109,9 @@ export const uploadImage = file =>
             postDataAsync(
                 URL_UPLOAD,
                 data,
-                createDefaultReceiver(RECEIVE_IMAGE_UPLOAD_DATA),
+                createDefaultReceiver(RECEIVE_IMAGE_UPLOAD_DATA, {
+                    vectorizedLogoMandatory,
+                }),
                 {},
                 {},
                 {
@@ -142,7 +150,9 @@ export const dismissError = () => (dispatch, getState) => {
  * @param actionOptions
  */
 export const editImage = (editData, imageData, actionOptions = {}) =>
-    createAsyncTask(WN_UPLOAD_IMAGE, async dispatch => {
+    createAsyncTask(WN_UPLOAD_IMAGE, async (dispatch, getState) => {
+        const designProductionMethod = getSelectedDesignProductionMethod(getState());
+        const vectorizedLogoMandatory = isVectorizedLogoMandatory(designProductionMethod);
         const data = new FormData();
         const { createCopy } = editData;
         data.append('userImageEditData', JSON.stringify(editData));
@@ -151,7 +161,12 @@ export const editImage = (editData, imageData, actionOptions = {}) =>
             postDataAsync(
                 URL_UPLOAD,
                 data,
-                createDefaultReceiver(RECEIVE_IMAGE_UPLOAD_DATA, { imageData, createCopy, ...actionOptions })
+                createDefaultReceiver(RECEIVE_IMAGE_UPLOAD_DATA, {
+                    imageData,
+                    createCopy,
+                    vectorizedLogoMandatory,
+                    ...actionOptions,
+                })
             )
         );
         return await calculateImageBrightness(uploadResponse);

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

@@ -30,6 +30,11 @@ const updateDerivedImageDataProps = imageData => {
         imageData.displayColorPreview = getConf('autoPreviewVectorization', true);
     }
 
+    if (imageData.vectorizedLogoMandatory) {
+        imageData.colorPreviewEnabled = false;
+        imageData.displayColorPreview = true;
+    }
+
     return imageData;
 };
 

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

@@ -12,6 +12,7 @@ import {
     getCurrentCompatibilityInfoHash,
     getDesignProductionMethodByIdentifier,
     getSelectedDesignProductionMethod,
+    isVectorizedLogoMandatory,
 } from '../DesignArea/Selectors';
 import isEqual from 'lodash/isEqual';
 
@@ -141,9 +142,9 @@ export const isColorPreviewCompatible = (state, image, designProductionMethodIde
     const designProductionMethod = designProductionMethodIdentifier
         ? getDesignProductionMethodByIdentifier(state, designProductionMethodIdentifier)
         : getSelectedDesignProductionMethod(state);
-    const colorPreviewRequired = designProductionMethodHasEmbroideryVisualizationEffect(
-        designProductionMethod
-    );
+    const colorPreviewRequired =
+        designProductionMethodHasEmbroideryVisualizationEffect(designProductionMethod) ||
+        isVectorizedLogoMandatory(designProductionMethod);
 
     const displayColorPreview = image && (!!image.gallery || !!image.displayColorPreview);
     // do not let the user to add a raster image if the production method is embroidery

package/src/App/Reducers/ImageGallery/__tests__/Actions.test.js

@@ -35,6 +35,10 @@ jest.mock('../../../Services/DesignDataService');
 
 /*skipped Tests should be updated , the tests run properly in test file but fail globally in 'npm run test'*/
 describe('Reducers/ImageGallery/Actions', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
     it('getGalleryUrlForTags encodes tags as comma separated query params', () => {
         const tags = [
             { title: 'tag1', checked: true },
@@ -51,7 +55,7 @@ describe('Reducers/ImageGallery/Actions', () => {
         expect(fetchDataAsync.mock.calls[0][0]).toBe(URL_TAGS);
         expect(fetchDataAsync.mock.calls[0][1]).toBe(receiveGalleryTags);
     });
-    it.skip('selectTags calls dispatch with the correct action and calls dispatch with the fetchGalleryAction too', () => {
+    it('selectTags calls dispatch with the correct action and calls dispatch with the fetchGalleryAction too', () => {
         const tags = [{ title: 'Cars', checked: true }];
         const dispatch = jest.fn();
         selectTags(tags)(dispatch);
@@ -61,7 +65,7 @@ describe('Reducers/ImageGallery/Actions', () => {
         });
         expect(fetchDataAsync.mock.calls[0][0]).toBe(getGalleryUrlForTags(tags));
     });
-    it.skip('fetchGallery calls fetchDataAsync with the correct url and receive action creator', () => {
+    it('fetchGallery calls fetchDataAsync with the correct url and receive action creator', () => {
         const mockResult = jest.fn(() => ({}));
         const fetchDataAsyncSpy = jest.fn(() => mockResult);
         fetchDataAsync.mockImplementationOnce(fetchDataAsyncSpy);
@@ -80,12 +84,46 @@ describe('Reducers/ImageGallery/Actions', () => {
             fileName,
         });
         const dispatch = jest.fn();
-        await uploadImage(fileName)(dispatch);
+        const getState = () => ({
+            configurator: {
+                configuration: {
+                    designdata: {
+                        designArea1: {
+                            designProductionMethodIdentifier: 'customPrinting',
+                        },
+                    },
+                },
+            },
+            designArea: {
+                selectedDesignArea: {
+                    identifier: 'designArea1',
+                    mask: null,
+                    designProductionMethods: [
+                        {
+                            identifier: 'customPrinting',
+                            mask: null,
+                            options: {
+                                maxColorAmount: 4,
+                                vectorsRequired: true,
+                                vectorizedLogoMandatory: true,
+                            },
+                            colorPalettes: [
+                                {
+                                    identifier: 'default',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+        });
+        await uploadImage(fileName)(dispatch, getState);
         expect(postDataAsync.mock.calls[0][0]).toEqual(URL_UPLOAD);
         expect(formDataToJSON(postDataAsync.mock.calls[0][1]).userImage).toEqual(fileName);
-        expect(createDefaultReceiver).toBeCalledWith(RECEIVE_IMAGE_UPLOAD_DATA);
+        expect(createDefaultReceiver.mock.calls[0][0]).toBe(RECEIVE_IMAGE_UPLOAD_DATA);
+        expect(createDefaultReceiver.mock.calls[0][1]).toMatchObject({ vectorizedLogoMandatory: true });
     });
-    it.skip('editImage calls postDataAsync with the correct params', async () => {
+    it('editImage calls postDataAsync with the correct params', async () => {
         const fileName = 'test.png';
         createAsyncTask.mockImplementationOnce((name, action) => action);
         postDataAsync.mockResolvedValueOnce({
@@ -101,12 +139,46 @@ describe('Reducers/ImageGallery/Actions', () => {
                 },
             ],
         };
-        await editImage(editData)(dispatch);
+        const getState = () => ({
+            configurator: {
+                configuration: {
+                    designdata: {
+                        designArea1: {
+                            designProductionMethodIdentifier: 'customPrinting',
+                        },
+                    },
+                },
+            },
+            designArea: {
+                selectedDesignArea: {
+                    identifier: 'designArea1',
+                    mask: null,
+                    designProductionMethods: [
+                        {
+                            identifier: 'customPrinting',
+                            mask: null,
+                            options: {
+                                maxColorAmount: 4,
+                                vectorsRequired: true,
+                                vectorizedLogoMandatory: true,
+                            },
+                            colorPalettes: [
+                                {
+                                    identifier: 'default',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+        });
+        await editImage(editData)(dispatch, getState);
         expect(postDataAsync.mock.calls[0][0]).toEqual(URL_UPLOAD);
         expect(formDataToJSON(postDataAsync.mock.calls[0][1]).userImageEditData).toEqual(
             JSON.stringify(editData)
         );
-        expect(createDefaultReceiver).toBeCalledWith(RECEIVE_IMAGE_UPLOAD_DATA);
+        expect(createDefaultReceiver.mock.calls[0][0]).toBe(RECEIVE_IMAGE_UPLOAD_DATA);
+        expect(createDefaultReceiver.mock.calls[0][1]).toMatchObject({ vectorizedLogoMandatory: true });
     });
     it('dismissError creates the correct action', () => {
         const dispatch = jest.fn();
@@ -195,6 +267,7 @@ describe('Reducers/ImageGallery/Actions', () => {
                             options: {
                                 maxColorAmount: 4,
                                 vectorsRequired: true,
+                                vectorizedLogoMandatory: true,
                             },
                             colorPalettes: [
                                 {
@@ -222,6 +295,7 @@ describe('Reducers/ImageGallery/Actions', () => {
             vectorizeColorsMap,
             compatibilityInfoHash: {
                 maxColorAmount: 4,
+                vectorizedLogoMandatory: true,
                 vectorsRequired: true,
                 colorPalettes: ['default'],
             },

package/src/App/Screens/DesignerProductPreview/DesignerProductPreviewManager.js

@@ -7,6 +7,7 @@ import {
     getCameraViewListForDesignAreaList,
     getDefaultDesignAreaIdentifierFromProductionMethod,
     getSelectedDesignProductionMethodForDesignArea,
+    isVectorizedLogoMandatory,
 } from '../../Reducers/DesignArea/Selectors';
 import { getSelectedVariantIdentifier } from '../../Reducers/Configurator/Selectors';
 import { setSelectedImageData } from '../../Reducers/ImageGallery/Actions';
@@ -50,6 +51,8 @@ const prepareImageData = (function createImageDataPreProcessor() {
         const colorPreviewRequired = designProductionMethodHasEmbroideryVisualizationEffect(
             designProductionMethod
         );
+        const vectorizedLogoMandatory = isVectorizedLogoMandatory(designProductionMethod);
+
         if (colorPreviewRequired) {
             // creating the color map, as it was added from the image edit dialog
             const svgContent = await getSvgContent(imageData.preview.url, false, true);
@@ -59,7 +62,7 @@ const prepareImageData = (function createImageDataPreProcessor() {
                 ...imageData,
                 colorPreviewRequired: true,
                 displayColorPreview: true,
-                colorPreviewEnabled: true,
+                colorPreviewEnabled: !vectorizedLogoMandatory,
                 operations: {
                     ...imageData.operations,
                     vectorizeColorsMap,