Add reactivity to examples

visgl · Dec 21, 2024 · 98a82a4 · 98a82a4
1 parent e48c1c9
commit 98a82a4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/docs/developer-guide/custom-widgets/preact-widgets.md b/docs/developer-guide/custom-widgets/preact-widgets.md
@@ -104,6 +104,14 @@ class LayerListWidget implements Widget<LayerListWidgetProps> {
     return element;
   }
 
+  setProps(props: Partial<LayerListWidgetProps>) {
+    // Handle when props change here.
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
+    this.props = {...props};
+    this.update();
+  }
+
   onRedraw({layers}: {layers: Layer[]}) {
     this.layers = layers;
     this.update();
@@ -113,15 +121,15 @@ class LayerListWidget implements Widget<LayerListWidgetProps> {
     this.viewports[viewport.id] = viewport
   }
 
-  update() {
+  private update() {
     const element = this.element;
     if (!element) {
       return;
     }
     let layers = this.layers
     if (this.deck?.props.layerFilter) {
       const ui = (
-        {viewports.values().map(viewport => (
+        {this.viewports.values().map(viewport => (
           <div>
             {viewport.id}
             <ul>

diff --git a/docs/developer-guide/custom-widgets/react-widgets.md b/docs/developer-guide/custom-widgets/react-widgets.md
@@ -53,7 +53,7 @@ class RotateWidget implements Widget<RotateWidgetProps> {
 
   constructor(props: RotateWidgetProps) {
     this.id = props.id ?? this.id;
-    this.placement = props.placement || this.placement;
+    this.placement = props.placement ?? this.placement;
     this.props = { ...props };
   }
 
@@ -62,6 +62,13 @@ class RotateWidget implements Widget<RotateWidgetProps> {
     return this.props.ref.current;
   }
 
+  setProps(props: Partial<LayerLoadingWidgetProps>) {
+    // Handle when props change here.
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
+    this.props = {...props};
+  }
+
   onViewportChange(viewport) {
     this.viewports[viewport.id] = viewport;
   }

diff --git a/docs/developer-guide/custom-widgets/universal-widgets.md b/docs/developer-guide/custom-widgets/universal-widgets.md
@@ -287,7 +287,7 @@ interface LayerLoadingWidgetProps {
   className?: string;
 }
 
-class LayerListWidget implements Widget<LayerLoadingWidgetProps> {
+class LayerLoadingWidget implements Widget<LayerLoadingWidgetProps> {
   id = 'layer-loading-widget';
   props: LayerLoadingWidgetProps;
   placement: WidgetPlacement = 'top-left';
@@ -318,16 +318,19 @@ class LayerListWidget implements Widget<LayerLoadingWidgetProps> {
   }
 
   setProps(props: Partial<LayerLoadingWidgetProps>) {
+    // Handle when props change here.
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     this.props = {...props};
+    this.update();
   }
 
   onRedraw({layers}: {layers: Layer[]}) {
     this.layers = layers;
     this.update();
   }
 
-  update() {
+  private update() {
     const element = this.element;
     if (!element) {
       return;