CoordinateConversion.js 19 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.25/esri/copyright.txt for details.
  4. */
  5. import{_ as e}from"../chunks/tslib.es6.js";import{eventKey as t}from"../core/events.js";import o from"../core/Logger.js";import{property as i}from"../core/accessorSupport/decorators/property.js";import"../core/arrayUtils.js";import{cast as s}from"../core/accessorSupport/decorators/cast.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{Heading as d}from"./support/Heading.js";import{accessibleHandler as p}from"./support/decorators/accessibleHandler.js";import{messageBundle as c}from"./support/decorators/messageBundle.js";import{tsx as u}from"./support/jsxFactory.js";import{storeNode as h,isRTL as _}from"./support/widgetUtils.js";const v={base:"esri-coordinate-conversion esri-widget",captureMode:"esri-coordinate-conversion--capture-mode",noBasemap:"esri-coordinate-conversion--no-basemap",popup:"esri-coordinate-conversion__popup",clipboardPopup:"esri-coordinate-conversion__clipboard-popup",conversionList:"esri-coordinate-conversion__conversion-list",conversionRow:"esri-coordinate-conversion__row",coordDisplay:"esri-coordinate-conversion__display",expanded:"esri-coordinate-conversion__conversions-view--expanded",expandDown:"esri-coordinate-conversion__conversions-view--expand-down",expandUp:"esri-coordinate-conversion__conversions-view--expand-up",conversionsView:"esri-coordinate-conversion__conversions-view",primarySelect:"esri-coordinate-conversion__select-primary",rowSelect:"esri-coordinate-conversion__select-row",toolDisplay:"esri-coordinate-conversion__tools",modeToggle:"esri-coordinate-conversion__mode-toggle",rowButton:"esri-coordinate-conversion__row-button",backButton:"esri-coordinate-conversion__back-button",convertButton:"esri-coordinate-conversion__button",convertButtonSpan:"esri-coordinate-conversion__convert-button-span",coordinateInput:"esri-coordinate-conversion__input-coordinate",inputForm:"esri-coordinate-conversion__input-form",inputFormGroup:"esri-coordinate-conversion__input-group",rejectInput:"esri-coordinate-conversion__input-coordinate--rejected",sectionHeading:"esri-coordinate-conversion__heading",patternInput:"esri-coordinate-conversion__pattern-input",settings:"esri-coordinate__settings",settingsFormGroup:"esri-coordinate-conversion__settings-group",settingsFormGroupHorizontal:"esri-coordinate-conversion__settings-group-horizontal",previewCoordinate:"esri-coordinate-conversion__preview-coordinate",disabled:"esri-disabled",input:"esri-input",button:"esri-button",header:"esri-widget__heading",widgetButton:"esri-widget--button",leftArrow:"esri-icon-left-arrow",rightArrow:"esri-icon-right-arrow",captureButton:"esri-icon-map-pin",collapseButton:"esri-icon-up",copyButton:"esri-icon-duplicate",editButton:"esri-icon-edit",esriSelect:"esri-select",expandButton:"esri-icon-down",goToButton:"esri-icon-locate",refresh:"esri-icon-refresh",removeConversion:"esri-icon-close",settingsButton:"esri-icon-settings2"},m={settingsButton:!0,inputButton:!0,captureButton:!0,expandButton:!0},g=750,b=2500;let w=class extends r{constructor(e,t){super(e,t),this._popupMessage=null,this._popupTimeoutId=null,this._clipboardPopupTimeoutId=null,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={...m}}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 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{...m,...e}}reverseConvert(e,t){return this.viewModel.reverseConvert(e,t)}render(){const e=this.get("viewModel.state"),t="disabled"===e?u("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={[v.captureMode]:"capture"===this.mode,[v.disabled]:"loading"===e,[v.noBasemap]:"disabled"===e};return u("div",{class:this.classes(v.base,r)},n,t,s,i,o)}_addConversion(e){const t=e.target,o=t.options[t.options.selectedIndex]["data-format"],i=t["data-index"],s=new l({format:o});t.options.selectedIndex=0,i>=0&&this.conversions.removeAt(i),this.conversions.add(s,i)}_findSettingsFormat(){return this._settingsFormat||this.conversions.reduceRight(((e,t)=>{const o=t.format;return o.get("hasDisplayProperties")?o:e}),null)||this.formats.find((e=>e.hasDisplayProperties))}_hidePopup(){this._popupTimeoutId&&(clearTimeout(this._popupTimeoutId),this._popupTimeoutId=null),this._popupVisible=!1,this._popupMessage=null,this.scheduleRender()}_hideClipboardPopup(){this._clipboardPopupTimeoutId&&(clearTimeout(this._clipboardPopupTimeoutId),this._clipboardPopupTimeoutId=null),this._clipboardPopupVisible=!1,this.scheduleRender()}_onConvertComplete(){this._inputVisible=!1,this._coordinateInput.value=""}_onCopy(e){const t=e.currentTarget["data-conversion"].displayCoordinate;e.clipboardData.setData("text/plain",t),this._showClipboardPopup(),e.preventDefault()}_processUserInput(e){const i=t(e),s=this.viewModel;if("Enter"!==i&&i)this._badInput&&(this._badInput=!1);else{const e=this._coordinateInput["data-format"],t=this._coordinateInput.value;this._reverseConvert(t,e).then((e=>{"capture"===this.mode?s.resume():this.mode="capture",this.currentLocation=e,s.setLocation(e),this._onConvertComplete()})).catch((e=>{o.getLogger(this.declaredClass).error(e),this._showPopup(this.messages.invalidCoordinate),this._badInput=!0}))}}_reverseConvert(e,t){const i=this.viewModel;return t.reverseConvert(e).then((e=>(this._goToEnabled&&i.goToLocation(e).catch((e=>{o.getLogger(this.declaredClass).warn(e),this._showPopup(this.messages.locationOffBasemap)})),e)))}_setInputFormat(e){const t=e.target,o=t[t.options.selectedIndex]["data-format"];this._conversionFormat=o}_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&&o.position.coordinate}}),this._previewConversion.position.coordinate||t.previewConversion(this._previewConversion)}}_setSettingsFormat(e){const t=e.target,o=t[t.options.selectedIndex]["data-format"];this._settingsFormat=o,this._setPreviewConversion()}_showClipboardPopup(){this._clipboardPopupVisible?clearTimeout(this._clipboardPopupTimeoutId):this._clipboardPopupVisible=!0,this.scheduleRender(),this._popupTimeoutId=setTimeout((()=>{this._popupTimeoutId=null,this._hideClipboardPopup()}),g)}_showPopup(e,t=b){this._popupMessage=e,this._popupVisible?clearTimeout(this._popupTimeoutId):this._popupVisible=!0,this.scheduleRender(),this._popupTimeoutId=setTimeout((()=>{this._popupTimeoutId=null,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,i=`${this.id}__list-item-${t}`,s=`${e.format.label} ${o.conversionOutputSuffix}`,n=0===t,r=n||this._expanded,a=n?this._renderFirstConversion(e):this._renderTools(t,e,i),l=n&&!e.displayCoordinate?o.noLocation:e.displayCoordinate,d=u("div",{"aria-label":l,class:v.coordDisplay,"data-conversion":e,role:"listitem",tabindex:"0",title:l},l),p=this._renderOptions(this.formats.filter((t=>t!==e.format)));return r?u("li",{"aria-label":s,class:v.conversionRow,id:i,key:e,role:"group",title:s,tabindex:"0"},u("select",{"aria-controls":i,"aria-label":o.selectFormat,class:this.classes(v.esriSelect,v.rowSelect),bind:this,"data-index":t,onchange:this._addConversion,title:o.selectFormat},u("option",{"aria-label":e.format.label,selected:!0,title:e.format.label},e.format.label.toUpperCase()),p),d,a):null}_renderCopyButton(e){const t=this._clipboardPopupVisible&&this._renderClipboardPopup();return u("li",{"aria-label":this.messagesCommon.copy,bind:this,class:this.classes(v.widgetButton,v.rowButton),"data-conversion":e,onclick:this._copyCoordinateOutput,onkeydown:this._copyCoordinateOutput,oncopy:this._onCopy,role:"button",tabindex:"0",title:this.messagesCommon.copy},t,u("span",{"aria-hidden":"true",class:v.copyButton}))}_renderFirstConversion(e){const t=this.id,o={[v.expandButton]:!this._expanded,[v.collapseButton]:this._expanded},{messages:i,messagesCommon:s,multipleConversions:n,visibleElements:r}=this,a="live"===this.mode?i.captureMode:i.liveMode,l=this._expanded?s.collapse:s.expand,d=e.displayCoordinate&&"capture"===this.mode?this._renderCopyButton(e):null,p=n&&r.expandButton&&u("li",{"aria-controls":`${t}__${v.conversionList}`,"aria-label":l,bind:this,class:v.widgetButton,key:"esri-coordinate-conversion__expand-button",onclick:this._toggleExpand,onkeydown:this._toggleExpand,role:"button",tabindex:"0",title:l},u("span",{"aria-hidden":"true",class:this.classes(o)})),c=!n&&r.captureButton&&u("li",{"aria-label":a,bind:this,class:this.classes(v.widgetButton,v.modeToggle),key:"esri-coordinate-conversion__mode-toggle",onclick:this._toggleMode,onkeydown:this._toggleMode,role:"button",tabindex:"0",title:a},u("span",{"aria-hidden":"true",class:v.captureButton}));return u("ul",{class:v.toolDisplay},d,p,c)}_renderInputForm(){const e=this._conversionFormat||this.conversions.getItemAt(0).format,t=this.formats.findIndex((t=>t.name===e.name)),o=this.id,i=`${o}__${v.coordinateInput}`,s=`${o}__${v.coordinateInput}__header`,n=this._renderOptions(this.formats,!0,t),r={[v.rejectInput]:this._badInput},{messages:a,messagesCommon:l,headingLevel:p}=this;return u("div",{"aria-labelledby":s,class:v.inputForm,key:"esri-coordinate-conversion__input-form",role:"search"},u("div",{class:v.sectionHeading},u("div",{"aria-label":l.back,bind:this,class:this.classes(v.widgetButton,v.backButton),onclick:this._toggleInputVisibility,onkeydown:this._toggleInputVisibility,role:"button",tabindex:"0",title:l.back},this._renderBackIcon()),u(d,{level:p,class:v.header,id:s},a.inputCoordTitle)),u("div",{class:v.inputFormGroup},u("select",{"aria-controls":i,"aria-label":a.selectFormat,bind:this,class:this.classes(v.esriSelect,v.rowSelect),onchange:this._setInputFormat,title:a.selectFormat},n),u("input",{afterCreate:h,"aria-labelledby":s,"aria-required":"true",bind:this,class:this.classes(v.coordinateInput,v.input,r),"data-format":e,"data-node-ref":"_coordinateInput",id:i,onkeydown:this._processUserInput,placeholder:a.inputCoordTitle,role:"textbox",spellcheck:!1,title:a.inputCoordTitle,type:"text"})),u("div",{class:v.inputFormGroup},u("label",{"aria-label":a.goTo},u("input",{bind:this,checked:this._goToEnabled,onclick:this._toggleGoTo,title:a.goTo,type:"checkbox"}),a.goTo),u("button",{"aria-label":a.convert,bind:this,class:this.classes(v.convertButton,v.button),onclick:this._processUserInput,title:a.convert,type:"button"},u("span",{class:v.convertButtonSpan},a.convert))))}_renderConversionsView(){const e=`${this.id}__${v.conversionList}`,t=this._renderPrimaryTools(),o=this._renderOptions(this.formats),i=this.conversions.map(((e,t)=>this._renderConversion(e,t))).toArray(),{messages:s}=this,n=this._expanded?u("div",{class:v.conversionRow},u("select",{"aria-controls":e,"aria-label":s.addConversion,bind:this,class:this.classes(v.esriSelect,v.primarySelect),onchange:this._addConversion,title:s.addConversion},u("option",{disabled:!0,selected:!0,value:""},s.addConversion),o),t):null,r={[v.expanded]:this._expanded,[v.expandUp]:"expand-up"===this.orientation,[v.expandDown]:"expand-down"===this.orientation};return u("div",{class:this.classes(v.conversionsView,r),key:"esri-coordinate-conversion__main-view"},u("ul",{"aria-expanded":this._expanded?"true":"false",class:v.conversionList,id:e},i),n)}_renderOptions(e,t,o){const i=this.conversions.getItemAt(0);return e.map(((e,s)=>{const n=!(t||!i)&&(i.format.name===e.name||this.conversions.map((e=>e.format.name)).includes(e.name));return u("option",{"aria-label":e.label,"data-format":e,disabled:n,key:e.name,selected:s===o,value:e.label},e.label.toUpperCase())})).toArray()}_renderPopup(){return u("div",{class:v.popup,role:"alert"},this._popupMessage)}_renderClipboardPopup(){return u("div",{class:this.classes(v.popup,v.clipboardPopup),role:"alert"},this.messages.copySuccessMessage)}_renderPrimaryTools(){const{messages:e,visibleElements:t}=this,o="live"===this.mode?e.captureMode:e.liveMode,i=t.inputButton&&u("li",{bind:this,class:v.widgetButton,onclick:this._toggleInputVisibility,onkeydown:this._toggleInputVisibility,role:"button",tabindex:"0",title:e.inputCoordTitle},u("span",{"aria-hidden":"true",class:v.editButton})),s=t.captureButton&&u("li",{bind:this,class:this.classes(v.widgetButton,v.modeToggle),onclick:this._toggleMode,onkeydown:this._toggleMode,role:"button",tabindex:"0",title:o},u("span",{"aria-hidden":"true",class:v.captureButton})),n=t.settingsButton&&u("li",{bind:this,class:v.widgetButton,onclick:this._toggleSettingsVisibility,onkeydown:this._toggleSettingsVisibility,role:"button",tabindex:"0",title:e.settingsTitle},u("span",{"aria-hidden":"true",class:v.settingsButton}));return u("ul",{class:v.toolDisplay},i,s,n)}_renderSettings(){const e=this.id,t=`${e}__${v.patternInput}`,o=`${e}__${v.patternInput}__header`,i=`${e}__${v.previewCoordinate}`,s=this.formats.filter((e=>e.hasDisplayProperties)),n=this._findSettingsFormat(),r=s.indexOf(n),a=this._renderOptions(s,!0,r),l=n.get("currentPattern"),{messages:p,messagesCommon:c,headingLevel:h}=this;return u("div",{"aria-labelledby":o,class:v.settings,key:"esri-coordinate-conversion__settings"},u("div",{class:v.sectionHeading},u("div",{bind:this,class:this.classes(v.widgetButton,v.backButton),onclick:this._toggleSettingsVisibility,onkeydown:this._toggleSettingsVisibility,role:"button",tabindex:"0",title:c.back},this._renderBackIcon()),u(d,{level:h,class:v.header,id:o},p.settingsTitle)),u("div",{class:v.settingsFormGroup},u("label",{for:t},p.changeCoordinateDisplay),u("select",{"aria-label":p.selectFormat,class:v.esriSelect,bind:this,onchange:this._setSettingsFormat,title:p.selectFormat},a),u("div",{class:v.settingsFormGroupHorizontal},u("input",{"aria-controls":i,bind:this,class:this.classes(v.patternInput,v.input),id:t,oninput:this._updateCurrentPattern,spellcheck:!1,title:p.changeCoordinateDisplay,type:"text",value:l}),u("div",{"aria-controls":t,bind:this,class:v.widgetButton,onclick:this._setDefaultPattern,onkeydown:this._setDefaultPattern,role:"button",tabindex:"0",title:p.defaultPattern},u("span",{"aria-hidden":"true",class:v.refresh})))),u("div",{class:v.settingsFormGroup},u("label",null,c.preview,u("div",{class:v.previewCoordinate,id:i,tabindex:"0"},this._previewConversion.displayCoordinate))))}_renderBackIcon(){return u("span",{"aria-hidden":"true",class:_(this.container)?v.rightArrow:v.leftArrow})}_renderTools(e,t,o){const i=t.displayCoordinate&&"capture"===this.mode?this._renderCopyButton(t):null,{messages:s}=this;return u("ul",{class:v.toolDisplay,role:"listitem"},i,u("li",{"aria-controls":o,"aria-label":s.removeConversion,bind:this,class:this.classes(v.widgetButton,v.rowButton),"data-index":e,key:`${o}__${v.widgetButton}`,onclick:this._removeConversion,onkeydown:this._removeConversion,tabindex:"0",role:"button",title:s.removeConversion},u("span",{"aria-hidden":"true",class:v.removeConversion})))}_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=e.currentTarget["data-index"];this.conversions.removeAt(t)}_setDefaultPattern(e){e.stopPropagation();const t=this._findSettingsFormat();t&&(t.currentPattern=t.get("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()],w.prototype,"conversions",null),e([i()],w.prototype,"currentLocation",null),e([i()],w.prototype,"formats",null),e([i()],w.prototype,"goToOverride",null),e([i()],w.prototype,"headingLevel",void 0),e([i()],w.prototype,"label",null),e([i(),c("esri/widgets/CoordinateConversion/t9n/CoordinateConversion")],w.prototype,"messages",void 0),e([i(),c("esri/t9n/common")],w.prototype,"messagesCommon",void 0),e([i()],w.prototype,"mode",null),e([i()],w.prototype,"orientation",void 0),e([i()],w.prototype,"multipleConversions",null),e([i()],w.prototype,"locationSymbol",null),e([i()],w.prototype,"storageEnabled",null),e([i()],w.prototype,"storageType",null),e([i()],w.prototype,"view",null),e([i({type:a})],w.prototype,"viewModel",void 0),e([i()],w.prototype,"visibleElements",void 0),e([s("visibleElements")],w.prototype,"castVisibleElements",null),e([p()],w.prototype,"_copyCoordinateOutput",null),e([p()],w.prototype,"_removeConversion",null),e([p()],w.prototype,"_setDefaultPattern",null),e([p()],w.prototype,"_toggleExpand",null),e([p()],w.prototype,"_toggleInputVisibility",null),e([p()],w.prototype,"_toggleMode",null),e([p()],w.prototype,"_toggleSettingsVisibility",null),w=e([n("esri.widgets.CoordinateConversion")],w);const y=w;export{y as default};