@arcgis/core/widgets/ScaleRangeSlider.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{formatNumber as t,substitute as i}from"../intl.js";import{deprecateWidget as l}from"../core/deprecate.js";import{on as a}from"../core/events.js";import s from"../core/Logger.js";import{destroyMaybe as n}from"../core/maybe.js";import{watch as r,initial as o,when as c}from"../core/reactiveUtils.js";import{property as d,cast as m,subclass as u}from"../core/accessorSupport/decorators.js";import p from"./Slider.js";import v from"./Widget.js";import{css as h}from"./ScaleRangeSlider/css.js";import{getScalePreviewSource as S,getScalePreviewSpriteBackgroundPosition as g}from"./ScaleRangeSlider/scalePreviewUtils.js";import b from"./ScaleRangeSlider/ScaleRanges.js";import M from"./ScaleRangeSlider/ScaleRangeSliderViewModel.js";import{loadCalciteComponents as _}from"./support/componentsUtils.js";import{globalCss as f}from"./support/globalCss.js";import{messageBundle as w,tsx as y}from"./support/widget.js";import{storeNode as x,setFocus as L}from"./support/widgetUtils.js";const R={preview:!0,scaleMenus:{maxScaleMenu:!0,minScaleMenu:!0}},I={maximumFractionDigits:0},T="1:",C=16;let P=class extends v{constructor(e,t){super(e,t),this._activeMenu=null,this._activeThumb=null,this._customInput=null,this._maxThumbNode=null,this._minThumbNode=null,this._lastPreviewReferenceElement=null,this._previewAutoCloseTimeoutId=void 0,this._previewPopover=null,this._slider=new p({suppressDeprecationWarning:!0,thumbCreatedFunction:(e,t,i)=>{0===e?this._minThumbNode=i:1===e&&(this._maxThumbNode=i),this.addHandles([a(i,"mouseenter",()=>{this._activeThumb=e,this._lastPreviewReferenceElement=i,this.scheduleRender()}),a(i,"mouseleave",()=>{this._previewAutoCloseTimeoutId||(this._activeThumb=null,this.scheduleRender())})])}}),this.disabled=!1,this.messages=null,this.region="US",this.showWorldValue=!1,this.viewModel=new M,this.visibleElements=R,this._repositionPreviewPopover=()=>{const e=this._previewPopover;if(!e||!e.open||null==this._activeThumb)return;this._getReferenceNode(this._activeThumb)&&requestAnimationFrame(()=>e.reposition())},this._afterInputNumberCreate=e=>{"value"in e&&null!=e.value&&"setNumberValue"in e&&e.setNumberValue({committing:!1,value:e.value,origin:"direct"}),this._customInput=e},this._handleCustomScaleInputChange=(e,t)=>{const{viewModel:{scaleRanges:i}}=this,l=Number.parseFloat(t.value);Number.isNaN(l)?t.value=e:this._setScale(i.clampScale(l))},this.announceDeprecation=()=>{l(s.getLogger(this),"Scale Range Slider","arcgis-scale-range-slider",{version:"5.0"})}}loadDependencies(){return _({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),dropdown:()=>import("@esri/calcite-components/dist/components/calcite-dropdown"),"dropdown-group":()=>import("@esri/calcite-components/dist/components/calcite-dropdown-group"),"dropdown-item":()=>import("@esri/calcite-components/dist/components/calcite-dropdown-item"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),"input-number":()=>import("@esri/calcite-components/dist/components/calcite-input-number"),label:()=>import("@esri/calcite-components/dist/components/calcite-label"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover")})}initialize(){this.addHandles([r(()=>this.viewModel,e=>this._slider.viewModel=e?.sliderViewModel??null,o),r(()=>this._interactive,e=>{this._slider.disabled=!e,e||this._setActiveMenu(null)},o),this._slider.on("thumb-drag",({index:e})=>{this._activeThumb=e,this._lastPreviewReferenceElement=this._getReferenceNode(e),clearTimeout(this._previewAutoCloseTimeoutId);const t=250;this._previewAutoCloseTimeoutId=setTimeout(()=>{this._previewAutoCloseTimeoutId=void 0,this._activeThumb=null},t)}),c(()=>!0===this.view?.stationary,()=>this.scheduleRender())])}destroy(){this._slider=n(this._slider)}get _maxScaleMenuEnabled(){const{scaleMenus:e}=this.visibleElements;return!0===e||"boolean"!=typeof e&&!0===e?.maxScaleMenu}get _minScaleMenuEnabled(){const{scaleMenus:e}=this.visibleElements;return!0===e||"boolean"!=typeof e&&!0===e?.minScaleMenu}get _interactive(){return"disabled"!==this.viewModel?.state&&!this.disabled}get effectiveMaxScale(){return this.viewModel.effectiveMaxScale}get effectiveMinScale(){return this.viewModel.effectiveMinScale}get effectiveMaxScaleLimit(){return this.viewModel.effectiveMaxScaleLimit}get effectiveMinScaleLimit(){return this.viewModel.effectiveMinScaleLimit}get icon(){return"actual-size"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get layer(){return this.viewModel.layer}set layer(e){this.viewModel.layer=e}get maxScale(){return this.viewModel.maxScale}set maxScale(e){this.viewModel.maxScale=e}get maxScaleLimit(){return this.viewModel.maxScaleLimit}set maxScaleLimit(e){this.viewModel.maxScaleLimit=e}get mode(){return this.viewModel.mode}set mode(e){this.viewModel.mode=e}get minScale(){return this.viewModel.minScale}set minScale(e){this.viewModel.minScale=e}get minScaleLimit(){return this.viewModel.minScaleLimit}set minScaleLimit(e){this.viewModel.minScaleLimit=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}castVisibleElements(e){return{...R,...e,scaleMenus:"boolean"==typeof e?.scaleMenus?e.scaleMenus:{...R.scaleMenus,...e?.scaleMenus}}}formatScale(e){return`${T}${t(e,I)}`}render(){const{_interactive:e,_slider:t,label:i,view:l,viewModel:{state:a}}=this,s=this._getLabel("min"),n=this._getLabel("max"),{segmentElements:r}=t,o=r.at("min-scale-only"===this.mode?-1:-2);return o&&o.classList.add(h.segmentElementActive),y("div",{"aria-label":i,class:this.classes(h.base,f.widget,e?null:f.disabled)},y("div",{class:h.scaleIndicatorWrapper,dir:"ltr"},"ready"===a&&l?this._renderCurrentScaleIndicator():null,t.render(),this._renderPreviewPopover()),y("div",{class:h.scaleMenuContainer},this._minScaleMenuEnabled&&s?this._renderScaleMenuToggle("min",s):null,y("div",{class:h.scaleMenuSeparator}),this._maxScaleMenuEnabled&&n?this._renderScaleMenuToggle("max",n):null))}_renderPreviewPopover(){const{_activeThumb:e}=this,t=this._getReferenceNode(e)??this._lastPreviewReferenceElement,i=null!=e&&this.visibleElements.preview&&null!=t;return i?y("calcite-popover",{afterCreate:x,afterUpdate:this._repositionPreviewPopover,bind:this,"data-node-ref":"_previewPopover",label:this.messages.preview,offsetDistance:C,open:i,overlayPositioning:"fixed",placement:"top",referenceElement:t??void 0,topLayerDisabled:this.topLayerDisabled,triggerDisabled:!0},this._renderScalePreview()):null}_getReferenceNode(e){return 0===e?this._minThumbNode:1===e?this._maxThumbNode:null}_renderScalePreview(){const{_activeThumb:e,_slider:t,region:i,viewModel:{scaleRanges:l}}=this,a=0===e||"range"!==this.mode?t.values[0]:t.values[1],s=Object.keys(b.RecommendedScales).indexOf(l.findScaleRangeByIndex(a).id),n={backgroundImage:S(i),backgroundPosition:g(s)};return y("div",{class:h.scalePreview},y("div",{class:h.scalePreviewThumbnail,styles:n}))}_getLabel(e){const{_slider:t,messages:i,mode:l,viewModel:{scaleRanges:a}}=this,[s,n]=t.values,r="min"===e||"range"!==l?s:n,o=i.scaleRangeLabels[a.findScaleRangeByIndex(r).id];switch(l){case"range":return o;case"max-scale-only":return"min"===e?null:o;case"min-scale-only":return"min"===e?o:null}}_renderScaleMenuToggle(e,t){const{_activeMenu:i,_interactive:l}=this,a=i===e;return[y("calcite-dropdown",{closeOnSelectDisabled:!0,"data-type":e,open:a,overlayPositioning:"fixed",placement:"max"===e?"bottom-end":"bottom-start",scale:"s",topLayerDisabled:this.topLayerDisabled,onCalciteDropdownClose:({currentTarget:t})=>{this._activeMenu===e&&this._setActiveMenu(null),L(t.querySelector("calcite-button"))},onCalciteDropdownOpen:()=>this._setActiveMenu(e)},y("calcite-button",{appearance:a?"outline":"transparent","aria-pressed":a.toString(),class:h.scaleMenuToggle,disabled:!l,iconEnd:"chevron-down",scale:"s",slot:"trigger"},t),a&&"max"===e?this._renderMaxScaleMenu():null,a&&"min"===e?this._renderMinScaleMenu():null)]}_renderMinScaleMenu(){const{effectiveMaxScale:e,effectiveMinScaleLimit:t,view:i,viewModel:{scaleRanges:l}}=this,a=i?i.scale:void 0;return this._renderScaleMenu({type:"min",min:t,max:l.findScaleRange(e).minScale,viewScale:a})}_renderMaxScaleMenu(){const{effectiveMinScale:e,effectiveMaxScaleLimit:t,view:i,viewModel:{scaleRanges:l}}=this,a=i?i.scale:void 0;return this._renderScaleMenu({type:"max",min:l.findScaleRange(e).maxScale,max:t,viewScale:a})}_renderScaleMenu({viewScale:e,min:t,max:i,type:l}){const{effectiveMaxScale:a,effectiveMinScale:s,messages:n,showWorldValue:r}=this,o="max"===l?a:s,c=b.fromScaleRange({minScale:t,maxScale:i}),d=this.messages.featuredScaleLabels,m=b.RecommendedScales,u=Object.keys(m).filter(e=>c.contains(m[e])).map(e=>this._renderScaleMenuItem({scaleLabel:d[e],scaleValue:m[e],isSelected:o===m[e],valueVisible:"world"!==e||r}));return y("calcite-dropdown-group",{key:`${this.id}__scale-menu--${l}`},this._renderCustomScaleValue({currentScale:o}),null!=e?this._renderScaleMenuItem({scaleValue:e,scaleLabel:n.featuredScaleLabels.current,isSelected:o===e,valueVisible:!0}):null,u)}_renderCustomScaleValue({currentScale:e}){const{messages:t}=this,i=Math.round(e).toString();return y("calcite-dropdown-item",{afterCreate:e=>{L(e)},key:"custom-scale",label:t.featuredScaleLabels.custom,onCalciteDropdownItemSelect:()=>{L(this._customInput)}},y("calcite-label",{scale:"s"},y("span",null,t.featuredScaleLabels.custom),y("calcite-input-number",{afterCreate:this._afterInputNumberCreate,groupSeparator:!0,inputMode:"numeric",max:b.RecommendedScales.world,min:0,numberButtonType:"none",placeholder:t.customScaleInputTooltip,prefixText:T,scale:"s",step:1,value:i,onCalciteInputNumberChange:({currentTarget:e})=>this._handleCustomScaleInputChange(i,e)})))}_renderScaleMenuItem(e){const{scaleValue:t,scaleLabel:i,valueVisible:l,isSelected:a}=e;return y("calcite-dropdown-item",{key:i,label:i,selected:a,onCalciteDropdownItemSelect:this._setScale.bind(this,t)},i,l?y("div",{class:h.scaleMenuSubLabel},this.formatScale(t)):void 0)}_renderCurrentScaleIndicator(){const{_slider:e,messages:t,view:l,viewModel:{scaleRanges:a}}=this,s=a.clampScale(l.scale),n=this.viewModel.mapScaleToSlider(s),r=n/e.max,o=t.scaleRangeLabels[a.findScaleRangeByIndex(n).id],c=i(t.currentScaleTooltip,{scaleLabel:o});return y("div",{class:h.scaleIndicatorContainer,key:"scale-indicator"},y("div",{"aria-label":c,class:h.scaleIndicator,styles:{left:100*r+"%"},title:c},this.renderCurrentScaleIndicatorIcon()))}renderCurrentScaleIndicatorIcon(){return y("calcite-icon",{class:h.scaleIndicatorIcon,icon:"caret-up",scale:"s"})}_setScale(e){"max"===this._activeMenu?this.maxScale=Math.min(e,this.effectiveMinScale-1):this.minScale=Math.max(e,this.effectiveMaxScale+1),this._setActiveMenu(null)}_setActiveMenu(e){this._activeMenu=e}};e([d()],P.prototype,"_activeMenu",void 0),e([d()],P.prototype,"_activeThumb",void 0),e([d()],P.prototype,"_customInput",void 0),e([d()],P.prototype,"_maxScaleMenuEnabled",null),e([d()],P.prototype,"_minScaleMenuEnabled",null),e([d()],P.prototype,"_slider",void 0),e([d({readOnly:!0})],P.prototype,"_interactive",null),e([d()],P.prototype,"disabled",void 0),e([d()],P.prototype,"effectiveMaxScale",null),e([d()],P.prototype,"effectiveMinScale",null),e([d()],P.prototype,"effectiveMaxScaleLimit",null),e([d()],P.prototype,"effectiveMinScaleLimit",null),e([d()],P.prototype,"icon",null),e([d()],P.prototype,"label",null),e([d()],P.prototype,"layer",null),e([d()],P.prototype,"maxScale",null),e([d()],P.prototype,"maxScaleLimit",null),e([d(),w("esri/widgets/ScaleRangeSlider/t9n/ScaleRangeSlider")],P.prototype,"messages",void 0),e([d()],P.prototype,"mode",null),e([d()],P.prototype,"minScale",null),e([d()],P.prototype,"minScaleLimit",null),e([d()],P.prototype,"region",void 0),e([d()],P.prototype,"showWorldValue",void 0),e([d()],P.prototype,"view",null),e([d({type:M})],P.prototype,"viewModel",void 0),e([d()],P.prototype,"visibleElements",void 0),e([m("visibleElements")],P.prototype,"castVisibleElements",null),P=e([u("esri.widgets.ScaleRangeSlider")],P);const E=P;export{E as default};