@arcgis/core/views/2d/engine/webgl/Overlay.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"../../../../core/Error.js";import{on as t}from"../../../../core/events.js";import r from"../../../../core/Handles.js";import s from"../../../../core/Logger.js";import{disposeMaybe as i}from"../../../../core/maybe.js";import{getProjectiveTransform as n}from"../../../../core/perspectiveUtils.js";import{watch as o,when as a,initial as d}from"../../../../core/reactiveUtils.js";import{create as l}from"../../../../core/libs/gl-matrix-2/factories/mat3f64.js";import{set as m}from"../../../../core/libs/gl-matrix-2/math/vec2.js";import{create as h}from"../../../../core/libs/gl-matrix-2/factories/vec2f64.js";import{isVideoElement as p}from"../../../../support/mediaLayerUtils.js";import{AnimatedSymbolRepeatType as u}from"../../../../symbols/cim/enums.js";import{DisplayObject as c}from"../DisplayObject.js";import{play as f}from"./animatedFormats/utils.js";import{TextureWrapMode as w}from"../../../webgl/enums.js";import{Texture as y}from"../../../webgl/Texture.js";import{TextureDescriptor as x}from"../../../webgl/TextureDescriptor.js";const v=[1,1],g=l(),R={none:u.None,loop:u.Loop,oscillate:u.Oscillate};function q(e){return e?{type:"CIMAnimatedSymbolProperties",...e,playAnimation:e.playing,repeatType:e.repeatType?R[e.repeatType]:void 0}:{type:"CIMAnimatedSymbolProperties"}}class _ extends c{constructor(n){super(),this.elementView=n,this.isWrapAround=!1,this.wrapAroundShift=0,this.perspectiveTransform=h(),this._handles=new r,this._vertices=new Float32Array(8),this._indices=new Uint16Array([0,0,0,1,1,0,1,1,1,1,0,0,0,0,0,1,1,0,1,1]),this._handles.add([o((()=>this.elementView.element.opacity),(e=>this.opacity=e),d),o((()=>[this.elementView.coords]),(()=>{this.requestRender()}),d),o((()=>["animationOptions"in this.elementView.element&&this.elementView.element.animationOptions]),(()=>{this._handles.remove("play"),this.texture=i(this.texture),this.requestRender()}),d),a((()=>this.elementView.element.loaded),(()=>{const e=this.elementView.element;this.ready(),p(e)&&null!=e.content&&(this._handles.add([t(e.content,"play",(()=>this.requestRender())),t(e.content,"loadeddata",(()=>this.requestRender())),t(e.content,"loaded",(()=>this.requestRender()))]),"requestVideoFrameCallback"in e.content?e.content.requestVideoFrameCallback((()=>this.requestRender())):this._handles.add([t(e.content,"seeked",(()=>this.requestRender()))]),this.requestRender())}),d)]),n.element.load().catch((t=>{s.getLogger("esri.views.2d.layers.MediaLayerView2D").error(new e("element-load-error","Element cannot be displayed",{element:n,error:t}))}))}getMesh(e){throw new Error("Method not implemented.")}destroy(){this._handles.destroy(),this.texture=i(this.texture)}get textureSize(){return v}get dvsMat3(){return this.parent.dvsMat3}beforeRender(e){const{context:t}=e,r=this.elementView.element.content;if(null!=r){const e=r instanceof HTMLImageElement,s=r instanceof HTMLVideoElement,i=e?r.naturalWidth:s?r.videoWidth:r.width,n=e?r.naturalHeight:s?r.videoHeight:r.height;if(this._updatePerspectiveTransform(i,n),this.texture){if(s)if(r.readyState>=r.HAVE_CURRENT_DATA)this._updateTextureAndRequestRender(r);else{const e=()=>{this._updateTextureAndRequestRender(r),r.removeEventListener("canplay",e),r.removeEventListener("seeked",e)};r.addEventListener("canplay",e),r.addEventListener("seeked",e)}}else{const e=new x;if(e.wrapMode=w.CLAMP_TO_EDGE,e.preMultiplyAlpha=!0,e.width=i,e.height=n,"getFrame"in r){const s=r=>{this.texture?this.texture.setData(r):this.texture=new y(t,e,r),this.requestRender()};"animationOptions"in this.elementView.element&&this._handles.add(f(r,q(this.elementView.element.animationOptions),null,s),"play")}else this.texture=new y(t,e,r);this.texture.generateMipmap(),s&&("requestVideoFrameCallback"in r?r.requestVideoFrameCallback((()=>this.requestRender())):r.paused||this.requestRender())}}super.beforeRender(e)}_updateTextureAndRequestRender(e){this.texture.setData(e),this.texture.generateMipmap(),"requestVideoFrameCallback"in e?e.requestVideoFrameCallback((()=>this.requestRender())):e.paused||this.requestRender()}_createTransforms(){return null}draw(e,t){this.isReady&&null!=this.texture?t.render(e,{transform:{dvs:this.dvsMat3},config:{perspective:this.perspectiveTransform,texSize:v,wrapAroundShift:this.wrapAroundShift,isWrapAround:this.isWrapAround,opacity:this.opacity,texture:{texture:this.texture,unit:0}},position:this._vertices,tex:this._indices}):this.requestRender()}updateDrawCoords(e,t,r,s){const{coords:i,bounds:n}=this.elementView;if(null==i||null==n)return;const[o,a,d,l]=i.rings[0],m=this._vertices,{x:h,y:p}=e;m.set([a[0]-h,a[1]-p,o[0]-h,o[1]-p,d[0]-h,d[1]-p,l[0]-h,l[1]-p]);let u=t;if(s){const[e,,t]=n,{worldWidth:r,xBounds:i}=s,[o,a]=i;e<o&&t>o?u=r:t>a&&e<a&&(u=-r)}this.wrapAroundShift=u,this.isWrapAround=0!==u}_updatePerspectiveTransform(e,t){const r=this._vertices;n(g,[0,0,e,0,0,t,e,t],[r[0],r[1],r[4],r[5],r[2],r[3],r[6],r[7]]),m(this.perspectiveTransform,g[6]/g[8]*e,g[7]/g[8]*t)}}export{_ as default};