@doegis/core/widgets/Legend/styles/Card.js

DOE GIS API

import{_ as e}from"../../../chunks/tslib.es6.js";import"../../../intl.js";import t from"../../../core/Handles.js";import{watch as s}from"../../../core/reactiveUtils.js";import{pt2px as i}from"../../../core/screenUtils.js";import{property as o}from"../../../core/accessorSupport/decorators/property.js";import"../../../core/accessorSupport/ensureType.js";import"../../../core/arrayUtils.js";import{subclass as a}from"../../../core/accessorSupport/decorators/subclass.js";import{renderSVG as r}from"../../../symbols/support/svgUtils.js";import{getCSSFilterFromEffectList as l}from"../../../symbols/support/utils.js";import n from"../../Widget.js";import{CSS as c}from"./CardCSS.js";import{renderRelationshipRamp as d}from"./support/relationshipUtils.js";import{getUnivariateAboveAndBelowRampElements as p,getUnivariateSizeRampSize as h,getUnivariateColorRampSize as m,getUnivariateColorRampPreview as y,getUnivariateColorRampMargin as f,getUnivariateColorSizeRampElements as u}from"./support/univariateUtils.js";import{getTitle as g,attachToNode as v,isImageryStretchedLegend as b}from"../support/styleUtils.js";import{Heading as _,incrementHeadingLevel as w}from"../../support/Heading.js";import{accessibleHandler as L}from"../../support/decorators/accessibleHandler.js";import{messageBundle as x}from"../../support/decorators/messageBundle.js";import{tsx as S}from"../../support/jsxFactory.js";import{isRTL as C}from"../../support/widgetUtils.js";import{substitute as $}from"../../../intl/substitute.js";const R=25,I=25,k=768,z=100;var N;!function(e){e.Auto="auto",e.Stack="stack",e.SideBySide="side-by-side"}(N||(N={}));const A="#ddd",j=window.devicePixelRatio;function E(e){if(e){if(e.type.includes("3d")){const t=e.symbolLayers&&e.symbolLayers.length;if(!t)return;const s=e.symbolLayers.getItemAt(t-1),i=s.resource&&s.resource.primitive;return"circle"===i||"cross"===i||"kite"===i||"sphere"===i||"cube"===i||"diamond"===i}{const t=e.style;return"circle"===t||"diamond"===t||"cross"===t}}}function F(e){if(e){if(e.type.includes("3d")){const t=e.symbolLayers&&e.symbolLayers.length;if(!t)return;const s=e.symbolLayers.getItemAt(t-1).get("resource.primitive");return"triangle"===s||"cone"===s||"tetrahedron"===s}return"triangle"===e.style}}let T=class extends n{constructor(e,s){super(e,s),this._handles=new t,this._hasIndicators=!1,this._selectedSectionName=null,this._sectionNames=[],this._sectionMap=new Map,this.activeLayerInfos=null,this.headingLevel=3,this.layout=N.Stack,this.messages=null,this.messagesCommon=null,this.type="card",this.view=null}initialize(){this.addHandles(s((()=>this.activeLayerInfos),(e=>{this._handles.removeAll(),this._watchForSectionChanges(e)})))}destroy(){this._handles.destroy(),this._handles=null}render(){this._hasIndicators=this.layout===N.Auto&&this.view.container.clientWidth<=k||this.layout===N.Stack;const e=this.activeLayerInfos,t=e&&e.toArray().map((e=>this._renderLegendForLayer(e))).filter((e=>!!e));this._hasIndicators?this._selectedSectionName&&this._sectionNames.includes(this._selectedSectionName)||(this._selectedSectionName=this._sectionNames&&this._sectionNames[0]):this._selectedSectionName=null;const s=this._sectionNames.length,i=this._sectionNames.map(((e,t)=>{const i=$(this.messagesCommon.pagination.pageText,{index:t+1,total:s});return S("div",{key:e,role:"tab",id:e,"aria-label":i,"aria-controls":`${e}-panel`,"aria-selected":(this._selectedSectionName===e).toString(),tabIndex:this._selectedSectionName===e?0:-1,title:i,onclick:this._selectSection,onkeydown:this._focusSection,bind:this,class:this.classes(c.indicator,{[c.activated]:this._selectedSectionName===e}),"data-section-name":e})})),o=this._hasIndicators&&s>1?S("div",{class:c.indicatorContainer,key:"carousel-navigation",role:"tablist"},i):null,a=this._hasIndicators?this._sectionMap.get(this._selectedSectionName):t&&t.length?t:null,r={[c.stacked]:this._hasIndicators};return S("div",{class:this.classes(c.base,r)},a||S("div",{class:c.message},this.messages.noLegend),o)}_selectSection(e){const t=e.target.getAttribute("data-section-name");t&&(this._selectedSectionName=t)}_focusSection(e){switch(e.key){case"ArrowLeft":case"ArrowRight":this._switchSectionOnArrowPress(e);break;case"Enter":case" ":this._selectSection(e)}}_switchSectionOnArrowPress(e){const t=e.key,s="ArrowLeft"===t?-1:1,i=e.target.getAttribute("data-section-name"),o=this._sectionNames.indexOf(i),a=this._sectionNames;let r=null;-1!==o&&(a[o+s]?r=document.getElementById(a[o+s]):"ArrowLeft"===t?r=document.getElementById(a[a.length-1]):"ArrowRight"===t&&(r=document.getElementById(a[0])),r&&r.focus())}_watchForSectionChanges(e){if(this._generateSectionNames(),e){e.forEach((e=>{const t=`activeLayerInfo-${e.layer.uid}-version-change`;this._handles.remove(t),this._watchForSectionChanges(e.children),this._handles.add(s((()=>e.version),(()=>this._generateSectionNames())),t)}));const t="activeLayerInfos-collection-change";this._handles.remove(t),this._handles.add(e.on("change",(()=>this._watchForSectionChanges(e))),t)}}_generateSectionNames(){this._sectionNames.length=0,this._selectedSectionName=null,this.activeLayerInfos&&this.activeLayerInfos.forEach(this._generateSectionNamesForActiveLayerInfo,this)}_getSectionName(e,t,s){return`${this.id}${e.uid}-type-${t.type}-${s}`}_generateSectionNamesForActiveLayerInfo(e){e.children.forEach(this._generateSectionNamesForActiveLayerInfo,this),e.legendElements&&e.legendElements.forEach(((t,s)=>{this._sectionNames.push(this._getSectionName(e.layer,t,s))}))}_renderLegendForLayer(e){if(!e.ready)return null;if(e.children.length){const t=e.children.map((e=>this._renderLegendForLayer(e))).toArray();return S("div",{key:e.layer.uid,class:this.classes(c.service,c.groupLayer)},S("div",{class:c.serviceCaptionContainer},e.title),t)}{const t=e.legendElements;if(t&&!t.length)return null;const s=t.some((e=>"relationship-ramp"===e.type)),i=t.map(((t,i)=>this._renderLegendForElement(t,e,i,s))).filter((e=>!!e));if(!i.length)return null;const o={[c.groupLayerChild]:!!e.parent};return S("div",{key:e.layer.uid,class:this.classes(c.service,o)},S("div",{class:c.serviceCaptionContainer},S("div",{class:c.serviceCaptionText},e.title)),S("div",{class:c.serviceContent},i))}}_renderLegendForElement(e,t,s,i=!1,o=!1){const a="color-ramp"===e.type,r="opacity-ramp"===e.type,l="size-ramp"===e.type,n=t.layer;let p=null;if("string"==typeof e.title)p=e.title;else if(e.title){const t=e.title,s=g(this.messages,t,a||r);p=t.title?`${t.title} (${s})`:s}const h=this._getSectionName(n,e,s),m=this._hasIndicators&&!o?S("div",null,S(_,{level:this.headingLevel,class:c.carouselTitle},t.title),S(_,{level:w(this.headingLevel),class:c.layerCaption},p)):p?S(_,{level:this.headingLevel,class:c.layerCaption},p):null,y=t.effectList;let f=null;if("symbol-table"===e.type){const s=e.infos.map(((s,i)=>this._renderLegendForElementInfo(s,t,e.legendType,i))).filter((e=>!!e));if(s.length){const e=s[0].properties.classes&&s[0].properties.classes[c.symbolRow],t={[c.labelContainer]:!e&&!i,[c.relationshipLabelContainer]:i};f=S("div",{class:this.classes(t)},s)}}else"color-ramp"===e.type||"opacity-ramp"===e.type||"heatmap-ramp"===e.type?f=this._renderLegendForRamp(e,n.opacity,y):l?f=this._renderSizeRamp(e,n.opacity):"pie-chart-ramp"===e.type?f=this._renderPieChartRamp(e):"relationship-ramp"===e.type?f=d(e,this.id,n.opacity,y):"univariate-above-and-below-ramp"===e.type?f=this._renderUnivariateAboveAndBelowRamp(e,n.opacity,y):"univariate-color-size-ramp"===e.type&&(f=this._renderUnivariateColorSizeRamp(e,n.opacity,y));if(!f)return null;const u=S("div",{key:h,class:c.section,id:`${h}-panel`,role:"tabpanel","aria-labelledby":h,tabIndex:0},[m,f]);return o||this._sectionMap.set(h,u),u}_renderPieChartRamp(e){return S("div",{class:c.pieChartRampPreview,bind:e.preview,afterCreate:v})}_renderUnivariateAboveAndBelowRamp(e,t,s){const{sizeRampElement:i,colorRampElement:o}=p(e,t,"horizontal");if(!i)return null;const a=h(i,"full",!0,"horizontal"),r=m(i,"above",!0,"horizontal"),l=m(i,"below",!0,"horizontal"),n=12,d=y(o,{width:r,height:n,rampAlignment:"horizontal",opacity:t,type:"above",effectList:s}),u=y(o,{width:l,height:n,rampAlignment:"horizontal",opacity:t,type:"below",effectList:s}),g=f(i,"card"),b=i.infos.map((e=>e.label)),_=b.length-1,w=b.map(((e,t)=>0===t||t===_?S("div",{key:t},e):null)),L={display:"flex",flexDirection:"column"},x={display:"flex",flexDirection:"row"},$={marginTop:"3px",display:"flex"};C(this.container)?$.marginRight=`${g}px`:$.marginLeft=`${g}px`;const R={width:`${a}px`,display:"flex",flexDirection:"row",justifyContent:"space-between"};return S("div",{class:c.layerRow,key:"size-ramp-preview",styles:L},S("div",{class:this.classes(c.symbolContainer,c.sizeRampHorizontal),styles:x},i.infos.map(((e,t)=>S("div",{key:t,class:c.symbol,bind:e.preview,afterCreate:v})))),d?S("div",{class:c.univariateAboveAndBelowColorRamp,styles:$,key:"color-ramp-preview"},S("div",{bind:d,afterCreate:v}),S("div",{bind:u,afterCreate:v})):null,S("div",{class:c.layerInfo},S("div",{class:c.rampLabelsContainer,styles:R},w)))}_renderUnivariateColorSizeRamp(e,t,s){const{sizeRampElement:i,colorRampElement:o}=u(e,"horizontal");if(!i)return null;const a=h(i,"full",!1,"horizontal"),r=m(i,"full",!1,"horizontal"),l=y(o,{width:r,height:12,rampAlignment:"horizontal",opacity:t,type:"full",effectList:s}),n=f(i,"card"),d=i.infos.length-1,p=i.infos.map(((e,t)=>0===t||t===d?S("div",{key:t},e.label):null)),g={display:"flex",flexDirection:"column"},b={display:"flex",flexDirection:"row"},_={marginTop:"3px",display:"flex"};C(this.container)?_.marginRight=`${n}px`:_.marginLeft=`${n}px`;const w={width:`${a}px`,display:"flex",flexDirection:"row",justifyContent:"space-between"};return S("div",{class:c.layerRow,key:"size-ramp-preview",styles:g},S("div",{class:this.classes(c.symbolContainer,c.sizeRampHorizontal),styles:b},i.infos.map(((e,t)=>S("div",{key:t,class:c.symbol,bind:e.preview,afterCreate:v})))),S("div",{class:c.univariateAboveAndBelowColorRamp,styles:_,key:"color-ramp-preview"},S("div",{bind:l,afterCreate:v})),S("div",{class:c.layerInfo},S("div",{class:c.rampLabelsContainer,styles:w},p)))}_renderLegendForElementInfo(e,t,s,i){const o=t.layer;if(e.type)return this._renderLegendForElement(e,t,i,!1,!0);const a=b(o,s);if(e.preview){if(!e.symbol||!e.symbol.type.includes("simple-fill")){if(!e.label)return S("div",{key:i,bind:e.preview,afterCreate:v});const t={[c.symbolCell]:this._hasIndicators};return S("div",{key:i,class:this.classes(c.layerRow,{[c.symbolRow]:this._hasIndicators})},S("div",{class:this.classes(t),bind:e.preview,afterCreate:v}),S("div",{class:this.classes(c.imageLabel,{[c.labelCell]:this._hasIndicators})},g(this.messages,e.label,!1)||""))}let s=255,a=255,r=255,n=0,d=255,p=255,h=255,m=0;const y=e.symbol.color&&e.symbol.color.a,f=e.symbol.outline&&e.symbol.outline.color&&e.symbol.outline.color.a;y&&(s=e.symbol.color.r,a=e.symbol.color.g,r=e.symbol.color.b,n=e.symbol.color.a*o.opacity),f&&(d=e.symbol.outline.color.r,p=e.symbol.outline.color.g,h=e.symbol.outline.color.b,m=e.symbol.outline.color.a*o.opacity);const u=e.symbol.color?.isBright??!0,b=u?"rgba(255, 255, 255, .6)":"rgba(0, 0, 0, .6)",_={background:y?`rgba(${s}, ${a}, ${r}, ${n})`:"none",color:u?"black":"white",textShadow:`-1px -1px 0 ${b},\n                                              1px -1px 0 ${b},\n                                              -1px 1px 0 ${b},\n                                              1px 1px 0 ${b}`,border:f?`1px solid rgba(${d}, ${p}, ${h}, ${m})`:"none",filter:l(t.effectList)};return S("div",{key:i,class:c.layerRow},S("div",{class:c.labelElement,styles:_}," ",e.label," "))}if(e.src){const t=this._renderImage(e,o,a);return S("div",{key:i,class:c.layerRow},t,S("div",{class:c.imageLabel},e.label||""))}}_renderImage(e,t,s){const{label:i,src:o,opacity:a}=e,r={[c.imageryLayerStretchedImage]:s,[c.symbol]:!s},l={opacity:`${null!=a?a:t.opacity}`};return S("img",{alt:g(this.messages,i,!1),src:o,border:0,width:e.width,height:e.height,class:this.classes(r),styles:l})}_renderSizeRampLines(e){const t=e.infos,s=t[0],o=t[t.length-1],a=s.symbol,r=this._hasIndicators,l=i(s.size+s.outlineSize)*j,n=i(o.size+o.outlineSize)*j,c=r?l:l+50*j,d=r?l/2+50*j:l,p=F(a),h=E(a),m=document.createElement("canvas");m.width=c,m.height=d,m.style.width=m.width/j+"px",m.style.height=m.height/j+"px";const y=m.getContext("2d");if(r){y.beginPath();const e=0,t=0,s=c/2-n/2,i=d;y.moveTo(e,t),y.lineTo(s,i);const o=c,a=0,r=c/2+n/2,l=d;y.moveTo(o,a),y.lineTo(r,l)}else{y.beginPath();const e=0,t=d/2-n/2,s=c,i=0;y.moveTo(e,t),y.lineTo(s,i);const o=0,a=d/2+n/2,r=c,l=d;y.moveTo(o,a),y.lineTo(r,l)}return y.strokeStyle=A,y.stroke(),S("div",{bind:m,afterCreate:v,styles:r?{display:"flex",marginTop:`-${p?0:h?l/2:0}px`,marginBottom:`-${p?n:h?n/2:0}px`}:{display:"flex",marginRight:`-${p?0:h?l/2:0}px`,marginLeft:`-${p?0:h?n/2:0}px`}})}_renderSizeRamp(e,t){const s=e.infos,i=s[0].label,o=s[s.length-1].label;let a=s[0].preview,r=s[s.length-1].preview;const l=this._hasIndicators,n={"flex-direction":l?"column":"row-reverse"};a&&(a=a.cloneNode(!0),a.style.display="flex"),r&&(r=r.cloneNode(!0),r.style.display="flex");const d={opacity:null!=t?`${t}`:""};return S("div",{class:this.classes(c.layerRow,{[c.sizeRampRow]:l})},S("div",{class:c.rampLabel},l?i:o),S("div",{class:c.sizeRampContainer,styles:n},S("div",{bind:a,afterCreate:v,class:c.sizeRampPreview,styles:d}),this._renderSizeRampLines(e),S("div",{bind:r,afterCreate:v,class:c.sizeRampContainer,styles:d})),S("div",{class:c.rampLabel},l?o:i))}_renderLegendForRamp(e,t,s){const i=e.infos,o="heatmap-ramp"===e.type,a=i.length-1,n=I,d=a>2&&!o?R*a:z,p=d+20,h=10,m=i.slice(0).reverse();m.forEach(((e,t)=>{e.offset=o?e.ratio:t/a}));const y=m.length-1,f=m.length%2!=0&&m[m.length/2|0],u=f&&S("div",{class:c.intervalSeparatorsContainer},S("div",{class:c.intervalSeparator},"|"),S("div",{class:c.rampLabel},f.label)),g=i[i.length-1].label,v=i[0].label,b=[[{shape:{type:"path",path:`M0 ${n/2} L${h} 0 L${h} ${n} Z`},fill:m[0].color,stroke:{width:0}},{shape:{type:"rect",x:h,y:0,width:d,height:n},fill:{type:"linear",x1:h,y1:0,x2:d+h,y2:0,colors:m},stroke:{width:0}},{shape:{type:"path",path:`M${d+h} 0 L${p} ${n/2} L${d+h} ${n} Z`},fill:m[y].color,stroke:{width:0}}]],_=r(b,p,n),{messages:w}=this,L={filter:l(s),opacity:null==t?null:`${t}`},x={justifyContent:"center"};return S("div",{class:c.layerRow,styles:x},S("div",{class:c.rampLabel},o?w[g]:g),S("div",{class:c.symbolContainer},S("div",{styles:L},_),u),S("div",{class:c.rampLabel},o?w[v]:v))}};e([o()],T.prototype,"activeLayerInfos",void 0),e([o()],T.prototype,"headingLevel",void 0),e([o()],T.prototype,"layout",void 0),e([o(),x("esri/widgets/Legend/t9n/Legend")],T.prototype,"messages",void 0),e([o(),x("esri/t9n/common")],T.prototype,"messagesCommon",void 0),e([o({readOnly:!0})],T.prototype,"type",void 0),e([o()],T.prototype,"view",void 0),e([L()],T.prototype,"_selectSection",null),T=e([a("esri.widgets.Legend.styles.Card")],T);const U=T;export{U as default};