@arcgis/core/widgets/Legend/styles/card/SizeRamp.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.32/esri/copyright.txt for details.
*/
import{_ as e}from"../../../../chunks/tslib.es6.js";import{pt2px as t}from"../../../../core/screenUtils.js";import{property as s}from"../../../../core/accessorSupport/decorators/property.js";import"../../../../core/has.js";import"../../../../core/Logger.js";import"../../../../core/RandomLCG.js";import{subclass as o}from"../../../../core/accessorSupport/decorators/subclass.js";import r from"../../../Widget.js";import{css as i}from"./css.js";import{attachToNode as n}from"../../support/styleUtils.js";import"../../../support/widgetUtils.js";import{tsx as a}from"../../../support/jsxFactory.js";const l="#ddd",c=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 d(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 m=class extends r{constructor(e,t){super(e,t),this.hasIndicators=!1,this.legendElement=null,this.opacity=1}render(){const{legendElement:e,hasIndicators:t,opacity:s}=this,o=e.infos,{label:r,...l}=o.at(0),{label:c,...p}=o.at(-1);let d=l.preview,m=p.preview;const y={"flex-direction":t?"column":"row-reverse"};d&&(d=d.cloneNode(!0),d.style.display="flex"),m&&(m=m.cloneNode(!0),m.style.display="flex");const u={opacity:null!=s?`${s}`:""};return a("div",{class:this.classes(i.layerRow,{[i.sizeRampRow]:t})},a("div",{class:i.rampLabel},t?r:c),a("div",{class:i.sizeRampContainer,styles:y},a("div",{afterCreate:n,bind:d,class:i.sizeRampPreview,styles:u}),this._renderSizeRampLines(e),a("div",{afterCreate:n,bind:m,class:i.sizeRampContainer,styles:u})),a("div",{class:i.rampLabel},t?c:r))}_renderSizeRampLines(e){const s=e.infos,o=s[0],r=s.at(-1),i=o.symbol,m=this.hasIndicators,y=t(o.size+o.outlineSize)*c,u=t(r.size+r.outlineSize)*c,f=m?y:y+50*c,h=m?y/2+50*c:y,g=d(i),v=p(i),b=document.createElement("canvas");b.width=f,b.height=h,b.style.width=b.width/c+"px",b.style.height=b.height/c+"px";const x=b.getContext("2d");if(m){x.beginPath();const e=0,t=0,s=f/2-u/2,o=h;x.moveTo(e,t),x.lineTo(s,o);const r=f,i=0,n=f/2+u/2,a=h;x.moveTo(r,i),x.lineTo(n,a)}else{x.beginPath();const e=0,t=h/2-u/2,s=f,o=0;x.moveTo(e,t),x.lineTo(s,o);const r=0,i=h/2+u/2,n=f,a=h;x.moveTo(r,i),x.lineTo(n,a)}return x.strokeStyle=l,x.stroke(),a("div",{afterCreate:n,bind:b,styles:m?{display:"flex",marginTop:`-${g?0:v?y/2:0}px`,marginBottom:`-${g?u:v?u/2:0}px`}:{display:"flex",marginRight:`-${g?0:v?y/2:0}px`,marginLeft:`-${g?0:v?u/2:0}px`}})}};e([s()],m.prototype,"hasIndicators",void 0),e([s()],m.prototype,"legendElement",void 0),e([s()],m.prototype,"messages",void 0),e([s()],m.prototype,"opacity",void 0),m=e([o("esri.widgets.Legend.styles.card.SizeRamp")],m);const y=m;export{y as default};