feat: cleanup comments

Author: mrMetalWood

src/components/map-3d/index.tsx

@@ -186,20 +186,13 @@ export const Map3D = forwardRef<Map3DRef, Map3DProps>((props, ref) => {
 
   const {addMap3DInstance, removeMap3DInstance} = context;
 
-  // Set up the map instance
   const [map3d, containerRef, map3dRef, cameraStateRef, isReady] =
     useMap3DInstance(props);
 
-  // Set up camera params tracking and updates
   useMap3DCameraParams(map3d, cameraStateRef, props);
-
-  // Set up event handlers
   useMap3DEvents(map3d, props);
-
-  // Set up options updates
   useMap3DOptions(map3d, props);
 
-  // Register/unregister map3d instance with APIProvider
   useEffect(() => {
     if (!map3d) return;
 
@@ -212,8 +205,6 @@ export const Map3D = forwardRef<Map3DRef, Map3DProps>((props, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map3d, id]);
 
-  // Expose imperative handle for animations
-  // Cast to extended type since @types/google.maps may not have animation methods yet
   const map3dWithAnimations = map3d as Map3DElementWithAnimations | null;
   useImperativeHandle(
     ref,
@@ -234,7 +225,6 @@ export const Map3D = forwardRef<Map3DRef, Map3DProps>((props, ref) => {
     [map3d, map3dWithAnimations]
   );
 
-  // Combine styles
   const combinedStyle = useMemo(
     () => ({
       ...DEFAULT_CONTAINER_STYLE,
@@ -243,13 +233,11 @@ export const Map3D = forwardRef<Map3DRef, Map3DProps>((props, ref) => {
     [style]
   );
 
-  // Context value for child components
   const contextValue = useMemo<GoogleMaps3DContextValue>(
     () => ({map3d}),
     [map3d]
   );
 
-  // Don't render the custom element until everything is ready
   if (!isReady) {
     return (
       <div

src/components/map-3d/use-map-3d-camera-params.ts

@@ -46,13 +46,12 @@ export function useMap3DCameraParams(
   const tilt = props.tilt ?? null;
   const roll = props.roll ?? null;
 
-  // This effect runs on every render to check for camera differences
+  // Runs on every render to sync controlled camera props with the map element
   useLayoutEffect(() => {
     if (!map3d) return;
 
     const currentState = cameraStateRef.current;
 
-    // Check center
     if (
       lat !== null &&
       lng !== null &&
@@ -67,22 +66,18 @@ export function useMap3DCameraParams(
       };
     }
 
-    // Check range
     if (range !== null && currentState.range !== range) {
       map3d.range = range;
     }
 
-    // Check heading
     if (heading !== null && currentState.heading !== heading) {
       map3d.heading = heading;
     }
 
-    // Check tilt
     if (tilt !== null && currentState.tilt !== tilt) {
       map3d.tilt = tilt;
     }
 
-    // Check roll
     if (roll !== null && currentState.roll !== roll) {
       map3d.roll = roll;
     }

src/components/map-3d/use-map-3d-events.ts

@@ -170,7 +170,6 @@ export function useMap3DEvents(
     onError
   } = props;
 
-  // Individual camera events
   useMap3DEvent(map3d, 'gmp-centerchange', onCenterChanged, createCameraEvent);
   useMap3DEvent(
     map3d,
@@ -182,7 +181,7 @@ export function useMap3DEvents(
   useMap3DEvent(map3d, 'gmp-rangechange', onRangeChanged, createCameraEvent);
   useMap3DEvent(map3d, 'gmp-rollchange', onRollChanged, createCameraEvent);
 
-  // Aggregated camera changed event
+  // onCameraChanged aggregates all camera property change events into one handler
   useEffect(() => {
     if (!map3d || !onCameraChanged) return;
 
@@ -201,7 +200,6 @@ export function useMap3DEvents(
     };
   }, [map3d, onCameraChanged]);
 
-  // Click event
   useEffect(() => {
     if (!map3d || !onClick) return;
 
@@ -220,7 +218,6 @@ export function useMap3DEvents(
     return () => map3d.removeEventListener('gmp-click', handler);
   }, [map3d, onClick]);
 
-  // Steady change event
   useEffect(() => {
     if (!map3d || !onSteadyChange) return;
 
@@ -237,13 +234,11 @@ export function useMap3DEvents(
     return () => map3d.removeEventListener('gmp-steadychange', handler);
   }, [map3d, onSteadyChange]);
 
-  // Animation end event
   useMap3DEvent(map3d, 'gmp-animationend', onAnimationEnd, (map3d, type) => ({
     type,
     map3d
   }));
 
-  // Error event
   useMap3DEvent(map3d, 'gmp-error', onError, (map3d, type) => ({
     type,
     map3d

src/components/map-3d/use-map-3d-instance.ts

@@ -29,51 +29,38 @@ export function useMap3DInstance(
   cameraStateRef: CameraStateRef3D,
   isReady: boolean
 ] {
-  // Load the maps3d library
   const maps3dLib = useMapsLibrary('maps3d');
-
-  // Track if the custom element is defined
   const [customElementReady, setCustomElementReady] = useState(false);
-
-  // Container ref for the wrapper div
   const [, containerRef] = useCallbackRef<HTMLDivElement>();
-
-  // Ref for the gmp-map-3d element
   const [map3d, map3dRef] = useCallbackRef<google.maps.maps3d.Map3DElement>();
-
-  // Track camera state
   const cameraStateRef = useTrackedCameraStateRef3D(map3d);
 
-  // Wait for custom element definition
   useEffect(() => {
     customElements.whenDefined('gmp-map-3d').then(() => {
       setCustomElementReady(true);
     });
   }, []);
 
-  // Apply initial options when map3d element is ready
+  // Apply initial options once when the element is first available
   useEffect(() => {
     if (!map3d) return;
 
     const {
-      // Extract camera props
       center,
       heading,
       tilt,
       range,
       roll,
-      // Extract default* props (not applied to element)
       defaultCenter,
       defaultHeading,
       defaultTilt,
       defaultRange,
       defaultRoll,
-      // Extract non-element props
+      // Non-element props to exclude
       id,
       style,
       className,
       children,
-      // Extract event props
       onCenterChanged,
       onHeadingChanged,
       onTiltChanged,
@@ -84,21 +71,17 @@ export function useMap3DInstance(
       onSteadyChange,
       onAnimationEnd,
       onError,
-      // Extract options handled elsewhere (use-map-3d-options)
       mode,
       gestureHandling,
-      // Remaining are element options
       ...elementOptions
     } = props;
 
-    // Apply initial camera state from props or defaults
     const initialCenter = center ?? defaultCenter;
     const initialHeading = heading ?? defaultHeading;
     const initialTilt = tilt ?? defaultTilt;
     const initialRange = range ?? defaultRange;
     const initialRoll = roll ?? defaultRoll;
 
-    // Build initial options object
     const initialOptions: Partial<google.maps.maps3d.Map3DElementOptions> = {
       ...elementOptions
     };
@@ -109,7 +92,6 @@ export function useMap3DInstance(
     if (initialRange !== undefined) initialOptions.range = initialRange;
     if (initialRoll !== undefined) initialOptions.roll = initialRoll;
 
-    // Apply all initial options to the element
     Object.assign(map3d, initialOptions);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map3d]); // Only run when map3d element first becomes available

src/components/marker-3d.tsx

@@ -161,10 +161,8 @@ export const Marker3D = forwardRef(function Marker3D(
   const [contentContainer, setContentContainer] =
     useState<HTMLDivElement | null>(null);
 
-  // Track whether we need the interactive variant
   const isInteractive = Boolean(onClick);
 
-  // Expose marker element via ref
   useImperativeHandle(
     ref,
     () =>
@@ -174,7 +172,6 @@ export const Marker3D = forwardRef(function Marker3D(
     [marker]
   );
 
-  // Create marker element and attach to map
   useEffect(() => {
     if (!map3d || !maps3dLibrary) return;
 
@@ -188,50 +185,42 @@ export const Marker3D = forwardRef(function Marker3D(
       newMarker = new maps3dLibrary.Marker3DElement();
     }
 
-    // Append marker to map3d element
     map3d.appendChild(newMarker);
     setMarker(newMarker);
 
-    // Create content container for children
+    // Hidden container used as React portal target for custom marker content
     const container = document.createElement('div');
     container.style.display = 'none';
     document.body.appendChild(container);
     setContentContainer(container);
 
     return () => {
-      // Remove marker from map
       if (newMarker.parentElement) {
         newMarker.parentElement.removeChild(newMarker);
       }
-      // Clean up content container
       container.remove();
       setMarker(null);
       setContentContainer(null);
     };
   }, [map3d, maps3dLibrary, isInteractive]);
 
-  // Sync position prop
   useEffect(() => {
     if (!marker || position === undefined) return;
     marker.position = position;
   }, [marker, position]);
 
-  // Sync altitudeMode prop
   useEffect(() => {
     if (!marker || altitudeMode === undefined) return;
     marker.altitudeMode =
       altitudeMode as unknown as google.maps.maps3d.AltitudeMode;
   }, [marker, altitudeMode]);
 
-  // Sync collisionBehavior prop
   useEffect(() => {
     if (!marker || collisionBehavior === undefined) return;
-    // Cast to the google.maps.CollisionBehavior type expected by Marker3DElement
     marker.collisionBehavior =
       collisionBehavior as google.maps.CollisionBehavior;
   }, [marker, collisionBehavior]);
 
-  // Sync simple props
   useEffect(() => {
     if (!marker) return;
     if (drawsWhenOccluded !== undefined)
@@ -258,29 +247,25 @@ export const Marker3D = forwardRef(function Marker3D(
     if (zIndex !== undefined) marker.zIndex = zIndex;
   }, [marker, zIndex]);
 
-  // Sync title prop (interactive only)
+  // title is only available on Marker3DInteractiveElement
   useEffect(() => {
     if (!marker || !isInteractive) return;
     const interactiveMarker =
       marker as google.maps.maps3d.Marker3DInteractiveElement;
     if (title !== undefined) interactiveMarker.title = title;
   }, [marker, title, isInteractive]);
 
-  // Bind click event for interactive marker
   useDomEventListener(marker, 'gmp-click', onClick);
 
-  // Process children and move to marker slot with template wrapping
+  // Move React children to marker's slot, wrapping img/svg in <template> as required by the API
   useLayoutEffect(() => {
-    // Skip if a child component (like Pin) is handling content
     if (contentHandledExternally) return;
     if (!marker || !contentContainer) return;
 
-    // Clear any existing slotted content
     while (marker.firstChild) {
       marker.removeChild(marker.firstChild);
     }
 
-    // Process each child node in the content container
     const childNodes = Array.from(contentContainer.childNodes);
 
     for (const node of childNodes) {
@@ -290,24 +275,20 @@ export const Marker3D = forwardRef(function Marker3D(
       const tagName = element.tagName.toLowerCase();
 
       if (tagName === 'img' || tagName === 'svg') {
-        // Wrap img and svg in template element
         const template = document.createElement('template');
         template.content.appendChild(element.cloneNode(true));
         marker.appendChild(template);
       } else {
-        // Append other elements directly (e.g., PinElement)
         marker.appendChild(element.cloneNode(true));
       }
     }
   }, [marker, contentContainer, children, contentHandledExternally]);
 
-  // Memoize context value
   const contextValue = useMemo(
     () => ({marker, setContentHandledExternally}),
     [marker]
   );
 
-  // Render children into hidden container, then useLayoutEffect moves them
   if (!contentContainer) return null;
 
   return (