@arcgis/core/widgets/BuildingExplorer/BuildingLevelPicker/BuildingLevelPicker.js

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

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.19/LICENSE.txt */
import{__decorate as e}from"tslib";import{on as t}from"../../../core/events.js";import{clamp as i}from"../../../core/mathUtils.js";import{watch as s,initial as l}from"../../../core/reactiveUtils.js";import{property as o,subclass as n}from"../../../core/accessorSupport/decorators.js";import r from"../../Widget.js";import{l as h,a,b as v,c as d,d as _,e as c,f as g,g as p,h as u,i as m,j as L}from"../../../chunks/constants.js";import{css as y}from"./css.js";import{Label as P}from"./Label.js";import{LevelItem as C}from"./LevelItem.js";import{loadCalciteComponents as f}from"../../support/componentsUtils.js";import{globalCss as w}from"../../support/globalCss.js";import{tsx as x}from"../../support/widget.js";const b={selectLevel:"selectLevel",clearLevel:"clearLevel",nextLevel:"nextLevel",previousLevel:"previousLevel",currentLevel:"{{value}}"};let W=class extends r{constructor(e,t){super(e,t),this._levelHandlesKey="levelHandles",this._levelEventHandlesKey="levelEventHandles",this._levelWidgets=[],this._labelWidget=new P({onClear:()=>this.vm.clear()}),this._hoveredLevel=null,this._expandedLevelsHeight=void 0,this._normalizedPointerPosition=0,this._hovering=!1,this._containerPosTop=null,this._levelsContainer=null,this._onKeyDown=e=>{switch(e.key){case"ArrowDown":case"ArrowLeft":e.preventDefault(),e.stopPropagation(),this.vm.previous(),this._focusCurrentLevel();break;case"ArrowUp":case"ArrowRight":e.preventDefault(),e.stopPropagation(),this.vm.next(),this._focusCurrentLevel()}},this._onFocus=()=>{this._hoveredLevel=this._levels.length>0?this._levels[0]:null},this._onArrowUpClick=()=>{this.vm.next()},this._onArrowDownClick=()=>{this.vm.previous()},this._onPointerUp=()=>{if(window.getSelection()?.removeAllRanges(),null==this._hoveredLevel)return;const{vm:e}=this;e.enabled&&this._hoveredLevel===e.value?e.clear():e.select(this._hoveredLevel)},this._onPointerEnter=()=>{this._hovering||null==this._levelsContainer||(this._hovering=!0,this._containerPosTop=this._levelsContainer.getBoundingClientRect().top??0)},this._onPointerLeave=()=>{this._hovering&&(this._normalizedPointerPosition=0,this._hoveredLevel=null,this._hovering=!1)},this._onPointerMove=e=>{if(!this._hovering)return!1;if(window.getSelection()?.removeAllRanges(),null!=this._containerPosTop){const t=this._containerPosTop,i=c*L,s=this._expandedLevelsMargin;let l=this._levelsHeight,o=t+i+s;const n=this._levelHeight/2;o+=n,l-=n;let r=(e.clientY-o)/l;r+=u,this._normalizedPointerPosition=r}return!1}}loadDependencies(){return f({action:()=>import("@esri/calcite-components/dist/components/calcite-action")})}postInitialize(){this.addHandles([s(()=>this._levelsContainer,()=>this._onContainerChange(),l),s(()=>this._levels,()=>this._createLevelWidgets(),l),s(()=>this.messages,()=>{this._labelWidget.messages=this.messages??b},l)])}destroy(){this._levelWidgets.forEach(e=>e.destroy()),this._labelWidget.destroy()}get _levels(){return this.vm.allowedValues}get _numLevels(){return this._levels.length}get _levelsHeight(){return Math.round(this._levelHeight*this._numLevels)}get _expandedLevelsMargin(){return Math.round(((this._expandedLevelsHeight??0)-this._levelsHeight)/2)}get _levelWidth(){const{levelWidthNominator:e,levelWidthConstant:t}=m,s=e/Math.sqrt(this._numLevels)+t;return Math.round(i(s,a,h))}get _levelHeight(){const e=v,t=2*e/Math.sqrt(this._numLevels);return Math.round(i(t,2,e))}get _gaussianFactor(){const e=this._numLevels;return e/Math.log(d*e)*_}get _levelClosestToPointer(){if(!this._hovering)return null;const e=this._numLevels-1,t=this._normalizedPointerPosition;return e>=0&&null!=t?this._levels[Math.round((1-t)*e)]:null}render(){const e=this._levelWidgets.length,t=e>1?this._levelWidgets.map(e=>e.render()):null,i=c*L,s=-i/L,l=this._levelsHeight,o=l+2*i;return x("div",{class:this.classes(w.widget,y.container,{[y.animateLevel]:!this._hovering,[y.noLevel]:e<2}),key:this,onkeydown:this._onKeyDown},this._renderLabelContainer(),x("div",{afterCreate:e=>this._levelsContainer=e,class:y.levelsContainer,"data-node-ref":"",onfocus:this._onFocus,styles:{height:`${o}px`,marginBlockStart:`${s}px`,marginBlockEnd:`${s}px`}},x("div",{class:y.innerLevelsContainer,styles:{height:`${l}px`,margin:"0",marginBlockStart:c-this._expandedLevelsMargin+"px"}},t)))}_renderLabelContainer(){const{hasPrevious:e,hasNext:t}=this.vm,i=this.messages??b,s=i.previousLevel,l=i.nextLevel;return x("div",{class:y.labelContainer,tabIndex:0},H({className:y.arrowUp,disabled:!t,icon:"chevron-up",onClick:this._onArrowUpClick,text:l}),this._labelWidget.render(),H({className:y.arrowDown,disabled:!e,icon:"chevron-down",onClick:this._onArrowDownClick,text:s}))}_updateComponents(){const e=this.messages??b,t=this.vm.enabled?this.vm.value:null,i=null!=this._hoveredLevel?this._hoveredLevel:t;this._levelWidgets.forEach(i=>{const s=this.vm.getValueLabel(i.level);i.label=null!=s?s:e.currentLevel?.replace("{{level}}",String(i.level)),i.active=i.level===t,i.hovering=i.level===this._hoveredLevel}),this._labelWidget.level=i,this._labelWidget.active=i===t,this._labelWidget.hovering=null!=this._hoveredLevel}_createLevelWidgets(){this._levelWidgets.forEach(e=>e.destroy()),this._levelWidgets=this._levels.map(e=>new C({level:e,onSelect:()=>this._onLevelToggle(e)})),this.removeHandles(this._levelHandlesKey),this.addHandles([s(()=>{const{vm:e}=this;return[this.messages,e?.value,e?.enabled,this._hoveredLevel,this._hovering]},()=>this._updateComponents(),l),s(()=>[this._normalizedPointerPosition,this._hovering],()=>this._onPointerPositionChange(),l),s(()=>this._levelWidth,e=>this._levelWidgets.forEach(t=>t.width=e),l)],this._levelHandlesKey)}_onContainerChange(){const e=this._levelsContainer;null!=e&&(this.removeHandles(this._levelEventHandlesKey),this.addHandles([t(e,"pointerenter",this._onPointerEnter),t(e,"pointerover",this._onPointerEnter),t(e,"pointerleave",this._onPointerLeave),t(e,"pointerup",this._onPointerUp),t(e,"pointermove",this._onPointerMove)],this._levelEventHandlesKey))}_focusCurrentLevel(){const e=this._levelWidgets.find(e=>e.level===this.vm.value);e?.focus()}_onLevelToggle(e){const{vm:t}=this;t.enabled&&t.value===e?t.clear():t.select(e)}_onPointerPositionChange(){let e=0;this._levelWidgets.forEach((t,i)=>{const{width:s,height:l}=this._getLevelWidgetSize(i);t.height=l,t.width=s,e+=l}),this._hoveredLevel=this._levelClosestToPointer;const t=this._expandedLevelsHeight;(null==t||Math.abs(t-e)>30)&&(this._expandedLevelsHeight=e)}_getLevelWidgetSize(e){const t={width:this._levelWidth,height:this._levelHeight};if(this._hovering){const i=this._getGaussianFactor(e,this._normalizedPointerPosition);t.width+=g*i,t.height+=p*i}return t}_getGaussianFactor(e,t){const i=this._numLevels-1,s=(i-e)/i,l=this._gaussianFactor*(s-t);return Math.exp(-(l**2))}};function H(e){return x("calcite-action",{class:e.className,disabled:e.disabled,icon:e.icon,key:e.className,onclick:e.onClick,text:e.text,textEnabled:!1,title:e.text})}e([o()],W.prototype,"vm",void 0),e([o()],W.prototype,"messages",void 0),e([o()],W.prototype,"_levelWidgets",void 0),e([o()],W.prototype,"_labelWidget",void 0),e([o()],W.prototype,"_hoveredLevel",void 0),e([o()],W.prototype,"_levels",null),e([o()],W.prototype,"_numLevels",null),e([o({readOnly:!0})],W.prototype,"_levelsHeight",null),e([o()],W.prototype,"_expandedLevelsHeight",void 0),e([o({readOnly:!0})],W.prototype,"_expandedLevelsMargin",null),e([o({readOnly:!0})],W.prototype,"_levelWidth",null),e([o({readOnly:!0})],W.prototype,"_levelHeight",null),e([o({readOnly:!0})],W.prototype,"_gaussianFactor",null),e([o({readOnly:!0})],W.prototype,"_levelClosestToPointer",null),e([o({type:Number,range:{min:0,max:1}})],W.prototype,"_normalizedPointerPosition",void 0),e([o()],W.prototype,"_hovering",void 0),e([o()],W.prototype,"_containerPosTop",void 0),e([o()],W.prototype,"_levelsContainer",void 0),W=e([n("esri.widgets.BuildingExplorer.BuildingLevelPicker.BuildingLevelPicker")],W);const k=W;export{k as default};