fix(widgets) Widgets should be reactive to prop changes (#9315)

* fix(widgets) Widgets should be reactive to prop changes
visgl · Dec 22, 2024 · 17ab465 · 17ab465
1 parent 05f8c95
commit 17ab465
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/modules/widgets/src/compass-widget.tsx b/modules/widgets/src/compass-widget.tsx
@@ -59,6 +59,8 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
   }
 
   setProps(props: Partial<CompassWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     const oldProps = this.props;
     const el = this.element;
     if (el) {
@@ -74,6 +76,7 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   onViewportChange(viewport: Viewport) {
@@ -105,7 +108,7 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
     return [0, 0];
   }
 
-  update() {
+  private update() {
     const viewId = this.viewId || Object.values(this.viewports)[0]?.id || 'default-view';
     const viewport = this.viewports[viewId];
     const [rz, rx] = this.getRotation(viewport);

diff --git a/modules/widgets/src/fullscreen-widget.tsx b/modules/widgets/src/fullscreen-widget.tsx
@@ -79,8 +79,8 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
 
   private update() {
     const {enterLabel, exitLabel} = this.props;
-    const el = this.element;
-    if (!el) {
+    const element = this.element;
+    if (!element) {
       return;
     }
 
@@ -91,10 +91,11 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
         className={this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter'}
       />
     );
-    render(ui, el);
+    render(ui, element);
   }
 
   setProps(props: Partial<FullscreenWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
     const oldProps = this.props;
     const el = this.element;
     if (el) {
@@ -110,6 +111,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   getContainer() {

diff --git a/modules/widgets/src/zoom-widget.tsx b/modules/widgets/src/zoom-widget.tsx
@@ -50,7 +50,6 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
   id = 'zoom';
   props: ZoomWidgetProps;
   placement: WidgetPlacement = 'top-left';
-  orientation: 'vertical' | 'horizontal' = 'vertical';
   viewId?: string | null = null;
   viewports: {[id: string]: Viewport} = {};
   deck?: Deck<any>;
@@ -60,7 +59,7 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     this.id = props.id || 'zoom';
     this.viewId = props.viewId || null;
     this.placement = props.placement || 'top-left';
-    this.orientation = props.orientation || 'vertical';
+    props.orientation = props.orientation || 'vertical';
     props.transitionDuration = props.transitionDuration || 200;
     props.zoomInLabel = props.zoomInLabel || 'Zoom In';
     props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
@@ -74,25 +73,9 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     element.classList.add('deck-widget', 'deck-widget-zoom');
     if (className) element.classList.add(className);
     applyStyles(element, style);
-    const ui = (
-      <ButtonGroup orientation={this.orientation}>
-        <GroupedIconButton
-          onClick={() => this.handleZoomIn()}
-          label={this.props.zoomInLabel}
-          className="deck-widget-zoom-in"
-        />
-        <GroupedIconButton
-          onClick={() => this.handleZoomOut()}
-          label={this.props.zoomOutLabel}
-          className="deck-widget-zoom-out"
-        />
-      </ButtonGroup>
-    );
-    render(ui, element);
-
     this.deck = deck;
     this.element = element;
-
+    this.update();
     return element;
   }
 
@@ -102,6 +85,8 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
   }
 
   setProps(props: Partial<ZoomWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     const oldProps = this.props;
     const el = this.element;
     if (el) {
@@ -117,6 +102,7 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   onViewportChange(viewport: Viewport) {
@@ -146,4 +132,26 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
       this.handleZoom(viewport, viewport.zoom - 1);
     }
   }
+
+  private update() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+    const ui = (
+      <ButtonGroup orientation={this.props.orientation}>
+        <GroupedIconButton
+          onClick={() => this.handleZoomIn()}
+          label={this.props.zoomInLabel}
+          className="deck-widget-zoom-in"
+        />
+        <GroupedIconButton
+          onClick={() => this.handleZoomOut()}
+          label={this.props.zoomOutLabel}
+          className="deck-widget-zoom-out"
+        />
+      </ButtonGroup>
+    );
+    render(ui, element);
+  }
 }