@arcgis/core/widgets/DirectionalPad.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 t}from"tslib";import{deprecateWidget as e}from"../core/deprecate.js";import i from"../core/Logger.js";import{watch as o}from"../core/reactiveUtils.js";import{property as n,subclass as s}from"../core/accessorSupport/decorators.js";import r from"./Widget.js";import{canShowNorth as a}from"./Compass/utils.js";import{directionalPadAngles as l,directionalPadArrows as d}from"./DirectionalPad/constants.js";import{css as c}from"./DirectionalPad/css.js";import u from"./DirectionalPad/DirectionalPadViewModel.js";import{findElementCenter as p}from"./DirectionalPad/utils.js";import h from"./DirectionalPad/VisibleElements.js";import{loadCalciteComponents as m}from"./support/componentsUtils.js";import{globalCss as v}from"./support/globalCss.js";import{messageBundle as b,isActivationKey as _,tsx as g}from"./support/widget.js";import{setFocus as w}from"./support/widgetUtils.js";let f=class extends r{constructor(t,o){super(t,o),this._buttonsContainer=null,this._buttons={},this.messages=null,this.visibleElements=new h,this.viewModel=new u,this.visualScale="s",this._rotateIcon=t=>({"--rotation":`rotate(${t}deg)`}),this._afterButtonContainerCreate=t=>{this._buttonsContainer=t,this._buttonsContainer.addEventListener("contextmenu",this._onContextMenu,{capture:!0})},this._afterButtonContainerRemoved=()=>{this._buttonsContainer?.removeEventListener("contextmenu",this._onContextMenu,{capture:!0}),this._buttonsContainer=null},this._afterButtonCreate=(t,e)=>{this._buttons[t]=e},this._afterButtonRemoved=t=>{this._buttons[t]=void 0},this._onContextMenu=t=>t.preventDefault(),this._onButtonPointerDown=t=>{if(null===this._buttonsContainer)return;const e=t.target,i=e?.shadowRoot?.querySelector("button");i?.hasPointerCapture(t.pointerId)&&i.releasePointerCapture(t.pointerId);const o=p(this._buttonsContainer);this.viewModel.beginFollowingPointer(t,o)},this._onKeyDown=(t,{key:e})=>{_(e)&&this.viewModel.moveOnce(t)},this._onSliderInput=({currentTarget:t})=>{"number"==typeof t.value&&(this.viewModel.rotation=t.value)},this._onRotationReset=()=>{this.viewModel.rotation=0},e(i.getLogger(this),"Directional Pad","arcgis-directional-pad",{version:"4.32"})}loadDependencies(){return m({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),"action-group":()=>import("@esri/calcite-components/dist/components/calcite-action-group"),"action-bar":()=>import("@esri/calcite-components/dist/components/calcite-action-bar"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),slider:()=>import("@esri/calcite-components/dist/components/calcite-slider")})}initialize(){this.addHandles(o(()=>this.viewModel.angle,()=>{const t=this._buttonsContainer?.contains(document.activeElement);t&&(null==this.viewModel.angle?this.container?.focus():w(this._buttons[this.viewModel.angle]))}))}get disabled(){return this.viewModel.disabled}set disabled(t){this.viewModel.disabled=t}get icon(){return"move"}set icon(t){this._overrideIfSome("icon",t)}get label(){return this.messages?.widgetLabel??""}set label(t){this._overrideIfSome("label",t)}get view(){return this.viewModel.view}set view(t){this.viewModel.view=t}get speed(){return this.viewModel.speed}set speed(t){this.viewModel.speed=t}get _rotationEnabled(){return!this.view?.ready||this.view.constraints.rotationEnabled}render(){const{label:t,disabled:e,viewModel:i}=this,o=this.classes(c.base,v.widget,e?v.disabled:null);return g("div",{"aria-label":t,class:o,tabIndex:-1},i.supported?this._renderContent():this._renderUnsupportedMessage())}_renderUnsupportedMessage(){return g("section",{class:c.error,key:"unsupported"},g("p",null,this.messages.unsupported))}_renderContent(){return[this.visibleElements.directionalButtons?this._renderDirectionalButtons():void 0,this.visibleElements.rotationSlider?this._renderRotation():void 0]}_renderDirectionalButtons(){return g("calcite-action-bar",{expandDisabled:!0,floating:!0,key:"directional-buttons-container",layout:"grid",overflowActionsDisabled:!0},g("calcite-action-group",{afterCreate:this._afterButtonContainerCreate,afterRemoved:this._afterButtonContainerRemoved,class:c.buttonsContainer,dir:"ltr"},l.slice(0,4).map(t=>this._renderButton(t)),this._renderCompass(),l.slice(4).map(t=>this._renderButton(t))))}_renderButton(t){const{label:e,iconName:i}=d[t],o=this.messages[e];return g("calcite-action",{active:this.viewModel.angle===t,afterCreate:e=>this._afterButtonCreate(t,e),afterRemoved:()=>this._afterButtonRemoved(t),alignment:"center",class:c.button,"data-angle":t.toString(),disabled:this.disabled,key:t,onkeydown:this._onKeyDown.bind(void 0,t),onpointerdown:this._onButtonPointerDown,scale:this.visualScale,text:o,title:o},g("calcite-icon",{icon:i,scale:this.visualScale}))}_renderCompass(){const t=this.disabled||a(this.view)?"compass-needle":"arrow-up",e=0===this.viewModel.rotation,i=this.messages.resetHeading;return g("calcite-action",{alignment:"center",class:c.compassButton,disabled:this.disabled||!this._rotationEnabled||e,key:"compass",onclick:this._onRotationReset,scale:this.visualScale,styles:this._rotateIcon(this.viewModel.rotation),text:i,title:i},!e&&g("calcite-icon",{icon:t,scale:this.visualScale}))}_renderRotation(){return g("calcite-action-bar",{expandDisabled:!0,floating:!0,key:"slider-container",layout:"horizontal"},g("calcite-action-group",{class:c.rotationContainer},this.visibleElements.rotationResetButton?this._renderRotationResetButton():null,this._renderRotationSlider()))}_renderRotationResetButton(){const t=this.messages.resetHeading;return g("calcite-action",{alignment:"center",class:c.rotationReset,disabled:this.disabled||!this._rotationEnabled,onclick:this._onRotationReset,scale:this.visualScale,text:t,title:t},g("calcite-icon",{flipRtl:!0,icon:"rotate",scale:this.visualScale}))}_renderRotationSlider(){return g("div",{class:c.rotationSliderContainer},g("calcite-slider",{"aria-label":this.messages.heading,disabled:this.disabled||!this._rotationEnabled,labelHandles:!0,max:360,min:0,required:!0,scale:this.visualScale,value:Math.round(this.viewModel.rotation),onCalciteSliderInput:this._onSliderInput}))}};t([n()],f.prototype,"_buttonsContainer",void 0),t([n()],f.prototype,"_buttons",void 0),t([n()],f.prototype,"disabled",null),t([n()],f.prototype,"icon",null),t([n()],f.prototype,"label",null),t([n(),b("esri/widgets/DirectionalPad/t9n/DirectionalPad")],f.prototype,"messages",void 0),t([n({type:h,nonNullable:!0})],f.prototype,"visibleElements",void 0),t([n()],f.prototype,"view",null),t([n({type:u})],f.prototype,"viewModel",void 0),t([n()],f.prototype,"visualScale",void 0),t([n()],f.prototype,"speed",null),t([n({readOnly:!0})],f.prototype,"_rotationEnabled",null),f=t([s("esri.widgets.DirectionalPad")],f);const C=f;export{C as default};