@deck.gl/widgets 9.3.0-alpha.6 → 9.3.0-beta.2

package/dist/index.cjs

@@ -110,25 +110,60 @@ var ZoomWidget = class extends import_core.Widget {
     const ui = (0, import_jsx_runtime3.jsxs)(ButtonGroup, { orientation: this.props.orientation, children: [(0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] });
     (0, import_preact.render)(ui, rootElement);
   }
-  handleZoom(viewId, nextZoom) {
+  isOrthographicView(viewId) {
+    const deck = this.deck;
+    const view = (deck == null ? void 0 : deck.isInitialized) && deck.getView(viewId);
+    return view instanceof import_core.OrthographicView;
+  }
+  handleZoom(viewId, delta) {
+    var _a, _b, _c, _d;
     const viewState = this.getViewState(viewId);
-    if (viewState) {
-      const { minZoom, maxZoom } = viewState;
-      if (Number.isFinite(minZoom)) {
-        nextZoom = Math.max(minZoom, nextZoom);
-      }
-      if (Number.isFinite(maxZoom)) {
-        nextZoom = Math.min(maxZoom, nextZoom);
+    const newViewState = {};
+    if (this.isOrthographicView(viewId)) {
+      const { zoomAxis } = this.props;
+      const { zoomX, minZoomX, maxZoomX, zoomY, minZoomY, maxZoomY } = normalizeOrthographicViewState(viewState);
+      let nextZoom;
+      let nextZoomY;
+      if (zoomAxis === "X") {
+        nextZoom = clamp(zoomX + delta, minZoomX, maxZoomX);
+        nextZoomY = zoomY;
+      } else if (zoomAxis === "Y") {
+        nextZoom = zoomX;
+        nextZoomY = clamp(zoomY + delta, minZoomY, maxZoomY);
+      } else {
+        const clampedDelta = clamp(delta, Math.max(minZoomX - zoomX, minZoomY - zoomY), Math.min(maxZoomX - zoomX, maxZoomY - zoomY));
+        nextZoom = zoomX + clampedDelta;
+        nextZoomY = zoomY + clampedDelta;
       }
+      newViewState.zoom = [nextZoom, nextZoomY];
+      newViewState.zoomX = nextZoom;
+      newViewState.zoomY = nextZoomY;
+      (_b = (_a = this.props).onZoom) == null ? void 0 : _b.call(_a, {
+        viewId,
+        delta,
+        // `zoom` will not match the new state if using 2D zoom. Deprecated behavior for backward compatibility.
+        zoom: zoomAxis === "Y" ? nextZoomY : nextZoom,
+        zoomX: nextZoom,
+        zoomY: nextZoomY
+      });
+    } else {
+      const { zoom = 0, minZoom, maxZoom } = viewState;
+      const nextZoom = clamp(zoom + delta, minZoom, maxZoom);
+      newViewState.zoom = nextZoom;
+      (_d = (_c = this.props).onZoom) == null ? void 0 : _d.call(_c, {
+        viewId,
+        delta,
+        zoom: nextZoom
+      });
     }
     const nextViewState = {
       ...viewState,
-      zoom: nextZoom
+      ...newViewState
     };
     if (this.props.transitionDuration > 0) {
       nextViewState.transitionDuration = this.props.transitionDuration;
       nextViewState.transitionInterpolator = "latitude" in nextViewState ? new import_core.FlyToInterpolator() : new import_core.LinearInterpolator({
-        transitionProps: ["zoom"]
+        transitionProps: "zoomX" in newViewState ? ["zoomX", "zoomY"] : ["zoom"]
       });
     }
     this.setViewState(viewId, nextViewState);
@@ -137,16 +172,14 @@ var ZoomWidget = class extends import_core.Widget {
     var _a;
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
-      const viewState = this.getViewState(viewId);
-      this.handleZoom(viewId, viewState.zoom + 1);
+      this.handleZoom(viewId, 1);
     }
   }
   handleZoomOut() {
     var _a;
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
-      const viewState = this.getViewState(viewId);
-      this.handleZoom(viewId, viewState.zoom - 1);
+      this.handleZoom(viewId, -1);
     }
   }
 };
@@ -158,8 +191,19 @@ ZoomWidget.defaultProps = {
   transitionDuration: 200,
   zoomInLabel: "Zoom In",
   zoomOutLabel: "Zoom Out",
-  viewId: null
+  zoomAxis: "all",
+  viewId: null,
+  onZoom: () => {
+  }
 };
+function clamp(zoom, minZoom, maxZoom) {
+  return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
+}
+function normalizeOrthographicViewState({ zoom = 0, zoomX, zoomY, minZoom = -Infinity, maxZoom = Infinity, minZoomX = minZoom, maxZoomX = maxZoom, minZoomY = minZoom, maxZoomY = maxZoom }) {
+  zoomX = zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
+  zoomY = zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
+  return { zoomX, zoomY, minZoomX, minZoomY, maxZoomX, maxZoomY };
+}
 
 // dist/reset-view-widget.js
 var import_jsx_runtime4 = require("preact/jsx-runtime");
@@ -186,7 +230,7 @@ var ResetViewWidget = class extends import_core2.Widget {
     this.resetViewState(initialViewState);
   }
   resetViewState(viewState) {
-    var _a;
+    var _a, _b, _c;
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
       const nextViewState = {
@@ -195,6 +239,7 @@ var ResetViewWidget = class extends import_core2.Widget {
         // transitionDuration: this.props.transitionDuration,
         // transitionInterpolator: new FlyToInterpolator()
       };
+      (_c = (_b = this.props).onReset) == null ? void 0 : _c.call(_b, { viewId, viewState: nextViewState });
       this.setViewState(viewId, nextViewState);
     }
   }
@@ -205,7 +250,9 @@ ResetViewWidget.defaultProps = {
   placement: "top-left",
   label: "Reset View",
   initialViewState: void 0,
-  viewId: null
+  viewId: null,
+  onReset: () => {
+  }
 };
 
 // dist/gimbal-widget.js
@@ -252,9 +299,11 @@ var GimbalWidget = class extends import_core3.Widget {
     this.updateHTML();
   }
   resetOrbitView(viewport) {
+    var _a, _b;
     const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "OrbitView";
     const viewState = this.getViewState(viewId);
     if ("rotationOrbit" in viewState || "rotationX" in viewState) {
+      (_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, { viewId, rotationOrbit: 0, rotationX: 0 });
       const nextViewState = {
         ...viewState,
         rotationOrbit: 0,
@@ -289,7 +338,9 @@ GimbalWidget.defaultProps = {
   viewId: null,
   label: "Gimbal",
   strokeWidth: 1.5,
-  transitionDuration: 200
+  transitionDuration: 200,
+  onReset: () => {
+  }
 };
 function normalizeAndClampAngle(angle) {
   let normalized = ((angle + 180) % 360 + 360) % 360 - 180;
@@ -349,13 +400,18 @@ var CompassWidget = class extends import_core4.Widget {
     return [0, 0];
   }
   handleCompassReset(viewport) {
+    var _a, _b;
     const viewId = this.viewId || viewport.id;
     if (viewport instanceof import_core4.WebMercatorViewport) {
       const viewState = this.getViewState(viewId);
+      const resetPitch = this.getRotation(viewport)[0] === 0;
+      const nextBearing = 0;
+      const nextPitch = resetPitch ? 0 : viewport.pitch;
+      (_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, { viewId, bearing: nextBearing, pitch: nextPitch });
       const nextViewState = {
         ...viewState,
-        bearing: 0,
-        ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+        bearing: nextBearing,
+        ...resetPitch ? { pitch: nextPitch } : {},
         transitionDuration: this.props.transitionDuration,
         transitionInterpolator: new import_core4.FlyToInterpolator()
       };
@@ -369,7 +425,9 @@ CompassWidget.defaultProps = {
   placement: "top-left",
   viewId: null,
   label: "Reset Compass",
-  transitionDuration: 200
+  transitionDuration: 200,
+  onReset: () => {
+  }
 };
 
 // dist/scale-widget.js
@@ -791,9 +849,19 @@ var GeocoderWidget = class extends import_core6.Widget {
     }), (0, import_jsx_runtime9.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime9.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
   }
   flyTo(viewState) {
-    var _a;
+    var _a, _b, _c;
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
+      if ("longitude" in viewState && "latitude" in viewState) {
+        (_c = (_b = this.props).onGeocode) == null ? void 0 : _c.call(_b, {
+          viewId,
+          coordinates: {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom
+          }
+        });
+      }
       const currentViewState = this.getViewState(viewId);
       const nextViewState = {
         ...currentViewState,
@@ -817,7 +885,9 @@ GeocoderWidget.defaultProps = {
   geocoder: "coordinates",
   customGeocoder: CoordinatesGeocoder,
   apiKey: "",
-  _geolocation: false
+  _geolocation: false,
+  onGeocode: () => {
+  }
 };
 function getGeocoder(props) {
   switch (props.geocoder) {
@@ -858,9 +928,10 @@ var FullscreenWidget = class extends import_core8.Widget {
     document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
   }
   onRenderHTML(rootElement) {
+    const isFullscreen = this.getFullscreen();
     (0, import_preact7.render)((0, import_jsx_runtime10.jsx)(IconButton, { onClick: () => {
       this.handleClick().catch((err) => import_core8.log.error(err)());
-    }, label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel, className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
+    }, label: isFullscreen ? this.props.exitLabel : this.props.enterLabel, className: isFullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
   }
   setProps(props) {
     this.placement = props.placement ?? this.placement;
@@ -871,21 +942,25 @@ var FullscreenWidget = class extends import_core8.Widget {
     var _a, _b, _c;
     return this.props.container || ((_a = this.deck) == null ? void 0 : _a.props.parent) || ((_c = (_b = this.deck) == null ? void 0 : _b.getCanvas()) == null ? void 0 : _c.parentElement);
   }
+  getFullscreen() {
+    return this.fullscreen;
+  }
   onFullscreenChange() {
-    const prevFullscreen = this.fullscreen;
+    var _a, _b;
     const fullscreen = document.fullscreenElement === this.getContainer();
-    if (prevFullscreen !== fullscreen) {
-      this.fullscreen = !this.fullscreen;
+    if (fullscreen !== this.fullscreen) {
+      this.fullscreen = fullscreen;
+      (_b = (_a = this.props).onFullscreenChange) == null ? void 0 : _b.call(_a, fullscreen);
+      this.updateHTML();
     }
-    this.updateHTML();
   }
   async handleClick() {
-    if (this.fullscreen) {
+    const isFullscreen = this.getFullscreen();
+    if (isFullscreen) {
       await this.exitFullscreen();
     } else {
       await this.requestFullscreen();
     }
-    this.updateHTML();
   }
   async requestFullscreen() {
     const container = this.getContainer();
@@ -903,8 +978,11 @@ var FullscreenWidget = class extends import_core8.Widget {
     }
   }
   togglePseudoFullscreen() {
-    var _a;
+    var _a, _b, _c;
     (_a = this.getContainer()) == null ? void 0 : _a.classList.toggle("deck-pseudo-fullscreen");
+    this.fullscreen = !this.fullscreen;
+    (_c = (_b = this.props).onFullscreenChange) == null ? void 0 : _c.call(_b, this.fullscreen);
+    this.updateHTML();
   }
 };
 FullscreenWidget.defaultProps = {
@@ -914,7 +992,9 @@ FullscreenWidget.defaultProps = {
   viewId: null,
   enterLabel: "Enter Fullscreen",
   exitLabel: "Exit Fullscreen",
-  container: void 0
+  container: void 0,
+  onFullscreenChange: () => {
+  }
 };
 
 // dist/splitter-widget.js
@@ -1460,7 +1540,7 @@ var import_preact12 = require("preact");
 var import_jsx_runtime17 = require("preact/jsx-runtime");
 var import_hooks6 = require("preact/hooks");
 var wheelListenerOptions = { passive: false };
-var clamp = (value, min, max) => {
+var clamp2 = (value, min, max) => {
   if (value < min) {
     return min;
   }
@@ -1502,7 +1582,7 @@ function RangeInput(props) {
   const range = max - min;
   const rangeSize = Math.max(0, value[1] - value[0]);
   const maxStart = Math.max(0, range - rangeSize);
-  const clampedStart = clamp(value[0], min, min + maxStart);
+  const clampedStart = clamp2(value[0], min, min + maxStart);
   const { thumbLength, thumbOffset } = (0, import_hooks6.useMemo)(() => {
     if (trackLength <= 0 || range <= 0) {
       return { thumbLength: 0, thumbOffset: 0 };
@@ -1512,7 +1592,7 @@ function RangeInput(props) {
     }
     const nextThumbLength = rangeSize / range;
     const travel = Math.max(0, 1 - nextThumbLength);
-    const ratio = maxStart <= 0 ? 0 : clamp((clampedStart - min) / maxStart, 0, 1);
+    const ratio = maxStart <= 0 ? 0 : clamp2((clampedStart - min) / maxStart, 0, 1);
     return {
       thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
       thumbOffset: travel * ratio
@@ -1522,7 +1602,7 @@ function RangeInput(props) {
     if (!onChange) {
       return;
     }
-    const clamped = clamp(nextStart, min, min + maxStart);
+    const clamped = clamp2(nextStart, min, min + maxStart);
     onChange([clamped, clamped + rangeSize]);
   }, [onChange, min, maxStart, rangeSize]);
   const handleStepNegative = (0, import_hooks6.useCallback)((event) => {
@@ -1551,7 +1631,7 @@ function RangeInput(props) {
     const coordinate = vertical ? event.clientY - trackStart : event.clientX - trackStart;
     const span = Math.max(1, 1 - thumbLength) * trackLength;
     const thumbCenter = thumbLength / 2 * trackLength;
-    const ratio = span <= 0 ? 0 : clamp((coordinate - thumbCenter) / span, 0, 1);
+    const ratio = span <= 0 ? 0 : clamp2((coordinate - thumbCenter) / span, 0, 1);
     emitRange(min + ratio * maxStart);
   }, [vertical, trackLength, thumbLength, emitRange, min, maxStart]);
   const handleThumbPointerDown = (event) => {
@@ -1583,7 +1663,7 @@ function RangeInput(props) {
     const coordinate = vertical ? event.clientY : event.clientX;
     const delta = coordinate - state.startCoord;
     const ratio = state.startRatio + delta / trackLength2;
-    const nextStart = clamp(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+    const nextStart = clamp2(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
     emitRange(nextStart);
     event.preventDefault();
   }, [emitRange, vertical]);
@@ -1714,7 +1794,7 @@ function RangeInput(props) {
 }
 
 // dist/scrollbar-widget.js
-var clamp2 = (value, min, max) => {
+var clamp3 = (value, min, max) => {
   if (value < min) {
     return min;
   }
@@ -1822,7 +1902,7 @@ var ScrollbarWidget = class extends import_core13.Widget {
   }
   getClampedOffset() {
     const maxScroll = this.getMaxScroll();
-    return clamp2(this.scrollOffset, 0, maxScroll);
+    return clamp3(this.scrollOffset, 0, maxScroll);
   }
   isVertical() {
     return this.props.orientation !== "horizontal";
@@ -1841,7 +1921,7 @@ var ScrollbarWidget = class extends import_core13.Widget {
   }
   emitScroll(next) {
     const maxScroll = this.getMaxScroll();
-    const target = clamp2(Math.round(next), 0, maxScroll);
+    const target = clamp3(Math.round(next), 0, maxScroll);
     const viewport = this.viewport;
     if (viewport && target !== this.getClampedOffset()) {
       const pixel = viewport.project(viewport.position);
@@ -2017,74 +2097,124 @@ var import_jsx_runtime22 = require("preact/jsx-runtime");
 var import_core17 = require("@deck.gl/core");
 var import_preact16 = require("preact");
 var TimelineWidget = class extends import_core17.Widget {
+  /**
+   * Returns the current time value.
+   * In controlled mode, returns the time prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getTime() {
+    return this.props.time ?? this.currentTime;
+  }
+  /**
+   * Returns the current playing state.
+   * In controlled mode, returns the playing prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getPlaying() {
+    return this.props.playing ?? this._playing;
+  }
   constructor(props = {}) {
     var _a;
     super(props);
     this.id = "timeline";
     this.className = "deck-widget-timeline";
     this.placement = "fill";
-    this.playing = false;
+    this._playing = false;
     this.timerId = null;
     this.handlePlayPause = () => {
-      if (this.playing) {
-        this.stop();
-      } else {
-        this.play();
+      var _a2, _b;
+      const isPlaying = this.getPlaying();
+      const nextPlaying = !isPlaying;
+      (_b = (_a2 = this.props).onPlayingChange) == null ? void 0 : _b.call(_a2, nextPlaying);
+      if (this.props.playing === void 0) {
+        if (nextPlaying) {
+          this.play();
+        } else {
+          this.stop();
+        }
       }
     };
     this.handleTimeChange = ([value]) => {
       var _a2;
-      this.currentTime = value;
-      (_a2 = this.props.timeline) == null ? void 0 : _a2.setTime(value);
       this.props.onTimeChange(value);
-      this.updateHTML();
+      if (this.props.time === void 0) {
+        this.currentTime = value;
+        (_a2 = this.props.timeline) == null ? void 0 : _a2.setTime(value);
+        this.updateHTML();
+      }
     };
     this.tick = () => {
+      var _a2, _b, _c;
       const { timeRange: [min, max], step, loop } = this.props;
       if (step > 0) {
-        let next = Math.round(this.currentTime / step) * step + step;
+        const currentTime = this.getTime();
+        let next = Math.round(currentTime / step) * step + step;
         if (next > max) {
-          if (this.currentTime < max) {
+          if (currentTime < max) {
             next = max;
           } else if (loop) {
             next = min;
           } else {
             next = max;
-            this.playing = false;
+            this._playing = false;
+            (_b = (_a2 = this.props).onPlayingChange) == null ? void 0 : _b.call(_a2, false);
           }
         }
-        this.currentTime = next;
         this.props.onTimeChange(next);
+        if (this.props.time === void 0) {
+          this.currentTime = next;
+          (_c = this.props.timeline) == null ? void 0 : _c.setTime(next);
+        }
         this.updateHTML();
       }
-      if (this.playing) {
+      if (this._playing) {
         this.timerId = window.setTimeout(this.tick, this.props.playInterval);
       } else {
         this.timerId = null;
       }
     };
     this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
-    (_a = this.props.timeline) == null ? void 0 : _a.setTime(this.currentTime);
+    const syncTime = this.props.time ?? this.currentTime;
+    (_a = this.props.timeline) == null ? void 0 : _a.setTime(syncTime);
     this.setProps(this.props);
   }
   setProps(props) {
+    var _a;
+    const { playing: prevPlaying, time: prevTime } = this.props;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
+    if (props.time !== void 0 && props.time !== prevTime) {
+      (_a = this.props.timeline) == null ? void 0 : _a.setTime(props.time);
+    }
+    if (props.playing !== void 0 && props.playing !== prevPlaying) {
+      if (props.playing && !this._playing) {
+        this._startTimer();
+      } else if (!props.playing && this._playing) {
+        this._stopTimer();
+      }
+    }
   }
   onAdd() {
-    this.playing = false;
+    var _a, _b;
+    this._playing = false;
     this.timerId = null;
-    if (this.props.autoPlay)
-      this.play();
+    if (this.props.autoPlay) {
+      if (this.props.playing !== void 0) {
+        (_b = (_a = this.props).onPlayingChange) == null ? void 0 : _b.call(_a, true);
+      } else {
+        this.play();
+      }
+    }
   }
   onRemove() {
     this.stop();
   }
   onRenderHTML(rootElement) {
     const { timeRange, step, formatLabel } = this.props;
-    const currentTime = this.currentTime;
+    const isPlaying = this.getPlaying();
+    const currentTime = this.getTime();
     rootElement.dataset.placement = this.props.placement;
-    (0, import_preact16.render)((0, import_jsx_runtime22.jsxs)("div", { className: "deck-widget-button-group", children: [this.playing ? (0, import_jsx_runtime22.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime22.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime22.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
+    (0, import_preact16.render)((0, import_jsx_runtime22.jsxs)("div", { className: "deck-widget-button-group", children: [isPlaying ? (0, import_jsx_runtime22.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime22.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime22.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
       {
         position: [currentTime, currentTime + step],
         element: (0, import_jsx_runtime22.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
@@ -2092,22 +2222,33 @@ var TimelineWidget = class extends import_core17.Widget {
     ] })] }), rootElement);
   }
   play() {
-    this.playing = true;
+    var _a;
+    this._playing = true;
     const { timeRange: [min, max] } = this.props;
-    if (this.currentTime >= max) {
+    if (this.props.time === void 0 && this.getTime() >= max) {
       this.currentTime = min;
       this.props.onTimeChange(min);
+      (_a = this.props.timeline) == null ? void 0 : _a.setTime(min);
     }
     this.updateHTML();
     this.tick();
   }
   stop() {
-    this.playing = false;
+    this._stopTimer();
+    this.updateHTML();
+  }
+  /** Start the playback timer (used internally) */
+  _startTimer() {
+    this._playing = true;
+    this.tick();
+  }
+  /** Stop the playback timer (used internally) */
+  _stopTimer() {
+    this._playing = false;
     if (this.timerId !== null) {
       window.clearTimeout(this.timerId);
       this.timerId = null;
     }
-    this.updateHTML();
   }
 };
 TimelineWidget.defaultProps = {
@@ -2119,11 +2260,15 @@ TimelineWidget.defaultProps = {
   timeRange: [0, 100],
   step: 1,
   initialTime: void 0,
+  time: void 0,
   onTimeChange: () => {
   },
   autoPlay: false,
   loop: false,
   playInterval: 1e3,
+  playing: void 0,
+  onPlayingChange: () => {
+  },
   formatLabel: String
 };
 
@@ -2313,44 +2458,64 @@ var ThemeWidget = class extends import_core20.Widget {
   }
   // eslint-disable-next-line complexity
   setProps(props) {
-    const { lightModeTheme, darkModeTheme } = this.props;
+    const { lightModeTheme, darkModeTheme, themeMode: prevThemeMode } = this.props;
     this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
-    switch (this.themeMode) {
+    const currentMode = this.getThemeMode();
+    if (props.themeMode !== void 0 && props.themeMode !== prevThemeMode) {
+      this._applyTheme(props.themeMode);
+      return;
+    }
+    switch (currentMode) {
       case "light":
         if (props.lightModeTheme && !(0, import_core19._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
-          this._setThemeMode("light");
+          this._applyTheme("light");
         }
         break;
       case "dark":
         if (props.darkModeTheme && !(0, import_core19._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
-          this._setThemeMode("dark");
+          this._applyTheme("dark");
         }
         break;
       default:
-        import_core19.log.warn(`Invalid theme mode ${this.themeMode}`)();
+        import_core19.log.warn(`Invalid theme mode ${currentMode}`)();
     }
   }
   onRenderHTML(rootElement) {
     const { lightModeLabel, darkModeLabel } = this.props;
-    (0, import_preact18.render)((0, import_jsx_runtime24.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel, className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
+    const currentMode = this.getThemeMode();
+    (0, import_preact18.render)((0, import_jsx_runtime24.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: currentMode === "dark" ? darkModeLabel : lightModeLabel, className: currentMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
   }
   onAdd() {
-    this._setThemeMode(this.themeMode);
+    this._applyTheme(this.getThemeMode());
+  }
+  /**
+   * Returns the current theme mode.
+   * In controlled mode, returns the themeMode prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getThemeMode() {
+    return this.props.themeMode ?? this.themeMode;
   }
   _handleClick() {
-    const newThemeMode = this.themeMode === "dark" ? "light" : "dark";
-    this._setThemeMode(newThemeMode);
+    var _a, _b;
+    const currentMode = this.getThemeMode();
+    const nextMode = currentMode === "dark" ? "light" : "dark";
+    (_b = (_a = this.props).onThemeModeChange) == null ? void 0 : _b.call(_a, nextMode);
+    if (this.props.themeMode === void 0) {
+      this.themeMode = nextMode;
+      this._applyTheme(nextMode);
+    }
   }
-  _setThemeMode(themeMode) {
+  /** Apply theme styling without changing internal state */
+  _applyTheme(themeMode) {
     var _a;
-    this.themeMode = themeMode;
     const container = (_a = this.rootElement) == null ? void 0 : _a.closest(".deck-widget-container");
     if (container) {
       const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
       (0, import_core19._applyStyles)(container, themeStyle);
-      const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
+      const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
       import_core19.log.log(1, `Switched theme to ${label}`, themeStyle)();
       this.updateHTML();
     }
@@ -2376,7 +2541,10 @@ ThemeWidget.defaultProps = {
   lightModeTheme: LightGlassTheme,
   darkModeLabel: "Dark Mode",
   darkModeTheme: DarkGlassTheme,
-  initialThemeMode: "auto"
+  initialThemeMode: "auto",
+  themeMode: void 0,
+  onThemeModeChange: () => {
+  }
 };
 
 // dist/loading-widget.js
@@ -2404,9 +2572,11 @@ var LoadingWidget = class extends import_core21.Widget {
     );
   }
   onRedraw({ layers }) {
+    var _a, _b;
     const loading = layers.some((layer) => !layer.isLoaded);
     if (loading !== this.loading) {
       this.loading = loading;
+      (_b = (_a = this.props).onLoadingChange) == null ? void 0 : _b.call(_a, loading);
       this.updateHTML();
     }
   }
@@ -2419,7 +2589,9 @@ LoadingWidget.defaultProps = {
   id: "loading",
   placement: "top-left",
   viewId: null,
-  label: "Loading layer data"
+  label: "Loading layer data",
+  onLoadingChange: () => {
+  }
 };
 
 // dist/stats-widget.js
@@ -2444,15 +2616,28 @@ var DEFAULT_FORMATTERS = {
   memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
 };
 var StatsWidget = class extends import_core22.Widget {
+  /**
+   * Returns the current expanded state.
+   * In controlled mode, returns the expanded prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getExpanded() {
+    return this.props.expanded ?? this._expanded;
+  }
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-stats";
     this.placement = "top-left";
     this._counter = 0;
-    this.collapsed = true;
-    this._toggleCollapsed = () => {
-      this.collapsed = !this.collapsed;
-      this.updateHTML();
+    this._expanded = false;
+    this._toggleExpanded = () => {
+      var _a, _b;
+      const nextExpanded = !this.getExpanded();
+      (_b = (_a = this.props).onExpandedChange) == null ? void 0 : _b.call(_a, nextExpanded);
+      if (this.props.expanded === void 0) {
+        this._expanded = nextExpanded;
+        this.updateHTML();
+      }
     };
     this._getFps = () => {
       var _a;
@@ -2460,7 +2645,7 @@ var StatsWidget = class extends import_core22.Widget {
     };
     this._formatters = { ...DEFAULT_FORMATTERS };
     this._resetOnUpdate = { ...this.props.resetOnUpdate };
-    this.collapsed = !props.defaultIsExpanded;
+    this._expanded = Boolean(props.initialExpanded);
     this.setProps(props);
   }
   setProps(props) {
@@ -2483,9 +2668,9 @@ var StatsWidget = class extends import_core22.Widget {
     }
   }
   onRenderHTML(rootElement) {
-    const collapsed = this.collapsed;
-    if (collapsed) {
-      (0, import_preact20.render)((0, import_jsx_runtime26.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleCollapsed }), rootElement);
+    const isExpanded = this.getExpanded();
+    if (!isExpanded) {
+      (0, import_preact20.render)((0, import_jsx_runtime26.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleExpanded }), rootElement);
       return;
     }
     const stats = this._getStats();
@@ -2503,10 +2688,10 @@ var StatsWidget = class extends import_core22.Widget {
         });
       });
     }
-    (0, import_preact20.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), deviceLabel && (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-stats-device", children: deviceLabel }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime26.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
+    (0, import_preact20.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleExpanded, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), deviceLabel && (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-stats-device", children: deviceLabel }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime26.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
   }
   onRedraw() {
-    if (!this.collapsed) {
+    if (this.getExpanded()) {
       const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
       if (this._counter++ % framesPerUpdate === 0) {
         this.updateHTML();
@@ -2561,13 +2746,16 @@ StatsWidget.defaultProps = {
   type: "deck",
   placement: "top-left",
   viewId: null,
-  defaultIsExpanded: false,
+  initialExpanded: false,
   stats: void 0,
   title: "Stats",
   framesPerUpdate: 1,
   formatters: {},
   resetOnUpdate: {},
-  id: "stats"
+  id: "stats",
+  expanded: void 0,
+  onExpandedChange: () => {
+  }
 };
 function FpsIcon({ getFps, onClick }) {
   const [fps, setFps] = (0, import_hooks7.useState)(getFps());