@arcgis/core/widgets/DirectionalPad.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.32/esri/copyright.txt for details.
*/
import{_ as t}from"../chunks/tslib.es6.js";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 s}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as n}from"../core/accessorSupport/decorators/subclass.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 p from"./DirectionalPad/DirectionalPadViewModel.js";import{findElementCenter as u}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{isActivationKey as b,setFocus as _}from"./support/widgetUtils.js";import{messageBundle as g}from"./support/decorators/messageBundle.js";import{tsx as w}from"./support/jsxFactory.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 p,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=u(this._buttonsContainer);this.viewModel.beginFollowingPointer(t,o)},this._onKeyDown=(t,{key:e})=>{b(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-pad":()=>import("@esri/calcite-components/dist/components/calcite-action-pad"),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():_(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 w("div",{"aria-label":t,class:o,tabIndex:-1},i.supported?this._renderContent():this._renderUnsupportedMessage())}_renderUnsupportedMessage(){return w("section",{class:c.error,key:"unsupported"},w("p",null,this.messages.unsupported))}_renderContent(){return[this.visibleElements.directionalButtons?this._renderDirectionalButtons():void 0,this.visibleElements.rotationSlider?this._renderRotation():void 0]}_renderDirectionalButtons(){return w("calcite-action-pad",{expandDisabled:!0,key:"directional-buttons-container",layout:"grid"},w("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 w("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},w("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 w("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&&w("calcite-icon",{icon:t,scale:this.visualScale}))}_renderRotation(){return w("calcite-action-pad",{expandDisabled:!0,key:"slider-container",layout:"horizontal"},w("calcite-action-group",{class:c.rotationContainer},this.visibleElements.rotationResetButton?this._renderRotationResetButton():null,this._renderRotationSlider()))}_renderRotationResetButton(){const t=this.messages.resetHeading;return w("calcite-action",{alignment:"center",class:c.rotationReset,disabled:this.disabled||!this._rotationEnabled,onclick:this._onRotationReset,scale:this.visualScale,text:t,title:t},w("calcite-icon",{flipRtl:!0,icon:"rotate",scale:this.visualScale}))}_renderRotationSlider(){return w("div",{class:c.rotationSliderContainer},w("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([s()],f.prototype,"_buttonsContainer",void 0),t([s()],f.prototype,"_buttons",void 0),t([s()],f.prototype,"disabled",null),t([s()],f.prototype,"icon",null),t([s()],f.prototype,"label",null),t([s(),g("esri/widgets/DirectionalPad/t9n/DirectionalPad")],f.prototype,"messages",void 0),t([s({type:h,nonNullable:!0})],f.prototype,"visibleElements",void 0),t([s()],f.prototype,"view",null),t([s({type:p})],f.prototype,"viewModel",void 0),t([s()],f.prototype,"visualScale",void 0),t([s()],f.prototype,"speed",null),t([s({readOnly:!0})],f.prototype,"_rotationEnabled",null),f=t([n("esri.widgets.DirectionalPad")],f);const C=f;export{C as default};