@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.33/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 i}from"../../../../core/accessorSupport/decorators/subclass.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"../../../support/widgetUtils.js";import{tsx as a}from"../../../support/jsxFactory.js";const c="#ddd",p=window.devicePixelRatio;function d(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:p,...d}=r,{label:m,...y}=c;let u=d.preview,f=y.preview;const h={"flex-direction":t?"column":"row-reverse"};if(!u||!f)return null;u=u.cloneNode(!0),u.style.display="flex",f=f.cloneNode(!0),f.style.display="flex";const g={opacity:`${s??""}`};return a("div",{class:this.classes(o.layerRow,{[o.sizeRampRow]:t})},a("div",{class:o.rampLabel},t?p:m),a("div",{class:o.sizeRampContainer,styles:h},a("div",{afterCreate:l,bind:u,class:o.sizeRampPreview,styles:g}),this._renderSizeRampLines(e),a("div",{afterCreate:l,bind:f,class:o.sizeRampPreview,styles:g})),a("div",{class:o.rampLabel},t?m:p))}_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,u=r.size&&"number"==typeof r.size?r.size:0,f=i.outlineSize||0,h=r.outlineSize||0,g=t(y+f)*p,v=t(u+h)*p,b=n?g:g+50*p,x=n?g/2+50*p:g,z=m(o),j=d(o),w=document.createElement("canvas");w.width=b,w.height=x,w.style.width=w.width/p+"px",w.style.height=w.height/p+"px";const R=w.getContext("2d");if(n){R.beginPath();const e=0,t=0,s=b/2-v/2,i=x;R.moveTo(e,t),R.lineTo(s,i);const r=b,o=0,n=b/2+v/2,l=x;R.moveTo(r,o),R.lineTo(n,l)}else{R.beginPath();const e=0,t=x/2-v/2,s=b,i=0;R.moveTo(e,t),R.lineTo(s,i);const r=0,o=x/2+v/2,n=b,l=x;R.moveTo(r,o),R.lineTo(n,l)}return R.strokeStyle=c,R.stroke(),a("div",{afterCreate:l,bind:w,styles:n?{display:"flex",marginTop:`-${z?0:j?g/2:0}px`,marginBottom:`-${z?v:j?v/2:0}px`}:{display:"flex",marginRight:`-${z?0:j?g/2:0}px`,marginLeft:`-${z?0:j?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};