@principal-ai/file-city-react 0.5.12 → 0.5.13

package/dist/components/FileCity3D/FileCity3D.js

@@ -569,7 +569,7 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
     const { camera } = useThree();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const controlsRef = useRef(null);
-    // Start false - only block rotation during active camera animations
+    const prevTargetRef = useRef(null);
     const isAnimatingRef = useRef(false);
     // Animated camera position and target
     const targetPos = useMemo(() => {
@@ -598,17 +598,9 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
             targetZ: 0,
         };
     }, [focusTarget, isFlat, citySize]);
-    // Set initial camera position on mount
-    useEffect(() => {
-        camera.position.set(targetPos.x, targetPos.y, targetPos.z);
-        if (controlsRef.current) {
-            controlsRef.current.target.set(targetPos.targetX, targetPos.targetY, targetPos.targetZ);
-            controlsRef.current.update();
-        }
-        // Only run on mount
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Spring animation for camera movement (only for subsequent changes)
+    // Create a stable key to detect when target actually changes
+    const targetKey = `${targetPos.x},${targetPos.y},${targetPos.z},${targetPos.targetX},${targetPos.targetZ}`;
+    // Spring animation for camera movement
     const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
         camX: targetPos.x,
         camY: targetPos.y,
@@ -617,6 +609,7 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
         lookY: targetPos.targetY,
         lookZ: targetPos.targetZ,
         config: { tension: 60, friction: 20 },
+        immediate: prevTargetRef.current === null, // Skip animation on first render
         onStart: () => {
             isAnimatingRef.current = true;
         },
@@ -624,14 +617,20 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
             isAnimatingRef.current = false;
         },
     });
-    // Update camera each frame only while spring is animating
-    // Once animation settles, let OrbitControls handle user interaction
+    // Track target changes
+    useEffect(() => {
+        prevTargetRef.current = targetKey;
+    }, [targetKey]);
+    // Update camera each frame while animating or on first frame
     useFrame(() => {
-        if (!controlsRef.current || !isAnimatingRef.current)
+        if (!controlsRef.current)
             return;
-        camera.position.set(camX.get(), camY.get(), camZ.get());
-        controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
-        controlsRef.current.update();
+        // On first frame or while animating, update camera from spring values
+        if (prevTargetRef.current === null || isAnimatingRef.current) {
+            camera.position.set(camX.get(), camY.get(), camZ.get());
+            controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
+            controlsRef.current.update();
+        }
     });
     const resetToInitial = useCallback(() => {
         const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "type": "module",
   "description": "React components for File City visualization",
   "main": "dist/index.js",

package/src/components/FileCity3D/FileCity3D.tsx

@@ -996,7 +996,7 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
   const { camera } = useThree();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const controlsRef = useRef<any>(null);
-  // Start false - only block rotation during active camera animations
+  const prevTargetRef = useRef<string | null>(null);
   const isAnimatingRef = useRef(false);
 
   // Animated camera position and target
@@ -1027,18 +1027,10 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
     };
   }, [focusTarget, isFlat, citySize]);
 
-  // Set initial camera position on mount
-  useEffect(() => {
-    camera.position.set(targetPos.x, targetPos.y, targetPos.z);
-    if (controlsRef.current) {
-      controlsRef.current.target.set(targetPos.targetX, targetPos.targetY, targetPos.targetZ);
-      controlsRef.current.update();
-    }
-    // Only run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // Create a stable key to detect when target actually changes
+  const targetKey = `${targetPos.x},${targetPos.y},${targetPos.z},${targetPos.targetX},${targetPos.targetZ}`;
 
-  // Spring animation for camera movement (only for subsequent changes)
+  // Spring animation for camera movement
   const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
     camX: targetPos.x,
     camY: targetPos.y,
@@ -1047,6 +1039,7 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
     lookY: targetPos.targetY,
     lookZ: targetPos.targetZ,
     config: { tension: 60, friction: 20 },
+    immediate: prevTargetRef.current === null, // Skip animation on first render
     onStart: () => {
       isAnimatingRef.current = true;
     },
@@ -1055,14 +1048,21 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
     },
   });
 
-  // Update camera each frame only while spring is animating
-  // Once animation settles, let OrbitControls handle user interaction
+  // Track target changes
+  useEffect(() => {
+    prevTargetRef.current = targetKey;
+  }, [targetKey]);
+
+  // Update camera each frame while animating or on first frame
   useFrame(() => {
-    if (!controlsRef.current || !isAnimatingRef.current) return;
+    if (!controlsRef.current) return;
 
-    camera.position.set(camX.get(), camY.get(), camZ.get());
-    controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
-    controlsRef.current.update();
+    // On first frame or while animating, update camera from spring values
+    if (prevTargetRef.current === null || isAnimatingRef.current) {
+      camera.position.set(camX.get(), camY.get(), camZ.get());
+      controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
+      controlsRef.current.update();
+    }
   });
 
   const resetToInitial = useCallback(() => {