fix(widgets): Minor widget fixes (#9758)

Author: ibgreen

modules/widgets/src/fps-widget.tsx

@@ -38,8 +38,14 @@ export class FpsWidget extends Widget<FpsWidgetProps> {
     super.setProps(props);
   }
 
+  onAdd({}: {deck: Deck<any>; viewId: string | null}): void {
+    this._lastFps = this._getFps();
+    this.updateHTML();
+  }
+
   onRenderHTML(rootElement: HTMLElement): void {
     const fps = this._getFps();
+    // TODO - avoid changing the root element, instead create a child for better styling.
     rootElement.innerText = `FPS:\n${fps}`;
     rootElement.style.backgroundColor = 'white';
     rootElement.style.fontFamily = 'monospace';
@@ -55,11 +61,6 @@ export class FpsWidget extends Widget<FpsWidgetProps> {
     }
   }
 
-  onAdd({}: {deck: Deck<any>; viewId: string | null}): void {
-    this._lastFps = this._getFps();
-    this.updateHTML();
-  }
-
   _getFps(): number {
     // @ts-expect-error protected
     return Math.round(this.deck.metrics.fps ?? 0);

modules/widgets/src/geocoder-widget.tsx

@@ -68,9 +68,9 @@ export class GeocoderWidget extends Widget<GeocoderWidgetProps> {
 
   constructor(props: GeocoderWidgetProps = {}) {
     super(props, GeocoderWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
-    this.setProps(props);
-    this.geocoder = getGeocoder(props);
+    this.placement = this.props.placement ?? this.placement;
+    this.setProps(this.props);
+    this.geocoder = getGeocoder(this.props);
   }
 
   setProps(props: Partial<GeocoderWidgetProps>): void {

modules/widgets/src/info-widget.tsx

@@ -53,6 +53,13 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
     super.setProps(props);
   }
 
+  onCreateRootElement(): HTMLDivElement {
+    const element = super.onCreateRootElement();
+    const style = {margin: '0px', top: '0px', left: '0px', position: 'absolute'};
+    Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
+    return element;
+  }
+
   onViewportChange(viewport) {
     this.viewport = viewport;
     this.updateHTML();
@@ -84,24 +91,13 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
     return this.props.onClick?.(this, info) || false;
   }
 
-  // TODO - Align with onCreateRootElement
-  onAdd({deck, viewId}: {deck: Deck<any>; viewId: string | null}): HTMLDivElement {
-    const {className} = this.props;
-    const element = document.createElement('div');
-    element.classList.add('deck-widget', 'deck-widget-info');
-    if (className) element.classList.add(className);
-    // Ensure absolute positioning relative to the deck container
-    const style = {margin: '0px', top: '0px', left: '0px', position: 'absolute'};
-    Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
+  onAdd({deck, viewId}: {deck: Deck<any>; viewId: string | null}) {
     this.deck = deck;
     if (!viewId) {
       this.viewport = deck.getViewports()[0];
     } else {
       this.viewport = deck.getViewports().find(viewport => viewport.id === viewId);
     }
-    this.rootElement = element;
-    this.updateHTML();
-    return element;
   }
 
   onRenderHTML(rootElement: HTMLElement): void {

test/apps/widgets-example-9.2/app.ts

@@ -120,8 +120,8 @@ const deck = new Deck({
         );
       }
     }),
-    // new _InfoWidget({mode: 'hover', getTooltip}),
-    // new _InfoWidget({mode: 'click', getTooltip}),
+    new _InfoWidget({mode: 'hover', getTooltip}),
+    new _InfoWidget({mode: 'click', getTooltip}),
     new _TimelineWidget({
       placement: 'bottom-left',
       domain: [0, 24],