UNPKG

@arcgis/map-components

Version:
2 lines • 15 kB
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */ import{a as w}from"./Q52QESBE.js";import{a as b}from"./HZFVK34O.js";import c from"./OAWV35F7.js";import{h as $}from"./AKBXFBDL.js";import"./LMBRORN7.js";import a from"./5E6WEUZS.js";import"./PBSJQPB2.js";import{M as _,N as M,O as v,Q as u,R as g,U as f,V as y,a as p,b as r,x as S}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{watch:T},R,,{a:L}])=>{var m=new Set(["ar-iq","ar-kw","bg-bg","cs-cz","da-dk","da-gl","de-at","de-ch","de-de","de-li","el-gr","en-ae","en-au","en-ca","en-eg","en-gb","en-hk","en-id","en-ie","en-il","en-in","en-iq","en-ke","en-lu","en-mo","en-my","en-nz","en-rw","en-sg","en-us","en-vi","en-wo","en-za","es-ar","es-bo","es-cl","es-co","es-cr","es-es","es-gt","es-mx","es-ni","es-pe","es-pr","es-sv","es-ve","et-ee","fi-fi","fr-ci","fr-fr","fr-ma","fr-mg","fr-ml","fr-tn","is-is","it-it","ja-jp","ko-kr","lt-lt","lv-lv","nl-be","nl-nl","nl-sr","nn-no","pl-pl","pt-br","pt-pt","ro-ro","ru-ru","sk-sk","sv-se","th-th","zh-cn","zh-tw"]),P={ar:"iq",bg:"bg",cs:"cz",da:"dk",de:"de",el:"gr",en:"us",es:"es",et:"ee",fi:"fi",fr:"fr",is:"is",it:"it",ja:"jp",ko:"kr",lt:"lt",lv:"lv",nl:"nl",nn:"no",pl:"pl",pt:"br",ro:"ro",ru:"ru",sk:"sk",sv:"se",th:"th",zh:"cn"},k=p`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`,l=[{id:"world",scale:147914382,minScale:147914382,maxScale:1e8},{id:"continent",scale:5e7,minScale:99999999,maxScale:35e6},{id:"countriesBig",scale:25e6,minScale:34999999,maxScale:15e6},{id:"countriesSmall",scale:12e6,minScale:14999999,maxScale:7e6},{id:"statesProvinces",scale:6e6,minScale:6999999,maxScale:4e6},{id:"stateProvince",scale:3e6,minScale:3999999,maxScale:2e6},{id:"counties",scale:15e5,minScale:1999999,maxScale:1e6},{id:"county",scale:75e4,minScale:999999,maxScale:5e5},{id:"metropolitanArea",scale:32e4,minScale:499999,maxScale:25e4},{id:"cities",scale:16e4,minScale:249999,maxScale:12e4},{id:"city",scale:8e4,minScale:119999,maxScale:6e4},{id:"town",scale:4e4,minScale:59999,maxScale:3e4},{id:"neighborhood",scale:2e4,minScale:29999,maxScale:15e3},{id:"streets",scale:1e4,minScale:14999,maxScale:7500},{id:"street",scale:5e3,minScale:7499,maxScale:4e3},{id:"buildings",scale:2500,minScale:3999,maxScale:2e3},{id:"building",scale:1250,minScale:1999,maxScale:801},{id:"smallBuilding",scale:800,minScale:800,maxScale:401},{id:"rooms",scale:400,minScale:400,maxScale:101},{id:"room",scale:100,minScale:100,maxScale:0}],x=class extends v{constructor(){super(...arguments),this.messages=b(),this._sliderRef=_(),this._activeMenu=null,this._customScaleSelected=null,this._portalRegion=null,this._layerMaxScaleLimit=l[l.length-1].maxScale,this._layerMinScaleLimit=l[0].minScale,this.autoDestroyDisabled=!1,this.disabled=!1,this.hidePreview=!1,this.hideMaxScaleMenu=!1,this.hideMinScaleMenu=!1,this.icon="actual-size",this.maxScale=0,this.maxScaleLimit=l[l.length-1].maxScale,this.minScale=0,this.minScaleLimit=l[0].minScale,this.mode="range",this.showWorldValue=!1,this.view=L(this),this.arcgisChange=S(),this.arcgisInput=S(),this.arcgisPropertyChange=$()("state","minScale","maxScale"),this.arcgisReady=S()}static{this.properties={_activeMenu:16,_customScaleSelected:16,_portalRegion:16,_layerMaxScaleLimit:16,_layerMinScaleLimit:16,autoDestroyDisabled:5,disabled:7,hidePreview:5,hideMaxScaleMenu:5,hideMinScaleMenu:5,icon:1,label:1,layer:0,maxScale:9,maxScaleLimit:9,minScale:9,minScaleLimit:9,mode:1,referenceElement:1,region:1,showWorldValue:5,state:32,view:0}}static{this.styles=k}get state(){let{view:e,layer:a}=this;return!e&&!a||!e&&a?.loadStatus==="loaded"||!a&&e?.ready||e?.ready&&a?.loadStatus==="loaded"?"ready":"disabled"}async destroy(){await this.manager.destroy()}willUpdate(e){if((e.has("maxScaleLimit")||e.has("minScaleLimit"))&&(this.minScaleLimit===0&&(this.minScaleLimit=l[0].minScale),this.maxScaleLimit===0&&(this.maxScaleLimit=l[l.length-1].maxScale),this.minScaleLimit=Math.min(this.minScaleLimit,l[0].minScale),this.maxScaleLimit=Math.max(this.maxScaleLimit,l[l.length-1].maxScale),this.minScale!==0&&(this.minScale=Math.min(this.minScale,this._interactiveMinScale)),this.maxScale!==0&&(this.maxScale=Math.max(this.maxScale,this._interactiveMaxScale)),this.hasUpdated&&this._syncLayerScale()),e.has("maxScale")||e.has("minScale")){if(this.minScale!==0){let a=this._clampScale("min",this.minScale);this.minScale=a===this.minScaleLimit?0:a}if(this.maxScale!==0){let a=this._clampScale("max",this.maxScale);this.maxScale=a===this.maxScaleLimit?0:a}}e.has("layer")&&(this.layer?this.layer.load().catch(()=>{}):(this._layerMinScaleLimit=l[0].minScale,this._layerMaxScaleLimit=l[l.length-1].maxScale)),e.has("mode")&&(this.mode==="max-scale-only"?this.minScale=0:this.mode==="min-scale-only"&&(this.maxScale=0),e.get("mode")!==void 0&&this._syncLayerScale())}loaded(){R.getDefault().load().then(e=>{let a=e.user?.culture??e.culture;a&&(this._portalRegion=a.split("-")[1]?.toLowerCase()??null)}).catch(()=>{}),this.manager.onLifecycle(()=>[T(()=>this.view?.scale,()=>this.requestUpdate(),{initial:!0}),T(()=>({loaded:this.layer?.loadStatus==="loaded",ready:this.view?.ready}),({loaded:e,ready:a})=>{if(!e||!a||!this.layer)return;this._layerMinScaleLimit=l[0].minScale,this._layerMaxScaleLimit=l[l.length-1].maxScale;let t=this.layer.type==="wcs"||this.layer.type==="imagery-tile"&&this.layer.raster?.tileType==="Raster"?null:"tileInfo"in this.layer?this.layer.tileInfo?.lods:null;if(t)!("resampling"in this.layer)||this.layer.resampling||(this._layerMinScaleLimit=t[0].scale===0?l[0].minScale:Math.min(l[0].minScale,t[0].scale),this._layerMaxScaleLimit=t[t.length-1].scale);else{let s=this.layer&&"maxScaleRange"in this.layer?this.layer.maxScaleRange:null,c=0,n=0;s&&(c=s.minScale,n=s.maxScale),n!==0&&(this._layerMaxScaleLimit=n),c!==0&&(this._layerMinScaleLimit=c)}let i=this.layer;i&&"minScale"in i&&"maxScale"in i&&(i.minScale!==0&&this.minScale===0&&(this.minScale=Math.min(i.minScale,this._interactiveMinScale)),i.maxScale!==0&&this.maxScale===0&&(this.maxScale=Math.max(i.maxScale,this._interactiveMaxScale)))},{initial:!0})])}get _interactiveMinScale(){return Math.min(this.minScaleLimit,this._layerMinScaleLimit)}get _interactiveMaxScale(){return Math.max(this.maxScaleLimit,this._layerMaxScaleLimit)}get _effectiveMinScale(){return this.minScale===0?this._interactiveMinScale:this.minScale}get _effectiveMaxScale(){return this.maxScale===0?this._interactiveMaxScale:this.maxScale}get _sliderFullRangeMin(){return this._mapScaleToSlider(this.minScaleLimit)}get _sliderFullRangeMax(){return this._mapScaleToSlider(this.maxScaleLimit)}_clampScale(e,a){return e==="min"?Math.min(Math.max(a,this._effectiveMaxScale+1),this._interactiveMinScale):Math.max(Math.min(a,this._effectiveMinScale-1),this._interactiveMaxScale)}_getDropdownLabel(e){let a=e==="min"?this._effectiveMinScale:this._effectiveMaxScale,t=Math.floor(this._mapScaleToSlider(a)),i=this.messages.scaleRangeLabels;return i?i[l[t].id]:""}_getSpriteSheetFile(){if(this.region){let t=this.region.toLowerCase(),i=`${this.messages._t9nLocale}-${t}`;if(m.has(i))return i;for(let s of m)if(s.endsWith(`-${t}`))return s}let e=this.messages._lang.toLowerCase();if(m.has(e))return e;if(this._portalRegion){let t=`${this.messages._t9nLocale}-${this._portalRegion}`;if(m.has(t))return t}let a=P[this.messages._t9nLocale];if(a){let t=`${this.messages._t9nLocale}-${a}`;if(m.has(t))return t}for(let t of m)if(t.startsWith(`${this.messages._t9nLocale}-`))return t;return"en-wo"}_handleCustomScaleInput(e,a){let t=Number.parseFloat(a);this._setScale(e,t)}_handleSliderThumbDrag(){let e=this._sliderRef.value;if(e){if(this.mode==="max-scale-only"){let a=Math.max(this._mapSliderToScale(e.values[0]),this._interactiveMaxScale);this.maxScale=a===this._interactiveMaxScale?0:a}else if(this.mode==="min-scale-only"){let a=Math.min(this._mapSliderToScale(e.values[0]),this._interactiveMinScale);this.minScale=a===this._interactiveMinScale?0:a}else{let a=Math.min(this._mapSliderToScale(e.values[0]),this._interactiveMinScale),t=Math.max(this._mapSliderToScale(e.values[1]),this._interactiveMaxScale);this.minScale=a===this._interactiveMinScale?0:a,this.maxScale=t===this._interactiveMaxScale?0:t}this._syncLayerScale()}}_mapScaleToSlider(e){let a=Math.min(l[0].minScale,Math.max(l[l.length-1].maxScale,e)),t=l.findIndex(n=>a>=n.maxScale&&a<=n.minScale),i=l[t],s=t,c=t+.9999;return i?s+(a-i.minScale)*(c-s)/(i.maxScale-i.minScale):0}_mapSliderToScale(e){let a=Math.min(l.length-1,Math.max(0,Math.floor(e))),{maxScale:t,minScale:i}=l[a],s=a,c=s+.9999;return i+(e-s)*(t-i)/(c-s)}_setScale(e,a){e==="min"?this.minScale=a===0?0:this._clampScale("min",a):this.maxScale=a===0?0:this._clampScale("max",a),this._syncLayerScale(),this._activeMenu=null}_syncLayerScale(){this.layer&&"minScale"in this.layer&&"maxScale"in this.layer&&(this.layer.minScale=this.mode==="max-scale-only"?0:this._effectiveMinScale,this.layer.maxScale=this.mode==="min-scale-only"?0:this._effectiveMaxScale)}_renderScalePreviewPopover(){let e=this._renderScalePreview();return this.hidePreview||!e?null:r`<div slot=popover>${e}</div>`}render(){let e=this._mapScaleToSlider(this._interactiveMinScale),a=this._mapScaleToSlider(this._interactiveMaxScale),t=this._sliderFullRangeMin,i=this._sliderFullRangeMax;return r`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode==="max-scale-only"?"start":this.mode==="min-scale-only"?"end":void 0} .fullRangeMin=${t<e?t:void 0} .fullRangeMax=${i>a?i:void 0} .max=${a} .min=${e} .labelFormatter=${(s,c,n)=>n(Math.round(this._mapSliderToScale(s)))} .values=${this.mode==="max-scale-only"?[this._mapScaleToSlider(this._effectiveMaxScale)]:this.mode==="min-scale-only"?[this._mapScaleToSlider(this._effectiveMinScale)]:[this._mapScaleToSlider(this._effectiveMinScale),this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${M(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale!=null&&this._renderCurrentScaleIndicator(this.view.scale)||""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode!=="max-scale-only"&&!this.hideMinScaleMenu?[this._renderScaleMenuButtons("min"),this._renderScaleMenuPopover("min")]:r`<div></div>`}${this.mode!=="min-scale-only"&&!this.hideMaxScaleMenu&&[this._renderScaleMenuButtons("max"),this._renderScaleMenuPopover("max")]||""}</div></div>`}_renderCurrentScaleIndicator(e){let a=this._sliderFullRangeMin,t=this._sliderFullRangeMax-a,i=Math.min(100,Math.max(0,(this._mapScaleToSlider(e)-a)/t*100));return w("scale-indicator",r`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({position:"absolute",left:`${i}%`})} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}><calcite-icon icon=caret-up scale=s></calcite-icon></div></div>`)}_renderCustomScaleValue(e,a){let t=Math.round(a).toString();return r`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected===e} @calciteListItemSelect=${i=>{let s=i.target.querySelector("calcite-input-number");this._handleCustomScaleInput(e,s?.value??""),this._customScaleSelected=e}}><calcite-input-number dir=ltr class="scale-menu-input" slot=content-end group-separator inputmode=numeric .max=${l[0].minScale} .min=${l[l.length-1].maxScale} number-button-type=none .placeholder=${this.messages?.customScaleInputTooltip} prefix-text=1: scale=s step=1 .value=${t} @click=${i=>i.stopPropagation()} @keydown=${i=>{i.key==="Enter"&&(this._handleCustomScaleInput(e,i.target.value),this._customScaleSelected=e,i.stopPropagation())}}></calcite-input-number></calcite-list-item>`}_renderScaleMenuButtons(e){return r`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu===e?"outline":"transparent"}>${this._getDropdownLabel(e)}</calcite-button>`}_renderScaleMenuPopover(e){return r`<calcite-popover auto-close .label=${`${e==="min"?"Min":"Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e==="max"?"bottom-end":"bottom-start"} .open=${this._activeMenu===e} scale=s @calcitePopoverOpen=${()=>this._activeMenu=e} @calcitePopoverClose=${()=>{this._activeMenu===e&&(this._activeMenu=null)}}>${this._renderScaleMenu(e)}</calcite-popover>`}_renderScaleMenu(e){let a=Math.floor(this._mapScaleToSlider(this._effectiveMaxScale)),t=Math.floor(this._mapScaleToSlider(this._effectiveMinScale)),i=e==="min"?this._effectiveMinScale:this._effectiveMaxScale,s=this.messages.featuredScaleLabels;if(!s)return;let c=Math.floor(this._mapScaleToSlider(this._interactiveMaxScale)),n=Math.floor(this._mapScaleToSlider(this._interactiveMinScale)),d=l.filter((o,h)=>e==="min"?h<a&&h>=n:h>t&&h<=c).map(o=>this._renderScaleMenuItem({scaleLabel:s[o.id],scaleValue:o.scale,isSelected:i===o.scale,valueVisible:o.id!=="world"||this.showWorldValue,type:e}));return r`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this.view?.scale!=null&&this._renderCustomScaleValue(e,i)||""}${this.view?.scale!=null?this._renderScaleMenuItem({scaleValue:this.view.scale,scaleLabel:s.current,isSelected:i===this.view.scale,valueVisible:!0,type:e}):null}${d}</calcite-list>`}_renderScaleMenuItem(e){let{scaleValue:a,scaleLabel:t,isSelected:i,valueVisible:s}=e,c=a===l[0].scale?` ${this.messages.aboveSuffix}`:a===l[l.length-1].scale?` ${this.messages.belowSuffix}`:"";return r`<calcite-list-item .label=${t} .selected=${i&&this._customScaleSelected!==e.type} .description=${s?`1:${Math.round(a).toLocaleString(this.messages._t9nLocale)}${c}`:void 0} @calciteListItemSelect=${()=>{this._setScale(e.type,a),this._customScaleSelected=null}}></calcite-list-item>`}_renderScalePreview(){let e=this._sliderRef.value?.activeValue;if(typeof e!="number")return null;let a=Math.min(l.length-1,Math.max(0,Math.floor(e))),t=5,i=128,s=i*(a%t),c=i*Math.floor(a/t),n=`-${s}px -${c}px`,d=this._getSpriteSheetFile();return r`<div class="preview-container"><img src=${y(`./assets/slider-scale-range/images/${d}.avif`)??g} style=${u({display:"block",height:`${i}px`,width:`${i}px`,objectPosition:n,objectFit:"none"})}></div>`}};f("arcgis-slider-scale-range",x);return x},"core/reactiveUtils","portal/Portal",a,c)