@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.32/esri/copyright.txt for details.
*/
import{_ as e}from"../../chunks/tslib.es6.js";import t from"../../Camera.js";import i from"../../Ground.js";import o from"../../Map.js";import a 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 l}from"../../core/mathUtils.js";import{destroyMaybe as d}from"../../core/maybe.js";import{isAbortError as c,waitTick as p}from"../../core/promiseUtils.js";import{watch as g,when as _,syncAndInitial as u}from"../../core/reactiveUtils.js";import{property as y}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/Logger.js";import"../../core/RandomLCG.js";import{enumeration as v}from"../../core/accessorSupport/decorators/enumeration.js";import{subclass as f}from"../../core/accessorSupport/decorators/subclass.js";import w from"../../geometry/SpatialReference.js";import z from"../../layers/GraphicsLayer.js";import{convertSphereVertexToPixelLocation as R}from"../../layers/orientedImagery/transformations/utils.js";import V from"../../views/SceneView.js";import{logAndThrow as C,getMissingPropertyErrorName as M,getMissingPropertyErrorMessage as j}from"../OrientedImageryViewer/utils.js";import{defaultImageSphereCenter as P,maxPanoramicViewerHFOV as H,minPanoramicViewerHFOV as O,humanBinocularHFOV as S}from"./constants.js";import b from"./PanoramicZoomConditions.js";import k from"./PanoramicZoomViewModel.js";import{findDiagonalFOV as x,meshToGraphic as I,createImageSphere as F}from"./utils.js";const G={autoLoad:"auto-load",default:"default",navigation:"navigation",fovConstraint:"fov-constraint",clickAction:"image-click-action"};let A=class extends n.EventedAccessor{constructor(e){super(e),this._startPosition=null,this._targetPosition=null,this._graphics=new z({elevationInfo:{mode:"relative-to-ground"}}),this._imageGraphic=null,this._loadController=null,this._map=new o({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.pitch=90,this.state="ready",this.yaw=0,this._addNavigationHandles=()=>{this.imageRenderer.basemapTerrain.suspended=!0,this.imageRenderer.constraints.tilt.max=180,this.removeHandles(G.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()}))],G.navigation)},this._addHFOVHandles=()=>{this.removeHandles(G.fovConstraint),this.addHandles(g((()=>[this.maxHFOV,this.minHFOV]),(()=>{this._zoomViewModel&&(this._zoomViewModel.panoramicZoomConditions=new b({view:this.imageRenderer,maxFOV:this.maxHFOV,minFOV:this.minHFOV}))}),u),G.fovConstraint)},this._addZoomHandles=()=>{this._zoomViewModel=new k({view:this.imageRenderer,panoramicZoomConditions:new b({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:o}=e;switch(t){case"start":this._startPosition=this._targetPosition={x:i,y:o};break;case"update":this._targetPosition={x:i,y:o},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.async((async()=>{const t=await this.imageRenderer.hitTest(e.screenPoint,{include:this._graphics});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=R(e.mapPoint,this.imageSize[0],this.imageSize[1]);this.emit("pixel-location",{...t,spatialReference:w.WebMercator});break}}},this._handleWheel=e=>{const t=e.deltaX??e.native.deltaX;e.stopPropagation(),t>0||e.deltaY>0?this._zoomOut():this._zoomIn()},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.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 V({map:this._map,viewingMode:"local",camera:{position:P},environment:{atmosphereEnabled:!1,starsEnabled:!1,lighting:{type:"virtual"}},popupEnabled:!1,spatialReference:w.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.heading=e,this._reloadCamera()}),u),g((()=>this.pitch),(e=>{this.camera.tilt=e,this._reloadCamera()}),u),_((()=>this.imageRenderer.ready),(()=>{this._addNavigationHandles(),this._addZoomHandles()}),u),g((()=>this.clickAction),(e=>{this.removeHandles(G.clickAction),"none"!==e&&this.addHandles(this.imageRenderer.on("click",this._handleImageClick))}),u)],G.default)}get camera(){return this.imageRenderer.camera}set camera(e){e&&(this.imageRenderer.camera=e.clone())}get fov(){return this.camera.fov}set fov(e){Number.isFinite(e)&&this._zoomViewModel?.zoomTo(e)}get hfov(){const{fov:e}=this.camera,{size:[t,i]}=this.imageRenderer,o=t/i,a=Math.atan(o);return 2*m(Math.atan(Math.tan(l(e/2))*Math.sin(a)))}get imageRenderer(){return this._imageRenderer}get maxHFOV(){const{size:[e,t]}=this.imageRenderer;return x(H,e/t)}get minHFOV(){const{size:[e,t]}=this.imageRenderer;return x(O,e/t)}get vfov(){const{fov:e}=this.camera,{size:[t,i]}=this.imageRenderer,o=t/i,a=Math.atan(o);return 2*m(Math.atan(Math.tan(l(e/2))*Math.cos(a)))}async _loadImageInternal(e,t){let i;this.state="image-loading";try{i=(await a(e,{responseType:"image",...t})).data}catch(o){throw c(o)?this.state="image-load-aborted":this.state="image-load-error",o}return this._updateImageSphere(i,t)}_reloadCamera(){this.camera=this.camera.clone()}_removeImageSphere(){this._imageGraphic&&(this._graphics.remove(this._imageGraphic),this._imageGraphic=d(this._imageGraphic)),this.state="ready",this.imageSize=null}_updateCameraHeadingAndTilt(){if(!this._startPosition||!this._targetPosition)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){await p(t);const{size:[i,o]}=this.imageRenderer;return this._imageGraphic=I(F(e)),this._graphics.add(this._imageGraphic),this.fov=x(S,i/o),this.state="image-loaded",this.imageSize=[e.width,e.height],this._imageGraphic.geometry}async loadImage(e){return this._removeImageSphere(),this.imageSource?this._loadImageInternal(this.imageSource,e):C(this.declaredClass,new s(M("panoramic-viewer"),j("PanoramicViewerViewModel","imageSource")))}};e([y()],A.prototype,"_graphics",void 0),e([y()],A.prototype,"_imageGraphic",void 0),e([y()],A.prototype,"_imageRenderer",void 0),e([y()],A.prototype,"_loadController",void 0),e([y()],A.prototype,"_map",void 0),e([y()],A.prototype,"_zoomViewModel",void 0),e([y({type:Boolean})],A.prototype,"autoLoad",void 0),e([y({type:t})],A.prototype,"camera",null),e([v(new h({emit:"emit",hittest:"hittest",none:"none","pixel-location":"pixel-location"}))],A.prototype,"clickAction",void 0),e([y({type:Number})],A.prototype,"fov",null),e([y({readOnly:!0})],A.prototype,"hfov",null),e([y({readOnly:!0})],A.prototype,"imageRenderer",null),e([y()],A.prototype,"imageSize",void 0),e([y()],A.prototype,"imageSource",void 0),e([y({readOnly:!0})],A.prototype,"maxHFOV",null),e([y({readOnly:!0})],A.prototype,"minHFOV",null),e([y({type:Number})],A.prototype,"pitch",void 0),e([y()],A.prototype,"state",void 0),e([y({readOnly:!0})],A.prototype,"vfov",null),e([y({type:Number})],A.prototype,"yaw",void 0),A=e([f("esri.widgets.PanoramicViewer.PanoramicViewerViewModel")],A);const L=A;export{L as default};