@buildcores/render-client 1.5.0 → 1.6.0

package/dist/hooks/useSpriteRender.d.ts

@@ -35,6 +35,7 @@ export type SpriteRenderInput = {
     parts: RenderBuildRequest;
     showGrid?: boolean;
     cameraOffsetX?: number;
+    cameraZoom?: number;
     gridSettings?: RenderGridSettings;
     frameQuality?: 'standard' | 'high';
 } | {
@@ -43,6 +44,7 @@ export type SpriteRenderInput = {
     profile?: 'cinematic' | 'flat' | 'fast';
     showGrid?: boolean;
     cameraOffsetX?: number;
+    cameraZoom?: number;
     gridSettings?: RenderGridSettings;
     frameQuality?: 'standard' | 'high';
 };

package/dist/hooks/useZoomPan.d.ts

@@ -4,6 +4,7 @@ interface UseZoomOptions {
     displayHeight?: number;
     minScale?: number;
     maxScale?: number;
+    initialScale?: number;
 }
 interface UseZoomReturn {
     scale: number;
@@ -12,5 +13,5 @@ interface UseZoomReturn {
     handleTouchStart: (event: ReactTouchEvent<HTMLCanvasElement>) => boolean;
     reset: () => void;
 }
-export declare const useZoomPan: ({ displayWidth, displayHeight, minScale, maxScale, }?: UseZoomOptions) => UseZoomReturn;
+export declare const useZoomPan: ({ displayWidth, displayHeight, minScale, maxScale, initialScale, }?: UseZoomOptions) => UseZoomReturn;
 export {};

package/dist/index.d.ts

@@ -315,6 +315,46 @@ interface BuildRenderProps {
      * @default "standard"
      */
     frameQuality?: 'standard' | 'high';
+    /**
+     * Initial zoom level for the build.
+     * Range: 0.5 (50%) to 2.5 (250%). Values less than 1 make the build appear smaller,
+     * values greater than 1 make it appear larger.
+     *
+     * @example
+     * ```tsx
+     * <BuildRender
+     *   shareCode="abc123"
+     *   zoom={0.7}  // 70% size - build appears smaller
+     * />
+     *
+     * <BuildRender
+     *   shareCode="abc123"
+     *   zoom={1.5}  // 150% size - build appears larger
+     * />
+     * ```
+     *
+     * @default 1
+     */
+    zoom?: number;
+    /**
+     * Camera zoom level for server-side rendering.
+     * Values > 1 move the camera further away (build appears smaller in the sprite).
+     * Values < 1 move the camera closer (build appears larger in the sprite).
+     *
+     * Use this for higher quality scaled-down renders vs client-side zoom scaling.
+     * Range: 0.5 to 2.0
+     *
+     * @example
+     * ```tsx
+     * <BuildRender
+     *   shareCode="abc123"
+     *   cameraZoom={1.3}  // Camera 30% further away - smaller build in sprite
+     * />
+     * ```
+     *
+     * @default 1
+     */
+    cameraZoom?: number;
 }
 /**
  * API configuration for environment and authentication
@@ -531,6 +571,15 @@ interface RenderBuildRequest {
      * @default "standard"
      */
     frameQuality?: 'standard' | 'high';
+    /**
+     * Camera zoom level for server-side rendering.
+     * Values > 1 move the camera further away (build appears smaller in the sprite).
+     * Values < 1 move the camera closer (build appears larger in the sprite).
+     * Range: 0.5 to 2.0
+     *
+     * @default 1
+     */
+    cameraZoom?: number;
 }
 /**
  * Response structure containing all available parts for each category.
@@ -674,6 +723,11 @@ interface BuildResponse {
     partDetails: {
         [K in PartCategory]?: PartDetailsWithCategory[];
     };
+    /**
+     * Whether the case in this build has an interactive 3D model available.
+     * If false, the build cannot be rendered in 3D.
+     */
+    hasInteractiveModel: boolean;
 }
 /**
  * Response from the get parts by IDs endpoint.
@@ -725,6 +779,8 @@ interface RenderByShareCodeOptions {
     gridSettings?: GridSettings;
     /** Frame quality - 'standard' (72 frames) or 'high' (144 frames for smoother animation) */
     frameQuality?: 'standard' | 'high';
+    /** Camera zoom level for rendering. Values > 1 move camera further (build appears smaller). Range: 0.5 to 2.0 */
+    cameraZoom?: number;
     /** Polling interval in milliseconds (default: 1500) */
     pollIntervalMs?: number;
     /** Timeout in milliseconds (default: 120000 = 2 minutes) */
@@ -867,6 +923,7 @@ type SpriteRenderInput = {
     parts: RenderBuildRequest;
     showGrid?: boolean;
     cameraOffsetX?: number;
+    cameraZoom?: number;
     gridSettings?: RenderGridSettings;
     frameQuality?: 'standard' | 'high';
 } | {
@@ -875,6 +932,7 @@ type SpriteRenderInput = {
     profile?: 'cinematic' | 'flat' | 'fast';
     showGrid?: boolean;
     cameraOffsetX?: number;
+    cameraZoom?: number;
     gridSettings?: RenderGridSettings;
     frameQuality?: 'standard' | 'high';
 };

package/dist/index.esm.js

@@ -268,6 +268,8 @@ const createRenderBuildJob = async (request, config) => {
         ...(request.gridSettings ? { gridSettings: request.gridSettings } : {}),
         // Include frame quality for sprite rendering
         ...(request.frameQuality ? { frameQuality: request.frameQuality } : {}),
+        // Include camera zoom for render-time scaling
+        ...(request.cameraZoom !== undefined ? { cameraZoom: request.cameraZoom } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD, config), {
         method: "POST",
@@ -464,6 +466,7 @@ const createRenderByShareCodeJob = async (shareCode, config, options) => {
         ...(options?.cameraOffsetX !== undefined ? { cameraOffsetX: options.cameraOffsetX } : {}),
         ...(options?.gridSettings ? { gridSettings: options.gridSettings } : {}),
         ...(options?.frameQuality ? { frameQuality: options.frameQuality } : {}),
+        ...(options?.cameraZoom !== undefined ? { cameraZoom: options.cameraZoom } : {}),
     };
     const response = await fetch(url, {
         method: "POST",
@@ -691,6 +694,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     profile: currentInput.profile,
                     showGrid: currentInput.showGrid,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality: currentInput.frameQuality
                 });
@@ -716,6 +720,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     ...currentParts,
                     showGrid: currentInput.showGrid,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality,
                 }, apiConfig);
@@ -741,6 +746,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     format: "sprite",
                     showGrid: currentInput.showGrid,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality,
                 }, apiConfig);
@@ -774,6 +780,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                 a.profile === b.profile &&
                 a.showGrid === b.showGrid &&
                 a.cameraOffsetX === b.cameraOffsetX &&
+                a.cameraZoom === b.cameraZoom &&
                 a.frameQuality === b.frameQuality &&
                 gridSettingsEqual;
         }
@@ -783,6 +790,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
             return arePartsEqual(a.parts, b.parts) &&
                 a.showGrid === b.showGrid &&
                 a.cameraOffsetX === b.cameraOffsetX &&
+                a.cameraZoom === b.cameraZoom &&
                 a.frameQuality === b.frameQuality &&
                 gridSettingsEqual;
         }
@@ -875,10 +883,10 @@ const getTouchDistance = (touches) => {
         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 useZoomPan = ({ displayWidth, displayHeight, minScale = 0.5, maxScale = 2.5, initialScale = 1, } = {}) => {
+    const [scale, setScale] = useState(initialScale);
     const [isPinching, setIsPinching] = useState(false);
-    const scaleRef = useRef(1);
+    const scaleRef = useRef(initialScale);
     const pinchDataRef = useRef({
         initialDistance: 0,
         initialScale: 1,
@@ -947,9 +955,9 @@ const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, }
         };
     }, [isPinching, setScaleSafe]);
     const reset = useCallback(() => {
-        scaleRef.current = 1;
-        setScale(1);
-    }, []);
+        scaleRef.current = initialScale;
+        setScale(initialScale);
+    }, [initialScale]);
     return {
         scale,
         isPinching,
@@ -959,7 +967,7 @@ const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, }
     };
 };
 
-const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpriteRenderOptions, mouseSensitivity = 0.2, touchSensitivity = 0.2, showGrid, cameraOffsetX, gridSettings, animationMode = 'bounce', spinDuration = 10000, interactive = true, frameQuality, }) => {
+const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpriteRenderOptions, mouseSensitivity = 0.2, touchSensitivity = 0.2, showGrid, cameraOffsetX, cameraZoom, gridSettings, animationMode = 'bounce', spinDuration = 10000, interactive = true, frameQuality, zoom = 1, }) => {
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
     const [img, setImg] = useState(null);
@@ -976,6 +984,7 @@ const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpri
                 profile: parts?.profile,
                 showGrid,
                 cameraOffsetX,
+                cameraZoom,
                 gridSettings,
                 frameQuality,
             };
@@ -985,10 +994,11 @@ const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpri
             parts: parts,
             showGrid,
             cameraOffsetX,
+            cameraZoom,
             gridSettings,
             frameQuality,
         };
-    }, [shareCode, parts, showGrid, cameraOffsetX, gridSettings, frameQuality]);
+    }, [shareCode, parts, showGrid, cameraOffsetX, cameraZoom, gridSettings, frameQuality]);
     // Use custom hook for sprite rendering
     const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(renderInput, apiConfig, undefined, useSpriteRenderOptions);
     const total = spriteMetadata ? spriteMetadata.totalFrames : 72;
@@ -1001,6 +1011,7 @@ const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpri
     const { scale, handleWheel: handleZoomWheel, handleTouchStart: handleZoomTouchStart, reset: resetZoom, } = useZoomPan({
         displayWidth: displayW,
         displayHeight: displayH,
+        initialScale: zoom,
     });
     // Image/frame sizes - only calculate if image dimensions match expected metadata
     // This prevents using stale image with new metadata during transitions