@arcgis/core/widgets/Features/FeaturesViewModel.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"../../Graphic.js";import{isSome as i}from"../../core/arrayUtils.js";import s from"../../core/Error.js";import r from"../../core/Logger.js";import{debounce as o,isAbortError as a}from"../../core/promiseUtils.js";import n from"../../core/ReactiveSet.js";import{watch as l,when as u,sync as h}from"../../core/reactiveUtils.js";import{property as c}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import{subclass as p}from"../../core/accessorSupport/decorators/subclass.js";import d from"../../geometry/Point.js";import{project as g,initializeProjection as f}from"../../geometry/projectionUtils.js";import m from"../../geometry/SpatialReference.js";import{getPointFromGeometry as y}from"../../geometry/support/geometryUtils.js";import{geographicToWebMercator as w}from"../../geometry/support/webMercatorUtils.js";import{fallbackObjectIDAttribute as F}from"../../layers/LayerConstants.js";import v from"../../symbols/SimpleFillSymbol.js";import{getDisplayedSymbol as _}from"../../symbols/support/symbolUtils.js";import{system as b}from"../../time/constants.js";import{highlightsSupported as C}from"../../views/support/layerViewUtils.js";import P from"../Feature/FeatureViewModel.js";import{ActionsCollection as M,zoomToClusteredFeatures as E,browseClusteredFeatures as V,zoomToFeature as j}from"../Popup/actions.js";import{triggerAction as L,isClusterFeature as A,getSelectedTarget as I,removeClusteredFeaturesForBrowsing as R,displayClusterExtent as x,browseAggregateFeatures as O}from"../Popup/actionUtils.js";import T from"../support/AnchorElementViewModel.js";import S from"../support/GoTo.js";const B="location-scale-handle",H=()=>[j.clone()],U=()=>[E.clone(),V.clone()];let G=null;function Z(e,t){return"building-scene"===e||"map-image"===e||"tile"===e||"imagery"===e||"2d"===t&&"imagery-tile"===e}let z=class extends(S(T)){constructor(e){super(e),this._pendingPromises=new n,this._fetchFeaturesController=null,this._highlightPromises={"highlight-active-feature":null,"highlight-selected-feature":null},this._selectedClusterFeature=null,this.actions=new M,this.activeFeature=null,this.autoCloseEnabled=!1,this.browseClusterEnabled=!1,this.content=null,this.defaultPopupTemplateEnabled=!1,this.featurePage=null,this.featuresPerPage=20,this.featureMenuOpen=!1,this.featureMenuTitle=null,this.featureViewModelAbilities=null,this.featureViewModels=[],this.highlightEnabled=!0,this.includeDefaultActions=!0,this.initialDisplayMode="feature",this.selectedClusterBoundaryFeature=new t({symbol:new v({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,this._debouncedLocationUpdate=o((async e=>{const{spatialReference:t}=this,i=this.selectedFeature?.geometry?.type,s=this.location??e;if(i&&"mesh"!==i&&t&&s&&this.selectedFeature)if("point"!==i)try{const e=this.selectedFeature;let i=e.geometry;const r=this._getHighlightLayer(e),o=e.getObjectId();if(!r||!this.view)return;if(o){const e=this.view?.allLayerViews.find((e=>e.layer.uid===r.uid));if(!e||!("queryFeatures"in e))return;const s=e.createQuery();s.outSpatialReference=t,s.objectIds=[o],s.returnGeometry=!0;const{features:a}=await e.queryFeatures(s);i=a[0]?.geometry}if(!i||"mesh"===i.type)return;i=g(i,t),G||(G=await Promise.all([await import("../../geometry/operators/intersectsOperator.js"),await import("../../geometry/operators/proximityOperator.js")]));const[a,n]=G;if(!a.execute(i,s)){const t=n.getNearestCoordinate(i,s).coordinate??s;this.selectedFeature===e&&(this.location=t)}}catch(o){a(o)||r.getLogger(this).error(o)}else this.location=y(this.selectedFeature.geometry)??s}))}initialize(){this.addHandles([this.on("view-change",(()=>this._autoClose())),l((()=>[this.highlightEnabled,this.selectedFeature,this.visible,this.view]),(()=>this._highlightSelectedFeature())),l((()=>[this.highlightEnabled,this.activeFeature,this.visible,this.view]),(()=>this._highlightActiveFeature())),l((()=>this.view?.animation?.state),(e=>this._animationStateChange(e))),l((()=>this.location),(e=>this._locationChange(e))),l((()=>this.selectedFeature),(e=>this._selectedFeatureChange(e))),l((()=>[this.selectedFeatureIndex,this.featureCount,this.featuresPerPage]),(()=>this._selectedFeatureIndexChange())),l((()=>[this.featurePage,this.selectedFeatureIndex,this.featureCount,this.featuresPerPage,this.featureViewModels]),(()=>this._setGraphicOnFeatureViewModels())),l((()=>this.featureViewModels),(()=>this._featureViewModelsChange())),this.on("trigger-action",(e=>L({event:e,viewModel:this,view:this.view}))),u((()=>!this.waitingForResult),(()=>this._waitingForResultChange()),h),l((()=>[this.features,this.map,this.spatialReference,this.timeZone]),(()=>this._updateFeatureVMs())),l((()=>this.view?.scale),(()=>this._viewScaleChange())),u((()=>!this.visible),(()=>this.browseClusterEnabled=!1)),l((()=>this.browseClusterEnabled),(e=>e?this.enableClusterBrowsing():this.disableClusterBrowsing()))])}destroy(){this._cancelFetchingFeatures(),this._pendingPromises.clear(),this.browseClusterEnabled=!1,this.view=null,this.map=null,this.spatialReference=null,this.timeZone=null}get active(){return!(!this.visible||this.waitingForResult)}get allActions(){const e=this._get("allActions")||new M;e.removeAll();const{actions:t,defaultActions:i,defaultPopupTemplateEnabled:s,includeDefaultActions:r,selectedFeature:o}=this,a=r?i.concat(t):t,n=o&&("function"==typeof o.getEffectivePopupTemplate&&o.getEffectivePopupTemplate(s)||o.popupTemplate),l=n?.actions,u=n?.overwriteActions?l:l?.concat(a)??a;return u?.filter(Boolean).forEach((t=>e.add(t))),e}get defaultActions(){const e=this._get("defaultActions")||new M;return e.removeAll(),e.addMany(A(this.selectedFeature)?U():H()),e}get featureCount(){return this.features.length}set features(e){const t=e||[];this._set("features",t);const{pendingPromisesCount:i,promiseCount:s,selectedFeatureIndex:r}=this,o=s&&t.length;"list"!==this.initialDisplayMode?o&&i&&-1===r?this.selectedFeatureIndex=0:o&&-1!==r||(this.selectedFeatureIndex=t.length?0:-1):(!o||o&&i===s)&&(this.selectedFeatureIndex=-1)}set location(e){let t=e;const i=this.spatialReference?.isWebMercator,s=e?.spatialReference?.isWGS84;s&&i&&(t=w(e)),this._set("location",t)}get map(){return this.view?.map??null}set map(e){this._override("map",e)}get pendingPromisesCount(){return this._pendingPromises.size}get promiseCount(){return this.promises.length}get promises(){return this._get("promises")||[]}set promises(e){this._pendingPromises.clear(),this.features=[],Array.isArray(e)&&e.length?(this._set("promises",e),(e=e.slice()).forEach((e=>this._pendingPromises.add(e))),e.reduce(((e,t)=>e.finally((()=>t.then((e=>{this._pendingPromises.has(t)&&this._updateFeatures(e)})).finally((()=>this._pendingPromises.delete(t))).catch((()=>{}))))),Promise.resolve())):this._set("promises",[])}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;(isNaN(e)||e<0||!t)&&(e=-1),this.activeFeature=null,this._set("selectedFeatureIndex",e)}get selectedFeatureViewModel(){return this.featureViewModels[this.selectedFeatureIndex]||null}get spatialReference(){return this.view?.spatialReference??null}set spatialReference(e){this._override("spatialReference",e)}get state(){const{view:e,map:t}=this;return e?e.ready?"ready":"disabled":t?"ready":"disabled"}get timeZone(){return this.view?.timeZone??b}set timeZone(e){this._overrideIfSome("timeZone",e)}get waitingForContents(){return this.featureViewModels.some((e=>e.waitingForContent))}get waitingForResult(){return!(!(!!this._fetchFeaturesController||this.pendingPromisesCount>0)||0!==this.featureCount)}centerAtLocation(){const{view:e}=this,t=I(this);return t&&e?this.callGoTo({target:{target:t,scale:e.scale}}):Promise.reject(new s("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:i}=this;if(!i||!e)throw new s("fetch-features:invalid-screenpoint-or-view","Cannot fetch features without a screenPoint and view.",{screenPoint:e,view:i});return i.fetchPopupFeatures(e,{pointerType:t?.event?.pointerType,defaultPopupTemplateEnabled:this.defaultPopupTemplateEnabled,signal:t?.signal})}open(e){const t={updateLocationEnabled:!1,promises:[],fetchFeatures:!1,...e,visible:!0},{fetchFeatures:i}=t;delete t.fetchFeatures,i&&this._setFetchFeaturesPromises(t.location);const s=["actionsMenuOpen","collapsed"];for(const r of s)delete t[r];this.set(t)}triggerAction(e){const t=this.allActions.at(e);t&&!t.disabled&&this.emit("trigger-action",{action:t})}next(){return this.selectedFeatureIndex=this._getRoundRobinIndex(this.selectedFeatureIndex+1,this.featureCount),this}previous(){return this.selectedFeatureIndex=this._getRoundRobinIndex(this.selectedFeatureIndex-1,this.featureCount),this}disableClusterBrowsing(){R(this),this._clearBrowsedClusterGraphics()}async enableClusterBrowsing(){const{view:e,selectedFeature:t}=this;"2d"===e?.type?A(t)?(await x(this),await O(this)):r.getLogger(this).warn("enableClusterBrowsing:invalid-selectedFeature: Selected feature must represent an aggregate/cluster graphic.",t):r.getLogger(this).warn("enableClusterBrowsing:invalid-view: View must be 2d MapView.",t)}handleViewClick(e){this._fetchFeaturesAndOpen(e)}_getRoundRobinIndex(e,t){return(e+t)%t}_animationStateChange(e){this.zoomToLocation||(j.disabled="waiting-for-target"===e)}_clearBrowsedClusterGraphics(){const e=[this.selectedClusterBoundaryFeature,this._selectedClusterFeature].filter(i);this.view?.graphics?.removeMany(e),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:i,view:s}=this;s&&i&&e&&(!t||t.geometry)&&this.centerAtLocation()}_selectedFeatureIndexChange(){this.featurePage=this.featureCount>0?Math.floor(this.selectedFeatureIndex/this.featuresPerPage)+1:null}_featureViewModelsChange(){this.featurePage=this.featureCount>0?1:null}_setGraphicOnFeatureViewModels(){const{features:e,featureCount:t,featurePage:i,featuresPerPage:s,featureViewModels:r}=this;if(null==i)return;const o=((i-1)*s+t)%t,a=o+s;r.slice(o,a).forEach(((t,i)=>{t&&(t.graphic??=e[o+i])}))}async _selectedFeatureChange(e){const{location:t,updateLocationEnabled:i,view:s}=this;if(!e||!s)return;if(this.browseClusterEnabled){if(this._selectedClusterFeature&&(s.graphics.remove(this._selectedClusterFeature),this._selectedClusterFeature=null),A(e))return;return e.symbol=await _(e),this._selectedClusterFeature=e,void s.graphics.add(this._selectedClusterFeature)}const r=e.sourceLayer?.type;if("map-image"!==r&&"imagery"!==r&&"imagery-tile"!==r||(e.symbol=await _(e)),!i&&t||!e.geometry){if(i&&!e.geometry){await this.centerAtLocation();const e=s.center?.clone();e&&(this.location=e)}}else this.location=y(e.geometry)}_waitingForResultChange(){!this.featureCount&&this.promises&&(this.visible=!1)}async _setFetchFeaturesPromises(e){const{pendingFeatures:t}=await this._fetchFeaturesWithController({mapPoint:e});this.promises=t}_destroyFeatureVMs(){this.featureViewModels.forEach((e=>e&&!e.destroyed&&e.destroy())),this._set("featureViewModels",[])}_updateFeatureVMs(){const{selectedFeature:e,features:t,featureViewModels:i,view:s,spatialReference:r,map:o,timeZone:a,location:n}=this;if(A(t[0])||(this.browseClusterEnabled=!1),this._destroyFeatureVMs(),!t?.length)return;const l=i.slice(),u=[];t.forEach(((t,i)=>{if(!t)return;let h=null;if(l.some(((e,i)=>(e&&e.graphic===t&&(h=e,l.splice(i,1)),!!h))),h)u[i]=h;else{const l=new P({abilities:this.featureViewModelAbilities,defaultPopupTemplateEnabled:this.defaultPopupTemplateEnabled,spatialReference:r,graphic:t===e?t:null,location:n,map:o,view:s,timeZone:a});u[i]=l}})),l.forEach((e=>e&&!e.destroyed&&e.destroy())),this._set("featureViewModels",u)}async _getScreenPoint(e,t){const{spatialReference:i,view:s}=this;if(!s)return null;await(s?.when());const r=e?.spatialReference;return r&&i?(await f(r,i,null,t),s.toScreen(e)):null}_cancelFetchingFeatures(){const e=this._fetchFeaturesController;e&&e.abort(),this._fetchFeaturesController=null}async _projectScreenPointAndFetchFeatures({mapPoint:e,screenPoint:t,event:i,signal:s}){return this.fetchFeatures(t??await this._getScreenPoint(e??this.location,{signal:s}),{signal:s,event:i})}_fetchFeaturesWithController({mapPoint:e,screenPoint:t,event:i}){this._cancelFetchingFeatures();const s=new AbortController,{signal:r}=s;this._fetchFeaturesController=s;const o=this._projectScreenPointAndFetchFeatures({mapPoint:e,screenPoint:t,signal:r,event:i});return o.catch((()=>{})).then((()=>{this._fetchFeaturesController=null})),o}async _fetchFeaturesAndOpen(e){const{mapPoint:t,screenPoint:i}=e,{view:s}=this;this.removeHandles(B),this.addHandles([l((()=>this.view?.scale),(()=>this._debouncedLocationUpdate(t).catch((e=>{a(e)||r.getLogger(this).error(e)})))),u((()=>!this.visible),(()=>{this.removeHandles(B)}),{once:!0})],B);const{pendingFeatures:o}=await this._fetchFeaturesWithController({mapPoint:t,screenPoint:i,event:e});s?.popup&&"open"in s.popup&&s.popup.open({location:t??void 0,promises:o})}_autoClose(){this.autoCloseEnabled&&(this.visible=!1)}async _getLayerView(e,t){return await e.when(),e.whenLayerView(t)}_getHighlightLayer(e){const{layer:t,sourceLayer:i}=e;return i&&"layer"in i&&i.layer?i.layer:"map-notes"===i?.type||"subtype-group"===i?.type?i:t??i}_getHighlightLayerView(e,t){return"subtype-sublayer"===t.type&&t.parent&&this._mapIncludesLayer(t.parent)?this._getLayerView(e,t.parent):t&&this._mapIncludesLayer(t)?this._getLayerView(e,t):null}_getHighlightTarget(e,t,i){if(Z(t.type,i))return e;const s=e.getObjectId();if(null!=s)return s;const r="imagery"===t.type?void 0:"objectIdField"in t?t.objectIdField||F:null,o=e.attributes;return o&&r&&o[r]||e}_mapIncludesLayer(e){return!!this.map?.allLayers?.includes(e)}async _highlightFeature(e,t){this.removeHandles(e);const i=this[t];if(!i)return;const{highlightEnabled:s,view:r,visible:o}=this;if(!r||!s||!o)return;const a=this._getHighlightLayer(i);if(!a)return;const n=this._getHighlightLayerView(r,a);if(!n)return;this._highlightPromises[e]=n;const l=await n;if(!(l&&C(l)&&this._highlightPromises[e]===n&&this[t]&&this.highlightEnabled))return;const u=l.highlight(this._getHighlightTarget(i,a,r.type));this.addHandles(u,e)}async _highlightActiveFeature(){return this._highlightFeature("highlight-active-feature","activeFeature")}async _highlightSelectedFeature(){return this._highlightFeature("highlight-selected-feature","selectedFeature")}_updateFeatures(e){const{features:t}=this,i=e.filter((e=>!t.includes(e)));i?.length&&(this.features=t.concat(i))}};e([c()],z.prototype,"_fetchFeaturesController",void 0),e([c({type:M})],z.prototype,"actions",void 0),e([c({readOnly:!0})],z.prototype,"active",null),e([c()],z.prototype,"activeFeature",void 0),e([c({readOnly:!0})],z.prototype,"allActions",null),e([c()],z.prototype,"autoCloseEnabled",void 0),e([c()],z.prototype,"browseClusterEnabled",void 0),e([c()],z.prototype,"content",void 0),e([c({type:M,readOnly:!0})],z.prototype,"defaultActions",null),e([c({type:Boolean})],z.prototype,"defaultPopupTemplateEnabled",void 0),e([c({readOnly:!0})],z.prototype,"featureCount",null),e([c()],z.prototype,"featurePage",void 0),e([c({value:[]})],z.prototype,"features",null),e([c()],z.prototype,"featuresPerPage",void 0),e([c()],z.prototype,"featureMenuOpen",void 0),e([c()],z.prototype,"featureMenuTitle",void 0),e([c()],z.prototype,"featureViewModelAbilities",void 0),e([c({readOnly:!0})],z.prototype,"featureViewModels",void 0),e([c()],z.prototype,"highlightEnabled",void 0),e([c()],z.prototype,"includeDefaultActions",void 0),e([c()],z.prototype,"initialDisplayMode",void 0),e([c({type:d})],z.prototype,"location",null),e([c()],z.prototype,"map",null),e([c({readOnly:!0})],z.prototype,"pendingPromisesCount",null),e([c({readOnly:!0})],z.prototype,"promiseCount",null),e([c()],z.prototype,"promises",null),e([c({readOnly:!0})],z.prototype,"selectedClusterBoundaryFeature",void 0),e([c({value:null,readOnly:!0})],z.prototype,"selectedFeature",null),e([c({value:-1})],z.prototype,"selectedFeatureIndex",null),e([c({readOnly:!0})],z.prototype,"selectedFeatureViewModel",null),e([c({type:m})],z.prototype,"spatialReference",null),e([c({readOnly:!0})],z.prototype,"state",null),e([c()],z.prototype,"timeZone",null),e([c()],z.prototype,"title",void 0),e([c()],z.prototype,"updateLocationEnabled",void 0),e([c()],z.prototype,"view",void 0),e([c()],z.prototype,"visible",void 0),e([c({readOnly:!0})],z.prototype,"waitingForContents",null),e([c({readOnly:!0})],z.prototype,"waitingForResult",null),e([c()],z.prototype,"zoomFactor",void 0),e([c()],z.prototype,"zoomToLocation",void 0),e([c()],z.prototype,"centerAtLocation",null),z=e([p("esri.widgets.Features.FeaturesViewModel")],z);export{z as default};