UNPKG

@arcgis/core

Version:

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

6 lines (5 loc) 4.29 kB
/* All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.33/esri/copyright.txt for details. */ 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{getCSSFilterFromEffectList as i}from"../../../../symbols/support/utils.js";import{isRTL as n,classes as d}from"../../../support/widgetUtils.js";import{tsx as m}from"../../../support/jsxFactory.js";const b="esri-relationship-ramp",u=`${b}--diamond`,c=`${b}--square`,f="http://www.w3.org/2000/svg",p={diamondContainer:`${u}__container`,diamondLeftCol:`${u}__left-column`,diamondRightCol:`${u}__right-column`,diamondMidCol:`${u}__middle-column`,diamondMidColLabel:`${u}__middle-column--label`,diamondMidColRamp:`${u}__middle-column--ramp`,squareTable:`${c}__table`,squareTableRow:`${c}__table-row`,squareTableCell:`${c}__table-cell`,squareTableLabel:`${c}__table-label`,squareTableLabelLeftBottom:`${c}__table-label--left-bottom`,squareTableLabelRightBottom:`${c}__table-label--right-bottom`,squareTableLabelLeftTop:`${c}__table-label--left-top`,squareTableLabelRightTop:`${c}__table-label--right-top`};function k(e,a,l={}){const{focus:r,labels:t}=e,s=!!r,o=T(e,a,l),i={justifyContent:"center"},b=n(),u=l.key??a;return s?m("div",{class:p.diamondContainer,key:`${u}-container`,styles:i},m("div",{class:p.diamondLeftCol},b?t.right:t.left),m("div",{class:p.diamondMidCol},m("div",{class:p.diamondMidColLabel},t.top),o,m("div",{class:p.diamondMidColLabel},t.bottom)),m("div",{class:p.diamondRightCol},b?t.left:t.right)):m("div",{class:p.squareTable,key:`${u}-container`},m("div",{class:p.squareTableRow},m("div",{class:d(p.squareTableCell,p.squareTableLabel,p.squareTableLabelRightBottom)},b?t.top:t.left),m("div",{class:p.squareTableCell}),m("div",{class:d(p.squareTableCell,p.squareTableLabel,p.squareTableLabelLeftBottom)},b?t.left:t.top)),m("div",{class:p.squareTableRow},m("div",{class:p.squareTableCell}),o,m("div",{class:p.squareTableCell})),m("div",{class:p.squareTableRow},m("div",{class:d(p.squareTableCell,p.squareTableLabel,p.squareTableLabelRightTop)},b?t.right:t.bottom),m("div",{class:p.squareTableCell}),m("div",{class:d(p.squareTableCell,p.squareTableLabel,p.squareTableLabelLeftTop)},b?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 T(n,d,b={}){const{focus:u,numClasses:c,colors:k,rotation:T}=n,{opacity:_,effectList:q,ariaLabel:$}=b,L=b.size??60,g=!!u,C=Math.sqrt(L**2+L**2)+(g?0:5),v=[],w=[],y=[],x=(L||75)/c;for(let t=0;t<c;t++){const s=t*x;for(let i=0;i<c;i++){const n=i*x,d=e(k[t][i]),m=o(null),b={type:"rect",x:n,y:s,width:x,height:x},u=a(d);u&&v.push(u);const c=l(b,d.fill,m,null);c&&w.push(c),y.push(r(b))}}const R=15,E=15,M=10;let S=null;g||(S="margin: -15px -15px -18px -15px");const j=h("left",u,d),B=h("right",u,d),H=t(y),U=s(H,C,C,0,!1,T,!1),W=s(H,C,C,0,!1,g?-45:null,!1),X={filter:i(q)??void 0,opacity:null==_?"":`${_}`};return m("div",{class:g?p.diamondMidColRamp:p.squareTableCell,styles:X},m("svg",{"aria-label":$,focusable:!1,height:C,role:"image",style:S,width:C,xmlns:f},m("defs",null,m("marker",{id:`${d}_arrowStart`,markerHeight:"10",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"5",refY:"5"},m("polyline",{fill:"none",points:"0,0 5,5 0,10",stroke:"#555555","stroke-width":"1"})),m("marker",{id:`${d}_arrowEnd`,markerHeight:"10",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"0",refY:"5"},m("polyline",{fill:"none",points:"5,0 0,5 5,10",stroke:"#555555","stroke-width":"1"})),v),m("g",{transform:U},w),m("g",{transform:W},m("line",{fill:"none","marker-end":j.markerEnd,"marker-start":j.markerStart,stroke:"#555555","stroke-width":"1",x1:-10,x2:-10,y1:L-R,y2:R}),m("line",{fill:"none","marker-end":B.markerEnd,"marker-start":B.markerStart,stroke:"#555555","stroke-width":"1",x1:E,x2:L-E,y1:L+M,y2:L+M}))))}export{k as renderRelationshipRamp};