@arcgis/core/symbols/support/symbolUtils.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{pt2px as e,toPt as t,px2pt as l}from"../../core/screenUtils.js";import{isSubtypeGroupLayer as a}from"../../layers/support/layerUtils.js";import{loadArcade as i}from"../../support/loadArcade.js";import{getStroke as r}from"./gfxUtils.js";import{renderSymbol as s,renderOnce as o}from"./renderUtils.js";import{isSymbol3D as n}from"./typeUtils.js";import{applyColorToSymbol as c,applySizesToSymbol as u,applyRotationToSymbol as p,getColorFromSymbol as f,applyOpacityToColor as y}from"./utils.js";import{renderRelationshipRamp as h}from"../../widgets/Legend/styles/support/relationshipUtils.js";import{getRelationshipRampElement as m}from"../../widgets/Legend/support/relationshipRampUtils.js";let d=null;const b=[255,255,255];function g(e,t){return Math.floor(Math.random()*(t-e+1)+e)}function w(e,t,l){const{backgroundColor:a,outline:i,dotSize:r}=e,s=l?.swatchSize||22,o=.8,n=Math.round(s*s/Math.max(r,.5)**2*o),c=window.devicePixelRatio,u=document.createElement("canvas"),p=s*c;u.width=p,u.height=p,u.style.width=u.width/c+"px",u.style.height=u.height/c+"px";const f=u.getContext("2d");if(a&&(f.fillStyle=a.toCss(!0),f.fillRect(0,0,p,p),f.fill()),f.fillStyle=t?.toCss(!0)??"",d&&d.length/2===n)for(let h=0;h<2*n;h+=2){const e=d[h],t=d[h+1];f.fillRect(e,t,r*c,r*c),f.fill()}else{d=[];for(let e=0;e<2*n;e+=2){const e=g(0,p),t=g(0,p);d.push(e,t),f.fillRect(e,t,r*c,r*c),f.fill()}}i&&(i.color&&(f.strokeStyle=i.color.toCss(!0)),f.lineWidth=i.width,f.strokeRect(0,0,p,p));const y=new Image(s,s);return y.src=u.toDataURL(),y.ariaLabel=l?.ariaLabel??null,y.alt=l?.ariaLabel??"",y}function S(e,t={}){const l=t.radius||40,a=2*Math.PI*l,i=e.length,o=a/i,n=[],c=r(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,p=u?.length===i&&100===u.reduce((e,t)=>e+t,0),f=[0];for(let r=0;r<i;r++){let t=null;p&&(t=u[r]*a/100,f.push(t+f[r])),n.push({shape:{type:"circle",cx:l,cy:l,r:l/2},fill:[0,0,0,0],stroke:{width:l,dashArray:`${(t??o)/2} ${a}`,dashoffset:"-"+(p?f[r]/2:r*(o/2)),color:e[r]},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 s([n],[h,h],{cssEffectFilter:t.cssEffectFilter,ignoreStrokeWidth:!0,masking:y,rotations:[-90],ariaLabel:t.ariaLabel})}function v(e,t={}){const l=e?.authoringInfo;if(!("relationship"===l?.type)||!l?.numClasses||!e.uniqueValueInfos)return null;const{focus:a,numClasses:i}=l,r=m({focus:a,numClasses:i,infos:e.uniqueValueInfos}),s=t?.node||document.createElement("div");return o(s,()=>h(r,t.id||"relationship",{opacity:t.opacity||1,cssEffectFilter:t.cssEffectFilter,ariaLabel:t.ariaLabel})),s}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,p=o*u,f=n*u,y=document.createElement("canvas");y.width=p,y.height=f,y.ariaLabel=t.ariaLabel??null,y.style.width=`${o}px`,y.style.height=`${n}px`;const h=y.getContext("2d"),m=i?p:0,d=i?0:f;if(c){const t=h.createLinearGradient(0,0,m,d),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,p,f)}else{const t=i?p/e.length:p,l=i?f:f/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 b=document.createElement("div");return b.style.width=`${o}px`,b.style.height=`${n}px`,x(b,t?.cssEffectFilter),b.appendChild(y),b}function k(e){const t=e.match(/drop-shadow\(\s*([^\s]+)\s+[^\s]+\s+[^\s]+\s+.+?\)/);return t?t[1]:null}function x(l,a){if(!a)return;l.style.filter=a;const i=k(a);if(i){const a=e(t(i));a<0?l.style.marginLeft=`${Math.abs(a)}px`:l.style.marginRight=`${a}px`}}async function F(e,t){switch(e.type){case"web-style":{const{previewWebStyleSymbol:l}=await import("./previewWebStyleSymbol.js");return l(e,F,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&&void 0!==e.opacity?e.opacity*("parent"in e?L(e.parent):1):1}async function R(e,t){if(!e)return;const l=e.sourceLayer,a=(null!=t&&t.useSourceLayer?l:e.layer)??l,r=t?.ignoreOpacity?1:L(a);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 c(l,null,{add:r}),l}const s=t?.renderer??I(a);let o=s&&"getSymbolAsync"in s?await s.getSymbolAsync(e,t):null;if(!o)return;if(o="web-style"===o.type?await o.fetchSymbol({...t,acceptedFormats:t?.webStyleAcceptedFormats,cache:t?.webStyleCache}):o.clone(),!(s&&"visualVariables"in s&&s.visualVariables?.length&&j(o)))return c(o,null,{add:r}),o;if("arcadeRequiredForVisualVariables"in s&&s.arcadeRequiredForVisualVariables&&null==t?.arcade){const e={...t};e.arcade=await i(),t=e}const{getColor:n,getOpacity:f,getAllSizes:y,getRotationAngle:h}=await import("../../renderers/visualVariables/support/visualVariableUtils.js"),m=[],d=[],b=[],g=[];for(const i of s.visualVariables)switch(i.type){case"color":m.push(i);break;case"opacity":d.push(i);break;case"rotation":g.push(i);break;case"size":i.target||b.push(i)}const w=!!m.length&&m[m.length-1],S=w?n(w,e,t):null,v=!!t?.ignoreOpacity,V=!!d.length&&d[d.length-1],k=V?f(V,e,t):null;if(c(o,S,v?void 0:{override:k,add:r}),b.length&&!0!==t?.ignoreSizeVariables){const l=y(b,e,t);await u(o,l)}if(!0!==t?.ignoreRotationVariables)for(const i of g)p(o,h(i,e,t),i.axis);return o}async function C(e,t){if(!e)return;const{layer:l,sourceLayer:a}=e,r=L(l??a);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??I(l)??I(a);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,void 0);if(!s||!("visualVariables"in s)||"visualVariables"in s&&!s.visualVariables||"visualVariables"in s&&!s.visualVariables?.length||!j(o))return n?y(n,r):void 0;if("arcadeRequiredForVisualVariables"in s&&s.arcadeRequiredForVisualVariables&&null==t?.arcade){const e={...t};e.arcade=await i(),t=e}const{getColor:c,getOpacity:u}=await import("../../renderers/visualVariables/support/visualVariableUtils.js"),p=[],h=[];if(s.visualVariables)for(const i of s.visualVariables)switch(i.type){case"color":p.push(i);break;case"opacity":h.push(i)}const m=p.length>0?p[p.length-1]:null,d=(m?c(m,e,t):void 0)??n,b=h.length>0?h[h.length-1]:null,g=b?u(b,e,t):null;return null!=d&&null!=g&&(d.a=g),d?y(d,r):null}function j(e){return!n(e)||"water"!==e.symbolLayers.at(0)?.type}function I(e){if(e)return"renderer"in e?e.renderer:void 0}async function z(e,t,l){if(!e)return;const{layer:a,sourceLayer:i}=e,r=l?.renderer??I(a)??I(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"),{getFormatOptionsForVisualVariable: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 p=null;switch(c.type){case"color":p=await i(c,null,u);break;case"opacity":p=await i(c);break;case"size":c.target||(p=await s(r,c,null,l?.scale||t?.scale,t,u))}if(p?.length){const t=p.find((t,l)=>{const a=e.attributes[c.field];return 0===l?a>=t.value:l===p?.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 U(e,t){e?.layer&&a(e.layer)&&((e=e.cloneShallow()).layer=e.layer.findSublayerForFeature(e)??null);const i=null===e?t?.fallbackSymbol??null:await R(e,{ignoreGraphicSymbol:!!e.layer,ignoreOpacity:t?.ignoreOpacity??!0,ignoreRotationVariables:t?.ignoreRotationVariables??!0,ignoreSizeVariables:t?.ignoreSizeVariables??!0})??t?.fallbackSymbol??null;if(!i)return null;let r=!t.useGeometryForShape||!e?.geometry;r&&"polygon"===e?.layer?.geometryType&&(r=!1);const s=await F(i,{geometry:t.useGeometryForShape?e?.geometry??null:null,useMarkerSymbolSize:!1!==t.useMarkerSymbolSize,...r?{maxSize:l(t.widthInPixels??16)}:{size:{width:l(t.widthInPixels??16),height:l(t.heightInPixels??16)}},..."cim"===i?.type?{cimOptions:{feature:{attributes:e?.attributes??{}}}}:{}});if(!s)return null;return"element"===(t?.format??"element")?s:s.outerHTML}export{C as getDisplayedColor,R as getDisplayedSymbol,z as getLegendLabel,U as previewGraphic,V as renderColorRampPreviewHTML,w as renderDotDensityPreviewHTML,S as renderPieChartPreviewHTML,F as renderPreviewHTML,v as renderRelationshipRampPreviewHTML};