@deck.gl/widgets 9.1.0-beta.1 → 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 Pe=Object.create;var H=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var De=Object.getOwnPropertyNames;var We=Object.getPrototypeOf,Fe=Object.prototype.hasOwnProperty;var Ie=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Se=(t,e)=>{for(var n in e)H(t,n,{get:e[n],enumerable:!0})},U=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of De(e))!Fe.call(t,o)&&o!==n&&H(t,o,{get:()=>e[o],enumerable:!(i=Le(e,o))||i.enumerable});return t},C=(t,e,n)=>(U(t,e,"default"),n&&U(n,e,"default")),T=(t,e,n)=>(n=t!=null?Pe(We(t)):{},U(e||!t||!t.__esModule?H(n,"default",{value:t,enumerable:!0}):n,t)),Ee=t=>U(H({},"__esModule",{value:!0}),t);var F=Ie((Ge,le)=>{le.exports=globalThis.deck});var O={};Se(O,{CompassWidget:()=>q,DarkGlassTheme:()=>$e,DarkTheme:()=>Ae,FullscreenWidget:()=>G,LightGlassTheme:()=>Re,LightTheme:()=>Ze,ZoomWidget:()=>X});var w={},ae=T(F(),1);C(w,T(F(),1));if(!ae.Layer)throw new Error("@deck.gl/core is not found");C(O,w);var xe=T(F(),1);var B,f,pe,Ne,L,ce,fe,K,te,Q,Y,Te,M={},he=[],Me=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ne=Array.isArray;function P(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 Oe(t,e,n){var i,o,s,l={};for(s in e)s=="key"?i=e[s]:s=="ref"?o=e[s]:l[s]=e[s];if(arguments.length>2&&(l.children=arguments.length>3?B.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(s in t.defaultProps)l[s]===void 0&&(l[s]=t.defaultProps[s]);return A(t,l,i,o,null)}function A(t,e,n,i,o){var s={type:t,props:e,key:n,ref:i,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:o??++pe,__i:-1,__u:0};return o==null&&f.vnode!=null&&f.vnode(s),s}function I(t){return t.children}function R(t,e){this.props=t,this.context=e}function D(t,e){if(e==null)return t.__?D(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"?D(t):null}function ge(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 ge(t)}}function _e(t){(!t.__d&&(t.__d=!0)&&L.push(t)&&!$.__r++||ce!==f.debounceRendering)&&((ce=f.debounceRendering)||fe)($)}function $(){var t,e,n,i,o,s,l,a;for(L.sort(K);t=L.shift();)t.__d&&(e=L.length,i=void 0,s=(o=(n=t).__v).__e,l=[],a=[],n.__P&&((i=P({},o)).__v=o.__v+1,f.vnode&&f.vnode(i),oe(n.__P,i,o,n.__n,n.__P.namespaceURI,32&o.__u?[s]:null,l,s??D(o),!!(32&o.__u),a),i.__v=o.__v,i.__.__k[i.__i]=i,ye(l,i,a),i.__e!=s&&ge(i)),L.length>e&&L.sort(K));$.__r=0}function ve(t,e,n,i,o,s,l,a,u,c,d){var r,b,_,g,y,v=i&&i.__k||he,p=e.length;for(n.__d=u,ze(n,e,v),u=n.__d,r=0;r<p;r++)(_=n.__k[r])!=null&&typeof _!="boolean"&&typeof _!="function"&&(b=_.__i===-1?M:v[_.__i]||M,_.__i=r,oe(t,_,b,o,s,l,a,u,c,d),g=_.__e,_.ref&&b.ref!=_.ref&&(b.ref&&ie(b.ref,null,_),d.push(_.ref,_.__c||g,_)),y==null&&g!=null&&(y=g),65536&_.__u||b.__k===_.__k?u=be(_,u,t):typeof _.type=="function"&&_.__d!==void 0?u=_.__d:g&&(u=g.nextSibling),_.__d=void 0,_.__u&=-196609);n.__d=u,n.__e=y}function ze(t,e,n){var i,o,s,l,a,u=e.length,c=n.length,d=c,r=0;for(t.__k=[],i=0;i<u;i++)l=i+r,(o=t.__k[i]=(o=e[i])==null||typeof o=="boolean"||typeof o=="function"?null:typeof o=="string"||typeof o=="number"||typeof o=="bigint"||o.constructor==String?A(null,o,null,null,null):ne(o)?A(I,{children:o},null,null,null):o.constructor===void 0&&o.__b>0?A(o.type,o.props,o.key,o.ref?o.ref:null,o.__v):o)!=null?(o.__=t,o.__b=t.__b+1,a=Ve(o,n,l,d),o.__i=a,s=null,a!==-1&&(d--,(s=n[a])&&(s.__u|=131072)),s==null||s.__v===null?(a==-1&&r--,typeof o.type!="function"&&(o.__u|=65536)):a!==l&&(a==l-1?r--:a==l+1?r++:a>l?d>u-l?r+=a-l:r--:a<l&&(a==l-r?r-=a-l:r++),a!==i+r&&(o.__u|=65536))):(s=n[l])&&s.key==null&&s.__e&&!(131072&s.__u)&&(s.__e==t.__d&&(t.__d=D(s)),ee(s,s,!1),n[l]=null,d--);if(d)for(i=0;i<c;i++)(s=n[i])!=null&&!(131072&s.__u)&&(s.__e==t.__d&&(t.__d=D(s)),ee(s,s))}function be(t,e,n){var i,o;if(typeof t.type=="function"){for(i=t.__k,o=0;i&&o<i.length;o++)i[o]&&(i[o].__=t,e=be(i[o],e,n));return e}t.__e!=e&&(e&&t.type&&!n.contains(e)&&(e=D(t)),n.insertBefore(t.__e,e||null),e=t.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType===8);return e}function Ve(t,e,n,i){var o=t.key,s=t.type,l=n-1,a=n+1,u=e[n];if(u===null||u&&o==u.key&&s===u.type&&!(131072&u.__u))return n;if(i>(u!=null&&!(131072&u.__u)?1:0))for(;l>=0||a<e.length;){if(l>=0){if((u=e[l])&&!(131072&u.__u)&&o==u.key&&s===u.type)return l;l--}if(a<e.length){if((u=e[a])&&!(131072&u.__u)&&o==u.key&&s===u.type)return a;a++}}return-1}function ue(t,e,n){e[0]==="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Me.test(e)?n:n+"px"}function Z(t,e,n,i,o){var s;e:if(e==="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof i=="string"&&(t.style.cssText=i=""),i)for(e in i)n&&e in n||ue(t.style,e,"");if(n)for(e in n)i&&n[e]===i[e]||ue(t.style,e,n[e])}else if(e[0]==="o"&&e[1]==="n")s=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+s]=n,n?i?n.u=i.u:(n.u=te,t.addEventListener(e,s?Y:Q,s)):t.removeEventListener(e,s?Y:Q,s);else{if(o=="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 de(t){return function(e){if(this.l){var n=this.l[e.type+t];if(e.t==null)e.t=te++;else if(e.t<n.u)return;return n(f.event?f.event(e):e)}}}function oe(t,e,n,i,o,s,l,a,u,c){var d,r,b,_,g,y,v,p,h,E,x,z,N,se,V,J,k=e.type;if(e.constructor!==void 0)return null;128&n.__u&&(u=!!(32&n.__u),s=[a=e.__e=n.__e]),(d=f.__b)&&d(e);e:if(typeof k=="function")try{if(p=e.props,h="prototype"in k&&k.prototype.render,E=(d=k.contextType)&&i[d.__c],x=d?E?E.props.value:d.__:i,n.__c?v=(r=e.__c=n.__c).__=r.__E:(h?e.__c=r=new k(p,x):(e.__c=r=new R(p,x),r.constructor=k,r.render=Ue),E&&E.sub(r),r.props=p,r.state||(r.state={}),r.context=x,r.__n=i,b=r.__d=!0,r.__h=[],r._sb=[]),h&&r.__s==null&&(r.__s=r.state),h&&k.getDerivedStateFromProps!=null&&(r.__s==r.state&&(r.__s=P({},r.__s)),P(r.__s,k.getDerivedStateFromProps(p,r.__s))),_=r.props,g=r.state,r.__v=e,b)h&&k.getDerivedStateFromProps==null&&r.componentWillMount!=null&&r.componentWillMount(),h&&r.componentDidMount!=null&&r.__h.push(r.componentDidMount);else{if(h&&k.getDerivedStateFromProps==null&&p!==_&&r.componentWillReceiveProps!=null&&r.componentWillReceiveProps(p,x),!r.__e&&(r.shouldComponentUpdate!=null&&r.shouldComponentUpdate(p,r.__s,x)===!1||e.__v===n.__v)){for(e.__v!==n.__v&&(r.props=p,r.state=r.__s,r.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.forEach(function(j){j&&(j.__=e)}),z=0;z<r._sb.length;z++)r.__h.push(r._sb[z]);r._sb=[],r.__h.length&&l.push(r);break e}r.componentWillUpdate!=null&&r.componentWillUpdate(p,r.__s,x),h&&r.componentDidUpdate!=null&&r.__h.push(function(){r.componentDidUpdate(_,g,y)})}if(r.context=x,r.props=p,r.__P=t,r.__e=!1,N=f.__r,se=0,h){for(r.state=r.__s,r.__d=!1,N&&N(e),d=r.render(r.props,r.state,r.context),V=0;V<r._sb.length;V++)r.__h.push(r._sb[V]);r._sb=[]}else do r.__d=!1,N&&N(e),d=r.render(r.props,r.state,r.context),r.state=r.__s;while(r.__d&&++se<25);r.state=r.__s,r.getChildContext!=null&&(i=P(P({},i),r.getChildContext())),h&&!b&&r.getSnapshotBeforeUpdate!=null&&(y=r.getSnapshotBeforeUpdate(_,g)),ve(t,ne(J=d!=null&&d.type===I&&d.key==null?d.props.children:d)?J:[J],e,n,i,o,s,l,a,u,c),r.base=e.__e,e.__u&=-161,r.__h.length&&l.push(r),v&&(r.__E=r.__=null)}catch(j){if(e.__v=null,u||s!=null){for(e.__u|=u?160:32;a&&a.nodeType===8&&a.nextSibling;)a=a.nextSibling;s[s.indexOf(a)]=null,e.__e=a}else e.__e=n.__e,e.__k=n.__k;f.__e(j,e,n)}else s==null&&e.__v===n.__v?(e.__k=n.__k,e.__e=n.__e):e.__e=je(n.__e,e,n,i,o,s,l,u,c);(d=f.diffed)&&d(e)}function ye(t,e,n){e.__d=void 0;for(var i=0;i<n.length;i++)ie(n[i],n[++i],n[++i]);f.__c&&f.__c(e,t),t.some(function(o){try{t=o.__h,o.__h=[],t.some(function(s){s.call(o)})}catch(s){f.__e(s,o.__v)}})}function je(t,e,n,i,o,s,l,a,u){var c,d,r,b,_,g,y,v=n.props,p=e.props,h=e.type;if(h==="svg"?o="http://www.w3.org/2000/svg":h==="math"?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),s!=null){for(c=0;c<s.length;c++)if((_=s[c])&&"setAttribute"in _==!!h&&(h?_.localName===h:_.nodeType===3)){t=_,s[c]=null;break}}if(t==null){if(h===null)return document.createTextNode(p);t=document.createElementNS(o,h,p.is&&p),s=null,a=!1}if(h===null)v===p||a&&t.data===p||(t.data=p);else{if(s=s&&B.call(t.childNodes),v=n.props||M,!a&&s!=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")r=_;else if(c!=="key"&&!(c in p)){if(c=="value"&&"defaultValue"in p||c=="checked"&&"defaultChecked"in p)continue;Z(t,c,null,_,o)}}for(c in p)_=p[c],c=="children"?b=_:c=="dangerouslySetInnerHTML"?d=_:c=="value"?g=_:c=="checked"?y=_:c==="key"||a&&typeof _!="function"||v[c]===_||Z(t,c,_,v[c],o);if(d)a||r&&(d.__html===r.__html||d.__html===t.innerHTML)||(t.innerHTML=d.__html),e.__k=[];else if(r&&(t.innerHTML=""),ve(t,ne(b)?b:[b],e,n,i,h==="foreignObject"?"http://www.w3.org/1999/xhtml":o,s,l,s?s[0]:n.__k&&D(n,0),a,u),s!=null)for(c=s.length;c--;)s[c]!=null&&me(s[c]);a||(c="value",g!==void 0&&(g!==t[c]||h==="progress"&&!g||h==="option"&&g!==v[c])&&Z(t,c,g,v[c],o),c="checked",y!==void 0&&y!==t[c]&&Z(t,c,y,v[c],o))}return t}function ie(t,e,n){try{if(typeof t=="function"){var i=typeof t.__u=="function";i&&t.__u(),i&&e==null||(t.__u=t(e))}else t.current=e}catch(o){f.__e(o,n)}}function ee(t,e,n){var i,o;if(f.unmount&&f.unmount(t),(i=t.ref)&&(i.current&&i.current!==t.__e||ie(i,null,e)),(i=t.__c)!=null){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(s){f.__e(s,e)}i.base=i.__P=null}if(i=t.__k)for(o=0;o<i.length;o++)i[o]&&ee(i[o],e,n||typeof t.type!="function");n||t.__e==null||me(t.__e),t.__c=t.__=t.__e=t.__d=void 0}function Ue(t,e,n){return this.constructor(t,n)}function S(t,e,n){var i,o,s,l;f.__&&f.__(t,e),o=(i=typeof n=="function")?null:n&&n.__k||e.__k,s=[],l=[],oe(e,t=(!i&&n||e).__k=Oe(I,null,[t]),o||M,M,e.namespaceURI,!i&&n?[n]:o?null:e.firstChild?B.call(e.childNodes):null,s,!i&&n?n:o?o.__e:e.firstChild,i,l),ye(s,t,l)}B=he.slice,f={__e:function(t,e,n,i){for(var o,s,l;e=e.__;)if((o=e.__c)&&!o.__)try{if((s=o.constructor)&&s.getDerivedStateFromError!=null&&(o.setState(s.getDerivedStateFromError(t)),l=o.__d),o.componentDidCatch!=null&&(o.componentDidCatch(t,i||{}),l=o.__d),l)return o.__E=o}catch(a){t=a}throw t}},pe=0,Ne=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=P({},this.state),typeof t=="function"&&(t=t(P({},n),this.props)),t&&P(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),_e(this))},R.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),_e(this))},R.prototype.render=I,L=[],fe=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,K=function(t,e){return t.__v.__b-e.__v.__b},$.__r=0,te=0,Q=de(!1),Y=de(!0),Te=0;var He=0,Ke=Array.isArray;function m(t,e,n,i,o,s){e||(e={});var l,a,u=e;if("ref"in u)for(a in u={},e)a=="ref"?l=e[a]:u[a]=e[a];var c={type:t,props:u,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:--He,__i:-1,__u:0,__source:o,__self:s};if(typeof t=="function"&&(l=t.defaultProps))for(a in l)u[a]===void 0&&(u[a]=l[a]);return f.vnode&&f.vnode(c),c}var ke=t=>{let{className:e,label:n,onClick:i}=t;return m("div",{className:"deck-widget-button",children:m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:i,title:n,children:m("div",{className:"deck-widget-icon"})})})},we=t=>{let{children:e,orientation:n}=t;return m("div",{className:`deck-widget-button-group ${n}`,children:e})},re=t=>{let{className:e,label:n,onClick:i}=t;return m("button",{className:`deck-widget-icon-button ${e}`,type:"button",onClick:i,title:n,children:m("div",{className:"deck-widget-icon"})})};var 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:i}=this.props,o=document.createElement("div");return o.classList.add("deck-widget","deck-widget-fullscreen"),i&&o.classList.add(i),n&&Object.entries(n).map(([s,l])=>o.style.setProperty(s,l)),this.deck=e,this.element=o,this.update(),document.addEventListener("fullscreenchange",this.onFullscreenChange.bind(this)),o}onRemove(){this.deck=void 0,this.element=void 0,document.removeEventListener("fullscreenchange",this.onFullscreenChange.bind(this))}update(){let{enterLabel:e,exitLabel:n}=this.props,i=this.element;if(!i)return;let o=m(ke,{onClick:this.handleClick.bind(this),label:this.fullscreen?n:e,className:this.fullscreen?"deck-widget-fullscreen-exit":"deck-widget-fullscreen-enter"});S(o,i)}setProps(e){let n=this.props,i=this.element;i&&(n.className!==e.className&&(n.className&&i.classList.remove(n.className),e.className&&i.classList.add(e.className)),(0,xe._deepEqual)(n.style,e.style,1)||(n.style&&Object.entries(n.style).map(([o])=>i.style.removeProperty(o)),e.style&&Object.entries(e.style).map(([o,s])=>i.style.setProperty(o,s)))),Object.assign(this.props,e)}getContainer(){return this.props.container||this.deck?.getCanvas()?.parentElement}onFullscreenChange(){let e=this.fullscreen,n=document.fullscreenElement===this.getContainer();e!==n&&(this.fullscreen=!this.fullscreen),this.update()}async handleClick(){this.fullscreen?await this.exitFullscreen():await this.requestFullscreen(),this.update()}async requestFullscreen(){let e=this.getContainer();e?.requestFullscreen?await e.requestFullscreen({navigationUI:"hide"}):this.togglePseudoFullscreen()}async exitFullscreen(){document.exitFullscreen?await document.exitFullscreen():this.togglePseudoFullscreen()}togglePseudoFullscreen(){this.getContainer()?.classList.toggle("deck-pseudo-fullscreen")}};var W=T(F(),1);var q=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){Object.assign(this.props,e)}onViewportChange(e){this.viewports[e.id]=e,this.update()}onAdd({deck:e}){let{style:n,className:i}=this.props,o=document.createElement("div");return o.classList.add("deck-widget","deck-widget-compass"),i&&o.classList.add(i),n&&Object.entries(n).map(([s,l])=>o.style.setProperty(s,l)),this.deck=e,this.element=o,this.update(),o}getRotation(e){return e instanceof W.WebMercatorViewport?[-e.bearing,e.pitch]:e instanceof W._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],[i,o]=this.getRotation(n),s=this.element;if(!s)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(${o}deg)`},children:m("svg",{fill:"none",width:"100%",height:"100%",viewBox:"0 0 26 26",children:m("g",{transform:`rotate(${i},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)"})]})})})});S(l,s)}onRemove(){this.deck=void 0,this.element=void 0}handleCompassReset(e){let n=this.viewId||e.id||"default-view";if(e instanceof W.WebMercatorViewport){let i={...e,bearing:0,...this.getRotation(e)[0]===0?{pitch:0}:{},transitionDuration:this.props.transitionDuration,transitionInterpolator:new W.FlyToInterpolator};this.deck._onViewStateChange({viewId:n,viewState:i,interactionState:{}})}}};var Ce=T(F(),1);var X=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:i}=this.props,o=document.createElement("div");o.classList.add("deck-widget","deck-widget-zoom"),i&&o.classList.add(i),n&&Object.entries(n).map(([l,a])=>o.style.setProperty(l,a));let s=m(we,{orientation:this.orientation,children:[m(re,{onClick:()=>this.handleZoomIn(),label:this.props.zoomInLabel,className:"deck-widget-zoom-in"}),m(re,{onClick:()=>this.handleZoomOut(),label:this.props.zoomOutLabel,className:"deck-widget-zoom-out"})]});return S(s,o),this.deck=e,this.element=o,o}onRemove(){this.deck=void 0,this.element=void 0}setProps(e){Object.assign(this.props,e)}onViewportChange(e){this.viewports[e.id]=e}handleZoom(e,n){let i=this.viewId||e?.id||"default-view",o={...e,zoom:n,transitionDuration:this.props.transitionDuration,transitionInterpolator:new Ce.FlyToInterpolator};this.deck._onViewStateChange({viewId:i,viewState:o,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 Ze={"--button-background":"#fff","--button-stroke":"rgba(255, 255, 255, 0.3)","--button-inner-stroke":"unset","--button-shadow":"0px 0px 8px 0px rgba(0, 0, 0, 0.25)","--button-backdrop-filter":"unset","--button-icon-idle":"rgba(97, 97, 102, 1)","--button-icon-hover":"rgba(24, 24, 26, 1)","--icon-compass-north-color":"#F05C44","--icon-compass-south-color":"#C2C2CC"},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"},Re={"--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 Ee(O);})();
+"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.1.0-beta.1",
+  "version": "9.1.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,7 @@
     "preact": "^10.17.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "9.0.0-alpha.0"
+    "@deck.gl/core": "^9.1.0-beta"
   },
-  "gitHead": "a86fb154cf323eacc3f56ef087f636fb9f6c30b6"
+  "gitHead": "6625885881202cb753b64c6f2b8ee6f323092075"
 }

package/src/compass-widget.tsx

@@ -3,12 +3,22 @@
 // Copyright (c) vis.gl contributors
 
 /* global document */
-import {FlyToInterpolator, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
+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 {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.
@@ -30,7 +40,7 @@ interface CompassWidgetProps {
    * Additional CSS class.
    */
   className?: string;
-}
+};
 
 export class CompassWidget implements Widget<CompassWidgetProps> {
   id = 'compass';
@@ -42,22 +52,45 @@ 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) {
+      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) {
-    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 {
@@ -65,9 +98,7 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
     const element = document.createElement('div');
     element.classList.add('deck-widget', 'deck-widget-compass');
     if (className) element.classList.add(className);
-    if (style) {
-      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
-    }
+    applyStyles(element, style);
     this.deck = deck;
     this.element = element;
     this.update();
@@ -83,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);
@@ -100,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/fullscreen-widget.tsx

@@ -3,13 +3,20 @@
 // Copyright (c) vis.gl contributors
 
 /* global document */
-import {_deepEqual as deepEqual} from '@deck.gl/core';
+import {
+  _deepEqual as deepEqual,
+  _applyStyles as applyStyles,
+  _removeStyles as removeStyles
+} from '@deck.gl/core';
 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 {
@@ -59,9 +69,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     const el = document.createElement('div');
     el.classList.add('deck-widget', 'deck-widget-fullscreen');
     if (className) el.classList.add(className);
-    if (style) {
-      Object.entries(style).map(([key, value]) => el.style.setProperty(key, value as string));
-    }
+    applyStyles(el, style);
     this.deck = deck;
     this.element = el;
     this.update();
@@ -77,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;
     }
 
@@ -89,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) {
@@ -102,18 +111,13 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
       }
 
       if (!deepEqual(oldProps.style, props.style, 1)) {
-        if (oldProps.style) {
-          Object.entries(oldProps.style).map(([key]) => el.style.removeProperty(key));
-        }
-        if (props.style) {
-          Object.entries(props.style).map(([key, value]) =>
-            el.style.setProperty(key, value as string)
-          );
-        }
+        removeStyles(el, oldProps.style);
+        applyStyles(el, props.style);
       }
     }
 
     Object.assign(this.props, props);
+    this.update();
   }
 
   getContainer() {

package/src/index.ts

@@ -6,4 +6,8 @@ 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/zoom-widget.tsx

@@ -3,13 +3,21 @@
 // Copyright (c) vis.gl contributors
 
 /* global document */
-import {FlyToInterpolator} from '@deck.gl/core';
+import {
+  FlyToInterpolator,
+  _deepEqual as deepEqual,
+  _applyStyles as applyStyles,
+  _removeStyles as removeStyles
+} from '@deck.gl/core';
 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.
@@ -39,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 {
@@ -68,28 +78,10 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     const element = document.createElement('div');
     element.classList.add('deck-widget', 'deck-widget-zoom');
     if (className) element.classList.add(className);
-    if (style) {
-      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
-    }
-    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);
-
+    applyStyles(element, style);
     this.deck = deck;
     this.element = element;
-
+    this.update();
     return element;
   }
 
@@ -99,7 +91,24 @@ 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) {
+      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) {
@@ -129,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);
+  }
 }