@configuratorware/configurator-frontendgui 1.40.6 → 1.41.1

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,

package/src/App/Services/DesignDataService.js

@@ -86,6 +86,8 @@ import {
     getVectorizeForDesignProductionMethods,
     getImagesByDesignArea,
     designProductionMethodHasEmbroideryVisualizationEffect,
+    getMandatoryVectorizationForDesignProductionMethods,
+    isVectorizedLogoMandatory,
 } from '../Reducers/DesignArea/Selectors';
 import {
     getUserImage,
@@ -1075,6 +1077,33 @@ export default class DesignDataService {
         }
     };
 
+    handleDesignProductionMethodChangeToMandatoryVectorization = async designProductionMethodIdentifier => {
+        const state = Services.store.state;
+
+        const {
+            currentVectorsMandatory,
+            newVectorsMandatory,
+        } = getMandatoryVectorizationForDesignProductionMethods(state, designProductionMethodIdentifier);
+
+        const designArea = getSelectedDesignArea(state);
+        const nonColorizedImages = getImagesByDesignArea(state, designArea.identifier).filter(
+            obj => !get(obj, 'imageData.gallery') && !get(obj, 'imageData.displayColorPreview')
+        );
+
+        if (
+            nonColorizedImages.length === 1 &&
+            ((!currentVectorsMandatory && newVectorsMandatory) ||
+                !isColorPreviewCompatible(
+                    state,
+                    nonColorizedImages[0].imageData,
+                    designProductionMethodIdentifier
+                ))
+        ) {
+            await Services.store.dispatch(showSwitchToProductionMethodWithVectorization());
+            return true;
+        }
+    };
+
     checkColorUsageForDesignProductionMethod = async designProductionMethodIdentifier => {
         const state = Services.store.state;
         const { maxColorAmount, designProductionMethod } = getSelectedDesignAreaProperties(state);
@@ -1086,9 +1115,9 @@ export default class DesignDataService {
         const currentVectorsRequired = !!get(designProductionMethod, 'options.vectorsRequired');
         const newVectorsRequired = !!get(newProductionMethod, 'options.vectorsRequired');
         const designArea = getSelectedDesignArea(state);
-        const colorPreviewRequired = designProductionMethodHasEmbroideryVisualizationEffect(
-            newProductionMethod
-        );
+        const colorPreviewRequired =
+            designProductionMethodHasEmbroideryVisualizationEffect(newProductionMethod) ||
+            isVectorizedLogoMandatory(newProductionMethod);
 
         if (
             (newMaxColorAmount !== 0 && newMaxColorAmount < maxColorAmount) ||
@@ -1116,6 +1145,8 @@ export default class DesignDataService {
                 images.forEach(object => {
                     object.remove();
                 });
+
+                await this.updateCanvasData(canvas);
             }
         }
 
@@ -1194,9 +1225,9 @@ export default class DesignDataService {
     };
 
     async vectorizeSingleImageAndShowEditDialog(identifier) {
-        const showImageEditDialog = await this.handleDesignProductionMethodChangeFromNonVectorizationToVectorization(
-            identifier
-        );
+        const showImageEditDialog =
+            (await this.handleDesignProductionMethodChangeFromNonVectorizationToVectorization(identifier)) ||
+            (await this.handleDesignProductionMethodChangeToMandatoryVectorization(identifier));
 
         if (showImageEditDialog) {
             Services.ui.show('globalLoader');
@@ -1204,16 +1235,22 @@ export default class DesignDataService {
             const state = Services.store.state;
             const designArea = getSelectedDesignArea(state);
             const canvas = this._getCanvas(designArea);
-            const firstNonVectorizedImage = getImagesByDesignArea(state, designArea.identifier).find(
-                obj => !get(obj, 'imageData.operations.vectorize')
+
+            const images = getImagesByDesignArea(state, designArea.identifier);
+            const firstNonVectorizedImage = images.find(
+                obj =>
+                    !get(obj, 'imageData.gallery') &&
+                    (!get(obj, 'imageData.operations.vectorize') ||
+                        !get(obj, 'imageData.displayColorPreview'))
             );
-            const operations = {
-                ...firstNonVectorizedImage.imageData.operations,
-                vectorize: true,
-            };
-            const imageData = firstNonVectorizedImage.imageData;
 
             try {
+                const operations = {
+                    ...firstNonVectorizedImage.imageData.operations,
+                    vectorize: true,
+                };
+                const imageData = firstNonVectorizedImage.imageData;
+
                 //returing if placeHolderImage, from executing edit operations
                 if (imageData.isPlaceHolderImage) {
                     return;
@@ -1855,13 +1892,16 @@ export default class DesignDataService {
         const compatibilityInfoHash = getDesignAreaImageCompatibilityInfo(designProductionMethod);
         const imageIsCompatible = areHashesCompatible(image.compatibilityInfoHash, compatibilityInfoHash);
         const operationsMatching = compareOperations(image.operations, operations);
-        const colorPreviewRequired = designProductionMethodHasEmbroideryVisualizationEffect(
-            designProductionMethod
-        );
+        const vectorizedLogoMandatory = isVectorizedLogoMandatory(designProductionMethod);
+
+        const colorPreviewRequired =
+            designProductionMethodHasEmbroideryVisualizationEffect(designProductionMethod) ||
+            vectorizedLogoMandatory;
 
         const imageDataPatch = {
             compatibilityInfoHash,
             colorPreviewRequired,
+            vectorizedLogoMandatory,
             ...(displayColorPreview !== undefined && { displayColorPreview }),
         };