@arcgis/core/symbols/support/previewSymbol2D.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 t from"../../Color.js";import{getColorLuminance as e}from"../../core/colorUtils.js";import i from"../../core/Error.js";import{loadFont as o}from"../../core/fontUtils.js";import{pt2px as n}from"../../core/screenUtils.js";import{quantizePolygon as a,quantizePolyline as l}from"../../geometry/support/quantizationUtils.js";import{getFill as s,getStroke as r,getDashArray as h,getPatternUrlWithColor as c}from"./gfxUtils.js";import{SymbolSizeDefaults as m,shapes as u,adjustColorBrightness as p}from"./previewUtils.js";import{renderSymbol as d}from"./renderUtils.js";import{backgroundPadding as f}from"./textUtils.js";const g="picture-fill",y="picture-marker",w="simple-fill",x="simple-line",b="simple-marker",v="text",M="Aa",S=m.size,z=m.maxSize,k=m.maxOutlineSize,L=m.lineWidth,C=225,$=document.createElement("canvas");function j(t,e,i){if("polygon"===t.type){const o=t.extent,n=0===o.width?1:o.width,l=0===o.height?1:o.height;t=a({originPosition:"upperLeft",scale:[n/e,l/i],translate:[o.xmin,o.ymax]},{},t);let s="";for(let e=0;e<t.rings.length;e++){const i=t.rings[e];for(let t=0;t<i.length;t++){const e=i[t][0],o=i[t][1];let n="";0===t?(n=`M${e.toString()} ${o.toString()}`,""!==s&&(n=` ${n}`),s+=n):t===i.length-1?(n=`l${e.toString()} ${o.toString()} Z`,""!==s&&(n=` ${n}`),s+=n):(n=`l${e.toString()} ${o.toString()}`,""!==s&&(n=` ${n}`),s+=n)}}return s}if("polyline"===t.type){const o=t.extent,n=0===o.width?1:o.width,a=0===o.height?1:o.height;t=l({originPosition:"upperLeft",scale:[n/e,a/i],translate:[o.xmin,o.ymax]},{},t);let s="";for(let e=0;e<t.paths.length;e++){const i=t.paths[e];for(let t=0;t<i.length;t++){const e=i[t][0],o=i[t][1];let n="";0===t?(n=`M${e.toString()} ${o.toString()}`,""!==s&&(n=` ${n}`),s+=n):(n=`l${e.toString()} ${o.toString()}`,""!==s&&(n=` ${n}`),s+=n)}}return s}return""}function B(t,e){const i=$.getContext("2d"),o=[];e&&(e.weight&&o.push(e.weight),e.size&&o.push(e.size+"px"),e.family&&o.push(e.family)),i.font=o.join(" ");const{width:n,actualBoundingBoxLeft:a,actualBoundingBoxRight:l,actualBoundingBoxAscent:s,actualBoundingBoxDescent:r}=i.measureText(t);return{width:Math.ceil(Math.max(n,a+l)),height:Math.ceil(s+r),x:Math.floor(a),y:Math.floor((s-r)/2)}}function P(t){const e=t?.size;return{width:null!=e&&"object"==typeof e&&"width"in e?n(e.width):null,height:null!=e&&"object"==typeof e&&"height"in e?n(e.height):null}}async function E(t,e){const i=e.fill,o=t.color;if("pattern"===i?.type&&o&&t.type!==g){const t=await c(i.src,o.toCss(!0));i.src=t,e.fill=i}}async function U(t,e,i,n){if(!("font"in t)||!t.font||"text"!==e.shape.type)return;try{await o(t.font)}catch{}const{width:a,height:l}=P(n);if(!/[\uE600-\uE6FF]/.test(e.shape.text)){const{width:o,height:s,x:r,y:h}=B(e.shape.text,{weight:e.font?.weight,size:e.font?.size,family:e.font?.family});i[0]=a??o,i[1]=l??s,e.shape.x=r,e.shape.y=h;let c="angle"in t?t.angle:null;if(null!=n?.rotation&&(c=(c??0)+n.rotation),c){const t=c*(Math.PI/180),e=Math.abs(Math.sin(t)),o=Math.abs(Math.cos(t));i[1]=i[0]*e+i[1]*o}}}function A(t,e,i,o,a){if(null!=t.haloColor&&null!=t.haloSize){a.masking??=i.map((()=>[]));const l=n(t.haloSize);o[0]+=l,o[1]+=l,i.unshift([{...e,fill:null,stroke:{color:t.haloColor,width:2*l,join:"round",cap:"round"}}]),a.masking.unshift([{shape:{type:"rect",x:0,y:0,width:o[0]+2*f,height:o[1]+2*f},fill:[255,255,255],stroke:null},{...e,fill:[0,0,0,0],stroke:null}])}null==t.backgroundColor&&null==t.borderLineColor||(o[0]+=2*f,o[1]+=2*f,i.unshift([{shape:{type:"rect",x:0,y:0,width:o[0],height:o[1]},fill:t.backgroundColor,stroke:{color:t.borderLineColor,width:n(t.borderLineSize)}}]),a.masking?.unshift([]))}function F(t,e){return t>e?"dark":"light"}function Z(t,e){const i="number"==typeof e?.size?e?.size:null,o=null!=i?n(i):null,a=null!=e?.maxSize?n(e.maxSize):null;let l="angle"in t?t.angle:null;null!=e?.rotation&&(l=(l??0)+e.rotation);const c=s(t);let m=r(t);"dark"!==q(t,245)||e?.ignoreWhiteSymbols||(m={width:.75,...m,color:"#bdc3c7"});let p=null;const d={shape:null,fill:c,stroke:m,offset:[0,0]};m?.width&&(m.width=Math.min(m.width,k));const f=m?.width||0;let C=null!=e?.size&&(null==e?.scale||e?.scale),$=0,E=0,U=!1;switch(t.type){case b:{const i=t.style,{width:s,height:r}=P(e);let h=s===r&&null!=s?s:null!=o?o:Math.min(n(t.size),a||z);if(!0===e?.useMarkerSymbolSize&&null!==s&&null!==r){const e=Math.min(n(t.size),a||z);h=e>s&&e>r?Math.min(s,r):e}switch($=h,E=h,i){case"circle":d.shape={type:"circle",cx:0,cy:0,r:.5*h},C||($+=f,E+=f);break;case"cross":d.shape={type:"path",path:[{command:"M",values:[0,.5*E]},{command:"L",values:[$,.5*E]},{command:"M",values:[.5*$,0]},{command:"L",values:[.5*$,E]}]};break;case"diamond":d.shape={type:"path",path:[{command:"M",values:[0,.5*E]},{command:"L",values:[.5*$,0]},{command:"L",values:[$,.5*E]},{command:"L",values:[.5*$,E]},{command:"Z",values:[]}]},C||($+=f,E+=f);break;case"square":d.shape={type:"path",path:[{command:"M",values:[0,0]},{command:"L",values:[$,0]},{command:"L",values:[$,E]},{command:"L",values:[0,E]},{command:"Z",values:[]}]},C||($+=f,E+=f),l&&(U=!0);break;case"triangle":d.shape={type:"path",path:[{command:"M",values:[.5*$,0]},{command:"L",values:[$,E]},{command:"L",values:[0,E]},{command:"Z",values:[]}]},C||($+=f,E+=f),l&&(U=!0);break;case"x":d.shape={type:"path",path:[{command:"M",values:[0,0]},{command:"L",values:[$,E]},{command:"M",values:[$,0]},{command:"L",values:[0,E]}]},l&&(U=!0);break;case"path":d.shape={type:"path",path:t.path||""},C||($+=f,E+=f),l&&(U=!0),C=!0}break}case x:{const{width:t,height:i}=P(e),n=h(m).reduce(((t,e)=>t+e),0),a=n&&Math.ceil(L/n),l=i??o??f,s=t??(n*a||L);if(C=!0,"polyline"===e?.geometry?.type&&e?.geometry?.extent){$=s,E=i??$;const t=1e3,o=.15*t;p=[$,E],E=p[0]>p[1]?t*p[1]/p[0]:t,$=p[0]>p[1]?t:t*p[0]/p[1],m?.width&&(m.width=m.width*t/(p[1]>p[0]?p[1]:p[0]),m.width>o&&(m.width=o)),d.shape={type:"path",path:j(e.geometry,$,E)}}else $=null!=e?.maxSize?Math.min(s,e.maxSize):s,E=l,m&&(m.width=l),d.shape={type:"path",path:[{command:"M",values:[l/2,E/2]},{command:"L",values:[$-l/2,E/2]}]};break}case g:case w:{const t="object"==typeof e?.symbolConfig&&!!e?.symbolConfig?.isSquareFill,{width:i,height:n}=P(e);$=!t&&i!==n||null==i?null!=o?o:S:i,E=!t&&i!==n||null==n?$:n,C||($+=f,E+=f),C=!0,e?.geometry?.extent&&"polygon"===e?.geometry?.type?(p=[$,E],E=p[0]>p[1]?1e3*p[1]/p[0]:1e3,$=p[0]>p[1]?1e3:1e3*p[0]/p[1],d.shape={type:"path",path:j(e.geometry,$,E)}):d.shape=t?{type:"path",path:[{command:"M",values:[0,0]},{command:"L",values:[$,0]},{command:"L",values:[$,E]},{command:"L",values:[0,E]},{command:"L",values:[0,0]},{command:"Z",values:[]}]}:u.fill[0];break}case y:{const i=Math.min(n(t.width),a||z),s=Math.min(n(t.height),a||z),{width:r,height:h}=P(e),c=r===h&&null!=r?r:null!=o?o:Math.max(i,s),m=t.width/t.height;$=m<=1?Math.ceil(c*m):c,E=m<=1?c:Math.ceil(c/m),d.shape={type:"image",x:-Math.round($/2),y:-Math.round(E/2),width:$,height:E,src:t.url||""},l&&(U=!0);break}case v:{const i=t,l=e?.overrideText||i.text||M,s=i.font,{width:r,height:h}=P(e),c=null!=h?h:null!=o?o:Math.min(n(s.size),a||z),{width:m,height:u}=B(l,{weight:s.weight,size:c,family:s.family}),p=/[\uE600-\uE6FF]/.test(l);$=r??(p?c:m),E=p?c:u;let f=.5*(p?c:u);p&&(f+=5),d.shape={type:"text",text:l,x:i.xoffset||0,y:i.yoffset||f,align:"middle",alignBaseline:i.verticalAlignment,decoration:s&&s.decoration,rotated:i.rotated,kerning:i.kerning},d.font=s&&{size:c,style:s.style,decoration:s.decoration,weight:s.weight,family:s.family};break}}return{shapeDescriptor:d,size:[$,E],outputSize:p,renderOptions:{node:e?.node,scale:C,opacity:e?.opacity,rotations:[l],useRotationSize:U,effectView:e?.effectView,ariaLabel:e?.ariaLabel,clipBloomEffect:e?.clipBloomEffect}}}async function D(t,e){const{shapeDescriptor:o,size:n,renderOptions:a,outputSize:l}=Z(t,e);if(!o.shape)throw new i("symbolPreview: renderPreviewHTML2D","symbol not supported.");await E(t,o),await U(t,o,n,e);const s=[[o]];if("object"==typeof e?.symbolConfig&&e?.symbolConfig?.applyColorModulation){const t=.6*n[0];s.unshift([{...o,offset:[-t,0],fill:p(o.fill,-.3)}]),s.push([{...o,offset:[t,0],fill:p(o.fill,.3)}]),n[0]+=2*t,a.scale=!1}"text"===t.type&&A(t,o,s,n,a);const r=d(s,n,a);if(l&&r){const t="img"===r.nodeName.toLowerCase()?r:r.firstChild;"svg"===t.nodeName.toLowerCase()&&t.setAttribute("viewBox",`0 0 ${n[0].toString()} ${n[1].toString()}`),t.setAttribute("width",l[0].toString()),t.setAttribute("height",l[1].toString()),l.length>2&&(t.style.setProperty("padding-left",l[2]?.toString()+"px"),t.style.setProperty("padding-right",l[2]?.toString()+"px"),t.style.setProperty("padding-top",l[3]?.toString()+"px"),t.style.setProperty("padding-bottom",l[3]?.toString()+"px"),t.style.setProperty("box-sizing","border-box"))}return r}function q(i,o=C){const n=s(i),a=r(i),l=!n||"type"in n?null:new t(n),h=a?.color?new t(a?.color):null,c=l?F(e(l),o):null,m=h?F(e(h),o):null;return m?c?c===m?c:o>=C?"light":"dark":m:c}export{q as getContrastingBackgroundTheme,Z as getRenderSymbolParameters,D as previewSymbol2D};