You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
15 KiB
33 lines
15 KiB
// All material copyright Esri, All Rights Reserved, unless otherwise specified. |
|
// See https://js.arcgis.com/4.30/esri/copyright.txt for details. |
|
//>>built |
|
define("../../../chunks/tslib.es6 ../../../intl ../../../core/reactiveUtils ../../../core/screenUtils ../../../core/accessorSupport/decorators/property ../../../core/has ../../../core/Logger ../../../core/RandomLCG ../../../core/accessorSupport/decorators/subclass ../../../symbols/support/svgUtils ../../../symbols/support/utils ../../Widget ./CardCSS ./support/relationshipUtils ./support/univariateUtils ../support/styleUtils ../../support/Heading ../../support/decorators/accessibleHandler ../../support/decorators/messageBundle ../../support/jsxFactory ../../support/widgetUtils ../../../intl/substitute".split(" "), |
|
function(u,t,z,A,v,N,O,P,H,I,B,J,e,K,r,p,x,L,C,f,D,M){const w=window.devicePixelRatio;t=class extends J{constructor(a,c){super(a,c);this._hasIndicators=!1;this._selectedSectionName=null;this._sectionNames=[];this._sectionMap=new Map;this.activeLayerInfos=null;this.headingLevel=3;this.layout="stack";this.messagesCommon=this.messages=null;this.type="card";this.view=null}initialize(){this.addHandles(z.watch(()=>this.activeLayerInfos,a=>{this.removeAllHandles();this._watchForSectionChanges(a)}))}render(){var {view:a}= |
|
this;this._hasIndicators="auto"===this.layout&&a&&768>=a.container.clientWidth||"stack"===this.layout;a=this.activeLayerInfos?.toArray().map(b=>this._renderLegendForLayer(b)).filter(b=>!!b);this._hasIndicators?this._selectedSectionName&&this._sectionNames.includes(this._selectedSectionName)||(this._selectedSectionName=this._sectionNames&&this._sectionNames[0]):this._selectedSectionName=null;const c=this._sectionNames.length;var d=this._sectionNames.map((b,h)=>{h=M.substitute(this.messagesCommon.pagination.pageText, |
|
{index:h+1,total:c});return f.tsx("div",{"aria-controls":`${b}-panel`,"aria-label":h,"aria-selected":(this._selectedSectionName===b).toString(),bind:this,class:this.classes(e.css.indicator,{[e.css.activated]:this._selectedSectionName===b}),"data-section-name":b,id:b,key:b,onclick:this._selectSection,onkeydown:this._focusSection,role:"tab",tabIndex:this._selectedSectionName===b?0:-1,title:h})});d=this._hasIndicators&&1<c?f.tsx("div",{class:e.css.indicatorContainer,key:"carousel-navigation",role:"tablist"}, |
|
d):null;a=this._hasIndicators?this._sectionMap.get(this._selectedSectionName):a?.length?a:null;return f.tsx("div",{class:this.classes(e.css.base,{[e.css.stacked]:this._hasIndicators})},a||f.tsx("div",{class:e.css.message},this.messages.noLegend),d)}_selectSection(a){if(a=a.target.getAttribute("data-section-name"))this._selectedSectionName=a}_focusSection(a){switch(a.key){case "ArrowLeft":case "ArrowRight":this._switchSectionOnArrowPress(a);break;case "Enter":case " ":this._selectSection(a)}}_switchSectionOnArrowPress(a){const c= |
|
a.key,d="ArrowLeft"===c?-1:1;a=a.target.getAttribute("data-section-name");a=this._sectionNames.indexOf(a);const b=this._sectionNames;let h=null;-1!==a&&(b[a+d]?h=document.getElementById(b[a+d]):"ArrowLeft"===c?h=document.getElementById(b[b.length-1]):"ArrowRight"===c&&(h=document.getElementById(b[0])),h?.focus())}_watchForSectionChanges(a){this._generateSectionNames();a&&(a.forEach(c=>{const d=`activeLayerInfo-${c.layer.uid}-version-change`;this.removeHandles(d);this._watchForSectionChanges(c.children); |
|
this.addHandles(z.watch(()=>c.version,()=>this._generateSectionNames()),d)}),this.removeHandles("activeLayerInfos-collection-change"),this.addHandles(a.on("change",()=>this._watchForSectionChanges(a)),"activeLayerInfos-collection-change"))}_generateSectionNames(){this._sectionNames.length=0;this._selectedSectionName=null;this.activeLayerInfos&&this.activeLayerInfos.forEach(this._generateSectionNamesForActiveLayerInfo,this)}_getSectionName(a,c,d){return`${this.id}${a.uid}-type-${c.type}-${d}`}_generateSectionNamesForActiveLayerInfo(a){a.children.forEach(this._generateSectionNamesForActiveLayerInfo, |
|
this);a.legendElements&&a.legendElements.forEach((c,d)=>{this._sectionNames.push(this._getSectionName(a.layer,c,d))})}_renderLegendForLayer(a){if(!a.ready)return null;if(a.children.length){var c=a.children.map(b=>this._renderLegendForLayer(b)).toArray();return f.tsx("div",{class:this.classes(e.css.service,e.css.groupLayer),key:a.layer.uid},f.tsx("div",{class:e.css.serviceCaptionContainer},a.title),c)}if((c=a.legendElements)&&!c.length)return null;const d=c.some(b=>"relationship-ramp"===b.type);c= |
|
c.map((b,h)=>this._renderLegendForElement(b,a,h,d)).filter(b=>!!b);return c.length?f.tsx("div",{class:this.classes(e.css.service,{[e.css.groupLayerChild]:!!a.parent}),key:a.layer.uid},f.tsx("div",{class:e.css.serviceCaptionContainer},f.tsx("div",{class:e.css.serviceCaptionText},a.title)),f.tsx("div",{class:e.css.serviceContent},c)):null}_renderLegendForElement(a,c,d,b=!1,h=!1){var k="color-ramp"===a.type,g="opacity-ramp"===a.type,l=c.layer,m=null;"string"===typeof a.title?m=a.title:a.title&&(m=a.title, |
|
k=p.getTitle(this.messages,m,k||g),m=m.title?`${m.title} (${k})`:k);d=this._getSectionName(l,a,d);k=this._hasIndicators&&!h?f.tsx("div",null,f.tsx(x.Heading,{class:e.css.carouselTitle,level:this.headingLevel},c.title),f.tsx(x.Heading,{class:e.css.layerCaption,level:x.incrementHeadingLevel(this.headingLevel)},m)):m?f.tsx(x.Heading,{class:e.css.layerCaption,level:this.headingLevel},m):null;m=c.effectList;g=null;switch(a.type){case "symbol-table":l=a.infos.map((n,q)=>this._renderLegendForElementInfo(n, |
|
c,a.legendType,q)).filter(n=>!!n);l.length&&(g=f.tsx("div",{class:this.classes({[e.css.labelContainer]:!l[0].properties.classes?.[e.css.symbolRow]&&!b,[e.css.relationshipLabelContainer]:b})},l));break;case "color-ramp":case "opacity-ramp":case "heatmap-ramp":case "stretch-ramp":g=this._renderLegendForRamp(a,l.opacity,m);break;case "size-ramp":g=this._renderSizeRamp(a,l.opacity);break;case "pie-chart-ramp":g=this._renderPieChartRamp(a);break;case "relationship-ramp":g=K.renderRelationshipRamp(a,this.id, |
|
{opacity:l.opacity,effectList:m,ariaLabel:this.messages.previewRelationshipRampAriaLabel});break;case "univariate-above-and-below-ramp":g=this._renderUnivariateAboveAndBelowRamp(a,l.opacity,m);break;case "univariate-color-size-ramp":g=this._renderUnivariateColorSizeRamp(a,l.opacity,m)}if(!g)return null;b=f.tsx("div",{"aria-labelledby":d,class:e.css.section,id:`${d}-panel`,key:d,role:"tabpanel",tabIndex:0},[k,g]);h||this._sectionMap.set(d,b);return b}_renderPieChartRamp(a){return f.tsx("div",{afterCreate:p.attachToNode, |
|
bind:a.preview,class:e.css.pieChartRampPreview})}_renderUnivariateAboveAndBelowRamp(a,c,d){const {sizeRampElement:b,colorRampElement:h}=r.getUnivariateAboveAndBelowRampElements(a,c,"horizontal");if(!b)return null;a=r.getUnivariateSizeRampSize(b,"full",!0,"horizontal");var k=r.getUnivariateColorRampSize(b,"above",!0,"horizontal"),g=r.getUnivariateColorRampSize(b,"below",!0,"horizontal"),l=this.messages?.previewColorRampAriaLabel;k=r.getUnivariateColorRampPreview(h,{width:k,height:12,rampAlignment:"horizontal", |
|
opacity:c,type:"above",effectList:d,ariaLabel:l});c=r.getUnivariateColorRampPreview(h,{width:g,height:12,rampAlignment:"horizontal",opacity:c,type:"below",effectList:d,ariaLabel:l});d=r.getUnivariateColorRampMargin(b,"card");g=b.infos.map(n=>n.label);const m=g.length-1;g=g.map((n,q)=>0===q||q===m?f.tsx("div",{key:q},n):null);l={marginTop:"3px",display:"flex"};D.isRTL(this.container)?l.marginRight=`${d}px`:l.marginLeft=`${d}px`;a={width:`${a}px`,display:"flex",flexDirection:"row",justifyContent:"space-between"}; |
|
return f.tsx("div",{class:e.css.layerRow,key:"size-ramp-preview",styles:{display:"flex",flexDirection:"column"}},f.tsx("div",{class:this.classes(e.css.symbolContainer,e.css.sizeRampHorizontal),styles:{display:"flex",flexDirection:"row"}},b.infos.map((n,q)=>f.tsx("div",{afterCreate:p.attachToNode,bind:n.preview,class:e.css.symbol,key:q}))),k?f.tsx("div",{class:e.css.univariateAboveAndBelowColorRamp,key:"color-ramp-preview",styles:l},f.tsx("div",{afterCreate:p.attachToNode,bind:k}),f.tsx("div",{afterCreate:p.attachToNode, |
|
bind:c})):null,f.tsx("div",{class:e.css.layerInfo},f.tsx("div",{class:e.css.rampLabelsContainer,styles:a},g)))}_renderUnivariateColorSizeRamp(a,c,d){const {sizeRampElement:b,colorRampElement:h}=r.getUnivariateColorSizeRampElements(a,"horizontal");if(!b)return null;a=r.getUnivariateSizeRampSize(b,"full",!1,"horizontal");var k=r.getUnivariateColorRampSize(b,"full",!1,"horizontal");c=r.getUnivariateColorRampPreview(h,{width:k,height:12,rampAlignment:"horizontal",opacity:c,type:"full",effectList:d,ariaLabel:this.messages?.previewColorRampAriaLabel}); |
|
const g=r.getUnivariateColorRampMargin(b,"card"),l=b.infos.length-1;d=b.infos.map((m,n)=>0===n||n===l?f.tsx("div",{key:n},m.label):null);k={marginTop:"3px",display:"flex"};D.isRTL(this.container)?k.marginRight=`${g}px`:k.marginLeft=`${g}px`;a={width:`${a}px`,display:"flex",flexDirection:"row",justifyContent:"space-between"};return f.tsx("div",{class:e.css.layerRow,key:"size-ramp-preview",styles:{display:"flex",flexDirection:"column"}},f.tsx("div",{class:this.classes(e.css.symbolContainer,e.css.sizeRampHorizontal), |
|
styles:{display:"flex",flexDirection:"row"}},b.infos.map((m,n)=>f.tsx("div",{afterCreate:p.attachToNode,bind:m.preview,class:e.css.symbol,key:n}))),f.tsx("div",{class:e.css.univariateAboveAndBelowColorRamp,key:"color-ramp-preview",styles:k},f.tsx("div",{afterCreate:p.attachToNode,bind:c})),f.tsx("div",{class:e.css.layerInfo},f.tsx("div",{class:e.css.rampLabelsContainer,styles:a},d)))}_renderLegendForElementInfo(a,c,d,b){var h=c.layer;if(a.type)return this._renderLegendForElement(a,c,b,!1,!0);var k= |
|
p.isImageryStretchedLegend(h,d);d=p.getTitle(this.messages,a.label,!1)??"";if(a.preview){if(!a.symbol?.type.includes("simple-fill")){if(!a.label)return f.tsx("div",{afterCreate:p.attachToNode,bind:a.preview,key:b});c={[e.css.symbolCell]:this._hasIndicators};return f.tsx("div",{class:this.classes(e.css.layerRow,{[e.css.symbolRow]:this._hasIndicators}),key:b},f.tsx("div",{afterCreate:p.attachToNode,bind:a.preview,class:this.classes(c)}),f.tsx("div",{class:this.classes(e.css.imageLabel,{[e.css.labelCell]:this._hasIndicators})}, |
|
d))}let g=k=255,l=255,m=0,n=255,q=255,y=255,E=0;const F=a.symbol.color?.a,G=a.symbol.outline?.color?.a;F&&(k=a.symbol.color.r,g=a.symbol.color.g,l=a.symbol.color.b,m=a.symbol.color.a*h.opacity);G&&(n=a.symbol.outline.color.r,q=a.symbol.outline.color.g,y=a.symbol.outline.color.b,E=a.symbol.outline.color.a*h.opacity);h=(a=a.symbol.color?.isBright??!0)?"rgba(255, 255, 255, .6)":"rgba(0, 0, 0, .6)";c={background:F?`rgba(${k}, ${g}, ${l}, ${m})`:"none",color:a?"black":"white",textShadow:`-1px -1px 0 ${h},\n 1px -1px 0 ${h},\n -1px 1px 0 ${h},\n 1px 1px 0 ${h}`, |
|
border:G?`1px solid rgba(${n}, ${q}, ${y}, ${E})`:"none",filter:B.getCSSFilterFromEffectList(c.effectList)??void 0};return f.tsx("div",{class:e.css.layerRow,key:b},f.tsx("div",{class:e.css.labelElement,styles:c},d))}if(a.src)return c=this._renderImage(a,h,k),f.tsx("div",{class:e.css.layerRow,key:b},c,f.tsx("div",{class:e.css.imageLabel},d))}_renderImage(a,c,d){const {label:b,src:h,opacity:k}=a;d={[e.css.imageryLayerStretchedImage]:d,[e.css.symbol]:!d};c={opacity:`${null!=k?k:c.opacity}`};return f.tsx("img", |
|
{alt:p.getTitle(this.messages,b,!1),"aria-label":p.getTitle(this.messages,b,!1),border:0,class:this.classes(d),height:a.height,src:h,styles:c,width:a.width})}_renderSizeRampLines(a){a=a.infos;var c=a[0],d=a[a.length-1],b=c.symbol;a=this._hasIndicators;c=A.pt2px(c.size+c.outlineSize)*w;d=A.pt2px(d.size+d.outlineSize)*w;const h=a?c:c+50*w,k=a?c/2+50*w:c;var g;b?b.type.includes("3d")?(g=b.symbolLayers?.length)?(g=b.symbolLayers.at(g-1).get("resource.primitive"),g="triangle"===g||"cone"===g||"tetrahedron"=== |
|
g):g=void 0:g="triangle"===b.style:g=void 0;if(b)if(b.type.includes("3d")){var l=b.symbolLayers?.length;l?(b=b.symbolLayers.at(l-1).resource?.primitive,b="circle"===b||"cross"===b||"kite"===b||"sphere"===b||"cube"===b||"diamond"===b):b=void 0}else b=b.style,b="circle"===b||"diamond"===b||"cross"===b;else b=void 0;l=document.createElement("canvas");l.width=h;l.height=k;l.style.width=`${l.width/w}px`;l.style.height=`${l.height/w}px`;const m=l.getContext("2d");if(a){m.beginPath();var n=h/2-d/2;m.moveTo(0, |
|
0);m.lineTo(n,k);n=h/2+d/2;m.moveTo(h,0);m.lineTo(n,k)}else m.beginPath(),m.moveTo(0,k/2-d/2),m.lineTo(h,0),m.moveTo(0,k/2+d/2),m.lineTo(h,k);m.strokeStyle="#ddd";m.stroke();return f.tsx("div",{afterCreate:p.attachToNode,bind:l,styles:a?{display:"flex",marginTop:`-${g?0:b?c/2:0}px`,marginBottom:`-${g?d:b?d/2:0}px`}:{display:"flex",marginRight:`-${g?0:b?c/2:0}px`,marginLeft:`-${g?0:b?d/2:0}px`}})}_renderSizeRamp(a,c){var d=a.infos;const b=d[0].label,h=d[d.length-1].label;let k=d[0].preview;d=d[d.length- |
|
1].preview;const g=this._hasIndicators,l={"flex-direction":g?"column":"row-reverse"};k&&(k=k.cloneNode(!0),k.style.display="flex");d&&(d=d.cloneNode(!0),d.style.display="flex");c={opacity:null!=c?`${c}`:""};return f.tsx("div",{class:this.classes(e.css.layerRow,{[e.css.sizeRampRow]:g})},f.tsx("div",{class:e.css.rampLabel},g?b:h),f.tsx("div",{class:e.css.sizeRampContainer,styles:l},f.tsx("div",{afterCreate:p.attachToNode,bind:k,class:e.css.sizeRampPreview,styles:c}),this._renderSizeRampLines(a),f.tsx("div", |
|
{afterCreate:p.attachToNode,bind:d,class:e.css.sizeRampContainer,styles:c})),f.tsx("div",{class:e.css.rampLabel},g?h:b))}_getRampStopLabel(a,c){switch(c){case "heatmap-ramp":return this.messages[a.label];case "stretch-ramp":return p.getStretchStopLabel(a,this.messages);default:return a.label}}_renderLegendForRamp(a,c,d){var b=a.infos;a=a.type;const h="heatmap-ramp"===a,k=b.length-1;var g=2<k&&!h?25*k:100,l=g+20;b=b.slice(0).reverse();const m=b.length-1;var n=0!==b.length%2?b[b.length/2|0]:null;n= |
|
n&&f.tsx("div",{class:e.css.intervalSeparatorsContainer},f.tsx("div",{class:e.css.intervalSeparator},"|"),f.tsx("div",{class:e.css.rampLabel},this._getRampStopLabel(n,a)));g=[[{shape:{type:"path",path:"M0 12.5 L10 0 L10 25 Z"},fill:b[0].color,stroke:{width:0}},{shape:{type:"rect",x:10,y:0,width:g,height:25},fill:{type:"linear",x1:10,y1:0,x2:g+10,y2:0,colors:b.map((q,y)=>({color:q.color,offset:h&&"ratio"in q?q.ratio:y/k}))},stroke:{width:0}},{shape:{type:"path",path:`M${g+10} 0 L${l} ${12.5} L${g+ |
|
10} ${25} Z`},fill:b[m].color,stroke:{width:0}}]];l=I.renderSVG(g,l,25);c={filter:B.getCSSFilterFromEffectList(d)??void 0,opacity:null==c?void 0:`${c}`};return f.tsx("div",{class:e.css.layerRow,styles:{justifyContent:"center"}},f.tsx("div",{class:e.css.rampLabel},this._getRampStopLabel(b[0],a)),f.tsx("div",{class:e.css.symbolContainer},f.tsx("div",{styles:c},l),n),f.tsx("div",{class:e.css.rampLabel},this._getRampStopLabel(b[m],a)))}};u.__decorate([v.property()],t.prototype,"activeLayerInfos",void 0); |
|
u.__decorate([v.property()],t.prototype,"headingLevel",void 0);u.__decorate([v.property()],t.prototype,"layout",void 0);u.__decorate([v.property(),C.messageBundle("esri/widgets/Legend/t9n/Legend")],t.prototype,"messages",void 0);u.__decorate([v.property(),C.messageBundle("esri/t9n/common")],t.prototype,"messagesCommon",void 0);u.__decorate([v.property({readOnly:!0})],t.prototype,"type",void 0);u.__decorate([v.property()],t.prototype,"view",void 0);u.__decorate([L.accessibleHandler()],t.prototype, |
|
"_selectSection",null);return t=u.__decorate([H.subclass("esri.widgets.Legend.styles.Card")],t)}); |