@arcgis/map-components
Version:
ArcGIS Map Components
2 lines • 4.83 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import d from"./3SQ3GRSM.js";import b from"./KYU6MBFA.js";import{f as F}from"./AKBXFBDL.js";import"./LMBRORN7.js";import{d as c}from"./PBSJQPB2.js";import{O as C,P as m,Q as f,R as a,U as A,a as H,b as h,c as W}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{getBoundingBox:O,computeBBox:P,getTransformMatrix:D},,{a:U,b:X,c:Y,d:j}])=>{var Q=H`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-right:5px;max-width:85px;text-align:right}.diamond-right-column{align-self:center;padding-left:5px;max-width:85px;text-align:left}.diamond-middle-column{display:flex;flex-direction:column;text-align:center}.diamond-middle-column-label{align-self:center;max-width:85px}.diamond-middle-column-ramp{width:85px;height:85px}.square-table{display:table;font-size:var(--calcite-font-size-sm)}.square-table-row{display:table-row}.square-table-cell{display:table-cell}.square-table-label{max-width:95px}.square-table-label-left-bottom{vertical-align:bottom;text-align:left}.square-table-label-right-bottom{vertical-align:bottom;text-align:right}.square-table-label-left-top{vertical-align:top;text-align:left}.square-table-label-right-top{vertical-align:top;text-align:right}`,Z="http://www.w3.org/2000/svg",v=class extends C{constructor(){super(...arguments),this._direction=F(),this.legendElement=null}static{this.properties={cssEffectFilter:1,legendElement:0,opacity:9,messages:0}}static{this.styles=Q}_getLineMarkers(n,r){let e="arrowStart",i="arrowEnd",s=n==="left",t={markerStart:null,markerEnd:null};switch(r){case"HL":s?t.markerStart=`url(#${i})`:t.markerEnd=`url(#${e})`;break;case"LL":t.markerStart=`url(#${i})`;break;case"LH":s?t.markerEnd=`url(#${e})`:t.markerStart=`url(#${i})`;break;default:t.markerEnd=`url(#${e})`;break}return t}render(){let n=this.legendElement,{focus:r,labels:e}=n,i=!!r,s=this._renderRamp(n),t={justifyContent:"center"},l=this._direction==="rtl";return i?h`<div class="diamond-container" style=${f(t)}><div class="diamond-left-column">${l?e.right:e.left}</div><div class="diamond-middle-column"><div class="diamond-middle-column-label">${e.top}</div>${s}<div class="diamond-middle-column-label">${e.bottom}</div></div><div class="diamond-right-column">${l?e.left:e.right}</div></div>`:h`<div class="square-table"><div class="square-table-row"><div class=${m(c("square-table-cell","square-table-label","square-table-label-right-bottom"))}>${l?e.top:e.left}</div><div class="square-table-cell"></div><div class=${m(c("square-table-cell","square-table-label","square-table-label-left-bottom"))}>${l?e.left:e.top}</div></div><div class="square-table-row"><div class="square-table-cell"></div>${s}<div class="square-table-cell"></div></div><div class="square-table-row"><div class=${m(c("square-table-cell","square-table-label","square-table-label-right-top"))}>${l?e.right:e.bottom}</div><div class="square-table-cell"></div><div class=${m(c("square-table-cell","square-table-label","square-table-label-left-top"))}>${l?e.bottom:e.right}</div></div></div>`}_renderRamp(n){let{focus:r,numClasses:e,colors:i,rotation:s}=n,t=this.opacity,l=this.messages.previewRelationshipRampAriaLabel,o=60,u=!!r,d=Math.sqrt(o**2+o**2)+(u?0:5),$=[],k=[],x=[],b=o/e;for(let g=0;g<e;g++){let J=g*b;for(let p=0;p<e;p++){let K=p*b,_=X(i[g][p]),N=Y(null),R={type:"rect",x:K,y:J,width:b,height:b},z=U(_);z&&$.push(z);let B=j(R,_.fill,N,null);B&&k.push(B),x.push(O(R))}}let q=15,w=15,y=10,E;u||(E="margin: -15px -15px -18px -15px");let L=this._getLineMarkers("left",r),S=this._getLineMarkers("right",r),M=P(x),T=D(M,d,d,0,!1,s,!1),G=D(M,d,d,0,!1,u?-45:null,!1),I={filter:this.cssEffectFilter,opacity:t==null?"":`${t}`};return h`<div class=${m(u?"diamond-middle-column-ramp":"square-table-cell")} style=${f(I)}><svg .ariaLabel=${l} height=${d??a} role=img style=${f(E)} width=${d??a} xmlns=${Z}>${W`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${$}</defs><g transform=${T??a}>${k}</g><g transform=${G??a}><line fill=none marker-end=${L.markerEnd??void 0??a} marker-start=${L.markerStart??void 0??a} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o-q} y2=${q} /><line fill=none marker-end=${S.markerEnd??void 0??a} marker-start=${S.markerStart??void 0??a} stroke=#555555 stroke-width=1 x1=${w} x2=${o-w} y1=${o+y} y2=${o+y} /></g>`}</svg></div>`}};A("arcgis-legend-relationship-ramp",v);return v},"applications/Components/svgUtils",b,d)