@arcgis/core/widgets/OrientedImageryViewer/components/ImageViewerViewModel.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"../../../Map.js";import{rotate as i}from"../../../arcade/geometry/operators.js";import r from"../../../core/Error.js";import{EventedAccessor as a}from"../../../core/Evented.js";import s from"../../../core/Logger.js";import{clamp as o}from"../../../core/mathUtils.js";import{abortMaybe as n}from"../../../core/maybe.js";import{throwIfAborted as l,isAbortError as h}from"../../../core/promiseUtils.js";import{watch as m,syncAndInitial as d,when as p,initial as c}from"../../../core/reactiveUtils.js";import{property as g,subclass as y}from"../../../core/accessorSupport/decorators.js";import{UpdatingHandles as u}from"../../../core/support/UpdatingHandles.js";import _ from"../../../geometry/Point.js";import f from"../../../geometry/Polygon.js";import v from"../../../geometry/SpatialReference.js";import{e as R}from"../../../chunks/intersectionOperator.js";import{g as x}from"../../../chunks/proximityOperator.js";import w from"../../../layers/GraphicsLayer.js";import C from"../../../layers/support/RasterFunction.js";import{convolutionKernel as b}from"../../../layers/support/rasterFunctionConstants.js";import j from"../../../layers/support/TileInfo.js";import I from"../../../views/MapView.js";import{getResolutionToScaleFactor as P}from"../../../views/2d/viewpointUtils.js";import M from"../support/NonPanoramicMedia.js";const H={click:"click-handle",enhancements:"enhancements-handle"};let k=class extends a{constructor(e){super(e),this._imageChanged=!1,this._panConstraint=null,this._image=null,this._loadController=null,this._overlays=new w({blendMode:"source-atop"}),this._map=new t,this.autoLoad=!1,this.clickAction="none",this.error=null,this.imageRotation=0,this.state="ready",this.updatingHandles=new u,this._cancelLoadWithController=()=>{this._loadController=n(this._loadController)},this._createImageHandles=()=>{this.removeHandles(H.enhancements),this.addHandles(m(()=>[this.brightness,this.contrast,this.sharpness],([e,t,i])=>{this.image?.loaded&&(this.image.effect=`contrast(${10*(t+10)}%) brightness(${10*(e+10)}%)`,this.sharpenImage(this.image,i))},d))},this._createPanConstraint=()=>{const{image:e,imageRenderer:t}=this,r=r=>{if(!(e&&t&&r.targetGeometry&&e.serviceRasterInfo))return r;const{extent:a}=e.serviceRasterInfo,{constraints:s,rotation:o,width:n,height:l}=t,{extent:h}=i(f.fromExtent(a),o,a.center.x,a.center.y),{width:m,height:d}=h,p=r.targetGeometry.clone(),c=s.scaleToZoom(r.scale),g=1/2**c,y=n/l;let u=g*m,_=g*d;c&&(m/n>d/l?_=u/y:u=_*y);const v=h.clone();return v.xmin+=u/2,v.xmax-=u/2,v.ymin+=_/2,v.ymax-=_/2,r.targetGeometry=x(f.fromExtent(v),p).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:a,rotation:s}=this.imageRenderer,{extent:o}=i(f.fromExtent(t),s,t.center.x,t.center.y),{width:n,height:l}=o;return Math.max(n/r,l/a)},e=>{if(!this.imageRenderer||null==e)return;const{constraints:t,scale:i,spatialReference:r}=this.imageRenderer,a=t.minScale,s=P(r),o=.25*s,n=s*e;let l=n;const h=[];for(;l>o;)h.push(l),l/=2;h.push(l);const{lods:m}=j.create({scales:h});if(t.set({minScale:n,lods:m}),this._imageChanged)return this.imageRenderer.scale=n,void(this._imageChanged=!1);this.imageRenderer.scale=Math.abs(i-a)<=1e-6?n:i},d),"resize")},this._loadMediaInternal=async(e,t)=>{if(this.state="image-loading",this.clearImage(),this.error=null,this._imageChanged=!0,!e)throw new Error("No media to load");try{const{layer:i}=await e.load(t);l(t),this._image=i,this._updatePanConstraint(),this._createResizeHandles(this._image),this._map.add(this._image),this.imageRotation=e.rotation??0,this.media=e,this.state="image-loaded"}catch(i){if(!h(i))throw this.state="image-load-error",this.error=i,s.getLogger(this).error(`error occurred while loading image ${this._image?.url}`,i),this._image=null,i;this.state="image-load-aborted"}return this._image},this._loadWithController=()=>{this._cancelLoadWithController(),this.media&&(this._loadController=new AbortController,this._loadMediaInternal(this.media,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=null},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:v.WebMercator,attributionVisible:!1})}destroy(){this.clearImage(),this.media=null,this._imageRenderer.destroy()}initialize(){this.state="initialized",this.addHandles([p(()=>null!=this.media&&this.autoLoad,this._loadWithController,d),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)},c),m(()=>this.imageRenderer.map.allLayers.length,e=>{e&&this.imageRenderer.map.layers.reorder(this._overlays,e-1)},d),m(()=>this.clickAction,e=>{this.removeHandles(H.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.defer(async()=>{const e=await this.imageRenderer.hitTest(t.screenPoint,{include:this._overlays});e.results=e.results.filter(e=>"graphic"===e.type),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:i}=this.image.serviceRasterInfo,r=(t.mapPoint.x-e.xmin)*i.x,a=(e.ymax-t.mapPoint.y)*i.y,s=new _({x:r,y:a,spatialReference:e.spatialReference});this.emit("pixel-location",s);break}}}))},d)])}get brightness(){return this._get("brightness")??0}set brightness(e){this._set("brightness",o(e,-10,10))}get contrast(){return this._get("contrast")??0}set contrast(e){this._set("contrast",o(e,-10,10))}get image(){return this._image}get imagePointsInView(){const{extent:e,ready:t}=this.imageRenderer,r=this.imageRotation,a=this.image?.fullExtent,s=this.image?.serviceRasterInfo,o=!0===this._imageRenderer.allLayerViews.find(({layer:e})=>e===this.image)?.attached;if(!(t&&e&&a&&s&&o))return null;const n=i(f.fromExtent(e),r,e.center.x,e.center.y),l=f.fromExtent(a),h=R(n,l),{rings:m}=h;return m.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:i}=e.raster.rasterInfo;return[t,i]}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",o(e,0,1))}get updating(){return this.updatingHandles.updating}_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 i=[0,-1*t,0,-1*t,4*t+1,-1*t,0,-1*t,0],r=new C({functionName:"Convolution",functionArguments:{type:b.userDefined,cols:3,rows:3,kernel:i,convolutionType:b.userDefined}});e.rasterFunction=r}async loadMedia(e,t){this.state="image-loading";const i=this.autoLoad;this.autoLoad=!1;return await this._loadMediaInternal(e,t).finally(()=>{this.autoLoad=i})}};e([g()],k.prototype,"_image",void 0),e([g()],k.prototype,"_imageRenderer",void 0),e([g()],k.prototype,"_loadController",void 0),e([g()],k.prototype,"_overlays",void 0),e([g()],k.prototype,"_map",void 0),e([g({type:Boolean})],k.prototype,"autoLoad",void 0),e([g({type:Number})],k.prototype,"brightness",null),e([g()],k.prototype,"clickAction",void 0),e([g({type:Number})],k.prototype,"contrast",null),e([g({type:Object})],k.prototype,"customParameters",void 0),e([g({type:r})],k.prototype,"error",void 0),e([g({readOnly:!0})],k.prototype,"image",null),e([g({readOnly:!0})],k.prototype,"imagePointsInView",null),e([g({readOnly:!0})],k.prototype,"imageSize",null),e([g({readOnly:!0})],k.prototype,"imageRenderer",null),e([g({type:Number})],k.prototype,"imageRotation",void 0),e([g()],k.prototype,"imageView",null),e([g({type:M})],k.prototype,"media",void 0),e([g({type:Number})],k.prototype,"sharpness",null),e([g()],k.prototype,"state",void 0),e([g()],k.prototype,"updatingHandles",void 0),e([g()],k.prototype,"updating",null),k=e([y("esri.widgets.OrientedImageryViewer.components.ImageViewerViewModel")],k);const L=k;export{L as default};