@arcgis/core/widgets/Legend/styles/support/sizeRampUtils.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{pt2px as e}from"../../../../core/screenUtils.js";import{isWidthAndHeight as i}from"./utils.js";import{attachToNode as t}from"../../support/styleUtils.js";import"../../../support/widgetUtils.js";import{tsx as s}from"../../../support/jsxFactory.js";const n="#ddd",o=window.devicePixelRatio,a="esri-spike-ramp",p={spikeRampContainer:`${a}__container`,spikeRampPreviewContainer:`${a}__preview-container`,spikeRampPreview:`${a}__preview`,spikeRampSymbolPreview:`${a}__symbol-preview`,spikeRampLines:`${a}__lines`,spikeRampLabelsContainer:`${a}__labels-container`,spikeRampLabel:`${a}__label`};function r(e){return 5!==e.infos.length?null:s("div",{class:p.spikeRampContainer},s("div",{class:p.spikeRampPreviewContainer},l(e),m(e)),d(e))}function l(e){const[i,n,o]=h(e).map((({preview:e})=>{if(!e)return null;const i=e.cloneNode(!0);return i.classList.add(p.spikeRampSymbolPreview),i}));return i&&n&&o?s("div",{class:p.spikeRampPreview},s("div",{afterCreate:t,bind:o}),s("div",{afterCreate:t,bind:n}),s("div",{afterCreate:t,bind:i})):null}function m(a){const[{width:r,height:l},{width:m},{width:d,height:c}]=h(a).map((({size:t})=>i(t)?{width:e(t.width),height:e(t.height)}:{width:0,height:0})),v=10,b=8,u=r+m+d+3*v,w=l,k=document.createElement("canvas");k.width=(u+v)*o,k.height=w*o,k.style.width=k.width/o+"px",k.style.height=k.height/o+"px";const f=k.getContext("2d");f.beginPath();const R=u-(r/2+v),g=0,_=u+b,y=0;f.moveTo(R*o,g*o),f.lineTo(_*o,y*o);const C=(u-b)/2,L=(l-c)/2,x=u+b,P=(l-c)/2;f.moveTo(C*o,L*o),f.lineTo(x*o,P*o);const $=d/2,j=w-c,T=u+b,S=w-c;return f.moveTo($*o,j*o),f.lineTo(T*o,S*o),f.strokeStyle=n,f.lineWidth=.5*o,f.stroke(),s("div",{afterCreate:t,bind:k,class:p.spikeRampLines})}function d(t){const[{label:n,height:o},{label:a},{label:r,height:l}]=h(t).map((({label:t,size:s})=>({label:t,height:i(s)?e(s.height):0}))),m=o-l,d={position:"absolute",top:"0"},c={position:"absolute",top:m/2+"px"},v={position:"absolute",top:`${m}px`};return s("div",{class:p.spikeRampLabelsContainer},s("div",{class:p.spikeRampLabel,styles:d},n),s("div",{class:p.spikeRampLabel,styles:c},a),s("div",{class:p.spikeRampLabel,styles:v},r))}function h(e){return e.infos.filter(((e,i)=>i%2==0))}export{r as renderSpikeRamp};