@arcgis/core/views/3d/layers/graphics/Graphics3DIconSymbolLayer.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"../../../../Color.js";import{result as t,createTask as r}from"../../../../core/asyncUtils.js";import i from"../../../../core/Error.js";import has from"../../../../core/has.js";import{clone as s}from"../../../../core/lang.js";import{abortMaybe as o,releaseMaybe as a}from"../../../../core/maybe.js";import{throwIfAbortError as n,throwIfAborted as l}from"../../../../core/promiseUtils.js";import{pt2px as c,px2pt as h}from"../../../../core/screenUtils.js";import{numericHash as u}from"../../../../core/string.js";import{dataComponents as m}from"../../../../core/urlUtils.js";import{fromValues as d,create as p}from"../../../../core/libs/gl-matrix-2/factories/vec2f64.js";import{fromValues as _,create as f}from"../../../../core/libs/gl-matrix-2/factories/vec3f64.js";import{ONES as y,ZEROS as g,fromValues as x}from"../../../../core/libs/gl-matrix-2/factories/vec4f64.js";import{projectPointToVector as b}from"../../../../geometry/projection/projectPointToVector.js";import{containsPoint as v}from"../../../../geometry/support/aaBoundingBox.js";import S from"../../../../layers/support/FieldsIndex.js";import{createRendererExpression as P}from"../../../../support/ArcadeExpression.js";import{CIMSymbolHelper as w}from"../../../../symbols/cim/CIMSymbolHelper.js";import{evaluateValueOrFunction as R}from"../../../../symbols/cim/utils.js";import{scaleCIMSymbol as z}from"../../../../symbols/support/cimSymbolUtils.js";import{defaultPrimitive as C}from"../../../../symbols/support/IconSymbol3DLayerResource.js";import{Symbol3DAnchorPosition2D as O}from"../../../../symbols/support/Symbol3DAnchorPosition2D.js";import{getIconHref as j}from"../../../../symbols/support/utils.js";import{transparentUnit as I}from"./constants.js";import{perObjectElevationAligner as M}from"./ElevationAligners.js";import{SymbolUpdateType as E,elevationModeChangeUpdateType as T,needsElevationUpdates2D as F}from"./elevationAlignmentUtils.js";import{focusAreaHUDColor as U}from"./focusAreaStyle.js";import{Graphics3DDrapedGraphicLayer as D}from"./Graphics3DDrapedGraphicLayer.js";import{Graphics3DObject3DGraphicLayer as A}from"./Graphics3DObject3DGraphicLayer.js";import{Graphics3DSymbolLayer as L}from"./Graphics3DSymbolLayer.js";import{validateSymbolLayerSize as G}from"./graphicUtils.js";import{ApplyRendererDiffResult as V}from"./interfaces.js";import{namedAnchorToHUDMaterialAnchorPos as H}from"./placementUtils.js";import{placePointOnGeometry as k,updateStageObjectGeometry as B,getLocalOriginForPoint as N,extendPointGraphicElevationContext as $,createStageObject as W}from"./pointUtils.js";import{initFastSymbolUpdatesState as q,updateFastSymbolUpdatesState as J,evaluateModelTransformScale as Z,ConvertOptions as K}from"../support/FastSymbolUpdates.js";import{createTexture as Q,requiresHalfTexelOffset as X,defaultBoundingBox as Y,defaultSymbolSizeRatio as ee,defaultTexSize as te}from"../../support/engineContent/sdfPrimitives.js";import{drapedZ as re}from"../../terrain/OverlayRenderer.js";import{createPointGeometry as ie}from"../../webgl-engine/lib/GeometryUtil.js";import{RenderGeometry as se}from"../../webgl-engine/lib/RenderGeometry.js";import{Texture as oe}from"../../webgl-engine/lib/Texture.js";import{HUDMaterial as ae}from"../../webgl-engine/materials/HUDMaterial.js";const ne=_(0,0,1),le=16,ce=1.5,he=[te*ee,te*ee];class ue extends L{static{this.PRIMITIVE_SIZE=he}getCachedSize(){return{size:this._getIconSize()}}static{this.elevationModeChangeTypes={definedChanged:E.UPDATE,staysOnTheGround:E.NONE,onTheGroundChanged:E.RECREATE}}constructor(e,t,r,i){super(e,t,r,i,ge(t)),this._cimData=null,this._overrideHelperClass=null,this._arcadeInfo=null,this._cimSymbolMaterials=new Map,this._cimSymbolTextures=new Map,this._cimMaterialParametersInfo=null,this._cimScaleFactorOrFunction=null,this._size=null,this._symbolTextureRatio=1,this._outlineSize=0,this._textureHandle=null,this._patchTask=null,this._elevationOptions={supportsOffsetAdjustment:!0,supportsOnTheGround:!0}}async doLoad(e){this._validateOrThrow();const t=this._prepareMaterialParameters(),r=this._getPrimitive();if(null!=r)this._prepareResourcesPrimitive(t,r);else{const r=j(this.symbolLayer),i=pe(r);null!=i?await this._prepareResourcesCIM(t,JSON.parse(i),e):await this._prepareResourcesHref(t,r,e)}}_validateOrThrow(){if(this._drivenProperties.size)return;const e=G(this._getIconSize());if(e)throw new i("graphics3diconsymbollayer:invalid-size",e)}_getIconSize(){const e=this.symbolLayer,t=Math.round(null!=e.size?c(e.size):le);return this._drivenProperties.size?Math.max(t,64):t}_generateTextureCIM(e,t){const r=this._overrideHelperClass;let i=this._cimData;if(r&&i&&i.symbol||this.logger.error("Can't create texture, CIM data is undefined"),i.primitiveOverrides){i=s(i);const o=i.primitiveOverrides;r.evaluateOverrides(o,e,this._arcadeInfo.geometryType,null,null,t.layer.fieldsIndex),r.applyOverrides(i.symbol,o)}const o=u(JSON.stringify(i));let a=this._cimSymbolTextures.get(o);if(a)return a;const n=this._context.sharedResources.cimSymbolRasterizer,l=this._context.renderer&&"dictionary"===this._context.renderer.type?this._context.renderer.fieldMap:null;l&&r.applyDictionaryTextOverrides(i.symbol,e,l,null);const c=null!=this._cimScaleFactorOrFunction?R(this._cimScaleFactorOrFunction,e):1;1!==c&&i.symbol&&z(i.symbol,c,!0);const h=w.getEnvelope(i,null,n.resourceManager);if(h?.width&&h.height){const e=h.x+h.width/2,t=h.y+h.height/2,r=n.rasterize({type:"cim",data:i},h.width,h.height,e,t,1,"esriGeometryPoint",0,null,this._context.graphicsCoreOwner.view.state.rasterPixelRatio),s=new O({x:-h.x/h.width-.5,y:(h.height+h.y)/h.height-.5});this._cimMaterialParametersInfo.anchorPosition=_e("relative",s),a=new oe(r,{width:r?.width??1,height:r?.height??1,reloadable:!0})}else a=new oe(new ImageData(1,1),{width:1,height:1,reloadable:!0});return this._cimSymbolTextures.set(o,a),this._context.stage.addTexture(a),a}_prepareMaterialParameters(){const e={anchorPosition:_e(this.symbolLayer.anchor,this.symbolLayer.anchorPosition),rotation:this.symbolLayer.angle},t=this.symbol;if(me(t)){const{screenLength:r,minWorldLength:i,maxWorldLength:s}=t.verticalOffset;e.verticalOffset={screenLength:c(r),minWorldLength:i||0,maxWorldLength:null!=s?s:1/0}}this._context.screenSizePerspectiveEnabled&&(e.screenSizePerspective=this._context.sharedResources.screenSizePerspectiveSettings),(0!==e.rotation||this._drivenProperties.rotation)&&(e.hasRotation=!0);const r=!!has("enable-feature:non-occluded-hud");return e.occlusionTest=!r,e.occludedFragmentFade=r,e.horizonCullingEnabled=r&&this._context.spherical,e.hasSlicePlane=this._context.slicePlaneEnabled,e}_prepareResourcesPrimitive(e,t){const r=this._getOutlineSize();if(de(t)&&0===r)throw new Error("Nothing to render");if(this._outlineSize=r,e.color=this._getFillColor(),e.outlineColor=this._getOutlineColor(),e.outlineSize=this._outlineSize,null!=this._context.sharedResources.textures){const r=this._context.sharedResources.textures.fromData(`${t}-icon`,(()=>Q(t)));this._textureHandle=r,e.textureId=r.texture.id}e.textureIsSignedDistanceField=!0,e.sampleSignedDistanceFieldTexelCenter=X(t),e.distanceFieldBoundingBox=Y;const i=this._getIconSize();this._size=[i,i],this._symbolTextureRatio=1/ee,this._createMaterial(e)}async _prepareResourcesHref(e,r,s){this._outlineSize=this._getOutlineSize(),e.color=this._getFillColor(),e.outlineColor=this._getOutlineColor(),e.outlineSize=this._outlineSize,e.textureIsSignedDistanceField=!1;const o=this._getIconSize(),a=o*this._context.graphicsCoreOwner.view.state.rasterPixelRatio;if(null!=this._context.sharedResources.textures){const l=await t(this._context.sharedResources.textures.fromUrl(r,a,{signal:s}));if(!1===l.ok){n(l.error);throw new i("graphics3diconsymbollayer:request-failed",`Failed to load (Request for icon resource failed: ${r})`)}this._textureHandle=l.value;const c=l.value.texture;this._size=fe(c,o),e.textureId=c.id}this._createMaterial(e)}async _prepareResourcesCIM(e,t,r){const{OverrideHelper:i}=await import("../../../../symbols/cim/OverrideHelper.js");if(this._overrideHelperClass=i,this._cimData=t,!this._context.sharedResources.cimSymbolRasterizer){const e=(await import("../../../../symbols/cim/CIMSymbolRasterizer.js")).CIMSymbolRasterizer;l(r),this._context.sharedResources.cimSymbolRasterizer||(this._context.sharedResources.cimSymbolRasterizer=new e(this._context.renderCoordsHelper.spatialReference))}const s=this._context.sharedResources.cimSymbolRasterizer,o=[],a=t,n=a?.symbol;w.fetchResources(n,s.resourceManager,o,r),w.fetchFonts(n,s.resourceManager,o);const c=this._context.layer.fields?this._context.layer.fields.map((e=>e.toJSON())):[],h=this._context.renderCoordsHelper.spatialReference;if(this._arcadeInfo={spatialReference:h,fields:c,geometryType:"esriGeometryPoint"},a?.primitiveOverrides&&o.push(i.createRenderExpressions(a.primitiveOverrides,this._arcadeInfo)),o.length>0&&(await Promise.all(o),l(r)),this._context.renderer&&"dictionary"===this._context.renderer.type&&this._context.renderer.scaleExpression){const e=this._context.renderer;if(e.scaleExpression){const t=e.scaleExpression,r=await P(t,this._context.layer.spatialReference),{default:i}=await import("../../../2d/arcade/callExpressionWithFeature.js"),s=new S(c);this._cimScaleFactorOrFunction=(e,t,o)=>{const a=i(r,e,{$view:o},"esriGeometryPoint",s,t);return null!==a?a:1}}}l(r),this._cimMaterialParametersInfo=e,this._cimMaterialParametersInfo.color=this._getFillColor(),this._cimMaterialParametersInfo.outlineColor=[0,0,0,0],this._cimMaterialParametersInfo.outlineSize=0,this._cimMaterialParametersInfo.textureIsSignedDistanceField=!1}_getPrimitive(){return ye(this.symbolLayer)}_getOutlineSize(){let e=0;const t=this.symbolLayer;if(null!=t.outline?.size)return Math.max(c(t.outline.size),0);return e=de(this._getPrimitive())?ce:0,Math.max(e,0)}_getOutlineColor(){const t=this._getLayerOpacity(),r=this.symbolLayer,i=r?.outline?.color;if(null!=i){const r=e.toUnitRGB(i),s=i.a*t;return[r[0],r[1],r[2],s]}return[0,0,0,0]}_getFillColor(){if(de(this._getPrimitive()))return I;const e=null==this._getPrimitive(),t=this.symbolLayer?.material?.color;return this._getCombinedOpacityAndColor(t,{hasIntrinsicColor:e})}_getFallbackOpacityAndColor(){const t=this.symbolLayer?.material?.color;if(null==t){return null==this._getPrimitive()?y:g}return e.toUnitRGBA(t)}_getFallbackSize(){const e=this._getIconSize(),{symbolLayer:{size:t}}=this;return(null!=t?Math.round(c(t)):le)/e}_createMaterial(e){const t=this._context.spherical;if(this._cimData){this._fastUpdates=null;let r=e.textureId?this._cimSymbolMaterials.get(e.textureId):null;return r||(r=new ae(e,t),this._cimSymbolMaterials.set(e.textureId??0,r)),r}this._fastUpdates=q(this._context.renderer,this._fastVisualVariableConvertOptions()),this._fastUpdates&&(e={...e,...this._fastUpdates.materialParameters}),this._materials[0]=new ae(e,t),e.isFocused=!1;const r=this.view.map?.focusAreas.style;return e.color=U(e.color,r),e.outlineColor=U(e.outlineColor,r),this._materials[1]=new ae(e,t),this._materials[0]}_setDrapingDependentMaterialParameters(){this.draped&&(this._forEachMaterial((e=>{e.setParameters({verticalOffset:null,screenSizePerspective:null,occlusionTest:!1,hasSlicePlane:!1,shaderPolygonOffset:0,draped:this.draped})})),this.layerOpacityChanged())}destroy(){super.destroy(),this._patchTask=o(this._patchTask),this._materials.length=0,this._cimSymbolMaterials.clear(),this._cimSymbolTextures.forEach((e=>this._context.stage.removeTexture(e))),this._cimSymbolTextures.clear(),this._textureHandle=a(this._textureHandle)}_getScaleFactor({size:e},t){if(!this._drivenProperties.size)return 1;if(null==e)return this._getFallbackSize();const[r,i,s]=e;return"symbol-value"===r?1:"number"==typeof r&&isFinite(r)?c(r)/t:"number"==typeof s&&isFinite(s)?c(s)/t:1}_getDrivenRotation(e){return this._drivenProperties.rotation?e.heading??0:0}createGraphics3DGraphic(e){const t=e.graphic;if(!this._validateGeometry(t.geometry))return null;const r=k(t.geometry);if(null==r)return this.logger.warn(`unsupported geometry type for text symbol: ${t.geometry.type}`),null;let i,s=[0,0];const o=this.view.focusAreasView?.containsGeometry(r)??!0;if(this._cimData){if(!this._cimData.symbol)return null;const r=this._generateTextureCIM(t,e),a={textureId:r.id,isFocused:o,...this._cimMaterialParametersInfo};i=this._createMaterial(a);const n=this._context.graphicsCoreOwner.view.state.rasterPixelRatio;s=[r.parameters.width/n,r.parameters.height/n]}else s=this._size,i=o?this._materials[0]:this._materials[1];if(null==r)return this.logger.warn(`unsupported geometry type for icon symbol: ${t.geometry.type}`),null;const a=e.renderingInfo,n=this._getVertexOpacityAndColor(a,this._getFallbackOpacityAndColor()),l=this._getDrivenRotation(a);let c=1;if(!this._fastUpdates?.visualVariables.size){const e=s[0]>s[1]?s[0]:s[1];c=this._getScaleFactor(a,e)}c*=this._symbolTextureRatio;const h=d(s[0]*c,s[1]*c),u=this.setGraphicElevationContext(t);return this.ensureDrapedStatus("on-the-ground"===u.mode)&&this._setDrapingDependentMaterialParameters(),this.draped?this._createAsOverlay(t,r,i,n,l,h):this._createAs3DShape(t,r,i,n,l,h,u,t.uid)}layerOpacityChanged(){const e=this._getFillColor(),t=this._getOutlineColor();this._forEachMaterial((r=>{r.setParameters({color:e}),r.setParameters({outlineColor:t})}))}updateGeometry(e,t){if(this.draped||!this._validateGeometry(t))return!1;const{elevationContext:r,stageObject:i}=e;if(r.mode!==this.getGeometryElevationMode(t))return!1;const s=k(t);if(!s)return!1;const o=B(i,this._context,s,r);if(null==o)return!1;const a=N(this._context,s);return i.geometries[0].localOrigin===a&&(e.alignedSampledElevation=o,$(e,s,this._context.elevationProvider),!0)}layerElevationInfoChanged(e,t,r){const i=this._elevationContext.mode,s=T(ue.elevationModeChangeTypes,r,i);if(s!==E.UPDATE)return s;const o=F(i)||"absolute-height"===i;return this.updateGraphics3DGraphicElevationInfo(e,t,(()=>o))}slicePlaneEnabledChanged(){return this.draped||this._forEachMaterial((e=>{e.setParameters({hasSlicePlane:this._context.slicePlaneEnabled})})),!0}physicalBasedRenderingChanged(){return!0}get pixelRatioChanged(){return null!=this._getPrimitive()}applyRendererDiff(e,t){for(const r in e.diff){if("visualVariables"!==r)return V.RecreateSymbol;if(!J(this._fastUpdates,t,this._fastVisualVariableConvertOptions()))return V.RecreateSymbol;this._materials[0]?.setParameters(this._fastUpdates.materialParameters)}return V.FastUpdate}updateFocus(e,t){t.forEach((t=>{const r=k(t.graphic.geometry);if(null==r)return void this.logger.warn(`unsupported geometry type for text symbol: ${t.graphic.geometry.type}`);const i=this.view.focusAreasView?.containsGeometry(r)??!0;t.layers.forEach((r=>{if(r?.graphics3DSymbolLayer===this&&r.stageObject){r.stageObject.geometries.some((e=>e.material.parameters.isFocused!==i))&&e(t)}}))}))}prepareSymbolLayerPatch(e){if(this._patchTask?.abort(),"partial"!==e.diff.type)return;const t=e.diff.diff;this._preparePatchResource(e,t),this._preparePatchRotation(e,t)}_preparePatchResource(e,s){if(!s.resource||"partial"!==s.resource.type)return;const c=s.resource.diff;if("complete"!==c?.href?.type)return;const h=c.href.newValue,{textures:u}=this._context.sharedResources;if(null==h||null==u||null!=pe(h))return;const m=this._getIconSize(),d=m*this._context.graphicsCoreOwner.view.state.pixelRatio;e.symbolLayerStatePatches.push((()=>{this._patchTask=o(this._patchTask),this._patchTask=r((e=>this._context.schedule((async(e,r)=>{const s=await t(u.fromUrl(h,d,{signal:r}));l(r);const o=!s.ok;if(o&&n(s.error),this._textureHandle=a(this._textureHandle),this._patchTask=null,o){this._forEachMaterial((e=>{e.visible=!1,e.setParameters({textureId:null})}));const e=`Failed to load (Request for icon resource failed: ${h})`;return void this.logger.error(new i("graphics3diconsymbollayer:request-failed",e))}this._textureHandle=s.value;const c=s.value.texture;this._size=fe(c,m),this._forEachMaterial((e=>{e.setParameters({textureId:c.id}),e.visible=!0}))}),e)))})),delete c.href}_preparePatchRotation(e,t){if(!t.angle||"complete"!==t.angle.type)return;const r=t.angle.newValue??0,i=0!==r||this._drivenProperties.rotation;e.symbolLayerStatePatches.push((()=>{this._forEachMaterial((e=>e.setParameters({rotation:r,hasRotation:i})))})),delete t.angle}_defaultElevationInfoNoZ(){return xe}_createAs3DShape(e,t,r,i,s,o,a,n){const l=this.getFastUpdateAttrValues(e),c=this._context.layerViewUid,h=this._context.stage.renderView.getObjectAndLayerIdColor({graphicUid:n,layerViewUid:c}),u=ie(r,{normal:ne,color:i,rotation:s,size:o,centerOffsetAndDistance:be,featureAttribute:l,objectAndLayerIdColor:h}),m=W(this._context,t,u,a,n);if(null==m)return null;const d=new A(this,m.object,null,M,a);return d.alignedSampledElevation=m.sampledElevation,d.needsElevationUpdates=F(a.mode)||"absolute-height"===a.mode,d.getScreenSize=this._createScreenSizeGetter(o,l),d.calculateRelativeScreenBounds=e=>r.calculateRelativeScreenBounds(d.getScreenSize(),1,e),$(d,t,this._context.elevationProvider),d}_createAsOverlay(e,t,r,i,s,o){r.renderPriority=this._renderPriority;const a=f();b(t,a,this._context.overlaySR),a[2]=re;const n=this._context.clippingExtent;if(null!=n&&!v(n,a))return null;const l=this.getFastUpdateAttrValues(e),c=e.uid,h=this._context.layerViewUid,u=this._context.stage.renderView.getObjectAndLayerIdColor({graphicUid:c,layerViewUid:h}),m=ie(r,{normal:ne,position:a,color:i,rotation:s,size:o,featureAttribute:l,objectAndLayerIdColor:u}),d=new se(m,{layerViewUid:h,graphicUid:c}),p=new D(this,[d],null,this._context.drapeSourceRenderer);return p.getScreenSize=this._createScreenSizeGetter(o,l),p.calculateRelativeScreenBounds=e=>r.calculateRelativeScreenBounds(p.getScreenSize(),1,e),p}_createScreenSizeGetter(e,t){const r=this._outlineSize+2;if(this._fastUpdates&&t){const i=e[0]/this._symbolTextureRatio,s=e[1]/this._symbolTextureRatio;return(e=p())=>{const[o,a]=Z(ve,this._fastUpdates.materialParameters,t);return e[0]=o*i+r,e[1]=a*s+r,e}}const i=e[0]/this._symbolTextureRatio+r,s=e[1]/this._symbolTextureRatio+r;return(e=p())=>(e[0]=i,e[1]=s,e)}_fastVisualVariableConvertOptions(){const e=Math.max(this._size[0],this._size[1]),t=_(e,e,e),r=h(1),i=e*r,s=_(i,i,i),o=this._getFallbackSize();return new K({supports:{size:!0,color:!0,rotation:!0,opacity:!1},modelSize:t,symbolSize:s,unitInMeters:r,fallbackColor:this._getFallbackOpacityAndColor(),fallbackSize:_(o,o,o)})}_forEachMaterial(e){this._materials.forEach(e),this._cimSymbolMaterials.forEach(e)}test(){return{...super.test(),material:this._materials[0]}}}function me(e){return e&&"point-3d"===e.type&&e.hasVisibleVerticalOffset()}function de(e){return null!=e&&("cross"===e||"x"===e)}function pe(e){const t=m(e);return"application/json"===t?.mediaType?t.data:void 0}function _e(e,t){return"relative"===e?d((t.x||0)+.5,.5-(t.y||0)):e in H?H[e]:H.center}function fe({parameters:e},t){const r=(e.width??1)/(e.height??1);return r>1?[t,Math.round(t/r)]:[Math.round(t*r),t]}function ye(e){return e.resource?.href?null:e.resource?.primitive??C}function ge(e){return 1===(e.material?.color?.a??1)&&null!=ye(e)}const xe={mode:"relative-to-ground",offset:0},be=x(0,0,0,1),ve=f();export{ue as Graphics3DIconSymbolLayer};