@buildcores/render-client 1.5.0 → 1.6.0

package/dist/index.js

@@ -270,6 +270,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",
@@ -466,6 +468,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",
@@ -693,6 +696,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
                 });
@@ -718,6 +722,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     ...currentParts,
                     showGrid: currentInput.showGrid,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality,
                 }, apiConfig);
@@ -743,6 +748,7 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     format: "sprite",
                     showGrid: currentInput.showGrid,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality,
                 }, apiConfig);
@@ -776,6 +782,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;
         }
@@ -785,6 +792,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;
         }
@@ -877,10 +885,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] = react.useState(1);
+const useZoomPan = ({ displayWidth, displayHeight, minScale = 0.5, maxScale = 2.5, initialScale = 1, } = {}) => {
+    const [scale, setScale] = react.useState(initialScale);
     const [isPinching, setIsPinching] = react.useState(false);
-    const scaleRef = react.useRef(1);
+    const scaleRef = react.useRef(initialScale);
     const pinchDataRef = react.useRef({
         initialDistance: 0,
         initialScale: 1,
@@ -949,9 +957,9 @@ const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, }
         };
     }, [isPinching, setScaleSafe]);
     const reset = react.useCallback(() => {
-        scaleRef.current = 1;
-        setScale(1);
-    }, []);
+        scaleRef.current = initialScale;
+        setScale(initialScale);
+    }, [initialScale]);
     return {
         scale,
         isPinching,
@@ -961,7 +969,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 = react.useRef(null);
     const containerRef = react.useRef(null);
     const [img, setImg] = react.useState(null);
@@ -978,6 +986,7 @@ const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpri
                 profile: parts?.profile,
                 showGrid,
                 cameraOffsetX,
+                cameraZoom,
                 gridSettings,
                 frameQuality,
             };
@@ -987,10 +996,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;
@@ -1003,6 +1013,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