@configuratorware/configurator-frontendgui 1.57.9 → 1.57.11

package/App/Reducers/Configurator/Actions.js

@@ -39,6 +39,10 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -246,15 +250,32 @@ var applyVariantAmountPreSelection = exports.applyVariantAmountPreSelection = fu
     var children = (0, _flatten["default"])((0, _Selectors.getChildren)(configurator).map(function (variant) {
       return Object.values((0, _Selectors.getDeepestChildIdentifiers)(variant));
     }));
-    for (var preSelectionVariant in itemAmounts) {
-      if (!itemAmounts.hasOwnProperty(preSelectionVariant)) {
-        continue;
-      }
-      var amount = +itemAmounts[preSelectionVariant];
-      if (children.indexOf(preSelectionVariant) !== -1 && amount > 0) {
-        _ServiceLocator.Services.configurator.setSelectedAmount(preSelectionVariant, amount);
-      }
+    var applicableAmounts = Object.keys(itemAmounts).filter(function (identifier) {
+      return children.indexOf(identifier) !== -1 && +itemAmounts[identifier] > 0;
+    }).map(function (identifier) {
+      return [identifier, +itemAmounts[identifier]];
+    });
+
+    // designerPreSelection is parsed once from the URL and stays in conf for the whole session, so
+    // without consuming it here it would re-apply (and re-clear existing amounts) on every later
+    // configuration load, e.g. switching the configuration variant or loading a saved configuration
+    (0, _configuration.setConf)('designerPreSelection.itemAmounts', undefined);
+    if (applicableAmounts.length === 0) {
+      return;
     }
+
+    // only the explicitly passed amounts should apply, so clear whatever the item already had - by
+    // the keys actually selected, since a selected amount can be stored at any item level, not just
+    // on the deepest children
+    Object.keys((0, _Selectors.getSelectedAmounts)(configurator) || {}).forEach(function (identifier) {
+      return _ServiceLocator.Services.configurator.setSelectedAmount(identifier, 0);
+    });
+    applicableAmounts.forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        identifier = _ref5[0],
+        amount = _ref5[1];
+      return _ServiceLocator.Services.configurator.setSelectedAmount(identifier, amount);
+    });
   }
 };
 var selectOptionclassification = exports.selectOptionclassification = function selectOptionclassification(optionclassification) {
@@ -413,7 +434,7 @@ var receiveCodesnippets = exports.receiveCodesnippets = function receiveCodesnip
 };
 var fetchConfigurationForDesignerProductPreview = exports.fetchConfigurationForDesignerProductPreview = function fetchConfigurationForDesignerProductPreview() {
   return /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(dispatch, getState) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(dispatch, getState) {
       var itemIdentifier, _getAvailableConfigur2, designerEnabled, initialDesignData;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
@@ -448,7 +469,7 @@ var fetchConfigurationForDesignerProductPreview = exports.fetchConfigurationForD
       }, _callee3);
     }));
     return function (_x4, _x5) {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
 };
@@ -866,10 +887,10 @@ var getSwitchOptionData = function getSwitchOptionData(optionsList) {
   try {
     for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
       var component = _step4.value;
-      switchOptionData[component.identifier] = component.selectedoptions.map(function (_ref5) {
-        var identifier = _ref5.identifier,
-          amount = _ref5.amount,
-          inputText = _ref5.inputText;
+      switchOptionData[component.identifier] = component.selectedoptions.map(function (_ref7) {
+        var identifier = _ref7.identifier,
+          amount = _ref7.amount,
+          inputText = _ref7.inputText;
         return {
           identifier: identifier,
           inputText: inputText,
@@ -902,7 +923,7 @@ var viewOptionDetails = exports.viewOptionDetails = function viewOptionDetails(o
 };
 var loadConfiguration = exports.loadConfiguration = function loadConfiguration() {
   return /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(dispatch, getState) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(dispatch, getState) {
       var loadCode, action;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
@@ -939,7 +960,7 @@ var loadConfiguration = exports.loadConfiguration = function loadConfiguration()
       }, _callee4, null, [[5, 13, 17, 20]]);
     }));
     return function (_x6, _x7) {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
 };
@@ -952,7 +973,7 @@ var receiveDesignerData = exports.receiveDesignerData = function receiveDesigner
 };
 var loadDesignerData = exports.loadDesignerData = function loadDesignerData(configuration) {
   return /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(dispatch) {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(dispatch) {
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
@@ -986,7 +1007,7 @@ var loadDesignerData = exports.loadDesignerData = function loadDesignerData(conf
       }, _callee5, null, [[4, 10, 13, 16]]);
     }));
     return function (_x8) {
-      return _ref7.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
 };

package/App/Services/DesignDataService.js

@@ -1907,6 +1907,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
           state,
           showHighlight,
           staticBorderColor,
+          dynamicDesignAreaHighlightBorderColor,
+          dynamicDesignAreaHighlightBorderColorMode,
+          getDesignAreaUnderlyingColor,
+          allDesignAreasForBorderColor,
+          borderColor,
           textureBuilderConfig,
           variantIdentifier,
           effectEnabled,
@@ -1919,11 +1924,16 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               state = _ServiceLocator.Services.store.state;
               showHighlight = (0, _get2["default"])(state, 'designArea.showHighlight');
               staticBorderColor = (0, _Selectors3.getClientHighlightColor)(state);
+              dynamicDesignAreaHighlightBorderColor = (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColor');
+              dynamicDesignAreaHighlightBorderColorMode = (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColorMode');
+              getDesignAreaUnderlyingColor = function getDesignAreaUnderlyingColor(identifier) {
+                return _ServiceLocator.Services.visualization.getDesignAreaUnderlyingColor(identifier);
+              }; // 2D invokes drawingFn once per area with a single-element list; unify borders from the full view.
+              allDesignAreasForBorderColor = this.getDesignAreas();
+              borderColor = dynamicDesignAreaHighlightBorderColor ? (0, _getDesignAreaBorderColor.createBorderColorResolver)(getDesignAreaUnderlyingColor, staticBorderColor, dynamicDesignAreaHighlightBorderColorMode, allDesignAreasForBorderColor) : staticBorderColor;
               textureBuilderConfig = (0, _merge["default"])({
                 highlight: {
-                  borderColor: (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColor') ? (0, _getDesignAreaBorderColor.createBorderColorResolver)(function (identifier) {
-                    return _ServiceLocator.Services.visualization.getDesignAreaUnderlyingColor(identifier);
-                  }, staticBorderColor, (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColorMode')) : staticBorderColor,
+                  borderColor: borderColor,
                   backgroundColor: (0, _configuration.getConf)('visualization.designAreaHighlightBackgroundColor'),
                   lineWidth: (0, _configuration.getConf)('visualization.designAreaHighlightBorderWidth', 2)
                 }
@@ -2119,22 +2129,22 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                   return _ref17.apply(this, arguments);
                 };
               }();
-              _context22.prev = 8;
-              _context22.next = 11;
-              return getDrawingContext(drawingFn, true /* update alpha */, true /* clean up texture before drawing */);
-            case 11:
+              _context22.prev = 13;
               _context22.next = 16;
+              return getDrawingContext(drawingFn, true /* update alpha */, true /* clean up texture before drawing */);
+            case 16:
+              _context22.next = 21;
               break;
-            case 13:
-              _context22.prev = 13;
-              _context22.t0 = _context22["catch"](8);
+            case 18:
+              _context22.prev = 18;
+              _context22.t0 = _context22["catch"](13);
               // eslint-disable-next-line no-console
               console.warn('Could not get drawing context, texture update is skipped!', _context22.t0.message);
-            case 16:
+            case 21:
             case "end":
               return _context22.stop();
           }
-        }, _callee21, null, [[8, 13]]);
+        }, _callee21, this, [[13, 18]]);
       }));
       function redrawAllDesignAreas(_x20, _x21) {
         return _redrawAllDesignAreas.apply(this, arguments);

package/App/Utils/getDesignAreaBorderColor.js

@@ -3,9 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rgbToHsl = exports.invertColor = exports.getContrastBorderColor = exports.getComplementaryBorderColor = exports.getBorderColorForAverage = exports.createBorderColorResolver = exports.BorderColorModes = void 0;
+exports.rgbToHsl = exports.invertColor = exports.getContrastBorderColor = exports.getComplementaryBorderColor = exports.getBorderColorForAverage = exports.createBorderColorResolver = exports.computeUnifiedContrastBorders = exports.BorderColorModes = void 0;
 var _styles = require("@material-ui/core/styles");
 var _Selectors = require("../Reducers/DesignArea/Selectors");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /**
  * 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.
@@ -112,6 +119,135 @@ var getContrastBorderColor = exports.getContrastBorderColor = function getContra
   return (0, _styles.getContrastRatio)(averageHex, NEUTRAL_DARK) >= (0, _styles.getContrastRatio)(averageHex, NEUTRAL_LIGHT) ? NEUTRAL_DARK : NEUTRAL_LIGHT;
 };
 
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {number}
+ */
+var minContrastForNeutralAcrossAreas = function minContrastForNeutralAcrossAreas(neutral, areas) {
+  return Math.min.apply(Math, _toConsumableArray(areas.map(function (_ref3) {
+    var averageHex = _ref3.averageHex;
+    return (0, _styles.getContrastRatio)(averageHex, neutral);
+  })));
+};
+
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {boolean}
+ */
+var neutralMeetsMinContrastOnAllAreas = function neutralMeetsMinContrastOnAllAreas(neutral, areas) {
+  return minContrastForNeutralAcrossAreas(neutral, areas) >= MIN_CONTRAST_RATIO;
+};
+
+/**
+ * Picks one near-black or near-white border for every design area in a highlight pass when possible,
+ * so similar product shades do not flip border color at the luminance tie-break.
+ * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
+ * @param {Array<{identifier: string}>} designAreas
+ * @return {Map<string, string>}
+ */
+var computeUnifiedContrastBorders = exports.computeUnifiedContrastBorders = function computeUnifiedContrastBorders(getUnderlyingColor, designAreas) {
+  var areas = [];
+  var _iterator = _createForOfIteratorHelper(designAreas),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var designArea = _step.value;
+      var _identifier3 = designArea && designArea.identifier;
+      if (!_identifier3) {
+        continue;
+      }
+      var average = getUnderlyingColor(_identifier3);
+      if (!average) {
+        continue;
+      }
+      areas.push({
+        identifier: _identifier3,
+        averageHex: (0, _Selectors.rgbToHex)(average.r, average.g, average.b)
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var borderByIdentifier = new Map();
+  if (!areas.length) {
+    return borderByIdentifier;
+  }
+  var darkVotes = 0;
+  var lightVotes = 0;
+  for (var _i = 0, _areas = areas; _i < _areas.length; _i++) {
+    var averageHex = _areas[_i].averageHex;
+    var vote = getContrastBorderColor(averageHex);
+    if (vote === NEUTRAL_DARK) {
+      darkVotes += 1;
+    } else {
+      lightVotes += 1;
+    }
+  }
+  var majorityNeutral;
+  if (darkVotes > lightVotes) {
+    majorityNeutral = NEUTRAL_DARK;
+  } else if (lightVotes > darkVotes) {
+    majorityNeutral = NEUTRAL_LIGHT;
+  }
+  if (majorityNeutral && neutralMeetsMinContrastOnAllAreas(majorityNeutral, areas)) {
+    var _iterator2 = _createForOfIteratorHelper(areas),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var identifier = _step2.value.identifier;
+        borderByIdentifier.set(identifier, majorityNeutral);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return borderByIdentifier;
+  }
+  var qualifyingNeutrals = [NEUTRAL_DARK, NEUTRAL_LIGHT].filter(function (neutral) {
+    return neutralMeetsMinContrastOnAllAreas(neutral, areas);
+  });
+  if (qualifyingNeutrals.length) {
+    var maximinNeutral = qualifyingNeutrals.reduce(function (best, neutral) {
+      var minContrast = minContrastForNeutralAcrossAreas(neutral, areas);
+      if (!best) {
+        return {
+          neutral: neutral,
+          minContrast: minContrast
+        };
+      }
+      return minContrast > best.minContrast ? {
+        neutral: neutral,
+        minContrast: minContrast
+      } : best;
+    }, null).neutral;
+    var _iterator3 = _createForOfIteratorHelper(areas),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _identifier = _step3.value.identifier;
+        borderByIdentifier.set(_identifier, maximinNeutral);
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    return borderByIdentifier;
+  }
+  for (var _i2 = 0, _areas2 = areas; _i2 < _areas2.length; _i2++) {
+    var _areas2$_i = _areas2[_i2],
+      _identifier2 = _areas2$_i.identifier,
+      _averageHex = _areas2$_i.averageHex;
+    borderByIdentifier.set(_identifier2, getContrastBorderColor(_averageHex));
+  }
+  return borderByIdentifier;
+};
+
 /**
  * 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
@@ -128,8 +264,8 @@ var getComplementaryBorderColor = exports.getComplementaryBorderColor = function
     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];
+    for (var _i3 = 0, _lightnessCandidates = lightnessCandidates; _i3 < _lightnessCandidates.length; _i3++) {
+      var lightness = _lightnessCandidates[_i3];
       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;
@@ -160,11 +296,31 @@ var getBorderColorForAverage = exports.getBorderColorForAverage = function getBo
  * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
  * @param {string} fallbackColor
  * @param {string} [mode] One of BorderColorModes
+ * @param {Array<{identifier: string}>} [designAreas] When set in contrast mode, one border is chosen for the pass
  * @return {function(object): string}
  */
-var createBorderColorResolver = exports.createBorderColorResolver = function createBorderColorResolver(getUnderlyingColor, fallbackColor, mode) {
+var createBorderColorResolver = exports.createBorderColorResolver = function createBorderColorResolver(getUnderlyingColor, fallbackColor, mode, designAreas) {
+  var useUnifiedContrast = mode !== BorderColorModes.Complementary && designAreas && designAreas.length;
+  var unifiedBorderByIdentifier = null;
+  var getUnifiedBorderByIdentifier = function getUnifiedBorderByIdentifier() {
+    if (!useUnifiedContrast) {
+      return null;
+    }
+    var sampledCount = designAreas.filter(function (designArea) {
+      return (designArea === null || designArea === void 0 ? void 0 : designArea.identifier) && getUnderlyingColor(designArea.identifier);
+    }).length;
+    if (!unifiedBorderByIdentifier || sampledCount > 0 && unifiedBorderByIdentifier.size < sampledCount) {
+      unifiedBorderByIdentifier = computeUnifiedContrastBorders(getUnderlyingColor, designAreas);
+    }
+    return unifiedBorderByIdentifier;
+  };
   return function (designArea) {
-    var average = getUnderlyingColor(designArea && designArea.identifier);
+    var identifier = designArea && designArea.identifier;
+    var unified = getUnifiedBorderByIdentifier();
+    if (unified && identifier && unified.has(identifier)) {
+      return unified.get(identifier);
+    }
+    var average = getUnderlyingColor(identifier);
     return average ? getBorderColorForAverage(average, mode) : fallbackColor;
   };
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.57.9",
+  "version": "1.57.11",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.57.9",
+    "@configuratorware/scripts": "1.57.11",
     "@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.9",
-    "redhotmagma-visualization": "1.57.9",
+    "redhotmagma-graphics-editor": "1.57.11",
+    "redhotmagma-visualization": "1.57.11",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -64,7 +64,7 @@
     "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^9.0.0",
+    "sass": "1.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",

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

@@ -9,7 +9,7 @@ import uniq from 'lodash/uniq';
 import { t } from 'Framework/i18n';
 import Api from 'Framework/Api';
 import { createActionWithGlobalState } from 'Utils/Redux/createActionWithGlobalState';
-import { getConf } from '../../configuration';
+import { getConf, setConf } from '../../configuration';
 import { Services } from '../../ServiceLocator';
 import {
     dismissError,
@@ -204,17 +204,29 @@ export const applyVariantAmountPreSelection = configurator => {
             getChildren(configurator).map(variant => Object.values(getDeepestChildIdentifiers(variant)))
         );
 
-        for (const preSelectionVariant in itemAmounts) {
-            if (!itemAmounts.hasOwnProperty(preSelectionVariant)) {
-                continue;
-            }
+        const applicableAmounts = Object.keys(itemAmounts)
+            .filter(identifier => children.indexOf(identifier) !== -1 && +itemAmounts[identifier] > 0)
+            .map(identifier => [identifier, +itemAmounts[identifier]]);
 
-            const amount = +itemAmounts[preSelectionVariant];
+        // designerPreSelection is parsed once from the URL and stays in conf for the whole session, so
+        // without consuming it here it would re-apply (and re-clear existing amounts) on every later
+        // configuration load, e.g. switching the configuration variant or loading a saved configuration
+        setConf('designerPreSelection.itemAmounts', undefined);
 
-            if (children.indexOf(preSelectionVariant) !== -1 && amount > 0) {
-                Services.configurator.setSelectedAmount(preSelectionVariant, amount);
-            }
+        if (applicableAmounts.length === 0) {
+            return;
         }
+
+        // only the explicitly passed amounts should apply, so clear whatever the item already had - by
+        // the keys actually selected, since a selected amount can be stored at any item level, not just
+        // on the deepest children
+        Object.keys(getSelectedAmounts(configurator) || {}).forEach(identifier =>
+            Services.configurator.setSelectedAmount(identifier, 0)
+        );
+
+        applicableAmounts.forEach(([identifier, amount]) =>
+            Services.configurator.setSelectedAmount(identifier, amount)
+        );
     }
 };
 

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

@@ -127,6 +127,127 @@ describe('Reducers/Configurator/Actions', () => {
         expect(configuratorService.setSelectedAmount).toBeCalledWith('hoodie_red_s', 2);
     });
 
+    test('applyVariantAmountPreSelection clears the item default amount before applying the preselection', () => {
+        const mockConfigurator = {
+            configuration: {
+                item: {
+                    itemGroup: {
+                        children: [{ identifier: 'hoodie_white_default' }, { identifier: 'hoodie_black' }],
+                    },
+                },
+                customdata: {
+                    selectedAmounts: { hoodie_white_default: 1 },
+                },
+            },
+        };
+
+        const mockPreSelection = {
+            itemAmounts: {
+                hoodie_black: 50,
+            },
+        };
+
+        setConf('designerPreSelection', mockPreSelection);
+
+        applyVariantAmountPreSelection(mockConfigurator);
+
+        expect(configuratorService.setSelectedAmount).toBeCalledWith('hoodie_white_default', 0);
+        expect(configuratorService.setSelectedAmount).toBeCalledWith('hoodie_black', 50);
+    });
+
+    test('applyVariantAmountPreSelection clears a default amount stored at a non-leaf identifier', () => {
+        const mockConfigurator = {
+            configuration: {
+                item: {
+                    itemGroup: {
+                        children: [
+                            {
+                                identifier: 'hoodie_red',
+                                itemGroup: {
+                                    children: [
+                                        { identifier: 'hoodie_red_s', itemgroupentryIdentifier: 's' },
+                                        { identifier: 'hoodie_red_m', itemgroupentryIdentifier: 'm' },
+                                    ],
+                                },
+                            },
+                        ],
+                    },
+                },
+                customdata: {
+                    // the default amount is stored on the colour-level identifier, not a deepest child
+                    selectedAmounts: { hoodie_red: 1 },
+                },
+            },
+        };
+
+        const mockPreSelection = {
+            itemAmounts: {
+                hoodie_red_s: 50,
+            },
+        };
+
+        setConf('designerPreSelection', mockPreSelection);
+
+        applyVariantAmountPreSelection(mockConfigurator);
+
+        expect(configuratorService.setSelectedAmount).toBeCalledWith('hoodie_red', 0);
+        expect(configuratorService.setSelectedAmount).toBeCalledWith('hoodie_red_s', 50);
+    });
+
+    test('applyVariantAmountPreSelection leaves existing amounts untouched when nothing in the preselection applies', () => {
+        const mockConfigurator = {
+            configuration: {
+                item: {
+                    itemGroup: {
+                        children: [{ identifier: 'hoodie_untouched' }],
+                    },
+                },
+                customdata: {
+                    selectedAmounts: { hoodie_untouched: 1 },
+                },
+            },
+        };
+
+        const mockPreSelection = {
+            itemAmounts: {
+                unknown_identifier: 50,
+            },
+        };
+
+        setConf('designerPreSelection', mockPreSelection);
+
+        const callsBefore = configuratorService.setSelectedAmount.mock.calls.length;
+
+        applyVariantAmountPreSelection(mockConfigurator);
+
+        expect(configuratorService.setSelectedAmount.mock.calls.length).toBe(callsBefore);
+    });
+
+    test('applyVariantAmountPreSelection only applies the preselection once', () => {
+        const mockConfigurator = {
+            configuration: {
+                item: {
+                    itemGroup: {
+                        children: [{ identifier: 'hoodie_once' }],
+                    },
+                },
+            },
+        };
+
+        setConf('designerPreSelection', { itemAmounts: { hoodie_once: 7 } });
+
+        applyVariantAmountPreSelection(mockConfigurator);
+        expect(configuratorService.setSelectedAmount).toBeCalledWith('hoodie_once', 7);
+
+        const callsAfterFirstApply = configuratorService.setSelectedAmount.mock.calls.length;
+
+        // simulates a later configuration load (e.g. switching variant, loading a saved configuration) -
+        // designerPreSelection is still in conf, but its itemAmounts must have been consumed by now
+        applyVariantAmountPreSelection(mockConfigurator);
+
+        expect(configuratorService.setSelectedAmount.mock.calls.length).toBe(callsAfterFirstApply);
+    });
+
     describe('receiveConfiguration', () => {
         const configurator = {
             configuration: {

package/src/App/Services/DesignDataService.js

@@ -1604,16 +1604,28 @@ export default class DesignDataService {
         const showHighlight = get(state, 'designArea.showHighlight');
 
         const staticBorderColor = getClientHighlightColor(state);
+        const dynamicDesignAreaHighlightBorderColor = getConf(
+            'visualization.dynamicDesignAreaHighlightBorderColor'
+        );
+        const dynamicDesignAreaHighlightBorderColorMode = getConf(
+            'visualization.dynamicDesignAreaHighlightBorderColorMode'
+        );
+        const getDesignAreaUnderlyingColor = identifier =>
+            Services.visualization.getDesignAreaUnderlyingColor(identifier);
+        // 2D invokes drawingFn once per area with a single-element list; unify borders from the full view.
+        const allDesignAreasForBorderColor = this.getDesignAreas();
+        const borderColor = dynamicDesignAreaHighlightBorderColor
+            ? createBorderColorResolver(
+                  getDesignAreaUnderlyingColor,
+                  staticBorderColor,
+                  dynamicDesignAreaHighlightBorderColorMode,
+                  allDesignAreasForBorderColor
+              )
+            : staticBorderColor;
         const textureBuilderConfig = merge(
             {
                 highlight: {
-                    borderColor: getConf('visualization.dynamicDesignAreaHighlightBorderColor')
-                        ? createBorderColorResolver(
-                              identifier => Services.visualization.getDesignAreaUnderlyingColor(identifier),
-                              staticBorderColor,
-                              getConf('visualization.dynamicDesignAreaHighlightBorderColorMode')
-                          )
-                        : staticBorderColor,
+                    borderColor,
                     backgroundColor: getConf('visualization.designAreaHighlightBackgroundColor'),
                     lineWidth: getConf('visualization.designAreaHighlightBorderWidth', 2),
                 },

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

@@ -1,7 +1,9 @@
 import {
     BorderColorModes,
+    computeUnifiedContrastBorders,
     createBorderColorResolver,
     getBorderColorForAverage,
+    getContrastBorderColor,
     invertColor,
     rgbToHsl,
 } from '../getDesignAreaBorderColor';
@@ -96,6 +98,70 @@ describe('getBorderColorForAverage in complementary mode', () => {
     });
 });
 
+const grey = value => ({ r: value, g: value, b: value });
+
+describe('computeUnifiedContrastBorders', () => {
+    test('uses one border for similar greys that would flip individually', () => {
+        const colors = {
+            left: grey(100),
+            right: grey(120),
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'left' },
+            { identifier: 'right' },
+        ]);
+
+        expect(getContrastBorderColor('#646464')).toBe('#eeeeee');
+        expect(getContrastBorderColor('#787878')).toBe('#111111');
+        expect(borders.get('left')).toBe(borders.get('right'));
+    });
+
+    test('uses majority neutral when it is visible on every area', () => {
+        const colors = {
+            a: grey(50),
+            b: grey(60),
+            c: grey(128),
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'a' },
+            { identifier: 'b' },
+            { identifier: 'c' },
+        ]);
+
+        expect(borders.get('a')).toBe('#eeeeee');
+        expect(borders.get('b')).toBe('#eeeeee');
+        expect(borders.get('c')).toBe('#eeeeee');
+    });
+
+    test('falls back to maximin when majority neutral fails on an area', () => {
+        const colors = {
+            dark: grey(30),
+            mid: grey(128),
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'dark' },
+            { identifier: 'mid' },
+        ]);
+
+        expect(borders.get('dark')).toBe('#eeeeee');
+        expect(borders.get('mid')).toBe('#eeeeee');
+    });
+
+    test('allows per-area colors when no single neutral works everywhere', () => {
+        const colors = {
+            light: { r: 255, g: 255, b: 255 },
+            dark: { r: 0, g: 0, b: 0 },
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'light' },
+            { identifier: 'dark' },
+        ]);
+
+        expect(borders.get('light')).toBe('#111111');
+        expect(borders.get('dark')).toBe('#eeeeee');
+    });
+});
+
 describe('createBorderColorResolver', () => {
     test('resolves the border color from the underlying color of the design area', () => {
         const getUnderlyingColor = jest.fn().mockReturnValue(JACKET_GREEN);
@@ -125,4 +191,75 @@ describe('createBorderColorResolver', () => {
     test('falls back to the given color without a design area', () => {
         expect(createBorderColorResolver(() => null, '#abcdef')()).toBe('#abcdef');
     });
+
+    test('unifies contrast borders across design areas when the list is given', () => {
+        const colors = {
+            left: grey(100),
+            right: grey(120),
+        };
+        const resolve = createBorderColorResolver(id => colors[id], '#abcdef', BorderColorModes.Contrast, [
+            { identifier: 'left' },
+            { identifier: 'right' },
+        ]);
+
+        expect(resolve({ identifier: 'left' })).toBe(resolve({ identifier: 'right' }));
+    });
+
+    test('unifies when resolved one area at a time like 2D drawing passes', () => {
+        const colors = {
+            chestLeft: grey(100),
+            chestRight: grey(120),
+            collar: grey(115),
+        };
+        const allAreas = [
+            { identifier: 'chestLeft' },
+            { identifier: 'chestRight' },
+            { identifier: 'collar' },
+        ];
+        const resolve = createBorderColorResolver(
+            id => colors[id],
+            '#abcdef',
+            BorderColorModes.Contrast,
+            allAreas
+        );
+
+        const chestLeftBorder = resolve({ identifier: 'chestLeft' });
+        const chestRightBorder = resolve({ identifier: 'chestRight' });
+        const collarBorder = resolve({ identifier: 'collar' });
+
+        expect(chestLeftBorder).toBe(chestRightBorder);
+        expect(chestRightBorder).toBe(collarBorder);
+    });
+
+    test('resolves per area when design areas are omitted', () => {
+        const resolve = createBorderColorResolver(
+            id => (id === 'left' ? grey(100) : grey(120)),
+            '#abcdef',
+            BorderColorModes.Contrast
+        );
+
+        expect(resolve({ identifier: 'left' })).toBe('#eeeeee');
+        expect(resolve({ identifier: 'right' })).toBe('#111111');
+    });
+
+    test('does not unify borders in complementary mode', () => {
+        const colors = {
+            left: grey(100),
+            right: grey(120),
+        };
+        const resolve = createBorderColorResolver(
+            id => colors[id],
+            '#abcdef',
+            BorderColorModes.Complementary,
+            [{ identifier: 'left' }, { identifier: 'right' }]
+        );
+
+        expect(resolve({ identifier: 'left' })).toBe(
+            getBorderColorForAverage(colors.left, BorderColorModes.Complementary)
+        );
+        expect(resolve({ identifier: 'right' })).toBe(
+            getBorderColorForAverage(colors.right, BorderColorModes.Complementary)
+        );
+        expect(resolve({ identifier: 'left' })).not.toBe(resolve({ identifier: 'right' }));
+    });
 });

package/src/App/Utils/getDesignAreaBorderColor.js

@@ -95,6 +95,105 @@ export const getContrastBorderColor = averageHex =>
         ? NEUTRAL_DARK
         : NEUTRAL_LIGHT;
 
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {number}
+ */
+const minContrastForNeutralAcrossAreas = (neutral, areas) =>
+    Math.min(...areas.map(({ averageHex }) => getContrastRatio(averageHex, neutral)));
+
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {boolean}
+ */
+const neutralMeetsMinContrastOnAllAreas = (neutral, areas) =>
+    minContrastForNeutralAcrossAreas(neutral, areas) >= MIN_CONTRAST_RATIO;
+
+/**
+ * Picks one near-black or near-white border for every design area in a highlight pass when possible,
+ * so similar product shades do not flip border color at the luminance tie-break.
+ * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
+ * @param {Array<{identifier: string}>} designAreas
+ * @return {Map<string, string>}
+ */
+export const computeUnifiedContrastBorders = (getUnderlyingColor, designAreas) => {
+    const areas = [];
+
+    for (const designArea of designAreas) {
+        const identifier = designArea && designArea.identifier;
+        if (!identifier) {
+            continue;
+        }
+        const average = getUnderlyingColor(identifier);
+        if (!average) {
+            continue;
+        }
+        areas.push({
+            identifier,
+            averageHex: rgbToHex(average.r, average.g, average.b),
+        });
+    }
+
+    const borderByIdentifier = new Map();
+
+    if (!areas.length) {
+        return borderByIdentifier;
+    }
+
+    let darkVotes = 0;
+    let lightVotes = 0;
+
+    for (const { averageHex } of areas) {
+        const vote = getContrastBorderColor(averageHex);
+        if (vote === NEUTRAL_DARK) {
+            darkVotes += 1;
+        } else {
+            lightVotes += 1;
+        }
+    }
+
+    let majorityNeutral;
+    if (darkVotes > lightVotes) {
+        majorityNeutral = NEUTRAL_DARK;
+    } else if (lightVotes > darkVotes) {
+        majorityNeutral = NEUTRAL_LIGHT;
+    }
+
+    if (majorityNeutral && neutralMeetsMinContrastOnAllAreas(majorityNeutral, areas)) {
+        for (const { identifier } of areas) {
+            borderByIdentifier.set(identifier, majorityNeutral);
+        }
+        return borderByIdentifier;
+    }
+
+    const qualifyingNeutrals = [NEUTRAL_DARK, NEUTRAL_LIGHT].filter(neutral =>
+        neutralMeetsMinContrastOnAllAreas(neutral, areas)
+    );
+
+    if (qualifyingNeutrals.length) {
+        const maximinNeutral = qualifyingNeutrals.reduce((best, neutral) => {
+            const minContrast = minContrastForNeutralAcrossAreas(neutral, areas);
+            if (!best) {
+                return { neutral, minContrast };
+            }
+            return minContrast > best.minContrast ? { neutral, minContrast } : best;
+        }, null).neutral;
+
+        for (const { identifier } of areas) {
+            borderByIdentifier.set(identifier, maximinNeutral);
+        }
+        return borderByIdentifier;
+    }
+
+    for (const { identifier, averageHex } of areas) {
+        borderByIdentifier.set(identifier, getContrastBorderColor(averageHex));
+    }
+
+    return borderByIdentifier;
+};
+
 /**
  * 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
@@ -150,9 +249,38 @@ export const getBorderColorForAverage = (average, mode = BorderColorModes.Contra
  * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
  * @param {string} fallbackColor
  * @param {string} [mode] One of BorderColorModes
+ * @param {Array<{identifier: string}>} [designAreas] When set in contrast mode, one border is chosen for the pass
  * @return {function(object): string}
  */
-export const createBorderColorResolver = (getUnderlyingColor, fallbackColor, mode) => designArea => {
-    const average = getUnderlyingColor(designArea && designArea.identifier);
-    return average ? getBorderColorForAverage(average, mode) : fallbackColor;
+export const createBorderColorResolver = (getUnderlyingColor, fallbackColor, mode, designAreas) => {
+    const useUnifiedContrast = mode !== BorderColorModes.Complementary && designAreas && designAreas.length;
+    let unifiedBorderByIdentifier = null;
+
+    const getUnifiedBorderByIdentifier = () => {
+        if (!useUnifiedContrast) {
+            return null;
+        }
+        const sampledCount = designAreas.filter(
+            designArea => designArea?.identifier && getUnderlyingColor(designArea.identifier)
+        ).length;
+        if (
+            !unifiedBorderByIdentifier ||
+            (sampledCount > 0 && unifiedBorderByIdentifier.size < sampledCount)
+        ) {
+            unifiedBorderByIdentifier = computeUnifiedContrastBorders(getUnderlyingColor, designAreas);
+        }
+        return unifiedBorderByIdentifier;
+    };
+
+    return designArea => {
+        const identifier = designArea && designArea.identifier;
+        const unified = getUnifiedBorderByIdentifier();
+
+        if (unified && identifier && unified.has(identifier)) {
+            return unified.get(identifier);
+        }
+
+        const average = getUnderlyingColor(identifier);
+        return average ? getBorderColorForAverage(average, mode) : fallbackColor;
+    };
 };