@deck.gl/widgets 9.3.0-beta.1 → 9.3.0

package/dist/dist.dev.js

@@ -659,26 +659,65 @@ var __exports__ = (() => {
       ] });
       B(ui, rootElement);
     }
-    handleZoom(viewId, nextZoom, delta) {
+    isOrthographicView(viewId) {
+      const deck = this.deck;
+      const view = deck?.isInitialized && deck.getView(viewId);
+      return view instanceof import_core2.OrthographicView;
+    }
+    handleZoom(viewId, delta) {
       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;
+        this.props.onZoom?.({
+          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;
+        this.props.onZoom?.({
+          viewId,
+          delta,
+          zoom: nextZoom
+        });
       }
-      this.props.onZoom?.({ 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_core2.FlyToInterpolator() : new import_core2.LinearInterpolator({
-          transitionProps: ["zoom"]
+          transitionProps: "zoomX" in newViewState ? ["zoomX", "zoomY"] : ["zoom"]
         });
       }
       this.setViewState(viewId, nextViewState);
@@ -686,15 +725,13 @@ var __exports__ = (() => {
     handleZoomIn() {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.id) ?? [];
       for (const viewId of viewIds) {
-        const viewState = this.getViewState(viewId);
-        this.handleZoom(viewId, viewState.zoom + 1, 1);
+        this.handleZoom(viewId, 1);
       }
     }
     handleZoomOut() {
       const viewIds = this.viewId ? [this.viewId] : this.deck?.getViews().map((v3) => v3.id) ?? [];
       for (const viewId of viewIds) {
-        const viewState = this.getViewState(viewId);
-        this.handleZoom(viewId, viewState.zoom - 1, -1);
+        this.handleZoom(viewId, -1);
       }
     }
   };
@@ -706,10 +743,29 @@ var __exports__ = (() => {
     transitionDuration: 200,
     zoomInLabel: "Zoom In",
     zoomOutLabel: "Zoom Out",
+    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 };
+  }
 
   // src/reset-view-widget.tsx
   var import_core3 = __toESM(require_core(), 1);
@@ -1921,7 +1977,7 @@ var __exports__ = (() => {
     bottom: "top",
     top: "bottom"
   };
-  function clamp(start, value, end) {
+  function clamp2(start, value, end) {
     return max(start, min(value, end));
   }
   function evaluate(value, param) {
@@ -2281,7 +2337,7 @@ var __exports__ = (() => {
       const min$1 = minPadding;
       const max2 = clientSize - arrowDimensions[length] - maxPadding;
       const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-      const offset3 = clamp(min$1, center, max2);
+      const offset3 = clamp2(min$1, center, max2);
       const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset3 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
       const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
       return {
@@ -2519,14 +2575,14 @@ var __exports__ = (() => {
           const maxSide = mainAxis === "y" ? "bottom" : "right";
           const min2 = mainAxisCoord + overflow[minSide];
           const max2 = mainAxisCoord - overflow[maxSide];
-          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+          mainAxisCoord = clamp2(min2, mainAxisCoord, max2);
         }
         if (checkCrossAxis) {
           const minSide = crossAxis === "y" ? "top" : "left";
           const maxSide = crossAxis === "y" ? "bottom" : "right";
           const min2 = crossAxisCoord + overflow[minSide];
           const max2 = crossAxisCoord - overflow[maxSide];
-          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+          crossAxisCoord = clamp2(min2, crossAxisCoord, max2);
         }
         const limitedCoords = limiter.fn({
           ...state,
@@ -3744,7 +3800,7 @@ var __exports__ = (() => {
 
   // src/lib/components/range-input.tsx
   var wheelListenerOptions = { passive: false };
-  var clamp2 = (value, min2, max2) => {
+  var clamp3 = (value, min2, max2) => {
     if (value < min2) {
       return min2;
     }
@@ -3800,7 +3856,7 @@ var __exports__ = (() => {
     const range = max2 - min2;
     const rangeSize = Math.max(0, value[1] - value[0]);
     const maxStart = Math.max(0, range - rangeSize);
-    const clampedStart = clamp2(value[0], min2, min2 + maxStart);
+    const clampedStart = clamp3(value[0], min2, min2 + maxStart);
     const { thumbLength, thumbOffset } = T2(() => {
       if (trackLength <= 0 || range <= 0) {
         return { thumbLength: 0, thumbOffset: 0 };
@@ -3810,7 +3866,7 @@ var __exports__ = (() => {
       }
       const nextThumbLength = rangeSize / range;
       const travel = Math.max(0, 1 - nextThumbLength);
-      const ratio = maxStart <= 0 ? 0 : clamp2((clampedStart - min2) / maxStart, 0, 1);
+      const ratio = maxStart <= 0 ? 0 : clamp3((clampedStart - min2) / maxStart, 0, 1);
       return {
         thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
         thumbOffset: travel * ratio
@@ -3821,7 +3877,7 @@ var __exports__ = (() => {
         if (!onChange) {
           return;
         }
-        const clamped = clamp2(nextStart, min2, min2 + maxStart);
+        const clamped = clamp3(nextStart, min2, min2 + maxStart);
         onChange([clamped, clamped + rangeSize]);
       },
       [onChange, min2, maxStart, rangeSize]
@@ -3859,7 +3915,7 @@ var __exports__ = (() => {
         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 : clamp2((coordinate - thumbCenter) / span, 0, 1);
+        const ratio = span <= 0 ? 0 : clamp3((coordinate - thumbCenter) / span, 0, 1);
         emitRange(min2 + ratio * maxStart);
       },
       [vertical, trackLength, thumbLength, emitRange, min2, maxStart]
@@ -3894,7 +3950,7 @@ var __exports__ = (() => {
         const coordinate = vertical ? event.clientY : event.clientX;
         const delta = coordinate - state.startCoord;
         const ratio = state.startRatio + delta / trackLength2;
-        const nextStart = clamp2(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+        const nextStart = clamp3(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
         emitRange(nextStart);
         event.preventDefault();
       },
@@ -4084,7 +4140,7 @@ var __exports__ = (() => {
   }
 
   // src/scrollbar-widget.tsx
-  var clamp3 = (value, min2, max2) => {
+  var clamp4 = (value, min2, max2) => {
     if (value < min2) {
       return min2;
     }
@@ -4213,7 +4269,7 @@ var __exports__ = (() => {
     }
     getClampedOffset() {
       const maxScroll = this.getMaxScroll();
-      return clamp3(this.scrollOffset, 0, maxScroll);
+      return clamp4(this.scrollOffset, 0, maxScroll);
     }
     isVertical() {
       return this.props.orientation !== "horizontal";
@@ -4232,7 +4288,7 @@ var __exports__ = (() => {
     }
     emitScroll(next) {
       const maxScroll = this.getMaxScroll();
-      const target = clamp3(Math.round(next), 0, maxScroll);
+      const target = clamp4(Math.round(next), 0, maxScroll);
       const viewport = this.viewport;
       if (viewport && target !== this.getClampedOffset()) {
         const pixel = viewport.project(viewport.position);

package/dist/index.cjs

@@ -110,27 +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, delta) {
-    var _a, _b;
+  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
+      });
     }
-    (_b = (_a = this.props).onZoom) == null ? void 0 : _b.call(_a, { 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);
@@ -139,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, 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, -1);
+      this.handleZoom(viewId, -1);
     }
   }
 };
@@ -160,10 +191,19 @@ ZoomWidget.defaultProps = {
   transitionDuration: 200,
   zoomInLabel: "Zoom In",
   zoomOutLabel: "Zoom Out",
+  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");
@@ -1500,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;
   }
@@ -1542,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 };
@@ -1552,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
@@ -1562,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) => {
@@ -1591,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) => {
@@ -1623,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]);
@@ -1754,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;
   }
@@ -1862,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";
@@ -1881,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);