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

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{_ as e}from"../../../chunks/tslib.es6.js";import{on as t}from"../../../core/events.js";import{clamp as s}from"../../../core/mathUtils.js";import{watch as i,initial as l}from"../../../core/reactiveUtils.js";import{property as o}from"../../../core/accessorSupport/decorators/property.js";import"../../../core/has.js";import"../../../core/Logger.js";import"../../../core/RandomLCG.js";import{subclass as n}from"../../../core/accessorSupport/decorators/subclass.js";import r from"../../Widget.js";import{l as a,a as h,b as v,c as d,d as _,e as c,f as p,g,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"../../support/widgetUtils.js";import{tsx as x}from"../../support/jsxFactory.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,s=c*L,i=this._expandedLevelsMargin;let l=this._levelsHeight,o=t+s+i;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([i((()=>this._levelsContainer),(()=>this._onContainerChange()),l),i((()=>this._levels),(()=>this._createLevelWidgets()),l),i((()=>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,i=e/Math.sqrt(this._numLevels)+t;return Math.round(s(i,h,a))}get _levelHeight(){const e=v,t=2*e/Math.sqrt(this._numLevels);return Math.round(s(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,s=c*L,i=-40/L,l=this._levelsHeight,o=l+2*s;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:`${i}px`,marginBlockEnd:`${i}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,s=this.messages??b,i=s.previousLevel,l=s.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:i}))}_updateComponents(){const e=this.messages??b,t=this.vm.enabled?this.vm.value:null,s=null!=this._hoveredLevel?this._hoveredLevel:t;this._levelWidgets.forEach((s=>{const i=this.vm.getValueLabel(s.level);s.label=null!=i?i:e.currentLevel?.replace("{{level}}",String(s.level)),s.active=s.level===t,s.hovering=s.level===this._hoveredLevel})),this._labelWidget.level=s,this._labelWidget.active=s===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([i((()=>{const{vm:e}=this;return[this.messages,e?.value,e?.enabled,this._hoveredLevel,this._hovering]}),(()=>this._updateComponents()),l),i((()=>[this._normalizedPointerPosition,this._hovering]),(()=>this._onPointerPositionChange()),l),i((()=>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,s)=>{const{width:i,height:l}=this._getLevelWidgetSize(s);t.height=l,t.width=i,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 s=this._getGaussianFactor(e,this._normalizedPointerPosition);t.width+=p*s,t.height+=g*s}return t}_getGaussianFactor(e,t){const s=this._numLevels-1,i=(s-e)/s,l=this._gaussianFactor*(i-t);return Math.exp(-(l**2))}};function H(e){return x("calcite-action",{appearance:"transparent",class:e.className,disabled:e.disabled,icon:e.icon,key:e.className,onclick:e.onClick,scale:"s",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 j=W;export{j as default};