@pixel-point/toolcraft 0.0.9 → 0.0.12

package/templates/runtime/export/export.test.ts

@@ -7,6 +7,7 @@ import {
   getToolcraftImageExportSize,
   getToolcraftRetinaExportPixelRatio,
   getToolcraftRetinaExportSize,
+  getToolcraftVideoExportSize,
   shouldIncludeToolcraftExportBackground,
   shouldIncludeToolcraftPreviewBackground,
 } from "./export";
@@ -185,6 +186,68 @@ describe("Toolcraft export helpers", () => {
       });
   });
 
+  it("resolves current video export to even current output dimensions", () => {
+    const state = createState();
+    state.canvas.size = { height: 101, unit: "px", width: 201 };
+
+    expect(getToolcraftVideoExportSize({ devicePixelRatio: 2, resolution: "current", state }))
+      .toEqual({
+        height: 102,
+        pixelRatio: 102 / 101,
+        width: 202,
+      });
+  });
+
+  it("keeps current video export distinct from 4k export at default canvas size", () => {
+    const state = createState();
+    state.canvas.size = { height: 1080, unit: "px", width: 1920 };
+
+    expect(getToolcraftVideoExportSize({ devicePixelRatio: 2, resolution: "current", state }))
+      .toEqual({
+        height: 1080,
+        pixelRatio: 1,
+        width: 1920,
+      });
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2,
+      width: 3840,
+    });
+  });
+
+  it("fits 4k video export inside an encoder-safe UHD box", () => {
+    const state = createState();
+    state.canvas.size = { height: 900, unit: "px", width: 1440 };
+
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2.4,
+      width: 3456,
+    });
+  });
+
+  it("preserves 16:9 at UHD dimensions for 4k video export", () => {
+    const state = createState();
+    state.canvas.size = { height: 1080, unit: "px", width: 1920 };
+
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2,
+      width: 3840,
+    });
+  });
+
+  it("reports the actual rounded pixel ratio for 4k video export", () => {
+    const state = createState();
+    state.canvas.size = { height: 201, unit: "px", width: 333 };
+
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2160 / 201,
+      width: 3578,
+    });
+  });
+
   it("creates a transparent retina png canvas when png background is disabled", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },

package/templates/runtime/export/export.ts

@@ -4,6 +4,7 @@ import type { ToolcraftState } from "../state/types";
 export type ToolcraftExportFormat = "png" | "video";
 
 export type ToolcraftImageExportResolution = "current" | "2k" | "4k" | "8k";
+export type ToolcraftVideoExportResolution = "current" | "4k";
 
 export type ToolcraftRetinaExportSize = {
   height: number;
@@ -30,6 +31,10 @@ export type ToolcraftImageExportSizeOptions = ToolcraftExportSizeOptions & {
   resolution?: ToolcraftImageExportResolution | string;
 };
 
+export type ToolcraftVideoExportSizeOptions = ToolcraftExportSizeOptions & {
+  resolution?: ToolcraftVideoExportResolution | string;
+};
+
 export type ToolcraftPngRenderContext = {
   canvas: HTMLCanvasElement;
   context: CanvasRenderingContext2D;
@@ -60,6 +65,17 @@ const toolcraftImageExportLongEdges: Record<
   "8k": 8192,
 };
 
+const toolcraftVideoExportMaxSizes: Record<
+  Exclude<ToolcraftVideoExportResolution, "current">,
+  { height: number; width: number }
+> = {
+  "4k": { height: 2160, width: 3840 },
+};
+
+function roundVideoDimension(value: number): number {
+  return Math.max(2, Math.round(value / 2) * 2);
+}
+
 export function getToolcraftRetinaExportPixelRatio(devicePixelRatio?: number): number {
   const globalPixelRatio = (globalThis as typeof globalThis & { devicePixelRatio?: number })
     .devicePixelRatio;
@@ -123,6 +139,45 @@ export function getToolcraftImageExportSize({
   };
 }
 
+export function getToolcraftVideoExportSize({
+  resolution,
+  state,
+}: ToolcraftVideoExportSizeOptions): ToolcraftRetinaExportSize {
+  const normalizedResolution = String(resolution ?? "current").toLowerCase();
+  const targetMaxSize =
+    toolcraftVideoExportMaxSizes[
+      normalizedResolution as Exclude<ToolcraftVideoExportResolution, "current">
+    ];
+
+  if (!targetMaxSize) {
+    const cssWidth = Math.max(1, state.canvas.size.width);
+    const cssHeight = Math.max(1, state.canvas.size.height);
+    const width = roundVideoDimension(cssWidth);
+    const height = roundVideoDimension(cssHeight);
+
+    return {
+      height,
+      pixelRatio: Math.max(width / cssWidth, height / cssHeight),
+      width,
+    };
+  }
+
+  const cssWidth = Math.max(1, state.canvas.size.width);
+  const cssHeight = Math.max(1, state.canvas.size.height);
+  const pixelRatio = Math.min(
+    targetMaxSize.width / cssWidth,
+    targetMaxSize.height / cssHeight,
+  );
+  const width = roundVideoDimension(cssWidth * pixelRatio);
+  const height = roundVideoDimension(cssHeight * pixelRatio);
+
+  return {
+    height,
+    pixelRatio: Math.max(width / cssWidth, height / cssHeight),
+    width,
+  };
+}
+
 export function shouldIncludeToolcraftExportBackground({
   format,
   schema,

package/templates/runtime/index.ts

@@ -10,5 +10,6 @@ export * from "./state/create-template-state";
 export * from "./state/keyframe-evaluation";
 export * from "./state/persistence";
 export * from "./state/reducer";
+export * from "./state/timeline-loop";
 export * from "./state/types";
 export * from "./testing/performance";

package/templates/runtime/react/canvas-shell.test.tsx

@@ -22,7 +22,18 @@ function createSchema() {
   });
 }
 
-function createAutoSizedSchema() {
+function createIntrinsicMediaSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      sizing: { mode: "intrinsic-media" },
+      upload: true,
+    },
+    panels: {},
+  });
+}
+
+function createUploadDefaultSchema() {
   return defineToolcraft({
     canvas: {
       enabled: true,
@@ -87,9 +98,9 @@ describe("CanvasShell", () => {
     expect(editableCanvas?.style.height).toBe("200px");
   });
 
-  it("does not render a fixed editable canvas when the app has not chosen a size", () => {
+  it("does not render a fixed editable canvas for explicit intrinsic media sizing", () => {
     const { container } = render(
-      <ToolcraftRoot schema={createAutoSizedSchema()}>
+      <ToolcraftRoot schema={createIntrinsicMediaSchema()}>
         <div style={{ height: 640, position: "relative", width: 640 }}>
           <CanvasShell />
         </div>
@@ -101,7 +112,7 @@ describe("CanvasShell", () => {
 
   it("renders the canvas slot inside the editable canvas when custom app content is provided", () => {
     const { container } = render(
-      <ToolcraftRoot schema={createAutoSizedSchema()}>
+      <ToolcraftRoot schema={createUploadDefaultSchema()}>
         <div style={{ height: 640, position: "relative", width: 640 }}>
           <CanvasShell>
             <div data-testid="custom-canvas-renderer" />
@@ -497,4 +508,47 @@ describe("CanvasShell", () => {
 
     expect(screen.queryByRole("button", { name: "Select material.png" })).toBeNull();
   });
+
+  it("renders uploaded canvas images with cover crop and runtime transforms", () => {
+    render(
+      <ToolcraftRoot
+        initialState={{
+          layers: [
+            {
+              displayName: "Layer 1",
+              id: "layer-1",
+              kind: "layer",
+              name: "layer-1",
+              visible: true,
+            },
+          ],
+          mediaAssets: [
+            {
+              dataUrl: "data:image/png;base64,test",
+              fileName: "material.png",
+              id: "media-1",
+              layerId: "layer-1",
+              mimeType: "image/png",
+              position: { x: 48, y: -24 },
+              size: { height: 200, unit: "px", width: 300 },
+              transform: { flipHorizontal: true, rotationDeg: 90 },
+            },
+          ],
+          selectedLayerId: "layer-1",
+        }}
+        schema={createSchema()}
+      >
+        <div style={{ height: 640, position: "relative", width: 640 }}>
+          <CanvasShell />
+        </div>
+      </ToolcraftRoot>,
+    );
+
+    const mediaButton = screen.getByRole("button", { name: "Select material.png" });
+    const mediaImage = screen.getByRole("img", { name: "material.png" });
+
+    expect(mediaButton.className).toContain("inset-0");
+    expect(mediaImage.className).toContain("object-cover");
+    expect(mediaImage.getAttribute("style")).toContain("rotate(90deg) scale(-1.5, 1.5)");
+  });
 });

package/templates/runtime/react/canvas-shell.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { clampToolcraftCanvasZoom } from "../state/canvas-zoom";
 import type {
   ToolcraftMediaAsset,
+  ToolcraftMediaTransform,
   ToolcraftPoint,
   ToolcraftState,
 } from "../state/types";
@@ -176,6 +177,33 @@ function isDefaultCanvasImageAsset(
   );
 }
 
+function normalizeMediaRotation(rotationDeg: number | undefined): 0 | 90 | 180 | 270 {
+  const normalized = ((Math.round((rotationDeg ?? 0) / 90) * 90) % 360 + 360) % 360;
+
+  return normalized === 90 || normalized === 180 || normalized === 270 ? normalized : 0;
+}
+
+function getCanvasMediaTransformStyle(
+  transform: ToolcraftMediaTransform | undefined,
+  canvasSize: ToolcraftState["canvas"]["size"],
+): React.CSSProperties {
+  const rotationDeg = normalizeMediaRotation(transform?.rotationDeg);
+  const coverScale =
+    rotationDeg === 90 || rotationDeg === 270
+      ? Math.max(canvasSize.width / canvasSize.height, canvasSize.height / canvasSize.width)
+      : 1;
+  const scaleX = (transform?.flipHorizontal ? -1 : 1) * coverScale;
+  const scaleY = (transform?.flipVertical ? -1 : 1) * coverScale;
+
+  if (rotationDeg === 0 && scaleX === 1 && scaleY === 1) {
+    return {};
+  }
+
+  return {
+    transform: `rotate(${rotationDeg}deg) scale(${scaleX}, ${scaleY})`,
+  };
+}
+
 function getZoomedCanvasOffset({
   clientX,
   clientY,
@@ -507,7 +535,7 @@ export function CanvasShell({
                     <button
                       aria-label={`Select ${mediaAsset.fileName}`}
                       className={cn(
-                        "absolute top-1/2 left-1/2 block cursor-pointer rounded-md border bg-[color:color-mix(in_oklab,var(--background)_84%,transparent)] p-1 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out",
+                        "absolute inset-0 block cursor-pointer overflow-hidden rounded-none border bg-[color:color-mix(in_oklab,var(--background)_84%,transparent)] p-0 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out",
                         selected
                           ? "border-[color:var(--link)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--link)_48%,transparent)]"
                           : "border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] hover:border-[color:color-mix(in_oklab,var(--border)_24%,transparent)]",
@@ -522,21 +550,15 @@ export function CanvasShell({
                         });
                       }}
                       onPointerDown={(event) => event.stopPropagation()}
-                      style={{
-                        transform: `translate(calc(-50% + ${mediaAsset.position.x}px), calc(-50% + ${mediaAsset.position.y}px))`,
-                      }}
                       type="button"
                     >
                       <img
                         alt={mediaAsset.fileName}
-                        className="block select-none object-contain"
+                        className="block size-full select-none object-cover"
                         data-toolcraft-generated-output=""
                         draggable={false}
                         src={mediaAsset.dataUrl}
-                        style={{
-                          height: mediaAsset.size.height,
-                          width: mediaAsset.size.width,
-                        }}
+                        style={getCanvasMediaTransformStyle(mediaAsset.transform, size)}
                       />
                     </button>
                   );