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