@arcgis/core/views/2d/magnifier/MagnifierView2D.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 e from"../../../request.js";import{createTask as s}from"../../../core/asyncUtils.js";import r from"../../../core/Handles.js";import{destroyMaybe as i,abortMaybe as n}from"../../../core/maybe.js";import{watch as t,initial as a}from"../../../core/reactiveUtils.js";import{create as o}from"../../../core/libs/gl-matrix-2/factories/mat3f32.js";import{UpdatingHandles as l}from"../../../core/support/UpdatingHandles.js";import{DisplayObject as h}from"../engine/DisplayObject.js";import{WGLDrawPhase as u}from"../engine/webgl/enums.js";import{MagnifierTechnique as m}from"../engine/webgl/shaderGraph/techniques/magnifier/MagnifierTechnique.js";import{loadMagnifierResources as d}from"../../magnifier/resources.js";class c extends h{constructor(){super(),this._handles=new r,this._magnifierTechnique=new m,this.updatingHandles=new l,this.visible=!1}destroy(){this._handles=i(this._handles),this._magnifierTechnique.shutdown(),this._resourcesTask=n(this._resourcesTask)}get backgroundColor(){return this._backgroundColor}set backgroundColor(e){this._backgroundColor=e,this.requestRender()}get magnifier(){return this._magnifier}set magnifier(e){this._magnifier=e,this._handles.removeAll(),this._handles.add([t((()=>e.version),(()=>{this.visible=e.visible&&null!=e.position&&e.size>0,this.requestRender()}),a),t((()=>[e.maskUrl,e.overlayUrl]),(()=>this._reloadResources())),t((()=>e.size),(()=>{this._magnifierTechnique.shutdown(),this.requestRender()}))])}_createTransforms(){return{displayViewScreenMat3:o()}}doRender(e){if(!this._resourcesTask)return void this._reloadResources();if(e.drawPhase!==u.MAP||!this._canRender())return;const s=this._magnifier;if(null==s.position)return;this._magnifierTechnique.updateResources(e,this._mask,this._overlay,s);const r=this.backgroundColor,i=r?[r.a*r.r/255,r.a*r.g/255,r.a*r.b/255,r.a]:[1,1,1,1];this._magnifierTechnique.render(e,{background:i,maskEnabled:s.maskEnabled?1:0,overlayEnabled:s.overlayEnabled?1:0})}_canRender(){return this._mask&&this._overlay&&null!=this._magnifier}_reloadResources(){this._resourcesTask&&this._resourcesTask.abort();const r=null!=this._magnifier?this._magnifier.maskUrl:null,i=null!=this._magnifier?this._magnifier.overlayUrl:null;this._resourcesTask=s((async s=>{const n=null==r||null==i?d(s):null,t=null!=r?e(r,{responseType:"image",signal:s}).then((e=>e.data)):n.then((e=>e.mask)),a=null!=i?e(i,{responseType:"image",signal:s}).then((e=>e.data)):n.then((e=>e.overlay)),[o,l]=await Promise.all([t,a]);this._mask=o,this._overlay=l,this._magnifierTechnique.shutdown(),this.requestRender()})),this.updatingHandles.addPromise(this._resourcesTask.promise)}}export{c as default};