@arcgis/core/symbols/support/symbolUtils.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"../../core/has.js";import{px2pt as e}from"../../core/screenUtils.js";import{isSubtypeGroupLayer as t}from"../../layers/support/layerUtils.js";import{loadArcade as l}from"../../support/loadArcade.js";import{getStroke as a}from"./gfxUtils.js";import{SymbolSizeDefaults as i}from"./previewUtils.js";import{renderSymbol as r,renderOnce as s}from"./renderUtils.js";import{applyColorToSymbol as o,applySizesToSymbol as n,applyRotationToSymbol as c,getCSSFilterFromEffectList as u,getColorFromSymbol as f,applyOpacityToColor as p}from"./utils.js";import{renderRelationshipRamp as y}from"../../widgets/Legend/styles/support/relationshipUtils.js";import{getRelationshipRampElement as h}from"../../widgets/Legend/support/relationshipRampUtils.js";let m=null;const b=[255,255,255];function d(e,t){return Math.floor(Math.random()*(t-e+1)+e)}function g(e,t,l){const{backgroundColor:a,outline:r,dotSize:s}=e,o=l?.swatchSize||i.size,n=.8,c=Math.round(o*o/Math.max(s,.5)**2*n),u=window.devicePixelRatio,f=document.createElement("canvas"),p=o*u;f.width=p,f.height=p,f.style.width=f.width/u+"px",f.style.height=f.height/u+"px";const y=f.getContext("2d");if(a&&(y.fillStyle=a.toCss(!0),y.fillRect(0,0,p,p),y.fill()),y.fillStyle=t?.toCss(!0)??"",m&&m.length/2===c)for(let i=0;i<2*c;i+=2){const e=m[i],t=m[i+1];y.fillRect(e,t,s*u,s*u),y.fill()}else{m=[];for(let e=0;e<2*c;e+=2){const e=d(0,p),t=d(0,p);m.push(e,t),y.fillRect(e,t,s*u,s*u),y.fill()}}r&&(r.color&&(y.strokeStyle=r.color.toCss(!0)),y.lineWidth=r.width,y.strokeRect(0,0,p,p));const h=new Image(o,o);return h.src=f.toDataURL(),h.ariaLabel=l?.ariaLabel??null,h.alt=l?.ariaLabel??"",h}function w(e,t={}){const l=t.radius||40,i=2*Math.PI*l,s=e.length,o=i/s,n=[],c=a(t.outline);null!=c?.width&&(c.width*=2),(c||t.backgroundColor)&&n.push({shape:{type:"circle",cx:l,cy:l,r:l},fill:t.backgroundColor,stroke:c,offset:[0,0]});const u=t.values,f=u&&u.length===s&&100===u.reduce(((e,t)=>e+t),0),p=[0];for(let a=0;a<s;a++){let t=null;f&&(t=u[a]*i/100,p.push(t+p[a])),n.push({shape:{type:"circle",cx:l,cy:l,r:l/2},fill:[0,0,0,0],stroke:{width:l,dashArray:`${(t??o)/2} ${i}`,dashoffset:"-"+(f?p[a]/2:a*(o/2)),color:e[a]},offset:[0,0]})}let y=null;const h=2*l+(c?.width||0),m=t.holePercentage;if(m){c&&n.push({shape:{type:"circle",cx:l,cy:l,r:l*m},fill:null,stroke:c,offset:[0,0]});const e=h/2;y=[[{shape:{type:"circle",cx:e,cy:e,r:e},fill:b,stroke:c?{...c,color:b}:null,offset:[0,0]},{shape:{type:"circle",cx:e,cy:e,r:l*m},fill:[0,0,0],stroke:null,offset:[0,0]}]]}return r([n],[h,h],{effectView:t.effectList,ignoreStrokeWidth:!0,masking:y,rotations:[-90],ariaLabel:t.ariaLabel})}function S(e,t={}){const l=e?.authoringInfo;if(!("relationship"===l?.type)||!l?.numClasses||!e.uniqueValueInfos)return null;const{focus:a,numClasses:i}=l,r=h({focus:a,numClasses:i,infos:e.uniqueValueInfos}),o=t?.node||document.createElement("div");return s(o,(()=>y(r,t.id||"relationship",{opacity:t.opacity||1,effectList:t.effectList,ariaLabel:t.ariaLabel}))),o}function v(e,t={}){const l=24,a=75,i="horizontal"===t.align,r=i?a:l,s=i?l:a,o=t.width??r,n=t.height??s,c=t.gradient??!0,u=window.devicePixelRatio,f=o*u,p=n*u,y=document.createElement("canvas");y.width=f,y.height=p,y.ariaLabel=t.ariaLabel??null,y.style.width=`${o}px`,y.style.height=`${n}px`;const h=y.getContext("2d"),m=i?f:0,b=i?0:p;if(c){const t=h.createLinearGradient(0,0,m,b),l=e.length,a=1===l?0:1/(l-1);e.forEach(((e,l)=>t.addColorStop(l*a,e.toString()))),h.fillStyle=t,h.fillRect(0,0,f,p)}else{const t=i?f/e.length:f,l=i?p:p/e.length;let a=0,r=0;for(const s of e)h.fillStyle=s.toString(),h.fillRect(a,r,t,l),a=i?a+t:0,r=i?0:r+l}const d=document.createElement("div");return d.style.width=`${o}px`,d.style.height=`${n}px`,V(d,t?.effectList),d.appendChild(y),d}function V(e,t){if(!t)return;e.style.filter=u(t);const l=t.effects;if(l)for(const a of l)if("drop-shadow"===a?.type){a.offsetX<0?e.style.marginLeft=`${Math.abs(a.offsetX)}px`:e.style.marginRight=`${a.offsetX}px`;break}}async function k(e,t){switch(e.type){case"web-style":{const{previewWebStyleSymbol:l}=await import("./previewWebStyleSymbol.js");return l(e,k,t)}case"label-3d":case"line-3d":case"mesh-3d":case"point-3d":case"polygon-3d":{const{previewSymbol3D:l}=await import("./previewSymbol3D.js");return l(e,t)}case"simple-marker":case"simple-line":case"simple-fill":case"picture-marker":case"picture-fill":case"text":{const{previewSymbol2D:l}=await import("./previewSymbol2D.js");return l(e,t)}case"cim":{const{previewCIMSymbol:l}=await import("./previewCIMSymbol.js");return l(e,t)}default:return}}function L(e){return e&&"opacity"in e?e.opacity*L(e.parent):1}async function x(e,t){if(!e)return;const a=e.sourceLayer,i=(null!=t&&t.useSourceLayer?a:e.layer)??a,r=t?.ignoreOpacity?1:L(i);if(null!=e.symbol&&(null==t||!0!==t.ignoreGraphicSymbol)){const l="web-style"===e.symbol.type?await e.symbol.fetchSymbol({...t,acceptedFormats:t?.webStyleAcceptedFormats,cache:t?.webStyleCache}):e.symbol.clone();return o(l,null,r),l}const s=t?.renderer??C(i);let u=s&&"getSymbolAsync"in s?await s.getSymbolAsync(e,t):null;if(!u)return;if(u="web-style"===u.type?await u.fetchSymbol({...t,acceptedFormats:t?.webStyleAcceptedFormats,cache:t?.webStyleCache}):u.clone(),!s||!("visualVariables"in s)||!s.visualVariables?.length)return o(u,null,r),u;if("arcadeRequiredForVisualVariables"in s&&s.arcadeRequiredForVisualVariables&&null==t?.arcade){const e={...t};e.arcade=await l(),t=e}const{getColor:f,getOpacity:p,getAllSizes:y,getRotationAngle:h}=await import("../../renderers/visualVariables/support/visualVariableUtils.js"),m=[],b=[],d=[],g=[];for(const l of s.visualVariables)switch(l.type){case"color":m.push(l);break;case"opacity":b.push(l);break;case"rotation":g.push(l);break;case"size":l.target||d.push(l)}const w=!!m.length&&m[m.length-1],S=w?f(w,e,t):null,v=!!b.length&&b[b.length-1];let V=v?p(v,e,t):null;if(null!=r&&(V=null!=V?V*r:r),t?.ignoreOpacity&&(V=1),null!=S&&v&&null!=V&&(S.a=1),o(u,S,V),d.length&&!0!==t?.ignoreSizeVariables){const l=y(d,e,t);await n(u,l)}if(!0!==t?.ignoreRotationVariables)for(const l of g)c(u,h(l,e,t),l.axis);return u}async function R(e,t){if(!e)return;const{layer:a,sourceLayer:i}=e,r=L(a??i);if(null!=e.symbol&&(null==t||!0!==t.ignoreGraphicSymbol)){const l="web-style"===e.symbol.type?await e.symbol.fetchSymbol({...t,acceptedFormats:t?.webStyleAcceptedFormats}):e.symbol.clone();return f(l,r)}const s=t?.renderer??C(a)??C(i);let o=s&&"getSymbolAsync"in s?await s.getSymbolAsync(e,t):void 0;if(!o)return;o="web-style"===o.type?await o.fetchSymbol({...t,acceptedFormats:t?.webStyleAcceptedFormats}):o.clone();const n=f(o,r);if(!s||!("visualVariables"in s)||"visualVariables"in s&&!s.visualVariables||"visualVariables"in s&&!s.visualVariables?.length)return n;if("arcadeRequiredForVisualVariables"in s&&s.arcadeRequiredForVisualVariables&&null==t?.arcade){const e={...t};e.arcade=await l(),t=e}const{getColor:c,getOpacity:u}=await import("../../renderers/visualVariables/support/visualVariableUtils.js"),y=[],h=[];if(s.visualVariables)for(const l of s.visualVariables)switch(l.type){case"color":y.push(l);break;case"opacity":h.push(l)}const m=y.length>0?y[y.length-1]:null,b=m?c(m,e,t):n,d=h.length>0?h[h.length-1]:null;let g=d?u(d,e,t):null;return null!=r&&(g=null!=g?g*r:r),b?p(b,g):null}function C(e){if(e)return"renderer"in e?e.renderer:void 0}async function j(e,t,l){if(!e)return;const{layer:a,sourceLayer:i}=e,r=l?.renderer??C(a)??C(i);if(!r)return null;if("visualVariables"in r&&r.visualVariables?.length){const{getRampStops:i}=await import("../../widgets/Legend/support/colorRampUtils.js"),{getRampStops:s}=await import("../../widgets/Legend/support/sizeRampUtils.js"),{getDateFormatOptions:o}=await import("../../widgets/Legend/support/utils.js");let n=null;for(const c of r.visualVariables){const u=t?o(a,c,t.timeZone):null;let f=null;switch(c.type){case"color":f=await i(c,null,u);break;case"opacity":f=await i(c);break;case"size":c.target||(f=await s(r,c,null,l?.scale||t?.scale,t,u))}if(f?.length){const t=f.find(((t,l)=>{const a=e.attributes[c.field];return 0===l?a>=t.value:l===f?.length-1?a<=t.value:t.value===a}));if(t){n=t.label;break}}}if(n)return n}switch(r.type){case"class-breaks":{const t="getClassBreakInfo"in r?await r.getClassBreakInfo(e,l):null;return t?.label??(t&&r.classBreakInfos?.length>1)?`${t.minValue} - ${t.maxValue}`:null}case"unique-value":{const t="getUniqueValueInfo"in r?await r.getUniqueValueInfo(e,l):null;return t?.label}}return null}async function F(l,a){l?.layer&&t(l.layer)&&((l=l.cloneShallow()).layer=l.layer.findSublayerForFeature(l)??null);const i=null===l?a?.fallbackSymbol??null:await x(l,{ignoreGraphicSymbol:!!l.layer,ignoreOpacity:a?.ignoreOpacity??!0,ignoreRotationVariables:a?.ignoreRotationVariables??!0,ignoreSizeVariables:a?.ignoreSizeVariables??!0})??a?.fallbackSymbol??null;if(!i)return null;const r=await k(i,{geometry:a.useGeometryForShape?l?.geometry??null:null,useMarkerSymbolSize:!1!==a.useMarkerSymbolSize,size:{width:e(a.widthInPixels??16),height:e(a.heightInPixels??16)},..."cim"===i?.type?{cimOptions:{feature:{attributes:l?.attributes??{}}}}:{}});if(!r)return null;return"element"===(a?.format??"element")?r:r.outerHTML}export{R as getDisplayedColor,x as getDisplayedSymbol,j as getLegendLabel,F as previewGraphic,v as renderColorRampPreviewHTML,g as renderDotDensityPreviewHTML,w as renderPieChartPreviewHTML,k as renderPreviewHTML,S as renderRelationshipRampPreviewHTML};