@arcgis/core/widgets/OrientedImageryViewer/components/ImageViewerViewModel.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"../../../Map.js";import r from"../../../core/Error.js";import i from"../../../core/Evented.js";import s from"../../../core/Logger.js";import{clamp as a}from"../../../core/mathUtils.js";import{destroyMaybe as o}from"../../../core/maybe.js";import{isAbortError as n}from"../../../core/promiseUtils.js";import{watch as m,syncAndInitial as l,initial as h}from"../../../core/reactiveUtils.js";import{property as c}from"../../../core/accessorSupport/decorators/property.js";import"../../../core/has.js";import"../../../core/RandomLCG.js";import{subclass as d}from"../../../core/accessorSupport/decorators/subclass.js";import{rotate as p,intersect as g,nearestCoordinate as y}from"../../../geometry/geometryEngine.js";import u from"../../../geometry/Point.js";import _ from"../../../geometry/Polygon.js";import f from"../../../geometry/SpatialReference.js";import v from"../../../layers/GraphicsLayer.js";import R from"../../../layers/ImageryTileLayer.js";import x from"../../../layers/support/RasterFunction.js";import{convolutionKernel as w}from"../../../layers/support/rasterFunctionConstants.js";import C from"../../../layers/support/TileInfo.js";import I from"../../../views/MapView.js";import{getResolutionToScaleFactor as b}from"../../../views/2d/viewpointUtils.js";import{logAndThrow as j,getMissingPropertyErrorName as P,getMissingPropertyErrorMessage as S,castImageSource as k}from"../utils.js";const E={click:"click-handle",enhancements:"enhancements-handle",rotation:"rotation-handle"};let L=class extends i.EventedAccessor{constructor(e){super(e),this._imageChanged=!1,this._panConstraint=null,this._image=null,this._loadController=null,this._overlays=new v({blendMode:"source-atop"}),this._map=new t,this.autoLoad=!1,this.clickAction="none",this.error=null,this.imageSource=null,this.imageRotation=0,this.state="ready",this._cancelLoadWithController=()=>{this._loadController?.abort(),this._loadController=null},this._createImageHandles=()=>{this.removeHandles(E.enhancements),this.addHandles(m((()=>[this.brightness,this.contrast,this.sharpness]),(([e,t,r])=>{this.image?.loaded&&(this.image.effect=`contrast(${10*(t+10)}%) brightness(${10*(e+10)}%)`,this.sharpenImage(this.image,r))}),l))},this._createPanConstraint=()=>{const{image:e,imageRenderer:t}=this,r=r=>{if(!(e&&t&&r.targetGeometry&&e.serviceRasterInfo))return r;const{extent:i}=e.serviceRasterInfo,{constraints:s,rotation:a,width:o,height:n}=t,{extent:m}=p(_.fromExtent(i),a),{width:l,height:h}=m,c=r.targetGeometry.clone(),d=s.scaleToZoom(r.scale),g=1/2**d,u=o/n;let f=g*l,v=g*h;d&&(l/o>h/n?v=f/u:f=v*u);const R=m.clone();return R.xmin+=f/2,R.xmax-=f/2,R.ymin+=v/2,R.ymax-=v/2,r.targetGeometry=y(R,c).coordinate,this.state="image-loaded",r};return{constrain:r,applyPanConstraint:r}},this._createResizeHandles=e=>{e.removeHandles("resize"),e.addHandles(m((()=>{if(!this.imageRenderer.ready)return;const{extent:t}=e.serviceRasterInfo,{width:r,height:i,rotation:s}=this.imageRenderer,{extent:a}=p(_.fromExtent(t),s),{width:o,height:n}=a;return Math.max(o/r,n/i)}),(e=>{if(!this.imageRenderer||null==e)return;const{constraints:t,scale:r,spatialReference:i}=this.imageRenderer,s=t.minScale,a=b(i),o=.25*a,n=a*e;let m=n;const l=[];for(;m>o;)l.push(m),m/=2;l.push(m);const{lods:h}=C.create({scales:l});if(t.set({minScale:n,lods:h}),this._imageChanged)return this.imageRenderer.scale=n,void(this._imageChanged=!1);this.imageRenderer.scale=Math.abs(r-s)<=1e-6?n:r}),l),"resize")},this._loadImageInternal=(e,t={})=>{this.state="image-loading",this.clearImage(),this.error=null,this._imageChanged=!0;const r="string"==typeof e,i=r?void 0:e.datasetFormat,a=r?e:e.url,{customParameters:o,options:m}=t;return this._image=new R({ioConfig:{skipExtensions:["aux.xml","jgw"],skipMapInfo:!0,datasetFormat:i},url:a,customParameters:o}),this._image.when((async e=>{this._updatePanConstraint(),this._createResizeHandles(e),this._map.add(e),this.state="image-loaded"}),(t=>{n(t)?this.state="image-load-aborted":(this.state="image-load-error",this.error=t,s.getLogger(this).error(`error occurred while loading image ${r?e:JSON.stringify(e)}`,t),this.imageSource=null)})),this._image.load(m)},this._loadWithController=()=>{this._cancelLoadWithController(),this._loadController=new AbortController,this.loadImage(this._loadController)},this._updatePanConstraint=()=>{this._panConstraint&&this.imageRenderer.constraints.customConstraints.remove(this._panConstraint),this._panConstraint=this._createPanConstraint(),this.imageRenderer.constraints.customConstraints.add(this._panConstraint)},this.addGraphic=(e,t)=>{this._overlays.graphics.add(e,t)},this.addManyGraphics=e=>{this._overlays.addMany(e)},this.clearGraphics=()=>{this._overlays.graphics.removeAll()},this.clearImage=()=>{this.image&&(this._map.layers.remove(this.image),this._image=o(this._image))},this.loadImage=e=>{const{customParameters:t,imageSource:i}=this;return i?this._loadImageInternal(i,{customParameters:t,options:e}):j(this.declaredClass,new r(P("image-viewer"),S("ImageViewerViewModel","imageSource")))},this.removeGraphic=e=>{this._overlays.remove(e)},this.removeManyGraphics=e=>{this._overlays.removeMany(e)},this._imageRenderer=new I({constraints:{snapToZoom:!0,rotationEnabled:!1},map:this._map,popupEnabled:!1,spatialReference:f.WebMercator,ui:{components:["zoom"]}})}destroy(){this._imageRenderer.destroy()}initialize(){this.state="initialized",this.addHandles([m((()=>this.imageSource),(e=>{e&&this.autoLoad&&this._loadWithController()}),l),m((()=>this.image?.loaded),(()=>{this._createImageHandles()})),m((()=>this.imageRotation),(()=>{this._rotateImage()})),m((()=>this.imageRenderer.map),((e,t)=>{t?.layers.remove(this._overlays),e?.layers.add(this._overlays)}),h),m((()=>this.imageRenderer.map.allLayers.length),(e=>{e&&this.imageRenderer.map.layers.reorder(this._overlays,e-1)}),l),m((()=>this.clickAction),(e=>{this.removeHandles(E.click),"none"!==e&&this.addHandles(this.imageRenderer.on("click",(t=>{if(this.image?.loaded&&this.imageRenderer.ready)switch(e){case"emit":t.stopPropagation(),this.emit("click",t);break;case"hittest":t.stopPropagation(),t.async((async()=>{const e=await this.imageRenderer.hitTest(t.screenPoint,{include:this._overlays});this.emit("hittest-response",e)}));break;case"pixel-location":{if(t.stopPropagation(),!this.image?.serviceRasterInfo||!t.mapPoint)return void this.emit("pixel-location",null);const{extent:e,pixelSize:r}=this.image.serviceRasterInfo,i=(t.mapPoint.x-e.xmin)*r.x,s=(e.ymax-t.mapPoint.y)*r.y,a=new u({x:i,y:s,spatialReference:e.spatialReference});this.emit("pixel-location",a);break}}})))}),l)])}get brightness(){return this._get("brightness")??0}set brightness(e){this._set("brightness",a(e,-10,10))}get contrast(){return this._get("contrast")??0}set contrast(e){this._set("contrast",a(e,-10,10))}get image(){return this._image}get imagePointsInView(){const{extent:e,ready:t}=this.imageRenderer,r=this.imageRotation,i=this.image?.fullExtent,s=this.image?.serviceRasterInfo,a=!0===this._imageRenderer.allLayerViews.find((({layer:e})=>e===this.image))?.attached;if(!(t&&e&&i&&s&&a))return null;const o=p(_.fromExtent(e),r),n=_.fromExtent(i),m=g(o,n),{rings:l}=m;return l.flat().map((([e,t])=>({x:(e-s.extent.xmin)*s.pixelSize.x,y:(s.extent.ymax-t)*s.pixelSize.y})))}get imageSize(){const{image:e}=this;if(!e?.raster)return null;const{width:t,height:r}=e.raster.rasterInfo;return[t,r]}get imageRenderer(){return this._imageRenderer}get imageView(){return this.imageRenderer.allLayerViews.find((e=>e.layer===this.image))}get sharpness(){return this._get("sharpness")??0}set sharpness(e){this._set("sharpness",a(e,0,1))}_rotateImage(){this.imageRenderer.constraints.rotationEnabled=!0,this.imageRenderer.rotation=this.imageRotation,this.imageRenderer.constraints.rotationEnabled=!1}sharpenImage(e,t){if(!t)return void(e.rasterFunction=null);const r=[0,-1*t,0,-1*t,4*t+1,-1*t,0,-1*t,0],i=new x({functionName:"Convolution",functionArguments:{type:w.userDefined,cols:3,rows:3,kernel:r,convolutionType:w.userDefined}});e.rasterFunction=i}};e([c()],L.prototype,"_image",void 0),e([c()],L.prototype,"_imageRenderer",void 0),e([c()],L.prototype,"_loadController",void 0),e([c()],L.prototype,"_overlays",void 0),e([c()],L.prototype,"_map",void 0),e([c({type:Boolean})],L.prototype,"autoLoad",void 0),e([c({type:Number})],L.prototype,"brightness",null),e([c()],L.prototype,"clickAction",void 0),e([c({type:Number})],L.prototype,"contrast",null),e([c({type:Object})],L.prototype,"customParameters",void 0),e([c({type:r})],L.prototype,"error",void 0),e([c({readOnly:!0})],L.prototype,"image",null),e([c({readOnly:!0})],L.prototype,"imagePointsInView",null),e([c({readOnly:!0})],L.prototype,"imageSize",null),e([c({cast:k})],L.prototype,"imageSource",void 0),e([c({readOnly:!0})],L.prototype,"imageRenderer",null),e([c({type:Number})],L.prototype,"imageRotation",void 0),e([c()],L.prototype,"imageView",null),e([c({type:Number})],L.prototype,"sharpness",null),e([c()],L.prototype,"state",void 0),L=e([d("esri.widgets.OrientedImageryViewer.components.ImageViewerViewModel")],L);const M=L;export{M as default};