@deck.gl/widgets 9.0.40 → 9.1.0-beta.3

package/dist.min.js

@@ -4,6 +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 we=Object.create;var U=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Pe=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Se=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),De=(t,e)=>{for(var n in e)U(t,n,{get:e[n],enumerable:!0})},A=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Ce(e))!Le.call(t,i)&&i!==n&&U(t,i,{get:()=>e[i],enumerable:!(o=xe(e,i))||o.enumerable});return t},L=(t,e,n)=>(A(t,e,"default"),n&&A(n,e,"default")),z=(t,e,n)=>(n=t!=null?we(Pe(t)):{},A(e||!t||!t.__esModule?U(n,"default",{value:t,enumerable:!0}):n,t)),Ne=t=>A(U({},"__esModule",{value:!0}),t);var E=Se(($e,se)=>{se.exports=globalThis.deck});var V={};De(V,{CompassWidget:()=>X,DarkGlassTheme:()=>Ue,DarkTheme:()=>Ze,FullscreenWidget:()=>G,LightGlassTheme:()=>Ae,LightTheme:()=>He,ZoomWidget:()=>J});var x={},re=z(E(),1);L(x,z(E(),1));if(!re.Layer)throw new Error("@deck.gl/core is not found");L(V,x);var W=z(E(),1);var B,p,de,We,D,le,pe,Q,Ee,M={},fe=[],Fe=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ee=Array.isArray;function S(t,e){for(var n in e)t[n]=e[n];return t}function me(t){var e=t.parentNode;e&&e.removeChild(t)}function Ie(t,e,n){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?B.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 $(t,l,o,i,null)}function $(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,constructor:void 0,__v:i??++de,__i:-1,__u:0};return i==null&&p.vnode!=null&&p.vnode(r),r}function F(t){return t.children}function R(t,e){this.props=t,this.context=e}function N(t,e){if(e==null)return t.__?N(t.__,t.__i+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"?N(t):null}function he(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 he(t)}}function ae(t){(!t.__d&&(t.__d=!0)&&D.push(t)&&!q.__r++||le!==p.debounceRendering)&&((le=p.debounceRendering)||pe)(q)}function q(){var t,e,n,o,i,r,l,a,_;for(D.sort(Q);t=D.shift();)t.__d&&(e=D.length,o=void 0,r=(i=(n=t).__v).__e,a=[],_=[],(l=n.__P)&&((o=S({},i)).__v=i.__v+1,p.vnode&&p.vnode(o),te(l,o,i,n.__n,l.ownerSVGElement!==void 0,32&i.__u?[r]:null,a,r??N(i),!!(32&i.__u),_),o.__v=i.__v,o.__.__k[o.__i]=o,be(a,o,_),o.__e!=r&&he(o)),D.length>e&&D.sort(Q));q.__r=0}function ge(t,e,n,o,i,r,l,a,_,c,d){var s,g,u,h,w,v=o&&o.__k||fe,f=e.length;for(n.__d=_,Te(n,e,v),_=n.__d,s=0;s<f;s++)(u=n.__k[s])!=null&&typeof u!="boolean"&&typeof u!="function"&&(g=u.__i===-1?M:v[u.__i]||M,u.__i=s,te(t,u,g,i,r,l,a,_,c,d),h=u.__e,u.ref&&g.ref!=u.ref&&(g.ref&&ne(g.ref,null,u),d.push(u.ref,u.__c||h,u)),w==null&&h!=null&&(w=h),65536&u.__u||g.__k===u.__k?(h||g.__e!=_||(_=N(g)),_=ve(u,_,t)):typeof u.type=="function"&&u.__d!==void 0?_=u.__d:h&&(_=h.nextSibling),u.__d=void 0,u.__u&=-196609);n.__d=_,n.__e=w}function Te(t,e,n){var o,i,r,l,a,_=e.length,c=n.length,d=c,s=0;for(t.__k=[],o=0;o<_;o++)l=o+s,(i=t.__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?$(null,i,null,null,null):ee(i)?$(F,{children:i},null,null,null):i.constructor===void 0&&i.__b>0?$(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i)!=null?(i.__=t,i.__b=t.__b+1,a=ze(i,n,l,d),i.__i=a,r=null,a!==-1&&(d--,(r=n[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?d>_-l?s+=a-l:s--:a<l?a==l-1&&(s=a-l):s=0,a!==o+s&&(i.__u|=65536))):(r=n[l])&&r.key==null&&r.__e&&!(131072&r.__u)&&(r.__e==t.__d&&(t.__d=N(r)),Y(r,r,!1),n[l]=null,d--);if(d)for(o=0;o<c;o++)(r=n[o])!=null&&!(131072&r.__u)&&(r.__e==t.__d&&(t.__d=N(r)),Y(r,r))}function ve(t,e,n){var o,i;if(typeof t.type=="function"){for(o=t.__k,i=0;o&&i<o.length;i++)o[i]&&(o[i].__=t,e=ve(o[i],e,n));return e}t.__e!=e&&(n.insertBefore(t.__e,e||null),e=t.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function ze(t,e,n,o){var i=t.key,r=t.type,l=n-1,a=n+1,_=e[n];if(_===null||_&&i==_.key&&r===_.type&&!(131072&_.__u))return n;if(o>(_!=null&&!(131072&_.__u)?1:0))for(;l>=0||a<e.length;){if(l>=0){if((_=e[l])&&!(131072&_.__u)&&i==_.key&&r===_.type)return l;l--}if(a<e.length){if((_=e[a])&&!(131072&_.__u)&&i==_.key&&r===_.type)return a;a++}}return-1}function ce(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Fe.test(e)?n:n+"px"}function j(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||ce(t.style,e,"");if(n)for(e in n)o&&n[e]===o[e]||ce(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/(PointerCapture)$|Capture$/i,"$1")),e=e.toLowerCase()in t?e.toLowerCase().slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=n,n?o?n.u=o.u:(n.u=Date.now(),t.addEventListener(e,r?ue:_e,r)):t.removeEventListener(e,r?ue:_e,r);else{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!=="role"&&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 _e(t){if(this.l){var e=this.l[t.type+!1];if(t.t){if(t.t<=e.u)return}else t.t=Date.now();return e(p.event?p.event(t):t)}}function ue(t){if(this.l)return this.l[t.type+!0](p.event?p.event(t):t)}function te(t,e,n,o,i,r,l,a,_,c){var d,s,g,u,h,w,v,f,b,P,O,T,ie,H,K,k=e.type;if(e.constructor!==void 0)return null;128&n.__u&&(_=!!(32&n.__u),r=[a=e.__e=n.__e]),(d=p.__b)&&d(e);e:if(typeof k=="function")try{if(f=e.props,b=(d=k.contextType)&&o[d.__c],P=d?b?b.props.value:d.__:o,n.__c?v=(s=e.__c=n.__c).__=s.__E:("prototype"in k&&k.prototype.render?e.__c=s=new k(f,P):(e.__c=s=new R(f,P),s.constructor=k,s.render=Ve),b&&b.sub(s),s.props=f,s.state||(s.state={}),s.context=P,s.__n=o,g=s.__d=!0,s.__h=[],s._sb=[]),s.__s==null&&(s.__s=s.state),k.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=S({},s.__s)),S(s.__s,k.getDerivedStateFromProps(f,s.__s))),u=s.props,h=s.state,s.__v=e,g)k.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(k.getDerivedStateFromProps==null&&f!==u&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(f,P),!s.__e&&(s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(f,s.__s,P)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(s.props=f,s.state=s.__s,s.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(Z){Z&&(Z.__=e)}),O=0;O<s._sb.length;O++)s.__h.push(s._sb[O]);s._sb=[],s.__h.length&&l.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(f,s.__s,P),s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(u,h,w)})}if(s.context=P,s.props=f,s.__P=t,s.__e=!1,T=p.__r,ie=0,"prototype"in k&&k.prototype.render){for(s.state=s.__s,s.__d=!1,T&&T(e),d=s.render(s.props,s.state,s.context),H=0;H<s._sb.length;H++)s.__h.push(s._sb[H]);s._sb=[]}else do s.__d=!1,T&&T(e),d=s.render(s.props,s.state,s.context),s.state=s.__s;while(s.__d&&++ie<25);s.state=s.__s,s.getChildContext!=null&&(o=S(S({},o),s.getChildContext())),g||s.getSnapshotBeforeUpdate==null||(w=s.getSnapshotBeforeUpdate(u,h)),ge(t,ee(K=d!=null&&d.type===F&&d.key==null?d.props.children:d)?K:[K],e,n,o,i,r,l,a,_,c),s.base=e.__e,e.__u&=-161,s.__h.length&&l.push(s),v&&(s.__E=s.__=null)}catch(Z){e.__v=null,_||r!=null?(e.__e=a,e.__u|=_?160:32,r[r.indexOf(a)]=null):(e.__e=n.__e,e.__k=n.__k),p.__e(Z,e,n)}else r==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Me(n.__e,e,n,o,i,r,l,_,c);(d=p.diffed)&&d(e)}function be(t,e,n){e.__d=void 0;for(var o=0;o<n.length;o++)ne(n[o],n[++o],n[++o]);p.__c&&p.__c(e,t),t.some(function(i){try{t=i.__h,i.__h=[],t.some(function(r){r.call(i)})}catch(r){p.__e(r,i.__v)}})}function Me(t,e,n,o,i,r,l,a,_){var c,d,s,g,u,h,w,v=n.props,f=e.props,b=e.type;if(b==="svg"&&(i=!0),r!=null){for(c=0;c<r.length;c++)if((u=r[c])&&"setAttribute"in u==!!b&&(b?u.localName===b:u.nodeType===3)){t=u,r[c]=null;break}}if(t==null){if(b===null)return document.createTextNode(f);t=i?document.createElementNS("http://www.w3.org/2000/svg",b):document.createElement(b,f.is&&f),r=null,a=!1}if(b===null)v===f||a&&t.data===f||(t.data=f);else{if(r=r&&B.call(t.childNodes),v=n.props||M,!a&&r!=null)for(v={},c=0;c<t.attributes.length;c++)v[(u=t.attributes[c]).name]=u.value;for(c in v)u=v[c],c=="children"||(c=="dangerouslySetInnerHTML"?s=u:c==="key"||c in f||j(t,c,null,u,i));for(c in f)u=f[c],c=="children"?g=u:c=="dangerouslySetInnerHTML"?d=u:c=="value"?h=u:c=="checked"?w=u:c==="key"||a&&typeof u!="function"||v[c]===u||j(t,c,u,v[c],i);if(d)a||s&&(d.__html===s.__html||d.__html===t.innerHTML)||(t.innerHTML=d.__html),e.__k=[];else if(s&&(t.innerHTML=""),ge(t,ee(g)?g:[g],e,n,o,i&&b!=="foreignObject",r,l,r?r[0]:n.__k&&N(n,0),a,_),r!=null)for(c=r.length;c--;)r[c]!=null&&me(r[c]);a||(c="value",h!==void 0&&(h!==t[c]||b==="progress"&&!h||b==="option"&&h!==v[c])&&j(t,c,h,v[c],!1),c="checked",w!==void 0&&w!==t[c]&&j(t,c,w,v[c],!1))}return t}function ne(t,e,n){try{typeof t=="function"?t(e):t.current=e}catch(o){p.__e(o,n)}}function Y(t,e,n){var o,i;if(p.unmount&&p.unmount(t),(o=t.ref)&&(o.current&&o.current!==t.__e||ne(o,null,e)),(o=t.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(r){p.__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]&&Y(o[i],e,n||typeof t.type!="function");n||t.__e==null||me(t.__e),t.__=t.__e=t.__d=void 0}function Ve(t,e,n){return this.constructor(t,n)}function I(t,e,n){var o,i,r,l;p.__&&p.__(t,e),i=(o=typeof n=="function")?null:n&&n.__k||e.__k,r=[],l=[],te(e,t=(!o&&n||e).__k=Ie(F,null,[t]),i||M,M,e.ownerSVGElement!==void 0,!o&&n?[n]:i?null:e.firstChild?B.call(e.childNodes):null,r,!o&&n?n:i?i.__e:e.firstChild,o,l),be(r,t,l)}B=fe.slice,p={__e:function(t,e,n,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(t)),l=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(t,o||{}),l=i.__d),l)return i.__E=i}catch(a){t=a}throw t}},de=0,We=function(t){return t!=null&&t.constructor==null},R.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=S({},this.state),typeof t=="function"&&(t=t(S({},n),this.props)),t&&S(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),ae(this))},R.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),ae(this))},R.prototype.render=F,D=[],pe=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,Q=function(t,e){return t.__v.__b-e.__v.__b},q.__r=0,Ee=0;var Oe=0,Ge=Array.isArray;function m(t,e,n,o,i,r){var l,a,_={};for(a in e)a=="ref"?l=e[a]:_[a]=e[a];var c={type:t,props:_,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:--Oe,__i:-1,__u:0,__source:i,__self:r};if(typeof t=="function"&&(l=t.defaultProps))for(a in l)_[a]===void 0&&(_[a]=l[a]);return p.vnode&&p.vnode(c),c}var ye=t=>{let{className:e,label:n,onClick:o}=t;return m("div",{className:"deck-widget-button",children:m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:o,title:n,children:m("div",{className:"deck-widget-icon"})})})},ke=t=>{let{children:e,orientation:n}=t;return m("div",{className:`deck-widget-button-group ${n}`,children:e})},oe=t=>{let{className:e,label:n,onClick:o}=t;return m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:o,title:n,children:m("div",{className:"deck-widget-icon"})})};var G=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:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-fullscreen"),o&&i.classList.add(o),(0,W._applyStyles)(i,n),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:n}=this.props,o=this.element;if(!o)return;let i=m(ye,{onClick:this.handleClick.bind(this),label:this.fullscreen?n:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});I(i,o)}setProps(e){let n=this.props,o=this.element;o&&(n.className!==e.className&&(n.className&&o.classList.remove(n.className),e.className&&o.classList.add(e.className)),(0,W._deepEqual)(n.style,e.style,1)||((0,W._removeStyles)(o,n.style),(0,W._applyStyles)(o,e.style))),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 y=z(E(),1);var X=class{constructor(e){this.id="compass";this.placement="top-left";this.viewId=null;this.viewports={};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){let n=this.props,o=this.element;o&&(n.className!==e.className&&(n.className&&o.classList.remove(n.className),e.className&&o.classList.add(e.className)),(0,y._deepEqual)(n.style,e.style,1)||((0,y._removeStyles)(o,n.style),(0,y._applyStyles)(o,e.style))),Object.assign(this.props,e)}onViewportChange(e){this.viewports[e.id]=e,this.update()}onAdd({deck:e}){let{style:n,className:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-compass"),o&&i.classList.add(o),(0,y._applyStyles)(i,n),this.deck=e,this.element=i,this.update(),i}getRotation(e){return e instanceof y.WebMercatorViewport?[-e.bearing,e.pitch]:e instanceof y._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",n=this.viewports[e],[o,i]=this.getRotation(n),r=this.element;if(!r)return;let l=m("div",{className:"deck-widget-button",style:{perspective:100},children:m("button",{type:"button",onClick:()=>{for(let a of Object.values(this.viewports))this.handleCompassReset(a)},label:this.props.label,style:{transform:`rotateX(${i}deg)`},children:m("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:m("g",{transform:`rotate(${o},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)"})]})})})});I(l,r)}onRemove(){this.deck=void 0,this.element=void 0}handleCompassReset(e){let n=this.viewId||e.id||"default-view";if(e instanceof y.WebMercatorViewport){let o={...e,bearing:0,...this.getRotation(e)[0]===0?{pitch:0}:{},transitionDuration:this.props.transitionDuration,transitionInterpolator:new y.FlyToInterpolator};this.deck._onViewStateChange({viewId:n,viewState:o,interactionState:{}})}}};var C=z(E(),1);var J=class{constructor(e){this.id="zoom";this.placement="top-left";this.orientation="vertical";this.viewId=null;this.viewports={};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:o}=this.props,i=document.createElement("div");i.classList.add("deck-widget","deck-widget-zoom"),o&&i.classList.add(o),(0,C._applyStyles)(i,n);let r=m(ke,{orientation:this.orientation,children:[m(oe,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),m(oe,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});return I(r,i),this.deck=e,this.element=i,i}onRemove(){this.deck=void 0,this.element=void 0}setProps(e){let n=this.props,o=this.element;o&&(n.className!==e.className&&(n.className&&o.classList.remove(n.className),e.className&&o.classList.add(e.className)),(0,C._deepEqual)(n.style,e.style,1)||((0,C._removeStyles)(o,n.style),(0,C._applyStyles)(o,e.style))),Object.assign(this.props,e)}onViewportChange(e){this.viewports[e.id]=e}handleZoom(e,n){let o=this.viewId||e?.id||"default-view",i={...e,zoom:n,transitionDuration:this.props.transitionDuration,transitionInterpolator:new C.FlyToInterpolator};this.deck._onViewStateChange({viewId:o,viewState:i,interactionState:{}})}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)}};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)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},Ze={"--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"},Ae={"--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"},Ue={"--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 Ne(V);})();
+"use strict";var __exports__=(()=>{var Pe=Object.create;var A=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var Se=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,We=Object.prototype.hasOwnProperty;var De=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Ne=(t,e)=>{for(var n in e)A(t,n,{get:e[n],enumerable:!0})},R=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Se(e))!We.call(t,i)&&i!==n&&A(t,i,{get:()=>e[i],enumerable:!(o=Le(e,i))||o.enumerable});return t},L=(t,e,n)=>(R(t,e,"default"),n&&R(n,e,"default")),z=(t,e,n)=>(n=t!=null?Pe(Ie(t)):{},R(e||!t||!t.__esModule?A(n,"default",{value:t,enumerable:!0}):n,t)),Fe=t=>R(A({},"__esModule",{value:!0}),t);var N=De((Be,ce)=>{ce.exports=globalThis.deck});var O={};Ne(O,{CompassWidget:()=>J,DarkGlassTheme:()=>$e,DarkTheme:()=>Ae,FullscreenWidget:()=>X,LightGlassTheme:()=>je,LightTheme:()=>Re,ZoomWidget:()=>K});var x={},_e=z(N(),1);L(x,z(N(),1));if(!_e.Layer)throw new Error("@deck.gl/core is not found");L(O,x);var D=z(N(),1);var G,f,he,Ee,I,ue,me,Y,oe,ee,te,Te,V={},ge=[],Me=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ie=Array.isArray;function S(t,e){for(var n in e)t[n]=e[n];return t}function ve(t){var e=t.parentNode;e&&e.removeChild(t)}function ze(t,e,n){var o,i,r,a={};for(r in e)r=="key"?o=e[r]:r=="ref"?i=e[r]:a[r]=e[r];if(arguments.length>2&&(a.children=arguments.length>3?G.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)a[r]===void 0&&(a[r]=t.defaultProps[r]);return $(t,a,o,i,null)}function $(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,constructor:void 0,__v:i??++he,__i:-1,__u:0};return i==null&&f.vnode!=null&&f.vnode(r),r}function F(t){return t.children}function q(t,e){this.props=t,this.context=e}function W(t,e){if(e==null)return t.__?W(t.__,t.__i+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"?W(t):null}function ye(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 ye(t)}}function de(t){(!t.__d&&(t.__d=!0)&&I.push(t)&&!B.__r++||ue!==f.debounceRendering)&&((ue=f.debounceRendering)||me)(B)}function B(){var t,e,n,o,i,r,a,l;for(I.sort(Y);t=I.shift();)t.__d&&(e=I.length,o=void 0,r=(i=(n=t).__v).__e,a=[],l=[],n.__P&&((o=S({},i)).__v=i.__v+1,f.vnode&&f.vnode(o),se(n.__P,o,i,n.__n,n.__P.namespaceURI,32&i.__u?[r]:null,a,r??W(i),!!(32&i.__u),l),o.__v=i.__v,o.__.__k[o.__i]=o,we(a,o,l),o.__e!=r&&ye(o)),I.length>e&&I.sort(Y));B.__r=0}function be(t,e,n,o,i,r,a,l,u,c,d){var s,y,_,g,k,v=o&&o.__k||ge,p=e.length;for(n.__d=u,Ve(n,e,v),u=n.__d,s=0;s<p;s++)(_=n.__k[s])!=null&&typeof _!="boolean"&&typeof _!="function"&&(y=_.__i===-1?V:v[_.__i]||V,_.__i=s,se(t,_,y,i,r,a,l,u,c,d),g=_.__e,_.ref&&y.ref!=_.ref&&(y.ref&&re(y.ref,null,_),d.push(_.ref,_.__c||g,_)),k==null&&g!=null&&(k=g),65536&_.__u||y.__k===_.__k?u=ke(_,u,t):typeof _.type=="function"&&_.__d!==void 0?u=_.__d:g&&(u=g.nextSibling),_.__d=void 0,_.__u&=-196609);n.__d=u,n.__e=k}function Ve(t,e,n){var o,i,r,a,l,u=e.length,c=n.length,d=c,s=0;for(t.__k=[],o=0;o<u;o++)a=o+s,(i=t.__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?$(null,i,null,null,null):ie(i)?$(F,{children:i},null,null,null):i.constructor===void 0&&i.__b>0?$(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i)!=null?(i.__=t,i.__b=t.__b+1,l=Oe(i,n,a,d),i.__i=l,r=null,l!==-1&&(d--,(r=n[l])&&(r.__u|=131072)),r==null||r.__v===null?(l==-1&&s--,typeof i.type!="function"&&(i.__u|=65536)):l!==a&&(l==a-1?s--:l==a+1?s++:l>a?d>u-a?s+=l-a:s--:l<a&&(l==a-s?s-=l-a:s++),l!==o+s&&(i.__u|=65536))):(r=n[a])&&r.key==null&&r.__e&&!(131072&r.__u)&&(r.__e==t.__d&&(t.__d=W(r)),ne(r,r,!1),n[a]=null,d--);if(d)for(o=0;o<c;o++)(r=n[o])!=null&&!(131072&r.__u)&&(r.__e==t.__d&&(t.__d=W(r)),ne(r,r))}function ke(t,e,n){var o,i;if(typeof t.type=="function"){for(o=t.__k,i=0;o&&i<o.length;i++)o[i]&&(o[i].__=t,e=ke(o[i],e,n));return e}t.__e!=e&&(e&&t.type&&!n.contains(e)&&(e=W(t)),n.insertBefore(t.__e,e||null),e=t.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function Oe(t,e,n,o){var i=t.key,r=t.type,a=n-1,l=n+1,u=e[n];if(u===null||u&&i==u.key&&r===u.type&&!(131072&u.__u))return n;if(o>(u!=null&&!(131072&u.__u)?1:0))for(;a>=0||l<e.length;){if(a>=0){if((u=e[a])&&!(131072&u.__u)&&i==u.key&&r===u.type)return a;a--}if(l<e.length){if((u=e[l])&&!(131072&u.__u)&&i==u.key&&r===u.type)return l;l++}}return-1}function pe(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Me.test(e)?n:n+"px"}function j(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||pe(t.style,e,"");if(n)for(e in n)o&&n[e]===o[e]||pe(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")r=e!==(e=e.replace(/(PointerCapture)$|Capture$/i,"$1")),e=e.toLowerCase()in t||e==="onFocusOut"||e==="onFocusIn"?e.toLowerCase().slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=n,n?o?n.u=o.u:(n.u=oe,t.addEventListener(e,r?te:ee,r)):t.removeEventListener(e,r?te:ee,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 t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!=="-"?t.removeAttribute(e):t.setAttribute(e,e=="popover"&&n==1?"":n))}}function fe(t){return function(e){if(this.l){var n=this.l[e.type+t];if(e.t==null)e.t=oe++;else if(e.t<n.u)return;return n(f.event?f.event(e):e)}}}function se(t,e,n,o,i,r,a,l,u,c){var d,s,y,_,g,k,v,p,h,T,P,U,M,ae,Z,Q,w=e.type;if(e.constructor!==void 0)return null;128&n.__u&&(u=!!(32&n.__u),r=[l=e.__e=n.__e]),(d=f.__b)&&d(e);e:if(typeof w=="function")try{if(p=e.props,h="prototype"in w&&w.prototype.render,T=(d=w.contextType)&&o[d.__c],P=d?T?T.props.value:d.__:o,n.__c?v=(s=e.__c=n.__c).__=s.__E:(h?e.__c=s=new w(p,P):(e.__c=s=new q(p,P),s.constructor=w,s.render=Ze),T&&T.sub(s),s.props=p,s.state||(s.state={}),s.context=P,s.__n=o,y=s.__d=!0,s.__h=[],s._sb=[]),h&&s.__s==null&&(s.__s=s.state),h&&w.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=S({},s.__s)),S(s.__s,w.getDerivedStateFromProps(p,s.__s))),_=s.props,g=s.state,s.__v=e,y)h&&w.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),h&&s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(h&&w.getDerivedStateFromProps==null&&p!==_&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(p,P),!s.__e&&(s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(p,s.__s,P)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(s.props=p,s.state=s.__s,s.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(H){H&&(H.__=e)}),U=0;U<s._sb.length;U++)s.__h.push(s._sb[U]);s._sb=[],s.__h.length&&a.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(p,s.__s,P),h&&s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(_,g,k)})}if(s.context=P,s.props=p,s.__P=t,s.__e=!1,M=f.__r,ae=0,h){for(s.state=s.__s,s.__d=!1,M&&M(e),d=s.render(s.props,s.state,s.context),Z=0;Z<s._sb.length;Z++)s.__h.push(s._sb[Z]);s._sb=[]}else do s.__d=!1,M&&M(e),d=s.render(s.props,s.state,s.context),s.state=s.__s;while(s.__d&&++ae<25);s.state=s.__s,s.getChildContext!=null&&(o=S(S({},o),s.getChildContext())),h&&!y&&s.getSnapshotBeforeUpdate!=null&&(k=s.getSnapshotBeforeUpdate(_,g)),be(t,ie(Q=d!=null&&d.type===F&&d.key==null?d.props.children:d)?Q:[Q],e,n,o,i,r,a,l,u,c),s.base=e.__e,e.__u&=-161,s.__h.length&&a.push(s),v&&(s.__E=s.__=null)}catch(H){if(e.__v=null,u||r!=null){for(e.__u|=u?160:32;l&&l.nodeType===8&&l.nextSibling;)l=l.nextSibling;r[r.indexOf(l)]=null,e.__e=l}else e.__e=n.__e,e.__k=n.__k;f.__e(H,e,n)}else r==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=Ue(n.__e,e,n,o,i,r,a,u,c);(d=f.diffed)&&d(e)}function we(t,e,n){e.__d=void 0;for(var o=0;o<n.length;o++)re(n[o],n[++o],n[++o]);f.__c&&f.__c(e,t),t.some(function(i){try{t=i.__h,i.__h=[],t.some(function(r){r.call(i)})}catch(r){f.__e(r,i.__v)}})}function Ue(t,e,n,o,i,r,a,l,u){var c,d,s,y,_,g,k,v=n.props,p=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((_=r[c])&&"setAttribute"in _==!!h&&(h?_.localName===h:_.nodeType===3)){t=_,r[c]=null;break}}if(t==null){if(h===null)return document.createTextNode(p);t=document.createElementNS(i,h,p.is&&p),r=null,l=!1}if(h===null)v===p||l&&t.data===p||(t.data=p);else{if(r=r&&G.call(t.childNodes),v=n.props||V,!l&&r!=null)for(v={},c=0;c<t.attributes.length;c++)v[(_=t.attributes[c]).name]=_.value;for(c in v)if(_=v[c],c!="children"){if(c=="dangerouslySetInnerHTML")s=_;else if(c!=="key"&&!(c in p)){if(c=="value"&&"defaultValue"in p||c=="checked"&&"defaultChecked"in p)continue;j(t,c,null,_,i)}}for(c in p)_=p[c],c=="children"?y=_:c=="dangerouslySetInnerHTML"?d=_:c=="value"?g=_:c=="checked"?k=_:c==="key"||l&&typeof _!="function"||v[c]===_||j(t,c,_,v[c],i);if(d)l||s&&(d.__html===s.__html||d.__html===t.innerHTML)||(t.innerHTML=d.__html),e.__k=[];else if(s&&(t.innerHTML=""),be(t,ie(y)?y:[y],e,n,o,h==="foreignObject"?"http://www.w3.org/1999/xhtml":i,r,a,r?r[0]:n.__k&&W(n,0),l,u),r!=null)for(c=r.length;c--;)r[c]!=null&&ve(r[c]);l||(c="value",g!==void 0&&(g!==t[c]||h==="progress"&&!g||h==="option"&&g!==v[c])&&j(t,c,g,v[c],i),c="checked",k!==void 0&&k!==t[c]&&j(t,c,k,v[c],i))}return t}function re(t,e,n){try{if(typeof t=="function"){var o=typeof t.__u=="function";o&&t.__u(),o&&e==null||(t.__u=t(e))}else t.current=e}catch(i){f.__e(i,n)}}function ne(t,e,n){var o,i;if(f.unmount&&f.unmount(t),(o=t.ref)&&(o.current&&o.current!==t.__e||re(o,null,e)),(o=t.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(r){f.__e(r,e)}o.base=o.__P=null}if(o=t.__k)for(i=0;i<o.length;i++)o[i]&&ne(o[i],e,n||typeof t.type!="function");n||t.__e==null||ve(t.__e),t.__c=t.__=t.__e=t.__d=void 0}function Ze(t,e,n){return this.constructor(t,n)}function E(t,e,n){var o,i,r,a;f.__&&f.__(t,e),i=(o=typeof n=="function")?null:n&&n.__k||e.__k,r=[],a=[],se(e,t=(!o&&n||e).__k=ze(F,null,[t]),i||V,V,e.namespaceURI,!o&&n?[n]:i?null:e.firstChild?G.call(e.childNodes):null,r,!o&&n?n:i?i.__e:e.firstChild,o,a),we(r,t,a)}G=ge.slice,f={__e:function(t,e,n,o){for(var i,r,a;e=e.__;)if((i=e.__c)&&!i.__)try{if((r=i.constructor)&&r.getDerivedStateFromError!=null&&(i.setState(r.getDerivedStateFromError(t)),a=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(t,o||{}),a=i.__d),a)return i.__E=i}catch(l){t=l}throw t}},he=0,Ee=function(t){return t!=null&&t.constructor==null},q.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=S({},this.state),typeof t=="function"&&(t=t(S({},n),this.props)),t&&S(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),de(this))},q.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),de(this))},q.prototype.render=F,I=[],me=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,Y=function(t,e){return t.__v.__b-e.__v.__b},B.__r=0,oe=0,ee=fe(!1),te=fe(!0),Te=0;var He=0,Ke=Array.isArray;function m(t,e,n,o,i,r){e||(e={});var a,l,u=e;if("ref"in u)for(l in u={},e)l=="ref"?a=e[l]:u[l]=e[l];var c={type:t,props:u,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:--He,__i:-1,__u:0,__source:i,__self:r};if(typeof t=="function"&&(a=t.defaultProps))for(l in a)u[l]===void 0&&(u[l]=a[l]);return f.vnode&&f.vnode(c),c}var xe=t=>{let{className:e,label:n,onClick:o}=t;return m("div",{className:"deck-widget-button",children:m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:o,title:n,children:m("div",{className:"deck-widget-icon"})})})},Ce=t=>{let{children:e,orientation:n}=t;return m("div",{className:`deck-widget-button-group ${n}`,children:e})},le=t=>{let{className:e,label:n,onClick:o}=t;return m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:o,title:n,children:m("div",{className:"deck-widget-icon"})})};var X=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:n,className:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-fullscreen"),o&&i.classList.add(o),(0,D._applyStyles)(i,n),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:n}=this.props,o=this.element;if(!o)return;let i=m(xe,{onClick:this.handleClick.bind(this),label:this.fullscreen?n:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});E(i,o)}setProps(e){this.placement=e.placement??this.placement;let n=this.props,o=this.element;o&&(n.className!==e.className&&(n.className&&o.classList.remove(n.className),e.className&&o.classList.add(e.className)),(0,D._deepEqual)(n.style,e.style,1)||((0,D._removeStyles)(o,n.style),(0,D._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,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 b=z(N(),1);var J=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 n=this.props,o=this.element;o&&(n.className!==e.className&&(n.className&&o.classList.remove(n.className),e.className&&o.classList.add(e.className)),(0,b._deepEqual)(n.style,e.style,1)||((0,b._removeStyles)(o,n.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:n,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,n),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",n=this.viewports[e],[o,i]=this.getRotation(n),r=this.element;if(!r)return;let a=m("div",{className:"deck-widget-button",style:{perspective:100},children:m("button",{type:"button",onClick:()=>{for(let l of Object.values(this.viewports))this.handleCompassReset(l)},title:this.props.label,style:{transform:`rotateX(${i}deg)`},children:m("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:m("g",{transform:`rotate(${o},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)"})]})})})});E(a,r)}onRemove(){this.deck=void 0,this.element=void 0}handleCompassReset(e){let n=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:n,viewState:o,interactionState:{}})}}};var C=z(N(),1);var K=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={...e,orientation:e.orientation??"vertical",transitionDuration:e.transitionDuration??200,zoomInLabel:e.zoomInLabel??"Zoom In",zoomOutLabel:e.zoomOutLabel??"Zoom Out",style:e.style??{}}}onAdd({deck:e}){let{style:n,className:o}=this.props,i=document.createElement("div");return i.classList.add("deck-widget","deck-widget-zoom"),o&&i.classList.add(o),(0,C._applyStyles)(i,n),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 n=this.props,o=this.element;o&&(n.className!==e.className&&(n.className&&o.classList.remove(n.className),e.className&&o.classList.add(e.className)),(0,C._deepEqual)(n.style,e.style,1)||((0,C._removeStyles)(o,n.style),(0,C._applyStyles)(o,e.style))),Object.assign(this.props,e),this.update()}onViewportChange(e){this.viewports[e.id]=e}handleZoom(e,n){let o=this.viewId||e?.id||"default-view",i={...e,zoom:n,transitionDuration:this.props.transitionDuration,transitionInterpolator:new C.FlyToInterpolator};this.deck._onViewStateChange({viewId:o,viewState:i,interactionState:{}})}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)}update(){let e=this.element;if(!e)return;let n=m(Ce,{orientation:this.props.orientation,children:[m(le,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),m(le,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});E(n,e)}};var Re={"--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"},Ae={"--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"},je={"--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"},$e={"--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(O);})();
       return __exports__;
       });

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI widgets for deck.gl",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.40",
+  "version": "9.1.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,7 @@
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0"
+    "@deck.gl/core": "^9.1.0-beta"
   },
-  "gitHead": "fe6e4763b3dcd5b602291e7732e9d30b0a4eaec1"
+  "gitHead": "6625885881202cb753b64c6f2b8ee6f323092075"
 }

package/src/compass-widget.tsx

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* global document */
 import {
   FlyToInterpolator,
@@ -10,8 +14,11 @@ import {
 import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 
-interface CompassWidgetProps {
+export type CompassWidgetProps = {
   id?: string;
+  /**
+   * Widget positioning within the view. Default 'top-left'.
+   */
   placement?: WidgetPlacement;
   /**
    * View to attach to and interact with. Required when using multiple views.
@@ -33,7 +40,7 @@ interface CompassWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class CompassWidget implements Widget<CompassWidgetProps> {
   id = 'compass';
@@ -45,16 +52,21 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
   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;
+    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 ?? {}
+    };
   }
 
   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) {
@@ -70,11 +82,15 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   onViewportChange(viewport: Viewport) {
-    this.viewports[viewport.id] = viewport;
-    this.update();
+    // 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 {
@@ -98,7 +114,7 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
     return [0, 0];
   }
 
-  update() {
+  private update() {
     const viewId = this.viewId || Object.values(this.viewports)[0]?.id || 'default-view';
     const viewport = this.viewports[viewId];
     const [rz, rx] = this.getRotation(viewport);
@@ -115,7 +131,7 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
               this.handleCompassReset(viewport);
             }
           }}
-          label={this.props.label}
+          title={this.props.label}
           style={{transform: `rotateX(${rx}deg)`}}
         >
           <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">

package/src/components.tsx

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export const IconButton = props => {
   const {className, label, onClick} = props;
   return (

package/src/fullscreen-widget.tsx

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* global document */
 import {
   _deepEqual as deepEqual,
@@ -8,8 +12,11 @@ import type {Deck, Widget, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {IconButton} from './components';
 
-interface FullscreenWidgetProps {
+export type FullscreenWidgetProps = {
   id?: string;
+  /**
+   * Widget positioning within the view. Default 'top-left'.
+   */
   placement?: WidgetPlacement;
   /**
    * A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen.
@@ -33,7 +40,7 @@ interface FullscreenWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
   id = 'fullscreen';
@@ -46,12 +53,15 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
   fullscreen: boolean = false;
 
   constructor(props: FullscreenWidgetProps) {
-    this.id = props.id || 'fullscreen';
-    this.placement = props.placement || 'top-left';
-    props.enterLabel = props.enterLabel || 'Enter Fullscreen';
-    props.exitLabel = props.exitLabel || 'Exit Fullscreen';
-    props.style = props.style || {};
-    this.props = props;
+    this.id = props.id ?? this.id;
+    this.placement = props.placement ?? this.placement;
+
+    this.props = {
+      ...props,
+      enterLabel: props.enterLabel ?? 'Enter Fullscreen',
+      exitLabel: props.exitLabel ?? 'Exit Fullscreen',
+      style: props.style ?? {}
+    };
   }
 
   onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
@@ -75,8 +85,8 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
 
   private update() {
     const {enterLabel, exitLabel} = this.props;
-    const el = this.element;
-    if (!el) {
+    const element = this.element;
+    if (!element) {
       return;
     }
 
@@ -87,10 +97,11 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
         className={this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter'}
       />
     );
-    render(ui, el);
+    render(ui, element);
   }
 
   setProps(props: Partial<FullscreenWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
     const oldProps = this.props;
     const el = this.element;
     if (el) {
@@ -106,6 +117,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   getContainer() {

package/src/index.ts

@@ -1,5 +1,13 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export {FullscreenWidget} from './fullscreen-widget';
 export {CompassWidget} from './compass-widget';
 export {ZoomWidget} from './zoom-widget';
 
+export type {FullscreenWidgetProps} from './fullscreen-widget';
+export type {CompassWidgetProps} from './compass-widget';
+export type {ZoomWidgetProps} from './zoom-widget';
+
 export * from './themes';

package/src/themes.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export const LightTheme = {
   '--button-background': '#fff',
   '--button-stroke': 'rgba(255, 255, 255, 0.3)',

package/src/zoom-widget.tsx

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* global document */
 import {
   FlyToInterpolator,
@@ -9,8 +13,11 @@ import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 import {ButtonGroup, GroupedIconButton} from './components';
 
-interface ZoomWidgetProps {
+export type ZoomWidgetProps = {
   id?: string;
+  /**
+   * Widget positioning within the view. Default 'top-left'.
+   */
   placement?: WidgetPlacement;
   /**
    * View to attach to and interact with. Required when using multiple views.
@@ -40,28 +47,30 @@ interface ZoomWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class ZoomWidget implements Widget<ZoomWidgetProps> {
   id = 'zoom';
   props: ZoomWidgetProps;
   placement: WidgetPlacement = 'top-left';
-  orientation: 'vertical' | 'horizontal' = 'vertical';
   viewId?: string | null = null;
   viewports: {[id: string]: Viewport} = {};
   deck?: Deck<any>;
   element?: HTMLDivElement;
 
   constructor(props: ZoomWidgetProps) {
-    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;
+    this.id = props.id ?? this.id;
+    this.viewId = props.viewId ?? this.viewId;
+    this.placement = props.placement ?? this.placement;
+
+    this.props = {
+      ...props,
+      orientation: props.orientation ?? 'vertical',
+      transitionDuration: props.transitionDuration ?? 200,
+      zoomInLabel: props.zoomInLabel ?? 'Zoom In',
+      zoomOutLabel: props.zoomOutLabel ?? 'Zoom Out',
+      style: props.style ?? {}
+    };
   }
 
   onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
@@ -70,25 +79,9 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     element.classList.add('deck-widget', 'deck-widget-zoom');
     if (className) element.classList.add(className);
     applyStyles(element, style);
-    const ui = (
-      <ButtonGroup orientation={this.orientation}>
-        <GroupedIconButton
-          onClick={() => this.handleZoomIn()}
-          label={this.props.zoomInLabel}
-          className="deck-widget-zoom-in"
-        />
-        <GroupedIconButton
-          onClick={() => this.handleZoomOut()}
-          label={this.props.zoomOutLabel}
-          className="deck-widget-zoom-out"
-        />
-      </ButtonGroup>
-    );
-    render(ui, element);
-
     this.deck = deck;
     this.element = element;
-
+    this.update();
     return element;
   }
 
@@ -98,6 +91,8 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
   }
 
   setProps(props: Partial<ZoomWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     const oldProps = this.props;
     const el = this.element;
     if (el) {
@@ -113,6 +108,7 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   onViewportChange(viewport: Viewport) {
@@ -142,4 +138,26 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
       this.handleZoom(viewport, viewport.zoom - 1);
     }
   }
+
+  private update() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+    const ui = (
+      <ButtonGroup orientation={this.props.orientation}>
+        <GroupedIconButton
+          onClick={() => this.handleZoomIn()}
+          label={this.props.zoomInLabel}
+          className="deck-widget-zoom-in"
+        />
+        <GroupedIconButton
+          onClick={() => this.handleZoomOut()}
+          label={this.props.zoomOutLabel}
+          className="deck-widget-zoom-out"
+        />
+      </ButtonGroup>
+    );
+    render(ui, element);
+  }
 }