@arcgis/core/widgets/Legend/styles/card/SizeRamp.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.19/LICENSE.txt */
import{__decorate as e}from"tslib";import{pt2px as t}from"../../../../core/screenUtils.js";import{property as s,subclass as i}from"../../../../core/accessorSupport/decorators.js";import r from"../../../Widget.js";import{css as o}from"./css.js";import{renderSpikeRamp as n}from"../support/sizeRampUtils.js";import{attachToNode as l}from"../../support/styleUtils.js";import{tsx as a}from"../../../support/widget.js";const c="#ddd",d=window.devicePixelRatio;function p(e){if(!e)return;if(e.type.includes("3d")){if(!e.symbolLayers?.length)return;const t=e.symbolLayers.at(-1),s=t.resource?.primitive;return"circle"===s||"cross"===s||"kite"===s||"sphere"===s||"cube"===s||"diamond"===s}const t=e.style;return"circle"===t||"diamond"===t||"cross"===t}function m(e){if(e){if(e.type.includes("3d")){if(!e.symbolLayers?.length)return;const t=e.symbolLayers.at(-1),s=t?.resource?.primitive;return"triangle"===s||"cone"===s||"tetrahedron"===s}return"triangle"===e.style}}let y=class extends r{constructor(e,t){super(e,t),this.hasIndicators=!1,this.legendElement=null,this.opacity=1}render(){if("spike"===this.legendElement.theme)return a("div",{styles:{display:"flex",flex:"1",justifyContent:"center"}},n(this.legendElement));const{legendElement:e,hasIndicators:t,opacity:s}=this,i=e.infos,r=i.at(0),c=i.at(-1);if(!r||!c)return null;const{label:d,...p}=r,{label:m,...y}=c;let f=p.preview,u=y.preview;const h={"flex-direction":t?"column":"row-reverse"};if(!f||!u)return null;f=f.cloneNode(!0),f.style.display="flex",u=u.cloneNode(!0),u.style.display="flex";const g={opacity:`${s??""}`};return a("div",{class:this.classes(o.layerRow,{[o.sizeRampRow]:t})},a("div",{class:o.rampLabel},t?d:m),a("div",{class:o.sizeRampContainer,styles:h},a("div",{afterCreate:l,bind:f,class:o.sizeRampPreview,styles:g}),this._renderSizeRampLines(e),a("div",{afterCreate:l,bind:u,class:o.sizeRampPreview,styles:g})),a("div",{class:o.rampLabel},t?m:d))}_renderSizeRampLines(e){const s=e.infos,i=s.at(0),r=s.at(-1);if(!i||!r)return null;const o=i.symbol,n=this.hasIndicators,y=i.size&&"number"==typeof i.size?i.size:0,f=r.size&&"number"==typeof r.size?r.size:0,u=i.outlineSize||0,h=r.outlineSize||0,g=t(y+u)*d,v=t(f+h)*d,b=n?g:g+50*d,x=n?g/2+50*d:g,z=m(o),w=p(o),R=document.createElement("canvas");R.width=b,R.height=x,R.style.width=R.width/d+"px",R.style.height=R.height/d+"px";const L=R.getContext("2d");if(n){L.beginPath();const e=0,t=0,s=b/2-v/2,i=x;L.moveTo(e,t),L.lineTo(s,i);const r=b,o=0,n=b/2+v/2,l=x;L.moveTo(r,o),L.lineTo(n,l)}else{L.beginPath();const e=0,t=x/2-v/2,s=b,i=0;L.moveTo(e,t),L.lineTo(s,i);const r=0,o=x/2+v/2,n=b,l=x;L.moveTo(r,o),L.lineTo(n,l)}return L.strokeStyle=c,L.stroke(),a("div",{afterCreate:l,bind:R,styles:n?{display:"flex",marginTop:`-${z?0:w?g/2:0}px`,marginBottom:`-${z?v:w?v/2:0}px`}:{display:"flex",marginRight:`-${z?0:w?g/2:0}px`,marginLeft:`-${z?0:w?v/2:0}px`}})}};e([s()],y.prototype,"hasIndicators",void 0),e([s()],y.prototype,"legendElement",void 0),e([s()],y.prototype,"messages",void 0),e([s()],y.prototype,"opacity",void 0),y=e([i("esri.widgets.Legend.styles.card.SizeRamp")],y);export{y as default};