@arcgis/core/widgets/support/GridControls.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 t from"../../Color.js";import"../../intl.js";import{deprecateWidget as i}from"../../core/deprecate.js";import n from"../../core/Logger.js";import{watch as s,initial as o}from"../../core/reactiveUtils.js";import{formatDecimal as l}from"../../core/unitFormatUtils.js";import{property as r}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/RandomLCG.js";import{subclass as a}from"../../core/accessorSupport/decorators/subclass.js";import c from"../Widget.js";import{loadCalciteComponents as d}from"./componentsUtils.js";import{globalCss as p}from"./globalCss.js";import{loadLabeledSwitchComponents as m,LabeledSwitch as g}from"./LabeledSwitch.js";import{classes as u}from"./widgetUtils.js";import{messageBundle as h}from"./decorators/messageBundle.js";import{tsx as b}from"./jsxFactory.js";import v from"./GridControls/GridControlsViewModel.js";import{userInputToGridRotation as w,gridRotationToDegrees as _}from"./GridControls/gridUtils.js";import C from"./GridControls/VisibleElements.js";import{substitute as f}from"../../intl/substitute.js";const y="esri-grid-controls",M={base:y,borderedSwitch:`${y}__switch--bordered`,container:`${y}__container`,numericInputsContainer:`${y}__numeric-inputs__container`,tilegroup:`${y}__tilegroup`,tile:`${y}__tile`,tileDisabled:`${y}__tile--disabled`,tileContent:`${y}__tile__content`,suffixedInputContainer:`${y}__input-with-suffix__container`,inlineIcon:`${y}__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"},I=t.fromArray([115,115,115]),T=t.fromArray([200,200,200]),j=["interactive","place","rotate"];let k=class extends c{constructor(e,t){super(e,t),this.customColor=null,this.messages=null,this.messagesUnits=null,this.viewModel=new v,this.visibleElements=new C,i(n.getLogger(this),"Grid Controls","arcgis-grid-controls",{version:"4.33"})}initialize(){this.addHandles([s((()=>this.viewModel.gridColor),(e=>{!e||I.equals(e)||T.equals(e)||(this.customColor=e)}),o)])}loadDependencies(){return Promise.all([d({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")}),m()])}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?I.equals(e)?"dark":T.equals(e)?"light":"custom":null}set theme(e){const{viewModel:t,customColor:i,view:n}=this;switch(e){case"light":t.gridColor=T;break;case"dark":t.gridColor=I;break;case"custom":t.gridColor=i??n?.effectiveTheme.accentColor??I}}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}render(){return b("div",{"aria-label":this.label,class:this.classes(M.base,p.widget,p.panel)},b("div",{class:M.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"},j.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},n))}_renderNumericInputs(){const{rotation:e,spacing:t,effectiveSpacingAfterDynamicScaling:i,numericSpacingInputShouldBeVisible:n,unit:s="meters"}=this.viewModel,o=this.messagesUnits.units[s].abbr,r=this.viewModel.gridControlsEnabled,a=null!=i&&i!==this.viewModel.spacing,c=`__spacing_input_scaled-${this.id}`;return b("div",{class:this.classes(M.numericInputsContainer)},[n?b("calcite-label",{key:"spacing-label",scale:"s"},b("span",null,this.messages.inputLabel.spacing,a?b("calcite-icon",{class:this.classes(M.inlineIcon),icon:S.warning,id:c,scale:"s",tabIndex:0}):void 0),b("div",{class:M.suffixedInputContainer},b("calcite-input-number",{disabled:!r,numberButtonType:"none",suffixText:o,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}`)}}),a?b("calcite-tooltip",{overlayPositioning:"fixed",placement:"leading",referenceElement:c},f(this.messages.warnings.dynamicSpacing,{actualSpacingIncludingUnit:l(this.messagesUnits,i,s,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:`${_(e)}`,onCalciteInputNumberChange:({currentTarget:e})=>this.viewModel.rotation=w(e.value)}))])}_renderIntervalInput(){const{majorLineInterval:e,gridControlsEnabled:t}=this.viewModel;return b("div",{class:this.classes(M.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(g,{checked:!!(e?.gridEnabled??!1),disabled:!(t&&!!e),key:"grid-snap-enabled-toggle",label:this.messages.switchLabel.snap,onChange:e=>this.viewModel.snappingOptions?.set("gridEnabled",e)})}_renderDynamicScaleToggle(){const{viewModel:e,messages:t}=this,i=this.visibleElements.outOfScaleWarning&&e.gridOutOfScale;return b(g,{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,onChange:t=>e.dynamicScaling=t})}_renderRotateToggle(){const{gridControlsEnabled:e,rotateWithMap:t}=this.viewModel;return b(g,{checked:t,disabled:!e,key:"grid-rotate-map-toggle",label:this.messages.switchLabel.rotateWithMap,onChange:e=>this.viewModel.rotateWithMap=e})}_renderEnabledToggle(){return b("div",{class:M.borderedSwitch},b(g,{checked:this.viewModel.displayEnabled,disabled:!!this.viewModel.interactivePlacementState,key:"grid-enabled-toggle",label:this.messages.switchLabel.display,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:M.tilegroup},[this._renderThemeTile({value:"dark"}),this._renderThemeTile({value:"light"}),this._renderThemeTile({value:"custom",id:i}),b("calcite-popover",{autoClose:!0,label:this.messages.gridLineColorPopoverLabel,overlayPositioning:"fixed",referenceElement:i},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],r=this.viewModel.gridControlsEnabled;return b("div",{class:u({[M.tile]:!0,[M.tileDisabled]:!r}),id:e.id,role:"button"},b("input",{"aria-labelledby":o,checked:t===i,disabled:!r,id:s,name:`${this.id}--theme`,onchange:e=>{this.theme=i,e.target?.focus()},tabIndex:0,type:"radio"}),b("div",{class:M.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(),h("esri/widgets/support/GridControls/t9n/GridControls")],k.prototype,"messages",void 0),e([r(),h("esri/core/t9n/Units")],k.prototype,"messagesUnits",void 0),e([r()],k.prototype,"snappingManager",null),e([r()],k.prototype,"snappingOptions",null),e([r()],k.prototype,"theme",null),e([r()],k.prototype,"view",null),e([r({type:v})],k.prototype,"viewModel",void 0),e([r({type:C,nonNullable:!0})],k.prototype,"visibleElements",void 0),k=e([a("esri.widgets.support.GridControls")],k);const x=k;export{x as default};