@configuratorware/configurator-frontendgui 1.41.1 → 1.42.1

package/src/App/Services/DesignDataService.js

@@ -88,6 +88,7 @@ import {
     designProductionMethodHasEmbroideryVisualizationEffect,
     getMandatoryVectorizationForDesignProductionMethods,
     isVectorizedLogoMandatory,
+    getColorOverlayData,
 } from '../Reducers/DesignArea/Selectors';
 import {
     getUserImage,
@@ -104,6 +105,7 @@ import {
 } from '../Reducers/Configurator/Selectors';
 import { getFontMapping } from '../Reducers/Fonts/Selectors';
 import { isConfirmResult } from '../Reducers/Confirm/Actions';
+import { selectConfigurationMode } from '../Reducers/ConfigurationMode/Actions';
 import { requestLock } from '../../Utils/Async/ObjectLock';
 import { initDefaultColor } from '../Reducers/DesignData/Transformers';
 import { createSVGImageData } from '../Reducers/ImageGallery/Modifiers';
@@ -227,7 +229,8 @@ export const calculateImageBrightness = image => {
         return;
     }
 
-    const imageUrl = `${getConf('network.host')}${image.data.thumbnail.url}`;
+    const imageUrl =
+        image.data && image.data.thumbnail ? `${getConf('network.host')}${image.data.thumbnail.url}` : null;
     const fuzzy = 0.1;
 
     return new Promise((resolve, reject) => {
@@ -265,15 +268,16 @@ export const calculateImageBrightness = image => {
                 }
 
                 const dlDiff = (light - dark) / (canvas.width * canvas.height);
-                image.data.thumbnail.isThumbnailBright = dlDiff + fuzzy > 0;
-
+                image.data && image.data.thumbnail
+                    ? (image.data.thumbnail.isThumbnailBright = dlDiff + fuzzy > 0)
+                    : (image.isBright = dlDiff + fuzzy > 0);
                 resolve(image);
             },
             false
         );
         downloadedImg.addEventListener('error', reject);
 
-        downloadedImg.src = imageUrl;
+        downloadedImg.src = imageUrl || image.src;
     });
 };
 
@@ -575,6 +579,7 @@ export default class DesignDataService {
 
                     this.selectInitialDesignView();
                     this.designAreaListChangeListener(filteredDesignAreas, prevDesignAreas);
+                    this.openDesignAreaEditorIfEditingParamIsSet();
                 } catch (e) {
                     // eslint-disable-next-line no-console
                     console.error('Error occurred in processing design area list change:', e);
@@ -608,6 +613,33 @@ export default class DesignDataService {
         setupDesigner(this);
     }
 
+    async openDesignAreaEditorIfEditingParamIsSet() {
+        if (this._editingHandlerDone) {
+            return; // skip if already opened once
+        }
+        const query = new URLSearchParams(location.search);
+        if (!query.has('_editing')) {
+            return; // simply return if the param is not set
+        }
+        const isDesignerModeAvailable = get(
+            Services.store.state,
+            'configurationMode.availableModes.designer'
+        );
+        if (!isDesignerModeAvailable) {
+            return; // skip if designer mode is not available
+        }
+        const selectedMode = get(Services.store.state, 'configurationMode.selectedMode');
+        if (selectedMode !== 'designer') {
+            Services.store.dispatch(selectConfigurationMode('designer'));
+        }
+        const viewChangedPromise = Services.visualization.getViewChangedPromise();
+        if (viewChangedPromise) {
+            await viewChangedPromise;
+            this.openDesignAreaEditor();
+            this._editingHandlerDone = true;
+        }
+    }
+
     componentChangeHandler(component, prevComponent) {
         const identifier = get(component, 'identifier');
         if (identifier && identifier !== get(prevComponent, 'identifier')) {
@@ -704,8 +736,10 @@ export default class DesignDataService {
                 const maskData = getMaskDataForDesignArea(state, designArea);
                 const canvasSize = getCanvasSizeFromDesignArea(state, designArea);
                 const prevDesignArea = find(prevDesignAreas, { identifier: designArea.identifier });
+                const colorOverlayData = getColorOverlayData(state, designArea);
                 return (
-                    this._initCanvas && this._initCanvas({ designArea, prevDesignArea, canvasSize, maskData })
+                    this._initCanvas &&
+                    this._initCanvas({ designArea, prevDesignArea, canvasSize, maskData, colorOverlayData })
                 );
             })
         );
@@ -1393,7 +1427,7 @@ export default class DesignDataService {
             Services.store.dispatch(recalculateDesignArea());
         }
 
-        this.updateMaskToCurrentDesignProductionMethod();
+        this.updateCanvasToCurrentDesignProductionMethod();
         if (bulkNameSelected && !selectedDesignProduction.allowBulkNames) {
             this.removeBulkNameItems(designData);
             !isBulkNamesSelected(Services.store.state.configurator) && Services.configurator.clearBulkNames();
@@ -1405,7 +1439,7 @@ export default class DesignDataService {
         );
     }
 
-    updateMaskToCurrentDesignProductionMethod() {
+    updateCanvasToCurrentDesignProductionMethod() {
         // the mask should be updated when switching design production method
         const state = Services.store.state;
         const designArea = getSelectedDesignArea(state);
@@ -1417,6 +1451,14 @@ export default class DesignDataService {
         } else {
             maskHandler && maskHandler.dispose();
         }
+
+        const colorOverlayData = getColorOverlayData(state, designArea);
+        const colorOverlay = canvas.getColorOverlay();
+        if (colorOverlayData?.color) {
+            colorOverlay?.init(colorOverlayData);
+        } else {
+            colorOverlay?.dispose();
+        }
     }
 
     setCanvasData(canvasData, targetDesignAreaIdentifier) {
@@ -1550,6 +1592,7 @@ export default class DesignDataService {
                             },
                         });
                     }
+                    const restoreColorOverlayVisibility = canvas.getColorOverlay()?.toggle(false);
 
                     const drawToContext = canvas.drawToContext.bind(canvas);
                     const getSvg = () => canvas.getScreenshot(getFontMapping(state));
@@ -1563,6 +1606,7 @@ export default class DesignDataService {
                     if (maskHandler) {
                         restoreOutlineVisibility();
                     }
+                    restoreColorOverlayVisibility && restoreColorOverlayVisibility();
 
                     releaseLock();
                 }
@@ -1636,8 +1680,10 @@ export default class DesignDataService {
                         const releaseLock = await requestLock(canvas);
                         const maskHandler = canvas.getMaskHandler();
                         const restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
+                        const restoreColorOverlayVisibility = canvas.getColorOverlay()?.toggle(false);
                         const result = [id, await canvas[screenshotFn](fontMapping)];
                         restoreOutlineVisibility && restoreOutlineVisibility();
+                        restoreColorOverlayVisibility && restoreColorOverlayVisibility();
                         releaseLock();
                         return result;
                     })

package/src/App/Services/DesignerService.js

@@ -35,6 +35,7 @@ import { getDefaultFontParams } from '../Reducers/Fonts/Selectors';
 import { createTextPlaceholder } from '../Reducers/ImageGallery/Modifiers';
 import { updateLinkedImagesWithImageData } from '../Reducers/DesignData/Actions';
 import { checkDesignElementRestrictions } from '../Reducers/DesignArea/DesignElementSelectors';
+import { FontFaceRepository } from '../Modules/Designer/Utils/FontFaceRepository';
 
 function getCanvasImageScalingWithImageData(canvasImage, imageData) {
     const currentPreview = canvasImage.imageData.preview;
@@ -209,7 +210,7 @@ export default class DesignerService {
         }
     }
 
-    addText(canvas, textContent = 'My Text', autoColorCount = 1) {
+    async addText(canvas, textContent = 'My Text', autoColorCount = 1, options = {}) {
         if (!this.checkDesignElementRestrictions('text')) {
             return;
         }
@@ -218,16 +219,20 @@ export default class DesignerService {
 
         const state = Services.store.state;
 
-        const fontSizeMin = getFontSizeMin(state);
-        const locked = getElementLockState(state);
-
-        const fontItem = find(state.fonts, { isDefault: true }) || state.fonts[0];
+        const {
+            fontSizeMin = getFontSizeMin(state),
+            locked = getElementLockState(state),
+            fontItem = find(state.fonts, { isDefault: true }) || state.fonts[0],
+            htmlContent = this.createColorizedTextContent(textContent, autoColorCount),
+            fitCanvas = true,
+        } = options;
 
         if (!fontItem) {
             Services.ui.reportError(t('common.noFontsAvailable'));
         } else {
+            await FontFaceRepository.collectFromHTML(htmlContent);
             const text = canvas.addText({
-                content: this.createColorizedTextContent(textContent, autoColorCount),
+                content: htmlContent,
                 fontSize: 16,
                 fontSizeMin,
                 fontItem,
@@ -237,17 +242,21 @@ export default class DesignerService {
 
             text.selected = true;
 
-            if (!locked) {
-                text.alignTo('center', 'center');
-                text.fitCanvas(true);
-
-                if (text.scaling !== 1) {
-                    text.scaling *= 0.5;
-                }
+            if (!locked && fitCanvas) {
+                this.fitTextToCanvas(text);
             }
         }
     }
 
+    fitTextToCanvas(text) {
+        const canvas = text.canvas;
+        text.alignTo('center', 'center');
+        text.fontSize = Math.max(text.fontSizeMin, Math.min(canvas.size.width, canvas.size.height) * 0.4);
+        if (text.fontSize > text.fontSizeMin && text.getScaledSize().width > canvas.size.width) {
+            text.fitCanvas();
+        }
+    }
+
     checkDesignElementRestrictions(targetElementType) {
         const state = Services.store.state;
         const designData = getDesignDataForSelectedDesignArea(state);

package/src/App/Services/UIService.js

@@ -34,7 +34,7 @@ export default class UIService extends AbstractUIService {
 
     toggle(name, show) {
         if (show === undefined) {
-            show = !Services.ui.isVisible();
+            show = !Services.ui.isVisible(name);
         }
         Services.store.dispatch(setVisible(name, show));
     }

package/src/App/Services/VisualizationService.js

@@ -167,10 +167,18 @@ export default class VisualizationService extends AbstractVisualizationService {
         setTimeout(() => Services.designData.updateVisualization());
     }
 
+    getViewChangedPromise() {
+        return this._viewChangedPromise;
+    }
+
     async designViewChangeHandler(designView) {
         // applies only for 2D mode (in 3D there is only one design view)
+        if (!designView) {
+            return;
+        }
         const visualization = this.getComponent();
-        await sendMessage(visualization, 'setView', designView);
+        this._viewChangedPromise = sendMessage(visualization, 'setView', designView);
+        await this._viewChangedPromise;
     }
 
     setComponent(component) {
@@ -214,6 +222,8 @@ export default class VisualizationService extends AbstractVisualizationService {
             Services.designData.handleCloseIfNeeded();
         });
 
+        this.addAreaHoverHandler(component);
+
         // the design areas should be redrawn when the material is updated
         component.observable.on(VisualizationEventTypes.MaterialUpdated, async updateEventObject => {
             await Services.designData.updateVisualization(updateEventObject);
@@ -279,12 +289,41 @@ export default class VisualizationService extends AbstractVisualizationService {
         return this;
     }
 
+    addAreaHoverHandler(component) {
+        let isAreaHovered = false;
+        const toggleAreaHovered = isHovered => {
+            if (isAreaHovered !== isHovered && component?.getContainer) {
+                isAreaHovered = isHovered;
+                component.getContainer().style.cursor = isAreaHovered ? 'pointer' : '';
+            }
+        };
+        component.observable.on(VisualizationEventTypes.HoverIn, evt => {
+            // get the texture data from the intersection
+            const {
+                data: { getTextureHit },
+            } = evt;
+            // so we can test if a design area was clicked
+            const area = this.testTextureIntersection(getTextureHit());
+            toggleAreaHovered(!!area);
+        });
+
+        component.observable.on(VisualizationEventTypes.HoverOut, () => {
+            toggleAreaHovered(false);
+        });
+    }
+
+    disposeComponent() {
+        sendMessage(this._component, 'dispose');
+        this._component = null;
+        this.observable.dispatch(EventTypes.ComponentChange, { component: null });
+    }
+
     getComponent() {
         return this._component;
     }
 
     registerComponentChangeListener(fn) {
-        this.observable.on(EventTypes.ComponentChange, fn);
+        return this.observable.on(EventTypes.ComponentChange, fn);
     }
 
     registerVisualizationUpdateListener(fn) {

package/src/App/Services/__tests__/DesignDataService.test.js

@@ -60,6 +60,7 @@ describe('Services/DesignDataService', () => {
                 getMaskHandler: () => ({
                     toggleOutline: () => () => null,
                 }),
+                getColorOverlay: () => null,
                 objects: (id =>
                     ({
                         dummyIdentifier: [], // empty area to make sure it excludes,

package/src/App/Shared/Components/AcceptDesign/index.js

@@ -2,9 +2,9 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import withWidth from '@material-ui/core/withWidth/withWidth';
-import Grid from '@material-ui/core/Grid/Grid';
-import TextField from '@material-ui/core/TextField/TextField';
+import withWidth from '@material-ui/core/withWidth';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -23,15 +23,16 @@ const styles = theme => ({
     },
     checkboxLabel: {
         fontSize: 15,
-        paddingLeft: 15,
-        paddingBottom: 12,
+        paddingTop: 10,
+        paddingLeft: 11,
+        paddingBottom: 20,
         [theme.breakpoints.down('xs')]: {
             paddingLeft: 2,
         },
         alignItems: 'start',    
     },
     checkbox: {
-        margin: '0 10px',
+        marginRight: '10px',
         [theme.breakpoints.down('xs')]: {
             margin: '-12px 0 0 10px',
         },

package/src/App/Shared/Components/AcceptPrivacy/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { t } from 'Framework/i18n';
-import withWidth from '@material-ui/core/withWidth/withWidth';
-import Grid from '@material-ui/core/Grid/Grid';
+import withWidth from '@material-ui/core/withWidth';
+import Grid from '@material-ui/core/Grid';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 const styles = theme => ({
     checkboxLabel: {
         fontSize: 15,
-        paddingLeft: 15,
+        paddingLeft: 11,
         paddingBottom: 12,
         [theme.breakpoints.down('xs')]: {
             paddingLeft: 12,
@@ -20,6 +20,7 @@ const styles = theme => ({
     checkbox: {
         alignSelf: 'flex-start',
         top: -10,
+        paddingLeft: 0,
     },
     formHelperText: {
         marginLeft: 45,

package/src/App/Shared/Components/AddToBasket/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid/Grid';
-import TextField from '@material-ui/core/TextField/TextField';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
-import Divider from '@material-ui/core/Divider/Divider';
+import Divider from '@material-ui/core/Divider';
 import MainButton from 'Shared/Components/MainButton';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
-import Button from '@material-ui/core/Button/Button';
+import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
 
 const styles = theme => ({

package/src/App/Shared/Components/AmountInput/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField/TextField';
+import TextField from '@material-ui/core/TextField';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 

package/src/App/Shared/Components/AmountPrice/__snapshots__/index.test.jsx.snap

@@ -11,31 +11,6 @@ exports[`renders a boxed component with the boxed prop 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container"
-        >
-          <div
-            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
-          >
-            <span
-              aria-hidden="true"
-              class="material-icons MuiIcon-root"
-            >
-              list_alt
-            </span>
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                amountPrice.configurationOverview
-              </span>
-            </button>
-          </div>
-        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -117,31 +92,6 @@ exports[`renders correctly 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container"
-        >
-          <div
-            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
-          >
-            <span
-              aria-hidden="true"
-              class="material-icons MuiIcon-root"
-            >
-              list_alt
-            </span>
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                amountPrice.configurationOverview
-              </span>
-            </button>
-          </div>
-        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -223,31 +173,6 @@ exports[`renders receiveOfferForm 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container"
-        >
-          <div
-            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
-          >
-            <span
-              aria-hidden="true"
-              class="material-icons MuiIcon-root"
-            >
-              list_alt
-            </span>
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                amountPrice.configurationOverview
-              </span>
-            </button>
-          </div>
-        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -336,31 +261,6 @@ exports[`renders the ConfigurationModeSwitchComponent (if it is provided) 1`] =
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container"
-        >
-          <div
-            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
-          >
-            <span
-              aria-hidden="true"
-              class="material-icons MuiIcon-root"
-            >
-              list_alt
-            </span>
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                amountPrice.configurationOverview
-              </span>
-            </button>
-          </div>
-        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -449,31 +349,6 @@ exports[`renders without callToAction 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
-        <div
-          class="MuiGrid-root MuiGrid-container"
-        >
-          <div
-            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
-          >
-            <span
-              aria-hidden="true"
-              class="material-icons MuiIcon-root"
-            >
-              list_alt
-            </span>
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                amountPrice.configurationOverview
-              </span>
-            </button>
-          </div>
-        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >