@deck.gl/widgets 9.1.12 → 9.2.0-alpha.2

package/dist/zoom-widget.js

@@ -2,59 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 // deck.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-/* global document */
-import { FlyToInterpolator, LinearInterpolator, _deepEqual as deepEqual, _applyStyles as applyStyles, _removeStyles as removeStyles } from '@deck.gl/core';
+import { Widget, FlyToInterpolator, LinearInterpolator } from '@deck.gl/core';
 import { render } from 'preact';
-import { ButtonGroup, GroupedIconButton } from "./components.js";
-export class ZoomWidget {
+import { ButtonGroup } from "./lib/components/button-group.js";
+import { GroupedIconButton } from "./lib/components/grouped-icon-button.js";
+export class ZoomWidget extends Widget {
     constructor(props = {}) {
-        this.id = 'zoom';
+        super(props, ZoomWidget.defaultProps);
+        this.className = 'deck-widget-zoom';
         this.placement = 'top-left';
         this.viewId = null;
         this.viewports = {};
-        this.id = props.id ?? this.id;
         this.viewId = props.viewId ?? this.viewId;
         this.placement = props.placement ?? this.placement;
-        this.props = {
-            ...ZoomWidget.defaultProps,
-            ...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);
-        applyStyles(element, style);
-        this.deck = deck;
-        this.element = element;
-        this.update();
-        return element;
-    }
-    onRemove() {
-        this.deck = undefined;
-        this.element = undefined;
     }
     setProps(props) {
         this.placement = props.placement ?? this.placement;
         this.viewId = props.viewId ?? this.viewId;
-        const oldProps = this.props;
-        const el = this.element;
-        if (el) {
-            if (oldProps.className !== props.className) {
-                if (oldProps.className)
-                    el.classList.remove(oldProps.className);
-                if (props.className)
-                    el.classList.add(props.className);
-            }
-            if (!deepEqual(oldProps.style, props.style, 1)) {
-                removeStyles(el, oldProps.style);
-                applyStyles(el, props.style);
-            }
-        }
-        Object.assign(this.props, props);
-        this.update();
+        super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+        const ui = (_jsxs(ButtonGroup, { orientation: this.props.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, rootElement);
     }
     onViewportChange(viewport) {
         this.viewports[viewport.id] = viewport;
@@ -82,27 +51,16 @@ export class ZoomWidget {
             this.handleZoom(viewport, viewport.zoom - 1);
         }
     }
-    /**
-     * @todo - move to deck or widget manager
-     */
+    /** @todo - move to deck or widget manager */
     setViewState(viewId, viewState) {
         // @ts-ignore Using private method temporary until there's a public one
         this.deck._onViewStateChange({ viewId, viewState, interactionState: {} });
     }
-    update() {
-        const element = this.element;
-        if (!element) {
-            return;
-        }
-        const ui = (_jsxs(ButtonGroup, { orientation: this.props.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);
-    }
 }
 ZoomWidget.defaultProps = {
-    id: 'zoom-widget',
-    style: {},
+    ...Widget.defaultProps,
+    id: 'zoom',
     placement: 'top-left',
-    className: undefined,
     orientation: 'vertical',
     transitionDuration: 200,
     zoomInLabel: 'Zoom In',

package/dist/zoom-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"zoom-widget.js","sourceRoot":"","sources":["../src/zoom-widget.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"zoom-widget.js","sourceRoot":"","sources":["../src/zoom-widget.tsx"],"names":[],"mappings":"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"}

package/dist.min.js

@@ -4,6 +4,8 @@
   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 Fe=Object.create;var X=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var Ve=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,He=Object.prototype.hasOwnProperty;var Ue=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),ye=(n,e)=>{for(var t in e)X(n,t,{get:e[t],enumerable:!0})},G=(n,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Ve(e))!He.call(n,i)&&i!==t&&X(n,i,{get:()=>e[i],enumerable:!(o=Te(e,i))||o.enumerable});return n},L=(n,e,t)=>(G(n,e,"default"),t&&G(t,e,"default")),V=(n,e,t)=>(t=n!=null?Fe(Me(n)):{},G(e||!n||!n.__esModule?X(t,"default",{value:n,enumerable:!0}):t,n)),qe=n=>G(X({},"__esModule",{value:!0}),n);var I=Ue((tt,be)=>{be.exports=globalThis.deck});var A={};ye(A,{CompassWidget:()=>oe,DarkGlassTheme:()=>Ye,DarkTheme:()=>Ke,FullscreenWidget:()=>ne,LightGlassTheme:()=>Qe,LightTheme:()=>Je,ResetViewWidget:()=>Z,ScreenshotWidget:()=>O,ZoomWidget:()=>z,_WidgetImpl:()=>P,_components:()=>me});var C={},we=V(I(),1);L(C,V(I(),1));if(!we.Layer)throw new Error("@deck.gl/core is not found");L(A,C);var F=V(I(),1);var ee,f,Se,ze,D,ke,We,se,ce,re,le,Oe,q={},Le=[],Ze=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,de=Array.isArray;function N(n,e){for(var t in e)n[t]=e[t];return n}function Ne(n){var e=n.parentNode;e&&e.removeChild(n)}function Ae(n,e,t){var o,i,r,l={};for(r in e)r=="key"?o=e[r]:r=="ref"?i=e[r]:l[r]=e[r];if(arguments.length>2&&(l.children=arguments.length>3?ee.call(arguments,2):t),typeof n=="function"&&n.defaultProps!=null)for(r in n.defaultProps)l[r]===void 0&&(l[r]=n.defaultProps[r]);return K(n,l,o,i,null)}function K(n,e,t,o,i){var r={type:n,props:e,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:i??++Se,__i:-1,__u:0};return i==null&&f.vnode!=null&&f.vnode(r),r}function M(n){return n.children}function Q(n,e){this.props=n,this.context=e}function R(n,e){if(e==null)return n.__?R(n.__,n.__i+1):null;for(var t;e<n.__k.length;e++)if((t=n.__k[e])!=null&&t.__e!=null)return t.__e;return typeof n.type=="function"?R(n):null}function Ie(n){var e,t;if((n=n.__)!=null&&n.__c!=null){for(n.__e=n.__c.base=null,e=0;e<n.__k.length;e++)if((t=n.__k[e])!=null&&t.__e!=null){n.__e=n.__c.base=t.__e;break}return Ie(n)}}function Pe(n){(!n.__d&&(n.__d=!0)&&D.push(n)&&!Y.__r++||ke!==f.debounceRendering)&&((ke=f.debounceRendering)||We)(Y)}function Y(){var n,e,t,o,i,r,l,a;for(D.sort(se);n=D.shift();)n.__d&&(e=D.length,o=void 0,r=(i=(t=n).__v).__e,l=[],a=[],t.__P&&((o=N({},i)).__v=i.__v+1,f.vnode&&f.vnode(o),pe(t.__P,o,i,t.__n,t.__P.namespaceURI,32&i.__u?[r]:null,l,r??R(i),!!(32&i.__u),a),o.__v=i.__v,o.__.__k[o.__i]=o,Ee(l,o,a),o.__e!=r&&Ie(o)),D.length>e&&D.sort(se));Y.__r=0}function De(n,e,t,o,i,r,l,a,p,c,_){var s,y,d,g,w,v=o&&o.__k||Le,m=e.length;for(t.__d=p,je(t,e,v),p=t.__d,s=0;s<m;s++)(d=t.__k[s])!=null&&typeof d!="boolean"&&typeof d!="function"&&(y=d.__i===-1?q:v[d.__i]||q,d.__i=s,pe(n,d,y,i,r,l,a,p,c,_),g=d.__e,d.ref&&y.ref!=d.ref&&(y.ref&&_e(y.ref,null,d),_.push(d.ref,d.__c||g,d)),w==null&&g!=null&&(w=g),65536&d.__u||y.__k===d.__k?p=Re(d,p,n):typeof d.type=="function"&&d.__d!==void 0?p=d.__d:g&&(p=g.nextSibling),d.__d=void 0,d.__u&=-196609);t.__d=p,t.__e=w}function je(n,e,t){var o,i,r,l,a,p=e.length,c=t.length,_=c,s=0;for(n.__k=[],o=0;o<p;o++)l=o+s,(i=n.__k[o]=(i=e[o])==null||typeof i=="boolean"||typeof i=="function"?null:typeof i=="string"||typeof i=="number"||typeof i=="bigint"||i.constructor==String?K(null,i,null,null,null):de(i)?K(M,{children:i},null,null,null):i.constructor===void 0&&i.__b>0?K(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i)!=null?(i.__=n,i.__b=n.__b+1,a=Be(i,t,l,_),i.__i=a,r=null,a!==-1&&(_--,(r=t[a])&&(r.__u|=131072)),r==null||r.__v===null?(a==-1&&s--,typeof i.type!="function"&&(i.__u|=65536)):a!==l&&(a==l-1?s--:a==l+1?s++:a>l?_>p-l?s+=a-l:s--:a<l&&(a==l-s?s-=a-l:s++),a!==o+s&&(i.__u|=65536))):(r=t[l])&&r.key==null&&r.__e&&!(131072&r.__u)&&(r.__e==n.__d&&(n.__d=R(r)),ae(r,r,!1),t[l]=null,_--);if(_)for(o=0;o<c;o++)(r=t[o])!=null&&!(131072&r.__u)&&(r.__e==n.__d&&(n.__d=R(r)),ae(r,r))}function Re(n,e,t){var o,i;if(typeof n.type=="function"){for(o=n.__k,i=0;o&&i<o.length;i++)o[i]&&(o[i].__=n,e=Re(o[i],e,t));return e}n.__e!=e&&(e&&n.type&&!t.contains(e)&&(e=R(n)),t.insertBefore(n.__e,e||null),e=n.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function Be(n,e,t,o){var i=n.key,r=n.type,l=t-1,a=t+1,p=e[t];if(p===null||p&&i==p.key&&r===p.type&&!(131072&p.__u))return t;if(o>(p!=null&&!(131072&p.__u)?1:0))for(;l>=0||a<e.length;){if(l>=0){if((p=e[l])&&!(131072&p.__u)&&i==p.key&&r===p.type)return l;l--}if(a<e.length){if((p=e[a])&&!(131072&p.__u)&&i==p.key&&r===p.type)return a;a++}}return-1}function xe(n,e,t){e[0]==="-"?n.setProperty(e,t??""):n[e]=t==null?"":typeof t!="number"||Ze.test(e)?t:t+"px"}function J(n,e,t,o,i){var r;e:if(e==="style")if(typeof t=="string")n.style.cssText=t;else{if(typeof o=="string"&&(n.style.cssText=o=""),o)for(e in o)t&&e in t||xe(n.style,e,"");if(t)for(e in t)o&&t[e]===o[e]||xe(n.style,e,t[e])}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/(PointerCapture)$|Capture$/i,"$1")),e=e.toLowerCase()in n||e==="onFocusOut"||e==="onFocusIn"?e.toLowerCase().slice(2):e.slice(2),n.l||(n.l={}),n.l[e+r]=t,t?o?t.u=o.u:(t.u=ce,n.addEventListener(e,r?le:re,r)):n.removeEventListener(e,r?le:re,r);else{if(i=="http://www.w3.org/2000/svg")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!="role"&&e!="popover"&&e in n)try{n[e]=t??"";break e}catch{}typeof t=="function"||(t==null||t===!1&&e[4]!=="-"?n.removeAttribute(e):n.setAttribute(e,e=="popover"&&t==1?"":t))}}function Ce(n){return function(e){if(this.l){var t=this.l[e.type+n];if(e.t==null)e.t=ce++;else if(e.t<t.u)return;return t(f.event?f.event(e):e)}}}function pe(n,e,t,o,i,r,l,a,p,c){var _,s,y,d,g,w,v,m,h,H,W,j,U,ve,B,ie,x=e.type;if(e.constructor!==void 0)return null;128&t.__u&&(p=!!(32&t.__u),r=[a=e.__e=t.__e]),(_=f.__b)&&_(e);e:if(typeof x=="function")try{if(m=e.props,h="prototype"in x&&x.prototype.render,H=(_=x.contextType)&&o[_.__c],W=_?H?H.props.value:_.__:o,t.__c?v=(s=e.__c=t.__c).__=s.__E:(h?e.__c=s=new x(m,W):(e.__c=s=new Q(m,W),s.constructor=x,s.render=Ge),H&&H.sub(s),s.props=m,s.state||(s.state={}),s.context=W,s.__n=o,y=s.__d=!0,s.__h=[],s._sb=[]),h&&s.__s==null&&(s.__s=s.state),h&&x.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=N({},s.__s)),N(s.__s,x.getDerivedStateFromProps(m,s.__s))),d=s.props,g=s.state,s.__v=e,y)h&&x.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),h&&s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(h&&x.getDerivedStateFromProps==null&&m!==d&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(m,W),!s.__e&&(s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(m,s.__s,W)===!1||e.__v===t.__v)){for(e.__v!==t.__v&&(s.props=m,s.state=s.__s,s.__d=!1),e.__e=t.__e,e.__k=t.__k,e.__k.forEach(function($){$&&($.__=e)}),j=0;j<s._sb.length;j++)s.__h.push(s._sb[j]);s._sb=[],s.__h.length&&l.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(m,s.__s,W),h&&s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(d,g,w)})}if(s.context=W,s.props=m,s.__P=n,s.__e=!1,U=f.__r,ve=0,h){for(s.state=s.__s,s.__d=!1,U&&U(e),_=s.render(s.props,s.state,s.context),B=0;B<s._sb.length;B++)s.__h.push(s._sb[B]);s._sb=[]}else do s.__d=!1,U&&U(e),_=s.render(s.props,s.state,s.context),s.state=s.__s;while(s.__d&&++ve<25);s.state=s.__s,s.getChildContext!=null&&(o=N(N({},o),s.getChildContext())),h&&!y&&s.getSnapshotBeforeUpdate!=null&&(w=s.getSnapshotBeforeUpdate(d,g)),De(n,de(ie=_!=null&&_.type===M&&_.key==null?_.props.children:_)?ie:[ie],e,t,o,i,r,l,a,p,c),s.base=e.__e,e.__u&=-161,s.__h.length&&l.push(s),v&&(s.__E=s.__=null)}catch($){if(e.__v=null,p||r!=null){for(e.__u|=p?160:32;a&&a.nodeType===8&&a.nextSibling;)a=a.nextSibling;r[r.indexOf(a)]=null,e.__e=a}else e.__e=t.__e,e.__k=t.__k;f.__e($,e,t)}else r==null&&e.__v===t.__v?(e.__k=t.__k,e.__e=t.__e):e.__e=$e(t.__e,e,t,o,i,r,l,p,c);(_=f.diffed)&&_(e)}function Ee(n,e,t){e.__d=void 0;for(var o=0;o<t.length;o++)_e(t[o],t[++o],t[++o]);f.__c&&f.__c(e,n),n.some(function(i){try{n=i.__h,i.__h=[],n.some(function(r){r.call(i)})}catch(r){f.__e(r,i.__v)}})}function $e(n,e,t,o,i,r,l,a,p){var c,_,s,y,d,g,w,v=t.props,m=e.props,h=e.type;if(h==="svg"?i="http://www.w3.org/2000/svg":h==="math"?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),r!=null){for(c=0;c<r.length;c++)if((d=r[c])&&"setAttribute"in d==!!h&&(h?d.localName===h:d.nodeType===3)){n=d,r[c]=null;break}}if(n==null){if(h===null)return document.createTextNode(m);n=document.createElementNS(i,h,m.is&&m),r=null,a=!1}if(h===null)v===m||a&&n.data===m||(n.data=m);else{if(r=r&&ee.call(n.childNodes),v=t.props||q,!a&&r!=null)for(v={},c=0;c<n.attributes.length;c++)v[(d=n.attributes[c]).name]=d.value;for(c in v)if(d=v[c],c!="children"){if(c=="dangerouslySetInnerHTML")s=d;else if(c!=="key"&&!(c in m)){if(c=="value"&&"defaultValue"in m||c=="checked"&&"defaultChecked"in m)continue;J(n,c,null,d,i)}}for(c in m)d=m[c],c=="children"?y=d:c=="dangerouslySetInnerHTML"?_=d:c=="value"?g=d:c=="checked"?w=d:c==="key"||a&&typeof d!="function"||v[c]===d||J(n,c,d,v[c],i);if(_)a||s&&(_.__html===s.__html||_.__html===n.innerHTML)||(n.innerHTML=_.__html),e.__k=[];else if(s&&(n.innerHTML=""),De(n,de(y)?y:[y],e,t,o,h==="foreignObject"?"http://www.w3.org/1999/xhtml":i,r,l,r?r[0]:t.__k&&R(t,0),a,p),r!=null)for(c=r.length;c--;)r[c]!=null&&Ne(r[c]);a||(c="value",g!==void 0&&(g!==n[c]||h==="progress"&&!g||h==="option"&&g!==v[c])&&J(n,c,g,v[c],i),c="checked",w!==void 0&&w!==n[c]&&J(n,c,w,v[c],i))}return n}function _e(n,e,t){try{if(typeof n=="function"){var o=typeof n.__u=="function";o&&n.__u(),o&&e==null||(n.__u=n(e))}else n.current=e}catch(i){f.__e(i,t)}}function ae(n,e,t){var o,i;if(f.unmount&&f.unmount(n),(o=n.ref)&&(o.current&&o.current!==n.__e||_e(o,null,e)),(o=n.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(r){f.__e(r,e)}o.base=o.__P=null}if(o=n.__k)for(i=0;i<o.length;i++)o[i]&&ae(o[i],e,t||typeof n.type!="function");t||n.__e==null||Ne(n.__e),n.__c=n.__=n.__e=n.__d=void 0}function Ge(n,e,t){return this.constructor(n,t)}function S(n,e,t){var o,i,r,l;f.__&&f.__(n,e),i=(o=typeof t=="function")?null:t&&t.__k||e.__k,r=[],l=[],pe(e,n=(!o&&t||e).__k=Ae(M,null,[n]),i||q,q,e.namespaceURI,!o&&t?[t]:i?null:e.firstChild?ee.call(e.childNodes):null,r,!o&&t?t:i?i.__e:e.firstChild,o,l),Ee(r,n,l)}ee=Le.slice,f={__e:function(n,e,t,o){for(var i,r,l;e=e.__;)if((i=e.__c)&&!i.__)try{if((r=i.constructor)&&r.getDerivedStateFromError!=null&&(i.setState(r.getDerivedStateFromError(n)),l=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(n,o||{}),l=i.__d),l)return i.__E=i}catch(a){n=a}throw n}},Se=0,ze=function(n){return n!=null&&n.constructor==null},Q.prototype.setState=function(n,e){var t;t=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=N({},this.state),typeof n=="function"&&(n=n(N({},t),this.props)),n&&N(t,n),n!=null&&this.__v&&(e&&this._sb.push(e),Pe(this))},Q.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),Pe(this))},Q.prototype.render=M,D=[],We=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,se=function(n,e){return n.__v.__b-e.__v.__b},Y.__r=0,ce=0,re=Ce(!1),le=Ce(!0),Oe=0;var me={};ye(me,{ButtonGroup:()=>ue,GroupedIconButton:()=>te,IconButton:()=>E});var Xe=0,st=Array.isArray;function u(n,e,t,o,i,r){e||(e={});var l,a,p=e;if("ref"in p)for(a in p={},e)a=="ref"?l=e[a]:p[a]=e[a];var c={type:n,props:p,key:t,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:--Xe,__i:-1,__u:0,__source:i,__self:r};if(typeof n=="function"&&(l=n.defaultProps))for(a in l)p[a]===void 0&&(p[a]=l[a]);return f.vnode&&f.vnode(c),c}var E=n=>{let{className:e,label:t,onClick:o}=n;return u("div",{className:"deck-widget-button",children:u("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:o,title:t,children:u("div",{className:"deck-widget-icon"})})})},ue=n=>{let{children:e,orientation:t}=n;return u("div",{className:`deck-widget-button-group ${t}`,children:e})},te=n=>{let{className:e,label:t,onClick:o}=n;return u("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:o,title:t,children:u("div",{className:"deck-widget-icon"})})};var ne=class{constructor(e){this.id="fullscreen";this.placement="top-left";this.fullscreen=!1;this.id=e.id??this.id,this.placement=e.placement??this.placement,this.props={...e,enterLabel:e.enterLabel??"Enter Fullscreen",exitLabel:e.exitLabel??"Exit Fullscreen",style:e.style??{}}}onAdd({deck:e}){let{style:t,className:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-fullscreen"),o&&i.classList.add(o),(0,F._applyStyles)(i,t),this.deck=e,this.element=i,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),i}onRemove(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}update(){let{enterLabel:e,exitLabel:t}=this.props,o=this.element;if(!o)return;let i=u(E,{onClick:this.handleClick.bind(this),label:this.fullscreen?t:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});S(i,o)}setProps(e){this.placement=e.placement??this.placement;let t=this.props,o=this.element;o&&(t.className!==e.className&&(t.className&&o.classList.remove(t.className),e.className&&o.classList.add(e.className)),(0,F._deepEqual)(t.style,e.style,1)||((0,F._removeStyles)(o,t.style),(0,F._applyStyles)(o,e.style))),Object.assign(this.props,e),this.update()}getContainer(){return this.props.container||this.deck?.getCanvas()?.parentElement}onFullscreenChange(){let e=this.fullscreen,t=document.fullscreenElement===this.getContainer();e!==t&&(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 b=V(I(),1);var oe=class{constructor(e){this.id="compass";this.placement="top-left";this.viewId=null;this.viewports={};this.id=e.id??this.id,this.viewId=e.viewId??this.viewId,this.placement=e.placement??this.placement,this.props={...e,transitionDuration:e.transitionDuration??200,label:e.label??"Reset Compass",style:e.style??{}}}setProps(e){this.placement=e.placement??this.placement,this.viewId=e.viewId??this.viewId;let t=this.props,o=this.element;o&&(t.className!==e.className&&(t.className&&o.classList.remove(t.className),e.className&&o.classList.add(e.className)),(0,b._deepEqual)(t.style,e.style,1)||((0,b._removeStyles)(o,t.style),(0,b._applyStyles)(o,e.style))),Object.assign(this.props,e),this.update()}onViewportChange(e){e.equals(this.viewports[e.id])||(this.viewports[e.id]=e,this.update())}onAdd({deck:e}){let{style:t,className:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-compass"),o&&i.classList.add(o),(0,b._applyStyles)(i,t),this.deck=e,this.element=i,this.update(),i}getRotation(e){return e instanceof b.WebMercatorViewport?[-e.bearing,e.pitch]:e instanceof b._GlobeViewport?[0,Math.max(-80,Math.min(80,e.latitude))]:[0,0]}update(){let e=this.viewId||Object.values(this.viewports)[0]?.id||"default-view",t=this.viewports[e],[o,i]=this.getRotation(t),r=this.element;if(!r)return;let l=u("div",{className:"deck-widget-button",style:{perspective:100},children:u("button",{type:"button",onClick:()=>{for(let a of Object.values(this.viewports))this.handleCompassReset(a)},title:this.props.label,style:{transform:`rotateX(${i}deg)`},children:u("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:u("g",{transform:`rotate(${o},13,13)`,children:[u("path",{d:"M10 13.0001L12.9999 5L15.9997 13.0001H10Z",fill:"var(--icon-compass-north-color, #F05C44)"}),u("path",{d:"M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",fill:"var(--icon-compass-south-color, #C2C2CC)"})]})})})});S(l,r)}onRemove(){this.deck=void 0,this.element=void 0}handleCompassReset(e){let t=this.viewId||e.id||"default-view";if(e instanceof b.WebMercatorViewport){let o={...e,bearing:0,...this.getRotation(e)[0]===0?{pitch:0}:{},transitionDuration:this.props.transitionDuration,transitionInterpolator:new b.FlyToInterpolator};this.deck._onViewStateChange({viewId:t,viewState:o,interactionState:{}})}}};var k=V(I(),1);var fe=class{constructor(e={}){this.id="zoom";this.placement="top-left";this.viewId=null;this.viewports={};this.id=e.id??this.id,this.viewId=e.viewId??this.viewId,this.placement=e.placement??this.placement,this.props={...fe.defaultProps,...e}}onAdd({deck:e}){let{style:t,className:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-zoom"),o&&i.classList.add(o),(0,k._applyStyles)(i,t),this.deck=e,this.element=i,this.update(),i}onRemove(){this.deck=void 0,this.element=void 0}setProps(e){this.placement=e.placement??this.placement,this.viewId=e.viewId??this.viewId;let t=this.props,o=this.element;o&&(t.className!==e.className&&(t.className&&o.classList.remove(t.className),e.className&&o.classList.add(e.className)),(0,k._deepEqual)(t.style,e.style,1)||((0,k._removeStyles)(o,t.style),(0,k._applyStyles)(o,e.style))),Object.assign(this.props,e),this.update()}onViewportChange(e){this.viewports[e.id]=e}handleZoom(e,t){let o=this.viewId||e?.id||"default-view",i={...e,zoom:t};this.props.transitionDuration>0&&(i.transitionDuration=this.props.transitionDuration,i.transitionInterpolator="latitude"in i?new k.FlyToInterpolator:new k.LinearInterpolator),this.setViewState(o,i)}handleZoomIn(){for(let e of Object.values(this.viewports))this.handleZoom(e,e.zoom+1)}handleZoomOut(){for(let e of Object.values(this.viewports))this.handleZoom(e,e.zoom-1)}setViewState(e,t){this.deck._onViewStateChange({viewId:e,viewState:t,interactionState:{}})}update(){let e=this.element;if(!e)return;let t=u(ue,{orientation:this.props.orientation,children:[u(te,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),u(te,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});S(t,e)}},z=fe;z.defaultProps={id:"zoom-widget",style:{},placement:"top-left",className:void 0,orientation:"vertical",transitionDuration:200,zoomInLabel:"Zoom In",zoomOutLabel:"Zoom Out",viewId:void 0};var T=V(I(),1),P=class{constructor(e){this.id=e.id||"widget",this.props=e}onAdd({deck:e}){this.deck=e;let{style:t,className:o}=this.props,i=this._createRootElement({widgetClassName:this.className,className:o,style:t});return this.element=i,this.onRenderHTML(),this.element}onRemove(){this.deck=void 0,this.element=void 0}setProps(e){let t=this.props,o=this.element;o&&(t.className!==e.className&&(t.className&&o.classList.remove(t.className),e.className&&o.classList.add(e.className)),(0,T._deepEqual)(t.style,e.style,1)||((0,T._removeStyles)(o,t.style),(0,T._applyStyles)(o,e.style))),Object.assign(this.props,e),this.onRenderHTML()}_createRootElement(e){let{widgetClassName:t,className:o,style:i}=e,r=document.createElement("div");return["deck-widget",t,o].filter(l=>typeof l=="string"&&l.length>0).forEach(l=>r.classList.add(l)),(0,T._applyStyles)(r,i),r}};P.defaultProps={id:"widget",style:{},className:""};var he=class extends P{constructor(t={}){super({...he.defaultProps,...t});this.className="deck-widget-screenshot";this.placement="top-left";this.placement=t.placement??this.placement}setProps(t){this.placement=t.placement??this.placement,super.setProps(t)}onRenderHTML(){let t=this.element;t&&S(u(E,{className:"deck-widget-camera",label:this.props.label,onClick:this.handleClick.bind(this)}),t)}handleClick(){if(this.props.onCapture){this.props.onCapture(this);return}let t=this.captureScreenToDataURL(this.props.imageFormat);t&&this.downloadDataURL(t,this.props.filename)}captureScreenToDataURL(t){return this.deck?.getCanvas()?.toDataURL(t)}downloadDataURL(t,o){let i=document.createElement("a");i.href=t,i.download=o,i.click()}},O=he;O.defaultProps={...P.defaultProps,id:"screenshot",placement:"top-left",label:"Screenshot",filename:"screenshot.png",imageFormat:"image/png",onCapture:void 0};var ge=class extends P{constructor(t={}){super({...ge.defaultProps,...t});this.className="deck-widget-reset-view";this.placement="top-left";this.placement=t.placement??this.placement}setProps(t){this.placement=t.placement??this.placement,super.setProps(t)}onRenderHTML(){let t=this.element;t&&S(u(E,{className:"deck-widget-reset-focus",label:this.props.label,onClick:this.handleClick.bind(this)}),t)}handleClick(){let t=this.props.initialViewState||this.deck?.props.initialViewState;this.setViewState(t)}setViewState(t){let o=this.props.viewId||t?.id||"default-view",i={...t};this.deck._onViewStateChange({viewId:o,viewState:i,interactionState:{}})}},Z=ge;Z.defaultProps={...P.defaultProps,id:"reset-view",placement:"top-left",label:"Reset View",initialViewState:void 0,viewId:void 0};var Je={"--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"},Ke={"--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"},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)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Ye={"--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 qe(A);})();
+"use strict";var __exports__=(()=>{var go=Object.create;var ge=Object.defineProperty;var fo=Object.getOwnPropertyDescriptor;var _o=Object.getOwnPropertyNames;var vo=Object.getPrototypeOf,bo=Object.prototype.hasOwnProperty;var Ct=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),yo=(t,o)=>{for(var e in o)ge(t,e,{get:o[e],enumerable:!0})},he=(t,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of _o(o))!bo.call(t,n)&&n!==e&&ge(t,n,{get:()=>o[n],enumerable:!(i=fo(o,n))||i.enumerable});return t},H=(t,o,e)=>(he(t,o,"default"),e&&he(e,o,"default")),w=(t,o,e)=>(e=t!=null?go(vo(t)):{},he(o||!t||!t.__esModule?ge(e,"default",{value:t,enumerable:!0}):e,t)),wo=t=>he(ge({},"__esModule",{value:!0}),t);var P=Ct((ti,Lt)=>{Lt.exports=globalThis.deck});var po=Ct((kn,co)=>{co.exports=globalThis.luma});var pe={};yo(pe,{CompassWidget:()=>J,DarkGlassTheme:()=>Re,DarkTheme:()=>lo,FullscreenWidget:()=>ee,GimbalWidget:()=>K,LightGlassTheme:()=>Ee,LightTheme:()=>ao,ResetViewWidget:()=>X,ScreenshotWidget:()=>te,ZoomWidget:()=>B,_ButtonGroup:()=>we,_ContextMenuWidget:()=>ae,_CoordinatesGeocoder:()=>U,_CurrentLocationGeocoder:()=>Ce,_DropdownMenu:()=>Se,_FpsWidget:()=>ie,_GeocoderWidget:()=>Q,_GoogleGeocoder:()=>Me,_GroupedIconButton:()=>q,_IconButton:()=>M,_IconMenu:()=>Ne,_InfoWidget:()=>re,_LoadingWidget:()=>oe,_MapboxGeocoder:()=>Te,_OpenCageGeocoder:()=>Ie,_ScaleWidget:()=>Y,_SimpleMenu:()=>He,_SplitterWidget:()=>le,_StatsWidget:()=>se,_ThemeWidget:()=>ne,_TimelineWidget:()=>de,_ViewSelectorWidget:()=>ce});var L={},Et=w(P(),1);H(L,w(P(),1));if(!Et.Layer)throw new Error("@deck.gl/core is not found");H(pe,L);var G=w(P(),1);var ye,y,Dt,Po,V,Rt,Gt,De,Ae,Ge,Oe,xo,z={},Ot=[],ko=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,$e=Array.isArray;function N(t,o){for(var e in o)t[e]=o[e];return t}function Ft(t){var o=t.parentNode;o&&o.removeChild(t)}function So(t,o,e){var i,n,r,d={};for(r in o)r=="key"?i=o[r]:r=="ref"?n=o[r]:d[r]=o[r];if(arguments.length>2&&(d.children=arguments.length>3?ye.call(arguments,2):e),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)d[r]===void 0&&(d[r]=t.defaultProps[r]);return _e(t,d,i,n,null)}function _e(t,o,e,i,n){var r={type:t,props:o,key:e,ref:i,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:n??++Dt,__i:-1,__u:0};return n==null&&y.vnode!=null&&y.vnode(r),r}function $(t){return t.children}function ve(t,o){this.props=t,this.context=o}function D(t,o){if(o==null)return t.__?D(t.__,t.__i+1):null;for(var e;o<t.__k.length;o++)if((e=t.__k[o])!=null&&e.__e!=null)return e.__e;return typeof t.type=="function"?D(t):null}function At(t){var o,e;if((t=t.__)!=null&&t.__c!=null){for(t.__e=t.__c.base=null,o=0;o<t.__k.length;o++)if((e=t.__k[o])!=null&&e.__e!=null){t.__e=t.__c.base=e.__e;break}return At(t)}}function Ht(t){(!t.__d&&(t.__d=!0)&&V.push(t)&&!be.__r++||Rt!==y.debounceRendering)&&((Rt=y.debounceRendering)||Gt)(be)}function be(){var t,o,e,i,n,r,d,a;for(V.sort(De);t=V.shift();)t.__d&&(o=V.length,i=void 0,r=(n=(e=t).__v).__e,d=[],a=[],e.__P&&((i=N({},n)).__v=n.__v+1,y.vnode&&y.vnode(i),Ue(e.__P,i,n,e.__n,e.__P.namespaceURI,32&n.__u?[r]:null,d,r??D(n),!!(32&n.__u),a),i.__v=n.__v,i.__.__k[i.__i]=i,zt(d,i,a),i.__e!=r&&At(i)),V.length>o&&V.sort(De));be.__r=0}function $t(t,o,e,i,n,r,d,a,p,c,u){var s,h,m,_,S,g=i&&i.__k||Ot,v=o.length;for(e.__d=p,Wo(e,o,g),p=e.__d,s=0;s<v;s++)(m=e.__k[s])!=null&&typeof m!="boolean"&&typeof m!="function"&&(h=m.__i===-1?z:g[m.__i]||z,m.__i=s,Ue(t,m,h,n,r,d,a,p,c,u),_=m.__e,m.ref&&h.ref!=m.ref&&(h.ref&&ze(h.ref,null,m),u.push(m.ref,m.__c||_,m)),S==null&&_!=null&&(S=_),65536&m.__u||h.__k===m.__k?p=Ut(m,p,t):typeof m.type=="function"&&m.__d!==void 0?p=m.__d:_&&(p=_.nextSibling),m.__d=void 0,m.__u&=-196609);e.__d=p,e.__e=S}function Wo(t,o,e){var i,n,r,d,a,p=o.length,c=e.length,u=c,s=0;for(t.__k=[],i=0;i<p;i++)d=i+s,(n=t.__k[i]=(n=o[i])==null||typeof n=="boolean"||typeof n=="function"?null:typeof n=="string"||typeof n=="number"||typeof n=="bigint"||n.constructor==String?_e(null,n,null,null,null):$e(n)?_e($,{children:n},null,null,null):n.constructor===void 0&&n.__b>0?_e(n.type,n.props,n.key,n.ref?n.ref:null,n.__v):n)!=null?(n.__=t,n.__b=t.__b+1,a=Mo(n,e,d,u),n.__i=a,r=null,a!==-1&&(u--,(r=e[a])&&(r.__u|=131072)),r==null||r.__v===null?(a==-1&&s--,typeof n.type!="function"&&(n.__u|=65536)):a!==d&&(a==d-1?s--:a==d+1?s++:a>d?u>p-d?s+=a-d:s--:a<d&&(a==d-s?s-=a-d:s++),a!==i+s&&(n.__u|=65536))):(r=e[d])&&r.key==null&&r.__e&&!(131072&r.__u)&&(r.__e==t.__d&&(t.__d=D(r)),Fe(r,r,!1),e[d]=null,u--);if(u)for(i=0;i<c;i++)(r=e[i])!=null&&!(131072&r.__u)&&(r.__e==t.__d&&(t.__d=D(r)),Fe(r,r))}function Ut(t,o,e){var i,n;if(typeof t.type=="function"){for(i=t.__k,n=0;i&&n<i.length;n++)i[n]&&(i[n].__=t,o=Ut(i[n],o,e));return o}t.__e!=o&&(o&&t.type&&!e.contains(o)&&(o=D(t)),e.insertBefore(t.__e,o||null),o=t.__e);do o=o&&o.nextSibling;while(o!=null&&o.nodeType===8);return o}function Mo(t,o,e,i){var n=t.key,r=t.type,d=e-1,a=e+1,p=o[e];if(p===null||p&&n==p.key&&r===p.type&&!(131072&p.__u))return e;if(i>(p!=null&&!(131072&p.__u)?1:0))for(;d>=0||a<o.length;){if(d>=0){if((p=o[d])&&!(131072&p.__u)&&n==p.key&&r===p.type)return d;d--}if(a<o.length){if((p=o[a])&&!(131072&p.__u)&&n==p.key&&r===p.type)return a;a++}}return-1}function Nt(t,o,e){o[0]==="-"?t.setProperty(o,e??""):t[o]=e==null?"":typeof e!="number"||ko.test(o)?e:e+"px"}function fe(t,o,e,i,n){var r;e:if(o==="style")if(typeof e=="string")t.style.cssText=e;else{if(typeof i=="string"&&(t.style.cssText=i=""),i)for(o in i)e&&o in e||Nt(t.style,o,"");if(e)for(o in e)i&&e[o]===i[o]||Nt(t.style,o,e[o])}else if(o[0]==="o"&&o[1]==="n")r=o!==(o=o.replace(/(PointerCapture)$|Capture$/i,"$1")),o=o.toLowerCase()in t||o==="onFocusOut"||o==="onFocusIn"?o.toLowerCase().slice(2):o.slice(2),t.l||(t.l={}),t.l[o+r]=e,e?i?e.u=i.u:(e.u=Ae,t.addEventListener(o,r?Oe:Ge,r)):t.removeEventListener(o,r?Oe:Ge,r);else{if(n=="http://www.w3.org/2000/svg")o=o.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(o!="width"&&o!="height"&&o!="href"&&o!="list"&&o!="form"&&o!="tabIndex"&&o!="download"&&o!="rowSpan"&&o!="colSpan"&&o!="role"&&o!="popover"&&o in t)try{t[o]=e??"";break e}catch{}typeof e=="function"||(e==null||e===!1&&o[4]!=="-"?t.removeAttribute(o):t.setAttribute(o,o=="popover"&&e==1?"":e))}}function Vt(t){return function(o){if(this.l){var e=this.l[o.type+t];if(o.t==null)o.t=Ae++;else if(o.t<e.u)return;return e(y.event?y.event(o):o)}}}function Ue(t,o,e,i,n,r,d,a,p,c){var u,s,h,m,_,S,g,v,b,R,W,T,I,It,ue,Ve,C=o.type;if(o.constructor!==void 0)return null;128&e.__u&&(p=!!(32&e.__u),r=[a=o.__e=e.__e]),(u=y.__b)&&u(o);e:if(typeof C=="function")try{if(v=o.props,b="prototype"in C&&C.prototype.render,R=(u=C.contextType)&&i[u.__c],W=u?R?R.props.value:u.__:i,e.__c?g=(s=o.__c=e.__c).__=s.__E:(b?o.__c=s=new C(v,W):(o.__c=s=new ve(v,W),s.constructor=C,s.render=Io),R&&R.sub(s),s.props=v,s.state||(s.state={}),s.context=W,s.__n=i,h=s.__d=!0,s.__h=[],s._sb=[]),b&&s.__s==null&&(s.__s=s.state),b&&C.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=N({},s.__s)),N(s.__s,C.getDerivedStateFromProps(v,s.__s))),m=s.props,_=s.state,s.__v=o,h)b&&C.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),b&&s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(b&&C.getDerivedStateFromProps==null&&v!==m&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(v,W),!s.__e&&(s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(v,s.__s,W)===!1||o.__v===e.__v)){for(o.__v!==e.__v&&(s.props=v,s.state=s.__s,s.__d=!1),o.__e=e.__e,o.__k=e.__k,o.__k.forEach(function(me){me&&(me.__=o)}),T=0;T<s._sb.length;T++)s.__h.push(s._sb[T]);s._sb=[],s.__h.length&&d.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(v,s.__s,W),b&&s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(m,_,S)})}if(s.context=W,s.props=v,s.__P=t,s.__e=!1,I=y.__r,It=0,b){for(s.state=s.__s,s.__d=!1,I&&I(o),u=s.render(s.props,s.state,s.context),ue=0;ue<s._sb.length;ue++)s.__h.push(s._sb[ue]);s._sb=[]}else do s.__d=!1,I&&I(o),u=s.render(s.props,s.state,s.context),s.state=s.__s;while(s.__d&&++It<25);s.state=s.__s,s.getChildContext!=null&&(i=N(N({},i),s.getChildContext())),b&&!h&&s.getSnapshotBeforeUpdate!=null&&(S=s.getSnapshotBeforeUpdate(m,_)),$t(t,$e(Ve=u!=null&&u.type===$&&u.key==null?u.props.children:u)?Ve:[Ve],o,e,i,n,r,d,a,p,c),s.base=o.__e,o.__u&=-161,s.__h.length&&d.push(s),g&&(s.__E=s.__=null)}catch(me){if(o.__v=null,p||r!=null){for(o.__u|=p?160:32;a&&a.nodeType===8&&a.nextSibling;)a=a.nextSibling;r[r.indexOf(a)]=null,o.__e=a}else o.__e=e.__e,o.__k=e.__k;y.__e(me,o,e)}else r==null&&o.__v===e.__v?(o.__k=e.__k,o.__e=e.__e):o.__e=To(e.__e,o,e,i,n,r,d,p,c);(u=y.diffed)&&u(o)}function zt(t,o,e){o.__d=void 0;for(var i=0;i<e.length;i++)ze(e[i],e[++i],e[++i]);y.__c&&y.__c(o,t),t.some(function(n){try{t=n.__h,n.__h=[],t.some(function(r){r.call(n)})}catch(r){y.__e(r,n.__v)}})}function To(t,o,e,i,n,r,d,a,p){var c,u,s,h,m,_,S,g=e.props,v=o.props,b=o.type;if(b==="svg"?n="http://www.w3.org/2000/svg":b==="math"?n="http://www.w3.org/1998/Math/MathML":n||(n="http://www.w3.org/1999/xhtml"),r!=null){for(c=0;c<r.length;c++)if((m=r[c])&&"setAttribute"in m==!!b&&(b?m.localName===b:m.nodeType===3)){t=m,r[c]=null;break}}if(t==null){if(b===null)return document.createTextNode(v);t=document.createElementNS(n,b,v.is&&v),r=null,a=!1}if(b===null)g===v||a&&t.data===v||(t.data=v);else{if(r=r&&ye.call(t.childNodes),g=e.props||z,!a&&r!=null)for(g={},c=0;c<t.attributes.length;c++)g[(m=t.attributes[c]).name]=m.value;for(c in g)if(m=g[c],c!="children"){if(c=="dangerouslySetInnerHTML")s=m;else if(c!=="key"&&!(c in v)){if(c=="value"&&"defaultValue"in v||c=="checked"&&"defaultChecked"in v)continue;fe(t,c,null,m,n)}}for(c in v)m=v[c],c=="children"?h=m:c=="dangerouslySetInnerHTML"?u=m:c=="value"?_=m:c=="checked"?S=m:c==="key"||a&&typeof m!="function"||g[c]===m||fe(t,c,m,g[c],n);if(u)a||s&&(u.__html===s.__html||u.__html===t.innerHTML)||(t.innerHTML=u.__html),o.__k=[];else if(s&&(t.innerHTML=""),$t(t,$e(h)?h:[h],o,e,i,b==="foreignObject"?"http://www.w3.org/1999/xhtml":n,r,d,r?r[0]:e.__k&&D(e,0),a,p),r!=null)for(c=r.length;c--;)r[c]!=null&&Ft(r[c]);a||(c="value",_!==void 0&&(_!==t[c]||b==="progress"&&!_||b==="option"&&_!==g[c])&&fe(t,c,_,g[c],n),c="checked",S!==void 0&&S!==t[c]&&fe(t,c,S,g[c],n))}return t}function ze(t,o,e){try{if(typeof t=="function"){var i=typeof t.__u=="function";i&&t.__u(),i&&o==null||(t.__u=t(o))}else t.current=o}catch(n){y.__e(n,e)}}function Fe(t,o,e){var i,n;if(y.unmount&&y.unmount(t),(i=t.ref)&&(i.current&&i.current!==t.__e||ze(i,null,o)),(i=t.__c)!=null){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(r){y.__e(r,o)}i.base=i.__P=null}if(i=t.__k)for(n=0;n<i.length;n++)i[n]&&Fe(i[n],o,e||typeof t.type!="function");e||t.__e==null||Ft(t.__e),t.__c=t.__=t.__e=t.__d=void 0}function Io(t,o,e){return this.constructor(t,e)}function f(t,o,e){var i,n,r,d;y.__&&y.__(t,o),n=(i=typeof e=="function")?null:e&&e.__k||o.__k,r=[],d=[],Ue(o,t=(!i&&e||o).__k=So($,null,[t]),n||z,z,o.namespaceURI,!i&&e?[e]:n?null:o.firstChild?ye.call(o.childNodes):null,r,!i&&e?e:n?n.__e:o.firstChild,i,d),zt(r,t,d)}ye=Ot.slice,y={__e:function(t,o,e,i){for(var n,r,d;o=o.__;)if((n=o.__c)&&!n.__)try{if((r=n.constructor)&&r.getDerivedStateFromError!=null&&(n.setState(r.getDerivedStateFromError(t)),d=n.__d),n.componentDidCatch!=null&&(n.componentDidCatch(t,i||{}),d=n.__d),d)return n.__E=n}catch(a){t=a}throw t}},Dt=0,Po=function(t){return t!=null&&t.constructor==null},ve.prototype.setState=function(t,o){var e;e=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=N({},this.state),typeof t=="function"&&(t=t(N({},e),this.props)),t&&N(e,t),t!=null&&this.__v&&(o&&this._sb.push(o),Ht(this))},ve.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),Ht(this))},ve.prototype.render=$,V=[],Gt=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,De=function(t,o){return t.__v.__b-o.__v.__b},be.__r=0,Ae=0,Ge=Vt(!1),Oe=Vt(!0),xo=0;var Co=0,ri=Array.isArray;function l(t,o,e,i,n,r){o||(o={});var d,a,p=o;if("ref"in p)for(a in p={},o)a=="ref"?d=o[a]:p[a]=o[a];var c={type:t,props:p,key:e,ref:d,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:--Co,__i:-1,__u:0,__source:n,__self:r};if(typeof t=="function"&&(d=t.defaultProps))for(a in d)p[a]===void 0&&(p[a]=d[a]);return y.vnode&&y.vnode(c),c}var we=t=>{let{children:o,orientation:e}=t;return l("div",{className:`deck-widget-button-group ${e}`,children:o})};var q=t=>{let{className:o,label:e,onClick:i}=t;return l("button",{className:`deck-widget-icon-button ${o||""}`,type:"button",onClick:i,title:e,children:l("div",{className:"deck-widget-icon"})})};var qe=class extends G.Widget{constructor(e={}){super(e,qe.defaultProps);this.className="deck-widget-zoom";this.placement="top-left";this.viewId=null;this.viewports={};this.viewId=e.viewId??this.viewId,this.placement=e.placement??this.placement}setProps(e){this.placement=e.placement??this.placement,this.viewId=e.viewId??this.viewId,super.setProps(e)}onRenderHTML(e){let i=l(we,{orientation:this.props.orientation,children:[l(q,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),l(q,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});f(i,e)}onViewportChange(e){this.viewports[e.id]=e}handleZoom(e,i){let n=this.viewId||e?.id||"default-view",r={...e,zoom:i};this.props.transitionDuration>0&&(r.transitionDuration=this.props.transitionDuration,r.transitionInterpolator="latitude"in r?new G.FlyToInterpolator:new G.LinearInterpolator),this.setViewState(n,r)}handleZoomIn(){for(let e of Object.values(this.viewports))this.handleZoom(e,e.zoom+1)}handleZoomOut(){for(let e of Object.values(this.viewports))this.handleZoom(e,e.zoom-1)}setViewState(e,i){this.deck._onViewStateChange({viewId:e,viewState:i,interactionState:{}})}},B=qe;B.defaultProps={...G.Widget.defaultProps,id:"zoom",placement:"top-left",orientation:"vertical",transitionDuration:200,zoomInLabel:"Zoom In",zoomOutLabel:"Zoom Out",viewId:void 0};var Be=w(P(),1);var M=t=>{let{className:o,label:e,onClick:i,children:n}=t;return l("div",{className:"deck-widget-button",children:l("button",{className:`deck-widget-icon-button ${o}`,type:"button",onClick:i,title:e,children:n||l("div",{className:"deck-widget-icon"})})})};var Xe=class extends Be.Widget{constructor(e={}){super(e,Xe.defaultProps);this.className="deck-widget-reset-view";this.placement="top-left";this.placement=e.placement??this.placement}setProps(e){this.placement=e.placement??this.placement,super.setProps(e)}onRenderHTML(e){f(l(M,{className:"deck-widget-reset-focus",label:this.props.label,onClick:this.handleClick.bind(this)}),e)}handleClick(){let e=this.props.initialViewState||this.deck?.props.initialViewState;this.setViewState(e)}setViewState(e){let i=this.props.viewId||e?.id||"default-view",n={...e};this.deck._onViewStateChange({viewId:i,viewState:n,interactionState:{}})}},X=Xe;X.defaultProps={...Be.Widget.defaultProps,id:"reset-view",placement:"top-left",label:"Reset View",initialViewState:void 0,viewId:void 0};var E=w(P(),1);var Je=class extends E.Widget{constructor(e={}){super(e,Je.defaultProps);this.className="deck-widget-compass";this.placement="top-left";this.viewId=null;this.viewports={};this.setProps(this.props)}setProps(e){this.placement=e.placement??this.placement,this.viewId=e.viewId??this.viewId,super.setProps(e)}onRenderHTML(e){let i=this.viewId||Object.values(this.viewports)[0]?.id||"default-view",n=this.viewports[i],[r,d]=this.getRotation(n),a=l("div",{className:"deck-widget-button",style:{perspective:100},children:l("button",{type:"button",onClick:()=>{for(let p of Object.values(this.viewports))this.handleCompassReset(p)},title:this.props.label,style:{transform:`rotateX(${d}deg)`},children:l("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:l("g",{transform:`rotate(${r},13,13)`,children:[l("path",{d:"M10 13.0001L12.9999 5L15.9997 13.0001H10Z",fill:"var(--icon-compass-north-color, rgb(240, 92, 68))"}),l("path",{d:"M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z",fill:"var(--icon-compass-south-color, rgb(204, 204, 204))"})]})})})});f(a,e)}onViewportChange(e){e.equals(this.viewports[e.id])||(this.viewports[e.id]=e,this.updateHTML())}getRotation(e){return e instanceof E.WebMercatorViewport?[-e.bearing,e.pitch]:e instanceof E._GlobeViewport?[0,Math.max(-80,Math.min(80,e.latitude))]:[0,0]}handleCompassReset(e){let i=this.viewId||e.id||"default-view";if(e instanceof E.WebMercatorViewport){let n={...e,bearing:0,...this.getRotation(e)[0]===0?{pitch:0}:{},transitionDuration:this.props.transitionDuration,transitionInterpolator:new E.FlyToInterpolator};this.deck._onViewStateChange({viewId:i,viewState:n,interactionState:{}})}}},J=Je;J.defaultProps={...E.Widget.defaultProps,id:"compass",placement:"top-left",viewId:null,label:"Reset Compass",transitionDuration:200};var Z=w(P(),1);var Ke=class extends Z.Widget{constructor(e={}){super(e,Ke.defaultProps);this.className="deck-widget-gimbal";this.placement="top-left";this.viewId=null;this.setProps(this.props)}setProps(e){this.placement=e.placement??this.placement,this.viewId=e.viewId??this.viewId,super.setProps(e)}onRenderHTML(e){let{rotationOrbit:i,rotationX:n}=this.getNormalizedRotation(),r=l("div",{className:"deck-widget-button",style:{perspective:100,pointerEvents:"auto"},children:l("button",{type:"button",onClick:()=>{this.resetOrbitView()},title:this.props.label,style:{position:"relative",width:26,height:26},children:[l("svg",{className:"gimbal-outer-ring",width:"100%",height:"100%",viewBox:"0 0 26 26",style:{position:"absolute",top:0,left:0,transform:`rotateY(${i}deg)`},children:l("circle",{cx:"13",cy:"13",r:"10",stroke:"var(--icon-gimbal-outer-color, rgb(68, 92, 204))",strokeWidth:this.props.strokeWidth,fill:"none"})}),l("svg",{className:"gimbal-inner-ring",width:"100%",height:"100%",viewBox:"0 0 26 26",style:{position:"absolute",top:0,left:0,transform:`rotateX(${n}deg)`},children:l("circle",{cx:"13",cy:"13",r:"7",stroke:"var(--icon-gimbal-inner-color, rgb(240, 92, 68))",strokeWidth:this.props.strokeWidth,fill:"none"})})]})});f(r,e)}onViewportChange(e){this.updateHTML()}resetOrbitView(){let e=this.getViewId(),i=this.getViewState(e);if("rotationOrbit"in i||"rotationX"in i){let n={...i,rotationOrbit:0,rotationX:0,transitionDuration:this.props.transitionDuration,transitionInterpolator:new Z.LinearInterpolator({transitionProps:["rotationOrbit","rotationX"]})};this.deck._onViewStateChange({viewId:e,viewState:n,interactionState:{}})}}getNormalizedRotation(){let e=this.getViewState(this.getViewId()),[i,n]=this.getRotation(e),r=qt(i),d=qt(n);return{rotationOrbit:r,rotationX:d}}getRotation(e){return e&&("rotationOrbit"in e||"rotationX"in e)?[-(e.rotationOrbit||0),e.rotationX||0]:[0,0]}getViewId(){return this.viewId||"OrbitView"}getViewState(e){let i=this.getViewManager();return e&&i.getViewState(e)||i.viewState}getViewManager(){let e=this.deck?.viewManager;if(!e)throw new Error("wigdet must be added to a deck instance");return e}},K=Ke;K.defaultProps={...Z.Widget.defaultProps,id:"gimbal",placement:"top-left",viewId:void 0,label:"Gimbal",strokeWidth:1.5,transitionDuration:200};function qt(t){let o=((t+180)%360+360)%360-180,e=10,i=o-90;return Math.abs(i)<e&&(i<e?o=90+e:i>-e&&(o=90-e)),o}var Ze=w(P(),1);var Ye=class extends Ze.Widget{constructor(e={}){super(e,Ye.defaultProps);this.className="deck-widget-scale";this.placement="bottom-left";this.scaleWidth=10;this.scaleValue=0;this.scaleText="";this.placement=e.placement??this.placement}setProps(e){this.placement=e.placement??this.placement,super.setProps(e)}onRenderHTML(e){let n=50+this.scaleWidth,r=10;f(l("svg",{className:"deck-widget-scale",width:n,height:30,style:{overflow:"visible",background:"transparent"},onClick:this.handleClick.bind(this),children:[l("text",{x:50+5,y:"10",textAnchor:"end",alignmentBaseline:"middle",style:{fontSize:"16px",fill:"black",fontWeight:"bold",fontFamily:"sans-serif"},children:this.scaleText}),l("line",{x1:50,y1:"15",x2:50+this.scaleWidth,y2:"15",stroke:"black",strokeWidth:"6"}),l("line",{x1:50,y1:"15",x2:50,y2:15-r,stroke:"black",strokeWidth:"6"}),l("line",{x1:50+this.scaleWidth,y1:"15",x2:50+this.scaleWidth,y2:15-r,stroke:"black",strokeWidth:"6"})]}),e)}onViewportChange(e){if(!("latitude"in e))return;let{latitude:i,zoom:n}=e,r=Lo(i,n),{candidate:d,candidatePixels:a}=Eo(r);this.scaleValue=d,this.scaleWidth=a,d>=1e3?this.scaleText=`${(d/1e3).toFixed(1)} km`:this.scaleText=`${d} m`,this.updateHTML()}handleClick(){}},Y=Ye;Y.defaultProps={...Ze.Widget.defaultProps,id:"scale",placement:"bottom-left",label:"Scale",onCapture:void 0};function Lo(t,o){return 40075016686e-3*Math.cos(t*Math.PI/180)/Math.pow(2,o+8)}function Eo(t){let n=150*t,r=Math.floor(Math.log10(n)),d=Math.pow(10,r),a=[1,2,5],p=a[0]*d,c=p/t;for(let u=0;u<a.length;u++){let s=a[u]*d,h=s/t;if(h>=100&&h<=200){p=s,c=h;break}if(h>200){p=u>0?a[u-1]*d:s,c=p/t;break}u===a.length-1&&h<100&&(p=a[0]*d*10,c=p/t)}return{candidate:p,candidatePixels:c}}var ot=w(P(),1),Le=w(P(),1);var j,x,je,Bt,xe=0,eo=[],k=y,Xt=k.__b,Jt=k.__r,Kt=k.diffed,Zt=k.__c,Yt=k.unmount,jt=k.__;function et(t,o){k.__h&&k.__h(x,t,xe||o),xe=0;var e=x.__H||(x.__H={__:[],__h:[]});return t>=e.__.length&&e.__.push({}),e.__[t]}function O(t){return xe=1,Ro(oo,t)}function Ro(t,o,e){var i=et(j++,2);if(i.t=t,!i.__c&&(i.__=[e?e(o):oo(void 0,o),function(a){var p=i.__N?i.__N[0]:i.__[0],c=i.t(p,a);p!==c&&(i.__N=[c,i.__[1]],i.__c.setState({}))}],i.__c=x,!x.u)){var n=function(a,p,c){if(!i.__c.__H)return!0;var u=i.__c.__H.__.filter(function(h){return!!h.__c});if(u.every(function(h){return!h.__N}))return!r||r.call(this,a,p,c);var s=!1;return u.forEach(function(h){if(h.__N){var m=h.__[0];h.__=h.__N,h.__N=void 0,m!==h.__[0]&&(s=!0)}}),!(!s&&i.__c.props===a)&&(!r||r.call(this,a,p,c))};x.u=!0;var r=x.shouldComponentUpdate,d=x.componentWillUpdate;x.componentWillUpdate=function(a,p,c){if(this.__e){var u=r;r=void 0,n(a,p,c),r=u}d&&d.call(this,a,p,c)},x.shouldComponentUpdate=n}return i.__N||i.__}function ke(t,o){var e=et(j++,3);!k.__s&&to(e.__H,o)&&(e.__=t,e.i=o,x.__H.__h.push(e))}function F(t){return xe=5,Ho(function(){return{current:t}},[])}function Ho(t,o){var e=et(j++,7);return to(e.__H,o)&&(e.__=t(),e.__H=o,e.__h=t),e.__}function No(){for(var t;t=eo.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(Pe),t.__H.__h.forEach(Qe),t.__H.__h=[]}catch(o){t.__H.__h=[],k.__e(o,t.__v)}}k.__b=function(t){x=null,Xt&&Xt(t)},k.__=function(t,o){t&&o.__k&&o.__k.__m&&(t.__m=o.__k.__m),jt&&jt(t,o)},k.__r=function(t){Jt&&Jt(t),j=0;var o=(x=t.__c).__H;o&&(je===x?(o.__h=[],x.__h=[],o.__.forEach(function(e){e.__N&&(e.__=e.__N),e.i=e.__N=void 0})):(o.__h.forEach(Pe),o.__h.forEach(Qe),o.__h=[],j=0)),je=x},k.diffed=function(t){Kt&&Kt(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(eo.push(o)!==1&&Bt===k.requestAnimationFrame||((Bt=k.requestAnimationFrame)||Vo)(No)),o.__H.__.forEach(function(e){e.i&&(e.__H=e.i),e.i=void 0})),je=x=null},k.__c=function(t,o){o.some(function(e){try{e.__h.forEach(Pe),e.__h=e.__h.filter(function(i){return!i.__||Qe(i)})}catch(i){o.some(function(n){n.__h&&(n.__h=[])}),o=[],k.__e(i,e.__v)}}),Zt&&Zt(t,o)},k.unmount=function(t){Yt&&Yt(t);var o,e=t.__c;e&&e.__H&&(e.__H.__.forEach(function(i){try{Pe(i)}catch(n){o=n}}),e.__H=void 0,o&&k.__e(o,e.__v))};var Qt=typeof requestAnimationFrame=="function";function Vo(t){var o,e=function(){clearTimeout(i),Qt&&cancelAnimationFrame(o),setTimeout(t)},i=setTimeout(e,100);Qt&&(o=requestAnimationFrame(e))}function Pe(t){var o=x,e=t.__c;typeof e=="function"&&(t.__c=void 0,e()),x=o}function Qe(t){var o=x;t.__c=t.__(),x=o}function to(t,o){return!t||t.length!==o.length||o.some(function(e,i){return e!==t[i]})}function oo(t,o){return typeof o=="function"?o(t):o}var Se=t=>{let[o,e]=O(!1),i=F(null),n=()=>e(!o),r=a=>{i.current&&!i.current.contains(a.target)&&e(!1)};ke(()=>(document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}),[]);let d=a=>{t.onSelect(a),e(!1)};return l("div",{className:"dropdown-container",ref:i,style:{position:"relative",display:"inline-block",...t.style},children:[l("button",{onClick:n,style:{width:"30px",height:"30px",display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid #ccc",borderRadius:"4px",background:"#fff",cursor:"pointer",padding:0},children:"\u25BC"}),o&&l("ul",{style:{position:"absolute",top:"100%",right:"100%",background:"#fff",border:"1px solid #ccc",borderRadius:"4px",listStyle:"none",padding:"4px 0",margin:0,zIndex:1e3,minWidth:"200px"},children:t.menuItems.map(a=>l("li",{onClick:()=>d(a),style:{padding:"4px 8px",cursor:"pointer",whiteSpace:"nowrap"},children:a},a))})]})};var Do="current",io="deck-geocoder-history",We=class{constructor(o){this.addressText="";this.errorText="";this.addressHistory=[];this.props={maxEntries:5,...o},this.addressHistory=this.loadPreviousAddresses()}async geocode(o,e,i){this.errorText="",this.addressText=e;try{let n=await o.geocode(e,i);if(n)return this.storeAddress(this.addressText),n;this.errorText="Invalid address"}catch(n){this.errorText=`${n.message}`}return null}loadPreviousAddresses(){try{let o=window.localStorage.getItem(io),e=o&&JSON.parse(o);return Array.isArray(e)?e.filter(n=>typeof n=="string"):[]}catch{}return[]}storeAddress(o){let e=o.trim();if(!e||e===Do)return;let i=[e,...this.addressHistory.filter(n=>n!==e)];this.addressHistory=i.slice(0,this.props.maxEntries);try{window.localStorage.setItem(io,JSON.stringify(this.addressHistory))}catch{}}};var Go="https://maps.googleapis.com/maps/api/geocode/json",Oo="https://api.mapbox.com/geocoding/v5/mapbox.places",Fo="https://api.opencagedata.com/geocode/v1/json",Me={name:"google",requiresApiKey:!0,async geocode(t,o){let e=encodeURIComponent(t),i=await tt(`${Go}?address=${e}&key=${o}`);switch(i.status){case"OK":let n=i.results.length>0&&i.results[0].geometry.location;return n?{longitude:n.lng,latitude:n.lat}:null;default:throw new Error(`Google Geocoder failed: ${i.status}`)}}},Te={name:"google",requiresApiKey:!0,async geocode(t,o){let e=encodeURIComponent(t),i=await tt(`${Oo}/${e}.json?access_token=${o}`);if(Array.isArray(i.features)&&i.features.length>0){let n=i.features[0].center;if(Array.isArray(n)&&n.length>=2)return{longitude:n[0],latitude:n[1]}}return null}},Ie={name:"opencage",requiresApiKey:!0,async geocode(t,o){let e=encodeURIComponent(t),i=await tt(`${Fo}?q=${e}&key=${o}`);if(Array.isArray(i.results)&&i.results.length>0){let n=i.results[0].geometry;return{longitude:n.lng,latitude:n.lat}}return null}},Ce={name:"current",requiresApiKey:!1,async geocode(){if(!navigator.geolocation)throw new Error("Geolocation not supported");return new Promise((t,o)=>{navigator.geolocation.getCurrentPosition(e=>{let{longitude:i,latitude:n}=e.coords;t({longitude:i,latitude:n})},e=>o(new Error(e.message)))})}};async function tt(t){let o;try{o=await fetch(t)}catch(i){throw new Error(`CORS error? ${i}. ${t}: `)}if(!o.ok)throw new Error(`${o.statusText}. ${t}: `);let e=await o.json();if(!e)throw new Error(`No data returned. ${t}`);return e}var U={name:"coordinates",requiresApiKey:!1,placeholderLocation:"-122.45, 37.8 or 37\xB048'N, 122\xB027'W",async geocode(t){return Ao(t)||null}};function Ao(t){t=t.trim();let o=t.split(/[,;]/).map(n=>n.trim());if(o.length<2)return null;let e=no(o[0]),i=no(o[1]);return e===null||i===null?null:Math.abs(e)>90&&Math.abs(i)<=90?{longitude:e,latitude:i}:Math.abs(i)>90&&Math.abs(e)<=90?{longitude:i,latitude:e}:{latitude:e,longitude:i}}function no(t){if(t=t.trim(),t.includes("\xB0")||t.includes("'")||t.includes('"')){let i=$o(t);return isNaN(i)?null:i}let o=1;/[SW]/i.test(t)&&(o=-1),t=t.replace(/[NSEW]/gi,"");let e=parseFloat(t);return isNaN(e)?null:o*e}function $o(t){let o=/(\d+)[°d]\s*(\d+)?['′m]?\s*(\d+(?:\.\d+)?)?[\"″s]?\s*([NSEW])?/i,e=t.match(o);if(!e)return NaN;let i=parseFloat(e[1])||0,n=parseFloat(e[2])||0,r=parseFloat(e[3])||0,d=e[4]||"",a=i+n/60+r/3600;return/[SW]/i.test(d)&&(a=-a),a}var ro="current",it=class extends ot.Widget{constructor(e={}){super(e,it.defaultProps);this.className="deck-widget-geocoder";this.placement="top-left";this.geocodeHistory=new We({});this.addressText="";this.geocoder=U;this.setInput=e=>{this.addressText=e};this.handleKeyPress=e=>{e.key==="Enter"&&this.handleSubmit()};this.handleSelect=e=>{this.setInput(e),this.handleSubmit()};this.handleSubmit=()=>{this.geocode(this.addressText)};this.geocode=async e=>{let n=this.props._geolocation&&e===ro?Ce:this.geocoder,r=await this.geocodeHistory.geocode(n,this.addressText,this.props.apiKey);r&&this.setViewState(r)};this.viewports={};this.placement=e.placement??this.placement,this.setProps(e),this.geocoder=so(e)}setProps(e){if(super.setProps(e),this.placement=e.placement??this.placement,this.geocoder=so(this.props),this.geocoder.requiresApiKey&&!this.props.apiKey)throw new Error(`API key is required for the ${this.geocoder.name} geocoder`)}onRenderHTML(e){let i=this.props._geolocation?[ro,...this.geocodeHistory.addressHistory]:[...this.geocodeHistory.addressHistory];f(l("div",{className:"deck-widget-geocoder",style:{pointerEvents:"auto",display:"flex",alignItems:"center",flexWrap:"wrap"},children:[l("input",{type:"text",placeholder:this.geocoder.placeholderLocation??"Enter address or location",value:this.geocodeHistory.addressText,onInput:n=>this.setInput(n.target?.value||""),onKeyPress:this.handleKeyPress,style:{flex:"1 1 auto",minWidth:"200px",margin:0,padding:"8px",boxSizing:"border-box"}}),l(Se,{menuItems:i,onSelect:this.handleSelect,style:{margin:2,padding:"4px 2px",boxSizing:"border-box"}}),this.geocodeHistory.errorText&&l("div",{className:"error",children:this.geocodeHistory.errorText})]}),e)}setViewState(e){let i=this.props.viewId||e?.id||"default-view",r={...this.viewports[i]||{},...e};this.props.transitionDuration>0&&(r.transitionDuration=this.props.transitionDuration,r.transitionInterpolator="latitude"in r?new Le.FlyToInterpolator:new Le.LinearInterpolator),this.deck._onViewStateChange({viewId:i,viewState:r,interactionState:{}})}onViewportChange(e){this.viewports[e.id]=e}},Q=it;Q.defaultProps={...ot.Widget.defaultProps,id:"geolocate",viewId:void 0,placement:"top-left",label:"Geolocate",transitionDuration:200,geocoder:"coordinates",customGeocoder:U,apiKey:"",_geolocation:!1};function so(t){switch(t.geocoder){case"google":return Me;case"mapbox":return Te;case"opencage":return Ie;case"coordinates":return U;case"custom":if(!t.customGeocoder)throw new Error("Custom geocoder is not defined");return t.customGeocoder;default:throw new Error(`Unknown geocoder: ${t.geocoder}`)}}var nt=w(P(),1);var rt=class extends nt.Widget{constructor(e={}){super(e,rt.defaultProps);this.className="deck-widget-fullscreen";this.placement="top-left";this.fullscreen=!1;this.placement=e.placement??this.placement}onAdd(){document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}onRemove(){document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}onRenderHTML(e){f(l(M,{onClick:this.handleClick.bind(this),label:this.fullscreen?this.props.exitLabel:this.props.enterLabel,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"}),e)}setProps(e){this.placement=e.placement??this.placement,super.setProps(e)}getContainer(){return this.props.container||this.deck?.getCanvas()?.parentElement}onFullscreenChange(){let e=this.fullscreen,i=document.fullscreenElement===this.getContainer();e!==i&&(this.fullscreen=!this.fullscreen),this.updateHTML()}async handleClick(){this.fullscreen?await this.exitFullscreen():await this.requestFullscreen(),this.updateHTML()}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")}},ee=rt;ee.defaultProps={...nt.Widget.defaultProps,id:"fullscreen",placement:"top-left",enterLabel:"Enter Fullscreen",exitLabel:"Exit Fullscreen",container:void 0};var st=w(P(),1);var at=class extends st.Widget{constructor(e={}){super(e,at.defaultProps);this.className="deck-widget-screenshot";this.placement="top-left";this.placement=e.placement??this.placement}setProps(e){this.placement=e.placement??this.placement,super.setProps(e)}onRenderHTML(e){f(l(M,{className:"deck-widget-camera",label:this.props.label,onClick:this.handleClick.bind(this)}),e)}handleClick(){if(this.props.onCapture){this.props.onCapture(this);return}let e=this.captureScreenToDataURL(this.props.imageFormat);e&&this.downloadDataURL(e,this.props.filename)}captureScreenToDataURL(e){return this.deck?.getCanvas()?.toDataURL(e)}downloadDataURL(e,i){let n=document.createElement("a");n.href=e,n.download=i,n.click()}},te=at;te.defaultProps={...st.Widget.defaultProps,id:"screenshot",placement:"top-left",label:"Screenshot",filename:"screenshot.png",imageFormat:"image/png",onCapture:void 0};var lt=w(P(),1);var dt=class extends lt.Widget{constructor(e={}){super(e,dt.defaultProps);this.className="deck-widget-loading";this.placement="top-left";this.loading=!0;this.placement=e.placement??this.placement}setProps(e){this.placement=e.placement??this.placement,super.setProps(e)}onRenderHTML(e){f(this.loading&&l(M,{className:"deck-widget-spinner-icon",label:this.props.label,onClick:this.handleClick.bind(this)}),e)}onRedraw({layers:e}){let i=!e.some(n=>!n.isLoaded);i!==this.loading&&(this.loading=i,this.updateHTML())}handleClick(){}},oe=dt;oe.defaultProps={...lt.Widget.defaultProps,id:"loading",placement:"top-left",label:"Loading layer data"};var ct=w(P(),1),pt=class extends ct.Widget{constructor(e={}){super(e,pt.defaultProps);this.className="deck-widget-fps";this.placement="top-left";this._lastFps=-1;this.placement=e.placement??this.placement}setProps(e){e.placement&&(this.placement=e.placement),super.setProps(e)}onRenderHTML(e){let i=this._getFps();e.innerText=`FPS:
+${i}`,e.style.backgroundColor="white",e.style.fontFamily="monospace",e.style.fontSize="8px",e.style.fontWeight="700"}onRedraw({}){let e=this._getFps();e!==this._lastFps&&(this._lastFps=e,this.updateHTML())}onAdd({}){this._lastFps=this._getFps(),this.updateHTML()}_getFps(){return Math.round(this.deck.metrics.fps??0)}},ie=pt;ie.defaultProps={...ct.Widget.defaultProps,id:"fps",placement:"top-left"};var A=w(P(),1),ut=w(P(),1);var ao={"--widget-margin":"12px","--button-size":"28px","--button-corner-radius":"8px","--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":"rgb(240, 92, 68)","--icon-compass-south-color":"rgb(204, 204, 204)"},lo={"--widget-margin":"12px","--button-size":"28px","--button-corner-radius":"8px","--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":"rgb(240, 92, 68)","--icon-compass-south-color":"rgb(200, 199, 209)"},Ee={"--widget-margin":"12px","--button-size":"28px","--button-corner-radius":"8px","--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":"rgb(240, 92, 68)","--icon-compass-south-color":"rgb(204, 204, 204)"},Re={"--widget-margin":"12px","--button-size":"28px","--button-corner-radius":"8px","--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":"rgb(240, 92, 68)","--icon-compass-south-color":"rgb(200, 199, 209)"};var mt=class extends ut.Widget{constructor(e={}){super(e,mt.defaultProps);this.className="deck-widget-theme";this.placement="top-left";this.themeMode="dark";this.placement=e.placement??this.placement,this.themeMode=this._getInitialThemeMode()}setProps(e){let{lightModeTheme:i,darkModeTheme:n}=this.props;switch(this.placement=e.placement??this.placement,super.setProps(e),this.themeMode){case"light":e.lightModeTheme&&!(0,A._deepEqual)(e.lightModeTheme,i,1)&&this._setThemeMode("light");break;case"dark":e.darkModeTheme&&!(0,A._deepEqual)(e.darkModeTheme,n,1)&&this._setThemeMode("dark");break}}onRenderHTML(e){let{lightModeLabel:i,darkModeLabel:n}=this.props;f(l(M,{onClick:this._handleClick.bind(this),label:this.themeMode==="dark"?n:i,className:this.themeMode==="dark"?"deck-widget-moon":"deck-widget-sun"}),e)}onAdd(){this._setThemeMode(this.themeMode)}_handleClick(){let e=this.themeMode==="dark"?"light":"dark";this._setThemeMode(e)}_setThemeMode(e){this.themeMode=e;let i=this.rootElement?.closest(".deck-widget-container");if(i){let n=e==="dark"?this.props.darkModeTheme:this.props.lightModeTheme;(0,A._applyStyles)(i,n);let r=this.themeMode==="dark"?this.props.darkModeLabel:this.props.lightModeLabel;A.log.log(1,`Switched theme to ${r}`,n),this.updateHTML()}}_getInitialThemeMode(){let{initialThemeMode:e}=this.props;return e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e}},ne=mt;ne.defaultProps={...ut.Widget.defaultProps,id:"theme",placement:"top-left",lightModeLabel:"Light Mode",lightModeTheme:Ee,darkModeLabel:"Dark Mode",darkModeTheme:Re,initialThemeMode:"auto"};var ht=w(P(),1);var gt=class extends ht.Widget{constructor(e){super(e,gt.defaultProps);this.className="deck-widget-info";this.placement="fill";this.viewId=null;e.position=e.position||[0,0],e.text=e.text||"",e.visible=e.visible||!1,e.minOffset=e.minOffset??0}setProps(e){super.setProps(e)}onViewportChange(e){this.viewport=e,this.updateHTML()}onHover(e){if(this.props.mode==="hover"&&this.props.getTooltip){let i=this.props.getTooltip(e,this);this.setProps({visible:i!==null,...i,style:{zIndex:1,...i?.style}})}}onClick(e){if(this.props.mode==="click"&&this.props.getTooltip){let i=this.props.getTooltip(e,this);return this.setProps({visible:i!==null,...i}),i!==null}return this.props.onClick?.(this,e)||!1}onAdd({deck:e,viewId:i}){let{className:n}=this.props,r=document.createElement("div");return r.classList.add("deck-widget","deck-widget-info"),n&&r.classList.add(n),Object.entries({margin:"0px",top:"0px",left:"0px",position:"absolute"}).forEach(([a,p])=>r.style.setProperty(a,p)),this.deck=e,i?this.viewport=e.getViewports().find(a=>a.id===i):this.viewport=e.getViewports()[0],this.rootElement=r,this.updateHTML(),r}onRenderHTML(e){if(!this.viewport)return;let[i,n]=this.props.position,[r,d]=this.viewport.project([i,n]),a=this.props.minOffset||0,p=10,c=8,u=16,s=d>this.viewport.height/2,h=this.props.style&&this.props.style.background||"rgba(255,255,255,0.9)",m=this.props.visible?l("div",{className:"popup-container",style:{position:"absolute",left:0,top:0},children:[l("div",{className:"popup-content",style:{background:h,padding:"10px",position:"relative",...this.props.style},children:this.props.text}),l("div",{className:"popup-arrow",style:{position:"absolute",width:"0px",height:"0px"}})]}):null;f(m,e),requestAnimationFrame(()=>{if(!this.props.visible||!e.firstChild||!this.viewport)return;let _=e.firstChild,S=_.querySelector(".popup-content"),g=_.querySelector(".popup-arrow");if(!S||!g)return;let v=S.getBoundingClientRect(),b=v.width,R=v.height,W=r-b/2,T;s?T=d-p-c-R:T=d+p+c,W<a&&(W=a),W+b>this.viewport.width-a&&(W=this.viewport.width-a-b),s?T<a&&(T=a):T+R+c>this.viewport.height-a&&(T=this.viewport.height-a-R-c),_.style.left=`${W}px`,_.style.top=`${T}px`,_.style.transform="";let I=r-W-u/2;I=Math.max(I,0),I=Math.min(I,b-u),s?(g.style.left=`${I}px`,g.style.bottom=`-${c}px`,g.style.top="",g.style.borderLeft=`${u/2}px solid transparent`,g.style.borderRight=`${u/2}px solid transparent`,g.style.borderTop=`${c}px solid ${h}`,g.style.borderBottom=""):(g.style.left=`${I}px`,g.style.top=`-${c}px`,g.style.bottom="",g.style.borderLeft=`${u/2}px solid transparent`,g.style.borderRight=`${u/2}px solid transparent`,g.style.borderBottom=`${c}px solid ${h}`,g.style.borderTop="")})}},re=gt;re.defaultProps={...ht.Widget.defaultProps,position:[0,0],text:"",visible:!1,minOffset:0,viewId:null,mode:"hover",getTooltip:void 0,onClick:void 0};var ft=w(P(),1),ho=w(po(),1);var Uo="\u25B6",zo="\u2B07",_t=t=>`${t.name}: ${t.count}`;function uo(t){return t<1e3?`${t.toFixed(2)}ms`:`${(t/1e3).toFixed(2)}s`}function qo(t){return`${(t/1e6).toFixed(1)} MB`}var mo={count:_t,averageTime:t=>`${t.name}: ${uo(t.getAverageTime())}`,totalTime:t=>`${t.name}: ${uo(t.time)}`,fps:t=>`${t.name}: ${Math.round(t.getHz())}fps`,memory:t=>`${t.name}: ${qo(t.count)}`},vt=class extends ft.Widget{constructor(e={}){super(e,vt.defaultProps);this.className="deck-widget-stats";this.placement="top-left";this._counter=0;this.collapsed=!0;this._toggleCollapsed=()=>{this.collapsed=!this.collapsed,this.updateHTML()};this._formatters={...mo},this.setProps(e),this._resetOnUpdate={...this.props.resetOnUpdate},this._stats=this.props.stats}setProps(e){if(super.setProps(e),this._stats=this._getStats(),e.formatters)for(let i in e.formatters){let n=e.formatters[i];this._formatters[i]=typeof n=="string"?mo[n]||_t:n}e.resetOnUpdate&&(this._resetOnUpdate={...e.resetOnUpdate})}onAdd(){this._stats=this._getStats(),this.updateHTML()}onRenderHTML(e){let i=this._stats,n=this.collapsed,r=this.props.title||i?.id||"Stats",d=[];!n&&i&&i.forEach(a=>{let p=this._getLines(a);this._resetOnUpdate&&this._resetOnUpdate[a.name]&&a.reset(),p.forEach((c,u)=>{d.push(l("div",{style:{whiteSpace:"pre"},children:c},`${a.name}-${u}`))})}),f(l("div",{className:"deck-widget-stats-container",style:{cursor:"default"},children:[l("div",{className:"deck-widget-stats-header",style:{cursor:"pointer",pointerEvents:"auto"},onClick:this._toggleCollapsed,children:[n?Uo:zo," ",r]}),!n&&l("div",{className:"deck-widget-stats-content deck-widget-common",children:d})]}),e)}onRedraw(){let e=Math.max(1,this.props.framesPerUpdate||1);this._counter++%e===0&&(console.log("Redrawing stats widget"),this.updateHTML())}_getStats(){switch(this.props.type){case"deck":return this.deck?.stats;case"luma":return Array.from(ho.luma.stats.stats.values())[0];case"device":let i=this.deck?.device?.statsManager.stats.values();return i?Array.from(i)[0]:void 0;case"custom":return this.props.stats;default:throw new Error(`Unknown stats type: ${this.props.type}`)}}_getLines(e){return(this._formatters[e.name]||this._formatters[e.type||""]||_t)(e).split(`
+`)}},se=vt;se.defaultProps={...ft.Widget.defaultProps,type:"deck",stats:void 0,title:"Stats",framesPerUpdate:1,formatters:{},resetOnUpdate:{},id:"stats"};var bt=w(P(),1);var Bo={position:"absolute",top:"100%",left:0,background:"white",border:"1px solid #ccc",borderRadius:"4px",marginTop:"4px",zIndex:100},Xo={background:"white",border:"none",padding:"4px",cursor:"pointer",pointerEvents:"auto"},He=t=>{let{menuItems:o,onItemSelected:e,position:i,style:n}=t,r={...Bo,...n,left:`${i.x}px`,top:`${i.y}px`};return l("div",{style:r,children:o.map(({key:d,label:a})=>l("button",{style:{...Xo,display:"block"},onClick:p=>e(d),children:a},d))})};var Jo=2,Ko=3,yt=class extends bt.Widget{constructor(e){super(e,yt.defaultProps);this.className="deck-widget-context-menu";this.placement="fill";this.pickInfo=null;this.pickInfo=null,this.setProps(e)}onAdd({deck:e}){let i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-context-menu"),Object.entries({margin:"0px",top:"0px",left:"0px",position:"absolute",pointerEvents:"auto"}).forEach(([r,d])=>i.style.setProperty(r,d)),e.getCanvas()?.addEventListener("click",()=>this.hide()),e.getCanvas()?.addEventListener("contextmenu",r=>this.handleContextMenu(r)),i}onRenderHTML(e){let{visible:i,position:n,menuItems:r}=this.props,d=i&&r.length?l(He,{menuItems:r,onItemSelected:a=>this.props.onMenuItemSelected(a,this.pickInfo),position:n,style:{pointerEvents:"auto"}}):null;f(d,e)}handleContextMenu(e){if(e&&(e.button===Jo||e.which===Ko)){this.pickInfo=this.deck?.pickObject({x:e.clientX,y:e.clientY})||null;let i=this.pickInfo&&this.props.getMenuItems?.(this.pickInfo,this)||[],n=i.length>0;return this.setProps({visible:n,position:{x:e.clientX,y:e.clientY},menuItems:i}),this.updateHTML(),e.preventDefault(),n}return!1}hide(){this.setProps({visible:!1})}},ae=yt;ae.defaultProps={...bt.Widget.defaultProps,viewId:null,visible:!1,position:{x:0,y:0},getMenuItems:void 0,menuItems:[],onMenuItemSelected:(e,i)=>console.log("Context menu item selected:",e,i)};var wt=w(P(),1);var Pt=class extends wt.Widget{constructor(e){super(e,Pt.defaultProps);this.className="deck-widget-splitter";this.placement="fill"}setProps(e){super.setProps(e)}onRenderHTML(e){e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="100%",e.style.height="100%",e.style.margin="0px",f(l(Zo,{orientation:this.props.orientation,initialSplit:this.props.initialSplit,onChange:this.props.onChange,onDragStart:this.props.onDragStart,onDragEnd:this.props.onDragEnd}),e)}},le=Pt;le.defaultProps={...wt.Widget.defaultProps,id:"splitter-widget",viewId1:"",viewId2:"",orientation:"vertical",initialSplit:.5,onChange:()=>{},onDragStart:()=>{},onDragEnd:()=>{}};function Zo({orientation:t,initialSplit:o,onChange:e,onDragStart:i,onDragEnd:n}){let[r,d]=O(o),a=F(!1),p=F(null),c=_=>{a.current=!0,i?.(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",s),_.preventDefault()},u=_=>{if(!a.current||!p.current)return;let S=p.current.getBoundingClientRect(),g;t==="vertical"?g=(_.clientX-S.left)/S.width:g=(_.clientY-S.top)/S.height,g=Math.min(Math.max(g,.05),.95),d(g),e?.(g)},s=_=>{a.current&&(a.current=!1,n?.(),document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",s))},h=t==="vertical"?{position:"absolute",top:0,bottom:0,left:`${r*100}%`,width:"4px",cursor:"col-resize",background:"#ccc",zIndex:10,pointerEvents:"auto",boxShadow:"inset -1px 0 0 white, inset 1px 0 0 white"}:{position:"absolute",left:0,right:0,top:`${r*100}%`,height:"4px",cursor:"row-resize",background:"#ccc",zIndex:10,pointerEvents:"auto",boxShadow:"inset -1px 0 0 white, inset 1px 0 0 white"};return l("div",{ref:p,style:{position:"absolute",top:0,left:0,right:0,bottom:0},children:l("div",{style:h,onMouseDown:c})})}var xt=w(P(),1);var kt=class extends xt.Widget{constructor(e={}){super(e,kt.defaultProps);this.id="timeline";this.className="deck-widget-timeline";this.placement="bottom-left";this.playing=!1;this.timerId=null;this.handlePlayPause=()=>{this.playing?this.stop():this.start()};this.handleSliderChange=e=>{let i=e.target,n=Number(i.value);this.currentTime=n,this.props.onTimeChange(n),this.updateHTML()};this.tick=()=>{let[e,i]=this.props.timeRange,n=this.currentTime+this.props.step;n>i&&(n=e),this.currentTime=n,this.props.onTimeChange(n),this.updateHTML(),this.playing&&(this.timerId=window.setTimeout(this.tick,this.props.playInterval))};this.currentTime=this.props.initialTime??this.props.timeRange[0]}setProps(e){this.placement=e.placement||this.placement,super.setProps(e)}onAdd(){this.playing=!1,this.timerId=null}onRemove(){this.stop()}onRenderHTML(e){f(l("div",{style:{display:"flex",alignItems:"center",pointerEvents:"auto"},children:[l("button",{type:"button",className:"timeline-play-pause",title:this.playing?"Pause":"Play",onClick:this.handlePlayPause,children:this.playing?"\u23F8":"\u25B6"}),l("input",{type:"range",className:"timeline-slider",min:this.props.timeRange[0],max:this.props.timeRange[1],step:this.props.step,value:this.currentTime,onInput:this.handleSliderChange})]}),e)}start(){this.playing=!0,this.updateHTML(),this.tick()}stop(){this.playing=!1,this.timerId!==null&&(window.clearTimeout(this.timerId),this.timerId=null),this.updateHTML()}},de=kt;de.defaultProps={...xt.Widget.defaultProps,id:"timeline",placement:"bottom-left",timeRange:[0,100],step:1,initialTime:void 0,onTimeChange:()=>{},playInterval:1e3};var Mt=w(P(),1);var Yo={position:"absolute",top:"100%",left:0,background:"white",border:"1px solid #ccc",borderRadius:"4px",marginTop:"4px",zIndex:100},jo={background:"white",border:"none",padding:"4px",cursor:"pointer",pointerEvents:"auto"};function Ne(t){let[o,e]=O(!1),i=F(null),n=h=>{i.current&&!i.current.contains(h.target)&&e(!1)};ke(()=>(document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}),[i]);let[r,d]=O(t.initialItem),a=h=>{d(h),e(!1),t.onItemSelected(h)},p=()=>e(!o),c=t.menuItems.find(h=>h.value===r),u=t.label||c?.label||"",s=t.icon||c?.icon;return l("div",{style:{position:"relative",display:"inline-block"},ref:i,children:[l(M,{className:t.className,label:u,onClick:p,children:l(s,{})}),o&&l("div",{style:Yo,children:l("div",{style:{display:"flex",flexDirection:"column"},children:t.menuItems.map(h=>l("button",{style:jo,title:h.label,onClick:()=>a(h.value),children:h.icon},h.value))})})]})}var Tt=class extends Mt.Widget{constructor(e={}){super(e,Tt.defaultProps);this.className="deck-widget-view-selector";this.placement="top-left";this.handleSelectMode=e=>{this.viewMode=e,this.updateHTML()};this.placement=this.props.placement,this.viewMode=this.props.initialViewMode}setProps(e){super.setProps(e),this.placement=e.placement??this.placement}onRenderHTML(e){f(l(Ne,{className:"deck-widget-view-selector",menuItems:Qo,initialItem:this.props.initialViewMode,onItemSelected:this.handleSelectMode}),e)}},ce=Tt;ce.defaultProps={...Mt.Widget.defaultProps,id:"view-selector-widget",placement:"top-left",label:"Split View",initialViewMode:"single",onViewModeChange:e=>{console.log(e)}};var St={width:"24px",height:"24px"},Wt={single:()=>l("svg",{width:"24",height:"24",style:St,children:l("rect",{x:"4",y:"4",width:"16",height:"16",stroke:"black",fill:"none",strokeWidth:"2"})}),"split-horizontal":()=>l("svg",{width:"24",height:"24",style:St,children:[l("rect",{x:"4",y:"4",width:"16",height:"7",stroke:"black",fill:"none",strokeWidth:"2"}),l("rect",{x:"4",y:"13",width:"16",height:"7",stroke:"black",fill:"none",strokeWidth:"2"})]}),"split-vertical":()=>l("svg",{width:"24",height:"24",style:St,children:[l("rect",{x:"4",y:"4",width:"7",height:"16",stroke:"black",fill:"none",strokeWidth:"2"}),l("rect",{x:"13",y:"4",width:"7",height:"16",stroke:"black",fill:"none",strokeWidth:"2"})]})},Qo=[{value:"single",icon:Wt.single,label:"Single View"},{value:"split-horizontal",icon:Wt["split-horizontal"],label:"Split Horizontal"},{value:"split-vertical",icon:Wt["split-vertical"],label:"Split Vertical"}];return wo(pe);})();
       return __exports__;
       });

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI widgets for deck.gl",
   "license": "MIT",
   "type": "module",
-  "version": "9.1.12",
+  "version": "9.2.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,8 @@
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.1.0"
+    "@deck.gl/core": "^9.1.0",
+    "@luma.gl/core": "^9.1.9"
   },
-  "gitHead": "ed876a5eee0f612cd876244b0b2835ab871733ac"
+  "gitHead": "f9ca91bb15011ff5552ca8966b4207ada03a08fc"
 }

package/src/compass-widget.tsx

@@ -2,126 +2,51 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-/* global document */
-import {
-  FlyToInterpolator,
-  WebMercatorViewport,
-  _GlobeViewport,
-  _deepEqual as deepEqual,
-  _applyStyles as applyStyles,
-  _removeStyles as removeStyles
-} from '@deck.gl/core';
-import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {Widget, FlyToInterpolator, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
+import type {Viewport, WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
 
-export type CompassWidgetProps = {
-  id?: string;
-  /**
-   * Widget positioning within the view. Default 'top-left'.
-   */
+export type CompassWidgetProps = WidgetProps & {
   placement?: WidgetPlacement;
-  /**
-   * View to attach to and interact with. Required when using multiple views.
-   */
+  /** View to attach to and interact with. Required when using multiple views. */
   viewId?: string | null;
-  /**
-   * Tooltip message.
-   */
+  /** Tooltip message. */
   label?: string;
-  /**
-   * Bearing and pitch reset transition duration in ms.
-   */
+  /** 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;
+export class CompassWidget extends Widget<CompassWidgetProps> {
+  static defaultProps: Required<CompassWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'compass',
+    placement: 'top-left',
+    viewId: null,
+    label: 'Reset Compass',
+    transitionDuration: 200
+  };
+
+  className = 'deck-widget-compass';
   placement: WidgetPlacement = 'top-left';
   viewId?: string | null = null;
   viewports: {[id: string]: Viewport} = {};
-  deck?: Deck<any>;
-  element?: HTMLDivElement;
-
-  constructor(props: CompassWidgetProps) {
-    this.id = props.id ?? this.id;
-    this.viewId = props.viewId ?? this.viewId;
-    this.placement = props.placement ?? this.placement;
 
-    this.props = {
-      ...props,
-      transitionDuration: props.transitionDuration ?? 200,
-      label: props.label ?? 'Reset Compass',
-      style: props.style ?? {}
-    };
+  constructor(props: CompassWidgetProps = {}) {
+    super(props, CompassWidget.defaultProps);
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<CompassWidgetProps>) {
     this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
-    const oldProps = this.props;
-    const el = this.element;
-    if (el) {
-      if (oldProps.className !== props.className) {
-        if (oldProps.className) el.classList.remove(oldProps.className);
-        if (props.className) el.classList.add(props.className);
-      }
-
-      if (!deepEqual(oldProps.style, props.style, 1)) {
-        removeStyles(el, oldProps.style);
-        applyStyles(el, props.style);
-      }
-    }
-
-    Object.assign(this.props, props);
-    this.update();
-  }
-
-  onViewportChange(viewport: Viewport) {
-    // no need to update if viewport is the same
-    if (!viewport.equals(this.viewports[viewport.id])) {
-      this.viewports[viewport.id] = viewport;
-      this.update();
-    }
-  }
-
-  onAdd({deck}: {deck: Deck<any>}): 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);
-    applyStyles(element, style);
-    this.deck = deck;
-    this.element = element;
-    this.update();
-    return element;
-  }
-
-  getRotation(viewport?: Viewport) {
-    if (viewport instanceof WebMercatorViewport) {
-      return [-viewport.bearing, viewport.pitch];
-    } else if (viewport instanceof _GlobeViewport) {
-      return [0, Math.max(-80, Math.min(80, viewport.latitude))];
-    }
-    return [0, 0];
+    super.setProps(props);
   }
 
-  private update() {
+  onRenderHTML(rootElement: HTMLElement): void {
     const viewId = this.viewId || Object.values(this.viewports)[0]?.id || 'default-view';
-    const viewport = this.viewports[viewId];
-    const [rz, rx] = this.getRotation(viewport);
-    const element = this.element;
-    if (!element) {
-      return;
-    }
+    const widgetViewport = this.viewports[viewId];
+    const [rz, rx] = this.getRotation(widgetViewport);
+
     const ui = (
       <div className="deck-widget-button" style={{perspective: 100}}>
         <button
@@ -138,23 +63,36 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
             <g transform={`rotate(${rz},13,13)`}>
               <path
                 d="M10 13.0001L12.9999 5L15.9997 13.0001H10Z"
-                fill="var(--icon-compass-north-color, #F05C44)"
+                fill="var(--icon-compass-north-color, rgb(240, 92, 68))"
               />
               <path
                 d="M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z"
-                fill="var(--icon-compass-south-color, #C2C2CC)"
+                fill="var(--icon-compass-south-color, rgb(204, 204, 204))"
               />
             </g>
           </svg>
         </button>
       </div>
     );
-    render(ui, element);
+
+    render(ui, rootElement);
   }
 
-  onRemove() {
-    this.deck = undefined;
-    this.element = undefined;
+  onViewportChange(viewport: Viewport) {
+    // no need to update if viewport is the same
+    if (!viewport.equals(this.viewports[viewport.id])) {
+      this.viewports[viewport.id] = viewport;
+      this.updateHTML();
+    }
+  }
+
+  getRotation(viewport?: Viewport) {
+    if (viewport instanceof WebMercatorViewport) {
+      return [-viewport.bearing, viewport.pitch];
+    } else if (viewport instanceof _GlobeViewport) {
+      return [0, Math.max(-80, Math.min(80, viewport.latitude))];
+    }
+    return [0, 0];
   }
 
   handleCompassReset(viewport: Viewport) {