@arcgis/map-components
Version:
ArcGIS Map Components
76 lines (75 loc) • 5.74 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as F } from "../../chunks/runtime.js";
import { css as P, html as b, svg as X } from "lit";
import { getBoundingBox as j, computeBBox as I, getTransformMatrix as A } from "@arcgis/core/applications/Components/svgUtils.js";
import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as r } from "@arcgis/lumina";
import { useDirection as N } from "@arcgis/lumina/controllers";
import { classes as p } from "@arcgis/toolkit/dom";
import { g as T, a as G, b as J, c as K } from "../../chunks/svgUtils.js";
const O = P`.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}`, Q = "http://www.w3.org/2000/svg";
class V extends U {
constructor() {
super(...arguments), this._direction = N(), this.legendElement = null;
}
static {
this.properties = { cssEffectFilter: 1, legendElement: 0, opacity: 9, messages: 0 };
}
static {
this.styles = O;
}
_getLineMarkers(n, l) {
const e = "arrowStart", s = "arrowEnd", i = n === "left", t = {
markerStart: null,
markerEnd: null
};
switch (l) {
case "HL":
i ? t.markerStart = `url(#${s})` : t.markerEnd = `url(#${e})`;
break;
case "LL":
t.markerStart = `url(#${s})`;
break;
case "LH":
i ? t.markerEnd = `url(#${e})` : t.markerStart = `url(#${s})`;
break;
default:
t.markerEnd = `url(#${e})`;
break;
}
return t;
}
render() {
const n = this.legendElement, { focus: l, labels: e } = n, s = !!l, i = this._renderRamp(n), t = { justifyContent: "center" }, a = this._direction === "rtl";
return s ? b`<div class="diamond-container" style=${h(t)}><div class="diamond-left-column">${a ? e.right : e.left}</div><div class="diamond-middle-column"><div class="diamond-middle-column-label">${e.top}</div>${i}<div class="diamond-middle-column-label">${e.bottom}</div></div><div class="diamond-right-column">${a ? e.left : e.right}</div></div>` : b`<div class="square-table"><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-bottom"))}>${a ? e.top : e.left}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-bottom"))}>${a ? e.left : e.top}</div></div><div class="square-table-row"><div class="square-table-cell"></div>${i}<div class="square-table-cell"></div></div><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-top"))}>${a ? e.right : e.bottom}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-top"))}>${a ? e.bottom : e.right}</div></div></div>`;
}
_renderRamp(n) {
const { focus: l, numClasses: e, colors: s, rotation: i } = n, t = this.opacity, a = this.messages.previewRelationshipRampAriaLabel, o = 60, m = !!l, d = Math.sqrt(o ** 2 + o ** 2) + (m ? 0 : 5), v = [], $ = [], k = [], u = o / e;
for (let f = 0; f < e; f++) {
const H = f * u;
for (let g = 0; g < e; g++) {
const W = g * u, M = T(s[f][g]), Y = K(null), z = {
type: "rect",
x: W,
y: H,
width: u,
height: u
}, R = G(M);
R && v.push(R);
const _ = J(z, M.fill, Y, null);
_ && $.push(_), k.push(j(z));
}
}
const x = 15, q = 15, w = 10;
let y;
m || (y = "margin: -15px -15px -18px -15px");
const S = this._getLineMarkers("left", l), E = this._getLineMarkers("right", l), L = I(k), D = A(L, d, d, 0, !1, i, !1), B = A(L, d, d, 0, !1, m ? -45 : null, !1), C = {
filter: this.cssEffectFilter,
opacity: t == null ? "" : `${t}`
};
return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ?? r} role=img style=${h(y)} width=${d ?? r} xmlns=${Q}>${X`<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>${v}</defs><g transform=${D ?? r}>${$}</g><g transform=${B ?? r}><line fill=none marker-end=${S.markerEnd ?? void 0 ?? r} marker-start=${S.markerStart ?? void 0 ?? r} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o - x} y2=${x} /><line fill=none marker-end=${E.markerEnd ?? void 0 ?? r} marker-start=${E.markerStart ?? void 0 ?? r} stroke=#555555 stroke-width=1 x1=${q} x2=${o - q} y1=${o + w} y2=${o + w} /></g>`}</svg></div>`;
}
}
F("arcgis-legend-relationship-ramp", V);
export {
V as ArcgisLegendRelationshipRamp
};