@arcgis/core/widgets/support/GridControls.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 t from"../../Color.js";import{substitute as i}from"../../intl.js";import{deprecateWidget as n}from"../../core/deprecate.js";import s from"../../core/Logger.js";import{watch as o,initial as l}from"../../core/reactiveUtils.js";import{formatDecimal as a}from"../../core/unitFormatUtils.js";import{property as r,subclass as c}from"../../core/accessorSupport/decorators.js";import d from"../../views/interactive/snapping/SnappingOptions.js";import p from"../Widget.js";import{loadCalciteComponents as g}from"./componentsUtils.js";import{globalCss as m}from"./globalCss.js";import{loadLabeledSwitchComponents as u,LabeledSwitch as h}from"./LabeledSwitch.js";import{tsx as b,classes as v,messageBundle as w}from"./widget.js";import y from"./GridControls/GridControlsViewModel.js";import{userInputToGridRotation as _,gridRotationToDegrees as C}from"./GridControls/gridUtils.js";import f from"./GridControls/VisibleElements.js";const M="esri-grid-controls",I={base:M,borderedSwitch:`${M}__switch--bordered`,container:`${M}__container`,numericInputsContainer:`${M}__numeric-inputs__container`,tilegroup:`${M}__tilegroup`,tile:`${M}__tile`,tileDisabled:`${M}__tile--disabled`,tileContent:`${M}__tile__content`,suffixedInputContainer:`${M}__input-with-suffix__container`,inlineIcon:`${M}__inline-icon`},S={widgetIcon:"grid-unit",gridTheme:{light:"circle",dark:"circle-area",custom:"palette"},placementState:{interactive:"maximum-territory-distance",place:"move",rotate:"rotate"},warning:"exclamation-mark-triangle"},T=t.fromArray([115,115,115]),L=t.fromArray([200,200,200]),D=["interactive","place","rotate"];let k=class extends p{constructor(e,t){super(e,t),this.customColor=null,this.messages=null,this.messagesUnits=null,this.viewModel=new y,this.visibleElements=new f,e?.suppressDeprecationWarning||n(s.getLogger(this),"Grid Controls","arcgis-grid-controls",{version:"4.33"})}normalizeCtorArgs(e={}){const{suppressDeprecationWarning:t,...i}=e;return i}initialize(){this.addHandles([o(()=>this.viewModel.gridColor,e=>{!e||T.equals(e)||L.equals(e)||(this.customColor=e)},l)])}loadDependencies(){return Promise.all([g({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),"action-bar":()=>import("@esri/calcite-components/dist/components/calcite-action-bar"),label:()=>import("@esri/calcite-components/dist/components/calcite-label"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover"),tooltip:()=>import("@esri/calcite-components/dist/components/calcite-tooltip"),"color-picker":()=>import("@esri/calcite-components/dist/components/calcite-color-picker"),"input-number":()=>import("@esri/calcite-components/dist/components/calcite-input-number")}),u()])}get icon(){return S.widgetIcon}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages.widgetLabel}set label(e){this._overrideIfSome("label",e)}get snappingManager(){return this.viewModel.snappingManager}set snappingManager(e){this.viewModel.snappingManager=e}get snappingOptions(){return this.viewModel.snappingOptions}set snappingOptions(e){this.viewModel.snappingOptions=e}get theme(){const e=this.viewModel.gridColor;return e?T.equals(e)?"dark":L.equals(e)?"light":"custom":null}set theme(e){const{viewModel:t,customColor:i,view:n}=this;switch(e){case"light":t.gridColor=L;break;case"dark":t.gridColor=T;break;case"custom":t.gridColor=i??n?.effectiveTheme.accentColor??T}}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}render(){return b("div",{"aria-label":this.label,class:this.classes(I.base,m.widget,m.panel)},b("div",{class:I.container},this._renderContent()))}_renderContent(){const{visibleElements:e}=this;return[e.gridEnabledToggle?this._renderEnabledToggle():null,e.placementButtons?this._renderGridPlacementButtons():null,e.numericInputs?this._renderNumericInputs():null,e.lineIntervalInput?this._renderIntervalInput():null,e.gridSnapEnabledToggle&&this.viewModel.snappingOptions?this._renderSnappingToggle():null,e.dynamicScaleToggle?this._renderDynamicScaleToggle():null,e.rotateWithMapToggle?this._renderRotateToggle():null,e.colorSelection?this._renderColorSelection():null]}_renderGridPlacementButtons(){const{interactivePlacementState:e,placementDisabled:t,gridControlsEnabled:i}=this.viewModel,n=t||!i;return b("calcite-label",{key:"grid-placement-buttons",scale:"s"},this.messages.placementOptions,b("calcite-action-bar",{expandDisabled:!0,layout:"horizontal"},D.map(t=>this._renderPlacementModeButton(t,n,e))))}_renderPlacementModeButton(e,t,i){const n=this.messages.placementState[e],s=`__placement-action-${e}`;return b("div",null,b("calcite-action",{active:i===e,alignment:"center",disabled:t,icon:S.placementState[e],id:s,onclick:()=>this.viewModel.togglePlacementState(e),text:n}),b("calcite-tooltip",{overlayPositioning:"fixed",placement:"top",referenceElement:s,topLayerDisabled:this.topLayerDisabled},n))}_renderNumericInputs(){const{rotation:e,spacing:t,effectiveSpacingAfterDynamicScaling:n,numericSpacingInputShouldBeVisible:s,unit:o="meters"}=this.viewModel,l=this.messagesUnits.units[o].abbr,r=this.viewModel.gridControlsEnabled,c=null!=n&&n!==this.viewModel.spacing,d=`__spacing_input_scaled-${this.id}`;return b("div",{class:this.classes(I.numericInputsContainer)},[s?b("calcite-label",{key:"spacing-label",scale:"s"},b("span",null,this.messages.inputLabel.spacing,c?b("calcite-icon",{class:this.classes(I.inlineIcon),icon:S.warning,id:d,scale:"s",tabIndex:0}):void 0),b("div",{class:I.suffixedInputContainer},b("calcite-input-number",{disabled:!r,numberButtonType:"none",suffixText:l,value:`${t?.toFixed(2)}`,onCalciteInputNumberChange:({currentTarget:e})=>{const t=parseFloat(e.value);this.viewModel.spacing=t,t!==this.viewModel.spacing&&(e.value=`${this.viewModel.spacing}`)}}),c?b("calcite-tooltip",{overlayPositioning:"fixed",placement:"leading",referenceElement:d,topLayerDisabled:this.topLayerDisabled},i(this.messages.warnings.dynamicSpacing,{actualSpacingIncludingUnit:a(this.messagesUnits,n,o,2,"plural")})):void 0)):void 0,b("calcite-label",{key:"angle-label",scale:"s"},this.messages.inputLabel.angle,b("calcite-input-number",{disabled:!r,integer:!0,numberButtonType:"none",suffixText:this.messagesUnits.units.degrees.abbr,value:`${C(e)}`,onCalciteInputNumberChange:({currentTarget:e})=>this.viewModel.rotation=_(e.value)}))])}_renderIntervalInput(){const{majorLineInterval:e,gridControlsEnabled:t}=this.viewModel;return b("div",{class:this.classes(I.numericInputsContainer)},b("calcite-label",{scale:"s"},this.messages.inputLabel.interval,b("calcite-input-number",{disabled:!t,integer:!0,max:15,min:1,numberButtonType:"vertical",value:`${e}`,onCalciteInputNumberChange:({currentTarget:e})=>{const t=Number.parseInt(e.value,10);this.viewModel.majorLineInterval=t,t!==this.viewModel.majorLineInterval&&(e.value=`${this.viewModel.majorLineInterval}`)}})))}_renderSnappingToggle(){const{snappingOptions:e,gridControlsEnabled:t}=this.viewModel;return b(h,{checked:!!(e?.gridEnabled??!1),disabled:!(t&&!!e),key:"grid-snap-enabled-toggle",label:this.messages.switchLabel.snap,topLayerDisabled:this.topLayerDisabled,onChange:e=>this.viewModel.snappingOptions?.set("gridEnabled",e)})}_renderDynamicScaleToggle(){const{viewModel:e,messages:t}=this,i=this.visibleElements.outOfScaleWarning&&e.gridOutOfScale;return b(h,{checked:e.dynamicScaling,disabled:!e.gridControlsEnabled,hint:i?t.warnings.outOfScale:void 0,hintIcon:S.warning,hintKind:"warning",key:`grid-dynamic-scale-toggle-${this.id}`,label:t.switchLabel.scaling,topLayerDisabled:this.topLayerDisabled,onChange:t=>e.dynamicScaling=t})}_renderRotateToggle(){const{gridControlsEnabled:e,rotateWithMap:t}=this.viewModel;return b(h,{checked:t,disabled:!e,key:"grid-rotate-map-toggle",label:this.messages.switchLabel.rotateWithMap,topLayerDisabled:this.topLayerDisabled,onChange:e=>this.viewModel.rotateWithMap=e})}_renderEnabledToggle(){return b("div",{class:I.borderedSwitch},b(h,{checked:this.viewModel.displayEnabled,disabled:!!this.viewModel.interactivePlacementState,key:"grid-enabled-toggle",label:this.messages.switchLabel.display,topLayerDisabled:this.topLayerDisabled,onChange:e=>this.viewModel.trySetDisplayEnabled(e)}))}_renderColorSelection(){const{customColor:e}=this,i=`${this.id}--custom-grid-color-button`;return b("calcite-label",{scale:"s"},this.messages.inputLabel.theme,b("div",{class:I.tilegroup},[this._renderThemeTile({value:"dark"}),this._renderThemeTile({value:"light"}),this._renderThemeTile({value:"custom",id:i}),b("calcite-popover",{closable:!0,heading:this.messages.colorInputHeading,label:this.messages.gridLineColorPopoverLabel,overlayPositioning:"fixed",referenceElement:i,topLayerDisabled:this.topLayerDisabled},b("calcite-color-picker",{alphaChannel:!0,savedDisabled:!0,value:e?.toHex({digits:8})??"#000000ff",onCalciteColorPickerChange:e=>{const i=t.fromHex(e.currentTarget.value);i&&(this.customColor=i,this.theme="custom")}}))]))}_renderThemeTile(e){const{theme:t}=this,{value:i}=e,n=this.messages.gridTheme[i],s=`${this.id}--theme_tile_${i}`,o=`${s}__label`,l=S.gridTheme[i],a=this.viewModel.gridControlsEnabled;return b("div",{class:v({[I.tile]:!0,[I.tileDisabled]:!a}),id:e.id,role:"button"},b("input",{"aria-labelledby":o,checked:t===i,disabled:!a,id:s,name:`${this.id}--theme`,onchange:e=>{this.theme=i,e.target?.focus()},tabIndex:0,type:"radio"}),b("div",{class:I.tileContent},b("calcite-icon",{icon:l,scale:"l"}),b("calcite-label",{for:s,id:o},n)))}};e([r({type:t})],k.prototype,"customColor",void 0),e([r()],k.prototype,"icon",null),e([r()],k.prototype,"label",null),e([r(),w("esri/widgets/support/GridControls/t9n/GridControls")],k.prototype,"messages",void 0),e([r(),w("esri/core/t9n/Units")],k.prototype,"messagesUnits",void 0),e([r()],k.prototype,"snappingManager",null),e([r({type:d})],k.prototype,"snappingOptions",null),e([r()],k.prototype,"theme",null),e([r()],k.prototype,"view",null),e([r({type:y})],k.prototype,"viewModel",void 0),e([r({type:f,nonNullable:!0})],k.prototype,"visibleElements",void 0),k=e([c("esri.widgets.support.GridControls")],k);const E=k;export{E as default};