@configuratorware/configurator-frontendgui 1.57.6 → 1.57.8

package/App/Services/DesignDataService.js

@@ -26,6 +26,7 @@ var _Actions4 = require("../Reducers/DesignView/Actions");
 var _Selectors = require("../Reducers/DesignArea/Selectors");
 var _Selectors2 = require("../Reducers/ImageGallery/Selectors");
 var _Selectors3 = require("../Reducers/Configurator/Selectors");
+var _getDesignAreaBorderColor = require("../Utils/getDesignAreaBorderColor");
 var _Selectors4 = require("../Reducers/Fonts/Selectors");
 var _Actions5 = require("../Reducers/Confirm/Actions");
 var _Actions6 = require("../Reducers/ConfigurationMode/Actions");
@@ -1905,6 +1906,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
         var options,
           state,
           showHighlight,
+          staticBorderColor,
           textureBuilderConfig,
           variantIdentifier,
           effectEnabled,
@@ -1916,10 +1918,14 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               options = _args22.length > 2 && _args22[2] !== undefined ? _args22[2] : {};
               state = _ServiceLocator.Services.store.state;
               showHighlight = (0, _get2["default"])(state, 'designArea.showHighlight');
+              staticBorderColor = (0, _Selectors3.getClientHighlightColor)(state);
               textureBuilderConfig = (0, _merge["default"])({
                 highlight: {
-                  borderColor: (0, _Selectors3.getClientHighlightColor)(state),
-                  backgroundColor: (0, _configuration.getConf)('visualization.designAreaHighlightBackgroundColor')
+                  borderColor: (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColor') ? (0, _getDesignAreaBorderColor.createBorderColorResolver)(function (identifier) {
+                    return _ServiceLocator.Services.visualization.getDesignAreaUnderlyingColor(identifier);
+                  }, staticBorderColor, (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColorMode')) : staticBorderColor,
+                  backgroundColor: (0, _configuration.getConf)('visualization.designAreaHighlightBackgroundColor'),
+                  lineWidth: (0, _configuration.getConf)('visualization.designAreaHighlightBorderWidth', 2)
                 }
               }, options.textureBuilderConfig);
               variantIdentifier = (0, _get2["default"])(updateEventObject, 'data.variant', false);
@@ -2113,22 +2119,22 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                   return _ref17.apply(this, arguments);
                 };
               }();
-              _context22.prev = 7;
-              _context22.next = 10;
+              _context22.prev = 8;
+              _context22.next = 11;
               return getDrawingContext(drawingFn, true /* update alpha */, true /* clean up texture before drawing */);
-            case 10:
-              _context22.next = 15;
+            case 11:
+              _context22.next = 16;
               break;
-            case 12:
-              _context22.prev = 12;
-              _context22.t0 = _context22["catch"](7);
+            case 13:
+              _context22.prev = 13;
+              _context22.t0 = _context22["catch"](8);
               // eslint-disable-next-line no-console
               console.warn('Could not get drawing context, texture update is skipped!', _context22.t0.message);
-            case 15:
+            case 16:
             case "end":
               return _context22.stop();
           }
-        }, _callee21, null, [[7, 12]]);
+        }, _callee21, null, [[8, 13]]);
       }));
       function redrawAllDesignAreas(_x20, _x21) {
         return _redrawAllDesignAreas.apply(this, arguments);

package/App/Services/VisualizationService.js

@@ -185,6 +185,18 @@ var VisualizationService = exports["default"] = /*#__PURE__*/function (_Abstract
     value: function render() {
       return (0, _sendMessage["default"])(this.getComponent(), 'render');
     }
+
+    /**
+     * Average color of the product image underneath the border of the given design area.
+     * Only the 2D visualization implements this, everything else returns undefined.
+     * @param {string} designAreaIdentifier
+     * @return {{r: number, g: number, b: number}|null|undefined}
+     */
+  }, {
+    key: "getDesignAreaUnderlyingColor",
+    value: function getDesignAreaUnderlyingColor(designAreaIdentifier) {
+      return (0, _sendMessage["default"])(this.getComponent(), 'getDesignAreaUnderlyingColor', designAreaIdentifier);
+    }
   }, {
     key: "update2DMaxZoom",
     value: function update2DMaxZoom(maxZoom) {

package/App/Utils/getDesignAreaBorderColor.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rgbToHsl = exports.invertColor = exports.getContrastBorderColor = exports.getComplementaryBorderColor = exports.getBorderColorForAverage = exports.createBorderColorResolver = exports.BorderColorModes = void 0;
+var _styles = require("@material-ui/core/styles");
+var _Selectors = require("../Reducers/DesignArea/Selectors");
+/**
+ * Minimum contrast between the border and the area it is drawn on, the WCAG AA requirement for
+ * graphical objects. Below it the derived color is not considered visible enough.
+ * @type {number}
+ */
+var MIN_CONTRAST_RATIO = 3;
+/**
+ * Below this saturation the inverted color carries no usable hue, e.g. any grey inverts into
+ * another grey. Those fall back to a neutral border.
+ * @type {number}
+ */
+var MIN_SATURATION = 0.1;
+/**
+ * The border keeps the complementary hue at a fixed high saturation, so it reads as an actual color
+ * instead of the pale tint that inverting a dark color produces.
+ * @type {number}
+ */
+var BORDER_SATURATION = 85;
+/**
+ * Candidate lightness values, ordered from the most vivid one outwards. The first one that contrasts
+ * enough with the average wins, so the border only gets as pale (on a dark product) or as deep (on a
+ * light one) as it has to be to stay visible.
+ */
+var LIGHTNESS_ON_DARK_AVERAGE = [60, 65, 70, 75, 80, 85, 90, 95];
+var LIGHTNESS_ON_LIGHT_AVERAGE = [40, 35, 30, 25, 20, 15, 10, 5];
+/**
+ * Relative luminance above which the sampled average counts as light, roughly a mid grey.
+ * @type {number}
+ */
+var LIGHT_AVERAGE_LUMINANCE = 0.2;
+var NEUTRAL_DARK = '#111111';
+var NEUTRAL_LIGHT = '#eeeeee';
+
+/**
+ * @param {{r: number, g: number, b: number}} color
+ * @return {{r: number, g: number, b: number}}
+ */
+var invertColor = exports.invertColor = function invertColor(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  return {
+    r: 255 - r,
+    g: 255 - g,
+    b: 255 - b
+  };
+};
+
+/**
+ * Hue and saturation of an rgb color. Material-UI provides hslToRgb but not the other direction.
+ * @param {{r: number, g: number, b: number}} color
+ * @return {{hue: number, saturation: number, lightness: number}} Hue in degrees, rest in 0..1
+ */
+var rgbToHsl = exports.rgbToHsl = function rgbToHsl(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b;
+  var red = r / 255;
+  var green = g / 255;
+  var blue = b / 255;
+  var max = Math.max(red, green, blue);
+  var min = Math.min(red, green, blue);
+  var delta = max - min;
+  var lightness = (max + min) / 2;
+  if (!delta) {
+    return {
+      hue: 0,
+      saturation: 0,
+      lightness: lightness
+    };
+  }
+  var hue;
+  if (max === red) {
+    hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
+  } else if (max === green) {
+    hue = ((blue - red) / delta + 2) * 60;
+  } else {
+    hue = ((red - green) / delta + 4) * 60;
+  }
+  return {
+    hue: hue,
+    saturation: delta / (1 - Math.abs(2 * lightness - 1)),
+    lightness: lightness
+  };
+};
+
+/**
+ * The available ways to derive the border color from the sampled product color.
+ * @see getBorderColorForAverage
+ */
+var BorderColorModes = exports.BorderColorModes = {
+  Contrast: 'contrast',
+  Complementary: 'complementary'
+};
+
+/**
+ * A near black or a near white border, whichever reads better on the given color.
+ * The border is only about one pixel wide, and for such a thin line a strong difference in
+ * brightness is what makes it visible, much more than a difference in hue.
+ * @param {string} averageHex
+ * @return {string} A hex color
+ */
+var getContrastBorderColor = exports.getContrastBorderColor = function getContrastBorderColor(averageHex) {
+  return (0, _styles.getContrastRatio)(averageHex, NEUTRAL_DARK) >= (0, _styles.getContrastRatio)(averageHex, NEUTRAL_LIGHT) ? NEUTRAL_DARK : NEUTRAL_LIGHT;
+};
+
+/**
+ * Keeps the hue of the inverted (complementary) color at a high saturation and moves the lightness
+ * away from the average, only as far as needed to reach a visible contrast, so the border is a vivid
+ * color rather than the pale tint that plain inversion produces.
+ * Averages without a usable hue, such as any grey, and the case where no candidate contrasts enough,
+ * fall back to a neutral border.
+ * @param {{r: number, g: number, b: number}} average
+ * @param {string} averageHex
+ * @return {string} A hex color
+ */
+var getComplementaryBorderColor = exports.getComplementaryBorderColor = function getComplementaryBorderColor(average, averageHex) {
+  var _rgbToHsl = rgbToHsl(invertColor(average)),
+    hue = _rgbToHsl.hue,
+    saturation = _rgbToHsl.saturation;
+  if (saturation >= MIN_SATURATION) {
+    var lightnessCandidates = (0, _styles.getLuminance)(averageHex) > LIGHT_AVERAGE_LUMINANCE ? LIGHTNESS_ON_LIGHT_AVERAGE : LIGHTNESS_ON_DARK_AVERAGE;
+    for (var _i = 0, _lightnessCandidates = lightnessCandidates; _i < _lightnessCandidates.length; _i++) {
+      var lightness = _lightnessCandidates[_i];
+      var candidate = (0, _Selectors.rgbString2hex)((0, _styles.hslToRgb)("hsl(".concat(Math.round(hue), ", ").concat(BORDER_SATURATION, "%, ").concat(lightness, "%)")));
+      if (candidate && (0, _styles.getContrastRatio)(averageHex, candidate) >= MIN_CONTRAST_RATIO) {
+        return candidate;
+      }
+    }
+  }
+  return getContrastBorderColor(averageHex);
+};
+
+/**
+ * Derives a border color from the average color of the area the border is drawn on.
+ * Anything but the complementary mode uses the contrast mode, so a missing or misspelled
+ * configuration value ends up with the most legible option.
+ * @param {{r: number, g: number, b: number}} average
+ * @param {string} [mode] One of BorderColorModes
+ * @return {string} A hex color
+ */
+var getBorderColorForAverage = exports.getBorderColorForAverage = function getBorderColorForAverage(average) {
+  var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BorderColorModes.Contrast;
+  var averageHex = (0, _Selectors.rgbToHex)(average.r, average.g, average.b);
+  return mode === BorderColorModes.Complementary ? getComplementaryBorderColor(average, averageHex) : getContrastBorderColor(averageHex);
+};
+
+/**
+ * Creates the resolver that the texture builder calls for every highlighted design area.
+ * It falls back to the given color whenever the underlying color cannot be determined, e.g. for
+ * the 3D visualization, for fully transparent regions and for design areas that are not visible.
+ * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
+ * @param {string} fallbackColor
+ * @param {string} [mode] One of BorderColorModes
+ * @return {function(object): string}
+ */
+var createBorderColorResolver = exports.createBorderColorResolver = function createBorderColorResolver(getUnderlyingColor, fallbackColor, mode) {
+  return function (designArea) {
+    var average = getUnderlyingColor(designArea && designArea.identifier);
+    return average ? getBorderColorForAverage(average, mode) : fallbackColor;
+  };
+};

package/App/configuration.js

@@ -177,6 +177,19 @@ var applicationConfiguration = {
     },
 
     designAreaHighlightBackgroundColor: 'transparent',
+    // Width of the design area highlight border, in pixels at 100% zoom.
+    // Applies to the static border as well, 2 was the previously hard coded value.
+    designAreaHighlightBorderWidth: 2,
+    // Derive the design area highlight border color from the average color of the product
+    // image underneath the border, instead of using the client theme's highlightColor.
+    // This keeps the border visible on products whose color is close to the highlight color.
+    // 2D visualization only, the 3D one always uses the static color.
+    dynamicDesignAreaHighlightBorderColor: false,
+    // How the dynamic border color is derived from the sampled product color:
+    // 'contrast'      near black or near white, whichever reads better (most legible, default)
+    // 'complementary' the inverted hue at a high saturation (more decorative, but a thin line
+    //                 in a mid bright color is much harder to see than a light or dark one)
+    dynamicDesignAreaHighlightBorderColorMode: 'contrast',
     options: {
       // when zoom = 1 use NearestFilter (for sharper product image)
       sharperFullView: false,

package/package.json

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

package/public/configuration.js

@@ -107,7 +107,23 @@ const externalConfiguration = {
     //displayEditorRulers: true,
 
     /*visualization: {
+        useVisualizationScript: {
+            src: '', // source of the visualization script in the public folder, e.g. 'visualization.js'
+        },
         designAreaHighlightBackgroundColor: 'transparent',
+        // Width of the design area highlight border, in screen pixels. Stays the same at any zoom
+        // level and for any design area size. Applies to the static border as well.
+        designAreaHighlightBorderWidth: 2,
+        // Derive the design area highlight border color from the average color of the product
+        // image underneath the border, instead of using the client theme's highlightColor.
+        // This keeps the border visible on products whose color is close to the highlight color.
+        // 2D visualization only, the 3D one always uses the static color.
+        dynamicDesignAreaHighlightBorderColor: false,
+        // How the dynamic border color is derived from the sampled product color:
+        // 'contrast'      near black or near white, whichever reads better (most legible, default)
+        // 'complementary' the inverted hue at a high saturation (more decorative, but a thin line
+        //                 in a mid bright color is much harder to see than a light or dark one)
+        dynamicDesignAreaHighlightBorderColorMode: 'contrast',
         options: {
             // when zoom = 1 use NearestFilter (for sharper product image)
             sharperFullView: false,
@@ -115,12 +131,29 @@ const externalConfiguration = {
             // Warning! not recommended, use better image resources instead
             optimizeProductImage: false,
         },
+        options3D: {
+            // create a ground to show a shadow under the model
+            useShadowGround: true,
+            // remove the shadow ground for screenshots
+            removeGroundForScreenshot: true,
+            // use an environment map
+            useEnvironmentMap: true,
+            // use programmatically generated baked shadow (instead of directional light shadow)
+            useBakedShadows: false,
+            // baked shadow parameters
+            bakedShadow: {
+                blurRadius: 6,
+                shadowOpacity: 0.8,
+            },
+        },
     },*/
 
     /*designer: {
         dpi: 300, // the default canvas dpi as project specific option
         maxColorAmount: 10, // the default max number of colors in the colorizing feature
         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
     },*/
 
     //vectorizeImageQuality: 45000,

package/src/App/Services/DesignDataService.js

@@ -108,6 +108,7 @@ import {
     isDesignerProductPreviewMode,
     visualizationModeCheck,
 } from '../Reducers/Configurator/Selectors';
+import { createBorderColorResolver } from '../Utils/getDesignAreaBorderColor';
 import { getFontMapping } from '../Reducers/Fonts/Selectors';
 import { isConfirmResult } from '../Reducers/Confirm/Actions';
 import { selectConfigurationMode } from '../Reducers/ConfigurationMode/Actions';
@@ -1602,11 +1603,19 @@ export default class DesignDataService {
 
         const showHighlight = get(state, 'designArea.showHighlight');
 
+        const staticBorderColor = getClientHighlightColor(state);
         const textureBuilderConfig = merge(
             {
                 highlight: {
-                    borderColor: getClientHighlightColor(state),
+                    borderColor: getConf('visualization.dynamicDesignAreaHighlightBorderColor')
+                        ? createBorderColorResolver(
+                              identifier => Services.visualization.getDesignAreaUnderlyingColor(identifier),
+                              staticBorderColor,
+                              getConf('visualization.dynamicDesignAreaHighlightBorderColorMode')
+                          )
+                        : staticBorderColor,
                     backgroundColor: getConf('visualization.designAreaHighlightBackgroundColor'),
+                    lineWidth: getConf('visualization.designAreaHighlightBorderWidth', 2),
                 },
             },
             options.textureBuilderConfig

package/src/App/Services/VisualizationService.js

@@ -147,6 +147,16 @@ export default class VisualizationService extends AbstractVisualizationService {
         return sendMessage(this.getComponent(), 'render');
     }
 
+    /**
+     * Average color of the product image underneath the border of the given design area.
+     * Only the 2D visualization implements this, everything else returns undefined.
+     * @param {string} designAreaIdentifier
+     * @return {{r: number, g: number, b: number}|null|undefined}
+     */
+    getDesignAreaUnderlyingColor(designAreaIdentifier) {
+        return sendMessage(this.getComponent(), 'getDesignAreaUnderlyingColor', designAreaIdentifier);
+    }
+
     update2DMaxZoom(maxZoom) {
         return sendMessage(this.getComponent(), 'updateMaxZoomSetting', maxZoom);
     }

package/src/App/Utils/__tests__/getDesignAreaBorderColor.test.js

@@ -0,0 +1,128 @@
+import {
+    BorderColorModes,
+    createBorderColorResolver,
+    getBorderColorForAverage,
+    invertColor,
+    rgbToHsl,
+} from '../getDesignAreaBorderColor';
+
+// the dark green of the softshell demo item, the case the feature was built for
+const JACKET_GREEN = { r: 45, g: 95, b: 25 };
+
+test('invertColor inverts every channel', () => {
+    expect(invertColor({ r: 0, g: 128, b: 255 })).toEqual({ r: 255, g: 127, b: 0 });
+});
+
+describe('rgbToHsl', () => {
+    test('reports no saturation for greys', () => {
+        expect(rgbToHsl({ r: 128, g: 128, b: 128 })).toEqual({
+            hue: 0,
+            saturation: 0,
+            lightness: 128 / 255,
+        });
+    });
+
+    test('reports the hue of the primary colors', () => {
+        expect(Math.round(rgbToHsl({ r: 255, g: 0, b: 0 }).hue)).toBe(0);
+        expect(Math.round(rgbToHsl({ r: 0, g: 255, b: 0 }).hue)).toBe(120);
+        expect(Math.round(rgbToHsl({ r: 0, g: 0, b: 255 }).hue)).toBe(240);
+        expect(rgbToHsl({ r: 255, g: 0, b: 0 }).saturation).toBe(1);
+    });
+
+    test('reports the hue of a mixed color', () => {
+        // the complement of the dark green product color, a violet
+        expect(Math.round(rgbToHsl({ r: 210, g: 160, b: 230 }).hue)).toBe(283);
+    });
+});
+
+describe('getBorderColorForAverage in contrast mode', () => {
+    test('is the default mode', () => {
+        expect(getBorderColorForAverage(JACKET_GREEN)).toBe(
+            getBorderColorForAverage(JACKET_GREEN, BorderColorModes.Contrast)
+        );
+    });
+
+    test('falls back to the contrast mode for an unknown mode', () => {
+        expect(getBorderColorForAverage(JACKET_GREEN, 'something-else')).toBe(
+            getBorderColorForAverage(JACKET_GREEN, BorderColorModes.Contrast)
+        );
+    });
+
+    test('uses a near white border on a dark average', () => {
+        expect(getBorderColorForAverage(JACKET_GREEN, BorderColorModes.Contrast)).toBe('#eeeeee');
+        expect(getBorderColorForAverage({ r: 0, g: 0, b: 0 }, BorderColorModes.Contrast)).toBe('#eeeeee');
+    });
+
+    test('uses a near black border on a light average', () => {
+        expect(getBorderColorForAverage({ r: 255, g: 255, b: 255 }, BorderColorModes.Contrast)).toBe(
+            '#111111'
+        );
+        expect(getBorderColorForAverage({ r: 255, g: 255, b: 150 }, BorderColorModes.Contrast)).toBe(
+            '#111111'
+        );
+    });
+
+    test('picks the better readable neutral for greys', () => {
+        expect(getBorderColorForAverage({ r: 128, g: 128, b: 128 }, BorderColorModes.Contrast)).toBe(
+            '#111111'
+        );
+        expect(getBorderColorForAverage({ r: 100, g: 100, b: 100 }, BorderColorModes.Contrast)).toBe(
+            '#eeeeee'
+        );
+    });
+});
+
+describe('getBorderColorForAverage in complementary mode', () => {
+    const complementary = average => getBorderColorForAverage(average, BorderColorModes.Complementary);
+
+    test('keeps the complementary hue at a high saturation', () => {
+        expect(complementary(JACKET_GREEN)).toBe('#d789f5');
+    });
+
+    test('goes darker on a light average', () => {
+        expect(complementary({ r: 255, g: 255, b: 150 })).toBe('#0f0fbd');
+    });
+
+    test('goes lighter on a dark average', () => {
+        expect(complementary({ r: 20, g: 30, b: 90 })).toBe('#f0d642');
+    });
+
+    test('falls back to a neutral border when there is no hue to keep', () => {
+        // grey inverts into another grey
+        expect(complementary({ r: 128, g: 128, b: 128 })).toBe('#111111');
+        expect(complementary({ r: 100, g: 100, b: 100 })).toBe('#eeeeee');
+        expect(complementary({ r: 0, g: 0, b: 0 })).toBe('#eeeeee');
+        expect(complementary({ r: 255, g: 255, b: 255 })).toBe('#111111');
+    });
+});
+
+describe('createBorderColorResolver', () => {
+    test('resolves the border color from the underlying color of the design area', () => {
+        const getUnderlyingColor = jest.fn().mockReturnValue(JACKET_GREEN);
+        const resolve = createBorderColorResolver(getUnderlyingColor, '#abcdef');
+
+        expect(resolve({ identifier: 'front' })).toBe('#eeeeee');
+        expect(getUnderlyingColor).toHaveBeenCalledWith('front');
+    });
+
+    test('passes the mode through', () => {
+        const resolve = createBorderColorResolver(
+            () => JACKET_GREEN,
+            '#abcdef',
+            BorderColorModes.Complementary
+        );
+
+        expect(resolve({ identifier: 'front' })).toBe('#d789f5');
+    });
+
+    test('falls back to the given color when there is no underlying color', () => {
+        expect(createBorderColorResolver(() => null, '#abcdef')({ identifier: 'front' })).toBe('#abcdef');
+        expect(createBorderColorResolver(() => undefined, '#abcdef')({ identifier: 'front' })).toBe(
+            '#abcdef'
+        );
+    });
+
+    test('falls back to the given color without a design area', () => {
+        expect(createBorderColorResolver(() => null, '#abcdef')()).toBe('#abcdef');
+    });
+});

package/src/App/Utils/getDesignAreaBorderColor.js

@@ -0,0 +1,158 @@
+import { getContrastRatio, getLuminance, hslToRgb } from '@material-ui/core/styles';
+import { rgbString2hex, rgbToHex } from '../Reducers/DesignArea/Selectors';
+
+/**
+ * Minimum contrast between the border and the area it is drawn on, the WCAG AA requirement for
+ * graphical objects. Below it the derived color is not considered visible enough.
+ * @type {number}
+ */
+const MIN_CONTRAST_RATIO = 3;
+/**
+ * Below this saturation the inverted color carries no usable hue, e.g. any grey inverts into
+ * another grey. Those fall back to a neutral border.
+ * @type {number}
+ */
+const MIN_SATURATION = 0.1;
+/**
+ * The border keeps the complementary hue at a fixed high saturation, so it reads as an actual color
+ * instead of the pale tint that inverting a dark color produces.
+ * @type {number}
+ */
+const BORDER_SATURATION = 85;
+/**
+ * Candidate lightness values, ordered from the most vivid one outwards. The first one that contrasts
+ * enough with the average wins, so the border only gets as pale (on a dark product) or as deep (on a
+ * light one) as it has to be to stay visible.
+ */
+const LIGHTNESS_ON_DARK_AVERAGE = [60, 65, 70, 75, 80, 85, 90, 95];
+const LIGHTNESS_ON_LIGHT_AVERAGE = [40, 35, 30, 25, 20, 15, 10, 5];
+/**
+ * Relative luminance above which the sampled average counts as light, roughly a mid grey.
+ * @type {number}
+ */
+const LIGHT_AVERAGE_LUMINANCE = 0.2;
+const NEUTRAL_DARK = '#111111';
+const NEUTRAL_LIGHT = '#eeeeee';
+
+/**
+ * @param {{r: number, g: number, b: number}} color
+ * @return {{r: number, g: number, b: number}}
+ */
+export const invertColor = ({ r, g, b }) => ({ r: 255 - r, g: 255 - g, b: 255 - b });
+
+/**
+ * Hue and saturation of an rgb color. Material-UI provides hslToRgb but not the other direction.
+ * @param {{r: number, g: number, b: number}} color
+ * @return {{hue: number, saturation: number, lightness: number}} Hue in degrees, rest in 0..1
+ */
+export const rgbToHsl = ({ r, g, b }) => {
+    const red = r / 255;
+    const green = g / 255;
+    const blue = b / 255;
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const delta = max - min;
+    const lightness = (max + min) / 2;
+
+    if (!delta) {
+        return { hue: 0, saturation: 0, lightness };
+    }
+
+    let hue;
+    if (max === red) {
+        hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
+    } else if (max === green) {
+        hue = ((blue - red) / delta + 2) * 60;
+    } else {
+        hue = ((red - green) / delta + 4) * 60;
+    }
+
+    return {
+        hue,
+        saturation: delta / (1 - Math.abs(2 * lightness - 1)),
+        lightness,
+    };
+};
+
+/**
+ * The available ways to derive the border color from the sampled product color.
+ * @see getBorderColorForAverage
+ */
+export const BorderColorModes = {
+    Contrast: 'contrast',
+    Complementary: 'complementary',
+};
+
+/**
+ * A near black or a near white border, whichever reads better on the given color.
+ * The border is only about one pixel wide, and for such a thin line a strong difference in
+ * brightness is what makes it visible, much more than a difference in hue.
+ * @param {string} averageHex
+ * @return {string} A hex color
+ */
+export const getContrastBorderColor = averageHex =>
+    getContrastRatio(averageHex, NEUTRAL_DARK) >= getContrastRatio(averageHex, NEUTRAL_LIGHT)
+        ? NEUTRAL_DARK
+        : NEUTRAL_LIGHT;
+
+/**
+ * Keeps the hue of the inverted (complementary) color at a high saturation and moves the lightness
+ * away from the average, only as far as needed to reach a visible contrast, so the border is a vivid
+ * color rather than the pale tint that plain inversion produces.
+ * Averages without a usable hue, such as any grey, and the case where no candidate contrasts enough,
+ * fall back to a neutral border.
+ * @param {{r: number, g: number, b: number}} average
+ * @param {string} averageHex
+ * @return {string} A hex color
+ */
+export const getComplementaryBorderColor = (average, averageHex) => {
+    const { hue, saturation } = rgbToHsl(invertColor(average));
+
+    if (saturation >= MIN_SATURATION) {
+        const lightnessCandidates =
+            getLuminance(averageHex) > LIGHT_AVERAGE_LUMINANCE
+                ? LIGHTNESS_ON_LIGHT_AVERAGE
+                : LIGHTNESS_ON_DARK_AVERAGE;
+
+        for (const lightness of lightnessCandidates) {
+            const candidate = rgbString2hex(
+                hslToRgb(`hsl(${Math.round(hue)}, ${BORDER_SATURATION}%, ${lightness}%)`)
+            );
+            if (candidate && getContrastRatio(averageHex, candidate) >= MIN_CONTRAST_RATIO) {
+                return candidate;
+            }
+        }
+    }
+
+    return getContrastBorderColor(averageHex);
+};
+
+/**
+ * Derives a border color from the average color of the area the border is drawn on.
+ * Anything but the complementary mode uses the contrast mode, so a missing or misspelled
+ * configuration value ends up with the most legible option.
+ * @param {{r: number, g: number, b: number}} average
+ * @param {string} [mode] One of BorderColorModes
+ * @return {string} A hex color
+ */
+export const getBorderColorForAverage = (average, mode = BorderColorModes.Contrast) => {
+    const averageHex = rgbToHex(average.r, average.g, average.b);
+
+    return mode === BorderColorModes.Complementary
+        ? getComplementaryBorderColor(average, averageHex)
+        : getContrastBorderColor(averageHex);
+};
+
+/**
+ * Creates the resolver that the texture builder calls for every highlighted design area.
+ * It falls back to the given color whenever the underlying color cannot be determined, e.g. for
+ * the 3D visualization, for fully transparent regions and for design areas that are not visible.
+ * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
+ * @param {string} fallbackColor
+ * @param {string} [mode] One of BorderColorModes
+ * @return {function(object): string}
+ */
+export const createBorderColorResolver = (getUnderlyingColor, fallbackColor, mode) => designArea => {
+    const average = getUnderlyingColor(designArea && designArea.identifier);
+    return average ? getBorderColorForAverage(average, mode) : fallbackColor;
+};

package/src/App/configuration.js

@@ -186,6 +186,19 @@ let applicationConfiguration = {
             src: '', // source of the visualization script in the public folder, e.g. 'visualization.js'
         },
         designAreaHighlightBackgroundColor: 'transparent',
+        // Width of the design area highlight border, in pixels at 100% zoom.
+        // Applies to the static border as well, 2 was the previously hard coded value.
+        designAreaHighlightBorderWidth: 2,
+        // Derive the design area highlight border color from the average color of the product
+        // image underneath the border, instead of using the client theme's highlightColor.
+        // This keeps the border visible on products whose color is close to the highlight color.
+        // 2D visualization only, the 3D one always uses the static color.
+        dynamicDesignAreaHighlightBorderColor: false,
+        // How the dynamic border color is derived from the sampled product color:
+        // 'contrast'      near black or near white, whichever reads better (most legible, default)
+        // 'complementary' the inverted hue at a high saturation (more decorative, but a thin line
+        //                 in a mid bright color is much harder to see than a light or dark one)
+        dynamicDesignAreaHighlightBorderColorMode: 'contrast',
         options: {
             // when zoom = 1 use NearestFilter (for sharper product image)
             sharperFullView: false,