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

package/dist/components/FileCity3D/FileCity3D.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileCity3D.d.ts","sourceRoot":"","sources":["../../../src/components/FileCity3D/FileCity3D.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileCity3D.d.ts","sourceRoot":"","sources":["../../../src/components/FileCity3D/FileCity3D.tsx"],"names":[],"mappings":"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"}

package/dist/components/FileCity3D/FileCity3D.js

@@ -287,15 +287,16 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
             return;
         buildings.forEach((building, index) => {
             let shouldCollapse = false;
-            // Priority 1: focusDirectory - collapse buildings outside
-            if (focusDirectory) {
-                const isInFocus = isPathInDirectory(building.path, focusDirectory);
-                shouldCollapse = !isInFocus;
-            }
-            // Priority 2: highlightLayers with collapse isolation mode
-            else if (hasActiveHighlightLayers && isolationMode === 'collapse') {
-                const highlight = getHighlightForPath(building.path, highlightLayers);
-                shouldCollapse = highlight === null;
+            const isInFocusDirectory = focusDirectory
+                ? isPathInDirectory(building.path, focusDirectory)
+                : true; // No focusDirectory means all are "in focus"
+            const isHighlighted = hasActiveHighlightLayers
+                ? getHighlightForPath(building.path, highlightLayers) !== null
+                : true; // No highlights means all are "highlighted"
+            // Collapse if outside BOTH focusDirectory AND highlightLayers
+            // (only when collapse mode is active)
+            if (focusDirectory || (hasActiveHighlightLayers && isolationMode === 'collapse')) {
+                shouldCollapse = !isInFocusDirectory && !isHighlighted;
             }
             targetMultipliersRef.current[index] = shouldCollapse ? 0.05 : 1;
         });
@@ -569,12 +570,12 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
     const { camera } = useThree();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const controlsRef = useRef(null);
-    const prevTargetRef = useRef(null);
     const isAnimatingRef = useRef(false);
-    // Animated camera position and target
+    const hasAppliedInitial = useRef(false);
+    const frameCount = useRef(0);
+    // Compute target camera position
     const targetPos = useMemo(() => {
         if (focusTarget) {
-            // Position camera to look at focus target
             const distance = Math.max(focusTarget.size * 2, 50);
             const height = Math.max(focusTarget.size * 1.5, 40);
             return {
@@ -586,9 +587,9 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
                 targetZ: focusTarget.z,
             };
         }
-        // Default: overview of entire city
-        const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
-        const targetZ = isFlat ? 0 : citySize * 1.3;
+        // Default overview
+        const targetHeight = citySize * 1.1;
+        const targetZ = citySize * 1.3;
         return {
             x: 0,
             y: targetHeight,
@@ -597,11 +598,9 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
             targetY: 0,
             targetZ: 0,
         };
-    }, [focusTarget, isFlat, citySize]);
-    // Create a stable key to detect when target actually changes
-    const targetKey = `${targetPos.x},${targetPos.y},${targetPos.z},${targetPos.targetX},${targetPos.targetZ}`;
+    }, [focusTarget, citySize]);
     // Spring animation for camera movement
-    const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
+    const [{ camX, camY, camZ, lookX, lookY, lookZ }, api] = useSpring(() => ({
         camX: targetPos.x,
         camY: targetPos.y,
         camZ: targetPos.z,
@@ -609,44 +608,74 @@ 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;
         },
         onRest: () => {
             isAnimatingRef.current = false;
         },
-    });
-    // Track target changes
+    }));
+    // When targetPos changes after initial, animate to new position
     useEffect(() => {
-        prevTargetRef.current = targetKey;
-    }, [targetKey]);
-    // Update camera each frame while animating or on first frame
+        // Skip the first render - we handle that directly in useFrame
+        if (!hasAppliedInitial.current)
+            return;
+        api.start({
+            camX: targetPos.x,
+            camY: targetPos.y,
+            camZ: targetPos.z,
+            lookX: targetPos.targetX,
+            lookY: targetPos.targetY,
+            lookZ: targetPos.targetZ,
+            onRest: () => {
+                isAnimatingRef.current = false;
+            },
+        });
+    }, [targetPos, api]);
+    // Update camera each frame
     useFrame(() => {
+        frameCount.current++;
+        // Skip first 2 frames to ensure OrbitControls is fully initialized
+        if (frameCount.current < 3)
+            return;
         if (!controlsRef.current)
             return;
-        // On first frame or while animating, update camera from spring values
-        if (prevTargetRef.current === null || isAnimatingRef.current) {
+        // Set initial position: apply camera position directly (no spring animation)
+        if (!hasAppliedInitial.current) {
+            camera.position.set(targetPos.x, targetPos.y, targetPos.z);
+            controlsRef.current.target.set(targetPos.targetX, targetPos.targetY, targetPos.targetZ);
+            controlsRef.current.update();
+            // Sync spring to this position so future animations start from here
+            api.set({
+                camX: targetPos.x,
+                camY: targetPos.y,
+                camZ: targetPos.z,
+                lookX: targetPos.targetX,
+                lookY: targetPos.targetY,
+                lookZ: targetPos.targetZ,
+            });
+            hasAppliedInitial.current = true;
+            return;
+        }
+        // Subsequent frames: only update during animations
+        if (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;
-        const targetZ = isFlat ? 0 : citySize * 1.3;
-        camera.position.set(0, targetHeight, targetZ);
-        camera.lookAt(0, 0, 0);
-        if (controlsRef.current) {
-            controlsRef.current.target.set(0, 0, 0);
-            controlsRef.current.update();
-        }
-    }, [isFlat, citySize, camera]);
-    useEffect(() => {
-        if (!focusTarget) {
-            resetToInitial();
-        }
-    }, [resetToInitial, focusTarget]);
+        const targetHeight = citySize * 1.1;
+        const targetZ = citySize * 1.3;
+        api.start({
+            camX: 0,
+            camY: targetHeight,
+            camZ: targetZ,
+            lookX: 0,
+            lookY: 0,
+            lookZ: 0,
+        });
+    }, [citySize, api]);
     useEffect(() => {
         cameraResetFn = resetToInitial;
         return () => {

package/package.json

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

package/src/components/FileCity3D/FileCity3D.tsx

@@ -491,15 +491,18 @@ function InstancedBuildings({
     buildings.forEach((building, index) => {
       let shouldCollapse = false;
 
-      // Priority 1: focusDirectory - collapse buildings outside
-      if (focusDirectory) {
-        const isInFocus = isPathInDirectory(building.path, focusDirectory);
-        shouldCollapse = !isInFocus;
-      }
-      // Priority 2: highlightLayers with collapse isolation mode
-      else if (hasActiveHighlightLayers && isolationMode === 'collapse') {
-        const highlight = getHighlightForPath(building.path, highlightLayers);
-        shouldCollapse = highlight === null;
+      const isInFocusDirectory = focusDirectory
+        ? isPathInDirectory(building.path, focusDirectory)
+        : true; // No focusDirectory means all are "in focus"
+
+      const isHighlighted = hasActiveHighlightLayers
+        ? getHighlightForPath(building.path, highlightLayers) !== null
+        : true; // No highlights means all are "highlighted"
+
+      // Collapse if outside BOTH focusDirectory AND highlightLayers
+      // (only when collapse mode is active)
+      if (focusDirectory || (hasActiveHighlightLayers && isolationMode === 'collapse')) {
+        shouldCollapse = !isInFocusDirectory && !isHighlighted;
       }
 
       targetMultipliersRef.current![index] = shouldCollapse ? 0.05 : 1;
@@ -996,13 +999,13 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
   const { camera } = useThree();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const controlsRef = useRef<any>(null);
-  const prevTargetRef = useRef<string | null>(null);
   const isAnimatingRef = useRef(false);
+  const hasAppliedInitial = useRef(false);
+  const frameCount = useRef(0);
 
-  // Animated camera position and target
+  // Compute target camera position
   const targetPos = useMemo(() => {
     if (focusTarget) {
-      // Position camera to look at focus target
       const distance = Math.max(focusTarget.size * 2, 50);
       const height = Math.max(focusTarget.size * 1.5, 40);
       return {
@@ -1014,9 +1017,9 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
         targetZ: focusTarget.z,
       };
     }
-    // Default: overview of entire city
-    const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
-    const targetZ = isFlat ? 0 : citySize * 1.3;
+    // Default overview
+    const targetHeight = citySize * 1.1;
+    const targetZ = citySize * 1.3;
     return {
       x: 0,
       y: targetHeight,
@@ -1025,13 +1028,10 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
       targetY: 0,
       targetZ: 0,
     };
-  }, [focusTarget, isFlat, citySize]);
-
-  // Create a stable key to detect when target actually changes
-  const targetKey = `${targetPos.x},${targetPos.y},${targetPos.z},${targetPos.targetX},${targetPos.targetZ}`;
+  }, [focusTarget, citySize]);
 
   // Spring animation for camera movement
-  const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
+  const [{ camX, camY, camZ, lookX, lookY, lookZ }, api] = useSpring(() => ({
     camX: targetPos.x,
     camY: targetPos.y,
     camZ: targetPos.z,
@@ -1039,26 +1039,62 @@ 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;
     },
     onRest: () => {
       isAnimatingRef.current = false;
     },
-  });
+  }));
 
-  // Track target changes
+  // When targetPos changes after initial, animate to new position
   useEffect(() => {
-    prevTargetRef.current = targetKey;
-  }, [targetKey]);
+    // Skip the first render - we handle that directly in useFrame
+    if (!hasAppliedInitial.current) return;
+
+    api.start({
+      camX: targetPos.x,
+      camY: targetPos.y,
+      camZ: targetPos.z,
+      lookX: targetPos.targetX,
+      lookY: targetPos.targetY,
+      lookZ: targetPos.targetZ,
+      onRest: () => {
+        isAnimatingRef.current = false;
+      },
+    });
+  }, [targetPos, api]);
 
-  // Update camera each frame while animating or on first frame
+  // Update camera each frame
   useFrame(() => {
+    frameCount.current++;
+
+    // Skip first 2 frames to ensure OrbitControls is fully initialized
+    if (frameCount.current < 3) return;
     if (!controlsRef.current) return;
 
-    // On first frame or while animating, update camera from spring values
-    if (prevTargetRef.current === null || isAnimatingRef.current) {
+    // Set initial position: apply camera position directly (no spring animation)
+    if (!hasAppliedInitial.current) {
+      camera.position.set(targetPos.x, targetPos.y, targetPos.z);
+      controlsRef.current.target.set(targetPos.targetX, targetPos.targetY, targetPos.targetZ);
+      controlsRef.current.update();
+
+      // Sync spring to this position so future animations start from here
+      api.set({
+        camX: targetPos.x,
+        camY: targetPos.y,
+        camZ: targetPos.z,
+        lookX: targetPos.targetX,
+        lookY: targetPos.targetY,
+        lookZ: targetPos.targetZ,
+      });
+
+      hasAppliedInitial.current = true;
+      return;
+    }
+
+    // Subsequent frames: only update during animations
+    if (isAnimatingRef.current) {
       camera.position.set(camX.get(), camY.get(), camZ.get());
       controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
       controlsRef.current.update();
@@ -1066,23 +1102,18 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
   });
 
   const resetToInitial = useCallback(() => {
-    const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
-    const targetZ = isFlat ? 0 : citySize * 1.3;
-
-    camera.position.set(0, targetHeight, targetZ);
-    camera.lookAt(0, 0, 0);
-
-    if (controlsRef.current) {
-      controlsRef.current.target.set(0, 0, 0);
-      controlsRef.current.update();
-    }
-  }, [isFlat, citySize, camera]);
-
-  useEffect(() => {
-    if (!focusTarget) {
-      resetToInitial();
-    }
-  }, [resetToInitial, focusTarget]);
+    const targetHeight = citySize * 1.1;
+    const targetZ = citySize * 1.3;
+
+    api.start({
+      camX: 0,
+      camY: targetHeight,
+      camZ: targetZ,
+      lookX: 0,
+      lookY: 0,
+      lookZ: 0,
+    });
+  }, [citySize, api]);
 
   useEffect(() => {
     cameraResetFn = resetToInitial;