@deck.gl/widgets 9.0.0-alpha.7 → 9.0.0-beta.10

package/{typed → dist}/themes.d.ts

@@ -6,6 +6,8 @@ export declare const LightTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 export declare const DarkTheme: {
     '--button-background': string;
@@ -15,6 +17,8 @@ export declare const DarkTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 export declare const LightGlassTheme: {
     '--button-background': string;
@@ -24,6 +28,8 @@ export declare const LightGlassTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 export declare const DarkGlassTheme: {
     '--button-background': string;
@@ -33,5 +39,7 @@ export declare const DarkGlassTheme: {
     '--button-backdrop-filter': string;
     '--button-icon-idle': string;
     '--button-icon-hover': string;
+    '--icon-compass-north-color': string;
+    '--icon-compass-south-color': string;
 };
 //# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;CAUtB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;CAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;CAW3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;CAW1B,CAAC"}

package/dist/themes.js

@@ -0,0 +1,44 @@
+export const LightTheme = {
+    '--button-background': '#fff',
+    '--button-stroke': 'rgba(255, 255, 255, 0.3)',
+    '--button-inner-stroke': 'unset',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
+    '--button-backdrop-filter': 'unset',
+    '--button-icon-idle': 'rgba(97, 97, 102, 1)',
+    '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};
+export const DarkTheme = {
+    '--button-background': 'rgba(18, 18, 20, 1)',
+    '--button-stroke': 'rgba(18, 18, 20, 0.30)',
+    '--button-inner-stroke': 'unset',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
+    '--button-backdrop-filter': 'unset',
+    '--button-icon-idle': 'rgba(158, 157, 168, 1)',
+    '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};
+export const LightGlassTheme = {
+    '--button-background': 'rgba(255, 255, 255, 0.6)',
+    '--button-stroke': 'rgba(255, 255, 255, 0.3)',
+    '--button-inner-stroke': '1px solid rgba(255, 255, 255, 0.6)',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
+    '--button-backdrop-filter': 'blur(4px)',
+    '--button-icon-idle': 'rgba(97, 97, 102, 1)',
+    '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};
+export const DarkGlassTheme = {
+    '--button-background': 'rgba(18, 18, 20, 0.75)',
+    '--button-stroke': 'rgba(18, 18, 20, 0.30)',
+    '--button-inner-stroke': '1px solid rgba(18, 18, 20, 0.75)',
+    '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
+    '--button-backdrop-filter': 'blur(4px)',
+    '--button-icon-idle': 'rgba(158, 157, 168, 1)',
+    '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+    '--icon-compass-north-color': '#F05C44',
+    '--icon-compass-south-color': '#C2C2CC'
+};

package/dist/zoom-widget.d.ts

@@ -0,0 +1,55 @@
+import type { Deck, Viewport, Widget, WidgetPlacement } from '@deck.gl/core';
+interface ZoomWidgetProps {
+    id: string;
+    placement?: WidgetPlacement;
+    /**
+     * View to attach to and interact with. Required when using multiple views.
+     */
+    viewId?: string | null;
+    /**
+     * Button orientation.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Tooltip message on zoom in button.
+     */
+    zoomInLabel?: string;
+    /**
+     * Tooltip message on zoom out button.
+     */
+    zoomOutLabel?: string;
+    /**
+     * Zoom transition duration in ms.
+     */
+    transitionDuration?: number;
+    /**
+     * CSS inline style overrides.
+     */
+    style?: Partial<CSSStyleDeclaration>;
+    /**
+     * Additional CSS class.
+     */
+    className?: string;
+}
+export declare class ZoomWidget implements Widget<ZoomWidgetProps> {
+    id: string;
+    props: ZoomWidgetProps;
+    placement: WidgetPlacement;
+    orientation: 'vertical' | 'horizontal';
+    viewId?: string | null;
+    viewport?: Viewport;
+    deck?: Deck;
+    element?: HTMLDivElement;
+    constructor(props: ZoomWidgetProps);
+    onAdd({ deck }: {
+        deck: Deck;
+    }): HTMLDivElement;
+    onRemove(): void;
+    setProps(props: Partial<ZoomWidgetProps>): void;
+    onViewportChange(viewport: any): void;
+    handleZoom(nextZoom: number): void;
+    handleZoomIn(): void;
+    handleZoomOut(): void;
+}
+export {};
+//# sourceMappingURL=zoom-widget.d.ts.map

package/dist/zoom-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-widget.d.ts","sourceRoot":"","sources":["../src/zoom-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAI3E,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,UAAW,YAAW,MAAM,CAAC,eAAe,CAAC;IACxD,EAAE,SAAU;IACZ,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,eAAe,CAAc;IACxC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,cAAc,CAAC;gBAEb,KAAK,EAAE,eAAe;IAYlC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAA;KAAC,GAAG,cAAc;IA8B3C,QAAQ;IAKR,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;IAIxC,gBAAgB,CAAC,QAAQ,KAAA;IAIzB,UAAU,CAAC,QAAQ,EAAE,MAAM;IAY3B,YAAY;IAMZ,aAAa;CAKd"}

package/dist/zoom-widget.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/* global document */
+import { FlyToInterpolator } from '@deck.gl/core';
+import { render } from 'preact';
+import { ButtonGroup, GroupedIconButton } from "./components.js";
+export class ZoomWidget {
+    constructor(props) {
+        this.id = 'zoom';
+        this.placement = 'top-left';
+        this.orientation = 'vertical';
+        this.viewId = null;
+        this.id = props.id || 'zoom';
+        this.viewId = props.viewId || null;
+        this.placement = props.placement || 'top-left';
+        this.orientation = props.orientation || 'vertical';
+        props.transitionDuration = props.transitionDuration || 200;
+        props.zoomInLabel = props.zoomInLabel || 'Zoom In';
+        props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
+        props.style = props.style || {};
+        this.props = props;
+    }
+    onAdd({ deck }) {
+        const { style, className } = this.props;
+        const element = document.createElement('div');
+        element.classList.add('deck-widget', 'deck-widget-zoom');
+        if (className)
+            element.classList.add(className);
+        if (style) {
+            Object.entries(style).map(([key, value]) => element.style.setProperty(key, value));
+        }
+        const ui = (_jsxs(ButtonGroup, { orientation: this.orientation, children: [_jsx(GroupedIconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), _jsx(GroupedIconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] }));
+        render(ui, element);
+        this.deck = deck;
+        this.element = element;
+        return element;
+    }
+    onRemove() {
+        this.deck = undefined;
+        this.element = undefined;
+    }
+    setProps(props) {
+        Object.assign(this.props, props);
+    }
+    onViewportChange(viewport) {
+        this.viewport = viewport;
+    }
+    handleZoom(nextZoom) {
+        const viewId = this.viewId || 'default-view';
+        const nextViewState = {
+            ...this.viewport,
+            zoom: nextZoom,
+            transitionDuration: this.props.transitionDuration,
+            transitionInterpolator: new FlyToInterpolator()
+        };
+        // @ts-ignore Using private method temporary until there's a public one
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    }
+    handleZoomIn() {
+        if (this.viewport) {
+            this.handleZoom(this.viewport.zoom + 1);
+        }
+    }
+    handleZoomOut() {
+        if (this.viewport) {
+            this.handleZoom(this.viewport.zoom - 1);
+        }
+    }
+}

package/dist.min.js

@@ -4,7 +4,6 @@
   else if (typeof define === 'function' && define.amd) define([], factory);
         else if (typeof exports === 'object') exports['deck'] = factory();
   else root['deck'] = factory();})(globalThis, function () {
-"use strict";var __exports__=(()=>{var ye=Object.create;var D=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Fe=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Pe=(t,e)=>{for(var n in e)D(t,n,{get:e[n],enumerable:!0})},U=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of xe(e))!Ce.call(t,i)&&i!==n&&D(t,i,{get:()=>e[i],enumerable:!(o=ke(e,i))||o.enumerable});return t},F=(t,e,n)=>(U(t,e,"default"),n&&U(n,e,"default")),B=(t,e,n)=>(n=t!=null?ye(we(t)):{},U(e||!t||!t.__esModule?D(n,"default",{value:t,enumerable:!0}):n,t)),Ee=t=>U(D({},"__esModule",{value:!0}),t);var $=Fe((ze,Y)=>{Y.exports=globalThis.deck});var R={};Pe(R,{DarkGlassTheme:()=>Be,DarkTheme:()=>je,FullscreenWidget:()=>ge,LightGlassTheme:()=>qe,LightTheme:()=>He});var w={},Z=B($());F(w,B($()));if(!Z.Layer)throw new Error("@deck.gl/core is not found");F(R,w);var be=B($());var j,h,le,Se,E,ee,ie,G,Le,T={},se=[],Te=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,V=Array.isArray;function P(t,e){for(var n in e)t[n]=e[n];return t}function ae(t){var e=t.parentNode;e&&e.removeChild(t)}function Ne(t,e,n){var o,i,r,s={};for(r in e)r=="key"?o=e[r]:r=="ref"?i=e[r]:s[r]=e[r];if(arguments.length>2&&(s.children=arguments.length>3?j.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)s[r]===void 0&&(s[r]=t.defaultProps[r]);return W(t,s,o,i,null)}function W(t,e,n,o,i){var r={type:t,props:e,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:i??++le};return i==null&&h.vnode!=null&&h.vnode(r),r}function q(t){return t.children}function M(t,e){this.props=t,this.context=e}function A(t,e){if(e==null)return t.__?A(t.__,t.__.__k.indexOf(t)+1):null;for(var n;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null)return n.__e;return typeof t.type=="function"?A(t):null}function _e(t){var e,n;if((t=t.__)!=null&&t.__c!=null){for(t.__e=t.__c.base=null,e=0;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null){t.__e=t.__c.base=n.__e;break}return _e(t)}}function te(t){(!t.__d&&(t.__d=!0)&&E.push(t)&&!O.__r++||ee!==h.debounceRendering)&&((ee=h.debounceRendering)||ie)(O)}function O(){var t,e,n,o,i,r,s,a,_;for(E.sort(G);t=E.shift();)t.__d&&(e=E.length,o=void 0,i=void 0,r=void 0,a=(s=(n=t).__v).__e,(_=n.__P)&&(o=[],i=[],(r=P({},s)).__v=s.__v+1,J(_,s,r,n.__n,_.ownerSVGElement!==void 0,s.__h!=null?[a]:null,o,a??A(s),s.__h,i),pe(o,s,i),s.__e!=a&&_e(s)),E.length>e&&E.sort(G));O.__r=0}function ue(t,e,n,o,i,r,s,a,_,g,p){var l,m,c,u,f,S,d,v,x,y=0,b=o&&o.__k||se,N=b.length,C=N,L=e.length;for(n.__k=[],l=0;l<L;l++)(u=n.__k[l]=(u=e[l])==null||typeof u=="boolean"||typeof u=="function"?null:typeof u=="string"||typeof u=="number"||typeof u=="bigint"?W(null,u,null,null,u):V(u)?W(q,{children:u},null,null,null):u.__b>0?W(u.type,u.props,u.key,u.ref?u.ref:null,u.__v):u)!=null?(u.__=n,u.__b=n.__b+1,(v=Ae(u,b,d=l+y,C))===-1?c=T:(c=b[v]||T,b[v]=void 0,C--),J(t,u,c,i,r,s,a,_,g,p),f=u.__e,(m=u.ref)&&c.ref!=m&&(c.ref&&K(c.ref,null,u),p.push(m,u.__c||f,u)),f!=null&&(S==null&&(S=f),(x=c===T||c.__v===null)?v==-1&&y--:v!==d&&(v===d+1?y++:v>d?C>L-d?y+=v-d:y--:y=v<d&&v==d-1?v-d:0),d=l+y,typeof u.type!="function"||v===d&&c.__k!==u.__k?typeof u.type=="function"||v===d&&!x?u.__d!==void 0?(_=u.__d,u.__d=void 0):_=f.nextSibling:_=fe(t,f,_):_=ce(u,_,t),typeof n.type=="function"&&(n.__d=_))):(c=b[l])&&c.key==null&&c.__e&&(c.__e==_&&(_=A(c)),z(c,c,!1));for(n.__e=S,l=N;l--;)b[l]!=null&&(typeof n.type=="function"&&b[l].__e!=null&&b[l].__e==n.__d&&(n.__d=b[l].__e.nextSibling),z(b[l],b[l]))}function ce(t,e,n){for(var o,i=t.__k,r=0;i&&r<i.length;r++)(o=i[r])&&(o.__=t,e=typeof o.type=="function"?ce(o,e,n):fe(n,o.__e,e));return e}function fe(t,e,n){return n==null||n.parentNode!==t?t.insertBefore(e,null):e==n&&e.parentNode!=null||t.insertBefore(e,n),e.nextSibling}function Ae(t,e,n,o){var i=t.key,r=t.type,s=n-1,a=n+1,_=e[n];if(_===null||_&&i==_.key&&r===_.type)return n;if(o>(_!=null?1:0))for(;s>=0||a<e.length;){if(s>=0){if((_=e[s])&&i==_.key&&r===_.type)return s;s--}if(a<e.length){if((_=e[a])&&i==_.key&&r===_.type)return a;a++}}return-1}function Re(t,e,n,o,i){var r;for(r in n)r==="children"||r==="key"||r in e||H(t,r,null,n[r],o);for(r in e)i&&typeof e[r]!="function"||r==="children"||r==="key"||r==="value"||r==="checked"||n[r]===e[r]||H(t,r,e[r],n[r],o)}function ne(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Te.test(e)?n:n+"px"}function H(t,e,n,o,i){var r;e:if(e==="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof o=="string"&&(t.style.cssText=o=""),o)for(e in o)n&&e in n||ne(t.style,e,"");if(n)for(e in n)o&&n[e]===o[e]||ne(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/Capture$/,"")),e=e.toLowerCase()in t?e.toLowerCase().slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=n,n?o||t.addEventListener(e,r?oe:re,r):t.removeEventListener(e,r?oe:re,r);else if(e!=="dangerouslySetInnerHTML"){if(i)e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!=="width"&&e!=="height"&&e!=="href"&&e!=="list"&&e!=="form"&&e!=="tabIndex"&&e!=="download"&&e!=="rowSpan"&&e!=="colSpan"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!=="-"?t.removeAttribute(e):t.setAttribute(e,n))}}function re(t){return this.l[t.type+!1](h.event?h.event(t):t)}function oe(t){return this.l[t.type+!0](h.event?h.event(t):t)}function J(t,e,n,o,i,r,s,a,_,g){var p,l,m,c,u,f,S,d,v,x,y,b,N,C,L,k=e.type;if(e.constructor!==void 0)return null;n.__h!=null&&(_=n.__h,a=e.__e=n.__e,e.__h=null,r=[a]),(p=h.__b)&&p(e);e:if(typeof k=="function")try{if(d=e.props,v=(p=k.contextType)&&o[p.__c],x=p?v?v.props.value:p.__:o,n.__c?S=(l=e.__c=n.__c).__=l.__E:("prototype"in k&&k.prototype.render?e.__c=l=new k(d,x):(e.__c=l=new M(d,x),l.constructor=k,l.render=Ue),v&&v.sub(l),l.props=d,l.state||(l.state={}),l.context=x,l.__n=o,m=l.__d=!0,l.__h=[],l._sb=[]),l.__s==null&&(l.__s=l.state),k.getDerivedStateFromProps!=null&&(l.__s==l.state&&(l.__s=P({},l.__s)),P(l.__s,k.getDerivedStateFromProps(d,l.__s))),c=l.props,u=l.state,l.__v=e,m)k.getDerivedStateFromProps==null&&l.componentWillMount!=null&&l.componentWillMount(),l.componentDidMount!=null&&l.__h.push(l.componentDidMount);else{if(k.getDerivedStateFromProps==null&&d!==c&&l.componentWillReceiveProps!=null&&l.componentWillReceiveProps(d,x),!l.__e&&(l.shouldComponentUpdate!=null&&l.shouldComponentUpdate(d,l.__s,x)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(l.props=d,l.state=l.__s,l.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(I){I&&(I.__=e)}),y=0;y<l._sb.length;y++)l.__h.push(l._sb[y]);l._sb=[],l.__h.length&&s.push(l);break e}l.componentWillUpdate!=null&&l.componentWillUpdate(d,l.__s,x),l.componentDidUpdate!=null&&l.__h.push(function(){l.componentDidUpdate(c,u,f)})}if(l.context=x,l.props=d,l.__P=t,l.__e=!1,b=h.__r,N=0,"prototype"in k&&k.prototype.render){for(l.state=l.__s,l.__d=!1,b&&b(e),p=l.render(l.props,l.state,l.context),C=0;C<l._sb.length;C++)l.__h.push(l._sb[C]);l._sb=[]}else do l.__d=!1,b&&b(e),p=l.render(l.props,l.state,l.context),l.state=l.__s;while(l.__d&&++N<25);l.state=l.__s,l.getChildContext!=null&&(o=P(P({},o),l.getChildContext())),m||l.getSnapshotBeforeUpdate==null||(f=l.getSnapshotBeforeUpdate(c,u)),ue(t,V(L=p!=null&&p.type===q&&p.key==null?p.props.children:p)?L:[L],e,n,o,i,r,s,a,_,g),l.base=e.__e,e.__h=null,l.__h.length&&s.push(l),S&&(l.__E=l.__=null)}catch(I){e.__v=null,(_||r!=null)&&(e.__e=a,e.__h=!!_,r[r.indexOf(a)]=null),h.__e(I,e,n)}else r==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Ie(n.__e,e,n,o,i,r,s,_,g);(p=h.diffed)&&p(e)}function pe(t,e,n){for(var o=0;o<n.length;o++)K(n[o],n[++o],n[++o]);h.__c&&h.__c(e,t),t.some(function(i){try{t=i.__h,i.__h=[],t.some(function(r){r.call(i)})}catch(r){h.__e(r,i.__v)}})}function Ie(t,e,n,o,i,r,s,a,_){var g,p,l,m=n.props,c=e.props,u=e.type,f=0;if(u==="svg"&&(i=!0),r!=null){for(;f<r.length;f++)if((g=r[f])&&"setAttribute"in g==!!u&&(u?g.localName===u:g.nodeType===3)){t=g,r[f]=null;break}}if(t==null){if(u===null)return document.createTextNode(c);t=i?document.createElementNS("http://www.w3.org/2000/svg",u):document.createElement(u,c.is&&c),r=null,a=!1}if(u===null)m===c||a&&t.data===c||(t.data=c);else{if(r=r&&j.call(t.childNodes),p=(m=n.props||T).dangerouslySetInnerHTML,l=c.dangerouslySetInnerHTML,!a){if(r!=null)for(m={},f=0;f<t.attributes.length;f++)m[t.attributes[f].name]=t.attributes[f].value;(l||p)&&(l&&(p&&l.__html==p.__html||l.__html===t.innerHTML)||(t.innerHTML=l&&l.__html||""))}if(Re(t,c,m,i,a),l)e.__k=[];else if(ue(t,V(f=e.props.children)?f:[f],e,n,o,i&&u!=="foreignObject",r,s,r?r[0]:n.__k&&A(n,0),a,_),r!=null)for(f=r.length;f--;)r[f]!=null&&ae(r[f]);a||("value"in c&&(f=c.value)!==void 0&&(f!==t.value||u==="progress"&&!f||u==="option"&&f!==m.value)&&H(t,"value",f,m.value,!1),"checked"in c&&(f=c.checked)!==void 0&&f!==t.checked&&H(t,"checked",f,m.checked,!1))}return t}function K(t,e,n){try{typeof t=="function"?t(e):t.current=e}catch(o){h.__e(o,n)}}function z(t,e,n){var o,i;if(h.unmount&&h.unmount(t),(o=t.ref)&&(o.current&&o.current!==t.__e||K(o,null,e)),(o=t.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(r){h.__e(r,e)}o.base=o.__P=null,t.__c=void 0}if(o=t.__k)for(i=0;i<o.length;i++)o[i]&&z(o[i],e,n||typeof t.type!="function");n||t.__e==null||ae(t.__e),t.__=t.__e=t.__d=void 0}function Ue(t,e,n){return this.constructor(t,n)}function de(t,e,n){var o,i,r,s;h.__&&h.__(t,e),i=(o=typeof n=="function")?null:n&&n.__k||e.__k,r=[],s=[],J(e,t=(!o&&n||e).__k=Ne(q,null,[t]),i||T,T,e.ownerSVGElement!==void 0,!o&&n?[n]:i?null:e.firstChild?j.call(e.childNodes):null,r,!o&&n?n:i?i.__e:e.firstChild,o,s),pe(r,t,s)}j=se.slice,h={__e:function(t,e,n,o){for(var i,r,s;e=e.__;)if((i=e.__c)&&!i.__)try{if((r=i.constructor)&&r.getDerivedStateFromError!=null&&(i.setState(r.getDerivedStateFromError(t)),s=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(t,o||{}),s=i.__d),s)return i.__E=i}catch(a){t=a}throw t}},le=0,Se=function(t){return t!=null&&t.constructor===void 0},M.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=P({},this.state),typeof t=="function"&&(t=t(P({},n),this.props)),t&&P(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),te(this))},M.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),te(this))},M.prototype.render=q,E=[],ie=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,G=function(t,e){return t.__v.__b-e.__v.__b},O.__r=0,Le=0;var he=function(e){var n=e.className,o=e.label,i=e.onClick;return React.createElement("div",{className:"deck-widget-button-border"},React.createElement("button",{className:"deck-widget-button ".concat(n),type:"button",onClick:i,title:o},React.createElement("div",{className:"deck-widget-icon"})))};function ve(t,e,n,o,i,r,s){try{var a=t[r](s),_=a.value}catch(g){n(g);return}a.done?e(_):Promise.resolve(_).then(o,i)}function Q(t){return function(){var e=this,n=arguments;return new Promise(function(o,i){var r=t.apply(e,n);function s(_){ve(r,o,i,s,a,"next",_)}function a(_){ve(r,o,i,s,a,"throw",_)}s(void 0)})}}function X(t,e){return Me(t)||We(t,e)||$e(t,e)||De()}function De(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function $e(t,e){if(t){if(typeof t=="string")return me(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return me(t,e)}}function me(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function We(t,e){var n=t==null?null:typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(n!=null){var o=[],i=!0,r=!1,s,a;try{for(n=n.call(t);!(i=(s=n.next()).done)&&(o.push(s.value),!(e&&o.length===e));i=!0);}catch(_){r=!0,a=_}finally{try{!i&&n.return!=null&&n.return()}finally{if(r)throw a}}return o}}function Me(t){if(Array.isArray(t))return t}function Oe(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var ge=function(){function t(n){Oe(this,t),this.id="fullscreen",this.props=void 0,this.placement="top-left",this.deck=void 0,this.element=void 0,this.fullscreen=!1,this.id=n.id||"fullscreen",this.placement=n.placement||"top-left",n.enterLabel=n.enterLabel||"Enter Fullscreen",n.exitLabel=n.exitLabel||"Exit Fullscreen",n.style=n.style||{},this.props=n}var e=t.prototype;return e.onAdd=function(o){var i=o.deck,r=this.props,s=r.style,a=r.className,_=document.createElement("div");return _.classList.add("deck-widget","deck-widget-fullscreen"),a&&_.classList.add(a),s&&Object.entries(s).map(function(g){var p=X(g,2),l=p[0],m=p[1];return _.style.setProperty(l,m)}),this.deck=i,this.element=_,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),_},e.onRemove=function(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))},e.update=function(){var o=this.props,i=o.enterLabel,r=o.exitLabel,s=this.element;if(s){var a=React.createElement(he,{onClick:this.handleClick.bind(this),label:this.fullscreen?r:i,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});de(a,s)}},e.setProps=function(o){var i=this.props,r=this.element;r&&(i.className!==o.className&&(i.className&&r.classList.remove(i.className),o.className&&r.classList.add(o.className)),(0,be._deepEqual)(i.style,o.style,1)||(i.style&&Object.entries(i.style).map(function(s){var a=X(s,1),_=a[0];return r.style.removeProperty(_)}),o.style&&Object.entries(o.style).map(function(s){var a=X(s,2),_=a[0],g=a[1];return r.style.setProperty(_,g)}))),Object.assign(this.props,o)},e.getContainer=function(){var o,i;return this.props.container||((o=this.deck)===null||o===void 0||(i=o.getCanvas())===null||i===void 0?void 0:i.parentElement)},e.onFullscreenChange=function(){var o=this.fullscreen,i=document.fullscreenElement===this.getContainer();o!==i&&(this.fullscreen=!this.fullscreen),this.update()},e.handleClick=function(){var n=Q(regeneratorRuntime.mark(function i(){return regeneratorRuntime.wrap(function(s){for(;;)switch(s.prev=s.next){case 0:if(!this.fullscreen){s.next=5;break}return s.next=3,this.exitFullscreen();case 3:s.next=7;break;case 5:return s.next=7,this.requestFullscreen();case 7:this.update();case 8:case"end":return s.stop()}},i,this)}));function o(){return n.apply(this,arguments)}return o}(),e.requestFullscreen=function(){var n=Q(regeneratorRuntime.mark(function i(){var r;return regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(r=this.getContainer(),!(r!=null&&r.requestFullscreen)){a.next=6;break}return a.next=4,r.requestFullscreen({navigationUI:"hide"});case 4:a.next=7;break;case 6:this.togglePseudoFullscreen();case 7:case"end":return a.stop()}},i,this)}));function o(){return n.apply(this,arguments)}return o}(),e.exitFullscreen=function(){var n=Q(regeneratorRuntime.mark(function i(){return regeneratorRuntime.wrap(function(s){for(;;)switch(s.prev=s.next){case 0:if(!document.exitFullscreen){s.next=5;break}return s.next=3,document.exitFullscreen();case 3:s.next=6;break;case 5:this.togglePseudoFullscreen();case 6:case"end":return s.stop()}},i,this)}));function o(){return n.apply(this,arguments)}return o}(),e.togglePseudoFullscreen=function(){var o;(o=this.getContainer())===null||o===void 0||o.classList.toggle("deck-pseudo-fullscreen")},t}();var He={"--button-background":"#fff","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)"},je={"--button-background":"rgba(18, 18, 20, 1)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)"},qe={"--button-background":"rgba(255, 255, 255, 0.6)","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"1px solid rgba(255, 255, 255, 0.6)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)"},Be={"--button-background":"rgba(18, 18, 20, 0.75)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"1px solid rgba(18, 18, 20, 0.75)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)"};return Ee(R);})();
+"use strict";var __exports__=(()=>{var xe=Object.create;var B=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var Le=Object.getPrototypeOf,De=Object.prototype.hasOwnProperty;var Se=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),We=(t,e)=>{for(var n in e)B(t,n,{get:e[n],enumerable:!0})},U=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Pe(e))!De.call(t,s)&&s!==n&&B(t,s,{get:()=>e[s],enumerable:!(i=Ce(e,s))||i.enumerable});return t},L=(t,e,n)=>(U(t,e,"default"),n&&U(n,e,"default")),M=(t,e,n)=>(n=t!=null?xe(Le(t)):{},U(e||!t||!t.__esModule?B(n,"default",{value:t,enumerable:!0}):n,t)),Fe=t=>U(B({},"__esModule",{value:!0}),t);var I=Se((Ge,oe)=>{oe.exports=globalThis.deck});var V={};We(V,{CompassWidget:()=>X,DarkGlassTheme:()=>Re,DarkTheme:()=>Ue,FullscreenWidget:()=>q,LightGlassTheme:()=>Be,LightTheme:()=>Ze,ZoomWidget:()=>J});var C={},ie=M(I(),1);L(C,M(I(),1));if(!ie.Layer)throw new Error("@deck.gl/core is not found");L(V,C);var ke=M(I(),1);var $,p,_e,Ee,S,re,ue,K,Ie,N={},de=[],Ne=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,Y=Array.isArray;function D(t,e){for(var n in e)t[n]=e[n];return t}function pe(t){var e=t.parentNode;e&&e.removeChild(t)}function Te(t,e,n){var i,s,r,l={};for(r in e)r=="key"?i=e[r]:r=="ref"?s=e[r]:l[r]=e[r];if(arguments.length>2&&(l.children=arguments.length>3?$.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)l[r]===void 0&&(l[r]=t.defaultProps[r]);return R(t,l,i,s,null)}function R(t,e,n,i,s){var r={type:t,props:e,key:n,ref:i,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:s??++_e};return s==null&&p.vnode!=null&&p.vnode(r),r}function H(t){return t.children}function A(t,e){this.props=t,this.context=e}function O(t,e){if(e==null)return t.__?O(t.__,t.__.__k.indexOf(t)+1):null;for(var n;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null)return n.__e;return typeof t.type=="function"?O(t):null}function fe(t){var e,n;if((t=t.__)!=null&&t.__c!=null){for(t.__e=t.__c.base=null,e=0;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null){t.__e=t.__c.base=n.__e;break}return fe(t)}}function se(t){(!t.__d&&(t.__d=!0)&&S.push(t)&&!G.__r++||re!==p.debounceRendering)&&((re=p.debounceRendering)||ue)(G)}function G(){var t,e,n,i,s,r,l,c,_;for(S.sort(K);t=S.shift();)t.__d&&(e=S.length,i=void 0,s=void 0,r=void 0,c=(l=(n=t).__v).__e,(_=n.__P)&&(i=[],s=[],(r=D({},l)).__v=l.__v+1,ee(_,l,r,n.__n,_.ownerSVGElement!==void 0,l.__h!=null?[c]:null,i,c??O(l),l.__h,s),ve(i,l,s),l.__e!=c&&fe(l)),S.length>e&&S.sort(K));G.__r=0}function he(t,e,n,i,s,r,l,c,_,y,h){var o,b,u,a,d,F,f,g,x,k=0,v=i&&i.__k||de,z=v.length,P=z,E=e.length;for(n.__k=[],o=0;o<E;o++)(a=n.__k[o]=(a=e[o])==null||typeof a=="boolean"||typeof a=="function"?null:typeof a=="string"||typeof a=="number"||typeof a=="bigint"?R(null,a,null,null,a):Y(a)?R(H,{children:a},null,null,null):a.__b>0?R(a.type,a.props,a.key,a.ref?a.ref:null,a.__v):a)!=null?(a.__=n,a.__b=n.__b+1,(g=ze(a,v,f=o+k,P))===-1?u=N:(u=v[g]||N,v[g]=void 0,P--),ee(t,a,u,s,r,l,c,_,y,h),d=a.__e,(b=a.ref)&&u.ref!=b&&(u.ref&&te(u.ref,null,a),h.push(b,a.__c||d,a)),d!=null&&(F==null&&(F=d),(x=u===N||u.__v===null)?g==-1&&k--:g!==f&&(g===f+1?k++:g>f?P>E-f?k+=g-f:k--:k=g<f&&g==f-1?g-f:0),f=o+k,typeof a.type!="function"||g===f&&u.__k!==a.__k?typeof a.type=="function"||g===f&&!x?a.__d!==void 0?(_=a.__d,a.__d=void 0):_=d.nextSibling:_=ge(t,d,_):_=me(a,_,t),typeof n.type=="function"&&(n.__d=_))):(u=v[o])&&u.key==null&&u.__e&&(u.__e==_&&(_=O(u)),Q(u,u,!1));for(n.__e=F,o=z;o--;)v[o]!=null&&(typeof n.type=="function"&&v[o].__e!=null&&v[o].__e==n.__d&&(n.__d=v[o].__e.nextSibling),Q(v[o],v[o]))}function me(t,e,n){for(var i,s=t.__k,r=0;s&&r<s.length;r++)(i=s[r])&&(i.__=t,e=typeof i.type=="function"?me(i,e,n):ge(n,i.__e,e));return e}function ge(t,e,n){return n==null||n.parentNode!==t?t.insertBefore(e,null):e==n&&e.parentNode!=null||t.insertBefore(e,n),e.nextSibling}function ze(t,e,n,i){var s=t.key,r=t.type,l=n-1,c=n+1,_=e[n];if(_===null||_&&s==_.key&&r===_.type)return n;if(i>(_!=null?1:0))for(;l>=0||c<e.length;){if(l>=0){if((_=e[l])&&s==_.key&&r===_.type)return l;l--}if(c<e.length){if((_=e[c])&&s==_.key&&r===_.type)return c;c++}}return-1}function Me(t,e,n,i,s){var r;for(r in n)r==="children"||r==="key"||r in e||j(t,r,null,n[r],i);for(r in e)s&&typeof e[r]!="function"||r==="children"||r==="key"||r==="value"||r==="checked"||n[r]===e[r]||j(t,r,e[r],n[r],i)}function le(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Ne.test(e)?n:n+"px"}function j(t,e,n,i,s){var r;e:if(e==="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof i=="string"&&(t.style.cssText=i=""),i)for(e in i)n&&e in n||le(t.style,e,"");if(n)for(e in n)i&&n[e]===i[e]||le(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/Capture$/,"")),e=e.toLowerCase()in t?e.toLowerCase().slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=n,n?i||t.addEventListener(e,r?ce:ae,r):t.removeEventListener(e,r?ce:ae,r);else if(e!=="dangerouslySetInnerHTML"){if(s)e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!=="width"&&e!=="height"&&e!=="href"&&e!=="list"&&e!=="form"&&e!=="tabIndex"&&e!=="download"&&e!=="rowSpan"&&e!=="colSpan"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!=="-"?t.removeAttribute(e):t.setAttribute(e,n))}}function ae(t){return this.l[t.type+!1](p.event?p.event(t):t)}function ce(t){return this.l[t.type+!0](p.event?p.event(t):t)}function ee(t,e,n,i,s,r,l,c,_,y){var h,o,b,u,a,d,F,f,g,x,k,v,z,P,E,w=e.type;if(e.constructor!==void 0)return null;n.__h!=null&&(_=n.__h,c=e.__e=n.__e,e.__h=null,r=[c]),(h=p.__b)&&h(e);e:if(typeof w=="function")try{if(f=e.props,g=(h=w.contextType)&&i[h.__c],x=h?g?g.props.value:h.__:i,n.__c?F=(o=e.__c=n.__c).__=o.__E:("prototype"in w&&w.prototype.render?e.__c=o=new w(f,x):(e.__c=o=new A(f,x),o.constructor=w,o.render=He),g&&g.sub(o),o.props=f,o.state||(o.state={}),o.context=x,o.__n=i,b=o.__d=!0,o.__h=[],o._sb=[]),o.__s==null&&(o.__s=o.state),w.getDerivedStateFromProps!=null&&(o.__s==o.state&&(o.__s=D({},o.__s)),D(o.__s,w.getDerivedStateFromProps(f,o.__s))),u=o.props,a=o.state,o.__v=e,b)w.getDerivedStateFromProps==null&&o.componentWillMount!=null&&o.componentWillMount(),o.componentDidMount!=null&&o.__h.push(o.componentDidMount);else{if(w.getDerivedStateFromProps==null&&f!==u&&o.componentWillReceiveProps!=null&&o.componentWillReceiveProps(f,x),!o.__e&&(o.shouldComponentUpdate!=null&&o.shouldComponentUpdate(f,o.__s,x)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(o.props=f,o.state=o.__s,o.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(Z){Z&&(Z.__=e)}),k=0;k<o._sb.length;k++)o.__h.push(o._sb[k]);o._sb=[],o.__h.length&&l.push(o);break e}o.componentWillUpdate!=null&&o.componentWillUpdate(f,o.__s,x),o.componentDidUpdate!=null&&o.__h.push(function(){o.componentDidUpdate(u,a,d)})}if(o.context=x,o.props=f,o.__P=t,o.__e=!1,v=p.__r,z=0,"prototype"in w&&w.prototype.render){for(o.state=o.__s,o.__d=!1,v&&v(e),h=o.render(o.props,o.state,o.context),P=0;P<o._sb.length;P++)o.__h.push(o._sb[P]);o._sb=[]}else do o.__d=!1,v&&v(e),h=o.render(o.props,o.state,o.context),o.state=o.__s;while(o.__d&&++z<25);o.state=o.__s,o.getChildContext!=null&&(i=D(D({},i),o.getChildContext())),b||o.getSnapshotBeforeUpdate==null||(d=o.getSnapshotBeforeUpdate(u,a)),he(t,Y(E=h!=null&&h.type===H&&h.key==null?h.props.children:h)?E:[E],e,n,i,s,r,l,c,_,y),o.base=e.__e,e.__h=null,o.__h.length&&l.push(o),F&&(o.__E=o.__=null)}catch(Z){e.__v=null,(_||r!=null)&&(e.__e=c,e.__h=!!_,r[r.indexOf(c)]=null),p.__e(Z,e,n)}else r==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Oe(n.__e,e,n,i,s,r,l,_,y);(h=p.diffed)&&h(e)}function ve(t,e,n){for(var i=0;i<n.length;i++)te(n[i],n[++i],n[++i]);p.__c&&p.__c(e,t),t.some(function(s){try{t=s.__h,s.__h=[],t.some(function(r){r.call(s)})}catch(r){p.__e(r,s.__v)}})}function Oe(t,e,n,i,s,r,l,c,_){var y,h,o,b=n.props,u=e.props,a=e.type,d=0;if(a==="svg"&&(s=!0),r!=null){for(;d<r.length;d++)if((y=r[d])&&"setAttribute"in y==!!a&&(a?y.localName===a:y.nodeType===3)){t=y,r[d]=null;break}}if(t==null){if(a===null)return document.createTextNode(u);t=s?document.createElementNS("http://www.w3.org/2000/svg",a):document.createElement(a,u.is&&u),r=null,c=!1}if(a===null)b===u||c&&t.data===u||(t.data=u);else{if(r=r&&$.call(t.childNodes),h=(b=n.props||N).dangerouslySetInnerHTML,o=u.dangerouslySetInnerHTML,!c){if(r!=null)for(b={},d=0;d<t.attributes.length;d++)b[t.attributes[d].name]=t.attributes[d].value;(o||h)&&(o&&(h&&o.__html==h.__html||o.__html===t.innerHTML)||(t.innerHTML=o&&o.__html||""))}if(Me(t,u,b,s,c),o)e.__k=[];else if(he(t,Y(d=e.props.children)?d:[d],e,n,i,s&&a!=="foreignObject",r,l,r?r[0]:n.__k&&O(n,0),c,_),r!=null)for(d=r.length;d--;)r[d]!=null&&pe(r[d]);c||("value"in u&&(d=u.value)!==void 0&&(d!==t.value||a==="progress"&&!d||a==="option"&&d!==b.value)&&j(t,"value",d,b.value,!1),"checked"in u&&(d=u.checked)!==void 0&&d!==t.checked&&j(t,"checked",d,b.checked,!1))}return t}function te(t,e,n){try{typeof t=="function"?t(e):t.current=e}catch(i){p.__e(i,n)}}function Q(t,e,n){var i,s;if(p.unmount&&p.unmount(t),(i=t.ref)&&(i.current&&i.current!==t.__e||te(i,null,e)),(i=t.__c)!=null){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(r){p.__e(r,e)}i.base=i.__P=null,t.__c=void 0}if(i=t.__k)for(s=0;s<i.length;s++)i[s]&&Q(i[s],e,n||typeof t.type!="function");n||t.__e==null||pe(t.__e),t.__=t.__e=t.__d=void 0}function He(t,e,n){return this.constructor(t,n)}function T(t,e,n){var i,s,r,l;p.__&&p.__(t,e),s=(i=typeof n=="function")?null:n&&n.__k||e.__k,r=[],l=[],ee(e,t=(!i&&n||e).__k=Te(H,null,[t]),s||N,N,e.ownerSVGElement!==void 0,!i&&n?[n]:s?null:e.firstChild?$.call(e.childNodes):null,r,!i&&n?n:s?s.__e:e.firstChild,i,l),ve(r,t,l)}$=de.slice,p={__e:function(t,e,n,i){for(var s,r,l;e=e.__;)if((s=e.__c)&&!s.__)try{if((r=s.constructor)&&r.getDerivedStateFromError!=null&&(s.setState(r.getDerivedStateFromError(t)),l=s.__d),s.componentDidCatch!=null&&(s.componentDidCatch(t,i||{}),l=s.__d),l)return s.__E=s}catch(c){t=c}throw t}},_e=0,Ee=function(t){return t!=null&&t.constructor===void 0},A.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=D({},this.state),typeof t=="function"&&(t=t(D({},n),this.props)),t&&D(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),se(this))},A.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),se(this))},A.prototype.render=H,S=[],ue=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,K=function(t,e){return t.__v.__b-e.__v.__b},G.__r=0,Ie=0;var Ve=0;function m(t,e,n,i,s,r){var l,c,_={};for(c in e)c=="ref"?l=e[c]:_[c]=e[c];var y={type:t,props:_,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--Ve,__source:s,__self:r};if(typeof t=="function"&&(l=t.defaultProps))for(c in l)_[c]===void 0&&(_[c]=l[c]);return p.vnode&&p.vnode(y),y}var be=t=>{let{className:e,label:n,onClick:i}=t;return m("div",{className:"deck-widget-button",children:m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:i,title:n,children:m("div",{className:"deck-widget-icon"})})})},ye=t=>{let{children:e,orientation:n}=t;return m("div",{className:`deck-widget-button-group ${n}`,children:e})},ne=t=>{let{className:e,label:n,onClick:i}=t;return m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:i,title:n,children:m("div",{className:"deck-widget-icon"})})};var q=class{constructor(e){this.id="fullscreen";this.placement="top-left";this.fullscreen=!1;this.id=e.id||"fullscreen",this.placement=e.placement||"top-left",e.enterLabel=e.enterLabel||"Enter Fullscreen",e.exitLabel=e.exitLabel||"Exit Fullscreen",e.style=e.style||{},this.props=e}onAdd({deck:e}){let{style:n,className:i}=this.props,s=document.createElement("div");return s.classList.add("deck-widget","deck-widget-fullscreen"),i&&s.classList.add(i),n&&Object.entries(n).map(([r,l])=>s.style.setProperty(r,l)),this.deck=e,this.element=s,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),s}onRemove(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}update(){let{enterLabel:e,exitLabel:n}=this.props,i=this.element;if(!i)return;let s=m(be,{onClick:this.handleClick.bind(this),label:this.fullscreen?n:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});T(s,i)}setProps(e){let n=this.props,i=this.element;i&&(n.className!==e.className&&(n.className&&i.classList.remove(n.className),e.className&&i.classList.add(e.className)),(0,ke._deepEqual)(n.style,e.style,1)||(n.style&&Object.entries(n.style).map(([s])=>i.style.removeProperty(s)),e.style&&Object.entries(e.style).map(([s,r])=>i.style.setProperty(s,r)))),Object.assign(this.props,e)}getContainer(){return this.props.container||this.deck?.getCanvas()?.parentElement}onFullscreenChange(){let e=this.fullscreen,n=document.fullscreenElement===this.getContainer();e!==n&&(this.fullscreen=!this.fullscreen),this.update()}async handleClick(){this.fullscreen?await this.exitFullscreen():await this.requestFullscreen(),this.update()}async requestFullscreen(){let e=this.getContainer();e?.requestFullscreen?await e.requestFullscreen({navigationUI:"hide"}):this.togglePseudoFullscreen()}async exitFullscreen(){document.exitFullscreen?await document.exitFullscreen():this.togglePseudoFullscreen()}togglePseudoFullscreen(){this.getContainer()?.classList.toggle("deck-pseudo-fullscreen")}};var W=M(I(),1);var X=class{constructor(e){this.id="compass";this.placement="top-left";this.viewId=null;this.id=e.id||"compass",this.viewId=e.viewId||null,this.placement=e.placement||"top-left",e.transitionDuration=e.transitionDuration||200,e.label=e.label||"Compass",e.style=e.style||{},this.props=e}setProps(e){Object.assign(this.props,e)}onViewportChange(e){this.viewport=e,this.update()}onAdd({deck:e}){let{style:n,className:i}=this.props,s=document.createElement("div");return s.classList.add("deck-widget","deck-widget-compass"),i&&s.classList.add(i),n&&Object.entries(n).map(([r,l])=>s.style.setProperty(r,l)),this.deck=e,this.element=s,this.update(),s}getRotation(){return this.viewport instanceof W.WebMercatorViewport?[-this.viewport.bearing,this.viewport.pitch]:this.viewport instanceof W._GlobeViewport?[0,Math.max(-80,Math.min(80,this.viewport.latitude))]:[0,0]}update(){let[e,n]=this.getRotation(),i=this.element;if(!i)return;let s=m("div",{className:"deck-widget-button",style:{perspective:100},children:m("button",{type:"button",onClick:()=>this.handleCompassReset(),label:this.props.label,style:{transform:`rotateX(${n}deg)`},children:m("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:m("g",{transform:`rotate(${e},13,13)`,children:[m("path",{d:"M10 13.0001L12.9999 5L15.9997 13.0001H10Z",fill:"var(--icon-compass-north-color, #F05C44)"}),m("path",{d:"M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",fill:"var(--icon-compass-south-color, #C2C2CC)"})]})})})});T(s,i)}onRemove(){this.deck=void 0,this.element=void 0}handleCompassReset(){let e=this.viewId||"default-view";if(this.viewport instanceof W.WebMercatorViewport){let n={...this.viewport,bearing:0,...this.getRotation()[0]===0?{pitch:0}:{},transitionDuration:this.props.transitionDuration,transitionInterpolator:new W.FlyToInterpolator};this.deck._onViewStateChange({viewId:e,viewState:n,interactionState:{}})}}};var we=M(I(),1);var J=class{constructor(e){this.id="zoom";this.placement="top-left";this.orientation="vertical";this.viewId=null;this.id=e.id||"zoom",this.viewId=e.viewId||null,this.placement=e.placement||"top-left",this.orientation=e.orientation||"vertical",e.transitionDuration=e.transitionDuration||200,e.zoomInLabel=e.zoomInLabel||"Zoom In",e.zoomOutLabel=e.zoomOutLabel||"Zoom Out",e.style=e.style||{},this.props=e}onAdd({deck:e}){let{style:n,className:i}=this.props,s=document.createElement("div");s.classList.add("deck-widget","deck-widget-zoom"),i&&s.classList.add(i),n&&Object.entries(n).map(([l,c])=>s.style.setProperty(l,c));let r=m(ye,{orientation:this.orientation,children:[m(ne,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),m(ne,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});return T(r,s),this.deck=e,this.element=s,s}onRemove(){this.deck=void 0,this.element=void 0}setProps(e){Object.assign(this.props,e)}onViewportChange(e){this.viewport=e}handleZoom(e){let n=this.viewId||"default-view",i={...this.viewport,zoom:e,transitionDuration:this.props.transitionDuration,transitionInterpolator:new we.FlyToInterpolator};this.deck._onViewStateChange({viewId:n,viewState:i,interactionState:{}})}handleZoomIn(){this.viewport&&this.handleZoom(this.viewport.zoom+1)}handleZoomOut(){this.viewport&&this.handleZoom(this.viewport.zoom-1)}};var Ze={"--button-background":"#fff","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Ue={"--button-background":"rgba(18, 18, 20, 1)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Be={"--button-background":"rgba(255, 255, 255, 0.6)","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"1px solid rgba(255, 255, 255, 0.6)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Re={"--button-background":"rgba(18, 18, 20, 0.75)","--button-stroke":"rgba(18, 18, 20, 0.30)","--button-inner-stroke":"1px solid rgba(18, 18, 20, 0.75)","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset","--button-backdrop-filter":"blur(4px)","--button-icon-idle":"rgba(158, 157, 168, 1)","--button-icon-hover":"rgba(215, 214, 229, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"};return Fe(V);})();
       return __exports__;
       });

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/widgets",
   "description": "UI widgets for deck.gl",
   "license": "MIT",
-  "version": "9.0.0-alpha.7",
+  "type": "module",
+  "version": "9.0.0-beta.10",
   "publishConfig": {
     "access": "public"
   },
@@ -16,26 +17,32 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
   "scripts": {
+    "build": "cp ./src/stylesheet.css ./dist/stylesheet.css",
     "build-bundle": "ocular-bundle ./bundle.ts",
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-alpha"
+    "@deck.gl/core": "^9.0.0-beta"
   },
-  "gitHead": "de061268077ab74e163792162efbc07be95d10f5"
+  "gitHead": "6c44f602069374cd21268ff279c5bf818c905ff7"
 }

package/src/compass-widget.tsx

@@ -0,0 +1,133 @@
+/* global document */
+import {FlyToInterpolator, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
+import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+
+interface CompassWidgetProps {
+  id: string;
+  placement?: WidgetPlacement;
+  /**
+   * View to attach to and interact with. Required when using multiple views.
+   */
+  viewId?: string | null;
+  /**
+   * Tooltip message.
+   */
+  label?: string;
+  /**
+   * Bearing and pitch reset transition duration in ms.
+   */
+  transitionDuration?: number;
+  /**
+   * CSS inline style overrides.
+   */
+  style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
+  className?: string;
+}
+
+export class CompassWidget implements Widget<CompassWidgetProps> {
+  id = 'compass';
+  props: CompassWidgetProps;
+  placement: WidgetPlacement = 'top-left';
+  viewId?: string | null = null;
+  viewport?: Viewport;
+  deck?: Deck;
+  element?: HTMLDivElement;
+
+  constructor(props: CompassWidgetProps) {
+    this.id = props.id || 'compass';
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || 'top-left';
+    props.transitionDuration = props.transitionDuration || 200;
+    props.label = props.label || 'Compass';
+    props.style = props.style || {};
+    this.props = props;
+  }
+
+  setProps(props: Partial<CompassWidgetProps>) {
+    Object.assign(this.props, props);
+  }
+
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.update();
+  }
+
+  onAdd({deck}: {deck: Deck}): HTMLDivElement {
+    const {style, className} = this.props;
+    const element = document.createElement('div');
+    element.classList.add('deck-widget', 'deck-widget-compass');
+    if (className) element.classList.add(className);
+    if (style) {
+      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+    }
+    this.deck = deck;
+    this.element = element;
+    this.update();
+    return element;
+  }
+
+  getRotation() {
+    if (this.viewport instanceof WebMercatorViewport) {
+      return [-this.viewport.bearing, this.viewport.pitch];
+    } else if (this.viewport instanceof _GlobeViewport) {
+      return [0, Math.max(-80, Math.min(80, this.viewport.latitude))];
+    }
+    return [0, 0];
+  }
+
+  update() {
+    const [rz, rx] = this.getRotation();
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+    const ui = (
+      <div className="deck-widget-button" style={{perspective: 100}}>
+        <button
+          type="button"
+          onClick={() => this.handleCompassReset()}
+          label={this.props.label}
+          style={{transform: `rotateX(${rx}deg)`}}
+        >
+          <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">
+            <g transform={`rotate(${rz},13,13)`}>
+              <path
+                d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z"
+                fill="var(--icon-compass-north-color, #F05C44)"
+              />
+              <path
+                d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z"
+                fill="var(--icon-compass-south-color, #C2C2CC)"
+              />
+            </g>
+          </svg>
+        </button>
+      </div>
+    );
+    render(ui, element);
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  handleCompassReset() {
+    const viewId = this.viewId || 'default-view';
+    if (this.viewport instanceof WebMercatorViewport) {
+      const nextViewState = {
+        ...this.viewport,
+        bearing: 0,
+        ...(this.getRotation()[0] === 0 ? {pitch: 0} : {}),
+        transitionDuration: this.props.transitionDuration,
+        transitionInterpolator: new FlyToInterpolator()
+      };
+      // @ts-ignore Using private method temporary until there's a public one
+      this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+    }
+  }
+}

package/src/components.tsx

@@ -1,11 +1,9 @@
-import {h, render} from 'preact';
-
 export const IconButton = props => {
   const {className, label, onClick} = props;
   return (
-    <div className="deck-widget-button-border">
+    <div className="deck-widget-button">
       <button
-        className={`deck-widget-button ${className}`}
+        className={`deck-widget-icon-button ${className}`}
         type="button"
         onClick={onClick}
         title={label}
@@ -15,3 +13,22 @@ export const IconButton = props => {
     </div>
   );
 };
+
+export const ButtonGroup = props => {
+  const {children, orientation} = props;
+  return <div className={`deck-widget-button-group ${orientation}`}>{children}</div>;
+};
+
+export const GroupedIconButton = props => {
+  const {className, label, onClick} = props;
+  return (
+    <button
+      className={`deck-widget-icon-button ${className}`}
+      type="button"
+      onClick={onClick}
+      title={label}
+    >
+      <div className="deck-widget-icon" />
+    </button>
+  );
+};

package/src/fullscreen-widget.tsx

@@ -1,7 +1,7 @@
 /* global document */
 import {_deepEqual as deepEqual} from '@deck.gl/core';
 import type {Deck, Widget, WidgetPlacement} from '@deck.gl/core';
-import {h, render} from 'preact';
+import {render} from 'preact';
 import {IconButton} from './components';
 
 interface FullscreenWidgetProps {
@@ -21,7 +21,13 @@ interface FullscreenWidgetProps {
    * Tooltip message when fullscreen.
    */
   exitLabel?: string;
+  /**
+   * CSS inline style overrides.
+   */
   style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
   className?: string;
 }
 

package/src/index.ts

@@ -1,3 +1,5 @@
 export {FullscreenWidget} from './fullscreen-widget';
+export {CompassWidget} from './compass-widget';
+export {ZoomWidget} from './zoom-widget';
 
 export * from './themes';