@arcgis/core/views/View2D.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import t from"../Viewpoint.js";import i from"../core/Collection.js";import r from"../core/CollectionFlattener.js";import s from"../core/Error.js";import has from"../core/has.js";import a from"../core/Logger.js";import{destroyMaybe as n}from"../core/maybe.js";import{watch as o,syncAndInitial as l}from"../core/reactiveUtils.js";import{property as p,cast as h,subclass as g}from"../core/accessorSupport/decorators.js";import{ensureClass as d}from"../core/accessorSupport/ensureType.js";import{initialize as u}from"../core/workers/workers.js";import c from"../geometry/Point.js";import m from"../geometry/Polygon.js";import{isLoadedOrLoadFor as y}from"../geometry/projectionUtils.js";import w from"../layers/support/TileInfo.js";import{BreakpointsOwner as f}from"./BreakpointsOwner.js";import{DOMContainer as V}from"./DOMContainer.js";import{PopupView as M}from"./PopupView.js";import v from"./View.js";import{Viewport2DBaseMixin as b}from"./Viewport2DBaseMixin.js";import{Viewport2DMixin as _}from"./Viewport2DMixin.js";import R from"./2d/AnimationManager.js";import{layerView2DImporter as j}from"./2d/layerViewModuleImportUtils.js";import S from"./2d/tiling/TileInfoView.js";import"./2d/tiling/TileKey.js";import"./2d/tiling/TileQueue.js";import"./2d/tiling/TileStrategy.js";import{extentToScale as L}from"./2d/viewpointUtils.js";import{importAnalysisViewModule as O}from"./2d/analysis/analysisViewModuleImportUtils.js";import{ManagedCanvas as T}from"./2d/engine/ManagedCanvas.js";import k from"./2d/layers/features/support/TileStore.js";import{createOrReuseHighlightGradient as C}from"./2d/layers/support/util.js";import{clipContainsPoint as x}from"./2d/support/clippingUtils.js";import{hitTest as D}from"./2d/support/hitTestUtils.js";import{takeRawScreenshot as P,takeScreenshot as z}from"./2d/support/screenshotUtils.js";import{Timeline as A}from"./2d/support/Timeline.js";import E from"./navigation/Navigation.js";import I from"./navigation/NavigationActionMap.js";import U from"./support/AnalysisViewManager.js";import G from"./ui/DefaultUI.js";import N from"./ui/2d/DefaultUI2D.js";import{RenderingContextOptions as q}from"./webgl/RenderingContextOptions.js";import{isWebMap as $}from"../webmap/utils.js";import W from"../webmap/background/ColorBackground.js";let F,B,Z,H,J,K,Q;async function X(){const[,{GraphicsView2D:e,GraphicContainer:t,LabelManager:i,MapViewNavigation:r,MagnifierView2D:s,GridView2D:a,Stage:n}]=await Promise.all([import("./2d/webglDeps.js"),import("./2d/mapViewDeps.js")]);B=e,Z=t,H=i,J=r,K=s,Q=a,F=n}let Y=class extends(_(b(f(M(V(v)))))){get timeZone(){return super.timeZone}set timeZone(e){super.timeZone=e}constructor(e){super(e),this._magnifierView=null,this._gridView=null,this.stage=null,this._resolveWhenReady=[],this.rootLayerViews=new r({getCollections:()=>[this.basemapView?.baseLayerViews,this.layerViews,this.basemapView?.referenceLayerViews],getChildrenFunction:()=>null}),this.featuresTilingScheme=null,this.graphicsView=null,this.labelManager=null,this.navigation=new E({actionMap:new I({dragTertiary:"none"})}),this.renderingOptions={samplingMode:"dynamic",edgeLabelsVisible:!0,labelsAnimationTime:125,labelCollisionsEnabled:!0},this.supersampleScreenshotsEnabled=!0,this.analysisViewManager=new U({importAnalysisViewModule:e=>O(e),view:this}),this.floors=new i,this.grid=null,this.map=null,this.timeline=new A,this.type="2d",this.view2dType=null,this.ui=new N,this.test={takeScreenshot:async e=>P(this._getScreenshotView(e),e)},this.padding={top:0,right:0,bottom:0,left:0},u()}destroy(){this.layerViewManager.clear(),this._set("preconditionsReady",!1),this.frameTask=n(this.frameTask),this.goToManager.destroy(),this.rootLayerViews.destroy(),this.inputManager.destroy(),this._set("inputManager",null)}get graphicsTileStore(){return new k(this.featuresTilingScheme)}get constraintsInfo(){const e=this.defaultsFromMap?.tileInfo,t=this.spatialReference;return{lods:e?.spatialReference?.equals(t)?e.lods:null,spatialReference:t}}get initialExtentRequired(){if(!this.stateManager)return!1;const{scale:e,constraints:t,center:i,viewpoint:r,extent:s}=this;let a=this.zoom;return!(this.map&&"initialViewProperties"in this.map&&this.map.initialViewProperties?.viewpoint)&&(!s&&(t?.effectiveLODs||(a=-1),(!i||0===e&&-1===a)&&(null==r?.targetGeometry||"extent"!==r.targetGeometry.type&&!r.scale)))}get defaultsFromMapSettings(){return{required:{extent:!1,heightModelInfo:!1,tileInfo:!0},requiresExtentInSpatialReference:this.spatialReferenceLocked}}get scheduler(){return this.frameTask.scheduler}get typeSpecificPreconditionsReady(){const e=this._getDefaultViewpoint();if(!e)return!1;const t=e.targetGeometry,i=this.spatialReference;return y(t.spatialReference,i)}get analyses(){return super.analyses}set analyses(e){super.analyses=e}get background(){return $(this.map)?this.map.initialViewProperties.background:null}set background(e){this._override("background",e)}get center(){return this.stateManager?.center??null}set center(e){this.stateManager.center=e}get constraints(){return super.constraints}set constraints(e){super.constraints=e}get extent(){return super.extent}set extent(e){super.extent=e}get padding(){return this.stateManager?.padding}set padding(e){this.stateManager&&(this.stateManager.padding=e)}get rendering(){return this.stage?.renderRequested??!1}get resizeAlign(){return super.resizeAlign}set resizeAlign(e){super.resizeAlign=e}get resolution(){return this.stateManager.resolution??0}get rotation(){return super.rotation}set rotation(e){super.rotation=e}get scale(){return this.stateManager?.scale??0}set scale(e){this.stateManager&&(this.stateManager.scale=e)}get spatialReference(){return super.spatialReference}set spatialReference(e){super.spatialReference=e}get spatialReferenceLocked(){return this._get("spatialReferenceLocked")}set spatialReferenceLocked(e){this.stage&&a.getLogger(this).warn("spatialReferenceLocked cannot be changed after the view has become ready"),this._set("spatialReferenceLocked",e)}get tileInfo(){return this.featuresTilingScheme?.tileInfo}get updating(){const e=!(!this.magnifier.visible||null===this.magnifier.position||!this._magnifierView?.updatingHandles.updating),t=!this.destroyed&&(!this.layerViewManager||!this.labelManager||!this.graphicsView||!0===this.analysisViewManager.updating||!0===this.layerViewManager.updating||!0===this.labelManager.updating||!0===this.graphicsView.updating||this.allLayerViews.some(e=>!e.destroyed&&!("layerViews"in e)&&!0===e.updating)||e);if(has("esri-2d-log-updating")){const i=this.allLayerViews.reduce((e,t)=>({...e,[`${t.layer.id}(${t.layer.type})`]:!t.destroyed&&!("layerViews"in t)&&t.updating}),{});console.log(`Updating MapView: ${t}\n-> Null LayerViewManager: ${!this.layerViewManager}\n-> Null LabelManager: ${!this.labelManager}\n-> Null GraphicsView: ${!this.graphicsView}\n-> layerViewManager.updating: ${this.layerViewManager?.updating}\n-> labelManager.updating: ${this.labelManager?.updating}\n-> graphicsView.updating: ${this.graphicsView?.updating}\n-> allLayerViews: ${JSON.stringify(i)}\n-> updatingMagnifier: ${e}\n`)}return t}get viewpoint(){return super.viewpoint}set viewpoint(e){super.viewpoint=e}get visibleArea(){const e=this.stateManager.visibleArea;return e?new m({rings:[e.map(e=>[e[0],e[1]])],spatialReference:this.spatialReference}):e}get zoom(){return this.stateManager.zoom??-1}set zoom(e){this.stateManager.zoom=e}get navigating(){return this.mapViewNavigation?.interacting??!1}async hitTest(e,t){return D(this,e,t)}async takeScreenshot(e){return z(this._getScreenshotView(e),e)}toScreen(e,t){return this.stateManager.toScreen(e,t)}async whenAnalysisView(e){if(null==e.parent)throw new s("view:no-analysisview-for-analysis","The analysis does not exist in view.analyses",{analysis:e});return this.analysisViewManager.whenAnalysisView(e)}whenLayerView(e){return super.whenLayerView(e)}graphicChanged(e){if(this.graphicsView){this.graphicsView.graphicUpdateHandler(e)}}whenReady(){return new Promise(e=>{this.ready?e(this):this._resolveWhenReady.push(e)})}zoomIn(){return super.zoomIn()}zoomOut(){return super.zoomOut()}forceDOMReadyCycle(){this.forceReadyCycle()}getDefaultSpatialReference(){return this.map&&"initialViewProperties"in this.map&&this.map.initialViewProperties.spatialReference||this.defaultsFromMap?.spatialReference||null}getDefaultTimeZone(){return $(this.map)?this.map.initialViewProperties.timeZone:null}getDefaultTimeExtent(){return $(this.map)?this.map.initialViewProperties.timeExtent:null}getSurface(){return this.surface}hasLayerViewModule(e){return j.hasLayerViewModule(e)}importLayerView(e){return j.importLayerView(e)}pixelSizeAt(){return this.ready?this.resolution:(a.getLogger(this).error("#pixelSizeAt()","Map view cannot be used before it is ready"),null)}async popupHitTest(e){const t=this.toMap(e),i=await this.hitTest(e),r=this.allLayerViews.toArray().filter(i=>i.clips.every(i=>x(this,i,e,t))).reverse(),s=new globalThis.Map(r.map(e=>[e.layer.uid,e])),a=[];let n=0,o=0;for(;n<i.results.length||o<r.length;){const e=i.results.at(n);if(e&&"graphic"!==e.type){++n;continue}const l=s.get((e?.layer??e?.graphic.layer)?.uid);if((!e||l)&&o<r.length&&r.at(o)!==l){const e=r.at(o);"fetchPopupFeaturesAtLocation"in e&&a.push({mapPoint:t,layerView:e}),++o}else e&&(a.push({graphic:e.graphic,layerView:l}),++n)}return{hits:a,location:t}}requestUpdate(){this.ready&&this.frameTask.requestUpdate()}loadAsyncDependencies(){return X()}_getDefaultViewpoint(){const{constraints:e,initialExtent:i,map:r,padding:s,size:a}=this;if(!e)return null;const n=r&&"initialViewProperties"in r?r.initialViewProperties:void 0,o=this.stateManager.getUserStartupOptions(this.size),l=n?.viewpoint,p=l?.targetGeometry?.extent??i,h=p?.center,g=l?.rotation??0,d=l?.scale||p&&L(p,[a[0]-s.left-s.right,a[1]-s.top-s.bottom]),u=o.center??h,c=o.rotation??g,m=o.scale??d;return u&&m?new t({targetGeometry:u,scale:m,rotation:c}):null}_startup(){this.timeline.begin("MapView Startup");const e=this._getDefaultViewpoint();this.stateManager.startup(e,this.size,this.spatialReference,this.defaultsFromMap.extent?.center),this.graphics.owner=this;const t=new T(this.surface),i=new F(this.surface,{canvas:this.renderCanvas,contextOptions:new q(this.deactivatedWebGLExtensions,this.debugWebGLExtensions),renderingOptions:this.renderingOptions,timeline:this.timeline},t);this.stage=i,this._magnifierView=new K,this._magnifierView.magnifier=this.magnifier,this._gridView=new Q;const r=new H({view:this});this._set("labelManager",r);const s=new R({view:this});this._set("animationManager",s);const a=new J({view:this,animationManager:s});this._set("mapViewNavigation",a),this._setupSpatialReferenceDependentProperties(),this.addHandles([this.rootLayerViews.on("change",()=>this._updateStageChildren()),i.on("webgl-error",e=>this.fatalError=e.error),o(()=>this.stationary,e=>i.stationary=e,l),o(()=>this.background,e=>{i.backgroundColor=e?.color,this._magnifierView.backgroundColor=e?.color},l),o(()=>this.magnifier,e=>this._magnifierView.magnifier=e,l),o(()=>this.grid,e=>this._gridView.grid=e,l),o(()=>this.renderingOptions,e=>i.renderingOptions=e,l),o(()=>this.highlights.items.map(e=>({name:e.name,options:{fillColor:e.color,haloColor:e.haloColor,fillOpacity:e.fillOpacity,haloOpacity:e.haloOpacity,haloWidth:e.haloWidth,haloBlur:e.haloBlur}})),()=>{i.highlightGradient=C(i.highlightGradient,this.highlights.items)},l),o(()=>this.state.id,()=>i.state=this.state,l),o(()=>this.animationsEnabled,e=>this.stage.animationsEnabled=e,l)],"map-view"),this._updateStageChildren();const n=this._resolveWhenReady;this._resolveWhenReady=[],n.forEach(e=>e(this)),this.timeline.end("MapView Startup"),this.frameTask.start(),this._set("ready",!0)}_teardown(){this._destroySpatialReferenceDependentProperties(),this.removeHandles("map-view"),this.mapViewNavigation.destroy(),this._set("mapViewNavigation",null),this.animation=null,this.animationManager.destroy(),this._set("animationManager",null),this.layerViewManager.clear(),this.labelManager.destroy(),this._magnifierView.destroy(),this._gridView.destroy(),this.stage.destroy(),this.stage=null,this._set("graphicsView",null),this._magnifierView=null,this._gridView=null,this._set("labelManager",null),this._set("mapViewNavigation",null),this.graphics.owner=null,this.frameTask.stop(),this.stationaryManager.clear(),this._set("ready",!1),this.stateManager.teardown()}_updateStageChildren(){this.stage.removeAllChildren(),this.rootLayerViews.forEach(e=>{this.stage.addChild(e.container)});const e=this.graphicsView;this.stage.addChild(e.container),this.stage.addChild(this._magnifierView),this.stage.addChild(this._gridView)}_setupSpatialReferenceDependentProperties(){const e=new S(w.create({spatialReference:this.spatialReference,size:512,numLODs:36}));this._set("featuresTilingScheme",e);const t=new B({view:this,graphics:this.graphics,requestUpdateCallback:()=>this.requestUpdate(),container:new Z(e,!0)});this._set("graphicsView",t)}_destroySpatialReferenceDependentProperties(){const e=this.graphicsView;this._set("graphicsView",null),e.destroy(),this._set("featuresTilingScheme",null)}_getScreenshotView(e){const{allLayerViews:t,padding:i,size:r,stage:s}=this;return{allLayerViews:t,backgroundColor:e?.ignoreBackground?null:this.background?.color,padding:i,size:r,stage:s}}_spatialReferenceChanged(e){if(this.ready){this.frameTask.stop();for(const e of this.allLayerViews)e.processDetach();this._destroySpatialReferenceDependentProperties(),this.stateManager.changeSpatialReference(e),this.stage.state=this.state,this._setupSpatialReferenceDependentProperties();for(const e of this.allLayerViews)e.processAttach();this.frameTask.requestFrame(),this.frameTask.start(),this._updateStageChildren()}}static{this.type="2d"}};e([p({constructOnly:!0})],Y.prototype,"deactivatedWebGLExtensions",void 0),e([p({constructOnly:!0})],Y.prototype,"debugWebGLExtensions",void 0),e([p({readOnly:!0})],Y.prototype,"featuresTilingScheme",void 0),e([p({readOnly:!0})],Y.prototype,"graphicsTileStore",null),e([p()],Y.prototype,"graphicsView",void 0),e([p()],Y.prototype,"constraintsInfo",null),e([p()],Y.prototype,"initialExtentRequired",null),e([p()],Y.prototype,"labelManager",void 0),e([p({type:E,nonNullable:!0})],Y.prototype,"navigation",void 0),e([p({constructOnly:!0})],Y.prototype,"renderCanvas",void 0),e([p()],Y.prototype,"renderingOptions",void 0),e([p({constructOnly:!0})],Y.prototype,"supersampleScreenshotsEnabled",void 0),e([p()],Y.prototype,"defaultsFromMapSettings",null),e([p({readOnly:!0})],Y.prototype,"typeSpecificPreconditionsReady",null),e([p()],Y.prototype,"analysisViewManager",void 0),e([p({type:W})],Y.prototype,"background",null),e([p({type:c})],Y.prototype,"center",null),e([p({type:i})],Y.prototype,"floors",void 0),e([p()],Y.prototype,"grid",void 0),e([p()],Y.prototype,"map",void 0),e([p()],Y.prototype,"padding",null),e([p({readOnly:!0})],Y.prototype,"rendering",null),e([p({readOnly:!0})],Y.prototype,"resolution",null),e([p()],Y.prototype,"scale",null),e([p({type:Boolean,value:!1})],Y.prototype,"spatialReferenceLocked",null),e([p({readOnly:!0})],Y.prototype,"tileInfo",null),e([p({type:A,readOnly:!0})],Y.prototype,"timeline",void 0),e([p({readOnly:!0})],Y.prototype,"type",void 0),e([p({readOnly:!0})],Y.prototype,"updating",null),e([p({readOnly:!0})],Y.prototype,"view2dType",void 0),e([p({readOnly:!0})],Y.prototype,"visibleArea",null),e([p()],Y.prototype,"zoom",null),e([p({readOnly:!0})],Y.prototype,"navigating",null),e([p(),h(e=>e instanceof G?e:d(N,e))],Y.prototype,"ui",void 0),Y=e([g("esri.views.View2D")],Y);const ee=Y;export{ee as default};