redhotmagma-visualization 1.57.6 → 1.57.8

package/Three/Three2D.js

@@ -34,7 +34,7 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 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); }
-import { BackSide, Box3, CylinderGeometry, Group, ImageLoader, Mesh, MeshBasicMaterial, NearestFilter, LinearFilter, OrthographicCamera, PlaneGeometry, Texture, Vector2, Vector3, WebGLRenderer, BufferGeometry, Float32BufferAttribute, DoubleSide, LinearSRGBColorSpace } from "three";
+import { BackSide, Box3, CylinderGeometry, Group, ImageLoader, Matrix3, Mesh, MeshBasicMaterial, NearestFilter, LinearFilter, OrthographicCamera, PlaneGeometry, Texture, Vector2, Vector3, WebGLRenderer, BufferGeometry, Float32BufferAttribute, DoubleSide, LinearSRGBColorSpace } from "three";
 import TWEEN from "@tweenjs/tween.js";
 import get from "lodash/get";
 import first from "lodash/first";
@@ -50,6 +50,8 @@ import { createMouseWheelEventListener, createPointerMoveEventListener } from ".
 import { EventTypes, Numeric } from "../Constants";
 import { createTextureBuilder, optimizeSizeToTexture } from "../Utils/TextureBuilder/createTextureBuilder";
 import { getDesignAreaCanvasSize } from "../Utils/DesignArea/getDesignAreaCanvasSize";
+import { sampleRingAverage } from "../Utils/DesignArea/sampleBorderRingColor";
+import { buildVisiblePaths, getUvBoundaryIndices } from "../Utils/DesignArea/getUvBoundaryPaths";
 import { disposeMaterial } from "../Utils/disposeMaterial";
 import { createImageRepository } from "../Utils/createImageRepository";
 import { createCache } from "../Utils/createCache";
@@ -76,6 +78,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
     _classCallCheck(this, Three2D);
     _this = _super.call(this, cfg);
     _defineProperty(_assertThisInitialized(_this), "_materialMap", new Map());
+    _defineProperty(_assertThisInitialized(_this), "_underlyingColorCache", new Map());
     _defineProperty(_assertThisInitialized(_this), "_designAreaList", []);
     _defineProperty(_assertThisInitialized(_this), "_currentDesignView", null);
     _defineProperty(_assertThisInitialized(_this), "_currentDesignArea", null);
@@ -808,6 +811,105 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
         width: width,
         height: height
       };
+      // the sampled colors belong to the previous product image
+      this._underlyingColorCache.clear();
+    }
+
+    /**
+     * Reads the average color of the product image underneath the border of the given design area.
+     * It is used to derive a border color that stays visible on the current product image.
+     * Returns null when it cannot be determined, so the caller can fall back to a static color.
+     * @param {string} designAreaIdentifier
+     * @returns {{r: number, g: number, b: number}|null}
+     */
+  }, {
+    key: "getDesignAreaUnderlyingColor",
+    value: function getDesignAreaUnderlyingColor(designAreaIdentifier) {
+      var _this$_model2;
+      var image = (_this$_model2 = this._model) === null || _this$_model2 === void 0 || (_this$_model2 = _this$_model2.material) === null || _this$_model2 === void 0 || (_this$_model2 = _this$_model2.map) === null || _this$_model2 === void 0 ? void 0 : _this$_model2.image;
+      if (!image || !this._size.width || !this._size.height) {
+        return null;
+      }
+      try {
+        // getModelPath() covers the view and the material variant, so every product image
+        // that can be shown gets its own entry
+        var cacheKey = "".concat(this.getModelPath(), "|").concat(designAreaIdentifier);
+        if (this._underlyingColorCache.has(cacheKey)) {
+          return this._underlyingColorCache.get(cacheKey);
+        }
+        var color = this._sampleDesignAreaUnderlyingColor(designAreaIdentifier, image);
+        this._underlyingColorCache.set(cacheKey, color);
+        return color;
+      } catch (e) {
+        // this runs while drawing, so never let it break the render
+        // eslint-disable-next-line no-console
+        console.warn("Could not determine the color underneath the design area border.", e);
+        return null;
+      }
+    }
+  }, {
+    key: "_sampleDesignAreaUnderlyingColor",
+    value: function _sampleDesignAreaUnderlyingColor(designAreaIdentifier, image) {
+      var _geometry$attributes,
+        _this7 = this;
+      var mesh = this.findAreaObjectByName(designAreaIdentifier);
+      var geometry = mesh === null || mesh === void 0 ? void 0 : mesh.geometry;
+      if (!(geometry !== null && geometry !== void 0 && (_geometry$attributes = geometry.attributes) !== null && _geometry$attributes !== void 0 && _geometry$attributes.position)) {
+        return null;
+      }
+      var indices = getUvBoundaryIndices(geometry);
+      if (!indices.length) {
+        return null;
+      }
+      mesh.updateWorldMatrix(true, false);
+      var position = geometry.attributes.position;
+      var normal = geometry.attributes.normal;
+
+      // with optimizeProductImage the texture holds a resized copy, while the scene still uses the
+      // original image size, so the mesh has to be projected into the pixel space of the source
+      var scaling = image.width / this._size.width;
+      var point = new Vector3();
+      var project = function project(index) {
+        point.fromBufferAttribute(position, index).applyMatrix4(mesh.matrixWorld);
+        return {
+          // the product plane is centered in the scene and three.js has the y axis pointing up,
+          // while the image pixels are counted downwards from the top left corner
+          x: (_this7._size.width / 2 + point.x) * scaling,
+          y: (_this7._size.height / 2 - point.y) * scaling
+        };
+      };
+      var paths = buildVisiblePaths(indices, this._createVisibilityCheck(mesh, normal), project);
+      return sampleRingAverage(image, paths);
+    }
+
+    /**
+     * Back facing parts of a design area are culled by the renderer, so the border is not drawn there
+     * and must not be sampled either. A rotated cylinder that spans a wide angle turns part of its
+     * own border away from the camera.
+     * @param {import("three").Mesh} mesh
+     * @param {import("three").BufferAttribute} normal
+     * @returns {function(number): boolean}
+     */
+  }, {
+    key: "_createVisibilityCheck",
+    value: function _createVisibilityCheck(mesh, normal) {
+      var _mesh$material, _mesh$material2;
+      // planes are rendered with DoubleSide, so both of their faces are visible
+      if (!normal || ((_mesh$material = mesh.material) === null || _mesh$material === void 0 ? void 0 : _mesh$material.side) === DoubleSide) {
+        return function () {
+          return true;
+        };
+      }
+
+      // the camera looks along -z, so a face pointing towards +z faces the camera,
+      // unless the material was flipped to the back side by the "inside" flag
+      var towardsCamera = ((_mesh$material2 = mesh.material) === null || _mesh$material2 === void 0 ? void 0 : _mesh$material2.side) === BackSide ? -1 : 1;
+      var normalMatrix = new Matrix3().getNormalMatrix(mesh.matrixWorld);
+      var direction = new Vector3();
+      return function (index) {
+        direction.fromBufferAttribute(normal, index).applyMatrix3(normalMatrix);
+        return direction.z * towardsCamera > 0;
+      };
     }
   }, {
     key: "getOffset",
@@ -866,7 +968,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
   }, {
     key: "moveCamera",
     value: function moveCamera(position, zoom) {
-      var _this7 = this;
+      var _this8 = this;
       var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var viewOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       this.cleanUpCameraAnimations();
@@ -875,7 +977,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
         new TWEEN.Tween(this.camera, this.cameraTweenGroup).to({
           zoom: zoom
         }, duration.zoom || 1000).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function () {
-          return _this7.camera.updateProjectionMatrix();
+          return _this8.camera.updateProjectionMatrix();
         }).onComplete(animationDef.createResolver()).start();
       }
       if (position) {
@@ -892,7 +994,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
         new TWEEN.Tween(currentViewOffset, this.cameraTweenGroup).to(viewOffset, duration.viewOffset || 1000).easing(TWEEN.Easing.Quadratic.Out).onComplete(animationDef.createResolver()).start();
       }
       animationDef.then(function () {
-        return _this7.stopAnimation("camera");
+        return _this8.stopAnimation("camera");
       });
       this.startAnimation("camera");
     }
@@ -921,8 +1023,11 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
   }, {
     key: "createObjectsForDesignAreas",
     value: function createObjectsForDesignAreas(designAreas) {
-      var _this8 = this;
+      var _this9 = this;
       var containerGroup = new Group();
+
+      // the design area geometry is rebuilt here, so previously sampled colors may be outdated
+      this._underlyingColorCache.clear();
       var EPS = 10;
       var index = 1;
       designAreas.forEach(function (designArea) {
@@ -931,7 +1036,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
         try {
           geometry = createBaseShapeGeometry(designArea);
         } catch (e) {
-          _this8.observable.dispatch(EventTypes.Error, e);
+          _this9.observable.dispatch(EventTypes.Error, e);
           throw e;
         }
         var _x$y$z$rotation$baseS = _objectSpread({
@@ -948,7 +1053,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
           y = _x$y$z$rotation$baseS.y,
           z = _x$y$z$rotation$baseS.z,
           rotation = _x$y$z$rotation$baseS.rotation;
-        var mat = _this8.createCanvasMaterial(designArea);
+        var mat = _this9.createCanvasMaterial(designArea);
         var obj = new Mesh(geometry, mat);
         Object.assign(obj.rotation, rotation);
         obj.position.x = x;
@@ -1227,7 +1332,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
     key: "getScreenshots",
     value: function () {
       var _getScreenshots = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14(callback) {
-        var _this9 = this;
+        var _this0 = this;
         var _ref0,
           designViewList,
           areaList,
@@ -1283,16 +1388,16 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
                   return _regeneratorRuntime().wrap(function _callee12$(_context12) {
                     while (1) switch (_context12.prev = _context12.next) {
                       case 0:
-                        _this9._screenshotCamera = null;
-                        _this9._screenshottingInProgress = false;
-                        _this9._materialVariantPath = origVariantPath;
-                        _this9._currentDesignView = null;
+                        _this0._screenshotCamera = null;
+                        _this0._screenshottingInProgress = false;
+                        _this0._materialVariantPath = origVariantPath;
+                        _this0._currentDesignView = null;
                         _context12.next = 6;
-                        return _this9.setView(origDesignView);
+                        return _this0.setView(origDesignView);
                       case 6:
-                        _this9.renderer.setSize(origSize.width, origSize.height);
-                        _this9.renderer.setPixelRatio(origPixelRatio);
-                        _this9.render();
+                        _this0.renderer.setSize(origSize.width, origSize.height);
+                        _this0.renderer.setPixelRatio(origPixelRatio);
+                        _this0.render();
                         removeTempOverlay();
                       case 10:
                       case "end":
@@ -1319,8 +1424,8 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
                     case 0:
                       variant = _step.value;
                       data = {};
-                      _this9.setMaterialVariantPath(variant);
-                      _this9._currentDesignView = null;
+                      _this0.setMaterialVariantPath(variant);
+                      _this0._currentDesignView = null;
                       _iterator2 = _createForOfIteratorHelper(views);
                       _context15.prev = 5;
                       _loop2 = /*#__PURE__*/_regeneratorRuntime().mark(function _loop2() {
@@ -1329,7 +1434,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
                           while (1) switch (_context14.prev = _context14.next) {
                             case 0:
                               view = _step2.value;
-                              if (!_this9._abortScreenshotting) {
+                              if (!_this0._abortScreenshotting) {
                                 _context14.next = 7;
                                 break;
                               }
@@ -1348,35 +1453,35 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
                               _context14.next = 10;
                               return new Promise(function (resolve) {
                                 window.setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
-                                  var _this9$getScreenshotS, width, height;
+                                  var _this0$getScreenshotS, width, height;
                                   return _regeneratorRuntime().wrap(function _callee13$(_context13) {
                                     while (1) switch (_context13.prev = _context13.next) {
                                       case 0:
                                         _context13.next = 2;
-                                        return _this9.updateView(view, {
+                                        return _this0.updateView(view, {
                                           forceUpdate: false,
                                           updateMaterial: false
                                         });
                                       case 2:
-                                        _this9$getScreenshotS = _this9.getScreenshotSize(size), width = _this9$getScreenshotS.width, height = _this9$getScreenshotS.height;
+                                        _this0$getScreenshotS = _this0.getScreenshotSize(size), width = _this0$getScreenshotS.width, height = _this0$getScreenshotS.height;
                                         setOrthographicCameraSize(camera, width, height);
-                                        _this9.renderer.setSize(width, height);
-                                        _this9.renderer.setPixelRatio(1);
-                                        camera.zoom = _this9.getZoomForSize({
+                                        _this0.renderer.setSize(width, height);
+                                        _this0.renderer.setPixelRatio(1);
+                                        camera.zoom = _this0.getZoomForSize({
                                           width: width,
                                           height: height
                                         });
                                         camera.updateProjectionMatrix();
                                         _context13.next = 10;
-                                        return _this9.dispatchMaterialUpdateEvent({
+                                        return _this0.dispatchMaterialUpdateEvent({
                                           screenshot: true
                                         });
                                       case 10:
                                         // set size and pixel ratio right before rendering, to make sure they are correct
-                                        _this9.renderer.setSize(width, height);
-                                        _this9.renderer.setPixelRatio(1);
-                                        _this9.renderer.render(_this9.scene, camera);
-                                        data[view.identifier] = _this9.renderer.domElement.toDataURL();
+                                        _this0.renderer.setSize(width, height);
+                                        _this0.renderer.setPixelRatio(1);
+                                        _this0.renderer.render(_this0.scene, camera);
+                                        data[view.identifier] = _this0.renderer.domElement.toDataURL();
                                         resolve();
                                       case 15:
                                       case "end":

package/Utils/DesignArea/getUvBoundaryPaths.js

@@ -0,0 +1,125 @@
+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; }
+var EPSILON = 1e-4;
+
+/**
+ * Collects the vertices on the outer edge of a uv mapped geometry, in perimeter order.
+ * The design area border is stroked along the edge of the texture, so these are the vertices the
+ * border runs through. It works for any geometry whose uv attribute spans the full 0..1 range,
+ * which covers the plane, the control point grid and the open ended cylinder.
+ * @param {import("three").BufferGeometry} geometry
+ * @returns {number[]} Vertex indices, without a repeated closing vertex
+ */
+export var getUvBoundaryIndices = function getUvBoundaryIndices(geometry) {
+  var _geometry$attributes;
+  var uv = geometry === null || geometry === void 0 || (_geometry$attributes = geometry.attributes) === null || _geometry$attributes === void 0 ? void 0 : _geometry$attributes.uv;
+  if (!uv || !uv.count) {
+    return [];
+  }
+  var us = [];
+  var vs = [];
+  var uMin = Infinity;
+  var uMax = -Infinity;
+  var vMin = Infinity;
+  var vMax = -Infinity;
+  // a cylinder gets one segment per pixel of arc length, so this can be a few thousand vertices,
+  // which is why the extremes are collected in a loop rather than by spreading into Math.min
+  for (var i = 0; i < uv.count; i++) {
+    var u = uv.getX(i);
+    var v = uv.getY(i);
+    us.push(u);
+    vs.push(v);
+    uMin = Math.min(uMin, u);
+    uMax = Math.max(uMax, u);
+    vMin = Math.min(vMin, v);
+    vMax = Math.max(vMax, v);
+  }
+
+  // a geometry without an extent in one direction has no perimeter to walk
+  if (uMax - uMin < EPSILON || vMax - vMin < EPSILON) {
+    return [];
+  }
+  var on = function on(value, target) {
+    return Math.abs(value - target) < EPSILON;
+  };
+  var collect = function collect(isOnEdge, sortBy, descending) {
+    return us.map(function (u, i) {
+      return i;
+    }).filter(function (i) {
+      return isOnEdge(us[i], vs[i]);
+    }).sort(function (a, b) {
+      return descending ? sortBy[b] - sortBy[a] : sortBy[a] - sortBy[b];
+    });
+  };
+
+  // walk the four edges so that the result is a continuous ring
+  var ring = [].concat(_toConsumableArray(collect(function (u, v) {
+    return on(v, vMin);
+  }, us, false)), _toConsumableArray(collect(function (u) {
+    return on(u, uMax);
+  }, vs, false)), _toConsumableArray(collect(function (u, v) {
+    return on(v, vMax);
+  }, us, true)), _toConsumableArray(collect(function (u) {
+    return on(u, uMin);
+  }, vs, true)));
+
+  // the corners are part of two edges each, and the last vertex closes onto the first one
+  var deduped = ring.filter(function (index, i) {
+    return index !== ring[i - 1];
+  });
+  while (deduped.length > 1 && deduped[deduped.length - 1] === deduped[0]) {
+    deduped.pop();
+  }
+  return deduped;
+};
+
+/**
+ * Turns the boundary ring into the paths that are actually drawn on screen.
+ * Vertices facing away from the camera are culled by the renderer, so the border is not visible
+ * there and those parts must not be sampled either. The ring is treated as cyclic, so a visible
+ * run may wrap around its end.
+ * @param {number[]} indices The boundary ring, as returned by getUvBoundaryIndices
+ * @param {function(number): boolean} isVisible
+ * @param {function(number): {x: number, y: number}} project Maps a vertex index to a 2D point
+ * @returns {Array<Array<{x: number, y: number}>>} Open polylines, or one closed loop
+ */
+export var buildVisiblePaths = function buildVisiblePaths(indices, isVisible, project) {
+  if (indices.length < 2) {
+    return [];
+  }
+  var visible = indices.map(isVisible);
+  if (visible.every(Boolean)) {
+    // nothing is culled, so the border is a closed loop
+    var loop = indices.map(project);
+    return [[].concat(_toConsumableArray(loop), [loop[0]])];
+  }
+  if (!visible.some(Boolean)) {
+    return [];
+  }
+
+  // start right after a culled vertex, so that no visible run is split across the array end
+  var offset = visible.indexOf(false);
+  var paths = [];
+  var current = null;
+  for (var i = 1; i <= indices.length; i++) {
+    var at = (offset + i) % indices.length;
+    if (!visible[at]) {
+      current = null;
+      continue;
+    }
+    if (!current) {
+      current = [];
+      paths.push(current);
+    }
+    current.push(project(indices[at]));
+  }
+
+  // a single point has no segment to sample along
+  return paths.filter(function (path) {
+    return path.length > 1;
+  });
+};

package/Utils/DesignArea/sampleBorderRingColor.js

@@ -0,0 +1,251 @@
+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; }
+import { createWorkingCanvas } from "../createCanvas";
+
+/**
+ * Default size of the sampled band, relative to the shorter side of the sampled paths.
+ * @type {number}
+ */
+var RING_WIDTH_RATIO = 0.03;
+var RING_WIDTH_MIN = 4;
+var SAMPLE_STEP = 2;
+/**
+ * If the sampled band is mostly transparent there is no meaningful "underlying color",
+ * so the caller should keep its static color instead.
+ * @type {number}
+ */
+var MIN_MEAN_ALPHA = 0.1;
+
+/**
+ * @param {Array<Array<{x: number, y: number}>>} paths
+ * @returns {{x: number, y: number, width: number, height: number}|null}
+ */
+var getPathsBounds = function getPathsBounds(paths) {
+  var minX = Infinity;
+  var minY = Infinity;
+  var maxX = -Infinity;
+  var maxY = -Infinity;
+  var _iterator = _createForOfIteratorHelper(paths),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var path = _step.value;
+      var _iterator2 = _createForOfIteratorHelper(path),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var point = _step2.value;
+          minX = Math.min(minX, point.x);
+          minY = Math.min(minY, point.y);
+          maxX = Math.max(maxX, point.x);
+          maxY = Math.max(maxY, point.y);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (minX > maxX) {
+    return null;
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+};
+var getRingWidth = function getRingWidth(paths, ringWidth) {
+  if (ringWidth) {
+    return ringWidth;
+  }
+  var bounds = getPathsBounds(paths);
+  var shorterSide = bounds ? Math.min(bounds.width, bounds.height) : 0;
+  return Math.max(RING_WIDTH_MIN, RING_WIDTH_RATIO * shorterSide);
+};
+
+/**
+ * Walks every segment of the given paths and calls back with the sample points of the band that is
+ * centered on it, so the callback sees the pixels just inside and just outside the border.
+ * The band is symmetric around the segment, which is why the winding direction does not matter.
+ * @param {Array<Array<{x: number, y: number}>>} paths
+ * @param {number} ringWidth
+ * @param {number} sampleStep
+ * @param {function(number, number): void} cb Called with the x/y of every sample point
+ */
+var forEachRingPoint = function forEachRingPoint(paths, ringWidth, sampleStep, cb) {
+  var half = ringWidth / 2;
+  // the offsets across the band, from the inner to the outer edge
+  var offsets = [];
+  for (var o = -half; o <= half; o += sampleStep) {
+    offsets.push(o);
+  }
+  if (!offsets.length) {
+    offsets.push(0);
+  }
+  var _iterator3 = _createForOfIteratorHelper(paths),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var path = _step3.value;
+      for (var i = 1; i < path.length; i++) {
+        var from = path[i - 1];
+        var to = path[i];
+        var dx = to.x - from.x;
+        var dy = to.y - from.y;
+        var length = Math.sqrt(dx * dx + dy * dy);
+        if (!length) {
+          continue;
+        }
+        // the unit normal of the segment, the direction the band extends into
+        var nx = -dy / length;
+        var ny = dx / length;
+        var steps = Math.max(1, Math.ceil(length / sampleStep));
+        for (var s = 0; s <= steps; s++) {
+          var t = s / steps;
+          var x = from.x + dx * t;
+          var y = from.y + dy * t;
+          var _iterator4 = _createForOfIteratorHelper(offsets),
+            _step4;
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var _o = _step4.value;
+              cb(x + nx * _o, y + ny * _o);
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+};
+
+/**
+ * Averages the pixels of the border band over the given image data.
+ * The channels are weighted by alpha, so semi transparent pixels contribute proportionally.
+ * This is kept free of any canvas access so it can be tested without a DOM canvas implementation.
+ * @param {{width: number, height: number, data: Uint8ClampedArray|number[]}} imageData
+ * @param {{x: number, y: number}} origin Position of the image data within the source image
+ * @param {Array<Array<{x: number, y: number}>>} paths The border, in source image pixels
+ * @param {{[ringWidth]: number, [sampleStep]: number, [minAlpha]: number}} [options]
+ * @returns {{r: number, g: number, b: number}|null} null if there is nothing meaningful to sample
+ */
+export var averageRingColorFromImageData = function averageRingColorFromImageData(imageData, origin, paths) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var _options$sampleStep = options.sampleStep,
+    sampleStep = _options$sampleStep === void 0 ? SAMPLE_STEP : _options$sampleStep,
+    _options$minAlpha = options.minAlpha,
+    minAlpha = _options$minAlpha === void 0 ? MIN_MEAN_ALPHA : _options$minAlpha;
+  var ringWidth = getRingWidth(paths, options.ringWidth);
+  var width = imageData.width,
+    height = imageData.height,
+    data = imageData.data;
+  var wr = 0;
+  var wg = 0;
+  var wb = 0;
+  var wa = 0;
+  var count = 0;
+  forEachRingPoint(paths, ringWidth, sampleStep, function (px, py) {
+    var x = Math.round(px - origin.x);
+    var y = Math.round(py - origin.y);
+    if (x < 0 || y < 0 || x >= width || y >= height) {
+      return;
+    }
+    var i = (y * width + x) * 4;
+    var a = data[i + 3];
+    wr += data[i] * a;
+    wg += data[i + 1] * a;
+    wb += data[i + 2] * a;
+    wa += a;
+    count++;
+  });
+  if (!count || wa / (count * 255) < minAlpha) {
+    return null;
+  }
+  return {
+    r: Math.round(wr / wa),
+    g: Math.round(wg / wa),
+    b: Math.round(wb / wa)
+  };
+};
+
+/**
+ * Bounding box of the given paths, grown by half the band width and clamped to the source.
+ * @param {{width: number, height: number}} source
+ * @param {Array<Array<{x: number, y: number}>>} paths
+ * @param {number} ringWidth
+ * @returns {{x: number, y: number, width: number, height: number}}
+ */
+export var getSampleBounds = function getSampleBounds(source, paths, ringWidth) {
+  var bounds = getPathsBounds(paths);
+  if (!bounds) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+  }
+  var half = ringWidth / 2;
+  var x = Math.max(0, Math.floor(bounds.x - half));
+  var y = Math.max(0, Math.floor(bounds.y - half));
+  var right = Math.min(source.width, Math.ceil(bounds.x + bounds.width + half));
+  var bottom = Math.min(source.height, Math.ceil(bounds.y + bounds.height + half));
+  return {
+    x: x,
+    y: y,
+    width: right - x,
+    height: bottom - y
+  };
+};
+
+/**
+ * Reads the average color of the band that the design area border is drawn on.
+ * @param {HTMLImageElement|HTMLCanvasElement} source The product image, in its own pixel space
+ * @param {Array<Array<{x: number, y: number}>>} paths The border, in the pixel space of the source.
+ *        Every path is a polyline, a closed one repeats its first point at the end.
+ * @param {{[ringWidth]: number, [sampleStep]: number, [minAlpha]: number}} [options]
+ * @returns {{r: number, g: number, b: number}|null} null if the color could not be determined
+ */
+export var sampleRingAverage = function sampleRingAverage(source, paths) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!source || !source.width || !source.height || !paths || !paths.length) {
+    return null;
+  }
+  var bounds = getSampleBounds(source, paths, getRingWidth(paths, options.ringWidth));
+  if (bounds.width <= 0 || bounds.height <= 0) {
+    return null;
+  }
+  var _createWorkingCanvas = createWorkingCanvas(source, true),
+    _createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 2),
+    ctx = _createWorkingCanvas2[1];
+  var imageData;
+  try {
+    imageData = ctx.getImageData(bounds.x, bounds.y, bounds.width, bounds.height);
+  } catch (e) {
+    // a cross origin image without the proper headers taints the canvas, in that case the
+    // caller has to fall back to its static color
+    // eslint-disable-next-line no-console
+    console.warn("Could not read the product image pixels to derive the border color.", e);
+    return null;
+  }
+  return averageRingColorFromImageData(imageData, bounds, paths, options);
+};