@arcgis/core/symbols/support/previewSymbol3D.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{getAssetUrl as e}from"../../assets.js";import{toHSV as t,toRGB as l}from"../../core/colorUtils.js";import"../../core/has.js";import a from"../../core/Error.js";import s from"../../core/Logger.js";import{pt2px as n}from"../../core/screenUtils.js";import{defaultThematicColor as r,dekebabifyLineStyle as o,getPatternUrlWithColor as i}from"./gfxUtils.js";import{defaultPrimitive as c}from"./IconSymbol3DLayerResource.js";import{defaultPrimitive as p}from"./ObjectSymbol3DLayerResource.js";import{SymbolSizeDefaults as u,adjustColorComponentBrightness as h,getExtrudeSymbolShapes as m,shapes as f,getPathSymbolShapes as y,getTetrahedronShapes as d,getDiamondShapes as b,getCylinderShapes as k,getCubeShapes as v,getInvertedConeShapes as g,getConeShapes as w,getWaterSymbolShapes as x}from"./previewUtils.js";import{renderSymbol as M,tintImageWithColor as L}from"./renderUtils.js";import{isVolumetricSymbol as j,getIconHref as z}from"./utils.js";import{resolveWebStyleSymbol as S}from"./webStyleSymbolUtils.js";const P=u.size,D=u.maxSize,U=u.maxOutlineSize,O=u.lineWidth,C=u.tallSymbolWidth;function R(e){const t=e.outline,l=null!=e.material?e.material.color:null,a=null!=l?l.toHex():null;if(null==t||"pattern"in t&&null!=t.pattern&&"style"===t.pattern.type&&"none"===t.pattern.style)return"fill"===e.type&&"#ffffff"===a?{color:"#bdc3c7",width:.75}:null;const s=n(t.size)||0;return{color:"rgba("+(null!=t.color?t.color.toRgba():"255,255,255,1")+")",width:Math.min(s,U),style:"pattern"in t&&null!=t.pattern&&"style"===t.pattern.type?o(t.pattern.style):null,join:"butt",cap:"patternCap"in t?t.patternCap:"butt"}}async function E(t,l){if(t.thumbnail?.url)return t.thumbnail.url;if("icon"===l.type){const e=l?.resource?.href;if(e)return z(l)}const a=e("esri/images/Legend/legend3dsymboldefault.png");if(t.styleOrigin&&(t.styleOrigin.styleName||t.styleOrigin.styleUrl)){const e=await S(t.styleOrigin,{portal:t.styleOrigin.portal}).catch((()=>null));if(e&&"thumbnail"in e&&e.thumbnail?.url)return e.thumbnail.url}return a}function q(e,a=1){const s=e.a,n=t(e),r=n.h,o=n.s/a,i=100-(100-n.v)/a,{r:c,g:p,b:u}=l({h:r,s:o,v:i});return[c,p,u,s]}function I(e){return"water"===e.type?null==e.color?null:e.color:null==e.material?.color?null:e.material.color}function Z(e,t=0){const l=I(e);if(!l){if("fill"===e.type)return null;const l=r.r,a=h(l,t);return[a,a,a,100]}const a=l.toRgba();for(let s=0;s<3;s++)a[s]=h(a[s],t);return a}async function H(t,l){const a=t.style;if("none"===a)return null;return{type:"pattern",x:0,y:0,src:await i(e(`esri/symbols/patterns/${a}.png`),l.toCss(!0)),width:5,height:5}}function N(e){return e.outline?R(e):{color:"rgba(0, 0, 0, 1)",width:1.5}}function T(e,t){const l=I(e);if(!l)return null;let a="rgba(";return a+=h(l.r,t)+",",a+=h(l.g,t)+",",a+=h(l.b,t)+",",a+l.a+");"}function W(e,t){const l=T(e,t);if(!l)return{};if("pattern"in e&&null!=e.pattern&&"style"===e.pattern.type&&"none"===e.pattern.style)return null;return{color:l,width:Math.min(e.size?n(e.size):.75,U),style:"pattern"in e&&null!=e.pattern&&"style"===e.pattern.type?o(e.pattern.style):null,cap:"cap"in e?e.cap:null,join:"join"in e?"miter"===e.join?n(2):e.join:null}}function F(e,t,l){const a=null!=l?.75*l:0;return{type:"linear",x1:a?.25*a:0,y1:a?.5*a:0,x2:a||4,y2:a?.5*a:4,colors:[{color:e,offset:0},{color:t,offset:1}]}}function $(e){const t=e.depth,l=e.height,a=e.width;return 0!==a&&0!==t&&0!==l&&a===t&&null!=a&&null!=l&&a<l}function A(e,t,l){const a=[];if(!e)return a;switch(e.type){case"icon":{const l=0,s=0,n=t,r=t;switch(e.resource?.primitive??c){case"circle":a.push({shape:{type:"circle",cx:0,cy:0,r:.5*t},fill:Z(e,0),stroke:R(e)});break;case"square":a.push({shape:{type:"path",path:[{command:"M",values:[l,r]},{command:"L",values:[l,s]},{command:"L",values:[n,s]},{command:"L",values:[n,r]},{command:"Z",values:[]}]},fill:Z(e,0),stroke:R(e)});break;case"triangle":a.push({shape:{type:"path",path:[{command:"M",values:[l,r]},{command:"L",values:[.5*n,s]},{command:"L",values:[n,r]},{command:"Z",values:[]}]},fill:Z(e,0),stroke:R(e)});break;case"cross":a.push({shape:{type:"path",path:[{command:"M",values:[.5*n,s]},{command:"L",values:[.5*n,r]},{command:"M",values:[l,.5*r]},{command:"L",values:[n,.5*r]}]},stroke:N(e)});break;case"x":a.push({shape:{type:"path",path:[{command:"M",values:[l,s]},{command:"L",values:[n,r]},{command:"M",values:[n,s]},{command:"L",values:[l,r]}]},stroke:N(e)});break;case"kite":a.push({shape:{type:"path",path:[{command:"M",values:[l,.5*r]},{command:"L",values:[.5*n,s]},{command:"L",values:[n,.5*r]},{command:"L",values:[.5*n,r]},{command:"Z",values:[]}]},fill:Z(e,0),stroke:R(e)})}break}case"object":switch(e.resource?.primitive??p){case"cone":{const s=F(Z(e,0),Z(e,-.6),l?C:t),n=w(t,l);a.push({shape:n[0],fill:s},{shape:n[1],fill:s});break}case"inverted-cone":{const l=Z(e,0),s=F(l,Z(e,-.6),t),n=g(t);a.push({shape:n[0],fill:s},{shape:n[1],fill:l});break}case"cube":{const s=v(t,l);a.push({shape:s[0],fill:Z(e,0)},{shape:s[1],fill:Z(e,-.3)},{shape:s[2],fill:Z(e,-.5)});break}case"cylinder":{const s=F(Z(e,0),Z(e,-.6),l?C:t),n=k(t,l);a.push({shape:n[0],fill:s},{shape:n[1],fill:s},{shape:n[2],fill:Z(e,0)});break}case"diamond":{const l=b(t);a.push({shape:l[0],fill:Z(e,-.3)},{shape:l[1],fill:Z(e,0)},{shape:l[2],fill:Z(e,-.3)},{shape:l[3],fill:Z(e,-.7)});break}case"sphere":{const l=F(Z(e,0),Z(e,-.6));l.x1=0,l.y1=0,l.x2=.25*t,l.y2=.25*t,a.push({shape:{type:"circle",cx:0,cy:0,r:.5*t},fill:l});break}case"tetrahedron":{const l=d(t);a.push({shape:l[0],fill:Z(e,-.3)},{shape:l[1],fill:Z(e,0)},{shape:l[2],fill:Z(e,-.6)});break}}break}return a}function B(e){const t="number"==typeof e?.size?e?.size:null;return t?n(t):null}function G(e){return"icon"===e.type?"multiply":"tint"}async function J(e,t){const l=B(t),a=t?.maxSize?n(t.maxSize):null,r=t?.disableUpsampling??!1,o=e.symbolLayers,i=[],c=[];let p=!1,u=0,h=0,m=0;o.forEach((s=>{if("icon"!==s.type&&"object"!==s.type)return;s&&"icon"===s.type&&(m=Math.max(s.size&&n(s.size),m));const o="icon"===s.type?s.size&&n(s.size):0,f=l||o?Math.ceil(Math.min(l||o,a||D)):P;let y="icon"===s.type?s.angle:null;if(null!=t?.rotation&&(y=(y??0)+t.rotation),c.push(y),s?.resource?.href){const t=E(e,s).then((e=>{const t=s?.material?.color,l=G(s);return L(e,f,t,l,r)})).then((e=>{const t=e.width,l=e.height;return u=Math.max(u,t),h=Math.max(h,l),y&&(p=!0),[{shape:{type:"image",x:0,y:0,width:t,height:l,src:e.url},fill:null,stroke:null}]}));i.push(t)}else{let e=f;"icon"===s.type&&l&&(e=f*(o/m));const a="tall"===t?.symbolConfig||t?.symbolConfig?.isTall||"object"===s.type&&$(s);u=Math.max(u,a?C:e),h=Math.max(h,e),y&&s.resource?.primitive&&["square","triangle","x"].includes(s.resource?.primitive)&&(p=!0),i.push(Promise.resolve(A(s,e,a)))}}));const f=await Promise.allSettled(i),y=[];return f.forEach((e=>{"fulfilled"===e.status?y.push(e.value):e.reason&&s.getLogger("esri.symbols.support.previewSymbol3D").warn("error while building swatchInfo!",e.reason)})),M(y,[u,h],{node:t?.node,scale:!1,opacity:t?.opacity,ariaLabel:t?.ariaLabel,rotations:c,useRotationSize:p})}function K(e,t){const l=e.symbolLayers,a=[],s=j(e),r=B(t),o=(t?.maxSize?n(t.maxSize):null)||U;let i,c=0,p=0;return l.forEach(((e,t)=>{if(!e)return;if("line"!==e.type&&"path"!==e.type)return;const l=[];switch(e.type){case"line":{const a=W(e,0);if(null==a)break;const s=a?.width||0;0===t&&(i=s);const n=Math.min(r||s,o),u=0===t?n:r?n*(s/i):n,h=u>O/2?2*u:O;p=Math.max(p,u),c=Math.max(c,h),a.width=u,l.push({shape:{type:"path",path:[{command:"M",values:[0,.5*p]},{command:"L",values:[c,.5*p]}]},stroke:a});break}case"path":{const t=Math.min(r||P,o),a=Z(e,0),s=Z(e,-.2),n=T(e,-.4),i=n?{color:n,width:1}:{};if("quad"===e.profile){const t=e.width,n=e.height,r=y(t&&n?t/n:1,0===n,0===t),o={...i,join:"bevel"};l.push({shape:r[0],fill:s,stroke:o},{shape:r[1],fill:s,stroke:o},{shape:r[2],fill:a,stroke:o})}else l.push({shape:f.pathSymbol3DLayer[0],fill:s,stroke:i},{shape:f.pathSymbol3DLayer[1],fill:a,stroke:i});p=Math.max(p,t),c=p}}a.push(l)})),Promise.resolve(M(a,[c,p],{node:t?.node,scale:s,opacity:t?.opacity,ariaLabel:t?.ariaLabel}))}async function Q(e,t){const l="mesh-3d"===e.type,a=e.symbolLayers,s=B(t),r=t?.maxSize?n(t.maxSize):null,o=s||P,i=[];let c=0,p=0,u=!1;for(let n=0;n<a.length;n++){const e=a.at(n),t=[];if(!l||"fill"===e.type){switch(e.type){case"fill":{const a=Math.min(o,r||D);if(c=Math.max(c,a),p=Math.max(p,a),u=!0,l){const l=f.meshSymbol3DFill,a=T(e,-.4),s=a?{color:a,width:1,join:"round"}:{};t.push({shape:l[0],fill:Z(e,0),stroke:s},{shape:l[1],fill:Z(e,-.2),stroke:s},{shape:l[2],fill:Z(e,-.6),stroke:s})}else{let l=Z(e,0);const a="pattern"in e?e.pattern:null,s=R(e),n=I(e);null!=a&&"style"===a.type&&"solid"!==a.style&&n&&(l=await H(a,n)),t.push({shape:f.fill[0],fill:l,stroke:s})}break}case"line":{const l=W(e,0);if(null==l)break;const a={stroke:l,shape:f.fill[0]};c=Math.max(c,P),p=Math.max(p,P),t.push(a);break}case"extrude":{const l={join:"round",width:1,...W(e,-.4)},a=Z(e,0),s=Z(e,-.2),n=Math.min(o,r||D),i=m(n);l.width=1,t.push({shape:i[0],fill:s,stroke:l},{shape:i[1],fill:s,stroke:l},{shape:i[2],fill:a,stroke:l});const u=P,h=.7*P+.5*n;c=Math.max(c,u),p=Math.max(p,h);break}case"water":{const l=I(e),a=q(l),s=q(l,2),n=q(l,3),i=x();u=!0,t.push({shape:i[0],fill:a},{shape:i[1],fill:s},{shape:i[2],fill:n});const h=Math.min(o,r||D);c=Math.max(c,h),p=Math.max(p,h);break}}i.push(t)}}return M(i,[c,p],{node:t?.node,scale:u,opacity:t?.opacity,ariaLabel:t?.ariaLabel})}function V(e,t){if(0===e.symbolLayers.length)return Promise.reject(new a("symbolPreview: renderPreviewHTML3D","No symbolLayers in the symbol."));switch(e.type){case"point-3d":return J(e,t);case"line-3d":return K(e,t);case"polygon-3d":case"mesh-3d":return Q(e,t)}return Promise.reject(new a("symbolPreview: swatchInfo3D","symbol not supported."))}export{H as getPatternDescriptor,B as getSizeFromOptions,Z as getSymbolLayerFill,V as previewSymbol3D};