@arcgis/core/widgets/PanoramicViewer/PanoramicViewerViewModel.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"../../Camera.js";import i from"../../Ground.js";import a from"../../Map.js";import o from"../../request.js";import r from"../../core/Collection.js";import s from"../../core/Error.js";import n from"../../core/Evented.js";import{JSONMap as h}from"../../core/jsonMap.js";import{rad2deg as m,deg2rad as d}from"../../core/mathUtils.js";import{destroyMaybe as l}from"../../core/maybe.js";import{isAbortError as c,waitTick as p}from"../../core/promiseUtils.js";import{watch as g,syncAndInitial as u,when as _,whenOnce as y}from"../../core/reactiveUtils.js";import{property as v}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/Logger.js";import"../../core/RandomLCG.js";import{enumeration as f}from"../../core/accessorSupport/decorators/enumeration.js";import{subclass as w}from"../../core/accessorSupport/decorators/subclass.js";import{UpdatingHandles as M}from"../../core/support/UpdatingHandles.js";import R from"../../geometry/SpatialReference.js";import V from"../../layers/GraphicsLayer.js";import{convertSphereVertexToPixelLocation as z}from"../../layers/orientedImagery/transformations/utils.js";import C from"../../views/SceneView.js";import{logAndThrow as H,getMissingPropertyErrorName as j,getMissingPropertyErrorMessage as P}from"../OrientedImageryViewer/utils.js";import{defaultImageSphereCenter as O,maxPanoramicViewerHFOV as S,minPanoramicViewerHFOV as I,humanBinocularHFOV as b}from"./constants.js";import k from"./PanoramicZoomConditions.js";import x from"./PanoramicZoomViewModel.js";import{findDiagonalFOV as G,meshToGraphic as F,createImageSphere as A}from"./utils.js";const L={default:"default",navigation:"navigation",fovConstraint:"fov-constraint",clickAction:"image-click-action"};let N=class extends n.EventedAccessor{constructor(e){super(e),this._startPosition=null,this._targetPosition=null,this._graphics=new V({elevationInfo:{mode:"relative-to-ground"}}),this._imageGraphic=null,this._loadController=null,this._map=new a({ground:new i({opacity:0,navigationConstraint:null}),layers:new r([this._graphics])}),this._zoomViewModel=null,this.autoLoad=!1,this.clickAction="none",this.imageSize=null,this.imageSource=null,this.navigationManager=null,this.navigationViewModel=null,this.pitch=90,this.state="ready",this.updatingHandles=new M,this.yaw=0,this._addNavigationHandles=()=>{this.imageRenderer.basemapTerrain.suspended=!0,this.imageRenderer.constraints.tilt.max=180,this.removeHandles(L.navigation),this.addHandles([this.imageRenderer.on("mouse-wheel",this._handleWheel),this.imageRenderer.on("double-click",this._handleDoubleClick),this.imageRenderer.on("drag",this._handleDrag),this.imageRenderer.on("key-down",(e=>{const t=["+","-","Shift","_","=","ArrowUp","ArrowDown","ArrowRight","ArrowLeft"],i=e.key;t.includes(i)&&e.stopPropagation()}))],L.navigation)},this._addHFOVHandles=()=>{this.removeHandles(L.fovConstraint),this.addHandles(g((()=>[this.maxHFOV,this.minHFOV]),(()=>{this._zoomViewModel&&(this._zoomViewModel.panoramicZoomConditions=new k({view:this.imageRenderer,maxFOV:this.maxHFOV,minFOV:this.minHFOV}))}),u),L.fovConstraint)},this._addZoomHandles=()=>{this._zoomViewModel=new x({view:this.imageRenderer,panoramicZoomConditions:new k({maxFOV:this.maxHFOV,minFOV:this.minHFOV})});const e=this.imageRenderer.ui.find("zoom");e&&(e.viewModel=this._zoomViewModel),this._addHFOVHandles()},this._cancelLoadWithController=()=>{this._loadController?.abort(),this._loadController=null},this._handleDoubleClick=e=>{e.stopPropagation(),e.native.ctrlKey?this._zoomOut():this._zoomIn()},this._handleDrag=e=>{e.stopPropagation();const{action:t,x:i,y:a}=e;switch(t){case"start":this._startPosition=this._targetPosition={x:i,y:a};break;case"update":this._targetPosition={x:i,y:a},this._updateCameraHeadingAndTilt()}},this._handleImageClick=e=>{if("image-loaded"===this.state&&this.imageRenderer.ready)switch(this.clickAction){case"emit":e.stopPropagation(),this.emit("click",e);break;case"hittest":e.stopPropagation(),e.defer((async()=>{const t=await this.imageRenderer.hitTest(e.screenPoint,{include:this._graphics});t.results=t.results.filter((e=>"graphic"===e.type&&e.graphic!==this._imageGraphic)),this.emit("hittest-response",t)}));break;case"pixel-location":{if(e.stopPropagation(),!this.imageSize||!e.mapPoint)return void this.emit("pixel-location",null);const t=z(e.mapPoint,this.imageSize[0],this.imageSize[1]);this.emit("pixel-location",{...t,spatialReference:R.WebMercator});break}}},this._handleWheel=e=>{const t=e.deltaX??e.native.deltaX;e.stopPropagation(),t>0||e.deltaY>0?this._zoomOut():this._zoomIn()},this._loadNavigationManager=async()=>{if(!this.navigationManager||this.navigationManager?.destroyed){const e=await import("../OrientedImageryViewer/navigation/NavigationManagerPanoramic.js").then((e=>e.default));this.navigationManager=new e({viewModel:this.navigationViewModel})}return this.navigationManager},this._loadWithController=()=>{this._cancelLoadWithController(),this._loadController=new AbortController,this.loadImage(this._loadController)},this._zoomIn=()=>this._zoomViewModel?.zoomIn(),this._zoomOut=()=>this._zoomViewModel?.zoomOut(),this.addGraphic=(e,t)=>"image-loaded"===this.state&&!this._graphics.graphics.includes(e)&&(this._graphics.graphics.add(e,t),!0),this.addManyGraphics=e=>{if("image-loaded"!==this.state)return!1;const t=e.filter((e=>!this._graphics.graphics.includes(e)));return this._graphics.graphics.addMany(t),!0},this.clearGraphics=()=>{this._graphics.graphics.removeAll()},this.clearImage=()=>{this.imageSize=null,this._removeImageSphere()},this.navigate=async(e,t)=>this.updatingHandles.addPromise(this.navigateInternal(e,t)),this.navigateInternal=async(e,t)=>{const i=await this._loadNavigationManager();return await i.navigate(e,t)},this.removeGraphic=e=>!("image-loaded"!==this.state||!this._graphics.graphics.includes(e))&&(this._graphics.remove(e),!0),this.removeManyGraphics=e=>{if("image-loaded"!==this.state)return!1;const t=e.filter((e=>this._graphics.graphics.includes(e)));return this._graphics.removeMany(t),!0},this._imageRenderer=new C({map:this._map,viewingMode:"local",camera:{position:O},environment:{atmosphereEnabled:!1,starsEnabled:!1,lighting:{type:"virtual"}},popupEnabled:!1,spatialReference:R.WebMercator,ui:{components:["zoom"]}})}destroy(){this._imageRenderer.destroy()}initialize(){this.state="initialized",this.addHandles([g((()=>this.imageSource),(()=>{this.imageSource&&this.autoLoad&&this._loadWithController()}),u),g((()=>this.fov),(()=>{this._reloadCamera()}),u),g((()=>this.yaw),(e=>{this.camera&&(this.camera.heading=e,this._reloadCamera())}),u),g((()=>this.pitch),(e=>{this.camera&&(this.camera.tilt=e,this._reloadCamera())}),u),_((()=>this.imageRenderer.ready),(()=>{this._addNavigationHandles(),this._addZoomHandles()}),u),g((()=>this.clickAction),(e=>{this.removeHandles(L.clickAction),"none"!==e&&this.addHandles(this.imageRenderer.on("click",this._handleImageClick))}),u)],L.default)}get camera(){return this.imageRenderer.destroying||this.imageRenderer.destroyed?null:this.imageRenderer.camera}set camera(e){!e||this.imageRenderer.destroying||this.imageRenderer.destroyed||(this.imageRenderer.camera=e.clone())}get fov(){return this.camera?.fov}set fov(e){Number.isFinite(e)&&this._zoomViewModel?.zoomTo(e)}get hfov(){if(!this.camera||!this.imageRenderer?.ready)return null;const{fov:e}=this.camera,{size:[t,i]}=this.imageRenderer,a=t/i,o=Math.atan(a);return 2*m(Math.atan(Math.tan(d(e/2))*Math.sin(o)))}get imageRenderer(){return this._imageRenderer}get maxHFOV(){const{size:[e,t]}=this.imageRenderer;return this.imageRenderer.ready?G(S,e/t):S}get minHFOV(){const{size:[e,t]}=this.imageRenderer;return this.imageRenderer.ready?G(I,e/t):I}get updating(){return this.updatingHandles.updating}get vfov(){if(!this.camera||!this.imageRenderer?.ready)return null;const{fov:e}=this.camera,{size:[t,i]}=this.imageRenderer,a=t/i,o=Math.atan(a);return 2*m(Math.atan(Math.tan(d(e/2))*Math.cos(o)))}async _loadImageInternal(e,t){let i;this.state="image-loading";try{i=(await o(e,{responseType:"image",...t})).data}catch(a){throw c(a)?this.state="image-load-aborted":this.state="image-load-error",a}return this._updateImageSphere(i,t)}_reloadCamera(){this.camera=this.camera?.clone()}_removeImageSphere(){this._imageGraphic&&(this._graphics.remove(this._imageGraphic),this._imageGraphic=l(this._imageGraphic)),this.state="ready",this.imageSize=null}_updateCameraHeadingAndTilt(){if(!this._startPosition||!this._targetPosition||!this.camera)return;const e=this.camera.heading+(this._startPosition.x-this._targetPosition.x)/this.imageRenderer.width*this.camera.fov;this.yaw=(e+360)%360;const t=this.camera.tilt-(this._startPosition.y-this._targetPosition.y)/this.imageRenderer.height*this.imageRenderer.camera.tilt;this.pitch=Math.min(179.5,Math.max(.5,t)),this._startPosition=this._targetPosition}async _updateImageSphere(e,t){return await p(t),this._imageGraphic=F(A(e)),this._graphics.add(this._imageGraphic),this.state="image-loaded",y((()=>this.imageRenderer.ready),t).then((()=>{const{size:[e,t]}=this.imageRenderer;this.fov=G(b,e/t)})),this.imageSize=[e.width,e.height],this._imageGraphic.geometry}async loadImage(e){return this._removeImageSphere(),this.imageSource?this._loadImageInternal(this.imageSource,e):H(this.declaredClass,new s(j("panoramic-viewer"),P("PanoramicViewerViewModel","imageSource")))}};e([v()],N.prototype,"_graphics",void 0),e([v()],N.prototype,"_imageGraphic",void 0),e([v()],N.prototype,"_imageRenderer",void 0),e([v()],N.prototype,"_loadController",void 0),e([v()],N.prototype,"_map",void 0),e([v()],N.prototype,"_zoomViewModel",void 0),e([v({type:Boolean})],N.prototype,"autoLoad",void 0),e([v({type:t})],N.prototype,"camera",null),e([f(new h({emit:"emit",hittest:"hittest",none:"none","pixel-location":"pixel-location"}))],N.prototype,"clickAction",void 0),e([v({type:Number})],N.prototype,"fov",null),e([v({readOnly:!0})],N.prototype,"hfov",null),e([v({readOnly:!0})],N.prototype,"imageRenderer",null),e([v()],N.prototype,"imageSize",void 0),e([v()],N.prototype,"imageSource",void 0),e([v({readOnly:!0})],N.prototype,"maxHFOV",null),e([v({readOnly:!0})],N.prototype,"minHFOV",null),e([v()],N.prototype,"navigationViewModel",void 0),e([v({type:Number})],N.prototype,"pitch",void 0),e([v()],N.prototype,"state",void 0),e([v()],N.prototype,"updatingHandles",void 0),e([v()],N.prototype,"updating",null),e([v({readOnly:!0})],N.prototype,"vfov",null),e([v({type:Number})],N.prototype,"yaw",void 0),N=e([w("esri.widgets.PanoramicViewer.PanoramicViewerViewModel")],N);const W=N;export{W as default};