redhotmagma-visualization 1.57.5 → 1.57.7

package/Utils/TextureBuilder/createTextureBuilder.js

@@ -1,6 +1,7 @@
 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); }
 var _excluded = ["scaling"],
-  _excluded2 = ["x", "y", "width", "height"];
+  _excluded2 = ["lineWidth", "borderColor"],
+  _excluded3 = ["x", "y", "width", "height"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -194,9 +195,17 @@ export var createTextureBuilder = function createTextureBuilder(textureImage) {
         _configObject$highlig = configObject.highlightFunction,
         highlightFunction = _configObject$highlig === void 0 ? highlightArea : _configObject$highlig;
       var _highlight$lineWidth = highlight.lineWidth,
-        lineWidth = _highlight$lineWidth === void 0 ? 2 : _highlight$lineWidth;
-      highlightFunction(ctx, size, _objectSpread(_objectSpread({}, highlight), {}, {
-        lineWidth: Math.ceil(lineWidth / currentZoom)
+        lineWidth = _highlight$lineWidth === void 0 ? 2 : _highlight$lineWidth,
+        borderColor = highlight.borderColor,
+        restHighlight = _objectWithoutProperties(highlight, _excluded2);
+
+      // the border color may be given as a function to resolve it per design area,
+      // e.g. to keep the border visible on the product image underneath
+      var resolvedBorderColor = typeof borderColor === "function" ? borderColor(designArea) : borderColor;
+      highlightFunction(ctx, size, _objectSpread(_objectSpread(_objectSpread({}, restHighlight), resolvedBorderColor === undefined ? {} : {
+        borderColor: resolvedBorderColor
+      }), {}, {
+        lineWidth: getHighlightLineWidth(lineWidth, scaling, currentZoom)
       }));
       ctx.restore();
     };
@@ -289,6 +298,23 @@ export var getTransformProps = function getTransformProps() {
     inside: inside
   });
 };
+
+/**
+ * Converts the configured border width into the texture pixels the border is stroked with.
+ * The design area covers scaling texture pixels per unit, and one unit is drawn as currentZoom
+ * screen pixels, so one texture pixel ends up as currentZoom / scaling screen pixels. Without this
+ * conversion the border on screen would come out thinner or thicker depending on the power of two
+ * texture size that the design area happens to get.
+ * @param {number} lineWidth The configured width, in screen pixels
+ * @param {number} [scaling] Texture pixels per design area unit
+ * @param {number} [currentZoom]
+ * @returns {number} The width in texture pixels, at least one so the border stays visible
+ */
+export var getHighlightLineWidth = function getHighlightLineWidth(lineWidth) {
+  var scaling = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var currentZoom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return Math.max(1, lineWidth * scaling / currentZoom);
+};
 export var highlightArea = function highlightArea(ctx, size) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var width = size.width,
@@ -314,7 +340,7 @@ export var getPositionWithPadding = function getPositionWithPadding(_ref5, paddi
     y = _ref5.y,
     width = _ref5.width,
     height = _ref5.height,
-    otherProps = _objectWithoutProperties(_ref5, _excluded2);
+    otherProps = _objectWithoutProperties(_ref5, _excluded3);
   return _objectSpread(_objectSpread({}, otherProps), {}, {
     x: x - padding,
     y: y - padding,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.57.5",
+  "version": "1.57.7",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.57.5",
+    "@configuratorware/scripts": "1.57.7",
     "@tweenjs/tween.js": "^17.6.0",
     "console-polyfill": "^0.3.0",
     "css-element-queries": "^1.2.3",

package/src/Three/Three2D.js

@@ -4,6 +4,7 @@ import {
   CylinderGeometry,
   Group,
   ImageLoader,
+  Matrix3,
   Mesh,
   MeshBasicMaterial,
   NearestFilter,
@@ -41,6 +42,8 @@ import {
   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";
@@ -61,6 +64,7 @@ export const allowZooming = (zoom, originalZoom, minZoom, maxZoom) =>
 
 export class Three2D extends ThreeBase {
   _materialMap = new Map();
+  _underlyingColorCache = new Map();
   _designAreaList = [];
   _currentDesignView = null;
   _currentDesignArea = null;
@@ -522,6 +526,102 @@ export class Three2D extends ThreeBase {
       width,
       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}
+   */
+  getDesignAreaUnderlyingColor(designAreaIdentifier) {
+    const image = this._model?.material?.map?.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
+      const cacheKey = `${this.getModelPath()}|${designAreaIdentifier}`;
+      if (this._underlyingColorCache.has(cacheKey)) {
+        return this._underlyingColorCache.get(cacheKey);
+      }
+
+      const 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;
+    }
+  }
+
+  _sampleDesignAreaUnderlyingColor(designAreaIdentifier, image) {
+    const mesh = this.findAreaObjectByName(designAreaIdentifier);
+    const geometry = mesh?.geometry;
+    if (!geometry?.attributes?.position) {
+      return null;
+    }
+
+    const indices = getUvBoundaryIndices(geometry);
+    if (!indices.length) {
+      return null;
+    }
+
+    mesh.updateWorldMatrix(true, false);
+    const position = geometry.attributes.position;
+    const 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
+    const scaling = image.width / this._size.width;
+    const point = new Vector3();
+
+    const 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: (this._size.width / 2 + point.x) * scaling,
+        y: (this._size.height / 2 - point.y) * scaling,
+      };
+    };
+
+    const 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}
+   */
+  _createVisibilityCheck(mesh, normal) {
+    // planes are rendered with DoubleSide, so both of their faces are visible
+    if (!normal || mesh.material?.side === DoubleSide) {
+      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
+    const towardsCamera = mesh.material?.side === BackSide ? -1 : 1;
+    const normalMatrix = new Matrix3().getNormalMatrix(mesh.matrixWorld);
+    const direction = new Vector3();
+
+    return index => {
+      direction.fromBufferAttribute(normal, index).applyMatrix3(normalMatrix);
+      return direction.z * towardsCamera > 0;
+    };
   }
 
   getOffset() {
@@ -625,6 +725,9 @@ export class Three2D extends ThreeBase {
   createObjectsForDesignAreas(designAreas) {
     const containerGroup = new Group();
 
+    // the design area geometry is rebuilt here, so previously sampled colors may be outdated
+    this._underlyingColorCache.clear();
+
     const EPS = 10;
     let index = 1;
 

package/src/Utils/DesignArea/__tests__/getUvBoundaryPaths.test.js

@@ -0,0 +1,191 @@
+import {
+  BufferGeometry,
+  CylinderGeometry,
+  Float32BufferAttribute,
+  Matrix3,
+  Mesh,
+  MeshBasicMaterial,
+  PlaneGeometry,
+  Vector3,
+} from "three";
+import { buildVisiblePaths, getUvBoundaryIndices } from "../getUvBoundaryPaths";
+
+/**
+ * Builds the same kind of uv grid the control point design areas use: rows of gridSize + 1
+ * vertices, with uv going from 0 to 1 in both directions.
+ * @param {number} gridSize
+ */
+const createUvGrid = gridSize => {
+  const uvs = [];
+  const vertices = [];
+  for (let i = 0; i <= gridSize; i++) {
+    for (let j = 0; j <= gridSize; j++) {
+      uvs.push(j / gridSize, i / gridSize);
+      vertices.push(j, i, 0);
+    }
+  }
+  const geometry = new BufferGeometry();
+  geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
+  geometry.setAttribute("uv", new Float32BufferAttribute(uvs, 2));
+  return geometry;
+};
+
+const byIndex = index => ({ x: index, y: 0 });
+
+describe("getUvBoundaryIndices", () => {
+  test("returns the four corners of a plane in perimeter order", () => {
+    const geometry = new PlaneGeometry(10, 20, 1, 1);
+
+    expect(getUvBoundaryIndices(geometry)).toEqual([2, 3, 1, 0]);
+  });
+
+  test("the plane perimeter walks the corners without jumping across the shape", () => {
+    const geometry = new PlaneGeometry(10, 20, 1, 1);
+    const position = geometry.attributes.position;
+
+    const points = getUvBoundaryIndices(geometry).map(i => [position.getX(i), position.getY(i)]);
+
+    expect(points).toEqual([
+      [-5, -10],
+      [5, -10],
+      [5, 10],
+      [-5, 10],
+    ]);
+  });
+
+  test("returns only the outer vertices of a uv grid, in ring order", () => {
+    // a 3 x 3 grid, so index 4 is the interior vertex
+    expect(getUvBoundaryIndices(createUvGrid(2))).toEqual([0, 1, 2, 5, 8, 7, 6, 3]);
+  });
+
+  test("returns the full ring for a grid that has no interior vertices", () => {
+    const indices = getUvBoundaryIndices(createUvGrid(1));
+
+    expect(indices).toHaveLength(4);
+    expect(new Set(indices)).toEqual(new Set([0, 1, 2, 3]));
+  });
+
+  test("returns nothing without a uv attribute", () => {
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute([0, 0, 0, 1, 1, 0], 3));
+
+    expect(getUvBoundaryIndices(geometry)).toEqual([]);
+  });
+
+  test("returns nothing for a geometry without an extent in one direction", () => {
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute([0, 0, 0, 1, 0, 0], 3));
+    geometry.setAttribute("uv", new Float32BufferAttribute([0, 0, 1, 0], 2));
+
+    expect(getUvBoundaryIndices(geometry)).toEqual([]);
+  });
+});
+
+describe("buildVisiblePaths", () => {
+  const ring = [0, 1, 2, 5, 8, 7, 6, 3];
+
+  test("returns a single closed loop when everything is visible", () => {
+    const paths = buildVisiblePaths(ring, () => true, byIndex);
+
+    expect(paths).toHaveLength(1);
+    // the loop repeats its first point so the last segment is sampled too
+    expect(paths[0]).toHaveLength(ring.length + 1);
+    expect(paths[0][0]).toEqual(paths[0][paths[0].length - 1]);
+    expect(paths[0].slice(0, -1).map(p => p.x)).toEqual(ring);
+  });
+
+  test("returns nothing when everything is culled", () => {
+    expect(buildVisiblePaths(ring, () => false, byIndex)).toEqual([]);
+  });
+
+  test("returns one open polyline for a single culled run", () => {
+    // 2 and 5 are neighbours in the ring, so one continuous part stays visible
+    const culled = [2, 5];
+    const paths = buildVisiblePaths(ring, i => !culled.includes(i), byIndex);
+
+    expect(paths).toHaveLength(1);
+    expect(paths[0].map(p => p.x)).toEqual([8, 7, 6, 3, 0, 1]);
+  });
+
+  test("splits the ring into two polylines for two separate culled runs", () => {
+    const culled = [2, 6];
+    const paths = buildVisiblePaths(ring, i => !culled.includes(i), byIndex);
+
+    expect(paths).toHaveLength(2);
+    expect(paths.map(path => path.map(p => p.x))).toEqual([
+      [5, 8, 7],
+      [3, 0, 1],
+    ]);
+  });
+
+  test("drops runs that are too short to form a segment", () => {
+    // only index 8 stays visible, a single point has nothing to sample along
+    const paths = buildVisiblePaths(ring, i => i === 8, byIndex);
+
+    expect(paths).toEqual([]);
+  });
+
+  test("returns nothing for a degenerate ring", () => {
+    expect(buildVisiblePaths([], () => true, byIndex)).toEqual([]);
+    expect(buildVisiblePaths([3], () => true, byIndex)).toEqual([]);
+  });
+});
+
+describe("the sleeve of softshell_designer_2d", () => {
+  // baseShape of the sleeve design area on the front view, from demo_items/designer.json
+  const width = 173;
+  const height = 124;
+  const radius = 64;
+  const rotation = { x: 0.1213, y: 0.6705, z: 0.17792256549810162 };
+
+  const createSleeveMesh = () => {
+    const theta = Math.min(width / radius, 2 * Math.PI);
+    const geometry = new CylinderGeometry(
+      radius,
+      radius,
+      height,
+      Math.round(theta * radius),
+      1,
+      true,
+      -theta / 2,
+      theta
+    );
+    const mesh = new Mesh(geometry, new MeshBasicMaterial());
+    Object.assign(mesh.rotation, rotation);
+    mesh.updateWorldMatrix(true, false);
+    return mesh;
+  };
+
+  const isFacingCamera = mesh => {
+    const normalMatrix = new Matrix3().getNormalMatrix(mesh.matrixWorld);
+    const normal = mesh.geometry.attributes.normal;
+    const direction = new Vector3();
+    return index => {
+      direction.fromBufferAttribute(normal, index).applyMatrix3(normalMatrix);
+      return direction.z > 0;
+    };
+  };
+
+  test("the whole cylinder surface is on the uv boundary", () => {
+    const mesh = createSleeveMesh();
+
+    // the cylinder has a single height segment, so every vertex sits on the top or bottom edge
+    expect(getUvBoundaryIndices(mesh.geometry)).toHaveLength(
+      mesh.geometry.attributes.position.count
+    );
+  });
+
+  test("the part of the border that faces away from the camera is culled", () => {
+    const mesh = createSleeveMesh();
+    const indices = getUvBoundaryIndices(mesh.geometry);
+
+    const paths = buildVisiblePaths(indices, isFacingCamera(mesh), i => ({ x: i, y: 0 }));
+    const sampled = paths.reduce((sum, path) => sum + path.length, 0);
+
+    // the arc spans 155 degrees and the mesh is rotated by 38 degrees around y, so a part of it
+    // turns behind the silhouette and its border is never drawn
+    expect(paths.length).toBeGreaterThan(0);
+    expect(sampled).toBeGreaterThan(0);
+    expect(sampled).toBeLessThan(indices.length);
+  });
+});

package/src/Utils/DesignArea/__tests__/sampleBorderRingColor.test.js

@@ -0,0 +1,229 @@
+import { averageRingColorFromImageData, getSampleBounds } from "../sampleBorderRingColor";
+
+/**
+ * Builds an ImageData like object, filled by the given callback.
+ * @param {number} width
+ * @param {number} height
+ * @param {function(number, number): number[]} fill Returns [r, g, b, a] for an x/y position
+ */
+const createImageData = (width, height, fill) => {
+  const data = new Uint8ClampedArray(width * height * 4);
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const [r, g, b, a] = fill(x, y);
+      const i = (y * width + x) * 4;
+      data[i] = r;
+      data[i + 1] = g;
+      data[i + 2] = b;
+      data[i + 3] = a;
+    }
+  }
+  return { width, height, data };
+};
+
+const solid = (r, g, b, a = 255) => () => [r, g, b, a];
+const origin = { x: 0, y: 0 };
+
+/**
+ * Closed rectangular path, the shape the plane design areas produce.
+ */
+const rectPath = (cx, cy, width, height) => {
+  const hw = width / 2;
+  const hh = height / 2;
+  return [
+    [
+      { x: cx - hw, y: cy - hh },
+      { x: cx + hw, y: cy - hh },
+      { x: cx + hw, y: cy + hh },
+      { x: cx - hw, y: cy + hh },
+      { x: cx - hw, y: cy - hh },
+    ],
+  ];
+};
+
+describe("averageRingColorFromImageData", () => {
+  test("returns the color of a uniformly colored image", () => {
+    const imageData = createImageData(100, 100, solid(10, 20, 30));
+
+    expect(averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 40, 40))).toEqual({
+      r: 10,
+      g: 20,
+      b: 30,
+    });
+  });
+
+  test("averages a border that runs across a light and a dark region", () => {
+    // the left half is black, the right half is white
+    const imageData = createImageData(100, 100, x =>
+      x < 50 ? [0, 0, 0, 255] : [255, 255, 255, 255]
+    );
+
+    const color = averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 40, 40));
+
+    // the ring is symmetric around the split, so the average lands in the middle
+    expect(color.r).toBeGreaterThan(110);
+    expect(color.r).toBeLessThan(145);
+    expect(color.r).toBe(color.g);
+    expect(color.g).toBe(color.b);
+  });
+
+  test("ignores transparent pixels when averaging", () => {
+    // fully transparent on the left, opaque red on the right
+    const imageData = createImageData(100, 100, x => (x < 50 ? [0, 255, 0, 0] : [255, 0, 0, 255]));
+
+    expect(averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 40, 40))).toEqual({
+      r: 255,
+      g: 0,
+      b: 0,
+    });
+  });
+
+  test("returns null for a fully transparent region", () => {
+    const imageData = createImageData(100, 100, solid(255, 0, 0, 0));
+
+    expect(averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 40, 40))).toBeNull();
+  });
+
+  test("returns null when the region is mostly transparent", () => {
+    const imageData = createImageData(100, 100, solid(255, 0, 0, 20));
+
+    expect(averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 40, 40))).toBeNull();
+  });
+
+  test("returns null without any path to sample", () => {
+    const imageData = createImageData(100, 100, solid(10, 20, 30));
+
+    expect(averageRingColorFromImageData(imageData, origin, [])).toBeNull();
+  });
+
+  test("respects the origin of the image data within the source", () => {
+    // the image data covers the source starting at 40/40, and is red on its left half
+    const imageData = createImageData(40, 40, x => (x < 20 ? [255, 0, 0, 255] : [0, 0, 255, 255]));
+    // a design area fully inside the right (blue) half of that excerpt
+    const paths = rectPath(70, 60, 12, 12);
+
+    expect(averageRingColorFromImageData(imageData, { x: 40, y: 40 }, paths)).toEqual({
+      r: 0,
+      g: 0,
+      b: 255,
+    });
+  });
+
+  test("samples the rotated footprint of the design area", () => {
+    // red outside of the horizontal band between y 40 and y 60, white inside
+    const imageData = createImageData(100, 100, (x, y) =>
+      y < 40 || y > 60 ? [255, 0, 0, 255] : [255, 255, 255, 255]
+    );
+    // 40 x 10 area in the center stays inside the white band
+    expect(averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 40, 10))).toEqual({
+      r: 255,
+      g: 255,
+      b: 255,
+    });
+
+    // the same area rotated by 90 degrees becomes 10 x 40 and reaches into the red region
+    const rotated = averageRingColorFromImageData(imageData, origin, rectPath(50, 50, 10, 40));
+    expect(rotated.r).toBe(255);
+    expect(rotated.g).toBeLessThan(255);
+  });
+
+  test("samples along a skewed quadrilateral", () => {
+    // white on the left of the diagonal, blue on the right
+    const imageData = createImageData(100, 100, (x, y) =>
+      x > y ? [0, 0, 255, 255] : [255, 255, 255, 255]
+    );
+    // a quad whose edges follow the diagonal, so it sits almost entirely in the blue half
+    const paths = [
+      [
+        { x: 30, y: 20 },
+        { x: 80, y: 20 },
+        { x: 80, y: 70 },
+        { x: 30, y: 20 },
+      ],
+    ];
+
+    const color = averageRingColorFromImageData(imageData, origin, paths);
+    expect(color.b).toBe(255);
+    expect(color.r).toBeLessThan(180);
+  });
+
+  test("samples every given path", () => {
+    // left half red, right half blue
+    const imageData = createImageData(100, 100, x =>
+      x < 50 ? [255, 0, 0, 255] : [0, 0, 255, 255]
+    );
+    const left = [
+      [
+        { x: 10, y: 40 },
+        { x: 30, y: 40 },
+      ],
+    ];
+    const right = [
+      [
+        { x: 70, y: 40 },
+        { x: 90, y: 40 },
+      ],
+    ];
+
+    expect(averageRingColorFromImageData(imageData, origin, left)).toEqual({ r: 255, g: 0, b: 0 });
+    expect(averageRingColorFromImageData(imageData, origin, right)).toEqual({ r: 0, g: 0, b: 255 });
+
+    // both open polylines together average to half red, half blue
+    const both = averageRingColorFromImageData(imageData, origin, [...left, ...right]);
+    expect(both.r).toBeGreaterThan(100);
+    expect(both.b).toBeGreaterThan(100);
+  });
+
+  test("skips sample points outside of the image data", () => {
+    const imageData = createImageData(100, 100, solid(0, 128, 0));
+    // the design area reaches beyond the top left corner of the image
+    const paths = rectPath(10, 10, 60, 60);
+
+    expect(averageRingColorFromImageData(imageData, origin, paths)).toEqual({
+      r: 0,
+      g: 128,
+      b: 0,
+    });
+  });
+});
+
+describe("getSampleBounds", () => {
+  const source = { width: 100, height: 100 };
+
+  test("covers the paths grown by half the ring width", () => {
+    expect(getSampleBounds(source, rectPath(50, 50, 40, 20), 4)).toEqual({
+      x: 28,
+      y: 38,
+      width: 44,
+      height: 24,
+    });
+  });
+
+  test("clamps the bounds to the source image", () => {
+    expect(getSampleBounds(source, rectPath(10, 10, 60, 60), 4)).toEqual({
+      x: 0,
+      y: 0,
+      width: 42,
+      height: 42,
+    });
+  });
+
+  test("covers all of the given paths", () => {
+    const paths = [
+      [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+      ],
+      [
+        { x: 60, y: 70 },
+        { x: 80, y: 90 },
+      ],
+    ];
+
+    expect(getSampleBounds(source, paths, 4)).toEqual({ x: 8, y: 8, width: 74, height: 84 });
+  });
+
+  test("returns an empty area without paths", () => {
+    expect(getSampleBounds(source, [], 4)).toEqual({ x: 0, y: 0, width: 0, height: 0 });
+  });
+});