@hyperframes/studio 0.7.72 → 0.7.74

package/src/components/editor/propertyPanelColorScopes.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useRef, useState } from "react";
+import type { ColorGradingCapturedFrame } from "./useColorGradingPreviews";
+import {
+  type ColorGradingScopeAnalysis,
+  type ColorGradingScopeMode,
+} from "./colorGradingFrameAnalysis";
+import { useColorGradingScopes } from "./useColorGradingScopes";
+import { RotateCw } from "../../icons/SystemIcons";
+
+const MODES: Array<{ id: ColorGradingScopeMode; label: string }> = [
+  { id: "histogram", label: "Histogram" },
+  { id: "waveform", label: "Waveform" },
+  { id: "parade", label: "RGB Parade" },
+  { id: "vectorscope", label: "Vectorscope" },
+];
+
+function densityAlpha(value: number, maximum: number): number {
+  if (value === 0 || maximum === 0) return 0;
+  return Math.min(1, Math.log2(value + 1) / Math.log2(maximum + 1));
+}
+
+function maximumDensity(values: Uint32Array): number {
+  let maximum = 0;
+  for (const value of values) maximum = Math.max(maximum, value);
+  return maximum;
+}
+
+function drawGrid(context: CanvasRenderingContext2D, width: number, height: number) {
+  context.fillStyle = "#090b0e";
+  context.fillRect(0, 0, width, height);
+  context.strokeStyle = "rgba(255,255,255,0.08)";
+  context.lineWidth = 1;
+  for (const fraction of [0.25, 0.5, 0.75]) {
+    context.beginPath();
+    context.moveTo(0, Math.round(height * fraction) + 0.5);
+    context.lineTo(width, Math.round(height * fraction) + 0.5);
+    context.stroke();
+  }
+}
+
+function drawHistogram(
+  context: CanvasRenderingContext2D,
+  analysis: ColorGradingScopeAnalysis,
+  width: number,
+  height: number,
+) {
+  const maximum = maximumDensity(analysis.histogram);
+  context.beginPath();
+  context.moveTo(0, height);
+  analysis.histogram.forEach((count, index) => {
+    context.lineTo((index / 255) * width, height - densityAlpha(count, maximum) * height);
+  });
+  context.lineTo(width, height);
+  context.closePath();
+  context.fillStyle = "rgba(226, 232, 240, 0.2)";
+  context.fill();
+  context.strokeStyle = "rgba(226, 232, 240, 0.9)";
+  context.stroke();
+}
+
+function drawDensity(
+  context: CanvasRenderingContext2D,
+  density: Uint32Array,
+  columnOffset: number,
+  columnCount: number,
+  color: readonly [number, number, number],
+  xOffset: number,
+  outputWidth: number,
+  height: number,
+) {
+  let maximum = 0;
+  const start = columnOffset * 256;
+  const end = (columnOffset + columnCount) * 256;
+  for (let index = start; index < end; index += 1) maximum = Math.max(maximum, density[index] ?? 0);
+  context.fillStyle = `rgb(${color.join(" ")})`;
+  for (let x = 0; x < columnCount; x += 1) {
+    for (let y = 0; y < 256; y += 1) {
+      const alpha = density[(columnOffset + x) * 256 + y] ?? 0;
+      if (!alpha) continue;
+      context.globalAlpha = densityAlpha(alpha, maximum);
+      context.fillRect(
+        xOffset + (x / columnCount) * outputWidth,
+        (y / 255) * height,
+        Math.max(1, outputWidth / columnCount),
+        Math.max(1, height / 256),
+      );
+    }
+  }
+  context.globalAlpha = 1;
+}
+
+function drawVectorscope(
+  context: CanvasRenderingContext2D,
+  analysis: ColorGradingScopeAnalysis,
+  width: number,
+  height: number,
+) {
+  const maximum = maximumDensity(analysis.vectorscope);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  context.strokeStyle = "rgba(255,255,255,0.12)";
+  context.beginPath();
+  context.arc(centerX, centerY, Math.min(width, height) * 0.42, 0, Math.PI * 2);
+  context.stroke();
+  context.beginPath();
+  context.moveTo(centerX, 0);
+  context.lineTo(centerX, height);
+  context.moveTo(0, centerY);
+  context.lineTo(width, centerY);
+  context.stroke();
+  const skinAngle = (-123 * Math.PI) / 180;
+  context.strokeStyle = "rgba(251,191,36,0.3)";
+  context.beginPath();
+  context.moveTo(centerX, centerY);
+  context.lineTo(
+    centerX + Math.cos(skinAngle) * Math.min(width, height) * 0.45,
+    centerY + Math.sin(skinAngle) * Math.min(width, height) * 0.45,
+  );
+  context.stroke();
+  context.fillStyle = "rgb(110 231 183)";
+  for (let y = 0; y < 256; y += 1) {
+    for (let x = 0; x < 256; x += 1) {
+      const count = analysis.vectorscope[y * 256 + x] ?? 0;
+      if (!count) continue;
+      context.globalAlpha = densityAlpha(count, maximum);
+      context.fillRect(
+        (x / 255) * width,
+        (y / 255) * height,
+        Math.max(1, width / 256),
+        Math.max(1, height / 256),
+      );
+    }
+  }
+  context.globalAlpha = 1;
+}
+
+function drawScope(
+  canvas: HTMLCanvasElement,
+  mode: ColorGradingScopeMode,
+  analysis: ColorGradingScopeAnalysis,
+) {
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  const { width, height } = canvas;
+  drawGrid(context, width, height);
+  if (mode === "histogram") {
+    drawHistogram(context, analysis, width, height);
+  } else if (mode === "waveform") {
+    drawDensity(context, analysis.waveform, 0, analysis.width, [226, 232, 240], 0, width, height);
+  } else if (mode === "parade") {
+    const laneWidth = width / 3;
+    (
+      [
+        [0, [248, 113, 113]],
+        [1, [74, 222, 128]],
+        [2, [96, 165, 250]],
+      ] as const
+    ).forEach(([channel, color]) => {
+      drawDensity(
+        context,
+        analysis.parade,
+        channel * analysis.width,
+        analysis.width,
+        color,
+        channel * laneWidth,
+        laneWidth,
+        height,
+      );
+    });
+  } else {
+    drawVectorscope(context, analysis, width, height);
+  }
+}
+
+export function PropertyPanelColorScopes({
+  captureFrame,
+  refreshKey,
+}: {
+  captureFrame: () => Promise<ColorGradingCapturedFrame | null>;
+  refreshKey: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<ColorGradingScopeMode>("waveform");
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { analysis, status, refresh } = useColorGradingScopes({
+    open,
+    captureFrame,
+    refreshKey,
+  });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    if (analysis) {
+      drawScope(canvas, mode, analysis);
+      return;
+    }
+    const context = canvas.getContext("2d");
+    if (context) drawGrid(context, canvas.width, canvas.height);
+  }, [analysis, mode]);
+
+  return (
+    <div data-flat-grade-scopes="true" className="border-b border-panel-hairline pb-1.5">
+      <div className="flex min-h-7 items-center justify-between">
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          className="flex min-h-7 flex-1 items-center justify-between text-left"
+        >
+          <span className="text-[11px] text-panel-text-2">Scopes</span>
+          <span className="text-[9px] text-panel-text-5">{open ? status : "Off"}</span>
+        </button>
+        <span className="flex items-center gap-2">
+          {open && (
+            <button
+              type="button"
+              aria-label="Refresh scopes"
+              title="Refresh scopes"
+              onClick={refresh}
+              className="p-1 text-panel-text-4 hover:text-panel-text-1"
+            >
+              <RotateCw size={10} />
+            </button>
+          )}
+        </span>
+      </div>
+      {open && (
+        <div className="space-y-1.5">
+          <div className="flex items-center gap-2 overflow-x-auto">
+            {MODES.map((candidate) => (
+              <button
+                key={candidate.id}
+                type="button"
+                aria-pressed={mode === candidate.id}
+                onClick={() => setMode(candidate.id)}
+                className={`whitespace-nowrap border-b-2 py-1 text-[9px] ${
+                  mode === candidate.id
+                    ? "border-panel-accent text-panel-text-1"
+                    : "border-transparent text-panel-text-4 hover:text-panel-text-2"
+                }`}
+              >
+                {candidate.label}
+              </button>
+            ))}
+          </div>
+          <canvas
+            ref={canvasRef}
+            width={320}
+            height={144}
+            role="img"
+            aria-label={`${MODES.find((candidate) => candidate.id === mode)?.label ?? mode} scope, ${status}`}
+            className="block h-auto w-full border border-panel-hairline bg-black"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/editor/propertyPanelColorSecondary.test.tsx

@@ -0,0 +1,181 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import * as frameAnalysis from "./colorGradingFrameAnalysis";
+import { PropertyPanelColorSecondary } from "./propertyPanelColorSecondary";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.innerHTML = "";
+});
+
+function normalizedSecondaries(count: number) {
+  const grading = normalizeHfColorGrading({
+    secondaries: Array.from({ length: count }, () => ({ key: {}, correction: {} })),
+  });
+  if (!grading) throw new Error("Expected normalized grading");
+  return grading.secondaries ?? [];
+}
+
+function renderSecondary({
+  secondaries = normalizedSecondaries(1),
+  captureFrame = vi.fn().mockResolvedValue(null),
+  onCommit = vi.fn(),
+} = {}) {
+  const host = document.body.appendChild(document.createElement("div"));
+  const root = createRoot(host);
+  act(() =>
+    root.render(
+      <PropertyPanelColorSecondary
+        secondaries={secondaries}
+        captureFrame={captureFrame}
+        onCommit={onCommit}
+      />,
+    ),
+  );
+  return { host, root, onCommit };
+}
+
+async function captureSecondaryFrame(host: HTMLElement) {
+  const capture = Array.from(host.querySelectorAll("button")).find((button) =>
+    button.textContent?.includes("Sample color from frame"),
+  );
+  await act(async () => {
+    capture?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+  });
+}
+
+describe("PropertyPanelColorSecondary", () => {
+  it("adds a normalized secondary and enforces the contract limit", () => {
+    const { host, root, onCommit } = renderSecondary({ secondaries: [] });
+    act(() => {
+      host
+        .querySelector<HTMLButtonElement>('button[title="Add color selection"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(onCommit.mock.calls[0]?.[0]).toHaveLength(1);
+    expect(onCommit.mock.calls[0]?.[0]?.[0]).toMatchObject({ enabled: true });
+    act(() => root.unmount());
+
+    const maximum = renderSecondary({ secondaries: normalizedSecondaries(4) });
+    expect(
+      maximum.host.querySelector<HTMLButtonElement>('button[title="Add secondary color selection"]')
+        ?.disabled,
+    ).toBe(true);
+    act(() => maximum.root.unmount());
+  });
+
+  it("bypasses a secondary without deleting its qualifier or correction", () => {
+    const secondaries = normalizedSecondaries(1).map((secondary) => ({
+      ...secondary,
+      correction: { ...secondary.correction, luma: 0.2 },
+    }));
+    const { host, root, onCommit } = renderSecondary({ secondaries });
+
+    act(() => {
+      host
+        .querySelector<HTMLButtonElement>('[role="switch"][aria-label="Selection enabled"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onCommit.mock.calls[0]?.[0]?.[0]).toMatchObject({
+      enabled: false,
+      correction: { luma: 0.2 },
+      key: secondaries[0]?.key,
+    });
+    act(() => root.unmount());
+  });
+
+  it("keeps saturation and luma ranges strictly ordered", () => {
+    const { host, root, onCommit } = renderSecondary();
+
+    act(() => {
+      host
+        .querySelector<HTMLElement>('[role="slider"][aria-label="Saturation min"]')
+        ?.dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true }));
+    });
+    expect(onCommit.mock.calls.at(-1)?.[0]?.[0]?.key.saturation).toMatchObject({
+      min: 0.99,
+      max: 1,
+    });
+
+    act(() => {
+      host
+        .querySelector<HTMLElement>('[role="slider"][aria-label="Luma max"]')
+        ?.dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true }));
+    });
+    expect(onCommit.mock.calls.at(-1)?.[0]?.[0]?.key.luma).toMatchObject({
+      min: 0,
+      max: 0.01,
+    });
+    act(() => root.unmount());
+  });
+
+  it("preserves legal fractional hue centers at the wrap boundary", () => {
+    const grading = normalizeHfColorGrading({
+      secondaries: [
+        {
+          key: { hue: { center: 359.7, range: 20 } },
+          correction: {},
+        },
+      ],
+    });
+    if (!grading?.secondaries) throw new Error("Expected normalized secondaries");
+    const { host, root } = renderSecondary({ secondaries: grading.secondaries });
+    const hue = host.querySelector<HTMLElement>('[role="slider"][aria-label="Hue"]');
+
+    expect(Number(hue?.getAttribute("aria-valuenow"))).toBeCloseTo(359.7);
+    expect(hue?.getAttribute("aria-valuemax")).toBe("359.99");
+    act(() => root.unmount());
+  });
+
+  it("shows a useful error when frame capture is unavailable", async () => {
+    const { host, root, onCommit } = renderSecondary({
+      captureFrame: vi.fn().mockRejectedValue(new Error("capture unavailable")),
+    });
+    await captureSecondaryFrame(host);
+
+    expect(host.querySelector('[role="alert"]')?.textContent).toContain(
+      "Preview frame unavailable",
+    );
+    expect(onCommit).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("decodes a captured frame once and samples its center from the keyboard", async () => {
+    const pixels = new Uint8ClampedArray(4 * 4 * 4);
+    for (let offset = 0; offset < pixels.length; offset += 4) {
+      pixels[offset] = 255;
+      pixels[offset + 3] = 255;
+    }
+    const decode = vi.spyOn(frameAnalysis, "readColorGradingFramePixels").mockResolvedValue(pixels);
+    const { host, root, onCommit } = renderSecondary({
+      captureFrame: vi.fn().mockResolvedValue({
+        dataUrl: "data:image/png;base64,",
+        width: 4,
+        height: 4,
+      }),
+    });
+    await captureSecondaryFrame(host);
+
+    await act(async () => {
+      host
+        .querySelector<HTMLButtonElement>('[aria-label="Sample color from captured frame"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0 }));
+    });
+
+    expect(decode).toHaveBeenCalledOnce();
+    expect(onCommit.mock.calls[0]?.[0]?.[0]?.key.hue.center).toBeCloseTo(0);
+    const matteToggle = Array.from(
+      host.querySelectorAll<HTMLButtonElement>('button[aria-pressed="true"]'),
+    ).find((button) => button.textContent?.includes("Selection matte"));
+    expect(matteToggle).toBeDefined();
+    act(() => root.unmount());
+  });
+});