Overlay fixes

NASA-AMMOS · Jan 15, 2025 · e42119b · e42119b
1 parent 486fd8c
commit e42119b
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 31 deletions.
diff --git a/src/r3f/README.md b/src/r3f/README.md
@@ -205,7 +205,16 @@ The `TilesAttributionOverlay` component must be embedded in a tile set and will
 
 ```jsx
 <TilesRenderer url={ url } { ...props }>
-  <TilesAttributionOverlay />
+  <TilesAttributionOverlay
+
+    { /*
+      Callback function for generating attribution elements from credit info.
+      Takes the list of attributions and a unique "id" assigned to the overlay dom element.
+    */ }
+    generateAttributions={ null }
+
+    { /* remaining properties are assigned to the root overlay element */ }
+  />
 </TilesRenderer>
 ```
 

diff --git a/src/r3f/components/CanvasDOMOverlay.jsx b/src/r3f/components/CanvasDOMOverlay.jsx
@@ -31,7 +31,7 @@ export function CanvasDOMOverlay( { children, ...rest } ) {
 
 		container.style.pointerEvents = 'none';
 		container.style.position = 'absolute';
-		document.body.appendChild( container );
+		gl.domElement.parentNode.appendChild( container );
 
 		return () => {
 

diff --git a/src/r3f/components/TilesAttributionOverlay.jsx b/src/r3f/components/TilesAttributionOverlay.jsx
@@ -3,7 +3,7 @@ import { TilesRendererContext } from './TilesRenderer.jsx';
 import { CanvasDOMOverlay } from './CanvasDOMOverlay.jsx';
 
 // Overlay for displaying tile data set attributions
-export function TilesAttributionOverlay( { children, style, ...rest } ) {
+export function TilesAttributionOverlay( { children, style, generateAttributions, ...rest } ) {
 
 	const tiles = useContext( TilesRendererContext );
 	const [ attributions, setAttributions ] = useState( [] );
@@ -46,33 +46,6 @@ export function TilesAttributionOverlay( { children, style, ...rest } ) {
 
 	}, [ tiles ] );
 
-	// generate elements for each type of attribution
-	const output = [];
-	attributions.forEach( ( att, i ) => {
-
-		let element = null;
-		if ( att.type === 'string' ) {
-
-			element = <div key={ i }>{ att.value }</div>;
-
-		} else if ( att.type === 'html' ) {
-
-			element = <div key={ i } dangerouslySetInnerHTML={ { __html: att.value } } style={ { pointerEvents: 'all' } }/>;
-
-		} else if ( att.type === 'image' ) {
-
-			element = <div key={ i }><img src={ att.value } /></div>;
-
-		}
-
-		if ( element ) {
-
-			output.push( element );
-
-		}
-
-	} );
-
 	// Generate CSS for modifying child elements implicit to the html attributions
 	const classId = useMemo( () => 'class_' + window.crypto.randomUUID(), [] );
 	const styles = useMemo( () => `
@@ -87,6 +60,49 @@ export function TilesAttributionOverlay( { children, style, ...rest } ) {
 		}
 	`, [ classId ] );
 
+	let output;
+	if ( generateAttributions ) {
+
+		output = generateAttributions( attributions, classId );
+
+	} else {
+
+		// generate elements for each type of attribution
+		const elements = [];
+		attributions.forEach( ( att, i ) => {
+
+			let element = null;
+			if ( att.type === 'string' ) {
+
+				element = <div key={ i }>{ att.value }</div>;
+
+			} else if ( att.type === 'html' ) {
+
+				element = <div key={ i } dangerouslySetInnerHTML={ { __html: att.value } } style={ { pointerEvents: 'all' } }/>;
+
+			} else if ( att.type === 'image' ) {
+
+				element = <div key={ i }><img src={ att.value } /></div>;
+
+			}
+
+			if ( element ) {
+
+				elements.push( element );
+
+			}
+
+		} );
+
+		output = (
+			<>
+				<style>{ styles }</style>
+				{ elements }
+			</>
+		);
+
+	}
+
 	return (
 		<CanvasDOMOverlay
 			id={ classId }
@@ -101,7 +117,6 @@ export function TilesAttributionOverlay( { children, style, ...rest } ) {
 			} }
 			{ ...rest }
 		>
-			<style>{ styles }</style>
 			{ children }
 			{ output }
 		</CanvasDOMOverlay>