✨ feat: transparency, clipboard paste, face detection optimization

2026-09-02 14:18:35 +00:00 · 2026-05-16 11:53:57 +07:00
parent 80744f40ba
commit b13d70f2db
16 changed files with 1186 additions and 215 deletions
@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CanvasRenderer } from "./canvas-renderer";
+import type { Layer } from "@pien-studio/types";
+
+vi.mock("next/image", () => ({
+  default: ({ alt, src, unoptimized: _unoptimized, ...props }: React.ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean }) => React.createElement("img", { alt, src, ...props }),
+}));
+
+vi.mock("../hooks/use-translations", () => ({
+  useTranslations: () => ({ t: (key: string) => key }),
+}));
+
+class ResizeObserverMock {
+  observe() {}
+  disconnect() {}
+}
+
+describe("CanvasRenderer", () => {
+  beforeEach(() => {
+    vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+    Object.defineProperty(HTMLElement.prototype, "setPointerCapture", { configurable: true, value: vi.fn() });
+  });
+
+  it("keeps the rotation handle interactive", () => {
+    const layer: Layer = {
+      id: "layer-1",
+      type: "image",
+      sourceUri: "data:image/png;base64,test",
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      scale: 1,
+      rotation: 0,
+      opacity: 1,
+    };
+    const onRotateLayer = vi.fn();
+
+    render(
+      <CanvasRenderer
+        layers={[layer]}
+        canvasWidth={200}
+        canvasHeight={200}
+        selectedLayerId={layer.id}
+        onSelectLayer={() => undefined}
+        onMoveLayer={() => undefined}
+        onResizeLayer={() => undefined}
+        onRotateLayer={onRotateLayer}
+        isDark={false}
+      />,
+    );
+
+    const rotateHandle = screen.getByTitle("editor.rotate");
+    expect(rotateHandle).toHaveClass("pointer-events-auto");
+
+    fireEvent(rotateHandle, new MouseEvent("pointerdown", { bubbles: true, button: 0, clientX: 50, clientY: 0 }));
+    fireEvent(rotateHandle, new MouseEvent("pointermove", { bubbles: true, clientX: 100, clientY: 50 }));
+
+    expect(onRotateLayer).toHaveBeenCalledWith(layer.id, 90);
+  });
+});