@arcgis/core/widgets/CoordinateConversion.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"../core/Logger.js";import{maybeProperty as o}from"../core/maybe.js";import{property as i}from"../core/accessorSupport/decorators/property.js";import{cast as s}from"../core/accessorSupport/decorators/cast.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 a from"./CoordinateConversion/CoordinateConversionViewModel.js";import l from"./CoordinateConversion/support/Conversion.js";import{loadCalciteComponents as p}from"./support/componentsUtils.js";import{globalCss as c}from"./support/globalCss.js";import{Heading as d}from"./support/Heading.js";import{legacyIcon as u}from"./support/legacyIcon.js";import{accessibleHandler as h}from"./support/decorators/accessibleHandler.js";import{messageBundle as _}from"./support/decorators/messageBundle.js";import{tsx as m}from"./support/jsxFactory.js";import{isRTL as v,storeNode as g}from"./support/widgetUtils.js";const b="esri-coordinate-conversion",y={base:b,captureMode:`${b}--capture-mode`,noBasemap:`${b}--no-basemap`,popup:`${b}__popup`,clipboardPopup:`${b}__clipboard-popup`,conversionList:`${b}__conversion-list`,conversionRow:`${b}__row`,coordDisplay:`${b}__display`,expandButton:`${b}__expand-button`,expanded:`${b}__conversions-view--expanded`,expandDown:`${b}__conversions-view--expand-down`,expandUp:`${b}__conversions-view--expand-up`,conversionsView:`${b}__conversions-view`,rowSelect:`${b}__select-row`,toolDisplay:`${b}__tools`,modeToggle:`${b}__mode-toggle`,rowButton:`${b}__row-button`,coordinateInput:`${b}__input-coordinate`,inputForm:`${b}__input-form`,inputFormGroup:`${b}__input-group`,inputSelect:`${b}__input-select`,sectionHeading:`${b}__heading`,patternInput:`${b}__pattern-input`,settings:`${b}__settings`,settingsFormGroup:`${b}__settings-group`,settingsFormGroupHorizontal:`${b}__settings-group-horizontal`,previewCoordinate:`${b}__preview-coordinate`},C={settingsButton:!0,inputButton:!0,captureButton:!0,expandButton:!0},w=750,f=2500;let T=class extends r{constructor(e,t){super(e,t),this._popupMessage=null,this._popupTimeoutId=void 0,this._clipboardPopupTimeoutId=void 0,this._coordinateInput=null,this._badInput=!1,this._goToEnabled=!1,this._conversionFormat=null,this._settingsFormat=null,this._previewConversion=null,this._expanded=!1,this._clipboardPopupVisible=!1,this._popupVisible=!1,this._settingsVisible=!1,this._inputVisible=!1,this.headingLevel=4,this.messages=null,this.messagesCommon=null,this.orientation="auto",this.viewModel=new a,this.visibleElements={...C}}loadDependencies(){return p({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),checkbox:()=>import("@esri/calcite-components/dist/components/calcite-checkbox"),input:()=>import("@esri/calcite-components/dist/components/calcite-input"),label:()=>import("@esri/calcite-components/dist/components/calcite-label"),option:()=>import("@esri/calcite-components/dist/components/calcite-option"),select:()=>import("@esri/calcite-components/dist/components/calcite-select")})}get conversions(){return this.viewModel.conversions}set conversions(e){this.viewModel.conversions=e}get currentLocation(){return this.viewModel.currentLocation}set currentLocation(e){this.viewModel.currentLocation=e}get formats(){return this.viewModel.formats}set formats(e){this.viewModel.formats=e}get goToOverride(){return this.viewModel.goToOverride}set goToOverride(e){this.viewModel.goToOverride=e}get icon(){return"coordinate-system"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get mode(){return this.viewModel.mode}set mode(e){this.viewModel.mode=e}set multipleConversions(e){!1===e&&(this._expanded=!1,this.conversions.splice(1,this.conversions.length-1)),this._set("multipleConversions",e)}get multipleConversions(){const e=this._get("multipleConversions");return"boolean"!=typeof e||e}get locationSymbol(){return this.viewModel.locationSymbol}set locationSymbol(e){this.viewModel.locationSymbol=e}get storageEnabled(){return this.viewModel.storageEnabled}set storageEnabled(e){this.viewModel.storageEnabled=e}get storageType(){return this.viewModel.storageType}set storageType(e){this.viewModel.storageType=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}castVisibleElements(e){return{...C,...e}}reverseConvert(e,t){return this.viewModel.reverseConvert(e,t)}render(){const e=this.viewModel?.state,t="disabled"===e?m("div",{key:"esri-coordinate__no-basemap"},this.messages?.noBasemap):null,o=!t&&this._inputVisible?this._renderInputForm():null,i=!t&&this._settingsVisible?this._renderSettings():null,s=t||o||i?null:this._renderConversionsView(),n=this._popupVisible?this._renderPopup():null,r={[y.captureMode]:"capture"===this.mode,[c.disabled]:"loading"===e,[y.noBasemap]:"disabled"===e};return m("div",{class:this.classes(y.base,c.widget,r)},n,t,s,i,o)}_addConversion(e){const t=e.target,o=t.selectedOption.value,i=x(t);if(null==o||null==i)return;const s=new l({format:o});t.value="default",i>=0?(this.conversions.removeAt(i),this.conversions.add(s,i)):this.conversions.add(s)}_findSettingsFormat(){return this._settingsFormat||this.conversions.reduceRight(((e,t)=>{const o=t.format;return o?.hasDisplayProperties?o:e}),null)||this.formats.find((e=>e.hasDisplayProperties))}_hidePopup(){this._popupTimeoutId&&(clearTimeout(this._popupTimeoutId),this._popupTimeoutId=void 0),this._popupVisible=!1,this._popupMessage=null,this.scheduleRender()}_hideClipboardPopup(){this._clipboardPopupTimeoutId&&(clearTimeout(this._clipboardPopupTimeoutId),this._clipboardPopupTimeoutId=void 0),this._clipboardPopupVisible=!1,this.scheduleRender()}_onConvertComplete(){this._inputVisible=!1,this._coordinateInput.value=""}_onCopy(e){const t=P(e.currentTarget)?.displayCoordinate;null!=t&&(e.clipboardData?.setData("text/plain",t),this._showClipboardPopup(),e.preventDefault())}_processUserInput(e){const i=o(e,"key"),s=this.viewModel;if("Enter"!==i&&i)this._badInput&&(this._badInput=!1);else{const e=this._conversionFormat||this.conversions.at(0).format;if(!e)return;const o=this._coordinateInput.value;this._reverseConvert(o,e).then((e=>{"capture"===this.mode?s.resume():this.mode="capture",this.currentLocation=e,s.setLocation(e),this._onConvertComplete()})).catch((e=>{t.getLogger(this).error(e),this._showPopup(this.messages?.invalidCoordinate),this._badInput=!0}))}}async _reverseConvert(e,o){const i=this.viewModel,s=await o.reverseConvert(e);return this._goToEnabled&&s&&i.goToLocation(s).catch((e=>{t.getLogger(this).warn(e),this._showPopup(this.messages?.locationOffBasemap)})),s}_setInputFormat(e){const t=e.target.selectedOption.value;null!=t&&(this._conversionFormat=t)}_setPreviewConversion(){const e=this._findSettingsFormat(),t=this.viewModel;if(e){const o=this.conversions.find((t=>t.format===e));this._previewConversion=new l({format:e,position:{location:this.currentLocation,coordinate:o?.position?.coordinate}}),this._previewConversion.position?.coordinate||t.previewConversion(this._previewConversion)}}_setSettingsFormat(e){const t=e.target.selectedOption.value;null!=t&&(this._settingsFormat=t,this._setPreviewConversion())}_showClipboardPopup(){this._clipboardPopupVisible?clearTimeout(this._clipboardPopupTimeoutId):this._clipboardPopupVisible=!0,this.scheduleRender(),this._popupTimeoutId=setTimeout((()=>{this._popupTimeoutId=void 0,this._hideClipboardPopup()}),w)}_showPopup(e,t=f){this._popupMessage=e,this._popupVisible?clearTimeout(this._popupTimeoutId):this._popupVisible=!0,this.scheduleRender(),this._popupTimeoutId=setTimeout((()=>{this._popupTimeoutId=void 0,this._hidePopup()}),t)}_toggleGoTo(){this._goToEnabled=!this._goToEnabled}_updateCurrentPattern(e){e.stopPropagation();const t=e.target,o=this._findSettingsFormat();o&&(o.currentPattern=t.value)}_renderConversion(e,t){const{messages:o}=this;if(!o)return m("li",null);const{format:i}=e,s=i?.label??"",n=`${this.id}__list-item-${t}`,r=`${s} ${o.conversionOutputSuffix}`,a=0===t,l=a||this._expanded,p=a?this._renderFirstConversion(e):this._renderTools(t,e,n),c=a&&!e.displayCoordinate?o.noLocation:e.displayCoordinate,d=m("div",{"aria-label":c,class:y.coordDisplay,"data-conversion":e,role:"listitem",tabIndex:0,title:c??""},c),u=this._renderOptions(this.formats.filter((e=>e!==i)));return l?m("li",{"aria-label":r,class:y.conversionRow,id:n,key:e,role:"group",tabIndex:0,title:r},m("calcite-select",{"aria-controls":n,bind:this,class:y.rowSelect,"data-index":t,label:o.selectFormat,scale:"s",onCalciteSelectChange:this._addConversion},m("calcite-option",{label:s.toUpperCase(),selected:!0},s.toUpperCase()),u),d,p):null}_renderCopyButton(e){const t=this._clipboardPopupVisible&&this._renderClipboardPopup(),{messagesCommon:o}=this;return o?m("li",{"aria-label":o.copy,bind:this,class:this.classes(c.widgetButton,y.rowButton),"data-conversion":e,onclick:this._copyCoordinateOutput,oncopy:this._onCopy,onkeydown:this._copyCoordinateOutput,role:"button",tabIndex:0,title:o.copy},t,m("span",{"aria-hidden":"true",class:u.duplicate})):m("li",null)}_renderFirstConversion(e){const t=this.id,{messages:o,messagesCommon:i,multipleConversions:s,visibleElements:n}=this;if(!i||!o)return m("ul",null);const r="live"===this.mode?o.captureMode:o.liveMode,a=this._expanded?i.collapse:i.expand,l=e.displayCoordinate&&"capture"===this.mode?this._renderCopyButton(e):null,p=s&&n.expandButton&&this._renderIconButton({iconType:this._expanded?"chevron-down":"chevron-up",clickFunction:this._toggleExpand,classes:[y.expandButton],attributes:{"aria-controls":`${t}__${y.conversionList}`,label:a}}),c=!s&&n.captureButton&&this._renderIconButton({iconType:"live"===this.mode?"pin-tear":"pin-tear-f",clickFunction:this._toggleMode,classes:[y.modeToggle],attributes:{label:r}});return m("ul",{class:y.toolDisplay},l,p,c)}_renderInputForm(){const e=this._conversionFormat||this.conversions.at(0).format,t=this.formats.findIndex((t=>t.name===e?.name)),o=this.id,i=`${o}__${y.coordinateInput}`,s=`${o}__${y.coordinateInput}__header`,n=this._renderOptions(this.formats,!0,t),{messages:r,messagesCommon:a,headingLevel:l}=this;if(!a||!r)return m("div",null);const p=this._renderIconButton({iconType:v(this.container)?"arrow-right":"arrow-left",clickFunction:this._toggleInputVisibility,attributes:{label:a.back}});return m("div",{"aria-labelledby":s,class:y.inputForm,key:"esri-coordinate-conversion__input-form",role:"search"},m("div",{class:y.sectionHeading},p,m(d,{class:c.heading,id:s,level:l},r.inputCoordTitle)),m("div",{class:y.inputFormGroup},m("calcite-select",{"aria-controls":i,bind:this,class:y.inputSelect,label:r.selectFormat,scale:"s",onCalciteSelectChange:this._setInputFormat},n),m("calcite-input",{afterCreate:g,"aria-labelledby":s,bind:this,class:y.coordinateInput,"data-format":e,"data-node-ref":"_coordinateInput",id:i,onkeydown:this._processUserInput,placeholder:r.inputCoordTitle,required:!0,scale:"s",spellcheck:!1,status:this._badInput?"invalid":"idle"})),m("div",{class:y.inputFormGroup},m("calcite-label",{layout:"inline",scale:"s"},m("calcite-checkbox",{bind:this,checked:this._goToEnabled,onCalciteCheckboxChange:this._toggleGoTo}),r.goTo),m("calcite-button",{appearance:"outline",bind:this,kind:"neutral",onclick:this._processUserInput,type:"button",width:"auto"},r.convert)))}_renderConversionsView(){const{messages:e}=this;if(!e)return m("div",null);const t=`${this.id}__${y.conversionList}`,o=this._renderPrimaryTools(),i=this._renderOptions(this.formats),s=this.conversions.map(((e,t)=>this._renderConversion(e,t))).toArray(),n=this._expanded?m("div",{class:y.conversionRow},m("calcite-select",{"aria-controls":t,bind:this,"data-index":-1,label:e.addConversion,scale:"s",onCalciteSelectChange:this._addConversion},m("calcite-option",{disabled:!0,selected:!0,value:"default"},e.addConversion),i),o):null,r={[y.expanded]:this._expanded,[y.expandUp]:"expand-up"===this.orientation,[y.expandDown]:"expand-down"===this.orientation};return m("div",{class:this.classes(y.conversionsView,r),key:"esri-coordinate-conversion__main-view"},m("ul",{"aria-expanded":this._expanded?"true":"false",class:y.conversionList,id:t},s),n)}_renderOptions(e,t,o){const i=this.conversions.at(0),s=i.format?.name;return e.map(((e,n)=>{const r=!(t||!i)&&(s===e.name||this.conversions.map((e=>e.format?.name)).includes(e.name));return m("calcite-option",{disabled:r,key:e.name??"unnamed-format",label:e.label.toUpperCase(),selected:n===o,value:e},e.label)})).toArray()}_renderPopup(){return m("div",{class:y.popup,role:"alert"},this._popupMessage)}_renderClipboardPopup(){const{messages:e}=this;return e?m("div",{class:this.classes(y.popup,y.clipboardPopup),role:"alert"},e.copySuccessMessage):m("div",null)}_renderPrimaryTools(){const{messages:e,visibleElements:t}=this;if(!e)return m("ul",null);const o="live"===this.mode?e.captureMode:e.liveMode,i=t.inputButton&&this._renderIconButton({iconType:"pencil",clickFunction:this._toggleInputVisibility,attributes:{label:e.inputCoordTitle}}),s=t.captureButton&&this._renderIconButton({iconType:"live"===this.mode?"pin-tear":"pin-tear-f",clickFunction:this._toggleMode,classes:[y.modeToggle],attributes:{label:o}}),n=t.settingsButton&&this._renderIconButton({iconType:"gear",clickFunction:this._toggleSettingsVisibility,attributes:{label:e.settingsTitle}});return m("ul",{class:y.toolDisplay},i,s,n)}_renderSettings(){const e=this.id,t=`${e}__${y.patternInput}`,o=`${e}__${y.patternInput}__header`,i=`${e}__${y.previewCoordinate}`,s=this.formats.filter((e=>e.hasDisplayProperties)),n=this._findSettingsFormat(),r=n?s.indexOf(n):-1,a=this._renderOptions(s,!0,r),l=n?.currentPattern,{messages:p,messagesCommon:u,headingLevel:h}=this;if(!u||!p)return m("div",null);const _=this._renderIconButton({iconType:v(this.container)?"arrow-right":"arrow-left",clickFunction:this._toggleSettingsVisibility,attributes:{label:u.back}}),g=this._renderIconButton({iconType:"reset",clickFunction:this._setDefaultPattern,attributes:{label:p.defaultPattern}});return m("div",{"aria-labelledby":o,class:y.settings,key:y.settings},m("div",{class:y.sectionHeading},_,m(d,{class:c.heading,id:o,level:h},p.settingsTitle)),m("div",{class:y.settingsFormGroup},m("label",{for:t},p.changeCoordinateDisplay),m("calcite-select",{bind:this,label:p.selectFormat,width:"full",onCalciteSelectChange:this._setSettingsFormat},a),m("div",{class:y.settingsFormGroupHorizontal},m("calcite-input",{"aria-controls":i,bind:this,class:y.patternInput,id:t,spellcheck:!1,type:"text",value:l,onCalciteInputInput:this._updateCurrentPattern}),g)),m("div",{class:y.settingsFormGroup},m("label",null,u.preview,m("div",{class:y.previewCoordinate,id:i,tabIndex:0},this._previewConversion?.displayCoordinate))))}_renderIconButton(e){const{iconType:t,clickFunction:o,classes:i,attributes:s}=e;return m("calcite-button",{appearance:"transparent",bind:this,class:this.classes(i),iconStart:t,kind:"neutral",onclick:o,onkeydown:o,...s})}_renderTools(e,t,o){const i=t.displayCoordinate&&"capture"===this.mode?this._renderCopyButton(t):null,{messages:s}=this;if(!s)return m("ul",null);const n=this._renderIconButton({iconType:"x",clickFunction:this._removeConversion,attributes:{"aria-controls":o,label:s.removeConversion,"data-index":e}});return m("ul",{class:y.toolDisplay,role:"listitem"},i,m("li",{class:this.classes(y.rowButton)},n))}_copyCoordinateOutput(e){const t=e.target;if(!("createTextRange"in document.body)){const e=window.getSelection(),o=document.createRange();o.selectNodeContents(t),e?.removeAllRanges(),e?.addRange(o)}document.execCommand("copy")}_removeConversion(e){const t=x(e.currentTarget);null!=t&&this.conversions.removeAt(t)}_setDefaultPattern(e){e.stopPropagation();const t=this._findSettingsFormat();t&&(t.currentPattern=t.defaultPattern)}_toggleExpand(){this._expanded=!this._expanded}_toggleInputVisibility(){this._inputVisible=!this._inputVisible,this._popupVisible&&this._hidePopup(),this._inputVisible?this.viewModel.pause():this.viewModel.resume()}_toggleMode(){this.mode="live"===this.mode?"capture":"live"}_toggleSettingsVisibility(){this._settingsVisible=!this._settingsVisible,this._popupVisible&&this._hidePopup(),this._settingsVisible?(this._setPreviewConversion(),this.viewModel.pause()):this.viewModel.resume()}};e([i()],T.prototype,"conversions",null),e([i()],T.prototype,"currentLocation",null),e([i()],T.prototype,"formats",null),e([i()],T.prototype,"goToOverride",null),e([i()],T.prototype,"headingLevel",void 0),e([i()],T.prototype,"icon",null),e([i()],T.prototype,"label",null),e([i(),_("esri/widgets/CoordinateConversion/t9n/CoordinateConversion")],T.prototype,"messages",void 0),e([i(),_("esri/t9n/common")],T.prototype,"messagesCommon",void 0),e([i()],T.prototype,"mode",null),e([i()],T.prototype,"orientation",void 0),e([i()],T.prototype,"multipleConversions",null),e([i()],T.prototype,"locationSymbol",null),e([i()],T.prototype,"storageEnabled",null),e([i()],T.prototype,"storageType",null),e([i()],T.prototype,"view",null),e([i({type:a})],T.prototype,"viewModel",void 0),e([i()],T.prototype,"visibleElements",void 0),e([s("visibleElements")],T.prototype,"castVisibleElements",null),e([h()],T.prototype,"_copyCoordinateOutput",null),e([h()],T.prototype,"_removeConversion",null),e([h()],T.prototype,"_setDefaultPattern",null),e([h()],T.prototype,"_toggleExpand",null),e([h()],T.prototype,"_toggleInputVisibility",null),e([h()],T.prototype,"_toggleMode",null),e([h()],T.prototype,"_toggleSettingsVisibility",null),T=e([n("esri.widgets.CoordinateConversion")],T);const I=T;function x(e){return e["data-index"]}function P(e){return e["data-conversion"]}export{I as default};