matthias/lemonspace_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): separate mixer resize and crop semantics

Browse Source
This commit is contained in:
Matthias Meister
2026-04-15 08:31:53 +02:00
parent 61728f9e52
commit f1c61fd14e
18 changed files with 4783 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
tests/lib/canvas-render-preview.test.ts
View File

@@ -4,6 +4,13 @@ import {
buildGraphSnapshot,
resolveRenderPreviewInputFromGraph,
} from "@/lib/canvas-render-preview";
import {
computeMixerCompareOverlayImageStyle,
computeMixerFrameRectInSurface,
computeVisibleMixerContentRect,
computeMixerCropImageStyle,
isMixerCropImageReady,
} from "@/lib/mixer-crop-layout";
describe("resolveRenderPreviewInputFromGraph", () => {
it("resolves mixer input as renderable mixer composition", () => {
@@ -29,6 +36,10 @@ describe("resolveRenderPreviewInputFromGraph", () => {
overlayY: 0.1,
overlayWidth: 0.55,
overlayHeight: 0.44,
cropLeft: 0.08,
cropTop: 0.15,
cropRight: 0.22,
cropBottom: 0.1,
},
},
{
@@ -61,6 +72,10 @@ describe("resolveRenderPreviewInputFromGraph", () => {
overlayY: 0.1,
overlayWidth: 0.55,
overlayHeight: 0.44,
cropLeft: 0.08,
cropTop: 0.15,
cropRight: 0.22,
cropBottom: 0.1,
},
steps: [],
});
@@ -89,6 +104,10 @@ describe("resolveRenderPreviewInputFromGraph", () => {
overlayY: "1.4",
overlayWidth: 2,
overlayHeight: 0,
cropLeft: "0.95",
cropTop: -2,
cropRight: "4",
cropBottom: "0",
},
},
{
@@ -119,6 +138,10 @@ describe("resolveRenderPreviewInputFromGraph", () => {
overlayY: 0.9,
overlayWidth: 1,
overlayHeight: 0.1,
cropLeft: 0.9,
cropTop: 0,
cropRight: 0,
cropBottom: 0,
});
});
@@ -206,4 +229,189 @@ describe("resolveRenderPreviewInputFromGraph", () => {
expect(preview.sourceUrl).toBe("https://cdn.example.com/generated-video.mp4");
expect(preview.sourceComposition).toBeUndefined();
});
it("prefers live render preview URLs over stale baked render URLs inside downstream mixer compositions", () => {
const graph = buildGraphSnapshot(
[
{
id: "base-image",
type: "image",
data: { url: "https://cdn.example.com/base.png" },
},
{
id: "overlay-upstream",
type: "image",
data: { url: "https://cdn.example.com/upstream.png" },
},
{
id: "render-overlay",
type: "render",
data: {
lastUploadUrl: "https://cdn.example.com/stale-render-output.png",
},
},
{
id: "mixer-1",
type: "mixer",
data: {},
},
{
id: "render-2",
type: "render",
data: {},
},
],
[
{ source: "overlay-upstream", target: "render-overlay" },
{ source: "base-image", target: "mixer-1", targetHandle: "base" },
{ source: "render-overlay", target: "mixer-1", targetHandle: "overlay" },
{ source: "mixer-1", target: "render-2" },
],
);
const preview = resolveRenderPreviewInputFromGraph({ nodeId: "render-2", graph });
expect(preview).toEqual({
sourceUrl: null,
sourceComposition: {
kind: "mixer",
baseUrl: "https://cdn.example.com/base.png",
overlayUrl: "https://cdn.example.com/upstream.png",
blendMode: "normal",
opacity: 100,
overlayX: 0,
overlayY: 0,
overlayWidth: 1,
overlayHeight: 1,
cropLeft: 0,
cropTop: 0,
cropRight: 0,
cropBottom: 0,
},
steps: [],
});
});
});
describe("mixer crop layout parity", () => {
it("contains a wide cropped source inside a square overlay frame", () => {
expect(
computeVisibleMixerContentRect({
frameAspectRatio: 1,
sourceWidth: 200,
sourceHeight: 100,
cropLeft: 0,
cropTop: 0.25,
cropRight: 0,
cropBottom: 0.25,
}),
).toEqual({
x: 0,
y: 0.375,
width: 1,
height: 0.25,
});
});
it("returns compare image styles that letterbox instead of stretching", () => {
expect(
computeMixerCropImageStyle({
frameAspectRatio: 1,
sourceWidth: 200,
sourceHeight: 100,
cropLeft: 0,
cropTop: 0,
cropRight: 0,
cropBottom: 0,
}),
).toEqual({
left: "0%",
top: "25%",
width: "100%",
height: "50%",
});
});
it("uses the actual base-aware frame pixel ratio for compare crop math", () => {
expect(
computeMixerCompareOverlayImageStyle({
surfaceWidth: 500,
surfaceHeight: 380,
baseWidth: 200,
baseHeight: 100,
overlayX: 0.1,
overlayY: 0.2,
overlayWidth: 0.4,
overlayHeight: 0.4,
sourceWidth: 200,
sourceHeight: 100,
cropLeft: 0.1,
cropTop: 0,
cropRight: 0.1,
cropBottom: 0,
}),
).toEqual({
left: "0%",
top: "0%",
width: "100%",
height: "100%",
});
});
it("does not mark compare crop overlay ready before natural size is known", () => {
expect(
isMixerCropImageReady({
currentOverlayUrl: "https://cdn.example.com/overlay-a.png",
loadedOverlayUrl: null,
sourceWidth: 0,
sourceHeight: 0,
}),
).toBe(false);
});
it("invalidates compare crop overlay readiness on source swap until the new image loads", () => {
expect(
isMixerCropImageReady({
currentOverlayUrl: "https://cdn.example.com/overlay-b.png",
loadedOverlayUrl: "https://cdn.example.com/overlay-a.png",
sourceWidth: 200,
sourceHeight: 100,
}),
).toBe(false);
});
it("positions mixer overlay frame relative to the displayed base-image rect", () => {
expect(
computeMixerFrameRectInSurface({
surfaceWidth: 1,
surfaceHeight: 1,
baseWidth: 200,
baseHeight: 100,
overlayX: 0.1,
overlayY: 0.2,
overlayWidth: 0.4,
overlayHeight: 0.4,
}),
).toEqual({
x: 0.1,
y: 0.35,
width: 0.4,
height: 0.2,
});
});
it("returns null frame placement until base image natural size is known", () => {
expect(
computeMixerFrameRectInSurface({
surfaceWidth: 1,
surfaceHeight: 1,
baseWidth: 0,
baseHeight: 0,
overlayX: 0.1,
overlayY: 0.2,
overlayWidth: 0.4,
overlayHeight: 0.4,
}),
).toBeNull();
});
});