supervision 0.2.8 → 0.2.10

package/dist/mask-preparation.worker.js

@@ -508,8 +508,15 @@
     new Set(Object.values(DepthSampling));
     function rasterizePolygonToMask(points, dimensions) {
         const data = createEmptyMask(dimensions);
+        forEachRasterPolygonSpan(points, dimensions, (y, left, right) => {
+            data.fill(1, y * dimensions.width + left, y * dimensions.width + right);
+        });
+        return data;
+    }
+    function forEachRasterPolygonSpan(points, dimensions, writeSpan) {
+        assertMediaDimensions(dimensions);
         if (points.length < 3) {
-            return data;
+            return;
         }
         const bounds = centerRectToTopLeftRect(getPointsRect(points));
         const startY = Math.max(0, Math.floor(bounds.y));
@@ -530,27 +537,29 @@
             for (let index = 0; index < intersections.length - 1; index += 2) {
                 const left = Math.max(0, Math.round(intersections[index]));
                 const right = Math.min(dimensions.width, Math.round(intersections[index + 1]));
-                for (let x = left; x < right; x += 1) {
-                    data[y * dimensions.width + x] = 1;
+                if (left < right) {
+                    writeSpan(y, left, right);
                 }
             }
         }
-        return data;
     }
     function createEmptyMask(dimensions) {
+        assertMediaDimensions(dimensions);
+        return new Uint8Array(dimensions.width * dimensions.height);
+    }
+    function assertMediaDimensions(dimensions) {
         if (!Number.isInteger(dimensions.width) ||
             dimensions.width <= 0 ||
             !Number.isInteger(dimensions.height) ||
             dimensions.height <= 0) {
             throw new Error("Media dimensions must be positive integers.");
         }
-        return new Uint8Array(dimensions.width * dimensions.height);
     }
 
     /**
      * Palette slots an id raster can name, one of them the background. A GLSL
      * fragment stage is guaranteed only 224 uniform vectors, and a palette entry
-     * costs 2.25 of them, so this stays a multiple of four and well inside that
+     * costs 2.5 of them, so this stays a multiple of four and well inside that
      * budget; past it a frame draws from the RGBA composite instead.
      */
     const MAX_ID_MASK_PALETTE_ENTRIES = 80;
@@ -561,8 +570,8 @@
         }
         /* Pixel-grid dimensions use integer parts throughout allocation and RLE
            traversal. */
-        const maskWidth = Math.floor(Math.max(...instructions.map(({ mask }) => mask.width)));
-        const maskHeight = Math.floor(Math.max(...instructions.map(({ mask }) => mask.height)));
+        const maskWidth = Math.floor(Math.max(...instructions.map((instruction) => (instruction.mask ?? instruction.polygon).width)));
+        const maskHeight = Math.floor(Math.max(...instructions.map((instruction) => (instruction.mask ?? instruction.polygon).height)));
         const width = resolveRasterWidth(maskWidth, options.maxWidth);
         const height = width === maskWidth
             ? maskHeight
@@ -574,6 +583,7 @@
         const fillPalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));
         const strokePalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));
         const strokeWidths = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4));
+        const strokeAlignments = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4));
         let hasStroke = false;
         let maxStrokeWidth = 0;
         for (const instruction of instructions) {
@@ -583,13 +593,22 @@
             }
             writeIdMaskPaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);
             if (instruction.stroke && instruction.stroke.width > 0) {
-                const strokeWidth = resolveIdMaskStrokeTexels(instruction.stroke.width, maskWidth, width);
+                const strokeWidth = instruction.stroke.width;
+                const alignment = instruction.stroke.alignment === StrokeAlignment.Inside
+                    ? 1
+                    : instruction.stroke.alignment === StrokeAlignment.Center
+                        ? 0.5
+                        : 0;
                 hasStroke = true;
                 strokeWidths[detectionMaskId] = strokeWidth;
-                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);
+                strokeAlignments[detectionMaskId] = alignment;
+                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth * (1 - alignment));
                 writeIdMaskPaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);
             }
-            if (scaledAxes) {
+            if (instruction.polygon) {
+                writePolygonSpans(data, width, instruction.polygon, detectionMaskId, scaledAxes);
+            }
+            else if (scaledAxes) {
                 writeScaledMaskRuns(data, scaledAxes, instruction.mask, detectionMaskId);
             }
             else {
@@ -604,10 +623,19 @@
             maxStrokeWidth,
             sourceWidth: maskWidth,
             strokePalette,
+            strokeAlignments,
             strokeWidths,
             width,
         };
     }
+    function writePolygonSpans(data, frameWidth, polygon, detectionMaskId, axes) {
+        forEachRasterPolygonSpan(polygon.points, polygon, (y, left, right) => {
+            const row = axes ? axes.rows[y] : y * frameWidth;
+            const first = axes ? axes.columns[left] : left;
+            const last = axes ? axes.columns[right - 1] + 1 : right;
+            data.fill(detectionMaskId, row + first, row + last);
+        });
+    }
     /**
      * Compressed RLE counts runs down each column in turn, so a foreground run is
      * a contiguous walk down one column that wraps into the next.
@@ -696,13 +724,13 @@
             : maskWidth;
     }
     /**
-     * Converts a source-grid stroke width into raster texels. Fractional widths
-     * let coverage shaders draw a border within a texel. The ceiling bounds the
-     * neighbourhood the shaders scan.
+     * Converts total CSS outline width into raster texels. Each side is bounded
+     * independently so centered outlines can use the full supported radius.
      */
-    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {
-        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;
-        return Math.min(strokeWidth * scale, MAX_ID_MASK_STROKE_WIDTH);
+    function resolveIdMaskStrokeTexels(strokeWidth, displayWidth, rasterWidth, alignment = StrokeAlignment.Outside) {
+        const scale = displayWidth > 0 ? rasterWidth / displayWidth : 1;
+        const sideFraction = alignment === StrokeAlignment.Center ? 0.5 : 1;
+        return Math.min(strokeWidth * scale, MAX_ID_MASK_STROKE_WIDTH / sideFraction);
     }
     function createScaledMaskAxes(frame) {
         return {
@@ -948,7 +976,7 @@
         }
         return { data, detectionIndex, height, width, x: minX, y: minY };
     }
-    function compositeMaskFrame(instructions) {
+    function compositeMaskFrame(instructions, displayWidth) {
         const maskInstructions = materializeMaskInstructions(instructions);
         if (maskInstructions.length === 0) {
             return undefined;
@@ -956,18 +984,22 @@
         const width = Math.max(...maskInstructions.map(({ mask }) => mask.width));
         const height = Math.max(...maskInstructions.map(({ mask }) => mask.height));
         const data = new Uint8ClampedArray(new ArrayBuffer(width * height * 4));
+        const strokeCoverage = maskInstructions.some(({ stroke }) => stroke && stroke.width > 0 && stroke.alpha > 0)
+            ? new Uint8Array(width * height)
+            : undefined;
+        const strokeKernels = new Map();
         for (const instruction of maskInstructions) {
-            compositeInstruction(data, width, instruction);
+            compositeInstruction(data, width, instruction, strokeCoverage, strokeKernels, displayWidth);
         }
         return { data, height, width };
     }
     function createIdMaskRasterFrame(instructions, maxRasterWidth) {
         try {
-            return createIdMaskFrame(materializeMaskInstructions(instructions).map((instruction) => instruction.stroke?.widthUnit === "screen"
+            return createIdMaskFrame(instructions
+                .filter((instruction) => instruction.visible !== false)
+                .map((instruction) => instruction.stroke?.widthUnit
                 ? { ...instruction, stroke: undefined }
-                : instruction), {
-                maxWidth: maxRasterWidth,
-            });
+                : instruction), { maxWidth: maxRasterWidth });
         }
         catch {
             // The id raster is the fast path, not the only one: answering with nothing
@@ -997,25 +1029,29 @@
             ? { data: frame.data, height: frame.height, width: frame.width }
             : undefined;
     }
-    function compositeInstruction(rgba, canvasWidth, instruction) {
+    function compositeInstruction(rgba, canvasWidth, instruction, strokeCoverage, strokeKernels, displayWidth) {
         const fill = resolveRgbaColor(instruction.color, instruction.alpha);
         const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);
         if (instruction.stroke &&
-            instruction.stroke.widthUnit !== "screen" &&
-            bounds) {
-            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);
+            instruction.stroke.widthUnit === undefined &&
+            bounds &&
+            strokeCoverage) {
+            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, {
+                ...instruction.stroke,
+                width: resolveIdMaskStrokeTexels(instruction.stroke.width, displayWidth ?? canvasWidth, canvasWidth, instruction.stroke.alignment),
+            }, strokeCoverage, strokeKernels);
         }
     }
     function createMaskScreenStrokes(instructions, width, height, preparedRaster) {
         const outlined = instructions.filter(({ visible, stroke }) => visible !== false &&
-            stroke?.widthUnit === "screen" &&
+            stroke?.widthUnit !== undefined &&
             stroke.width > 0 &&
             stroke.alpha > 0);
         if (outlined.length === 0)
             return undefined;
-        const masks = materializeMaskInstructions(instructions);
         const raster = preparedRaster ?? new Uint32Array(width * height);
         if (!preparedRaster) {
+            const masks = materializeMaskInstructions(instructions);
             for (const { detectionIndex, mask } of masks) {
                 const counts = decodeCompressedRleCounts(mask.counts);
                 let offset = 0;
@@ -1038,6 +1074,8 @@
             alpha: stroke.alpha,
             color: stroke.color,
             width: stroke.width,
+            widthUnit: stroke.widthUnit,
+            alignment: stroke.alignment,
             paths: paths.get(detectionIndex + 1) ?? [],
         }));
     }
@@ -1103,31 +1141,110 @@
         }
         return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };
     }
-    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke) {
-        const width = Math.round(stroke.width);
-        if (width <= 0) {
-            return;
+    function createStrokeKernel(width, alignment) {
+        const innerFraction = alignment === StrokeAlignment.Inside
+            ? 1
+            : alignment === StrokeAlignment.Center
+                ? 0.5
+                : 0;
+        const inside = [];
+        const outside = [];
+        const radius = Math.min(MAX_ID_MASK_STROKE_WIDTH + 1, Math.ceil(width * Math.max(innerFraction, 1 - innerFraction) + 0.5));
+        const clamp = (value) => Math.max(0, Math.min(1, value));
+        const coverage = (signed) => Math.round(255 *
+            (clamp(0.5 + width * (1 - innerFraction) - signed) -
+                clamp(0.5 - width * innerFraction - signed)));
+        for (let y = -radius; y <= radius; y += 1) {
+            for (let x = -radius; x <= radius; x += 1) {
+                if (x === 0 && y === 0)
+                    continue;
+                const distance = Math.max(Math.abs(x) - 0.5, Math.abs(y) - 0.5, 0);
+                const innerCoverage = coverage(-distance);
+                const outerCoverage = coverage(distance);
+                if (innerCoverage > 0)
+                    inside.push([x, y, innerCoverage]);
+                if (outerCoverage > 0)
+                    outside.push([x, y, outerCoverage]);
+            }
         }
-        const strokeColor = resolveRgbaColor(stroke.color, stroke.alpha);
+        return { inside, outside, radius };
+    }
+    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke, coverage, kernels) {
+        if (stroke.width <= 0 || stroke.alpha <= 0)
+            return;
+        const key = `${stroke.width}:${stroke.alignment}`;
+        let kernel = kernels.get(key);
+        if (!kernel) {
+            kernel = createStrokeKernel(stroke.width, stroke.alignment);
+            kernels.set(key, kernel);
+        }
+        const visitedAir = kernel.inside.length > 0 ? new Set() : undefined;
+        const mark = (sourceX, sourceY, offsets, foreground) => {
+            for (const [dx, dy, value] of offsets) {
+                const x = sourceX + dx;
+                const y = sourceY + dy;
+                if (isOutsideMaskBounds(decodedMask, x, y) ||
+                    isMaskPixel(decodedMask, x, y) !== foreground)
+                    continue;
+                const index = y * canvasWidth + x;
+                coverage[index] = Math.max(coverage[index], value);
+            }
+        };
         for (let y = bounds.minY; y <= bounds.maxY; y += 1) {
             for (let x = bounds.minX; x <= bounds.maxX; x += 1) {
                 if (!isMaskPixel(decodedMask, x, y) ||
-                    !isBoundaryPixel(decodedMask, x, y)) {
+                    !isBoundaryPixel(decodedMask, x, y))
                     continue;
-                }
-                for (let offsetY = -width; offsetY <= width; offsetY += 1) {
-                    for (let offsetX = -width; offsetX <= width; offsetX += 1) {
-                        const strokeX = x + offsetX;
-                        const strokeY = y + offsetY;
-                        if (isOutsideMaskBounds(decodedMask, strokeX, strokeY) ||
-                            isMaskPixel(decodedMask, strokeX, strokeY)) {
+                mark(x, y, kernel.outside, false);
+                if (!visitedAir)
+                    continue;
+                for (let dy = -1; dy <= 1; dy += 1) {
+                    for (let dx = -1; dx <= 1; dx += 1) {
+                        const airX = x + dx;
+                        const airY = y + dy;
+                        if (isOutsideMaskBounds(decodedMask, airX, airY) ||
+                            isMaskPixel(decodedMask, airX, airY))
                             continue;
-                        }
-                        writePixel(rgba, canvasWidth, strokeX, strokeY, strokeColor);
+                        const airIndex = airY * decodedMask.width + airX;
+                        if (visitedAir.has(airIndex))
+                            continue;
+                        visitedAir.add(airIndex);
+                        mark(airX, airY, kernel.inside, true);
                     }
                 }
             }
         }
+        const color = resolveRgbaColor(stroke.color, stroke.alpha);
+        for (let y = Math.max(0, bounds.minY - kernel.radius); y <= Math.min(decodedMask.height - 1, bounds.maxY + kernel.radius); y += 1) {
+            for (let x = Math.max(0, bounds.minX - kernel.radius); x <= Math.min(decodedMask.width - 1, bounds.maxX + kernel.radius); x += 1) {
+                const index = y * canvasWidth + x;
+                const amount = coverage[index] / 255;
+                if (amount <= 0)
+                    continue;
+                coverage[index] = 0;
+                const offset = index * 4;
+                const alpha = rgba[offset + 3] * (1 - amount) + color.alpha * amount;
+                rgba[offset] =
+                    alpha > 0
+                        ? (rgba[offset] * rgba[offset + 3] * (1 - amount) +
+                            color.red * color.alpha * amount) /
+                            alpha
+                        : 0;
+                rgba[offset + 1] =
+                    alpha > 0
+                        ? (rgba[offset + 1] * rgba[offset + 3] * (1 - amount) +
+                            color.green * color.alpha * amount) /
+                            alpha
+                        : 0;
+                rgba[offset + 2] =
+                    alpha > 0
+                        ? (rgba[offset + 2] * rgba[offset + 3] * (1 - amount) +
+                            color.blue * color.alpha * amount) /
+                            alpha
+                        : 0;
+                rgba[offset + 3] = alpha;
+            }
+        }
     }
     function isBoundaryPixel(mask, x, y) {
         for (let offsetY = -1; offsetY <= 1; offsetY += 1) {
@@ -1910,6 +2027,7 @@
                     requestId: message.requestId,
                     sourceWidth: idMaskFrame.sourceWidth,
                     strokePalette: idMaskFrame.strokePalette,
+                    strokeAlignments: idMaskFrame.strokeAlignments,
                     strokeWidths: idMaskFrame.strokeWidths,
                     type: MaskPreparationWorkerMessageType.Complete,
                     width: idMaskFrame.width,
@@ -1917,13 +2035,16 @@
                     idMaskFrame.data.buffer,
                     idMaskFrame.fillPalette.buffer,
                     idMaskFrame.strokePalette.buffer,
+                    ...(idMaskFrame.strokeAlignments
+                        ? [idMaskFrame.strokeAlignments.buffer]
+                        : []),
                     idMaskFrame.strokeWidths.buffer,
                     ...strokeTransfers,
                     ...coverageTransfers,
                 ]);
                 return;
             }
-            const compositedFrame = compositeMaskFrame(message.job.instructions);
+            const compositedFrame = compositeMaskFrame(message.job.instructions, message.job.displayWidth);
             if (!compositedFrame && !regionMaskCoverage) {
                 workerScope.postMessage({
                     key: message.job.key,