@configuratorware/configurator-frontendgui 1.57.11 → 1.57.12

package/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -22,6 +22,7 @@ var _Selectors2 = require("../../../../Reducers/DesignData/Selectors");
 var _i18n = require("../../../../../Framework/i18n");
 var _Transformers = require("../../Utils/Transformers");
 var _reactRedux = require("react-redux");
+var _ServiceLocator = require("../../../../ServiceLocator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -224,7 +225,7 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
               toggleCustomFontOverlay(true);
               return;
             }
-            canvas.selectedObject.fontItem = (0, _fontItemUtils.createFontItemProps)(fontItem);
+            _ServiceLocator.Services.designer.changeTextFontItem(canvas.selectedObject, (0, _fontItemUtils.createFontItemProps)(fontItem));
           },
           minSize: selectedObject.fontSizeMin,
           maxSize: 1000,
@@ -322,7 +323,7 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
               isCustomFont: true
             });
             addCustomFont(fontItem);
-            canvas.selectedObject.fontItem = (0, _fontItemUtils.createFontItemProps)(fontItem);
+            _ServiceLocator.Services.designer.changeTextFontItem(canvas.selectedObject, (0, _fontItemUtils.createFontItemProps)(fontItem));
             toggleCustomFontOverlay(false);
           }
         }));

package/App/Services/DesignerService.js

@@ -417,6 +417,40 @@ var DesignerService = exports["default"] = /*#__PURE__*/function () {
         text.fitCanvas();
       }
     }
+  }, {
+    key: "changeTextFontItem",
+    value: function changeTextFontItem(text, fontItemProps) {
+      if (!text || text.type !== 'Text') {
+        return;
+      }
+      if ((0, _configuration.getConf)('designer.autoShrinkTextOnFontChange', true)) {
+        this.shrinkTextAfterFontChange(text, fontItemProps);
+      } else {
+        text.fontItem = fontItemProps;
+      }
+    }
+  }, {
+    key: "shrinkTextAfterFontChange",
+    value: function shrinkTextAfterFontChange(text, fontItemProps) {
+      var wasInside = text.isFullyInsideCanvas();
+      var maxEffectiveFontSize = text.fontSize * text.scaling;
+      text.fontItem = fontItemProps;
+      if (!wasInside || text.locked || text.autoFit) {
+        return;
+      }
+      if (text.isFullyInsideCanvas()) {
+        return;
+      }
+      var maxScaling = maxEffectiveFontSize / text.fontSize;
+      text.shrinkToFitCanvas({
+        enlarge: false,
+        updatePosition: false,
+        maxScaling: maxScaling
+      });
+      if (typeof text.commitScalingToFontSize === 'function') {
+        text.commitScalingToFontSize(maxEffectiveFontSize);
+      }
+    }
   }, {
     key: "checkDesignElementRestrictions",
     value: function checkDesignElementRestrictions(targetElementType) {

package/App/configuration.js

@@ -222,7 +222,9 @@ var applicationConfiguration = {
     // the image formats users can upload to designareas / designer items
     includeMetricContentSize: false,
     // set true to include the metric content size in the design data
-    bulkNamesPerNameDesignFiles: false // set true to generate individual production svgs (-> production pdf in zip download) for each bulk name
+    bulkNamesPerNameDesignFiles: false,
+    // set true to generate individual production svgs (-> production pdf in zip download) for each bulk name
+    autoShrinkTextOnFontChange: true // shrink text to stay inside the canvas when changing to a wider/taller font
   },
 
   vectorizeImageQuality: 45000,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.57.11",
+  "version": "1.57.12",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.57.11",
+    "@configuratorware/scripts": "1.57.12",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.57.11",
-    "redhotmagma-visualization": "1.57.11",
+    "redhotmagma-graphics-editor": "1.57.12",
+    "redhotmagma-visualization": "1.57.12",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/configuration.js

@@ -154,6 +154,7 @@ const externalConfiguration = {
         allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif', // the image formats users can upload to designareas / designer items
         includeMetricContentSize: false, // set true to include the metric content size in the design data
         bulkNamesPerNameDesignFiles: false, // set true to generate individual production svgs (-> production pdf in zip download) for each bulk name
+        // autoShrinkTextOnFontChange: true, // shrink text to stay inside the canvas when changing to a wider/taller font
     },*/
 
     //vectorizeImageQuality: 45000,

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

@@ -16,6 +16,7 @@ import { hasBackgroundColor } from 'App/Reducers/DesignData/Selectors';
 import { t } from 'Framework/i18n';
 import { isOriginalVector } from '../../Utils/Transformers';
 import { useSelector } from 'react-redux';
+import { Services } from 'App/ServiceLocator';
 
 const styles = theme => ({
     root: {
@@ -222,8 +223,9 @@ const DesignerSelectionToolbox = props => {
                                                         return;
                                                     }
 
-                                                    canvas.selectedObject.fontItem = createFontItemProps(
-                                                        fontItem
+                                                    Services.designer.changeTextFontItem(
+                                                        canvas.selectedObject,
+                                                        createFontItemProps(fontItem)
                                                     );
                                                 }}
                                                 minSize={selectedObject.fontSizeMin}
@@ -366,8 +368,9 @@ const DesignerSelectionToolbox = props => {
                                                         isCustomFont: true,
                                                     };
                                                     addCustomFont(fontItem);
-                                                    canvas.selectedObject.fontItem = createFontItemProps(
-                                                        fontItem
+                                                    Services.designer.changeTextFontItem(
+                                                        canvas.selectedObject,
+                                                        createFontItemProps(fontItem)
                                                     );
                                                     toggleCustomFontOverlay(false);
                                                 }}

package/src/App/Services/DesignerService.js

@@ -267,6 +267,45 @@ export default class DesignerService {
         }
     }
 
+    changeTextFontItem(text, fontItemProps) {
+        if (!text || text.type !== 'Text') {
+            return;
+        }
+
+        if (getConf('designer.autoShrinkTextOnFontChange', true)) {
+            this.shrinkTextAfterFontChange(text, fontItemProps);
+        } else {
+            text.fontItem = fontItemProps;
+        }
+    }
+
+    shrinkTextAfterFontChange(text, fontItemProps) {
+        const wasInside = text.isFullyInsideCanvas();
+        const maxEffectiveFontSize = text.fontSize * text.scaling;
+
+        text.fontItem = fontItemProps;
+
+        if (!wasInside || text.locked || text.autoFit) {
+            return;
+        }
+
+        if (text.isFullyInsideCanvas()) {
+            return;
+        }
+
+        const maxScaling = maxEffectiveFontSize / text.fontSize;
+
+        text.shrinkToFitCanvas({
+            enlarge: false,
+            updatePosition: false,
+            maxScaling,
+        });
+
+        if (typeof text.commitScalingToFontSize === 'function') {
+            text.commitScalingToFontSize(maxEffectiveFontSize);
+        }
+    }
+
     checkDesignElementRestrictions(targetElementType) {
         const state = Services.store.state;
         const designData = getDesignDataForSelectedDesignArea(state);

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

@@ -2,6 +2,11 @@ import DesignerService from '../DesignerService';
 import ServiceLocator from '../../ServiceLocator';
 import { SET_SELECTED_IMAGE } from '../../Reducers/ImageGallery/Actions';
 import DesignDataService from '../DesignDataService';
+import { getConf } from '../../configuration';
+
+jest.mock('../../configuration', () => ({
+    getConf: jest.fn((key, defaultValue) => defaultValue),
+}));
 
 describe('Services/DesignerService', () => {
     it('openImageEditDialog selects the edited image and loads the tags and gallery images', async () => {
@@ -170,4 +175,102 @@ describe('Services/DesignerService', () => {
             `"<span data-placeholder=\\"true\\"><span style='color: #f73429; font-family: \\"Lobster\\"; font-weight: normal; font-style: normal;' data-color='{\\"color\\":\\"red\\",\\"palette\\":\\"default\\"}'>sample text to be replaced</span></span>"`
         );
     });
+
+    describe('changeTextFontItem', () => {
+        const createTextMock = (overrides = {}) => ({
+            type: 'Text',
+            fontSize: 20,
+            scaling: 1,
+            x: 30,
+            y: 40,
+            locked: false,
+            autoFit: false,
+            fontItem: {},
+            isFullyInsideCanvas: jest.fn(() => true),
+            shrinkToFitCanvas: jest.fn(),
+            commitScalingToFontSize: jest.fn(),
+            ...overrides,
+        });
+
+        beforeEach(() => {
+            getConf.mockImplementation((key, defaultValue) => defaultValue);
+        });
+
+        it('applies font item and shrinks when text was inside but overflows after font change', () => {
+            const service = new DesignerService();
+            const text = createTextMock({
+                isFullyInsideCanvas: jest
+                    .fn()
+                    .mockReturnValueOnce(true)
+                    .mockReturnValueOnce(false),
+            });
+            const fontItemProps = { family: 'Arial' };
+
+            service.changeTextFontItem(text, fontItemProps);
+
+            expect(text.fontItem).toBe(fontItemProps);
+            expect(text.isFullyInsideCanvas).toHaveBeenCalledTimes(2);
+            expect(text.shrinkToFitCanvas).toHaveBeenCalledWith({
+                enlarge: false,
+                updatePosition: false,
+                maxScaling: 1,
+            });
+            expect(text.commitScalingToFontSize).toHaveBeenCalledWith(20);
+        });
+
+        it('does not shrink when text still fits inside the canvas after font change', () => {
+            const service = new DesignerService();
+            const text = createTextMock({
+                isFullyInsideCanvas: jest.fn(() => true),
+            });
+
+            service.changeTextFontItem(text, { family: 'Arial' });
+
+            expect(text.fontItem).toEqual({ family: 'Arial' });
+            expect(text.isFullyInsideCanvas).toHaveBeenCalledTimes(2);
+            expect(text.shrinkToFitCanvas).not.toHaveBeenCalled();
+            expect(text.commitScalingToFontSize).not.toHaveBeenCalled();
+        });
+
+        it('does not shrink when text was not fully inside the canvas', () => {
+            const service = new DesignerService();
+            const text = createTextMock({
+                isFullyInsideCanvas: jest.fn(() => false),
+            });
+
+            service.changeTextFontItem(text, { family: 'Arial' });
+
+            expect(text.shrinkToFitCanvas).not.toHaveBeenCalled();
+        });
+
+        it('does not shrink locked or autoFit text', () => {
+            const service = new DesignerService();
+            const fontItemProps = { family: 'Arial' };
+            const lockedText = createTextMock({ locked: true });
+            service.shrinkTextAfterFontChange(lockedText, fontItemProps);
+            expect(lockedText.fontItem).toBe(fontItemProps);
+            expect(lockedText.shrinkToFitCanvas).not.toHaveBeenCalled();
+
+            const autoFitText = createTextMock({ autoFit: true });
+            service.shrinkTextAfterFontChange(autoFitText, fontItemProps);
+            expect(autoFitText.fontItem).toBe(fontItemProps);
+            expect(autoFitText.shrinkToFitCanvas).not.toHaveBeenCalled();
+        });
+
+        it('skips shrink when autoShrinkTextOnFontChange is disabled', () => {
+            getConf.mockImplementation((key, defaultValue) => {
+                if (key === 'designer.autoShrinkTextOnFontChange') {
+                    return false;
+                }
+                return defaultValue;
+            });
+            const service = new DesignerService();
+            const text = createTextMock();
+
+            service.changeTextFontItem(text, { family: 'Arial' });
+
+            expect(text.isFullyInsideCanvas).not.toHaveBeenCalled();
+            expect(text.shrinkToFitCanvas).not.toHaveBeenCalled();
+        });
+    });
 });

package/src/App/configuration.js

@@ -229,6 +229,7 @@ let applicationConfiguration = {
         allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif', // the image formats users can upload to designareas / designer items
         includeMetricContentSize: false, // set true to include the metric content size in the design data
         bulkNamesPerNameDesignFiles: false, // set true to generate individual production svgs (-> production pdf in zip download) for each bulk name
+        autoShrinkTextOnFontChange: true, // shrink text to stay inside the canvas when changing to a wider/taller font
     },
 
     vectorizeImageQuality: 45000,