@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.32/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{create as _,fromValues as f}from"../../../../core/libs/gl-matrix-2/factories/vec3f64.js";import{fromValues as y}from"../../../../core/libs/gl-matrix-2/factories/vec4f64.js";import{projectPointToVector as g}from"../../../../geometry/projection/projectPointToVector.js";import{containsPoint as x}from"../../../../geometry/support/aaBoundingBox.js";import{createRendererExpression as b}from"../../../../support/arcadeOnDemand.js";import{CIMSymbolHelper as v}from"../../../../symbols/cim/CIMSymbolHelper.js";import{evaluateValueOrFunction as S}from"../../../../symbols/cim/utils.js";import{scaleCIMSymbol as P}from"../../../../symbols/support/cimSymbolUtils.js";import{defaultPrimitive as R}from"../../../../symbols/support/IconSymbol3DLayerResource.js";import{Symbol3DAnchorPosition2D as w}from"../../../../symbols/support/Symbol3DAnchorPosition2D.js";import{getIconHref as C}from"../../../../symbols/support/utils.js";import{focusAreaHUDColor as z}from"../../../FocusAreas.js";import{transparentUnit as O}from"./constants.js";import{perObjectElevationAligner as j}from"./ElevationAligners.js";import{SymbolUpdateType as M,elevationModeChangeUpdateType as I,needsElevationUpdates2D as T}from"./elevationAlignmentUtils.js";import{Graphics3DDrapedGraphicLayer as E}from"./Graphics3DDrapedGraphicLayer.js";import{Graphics3DObject3DGraphicLayer as D}from"./Graphics3DObject3DGraphicLayer.js";import{Graphics3DSymbolLayer as F}from"./Graphics3DSymbolLayer.js";import{validateSymbolLayerSize as A}from"./graphicUtils.js";import{ApplyRendererDiffResult as U}from"./interfaces.js";import{namedAnchorToHUDMaterialAnchorPos as L}from"./placementUtils.js";import{placePointOnGeometry as G,updateStageObjectGeometry as V,getLocalOriginForPoint as H,extendPointGraphicElevationContext as k,createStageObject as B}from"./pointUtils.js";import{initFastSymbolUpdatesState as N,updateFastSymbolUpdatesState as $,evaluateModelTransformScale as W,ConvertOptions as q}from"../support/FastSymbolUpdates.js";import{createTexture as J,requiresHalfTexelOffset as Z,defaultBoundingBox as K,defaultSymbolSizeRatio as Q,defaultTexSize as X}from"../../support/engineContent/sdfPrimitives.js";import{drapedZ as Y}from"../../terrain/OverlayRenderer.js";import{createPointGeometry as ee}from"../../webgl-engine/lib/GeometryUtil.js";import{RenderGeometry as te}from"../../webgl-engine/lib/RenderGeometry.js";import{Texture as re}from"../../webgl-engine/lib/Texture.js";import{HUDMaterial as ie}from"../../webgl-engine/materials/HUDMaterial.js";const se=f(0,0,1),oe=16,ae=1.5,ne=[X*Q,X*Q];class le extends F{getCachedSize(){return{size:this._getIconSize()}}constructor(e,t,r,i){super(e,t,r,i),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=C(this.symbolLayer),i=ue(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=A(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):oe);return this._drivenProperties.size?Math.max(t,64):t}_generateTextureCIM(e){const t=this._overrideHelperClass;let r=this._cimData;if(t&&r&&r.symbol||this.logger.error("Can't create texture, CIM data is undefined"),r.primitiveOverrides){r=s(r);const i=r.primitiveOverrides;t.evaluateOverrides(i,e,this._arcadeInfo.geometryType,null,null),t.applyOverrides(r.symbol,i)}const i=u(JSON.stringify(r));let o=this._cimSymbolTextures.get(i);if(o)return o;const a=this._context.sharedResources.cimSymbolRasterizer,n=this._context.renderer&&"dictionary"===this._context.renderer.type?this._context.renderer.fieldMap:null;n&&t.applyDictionaryTextOverrides(r.symbol,e,n,null);const l=null!=this._cimScaleFactorOrFunction?S(this._cimScaleFactorOrFunction,e):1;1!==l&&r.symbol&&P(r.symbol,l,!0);const c=v.getEnvelope(r,null,a.resourceManager);if(c?.width&&c.height){const e=c.x+c.width/2,t=c.y+c.height/2,i=a.rasterize({type:"cim",data:r},c.width,c.height,e,t,1,"esriGeometryPoint",0,null,this._context.graphicsCoreOwner.view.state.rasterPixelRatio),s=new w({x:-c.x/c.width-.5,y:(c.height+c.y)/c.height-.5});this._cimMaterialParametersInfo.anchorPosition=me("relative",s),o=new re(i,{width:i?.width??1,height:i?.height??1,reloadable:!0})}else o=new re(new ImageData(1,1),{width:1,height:1,reloadable:!0});return this._cimSymbolTextures.set(i,o),this._context.stage.add(o),o}_prepareMaterialParameters(){const e={anchorPosition:me(this.symbolLayer.anchor,this.symbolLayer.anchorPosition),rotation:this.symbolLayer.angle},t=this.symbol;if(ce(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(he(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`,(()=>J(t)));this._textureHandle=r,e.textureId=r.texture.id}e.textureIsSignedDistanceField=!0,e.sampleSignedDistanceFieldTexelCenter=Z(t),e.distanceFieldBoundingBox=K;const i=this._getIconSize();this._size=[i,i],this._symbolTextureRatio=1/Q,this._createMaterialAndAddToStage(e,this._context.stage)}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=de(c,o),e.textureId=c.id}this._createMaterialAndAddToStage(e,this._context.stage)}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;v.fetchResources(n,s.resourceManager,o,r),v.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 b(t,this._context.layer.spatialReference,c),{default:i}=await import("../../../2d/arcade/callExpressionWithFeature.js");this._cimScaleFactorOrFunction=(e,t,s)=>{const o=i(r,e,{$view:s},"esriGeometryPoint",t);return null!==o?o: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 this.symbolLayer.resource?.href?null:this.symbolLayer.resource?.primitive??R}_getOutlineSize(){let e=0;const t=this.symbolLayer;if(null!=t.outline?.size)return Math.max(c(t.outline.size),0);return e=he(this._getPrimitive())?ae: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(he(this._getPrimitive()))return O;const e=null==this._getPrimitive(),t=this.symbolLayer?.material?.color;return this._getCombinedOpacityAndColor(t,{hasIntrinsicColor:e})}_createMaterialAndAddToStage(e,t){const r=this._context.spherical;if(this._cimData){this._fastUpdates=null;let i=e.textureId?this._cimSymbolMaterials.get(e.textureId):null;return i||(i=new ie(e,r),this._cimSymbolMaterials.set(e.textureId??0,i),t.add(i)),i}if(this._fastUpdates=N(this._context.renderer,this._fastVisualVariableConvertOptions()),this._fastUpdates&&(e={...e,...this._fastUpdates.materialParameters}),this._materials[0]=new ie(e,r),t.add(this._materials[0]),this._context.graphicsCoreOwner.view.focusAreas.activePolygons.length>0){e.isFocused=!1;const i=this._context.stage.view.focusAreas.style;e.color=z(e.color,i),e.outlineColor=z(e.outlineColor,i),this._materials[1]=new ie(e,r),t.add(this._materials[1])}return 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._forEachMaterial((e=>this._context.stage.remove(e))),this._materials.length=0,this._cimSymbolMaterials.clear(),this._cimSymbolTextures.forEach((e=>this._context.stage.remove(e))),this._cimSymbolTextures.clear(),this._textureHandle=a(this._textureHandle)}_getScaleFactor(e,t){if(this._drivenProperties.size&&e.size){const r=Array.from(e.size);for(let e=0;e<3;e++){const t=r[e];t&&"symbol-value"!==t&&"proportional"!==t&&(r[e]=c(t))}if("symbol-value"===r[0])return 1;if(isFinite(+r[0]))return+r[0]/t;if(isFinite(+r[2]))return+r[2]/t}return 1}_getDrivenRotation(e){return this._drivenProperties.rotation?e.heading??0:0}createGraphics3DGraphic(e){const t=e.graphic;if(!this._validateGeometry(t.geometry))return null;let r,i=[0,0];const s=G(t.geometry);if(null==s)return this.logger.warn(`unsupported geometry type for text symbol: ${t.geometry.type}`),null;const o=this._context.stage.view.focusAreas.containsGeometry(s);if(this._cimData){if(!this._cimData.symbol)return null;const e=this._generateTextureCIM(t),s={textureId:e.id,isFocused:o,...this._cimMaterialParametersInfo};r=this._createMaterialAndAddToStage(s,this._context.stage);const a=this._context.graphicsCoreOwner.view.state.rasterPixelRatio;i=[e.parameters.width/a,e.parameters.height/a]}else i=this._size,r=o||1===this._materials.length?this._materials[0]:this._materials[1];if(null==s)return this.logger.warn(`unsupported geometry type for icon symbol: ${t.geometry.type}`),null;const a=e.renderingInfo,n=this._getVertexOpacityAndColor(a),l=this._getDrivenRotation(a);let c=1;if(!this._fastUpdates?.visualVariables.size){const e=i[0]>i[1]?i[0]:i[1];c=this._getScaleFactor(a,e)}c*=this._symbolTextureRatio;const h=d(i[0]*c,i[1]*c),u=this.setGraphicElevationContext(t);return this.ensureDrapedStatus("on-the-ground"===u.mode)&&this._setDrapingDependentMaterialParameters(),this.draped?this._createAsOverlay(t,s,r,n,l,h,e.layer.uid):this._createAs3DShape(t,s,r,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=G(t);if(!s)return!1;const o=V(i,this._context,s,r);if(null==o)return!1;const a=H(this._context,s);return i.geometries[0].localOrigin===a&&(e.alignedSampledElevation=o,k(e,s,this._context.elevationProvider),!0)}layerElevationInfoChanged(e,t,r){const i=this._elevationContext.mode,s=I(le.elevationModeChangeTypes,r,i);if(s!==M.UPDATE)return s;const o=T(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 U.RecreateSymbol;if(!$(this._fastUpdates,t,this._fastVisualVariableConvertOptions()))return U.RecreateSymbol;this._materials[0]?.setParameters(this._fastUpdates.materialParameters)}return U.FastUpdate}updateFocus(e,t){t.forEach((t=>{const r=this._context.stage.view.focusAreas.containsGeometry(t.graphic.geometry);t.layers.forEach((i=>{if(i?.graphics3DSymbolLayer===this){i.stageObject.geometries.some((e=>e.material.parameters.isFocused!==r))&&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!=ue(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=de(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 pe}_createAs3DShape(e,t,r,i,s,o,a,n){const l=this.getFastUpdateAttrValues(e),c=this._context.layer.uid,h=this._context.stage.renderView.getObjectAndLayerIdColor({graphicUid:n,layerUid:c}),u=ee(r,{normal:se,color:i,rotation:s,size:o,centerOffsetAndDistance:_e,featureAttribute:l,objectAndLayerIdColor:h}),m=B(this._context,t,u,a,n);if(null==m)return null;const d=new D(this,m.object,[u],null,null,j,a);return d.alignedSampledElevation=m.sampledElevation,d.needsElevationUpdates=T(a.mode)||"absolute-height"===a.mode,d.getScreenSize=this._createScreenSizeGetter(o,l),d.calculateRelativeScreenBounds=e=>r.calculateRelativeScreenBounds(d.getScreenSize(),1,e),k(d,t,this._context.elevationProvider),d}_createAsOverlay(e,t,r,i,s,o,a){r.renderPriority=this._renderPriority;const n=_();g(t,n,this._context.overlaySR),n[2]=Y;const l=this._context.clippingExtent;if(null!=l&&!x(l,n))return null;const c=this.getFastUpdateAttrValues(e),h=this._context.stage.renderView.getObjectAndLayerIdColor({graphicUid:e.uid,layerUid:this._context.layer.uid}),u=ee(r,{normal:se,position:n,color:i,rotation:s,size:o,featureAttribute:c,objectAndLayerIdColor:h}),m=new te(u,{layerUid:a,graphicUid:e.uid}),d=new E(this,[m],null,this._context.drapeSourceRenderer);return d.getScreenSize=this._createScreenSizeGetter(o,c),d.calculateRelativeScreenBounds=e=>r.calculateRelativeScreenBounds(d.getScreenSize(),1,e),d}_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]=W(fe,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=f(e,e,e),r=h(1),i=e*r,s=f(i,i,i);return new q({size:!0,color:!0,rotation:!0,opacity:!1},t,s,r)}_forEachMaterial(e){this._materials.forEach(e),this._cimSymbolMaterials.forEach(e)}test(){return{...super.test(),material:this._materials[0]}}}function ce(e){return e&&"point-3d"===e.type&&e.hasVisibleVerticalOffset()}function he(e){return null!=e&&("cross"===e||"x"===e)}function ue(e){const t=m(e);return"application/json"===t?.mediaType?t.data:void 0}function me(e,t){return"relative"===e?d((t.x||0)+.5,.5-(t.y||0)):e in L?L[e]:L.center}function de({parameters:e},t){const r=(e.width??1)/(e.height??1);return r>1?[t,Math.round(t/r)]:[Math.round(t*r),t]}le.PRIMITIVE_SIZE=ne,le.elevationModeChangeTypes={definedChanged:M.UPDATE,staysOnTheGround:M.NONE,onTheGroundChanged:M.RECREATE};const pe={mode:"relative-to-ground",offset:0},_e=y(0,0,0,1),fe=_();export{le as Graphics3DIconSymbolLayer};