Zoom: anchor the capture, magnify the full composite, draw on top (Unit: zoom rework per creator correction)

Creator corrected the "loupe" zoom on 2026-10-08: the click anchors a fixed
capture region (box/2 centred on the click) and the box is a live 2x view of
that region — dragging the box never changes its content; it magnifies the
fully-composited frame (every layer, incl. webcam) and draws LAST (n+1).
Rectangle shape is 4:3 ("more of a 640x480 aspect").

- MainViewModel.Zoom.cs rewritten: ActivateZoom anchors CaptureX/CaptureY
  (independently clamped); UpdateZoomMove relocates the box only; the per-frame
  BuildZoomFrame/ZoomFrameBuilder path is gone.
- SceneCompositor: skips the active ZoomSceneElement in every layer loop and
  BlitZooms it last via the new pure ZoomMagnifier (2x bilinear, temp snapshot
  via ArrayPool, round clip).
- Preview: ZoomBox hoisted above CanvasGrid as a sibling; its brush samples the
  whole composed preview at the fixed capture (2x).
- Tests: ZoomMagnifierTests (box-over-blue shows green capture at 2x incl. an
  extra red "layer" — the loupe/backdrop-only regressions both fail it) +
  round-clip; ZoomBoxInteractionTests rewritten (anchored capture, move-doesn't-
  change-capture, 4:3/9:16/square). 404 pass, 2 known environment flakes.
This commit is contained in:
2026-10-08 08:26:29 -07:00
parent 4b3d82ff0f
commit 6bff21b234
15 changed files with 467 additions and 330 deletions
+52 -13
View File
@@ -12,13 +12,15 @@ using ytLive.ViewModels;
namespace ytLive.Tests;
/// <summary>
/// Verifies the zoom box created by a right-click in the live preview: every
/// ZoomView shape procures the right bounding box CENTERED on the click (circle
/// square, phone 9:16, tablet 16:9), the box stays fully inside the 1920x1080
/// preview, and — because the box is now a real composited layer (TASK 51) —
/// a ZoomSceneElement placeholder sits at z-index 1 whose rect mirrors the box,
/// its Kind flips Dynamic only while active, and the output crop stays the tier
/// (the box is never the crop source).
/// Verifies the zoom box created by a right-click in the live preview (creator-
/// corrected model, 2026-10-08): every ZoomView shape procures the right bounding
/// box CENTERED on the click and a FIXED capture window (the box/2 region centred
/// on the click). Dragging the box relocates it WITHOUT changing the capture — the
/// box always shows the same anchored content magnified 2x. The rectangle is 4:3
/// ("more of a 640x480 aspect ratio"). The box is a real composited layer drawn
/// LAST (a ZoomSceneElement placeholder sits at z-index 1 whose rect + capture
/// mirror the box; Kind flips Dynamic only while active), and the output crop
/// stays the tier (the box is never the crop source).
/// </summary>
[Collection("RealApp")]
public sealed class ZoomBoxInteractionTests
@@ -58,13 +60,15 @@ public sealed class ZoomBoxInteractionTests
var rectOutline = (Rectangle)pane.FindName("ZoomRectOutline")!;
var circleOutline = (Ellipse)pane.FindName("ZoomCircleOutline")!;
// Circle: square box, click point is the CENTER.
// Circle: square box, click point is the CENTER of box AND capture.
vm.ZoomShape = ZoomShape.Circle;
vm.ActivateZoom(1000, 500);
Assert.True(vm.IsZoomActive);
Assert.Equal(vm.ZoomState.Width, vm.ZoomState.Height, 3);
Assert.Equal(1000 - vm.ZoomState.Width / 2, vm.ZoomState.X, 3);
Assert.Equal(500 - vm.ZoomState.Height / 2, vm.ZoomState.Y, 3);
Assert.Equal(1000 - vm.ZoomState.Width / 4, vm.ZoomState.CaptureX, 3);
Assert.Equal(500 - vm.ZoomState.Height / 4, vm.ZoomState.CaptureY, 3);
AssertTrueActiveLayer(vm);
window.UpdateLayout();
@@ -73,13 +77,15 @@ public sealed class ZoomBoxInteractionTests
Assert.Equal(Visibility.Visible, circleOutline.Visibility);
Assert.Equal(Visibility.Collapsed, rectOutline.Visibility);
// Phone (vertical rectangle): tall 9:16 box, click point is the CENTER.
// Phone (vertical rectangle): tall 9:16 box; capture centred on the click.
vm.ZoomShape = ZoomShape.VerticalRectangle;
vm.ActivateZoom(960, 540);
Assert.True(vm.ZoomState.Height > vm.ZoomState.Width);
Assert.Equal(9.0 / 16.0, vm.ZoomState.Width / vm.ZoomState.Height, 3);
Assert.Equal(960 - vm.ZoomState.Width / 2, vm.ZoomState.X, 3);
Assert.Equal(540 - vm.ZoomState.Height / 2, vm.ZoomState.Y, 3);
Assert.Equal(960 - vm.ZoomState.Width / 4, vm.ZoomState.CaptureX, 3);
Assert.Equal(540 - vm.ZoomState.Height / 4, vm.ZoomState.CaptureY, 3);
AssertTrueActiveLayer(vm);
window.UpdateLayout();
@@ -87,22 +93,53 @@ public sealed class ZoomBoxInteractionTests
Assert.Equal(Visibility.Collapsed, circleOutline.Visibility);
Assert.Equal(Visibility.Visible, rectOutline.Visibility);
// Tablet (horizontal rectangle): wide 16:9 box, click point is the CENTER.
// Tablet (horizontal rectangle): 4:3 wide box (creator: "more of a
// 640x480 aspect ratio" — the first-cut 16:9 read as a square).
vm.ZoomShape = ZoomShape.HorizontalRectangle;
vm.ActivateZoom(960, 540);
Assert.True(vm.ZoomState.Width > vm.ZoomState.Height);
Assert.Equal(16.0 / 9.0, vm.ZoomState.Width / vm.ZoomState.Height, 3);
Assert.Equal(4.0 / 3.0, vm.ZoomState.Width / vm.ZoomState.Height, 3);
Assert.Equal(960 - vm.ZoomState.Width / 2, vm.ZoomState.X, 3);
Assert.Equal(540 - vm.ZoomState.Height / 2, vm.ZoomState.Y, 3);
Assert.Equal(960 - vm.ZoomState.Width / 4, vm.ZoomState.CaptureX, 3);
Assert.Equal(540 - vm.ZoomState.Height / 4, vm.ZoomState.CaptureY, 3);
AssertTrueActiveLayer(vm);
// Clamp keeps the box fully inside the 1920x1080 preview even for a
// corner click that would otherwise overhang it.
window.UpdateLayout();
Assert.Null(zoomBox.Clip);
Assert.Equal(Visibility.Collapsed, circleOutline.Visibility);
Assert.Equal(Visibility.Visible, rectOutline.Visibility);
// THE core semantic: dragging the box moves only the box. The capture —
// and therefore the content the box shows — never changes. (Box is still
// the un-clamped tablet box [456,162] at this point with room to move.)
var boxX = vm.ZoomState.X;
var boxY = vm.ZoomState.Y;
var captureX = vm.ZoomState.CaptureX;
var captureY = vm.ZoomState.CaptureY;
vm.StartZoomMove(800, 400);
vm.UpdateZoomMove(1200, 600);
vm.EndZoomMove();
Assert.True(Math.Abs(vm.ZoomState.X - boxX) >= 100, "the box must have moved");
Assert.True(Math.Abs(vm.ZoomState.Y - boxY) >= 100, "the box must have moved");
Assert.Equal(captureX, vm.ZoomState.CaptureX);
Assert.Equal(captureY, vm.ZoomState.CaptureY);
var zoom = Assert.IsType<ZoomSceneElement>(vm.StagedScene.Elements[1]);
Assert.Equal(vm.ZoomState.X, zoom.X, 3);
Assert.Equal(vm.ZoomState.Y, zoom.Y, 3);
Assert.Equal(captureX, zoom.CaptureX, 3);
Assert.Equal(captureY, zoom.CaptureY, 3);
// Clamp keeps the box AND the capture fully inside the 1920x1080 master
// even for a corner click that would otherwise overhang both.
vm.ActivateZoom(2000, 2000);
const double frameW = 1920, frameH = 1080;
Assert.True(vm.ZoomState.X >= 0 && vm.ZoomState.Y >= 0);
Assert.True(vm.ZoomState.X + vm.ZoomState.Width <= frameW);
Assert.True(vm.ZoomState.Y + vm.ZoomState.Height <= frameH);
Assert.True(vm.ZoomState.CaptureX >= 0 && vm.ZoomState.CaptureY >= 0);
Assert.True(vm.ZoomState.CaptureX + vm.ZoomState.Width / 2 <= frameW);
Assert.True(vm.ZoomState.CaptureY + vm.ZoomState.Height / 2 <= frameH);
AssertTrueActiveLayer(vm);
// The box is a composited layer, NEVER the crop: output stays the tier.
@@ -137,6 +174,8 @@ public sealed class ZoomBoxInteractionTests
Assert.Equal(vm.ZoomState.Y, zoom.Y, 3);
Assert.Equal(vm.ZoomState.Width, zoom.Width, 3);
Assert.Equal(vm.ZoomState.Height, zoom.Height, 3);
Assert.Equal(vm.ZoomState.CaptureX, zoom.CaptureX, 3);
Assert.Equal(vm.ZoomState.CaptureY, zoom.CaptureY, 3);
Assert.Equal(vm.ZoomShape == ZoomShape.Circle ? ClipShape.Round : ClipShape.Traditional, zoom.ClipShape);
}
}
-83
View File
@@ -1,83 +0,0 @@
using System;
using Xunit;
using ytLive.Services;
using ytLive.ViewModels;
namespace ytLive.Tests;
/// <summary>
/// Proves the zoom layer's pixels are the GENUINE 2x magnification of the
/// backdrop: the source window is the box/2 interior centred on the box centre
/// (the same region as the preview's VisualBrush), with the static art composited
/// over the live capture exactly as the SceneCompositor draws the backdrop. This
/// is the "don't ship a magnifier you only think exists" proof — a 1x box, a
/// mis-positioned window, or a wrong backdrop layer all fail hard below.
/// </summary>
public sealed class ZoomFrameBuilderTests
{
private static VideoFrame BandedBackdrop(int bandW, int bandCount)
{
var w = bandW * bandCount;
const int h = 1080;
var buf = new byte[w * h * 4];
var bandColors = new (byte B, byte G, byte R)[]
{
(10, 20, 30), // band 0
(0, 0, 255), // band 1 red
(0, 255, 0), // band 2 green — the box window lands here
(255, 0, 0), // band 3 blue
};
for (var y = 0; y < h; y++)
{
for (var x = 0; x < w; x++)
{
var (b, g, r) = bandColors[Math.Min(bandCount - 1, x / bandW)];
var i = (y * w + x) * 4;
buf[i] = b;
buf[i + 1] = g;
buf[i + 2] = r;
buf[i + 3] = 255;
}
}
return new VideoFrame(w, h, buf);
}
private static VideoFrame SolidFrame(int w, int h, byte b, byte g, byte r)
{
var buf = new byte[w * h * 4];
for (var i = 0; i < w * h; i++)
{
buf[i * 4] = b;
buf[i * 4 + 1] = g;
buf[i * 4 + 2] = r;
buf[i * 4 + 3] = 255;
}
return new VideoFrame(w, h, buf);
}
[Fact]
public void Build_Produces_2x_Centered_ArtOverLive_Magnification()
{
var art = BandedBackdrop(480, 4); // [0,480) 1/4 dim, [480,960) red, [960,1440) green, [1440,1920) blue
var live = SolidFrame(1920, 1080, 200, 60, 60); // magenta-ish — must never show through
// Box [840,1320)x[100,580). 2x window = [960,1200)x[160,520) = band 2, all green.
// A 1x (broken) magnifier samples [840,1320) → red+green+blue mixed.
var zoom = ZoomFrameBuilder.Build(live, art, 840, 100, 480, 480, 1920, 1080);
Assert.NotNull(zoom);
Assert.Equal(480, zoom.Width);
Assert.Equal(480, zoom.Height);
for (var y = 0; y < zoom.Height; y++)
{
for (var x = 0; x < zoom.Width; x++)
{
var i = (y * zoom.Width + x) * 4;
Assert.Equal(0, zoom.BgraPixels[i]); // B
Assert.Equal(255, zoom.BgraPixels[i + 1]); // G
Assert.Equal(0, zoom.BgraPixels[i + 2]); // R
Assert.Equal(255, zoom.BgraPixels[i + 3]); // A
}
}
}
}
+118
View File
@@ -0,0 +1,118 @@
using System;
using Xunit;
using ytLive.Services.Compositor;
namespace ytLive.Tests;
/// <summary>
/// Proves the zoom box's pixels match the creator-corrected model (2026-10-08):
/// the box is a GENUINE 2x magnified view of a FIXED capture window (the box/2
/// region centred on the click) sampled from the ALREADY-COMPOSITED frame — i.e.
/// every layer, and NOT what happens to sit under the box. The money test below
/// puts the box over the blue half of the frame while its capture sits in the
/// green half (with a red webcam square + a white 2px stripe inside): a 1x
/// loupe, a box-following loupe, or a backdrop-only sample all fail hard.
/// </summary>
public sealed class ZoomMagnifierTests
{
private const int W = 1920;
private const int H = 1080;
/// <summary>1920x1080 opaque "composited scene": blue left half (x&lt;960),
/// green right half, plus a red 40x40 webcam square and a white 2px stripe
/// inside the capture region — the extra "layers" the box must capture.</summary>
private static byte[] ComposedFrame()
{
var buf = new byte[W * H * 4];
for (var y = 0; y < H; y++)
{
for (var x = 0; x < W; x++)
{
var i = (y * W + x) * 4;
buf[i] = 0; buf[i + 1] = 0; buf[i + 2] = 0; buf[i + 3] = 255; // black
if (x >= 960) { buf[i] = 0; buf[i + 1] = 255; buf[i + 2] = 0; } // green
else { buf[i] = 255; buf[i + 1] = 0; buf[i + 2] = 0; } // blue
if (x >= 1000 && x < 1040 && y >= 520 && y < 560) { buf[i] = 0; buf[i + 1] = 0; buf[i + 2] = 255; } // red webcam square
if (x >= 1100 && x < 1102) { buf[i] = 255; buf[i + 1] = 255; buf[i + 2] = 255; } // white stripe
}
}
return buf;
}
private static byte[] Pixel(byte[] buf, int x, int y)
{
var i = (y * W + x) * 4;
return new[] { buf[i], buf[i + 1], buf[i + 2] };
}
private static void AssertColor(byte[] buf, int x, int y, byte b, byte g, byte r)
{
var p = Pixel(buf, x, y);
Assert.Equal(new[] { b, g, r }, p);
}
[Fact]
public void Magnify_BoxOverBlue_ShowsFixedGreenCapture_WithAllLayers_At2x()
{
var buf = ComposedFrame();
// Click at (1080, 540). Box 400x200 centred on the click → box [880,1280)x[440,640).
// Capture = box/2 → [980,1180)x[490,590), entirely in the GREEN half and holding
// the red webcam square [1000,1040)x[520,560) and the white stripe [1100,1102).
ZoomMagnifier.MagnifyInto(buf, W, H,
boxX: 880, boxY: 440, boxW: 400, boxH: 200,
capX: 980, capY: 490, round: false);
// The whole box shows the CAPTURE (green + its layer content), not the frame
// beneath it — the box's left quarter sits over the BLUE half. Any blue inside
// the box means the sampler followed the box (the loupe bug). Green/red/white
// are all fine (edges blend at the bright stripes), blue (B≫G) is the crime.
for (var y = 440; y < 640; y++)
{
for (var x = 880; x < 1280; x++)
{
var p = Pixel(buf, x, y);
Assert.True(p[1] >= p[0],
$"box pixel ({x},{y}) = ({p[0]},{p[1]},{p[2]}) — blue means the sampler followed the box, never the capture");
}
}
// The red webcam square is inside the capture → it is captured (all layers!).
// Capture-local [20,60)x[30,70) maps 2x to box [920,1000)x[500,580).
for (var x = 925; x < 995; x++)
for (var y = 505; y < 575; y++)
AssertColor(buf, x, y, 0, 0, 255);
AssertColor(buf, 1010, 570, 0, 255, 0); // past the square → green
// The 2x proof: the 2px white stripe at capture [1100,1102) must land at box
// [1120,1121] (offset*2) — a 1x sample would leave it near capture space and a
// box-following sample would miss it entirely. Probe the interior (solid white)
// and either side (solid green), skipping bilinear edge blends.
AssertColor(buf, 1120, 540, 255, 255, 255);
AssertColor(buf, 1121, 540, 255, 255, 255);
AssertColor(buf, 1115, 540, 0, 255, 0);
AssertColor(buf, 1124, 540, 0, 255, 0);
// Outside the box the frame is untouched.
AssertColor(buf, 400, 540, 255, 0, 0); // still blue (left half)
AssertColor(buf, 1500, 540, 0, 255, 0); // still green
}
[Fact]
public void Magnify_Round_Clips_To_Circle_Leaving_Corners_Untouched()
{
var buf = ComposedFrame();
// Same geometry as the money test but circle: radius = min(400,200)/2 = 100.
ZoomMagnifier.MagnifyInto(buf, W, H,
boxX: 880, boxY: 440, boxW: 400, boxH: 200,
capX: 980, capY: 490, round: true);
// Box corners are outside the circle: the underlying blue frame shows through.
AssertColor(buf, 884, 444, 255, 0, 0);
AssertColor(buf, 884, 636, 255, 0, 0);
AssertColor(buf, 1276, 444, 0, 255, 0); // right side over green stays green
// Box centre is inside the circle: captured green.
AssertColor(buf, 1080, 540, 0, 255, 0);
}
}