@buildcores/render-client 1.2.0 → 1.3.0

package/dist/hooks/useZoomPan.d.ts

@@ -0,0 +1,16 @@
+import { type TouchEvent as ReactTouchEvent, type WheelEvent as ReactWheelEvent } from "react";
+interface UseZoomOptions {
+    displayWidth?: number;
+    displayHeight?: number;
+    minScale?: number;
+    maxScale?: number;
+}
+interface UseZoomReturn {
+    scale: number;
+    isPinching: boolean;
+    handleWheel: (event: ReactWheelEvent<Element>) => void;
+    handleTouchStart: (event: ReactTouchEvent<HTMLCanvasElement>) => boolean;
+    reset: () => void;
+}
+export declare const useZoomPan: ({ displayWidth, displayHeight, minScale, maxScale, }?: UseZoomOptions) => UseZoomReturn;
+export {};

package/dist/index.d.ts

@@ -368,6 +368,30 @@ interface RenderBuildRequest {
      * ```
      */
     height?: number;
+    /**
+     * Render quality profile that controls visual effects and rendering speed.
+     *
+     * - **cinematic**: All effects enabled (shadows, ambient occlusion, bloom) for highest quality
+     * - **flat**: No effects for clean, simple product shots
+     * - **fast**: Minimal rendering for fastest processing speed
+     *
+     * @example
+     * ```tsx
+     * const request: RenderBuildRequest = {
+     *   parts: { CPU: ["7xjqsomhr"] },
+     *   profile: 'cinematic'  // High quality with all effects
+     * };
+     * ```
+     *
+     * @example Fast rendering
+     * ```tsx
+     * const request: RenderBuildRequest = {
+     *   parts: { CPU: ["7xjqsomhr"] },
+     *   profile: 'fast'  // Quick render, minimal effects
+     * };
+     * ```
+     */
+    profile?: 'cinematic' | 'flat' | 'fast';
 }
 /**
  * Response structure containing all available parts for each category.

package/dist/index.esm.js

@@ -177,6 +177,8 @@ const renderBuildExperimental = async (request, config) => {
         // Include width and height if provided
         ...(request.width !== undefined ? { width: request.width } : {}),
         ...(request.height !== undefined ? { height: request.height } : {}),
+        // Include profile if provided
+        ...(request.profile ? { profile: request.profile } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
@@ -204,6 +206,8 @@ const createRenderBuildJob = async (request, config) => {
         // Include width and height if provided
         ...(request.width !== undefined ? { width: request.width } : {}),
         ...(request.height !== undefined ? { height: request.height } : {}),
+        // Include profile if provided
+        ...(request.profile ? { profile: request.profile } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD, config), {
         method: "POST",
@@ -267,6 +271,8 @@ const renderSpriteExperimental = async (request, config) => {
         // Include width and height if provided
         ...(request.width !== undefined ? { width: request.width } : {}),
         ...(request.height !== undefined ? { height: request.height } : {}),
+        // Include profile if provided
+        ...(request.profile ? { profile: request.profile } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
@@ -568,8 +574,101 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
             } })) }));
 };
 
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getTouchDistance = (touches) => {
+    const first = touches[0];
+    const second = touches[1];
+    if (!first || !second)
+        return 0;
+    return Math.hypot(second.clientX - first.clientX, second.clientY - first.clientY);
+};
+const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, } = {}) => {
+    const [scale, setScale] = useState(1);
+    const [isPinching, setIsPinching] = useState(false);
+    const scaleRef = useRef(1);
+    const pinchDataRef = useRef({
+        initialDistance: 0,
+        initialScale: 1,
+    });
+    const setScaleSafe = useCallback((next) => {
+        const clamped = clamp(next, minScale, maxScale);
+        if (clamped === scaleRef.current)
+            return;
+        scaleRef.current = clamped;
+        setScale(clamped);
+    }, [minScale, maxScale]);
+    const handleWheel = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const deltaY = event.deltaMode === 1
+            ? event.deltaY * 16
+            : event.deltaMode === 2
+                ? event.deltaY * (displayHeight ?? 300)
+                : event.deltaY;
+        const zoomFactor = Math.exp(-deltaY * 0.0015);
+        const nextScale = scaleRef.current * zoomFactor;
+        setScaleSafe(nextScale);
+    }, [setScaleSafe, displayHeight]);
+    const handleTouchStart = useCallback((event) => {
+        if (event.touches.length < 2) {
+            return false;
+        }
+        const distance = getTouchDistance(event.touches);
+        if (!distance) {
+            return false;
+        }
+        pinchDataRef.current = {
+            initialDistance: distance,
+            initialScale: scaleRef.current,
+        };
+        setIsPinching(true);
+        event.preventDefault();
+        return true;
+    }, []);
+    useEffect(() => {
+        if (!isPinching)
+            return;
+        const handleMove = (event) => {
+            if (event.touches.length < 2)
+                return;
+            const distance = getTouchDistance(event.touches);
+            if (!distance || pinchDataRef.current.initialDistance === 0)
+                return;
+            const scaleFactor = distance / pinchDataRef.current.initialDistance;
+            const nextScale = pinchDataRef.current.initialScale * scaleFactor;
+            setScaleSafe(nextScale);
+            event.preventDefault();
+        };
+        const handleEnd = (event) => {
+            if (event.touches.length < 2) {
+                setIsPinching(false);
+            }
+        };
+        window.addEventListener("touchmove", handleMove, { passive: false });
+        window.addEventListener("touchend", handleEnd);
+        window.addEventListener("touchcancel", handleEnd);
+        return () => {
+            window.removeEventListener("touchmove", handleMove);
+            window.removeEventListener("touchend", handleEnd);
+            window.removeEventListener("touchcancel", handleEnd);
+        };
+    }, [isPinching, setScaleSafe]);
+    const reset = useCallback(() => {
+        scaleRef.current = 1;
+        setScale(1);
+    }, []);
+    return {
+        scale,
+        isPinching,
+        handleWheel,
+        handleTouchStart,
+        reset,
+    };
+};
+
 const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOptions, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
     const canvasRef = useRef(null);
+    const containerRef = useRef(null);
     const [img, setImg] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [bouncingAllowed, setBouncingAllowed] = useState(false);
@@ -582,6 +681,10 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
     const cols = spriteMetadata ? spriteMetadata.cols : 12;
     const rows = spriteMetadata ? spriteMetadata.rows : 6;
     const frameRef = useRef(0);
+    const { scale, handleWheel: handleZoomWheel, handleTouchStart: handleZoomTouchStart, reset: resetZoom, } = useZoomPan({
+        displayWidth: displayW,
+        displayHeight: displayH,
+    });
     // Image/frame sizes
     const frameW = img ? img.width / cols : 0;
     const frameH = img ? img.height / rows : 0;
@@ -640,8 +743,12 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
         ctx.clearRect(0, 0, targetW, targetH);
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = "high";
-        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH);
-    }, [img, frameW, frameH, displayW, displayH, cols, total]);
+        const scaledW = targetW * scale;
+        const scaledH = targetH * scale;
+        const offsetX = -((scaledW - targetW) / 2);
+        const offsetY = -((scaledH - targetH) / 2);
+        ctx.drawImage(img, sx, sy, sw, sh, offsetX, offsetY, scaledW, scaledH);
+    }, [img, frameW, frameH, displayW, displayH, cols, total, scale]);
     const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useSpriteScrubbing(canvasRef, total, {
         mouseSensitivity,
         touchSensitivity,
@@ -663,18 +770,66 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
         frameRef.current = frame;
         draw(frame);
     }, [progressValue, hasDragged, img, total, draw]);
-    // Initial draw once image is ready
+    // Reset zoom when sprite changes or container size updates
+    useEffect(() => {
+        resetZoom();
+    }, [spriteSrc, displayW, displayH, resetZoom]);
+    // Add native wheel event listener to prevent scrolling AND handle zoom
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleNativeWheel = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            // Manually trigger zoom since we're preventing the React event
+            event.deltaMode === 1
+                ? event.deltaY * 16
+                : event.deltaMode === 2
+                    ? event.deltaY * (displayH ?? 300)
+                    : event.deltaY;
+            // We need to call the zoom handler directly
+            // Create a synthetic React event-like object
+            const syntheticEvent = {
+                preventDefault: () => { },
+                stopPropagation: () => { },
+                deltaY: event.deltaY,
+                deltaMode: event.deltaMode,
+                currentTarget: container,
+            };
+            handleZoomWheel(syntheticEvent);
+            hasDragged.current = true;
+        };
+        // Add listener to container to catch all wheel events
+        container.addEventListener('wheel', handleNativeWheel, { passive: false });
+        return () => {
+            container.removeEventListener('wheel', handleNativeWheel);
+        };
+    }, [handleZoomWheel, scale, displayH]);
+    // Initial draw once image is ready or zoom changes
     useEffect(() => {
         if (img && !isLoading) {
             draw(frameRef.current);
         }
     }, [img, isLoading, draw]);
-    return (jsxs("div", { style: {
+    const handleCanvasTouchStart = useCallback((event) => {
+        if (handleZoomTouchStart(event)) {
+            hasDragged.current = true;
+            return;
+        }
+        handleTouchStart(event);
+    }, [handleZoomTouchStart, handleTouchStart, hasDragged]);
+    useCallback((event) => {
+        hasDragged.current = true;
+        handleZoomWheel(event);
+    }, [handleZoomWheel, hasDragged]);
+    return (jsxs("div", { ref: containerRef, style: {
             position: "relative",
             width: displayW,
             height: displayH,
             backgroundColor: "black",
-        }, children: [img && (jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, style: {
+            overflow: "hidden",
+        }, children: [img && (jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onTouchStart: handleCanvasTouchStart, style: {
                     width: displayW,
                     height: displayH,
                     cursor: isDragging ? "grabbing" : "grab",