ElevationProfile.js 12 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 t}from"../chunks/tslib.es6.js";import{createTask as e}from"../core/asyncUtils.js";import{isSome as s,destroyMaybe as i,isNone as r,applySome as o,abortMaybe as n}from"../core/maybe.js";import{memoize as a}from"../core/memoize.js";import{createAbortError as l}from"../core/promiseUtils.js";import{watch as h,initial as c}from"../core/reactiveUtils.js";import{property as d}from"../core/accessorSupport/decorators/property.js";import"../core/arrayUtils.js";import"../core/accessorSupport/ensureType.js";import{subclass as p}from"../core/accessorSupport/decorators/subclass.js";import u from"./Widget.js";import{CSS as m}from"./ElevationProfile/css.js";import _ from"./ElevationProfile/ElevationProfileViewModel.js";import C from"./ElevationProfile/ElevationProfileVisibleElements.js";import{Legend as v}from"./ElevationProfile/components/Legend.js";import{SettingsButton as g}from"./ElevationProfile/components/SettingsButton.js";import{createChart as f}from"./ElevationProfile/support/chartUtils.js";import{ElevationProfileErrorState as y,getConfig as w,ElevationProfileState as b}from"./ElevationProfile/support/constants.js";import{onResize as k}from"./support/widgetUtils.js";import{messageBundle as S}from"./support/decorators/messageBundle.js";import{tsx as B}from"./support/jsxFactory.js";var M;!function(t){t.Sketch="sketch",t.SketchCancel="sketch-cancel",t.SketchDone="sketch-done",t.Select="select",t.SelectCancel="select-cancel"}(M||(M={}));const P=[{type:M.Select},{type:M.Sketch}],E={[y.None]:null,[y.NoValidInput]:"noProfile",[y.NoVisibleProfiles]:"noProfile",[y.RefinedButNoChartData]:"noProfile",[y.TooComplex]:"tooComplex",[y.UnknownError]:"unknown",[y.InvalidGeometry]:"invalidGeometry",[y.InvalidElevationInfo]:"invalidElevationInfo"};let j=class extends u{constructor(t,e){super(t,e),this.viewModel=null,this.visibleElements=new C,this.iconClass=m.widgetIcon,this.messages=null,this.messagesCommon=null,this.messagesUnits=null,this._chartContainer=null,this._chart=null,this._chartInitTask=null,this._chartIsRefined=!1,this._width=0,this._zoomOutButtonVisible=!1,this._getChartUpdateParamsMemoized=a(((t,e,s,i)=>({chart:t,data:e,stationary:s,messages:i}))),this._getDetailsPropsMemoized=a(((t,e)=>({effectiveUnits:t,profiles:e}))),t?.viewModel||(this._defaultViewModel=new _({view:t?.view}),this.viewModel=this._defaultViewModel)}initialize(){this._legend=new v(this._legendProps),this._settingsButton=new g(this._settingsButtonProps),this.addHandles([h((()=>this._legendProps),(t=>this._legend.set(t))),h((()=>this._settingsButtonProps),(t=>this._settingsButton.set(t)))])}postInitialize(){this.addHandles([h((()=>({container:this._chartContainer,width:this._width})),(({container:t,width:e})=>{this._destroyChart(),s(t)&&e>0&&this._initializeChart(t)}),c),h((()=>this._chartUpdateParams),(()=>this._updateChart(this._chartUpdateParams)),c)])}destroy(){this._destroyChart(),s(this._defaultViewModel)&&this.viewModel!==this._defaultViewModel&&this._defaultViewModel.destroy(),this._legend=i(this._legend),this._settingsButton=i(this._settingsButton)}get view(){return this.viewModel.view}set view(t){this.viewModel.view=t}get input(){return this.viewModel.input}set input(t){this.viewModel.input=t}get profiles(){return this.viewModel.profiles}set profiles(t){this.viewModel.profiles=t}get unitOptions(){return this.viewModel.unitOptions}set unitOptions(t){this.viewModel.unitOptions=t}get unit(){return this.viewModel.unit}set unit(t){this.viewModel.unit=t}get geodesicDistanceThreshold(){return this.viewModel.geodesicDistanceThreshold}set geodesicDistanceThreshold(t){this.viewModel.geodesicDistanceThreshold=t}get label(){return this.messages?.widgetLabel??""}set label(t){this._overrideIfSome("label",t)}get visible(){return this.viewModel.visible}set visible(t){this.viewModel.visible=t}get _portrait(){return this._width<w().portraitModePixelBreakpoint}get _chartUpdateParams(){const t=this.view;return this._getChartUpdateParamsMemoized(this._chart,this.viewModel.chartData,!s(t)||t.stationary,this._chartMessages)}get _chartMessages(){return{...this.messagesUnits,...this.messages}}get _legendProps(){return this._getDetailsPropsMemoized(this.viewModel.effectiveUnits,this._profilesArray)}get _profilesArray(){return this.profiles.toArray()}get _settingsButtonProps(){return{viewModel:this.viewModel,visibleElements:this.visibleElements}}render(){const{viewModel:t,visible:e}=this;return B("div",{key:this,class:this.classes({[m.base]:e,[m.esriWidget]:e,[m.esriWidgetDisabled]:e&&"disabled"===t.state,[m.portrait]:this._portrait,[m.refined]:1===t.progress}),"aria-label":this.messages.widgetLabel,afterCreate:t=>{this.addHandles(k(t,(t=>{this._width=t.contentRect.width})))}},e&&this._renderContentForState())}_renderContentForState(){switch(this.viewModel.state){case b.Ready:return this._renderContentForReadyState();case b.Selecting:return this._renderContentForSelectingState();case b.Creating:return this._renderContentForCreatingState();case b.Selected:return this._renderContentForSelectedState();case b.Created:return this._renderContentForCreatedState();case b.Disabled:return this._renderContentForReadyState()}}_renderContentForReadyState(){const{sketchButton:t,selectButton:e}=this.visibleElements,s=this.messages;let i;return i=t&&e?s.readyPrompt:t?s.readyPromptCreateOnly:e?s.readyPromptSelectOnly:s.errors?.noProfile,this._renderContent({prompt:i,chart:!1,actions:P})}_renderContentForSelectingState(){const t=this.view;if(r(t))return null;const e=this.messages[`selectingPrompt-${t.type}`];return this._renderContent({prompt:e,chart:!1,actions:[{type:M.SelectCancel}]})}_renderContentForCreatingState(){const{view:t,viewModel:e}=this;if(r(t))return null;const s=e.hasVertices?[{type:M.SketchCancel},{type:M.SketchDone,disabled:!e.tool.interaction.canStopCreating}]:[{type:M.Select},{type:M.Sketch,disabled:!0}];if(e.errorState===y.NoValidInput){const e=this.messages[`creatingPrompt-${t.type}`];return this._renderContent({chart:!1,actions:s,prompt:e})}const i=this._getErrorMessage();return i?this._renderContent({chart:!1,actions:s,prompt:i}):this._renderContent({chart:!0,actions:s})}_renderContentForSelectedState(){const t=this._getErrorMessage();return t?this._renderContent({chart:!1,actions:P,prompt:t}):this._renderContent({chart:!0,actions:P})}_renderContentForCreatedState(){const t=this._getErrorMessage();return t?this._renderContent({chart:!1,actions:P,prompt:t}):this._renderContent({chart:!0,actions:P})}_getErrorMessage(){const t=E[this.viewModel.errorState];return this.messages?.errors?.[t]}_renderContent(t){const e=s(t.prompt)?this._renderPrompt(t.prompt):t.chart&&this._renderChart(),i=s(this.viewModel.input);return[B("header",{key:"header",class:m.header},this._zoomOutButtonVisible&&this._renderZoomOutButton(),this.visibleElements.clearButton&&i&&this._renderClearButton(),this.visibleElements.settingsButton&&this._settingsButton.render()),B("div",{class:m.mainContainer},e),this.visibleElements.legend&&this._legend.render(),this._renderActions(t)]}_renderZoomOutButton(){return B("button",{key:"zoom-out",class:m.zoomOutButton,bind:this,onclick:this._onZoomOutButtonClick,title:this.messages.zoomOut,type:"button"})}_onZoomOutButtonClick(){o(this._chart,(t=>t.zoomOut()))}_renderClearButton(){return B("button",{key:"clear-profile",class:m.clearButton,bind:this,onclick:this._onClearButtonClick,title:this.messages.clearProfile,type:"button"})}_onClearButtonClick(){this.viewModel.clear()}_renderPrompt(t){return[B("div",{key:"prompt-container",bind:this,class:m.promptContainer},B("p",null,t))]}_renderChart(){if(!this.visibleElements.chart)return[B("div",{key:"empty-chart-container",class:m.chartContainer})];const t=this._chartIsRefined||this._canRenderChart();if(!t)return[this._renderSpinner({size:"large"}),B("div",{key:"chart-container-empty",class:m.chartContainer})];const{chartData:e,progress:i}=this.viewModel;return[s(e)&&i>0&&i<1&&this._renderSpinner({size:t?"small":"large"}),B("div",{key:"chart-container",bind:this,class:m.chartContainer,afterCreate:this._onChartContainerAfterCreate,afterRemoved:this._onChartContainerRemoved})]}_renderSpinner(t){return B("div",{key:"spinner",class:this.classes(m.chartSpinner,{[m.chartSpinnerSmall]:"small"===t.size}),afterCreate:this._onSpinnerAfterCreate,exitAnimation:this._onSpinnerExit})}_onSpinnerAfterCreate(t){requestAnimationFrame((()=>t.classList.add(m.chartSpinnerVisible)))}_onSpinnerExit(t,e){t.classList.remove(m.chartSpinnerVisible),setTimeout(e,200)}_canRenderChart(){const t=this.viewModel.chartData;if(r(t))return!1;if(!this.viewModel.inputIsSketched)return t.refined;let e=0;for(const{samples:i}of t.lines)e+=s(i)?i.length:0;return t.refined||e<=w().largeChartSamples}_renderActions({actions:t}){const e=t.map((t=>{switch(t.type){case M.Sketch:return this.visibleElements.sketchButton&&this._renderAction({action:t,onClick:this._onSketchButtonClick,className:m.sketchButton,label:this.messages.sketchButtonLabel});case M.SketchCancel:return this.visibleElements.sketchButton&&this._renderAction({action:t,onClick:this._onCancelButtonClick,className:m.sketchCancelButton,label:this.messagesCommon.cancel});case M.SketchDone:return this.visibleElements.sketchButton&&this._renderAction({action:t,onClick:this._onDoneButtonClick,className:m.sketchDoneButton,label:this.messagesCommon.done});case M.Select:return this.visibleElements.selectButton&&this._renderAction({action:t,onClick:this._onSelectButtonClick,className:m.selectButton,label:this.messages.selectButtonLabel});case M.SelectCancel:return this.visibleElements.selectButton&&this._renderAction({action:t,onClick:this._onCancelButtonClick,className:m.selectCancelButton,label:this.messagesCommon.cancel})}})).filter(Boolean);return e.length?B("footer",{key:"footer",class:m.footer},e):null}_renderAction({action:t,onClick:e,className:s,label:i}){return B("button",{key:`action-${t.type}`,class:this.classes(m.actionButton,s,{[m.buttonDisabled]:t.disabled}),bind:this,disabled:t.disabled,onclick:e,type:"button"},i)}_onSketchButtonClick(){this.viewModel.start({mode:"sketch"})}_onSelectButtonClick(){this.viewModel.start({mode:"select"})}_onCancelButtonClick(){this.viewModel.cancel()}_onDoneButtonClick(){this.viewModel.stop()}_updateChart(t){const{data:e,chart:i,messages:o,stationary:n}=t;!r(i)&&!r(o)&&n&&this._canRenderChart()&&(i.update(t),this._chartIsRefined=s(e)&&e.refined)}_onChartContainerAfterCreate(t){this._chartContainer=t}_onChartContainerRemoved(){this._chartContainer=null}_initializeChart(t){n(this._chartInitTask),this._chartInitTask=e((async e=>{const s=await f({container:t,abortOptions:{signal:e},onRangeChange:(t,e)=>{this._zoomOutButtonVisible=1!==t||1!==e},onCursorPositionChange:t=>{this.viewModel.hoveredChartPosition=t}});if(e.aborted)throw i(s),l();this._chart=s,this._updateChart(this._chartUpdateParams)}))}_destroyChart(){this._chartInitTask=n(this._chartInitTask),this._chart=i(this._chart),this._chartIsRefined=!1}get test(){return{projector:this._projector,chart:this._chart}}};t([d({type:_})],j.prototype,"viewModel",void 0),t([d()],j.prototype,"view",null),t([d()],j.prototype,"input",null),t([d()],j.prototype,"profiles",null),t([d()],j.prototype,"unitOptions",null),t([d()],j.prototype,"unit",null),t([d()],j.prototype,"geodesicDistanceThreshold",null),t([d({type:C,nonNullable:!0})],j.prototype,"visibleElements",void 0),t([d()],j.prototype,"iconClass",void 0),t([d()],j.prototype,"label",null),t([d()],j.prototype,"visible",null),t([d(),S("esri/widgets/ElevationProfile/t9n/ElevationProfile")],j.prototype,"messages",void 0),t([d(),S("esri/t9n/common")],j.prototype,"messagesCommon",void 0),t([d(),S("esri/core/t9n/Units")],j.prototype,"messagesUnits",void 0),t([d()],j.prototype,"_chartContainer",void 0),t([d()],j.prototype,"_chart",void 0),t([d()],j.prototype,"_chartInitTask",void 0),t([d()],j.prototype,"_chartIsRefined",void 0),t([d()],j.prototype,"_settingsButton",void 0),t([d()],j.prototype,"_legend",void 0),t([d()],j.prototype,"_width",void 0),t([d()],j.prototype,"_portrait",null),t([d()],j.prototype,"_zoomOutButtonVisible",void 0),t([d()],j.prototype,"_chartUpdateParams",null),t([d()],j.prototype,"_chartMessages",null),t([d()],j.prototype,"_legendProps",null),t([d()],j.prototype,"_profilesArray",null),t([d()],j.prototype,"_settingsButtonProps",null),j=t([p("esri.widgets.ElevationProfile")],j);const I=j;export{I as default};