@doegis/core/widgets/Popup/PopupViewModel.js

DOE GIS API

import{_ as e}from"../../chunks/tslib.es6.js";import"../../geometry.js";import t from"../../Graphic.js";import"../../symbols.js";import s from"../../core/Collection.js";import i from"../../core/Error.js";import r from"../../core/Handles.js";import o from"../../core/Logger.js";import{unwrap as a}from"../../core/maybe.js";import{watch as n,when as l,sync as h}from"../../core/reactiveUtils.js";import{property as u}from"../../core/accessorSupport/decorators/property.js";import"../../core/accessorSupport/ensureType.js";import"../../core/arrayUtils.js";import{subclass as c}from"../../core/accessorSupport/decorators/subclass.js";import{geographicToWebMercator as d}from"../../geometry/support/webMercatorUtils.js";import p from"../../layers/Layer.js";import{fallbackObjectIDAttribute as g}from"../../layers/LayerConstants.js";import f from"../../support/actions/ActionBase.js";import m from"../../support/actions/ActionButton.js";import y from"../../support/actions/ActionToggle.js";import{getDisplayedSymbol as w}from"../../symbols/support/symbolUtils.js";import{ViewEventPriorities as F}from"../../views/input/InputManager.js";import{highlightsSupported as v}from"../../views/support/layerViewUtils.js";import _ from"../Feature/FeatureViewModel.js";import{zoomToFeature as b,zoomToClusteredFeatures as C,browseClusteredFeatures as P}from"./actions.js";import{triggerAction as E,isClusterFeature as A,getSelectedTarget as V,removeClusteredFeaturesForBrowsing as M,displayClusterExtent as j,browseAggregateFeatures as L,getPointFromGeometry as O}from"./actionUtils.js";import T from"../support/AnchorElementViewModel.js";import{GoToMixin as I}from"../support/GoTo.js";import x from"../../symbols/SimpleFillSymbol.js";import S from"../../geometry/Point.js";const B=s.ofType({key:"type",defaultKeyValue:"button",base:f,typeMap:{button:m,toggle:y}}),R=()=>[b.clone()],G=()=>[C.clone(),P.clone()];let z=class extends(I(T)){get isLoadingFeature(){return this.featureViewModels.some((e=>e.waitingForContent))}constructor(e){super(e),this._handles=new r,this._pendingPromises=new Set,this._fetchFeaturesController=null,this._highlightSelectedFeaturePromise=null,this._highlightActiveFeaturePromise=null,this._selectedClusterFeature=null,this.featurePage=null,this.actions=new B,this.activeFeature=null,this.defaultPopupTemplateEnabled=!1,this.autoCloseEnabled=!1,this.autoOpenEnabled=!0,this.browseClusterEnabled=!1,this.content=null,this.featuresPerPage=20,this.featureViewModelAbilities=null,this.featureViewModels=[],this.highlightEnabled=!0,this.includeDefaultActions=!0,this.selectedClusterBoundaryFeature=new t({symbol:new x({outline:{width:1.5,color:"cyan"},style:"none"})}),this.title=null,this.updateLocationEnabled=!1,this.view=null,this.visible=!1,this.zoomFactor=4,this.zoomToLocation=null}initialize(){this._handles.add([n((()=>[this.autoOpenEnabled,this.view]),(()=>this._autoOpenEnabledChange())),this.on("view-change",(()=>this._autoClose())),n((()=>[this.highlightEnabled,this.selectedFeature,this.visible,this.view]),(()=>this._highlightSelectedFeature())),n((()=>[this.highlightEnabled,this.activeFeature,this.visible,this.view]),(()=>this._highlightActiveFeature())),n((()=>this.view?.animation?.state),(e=>this._animationStateChange(e))),n((()=>this.location),(e=>this._locationChange(e))),n((()=>this.selectedFeature),(e=>this._selectedFeatureChange(e))),n((()=>[this.selectedFeatureIndex,this.featureCount,this.featuresPerPage]),(()=>this._selectedFeatureIndexChange())),n((()=>[this.featurePage,this.selectedFeatureIndex,this.featureCount,this.featuresPerPage,this.featureViewModels]),(()=>this._setGraphicOnFeatureViewModels())),n((()=>this.featureViewModels),(()=>this._featureViewModelsChange())),this.on("trigger-action",(e=>E({event:e,view:this.view}))),l((()=>!this.waitingForResult),(()=>this._waitingForResultChange()),h),n((()=>[this.features,this.view?.map,this.view?.spatialReference]),(()=>this._updateFeatureVMs())),n((()=>this.view?.scale),(()=>this._viewScaleChange())),l((()=>!this.visible),(()=>this.browseClusterEnabled=!1)),n((()=>this.browseClusterEnabled),(e=>e?this.enableClusterBrowsing():this.disableClusterBrowsing()))])}destroy(){this._cancelFetchingFeatures(),this._handles.destroy(),this._pendingPromises.clear(),this.browseClusterEnabled=!1,this.view=null}get active(){return!(!this.visible||this.waitingForResult)}get allActions(){const e=this._get("allActions")||new B;e.removeAll();const{actions:t,defaultActions:s,defaultPopupTemplateEnabled:i,includeDefaultActions:r,selectedFeature:o}=this,a=r?s.concat(t):t,n=o&&("function"==typeof o.getEffectivePopupTemplate&&o.getEffectivePopupTemplate(i)||o.popupTemplate),l=n&&n.actions,h=n&&n.overwriteActions?l:l?l.concat(a):a;return h&&h.filter(Boolean).forEach((t=>e.add(t))),e}get defaultActions(){const e=this._get("defaultActions")||new B;return e.removeAll(),e.addMany(A(this.selectedFeature)?G():R()),e}get featureCount(){return this.features.length}get features(){return this._get("features")||[]}set features(e){const t=e||[];this._set("features",t);const{pendingPromisesCount:s,promiseCount:i,selectedFeatureIndex:r}=this,o=i&&t.length;o&&s&&-1===r?this.selectedFeatureIndex=0:o&&-1!==r||(this.selectedFeatureIndex=t.length?0:-1)}get location(){return this._get("location")||null}set location(e){let t=e;const s=this.view?.spatialReference?.isWebMercator;e&&e?.spatialReference?.isWGS84&&s&&(t=d(e)),this._set("location",t)}get pendingPromisesCount(){return this._pendingPromises.size}get waitingForResult(){return!(!(!!this._fetchFeaturesController||this.pendingPromisesCount>0)||0!==this.featureCount)}get promiseCount(){return this.promises.length}get promises(){return this._get("promises")||[]}set promises(e){if(this._pendingPromises.clear(),this.features=[],!Array.isArray(e)||!e.length)return this._set("promises",[]),void this.notifyChange("pendingPromisesCount");this._set("promises",e),(e=e.slice(0)).forEach((e=>{this._pendingPromises.add(e);const t=t=>{this._pendingPromises.has(e)&&this._updateFeatures(t),this._updatePendingPromises(e)},s=()=>this._updatePendingPromises(e);e.then(t,s)})),this.notifyChange("pendingPromisesCount")}get selectedFeature(){const{features:e,selectedFeatureIndex:t}=this;if(-1===t)return null;return e[t]||null}get selectedFeatureIndex(){const e=this._get("selectedFeatureIndex");return"number"==typeof e?e:-1}set selectedFeatureIndex(e){const{featureCount:t}=this;e=isNaN(e)||e<-1||!t?-1:(e+t)%t,this.activeFeature=null,this._set("selectedFeatureIndex",e)}get selectedFeatureViewModel(){return this.featureViewModels[this.selectedFeatureIndex]||null}get state(){return this.get("view.ready")?"ready":"disabled"}centerAtLocation(){const{view:e}=this,t=V(this);return t&&e?this.callGoTo({target:{target:t,scale:e.scale}}):Promise.reject(new i("center-at-location:invalid-target-or-view","Cannot center at a location without a target and view.",{target:t,view:e}))}zoomTo(e){return this.callGoTo(e)}clear(){this.set({promises:[],features:[],content:null,title:null,location:null,activeFeature:null})}fetchFeatures(e,t){const{view:s}=this;if(!s||!e)throw new i("fetch-features:invalid-screenpoint-or-view","Cannot fetch features without a screenPoint and view.",{screenPoint:e,view:s});return s.fetchPopupFeatures(e,{event:t&&t.event,defaultPopupTemplateEnabled:this.defaultPopupTemplateEnabled,signal:t&&t.signal})}open(e){const t={updateLocationEnabled:!1,promises:[],fetchFeatures:!1,...e,visible:!0},{fetchFeatures:s}=t;delete t.fetchFeatures,s&&this._setFetchFeaturesPromises(t.location);const i=["actionsMenuOpen","collapsed","featureMenuOpen"];for(const r of i)delete t[r];this.set(t)}triggerAction(e){const t=this.allActions.getItemAt(e);t&&!t.disabled&&this.emit("trigger-action",{action:t})}next(){return this.selectedFeatureIndex=this.selectedFeatureIndex+1,this}previous(){return this.selectedFeatureIndex=this.selectedFeatureIndex-1,this}disableClusterBrowsing(){M(this),this._clearBrowsedClusterGraphics()}async enableClusterBrowsing(){const{view:e,selectedFeature:t}=this;"2d"===e?.type?A(t)?(await j(this),await L(this)):o.getLogger(this.declaredClass).warn("enableClusterBrowsing:invalid-selectedFeature: Selected feature must represent an aggregate/cluster graphic.",t):o.getLogger(this.declaredClass).warn("enableClusterBrowsing:invalid-view: View must be 2d MapView.",t)}_animationStateChange(e){this.zoomToLocation||(b.disabled="waiting-for-target"===e)}_clearBrowsedClusterGraphics(){const e=this.view?.graphics;e&&(e.remove(this.selectedClusterBoundaryFeature),this._selectedClusterFeature&&e.remove(this._selectedClusterFeature)),this._selectedClusterFeature=null,this.selectedClusterBoundaryFeature.geometry=null}_viewScaleChange(){if(A(this.selectedFeature))return this.browseClusterEnabled=!1,this.visible=!1,void this.clear();this.browseClusterEnabled&&(this.features=this.selectedFeature?[this.selectedFeature]:[])}_locationChange(e){const{selectedFeature:t,updateLocationEnabled:s}=this;s&&e&&(!t||t.geometry)&&this.centerAtLocation()}_selectedFeatureIndexChange(){this.featurePage=this.featureCount>1?Math.floor(this.selectedFeatureIndex/this.featuresPerPage)+1:null}_featureViewModelsChange(){this.featurePage=this.featureCount>1?1:null}_setGraphicOnFeatureViewModels(){const{features:e,featureCount:t,featurePage:s,featuresPerPage:i,featureViewModels:r}=this;if(null===s)return;const o=((s-1)*i+t)%t,a=o+i;r.slice(o,a).forEach(((t,s)=>{t&&!t.graphic&&(t.graphic=e[o+s])}))}async _selectedFeatureChange(e){const{location:t,updateLocationEnabled:s,view:i}=this;if(e&&i){if(this.browseClusterEnabled){if(this._selectedClusterFeature&&(i.graphics.remove(this._selectedClusterFeature),this._selectedClusterFeature=null),A(e))return;return e.symbol=await w(e),this._selectedClusterFeature=e,void i.graphics.add(this._selectedClusterFeature)}!s&&t||!e.geometry?s&&!e.geometry&&this.centerAtLocation().then((()=>{const e=i.center?.clone();e&&(this.location=e)})):this.location=a(O(e.geometry))}}_waitingForResultChange(){!this.featureCount&&this.promises&&(this.visible=!1)}_setFetchFeaturesPromises(e){return this._fetchFeaturesWithController(this._getScreenPoint(e||this.location)).then((e=>{const{clientOnlyGraphics:t,promisesPerLayerView:s}=e,i=Promise.resolve(t),r=s.map((e=>e.promise));this.promises=[i,...r]}))}_destroyFeatureVMs(){this.featureViewModels.forEach((e=>e&&!e.destroyed&&e.destroy())),this._set("featureViewModels",[])}_updateFeatureVMs(){const{selectedFeature:e,features:t,featureViewModels:s}=this;if(A(e)||(this.browseClusterEnabled=!1),this._destroyFeatureVMs(),!t||!t.length)return;const i=s.slice(0),r=[];t.forEach(((t,s)=>{if(!t)return;let o=null;if(i.some(((e,s)=>(e&&e.graphic===t&&(o=e,i.splice(s,1)),!!o))),o)r[s]=o;else{const i=new _({abilities:this.featureViewModelAbilities,defaultPopupTemplateEnabled:this.defaultPopupTemplateEnabled,spatialReference:this.view?.spatialReference,graphic:t===e?t:null,map:this.view?.map,view:this.view});r[s]=i}})),i.forEach((e=>e&&!e.destroyed&&e.destroy())),this._set("featureViewModels",r)}_getScreenPoint(e){const{view:t}=this;return t&&e&&"function"==typeof t.toScreen?t.toScreen(e):null}_autoOpenEnabledChange(){const e="auto-fetch-features",{_handles:t,autoOpenEnabled:s}=this;if(t.remove(e),s&&this.view){const s=this.view.on("click",(e=>{"mouse"===e.pointerType&&0!==e.button||this._fetchFeaturesAndOpen(e)}),F.WIDGET);t.add(s,e)}}_cancelFetchingFeatures(){const e=this._fetchFeaturesController;e&&e.abort(),this._fetchFeaturesController=null,this.notifyChange("waitingForResult")}_fetchFeaturesWithController(e,t){this._cancelFetchingFeatures();const s=new AbortController,{signal:i}=s;this._fetchFeaturesController=s,this.notifyChange("waitingForResult");const r=this.fetchFeatures(e,{signal:i,event:t});return r.catch((()=>{})).then((()=>{this._fetchFeaturesController=null,this.notifyChange("waitingForResult")})),r}_fetchFeaturesAndOpen(e){const{screenPoint:t,mapPoint:s}=e,{view:i}=this;this._fetchFeaturesWithController(t,e).then((e=>{const{clientOnlyGraphics:t,promisesPerLayerView:r,location:o}=e,a=[Promise.resolve(t),...r.map((e=>e.promise))];return i?.popup?.open({location:o||s,promises:a}),e}))}_updatePendingPromises(e){e&&this._pendingPromises.has(e)&&(this._pendingPromises.delete(e),this.notifyChange("pendingPromisesCount"))}_autoClose(){this.autoCloseEnabled&&(this.visible=!1)}async _getLayerView(e,t){return await e.when(),e.whenLayerView(t)}_getHighlightLayer(e){const{layer:t,sourceLayer:s}=e;return s&&"layer"in s&&s.layer?s.layer:"map-notes"===s?.type||"subtype-group"===s?.type?s:t}_getHighlightTarget(e,t){const s="imagery"===t.type?void 0:"objectIdField"in t?t.objectIdField||g:null,i=e.attributes;return i&&s&&i[s]||e}async _highlightActiveFeature(){const e="highlight-active-feature";this._handles.remove(e);const{highlightEnabled:t,view:s,activeFeature:i,visible:r}=this;if(!(i&&s&&t&&r))return;const o=this._getHighlightLayer(i);if(!(o&&o instanceof p))return;const a=this._getLayerView(s,o);this._highlightActiveFeaturePromise=a;const n=await a;if(!(n&&v(n)&&this._highlightActiveFeaturePromise===a&&this.activeFeature&&this.highlightEnabled))return;const l=n.highlight(this._getHighlightTarget(i,o));this._handles.add(l,e)}async _highlightSelectedFeature(){const e="highlight-selected-feature";this._handles.remove(e);const{selectedFeature:t,highlightEnabled:s,view:i,visible:r}=this;if(!(t&&i&&s&&r))return;const o=this._getHighlightLayer(t);if(!(o&&o instanceof p))return;const a=this._getLayerView(i,o);this._highlightSelectedFeaturePromise=a;const n=await a;if(!(n&&v(n)&&this._highlightSelectedFeaturePromise===a&&this.selectedFeature&&this.highlightEnabled&&this.visible))return;const l=n.highlight(this._getHighlightTarget(t,o));this._handles.add(l,e)}_updateFeatures(e){const{features:t}=this;if(!e||!e.length)return;if(!t.length)return void(this.features=e);const s=e.filter((e=>!t.includes(e)));this.features=t.concat(s)}};e([u()],z.prototype,"featurePage",void 0),e([u()],z.prototype,"isLoadingFeature",null),e([u({type:B})],z.prototype,"actions",void 0),e([u({readOnly:!0})],z.prototype,"active",null),e([u()],z.prototype,"activeFeature",void 0),e([u({readOnly:!0})],z.prototype,"allActions",null),e([u({type:Boolean})],z.prototype,"defaultPopupTemplateEnabled",void 0),e([u()],z.prototype,"autoCloseEnabled",void 0),e([u()],z.prototype,"autoOpenEnabled",void 0),e([u()],z.prototype,"browseClusterEnabled",void 0),e([u()],z.prototype,"content",void 0),e([u({type:B,readOnly:!0})],z.prototype,"defaultActions",null),e([u({readOnly:!0})],z.prototype,"featureCount",null),e([u()],z.prototype,"features",null),e([u()],z.prototype,"featuresPerPage",void 0),e([u()],z.prototype,"featureViewModelAbilities",void 0),e([u({readOnly:!0})],z.prototype,"featureViewModels",void 0),e([u()],z.prototype,"highlightEnabled",void 0),e([u()],z.prototype,"includeDefaultActions",void 0),e([u({type:S})],z.prototype,"location",null),e([u({readOnly:!0})],z.prototype,"pendingPromisesCount",null),e([u({readOnly:!0})],z.prototype,"selectedClusterBoundaryFeature",void 0),e([u({readOnly:!0})],z.prototype,"waitingForResult",null),e([u({readOnly:!0})],z.prototype,"promiseCount",null),e([u()],z.prototype,"promises",null),e([u({value:null,readOnly:!0})],z.prototype,"selectedFeature",null),e([u({value:-1})],z.prototype,"selectedFeatureIndex",null),e([u({readOnly:!0})],z.prototype,"selectedFeatureViewModel",null),e([u({readOnly:!0})],z.prototype,"state",null),e([u()],z.prototype,"title",void 0),e([u()],z.prototype,"updateLocationEnabled",void 0),e([u()],z.prototype,"view",void 0),e([u()],z.prototype,"visible",void 0),e([u()],z.prototype,"zoomFactor",void 0),e([u()],z.prototype,"zoomToLocation",void 0),e([u()],z.prototype,"centerAtLocation",null),z=e([c("esri.widgets.Popup.PopupViewModel")],z);const H=z;export{H as default};