@arcgis/core/widgets/Legend/styles/support/sizeRampUtils.js

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

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