redhotmagma-visualization 1.57.6 → 1.57.7

package/src/Utils/DesignArea/getUvBoundaryPaths.js

@@ -0,0 +1,110 @@
+const 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 const getUvBoundaryIndices = geometry => {
+  const uv = geometry?.attributes?.uv;
+  if (!uv || !uv.count) {
+    return [];
+  }
+
+  const us = [];
+  const vs = [];
+  let uMin = Infinity;
+  let uMax = -Infinity;
+  let vMin = Infinity;
+  let 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 (let i = 0; i < uv.count; i++) {
+    const u = uv.getX(i);
+    const 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 [];
+  }
+
+  const on = (value, target) => Math.abs(value - target) < EPSILON;
+  const collect = (isOnEdge, sortBy, descending) =>
+    us
+      .map((u, i) => i)
+      .filter(i => isOnEdge(us[i], vs[i]))
+      .sort((a, b) => (descending ? sortBy[b] - sortBy[a] : sortBy[a] - sortBy[b]));
+
+  // walk the four edges so that the result is a continuous ring
+  const ring = [
+    ...collect((u, v) => on(v, vMin), us, false),
+    ...collect(u => on(u, uMax), vs, false),
+    ...collect((u, v) => on(v, vMax), us, true),
+    ...collect(u => on(u, uMin), vs, true),
+  ];
+
+  // the corners are part of two edges each, and the last vertex closes onto the first one
+  const deduped = ring.filter((index, i) => 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 const buildVisiblePaths = (indices, isVisible, project) => {
+  if (indices.length < 2) {
+    return [];
+  }
+
+  const visible = indices.map(isVisible);
+
+  if (visible.every(Boolean)) {
+    // nothing is culled, so the border is a closed loop
+    const loop = indices.map(project);
+    return [[...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
+  const offset = visible.indexOf(false);
+  const paths = [];
+  let current = null;
+  for (let i = 1; i <= indices.length; i++) {
+    const 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(path => path.length > 1);
+};

package/src/Utils/DesignArea/sampleBorderRingColor.js

@@ -0,0 +1,200 @@
+import { createWorkingCanvas } from "../createCanvas";
+
+/**
+ * Default size of the sampled band, relative to the shorter side of the sampled paths.
+ * @type {number}
+ */
+const RING_WIDTH_RATIO = 0.03;
+const RING_WIDTH_MIN = 4;
+const 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}
+ */
+const MIN_MEAN_ALPHA = 0.1;
+
+/**
+ * @param {Array<Array<{x: number, y: number}>>} paths
+ * @returns {{x: number, y: number, width: number, height: number}|null}
+ */
+const getPathsBounds = paths => {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const path of paths) {
+    for (const point of path) {
+      minX = Math.min(minX, point.x);
+      minY = Math.min(minY, point.y);
+      maxX = Math.max(maxX, point.x);
+      maxY = Math.max(maxY, point.y);
+    }
+  }
+
+  if (minX > maxX) {
+    return null;
+  }
+
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+};
+
+const getRingWidth = (paths, ringWidth) => {
+  if (ringWidth) {
+    return ringWidth;
+  }
+  const bounds = getPathsBounds(paths);
+  const 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
+ */
+const forEachRingPoint = (paths, ringWidth, sampleStep, cb) => {
+  const half = ringWidth / 2;
+  // the offsets across the band, from the inner to the outer edge
+  const offsets = [];
+  for (let o = -half; o <= half; o += sampleStep) {
+    offsets.push(o);
+  }
+  if (!offsets.length) {
+    offsets.push(0);
+  }
+
+  for (const path of paths) {
+    for (let i = 1; i < path.length; i++) {
+      const from = path[i - 1];
+      const to = path[i];
+      const dx = to.x - from.x;
+      const dy = to.y - from.y;
+      const length = Math.sqrt(dx * dx + dy * dy);
+      if (!length) {
+        continue;
+      }
+      // the unit normal of the segment, the direction the band extends into
+      const nx = -dy / length;
+      const ny = dx / length;
+      const steps = Math.max(1, Math.ceil(length / sampleStep));
+
+      for (let s = 0; s <= steps; s++) {
+        const t = s / steps;
+        const x = from.x + dx * t;
+        const y = from.y + dy * t;
+        for (const o of offsets) {
+          cb(x + nx * o, y + ny * o);
+        }
+      }
+    }
+  }
+};
+
+/**
+ * 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 const averageRingColorFromImageData = (imageData, origin, paths, options = {}) => {
+  const { sampleStep = SAMPLE_STEP, minAlpha = MIN_MEAN_ALPHA } = options;
+  const ringWidth = getRingWidth(paths, options.ringWidth);
+  const { width, height, data } = imageData;
+
+  let wr = 0;
+  let wg = 0;
+  let wb = 0;
+  let wa = 0;
+  let count = 0;
+
+  forEachRingPoint(paths, ringWidth, sampleStep, (px, py) => {
+    const x = Math.round(px - origin.x);
+    const y = Math.round(py - origin.y);
+    if (x < 0 || y < 0 || x >= width || y >= height) {
+      return;
+    }
+    const i = (y * width + x) * 4;
+    const 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 const getSampleBounds = (source, paths, ringWidth) => {
+  const bounds = getPathsBounds(paths);
+  if (!bounds) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  const half = ringWidth / 2;
+
+  const x = Math.max(0, Math.floor(bounds.x - half));
+  const y = Math.max(0, Math.floor(bounds.y - half));
+  const right = Math.min(source.width, Math.ceil(bounds.x + bounds.width + half));
+  const bottom = Math.min(source.height, Math.ceil(bounds.y + bounds.height + half));
+
+  return { x, 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 const sampleRingAverage = (source, paths, options = {}) => {
+  if (!source || !source.width || !source.height || !paths || !paths.length) {
+    return null;
+  }
+
+  const bounds = getSampleBounds(source, paths, getRingWidth(paths, options.ringWidth));
+  if (bounds.width <= 0 || bounds.height <= 0) {
+    return null;
+  }
+
+  const [, ctx] = createWorkingCanvas(source, true);
+
+  let 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);
+};

package/src/Utils/TextureBuilder/__tests__/createTextureBuilder.test.js

@@ -0,0 +1,104 @@
+import { getHighlightLineWidth, highlightArea } from "../createTextureBuilder";
+
+/**
+ * The power of two texture scales that optimizeSizeToTexture produces for design areas of
+ * different sizes, see optimizeSizeToTexture with pixelRatio 2 and fitPOT.
+ */
+const TEXTURE_SCALE_SMALL_AREA = 3.94; // e.g. a 130 unit wide area, texture 512
+const TEXTURE_SCALE_LARGE_AREA = 1.86; // e.g. a 1100 unit wide area, texture 2048
+
+describe("getHighlightLineWidth", () => {
+  test("scales the configured width into texture pixels", () => {
+    expect(getHighlightLineWidth(1, 4, 0.5)).toBe(8);
+    expect(getHighlightLineWidth(2, 4, 0.5)).toBe(16);
+  });
+
+  test("grows with the texture scale and shrinks with the zoom", () => {
+    expect(getHighlightLineWidth(1, 4, 0.5)).toBeGreaterThan(getHighlightLineWidth(1, 2, 0.5));
+    expect(getHighlightLineWidth(1, 4, 1)).toBeLessThan(getHighlightLineWidth(1, 4, 0.5));
+  });
+
+  test("results in the same on screen width for differently sized design areas", () => {
+    const zoom = 0.375;
+    const configured = 1;
+    // one texture pixel covers zoom / scaling screen pixels, so this is the width on screen
+    const onScreen = scaling => (getHighlightLineWidth(configured, scaling, zoom) * zoom) / scaling;
+
+    expect(onScreen(TEXTURE_SCALE_SMALL_AREA)).toBeCloseTo(configured);
+    expect(onScreen(TEXTURE_SCALE_LARGE_AREA)).toBeCloseTo(configured);
+    // this is what used to differ: 0.76 px against 1.61 px for the same configured value
+    expect(onScreen(TEXTURE_SCALE_SMALL_AREA)).toBeCloseTo(onScreen(TEXTURE_SCALE_LARGE_AREA));
+  });
+
+  test("results in the same on screen width at any zoom", () => {
+    const onScreen = zoom => (getHighlightLineWidth(2, 3.41, zoom) * zoom) / 3.41;
+
+    expect(onScreen(0.3)).toBeCloseTo(2);
+    expect(onScreen(0.375)).toBeCloseTo(2);
+    expect(onScreen(0.51)).toBeCloseTo(2);
+  });
+
+  test("leaves the 3D visualization untouched", () => {
+    // Three3D passes neither useTextureSize nor currentZoom, so both default to 1 and the
+    // configured width has to come out unchanged
+    expect(getHighlightLineWidth(2, 1, 1)).toBe(2);
+    expect(getHighlightLineWidth(2)).toBe(2);
+  });
+
+  test("never drops below one texture pixel", () => {
+    expect(getHighlightLineWidth(1, 1, 4)).toBe(1);
+    expect(getHighlightLineWidth(0, 1, 1)).toBe(1);
+  });
+});
+
+describe("highlightArea", () => {
+  const createMockContext = () => ({
+    fillStyle: null,
+    strokeStyle: null,
+    lineWidth: null,
+    fillRect: jest.fn(),
+    strokeRect: jest.fn(),
+  });
+
+  test("keeps the outer edge of the border on the design area bounds", () => {
+    const size = { width: 200, height: 100 };
+
+    for (const lineWidth of [1, 2, 8, 30]) {
+      const ctx = createMockContext();
+      highlightArea(ctx, size, { borderColor: "#ffffff", lineWidth });
+
+      // the stroke is centered on the inset rect, so it spans lineWidth inwards from 0
+      const [x, y, width, height] = ctx.strokeRect.mock.calls[0];
+      expect(x - lineWidth / 2).toBe(0);
+      expect(y - lineWidth / 2).toBe(0);
+      expect(x + width + lineWidth / 2).toBe(size.width);
+      expect(y + height + lineWidth / 2).toBe(size.height);
+      expect(ctx.lineWidth).toBe(lineWidth);
+    }
+  });
+
+  test("applies the given colors and fills the whole area", () => {
+    const ctx = createMockContext();
+    highlightArea(
+      ctx,
+      { width: 200, height: 100 },
+      {
+        borderColor: "#eeeeee",
+        backgroundColor: "rgba(0,0,0,0.1)",
+      }
+    );
+
+    expect(ctx.strokeStyle).toBe("#eeeeee");
+    expect(ctx.fillStyle).toBe("rgba(0,0,0,0.1)");
+    expect(ctx.fillRect).toHaveBeenCalledWith(0, 0, 200, 100);
+  });
+
+  test("falls back to its own defaults", () => {
+    const ctx = createMockContext();
+    highlightArea(ctx, { width: 50, height: 50 });
+
+    expect(ctx.strokeStyle).toBe("rgba(0,0,0,0.9)");
+    expect(ctx.fillStyle).toBe("transparent");
+    expect(ctx.lineWidth).toBe(2);
+  });
+});

package/src/Utils/TextureBuilder/createTextureBuilder.js

@@ -127,11 +127,18 @@ export const createTextureBuilder = (textureImage, params = {}) => {
       transformCanvas(ctx, getTransformProps(baseShape, position), scaling);
 
       const { highlight, highlightFunction = highlightArea } = configObject;
-      const { lineWidth = 2 } = highlight;
+      const { lineWidth = 2, borderColor, ...restHighlight } = highlight;
+
+      // 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
+      const resolvedBorderColor =
+        typeof borderColor === "function" ? borderColor(designArea) : borderColor;
 
       highlightFunction(ctx, size, {
-        ...highlight,
-        lineWidth: Math.ceil(lineWidth / currentZoom),
+        ...restHighlight,
+        // leave the key out when unresolved, so the default of the highlight function applies
+        ...(resolvedBorderColor === undefined ? {} : { borderColor: resolvedBorderColor }),
+        lineWidth: getHighlightLineWidth(lineWidth, scaling, currentZoom),
       });
 
       ctx.restore();
@@ -212,6 +219,20 @@ export const getTransformProps = (baseShape = {}, position = {}) => {
   };
 };
 
+/**
+ * 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 const getHighlightLineWidth = (lineWidth, scaling = 1, currentZoom = 1) =>
+  Math.max(1, (lineWidth * scaling) / currentZoom);
+
 export const highlightArea = (ctx, size, options = {}) => {
   const { width, height } = size;
   const { borderColor, backgroundColor, lineWidth } = {