UNPKG

@arcgis/core

Version:

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

js.arcgis.com

3 lines (2 loc) • 4.08 kB
1
2
3
/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */ import{generateFillAttributes as e,renderDef as a,renderShape as l,getBoundingBox as r,computeBBox as t,getTransformMatrix as s,generateStrokeAttributes as o}from"../../../../symbols/support/svgUtils.js";import{isRTL as i,tsx as n,classes as d}from"../../../support/widget.js";const b="esri-relationship-ramp",m=`${b}--diamond`,u=`${b}--square`,c="http://www.w3.org/2000/svg",f={diamondContainer:`${m}__container`,diamondLeftCol:`${m}__left-column`,diamondRightCol:`${m}__right-column`,diamondMidCol:`${m}__middle-column`,diamondMidColLabel:`${m}__middle-column--label`,diamondMidColRamp:`${m}__middle-column--ramp`,squareTable:`${u}__table`,squareTableRow:`${u}__table-row`,squareTableCell:`${u}__table-cell`,squareTableLabel:`${u}__table-label`,squareTableLabelLeftBottom:`${u}__table-label--left-bottom`,squareTableLabelRightBottom:`${u}__table-label--right-bottom`,squareTableLabelLeftTop:`${u}__table-label--left-top`,squareTableLabelRightTop:`${u}__table-label--right-top`};function k(e,a,l={}){const{focus:r,labels:t}=e,s=!!r,o=p(e,a,l),b={justifyContent:"center"},m=i(),u=l.key??a;return s?n("div",{class:f.diamondContainer,key:`${u}-container`,styles:b},n("div",{class:f.diamondLeftCol},m?t.right:t.left),n("div",{class:f.diamondMidCol},n("div",{class:f.diamondMidColLabel},t.top),o,n("div",{class:f.diamondMidColLabel},t.bottom)),n("div",{class:f.diamondRightCol},m?t.left:t.right)):n("div",{class:f.squareTable,key:`${u}-container`},n("div",{class:f.squareTableRow},n("div",{class:d(f.squareTableCell,f.squareTableLabel,f.squareTableLabelRightBottom)},m?t.top:t.left),n("div",{class:f.squareTableCell}),n("div",{class:d(f.squareTableCell,f.squareTableLabel,f.squareTableLabelLeftBottom)},m?t.left:t.top)),n("div",{class:f.squareTableRow},n("div",{class:f.squareTableCell}),o,n("div",{class:f.squareTableCell})),n("div",{class:f.squareTableRow},n("div",{class:d(f.squareTableCell,f.squareTableLabel,f.squareTableLabelRightTop)},m?t.right:t.bottom),n("div",{class:f.squareTableCell}),n("div",{class:d(f.squareTableCell,f.squareTableLabel,f.squareTableLabelLeftTop)},m?t.bottom:t.right)))}function h(e,a,l){const r=`${l}_arrowStart`,t=`${l}_arrowEnd`,s="left"===e,o={markerStart:null,markerEnd:null};switch(a){case"HL":s?o.markerStart=`url(#${t})`:o.markerEnd=`url(#${r})`;break;case"LL":o.markerStart=`url(#${t})`;break;case"LH":s?o.markerEnd=`url(#${r})`:o.markerStart=`url(#${t})`;break;default:o.markerEnd=`url(#${r})`}return o}function p(i,d,b={}){const{focus:m,numClasses:u,colors:k,rotation:p}=i,{opacity:T,cssEffectFilter:_,ariaLabel:q}=b,$=b.size??60,g=!!m,L=Math.sqrt($**2+$**2)+(g?0:5),C=[],v=[],w=[],y=($||75)/u;for(let t=0;t<u;t++){const s=t*y;for(let i=0;i<u;i++){const n=i*y,d=e(k[t][i]),b=o(null),m={type:"rect",x:n,y:s,width:y,height:y},u=a(d);u&&C.push(u);const c=l(m,d.fill,b,null);c&&v.push(c),w.push(r(m))}}const R=15,x=15,E=10;let M=null;g||(M="margin: -15px -15px -18px -15px");const S=h("left",m,d),B=h("right",m,d),H=t(w),W=s(H,L,L,0,!1,p,!1),j=s(H,L,L,0,!1,g?-45:null,!1),U={filter:_??void 0,opacity:null==T?"":`${T}`};return n("div",{class:g?f.diamondMidColRamp:f.squareTableCell,styles:U},n("svg",{"aria-label":q,focusable:!1,height:L,role:"image",style:M,width:L,xmlns:c},n("defs",null,n("marker",{id:`${d}_arrowStart`,markerHeight:"10",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"5",refY:"5"},n("polyline",{fill:"none",points:"0,0 5,5 0,10",stroke:"#555555","stroke-width":"1"})),n("marker",{id:`${d}_arrowEnd`,markerHeight:"10",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"0",refY:"5"},n("polyline",{fill:"none",points:"5,0 0,5 5,10",stroke:"#555555","stroke-width":"1"})),C),n("g",{transform:W},v),n("g",{transform:j},n("line",{fill:"none","marker-end":S.markerEnd,"marker-start":S.markerStart,stroke:"#555555","stroke-width":"1",x1:-10,x2:-10,y1:$-R,y2:R}),n("line",{fill:"none","marker-end":B.markerEnd,"marker-start":B.markerStart,stroke:"#555555","stroke-width":"1",x1:x,x2:$-x,y1:$+E,y2:$+E}))))}export{k as renderRelationshipRamp};