@arcgis/map-components
Version:
ArcGIS Map Components
59 lines (58 loc) • 3.95 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as W } from "../../chunks/runtime.js";
import { css as X, html as g } from "lit";
import { LitElement as Y, safeStyleMap as b } from "@arcgis/lumina";
import { s as A, g as z, p as k } from "../../chunks/utils2.js";
const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-spacing-sm-plus);margin-left:var(--calcite-spacing-sm)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-spacing-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:0 var(--calcite-spacing-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-spacing-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
function u(m) {
return m.infos.filter((r, l) => l % 2 === 0);
}
function w(m) {
return !!(m && typeof m == "object");
}
class j extends Y {
constructor() {
super(...arguments), this.legendElement = null;
}
static {
this.properties = { legendElement: 0, messages: 0 };
}
static {
this.styles = C;
}
render() {
return this.legendElement.infos.length !== 5 ? null : g`<div class="spike-ramp-container"><div class="spike-ramp-preview-container">${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
}
_renderSpikeRampPreview() {
const r = this.legendElement, [l, o, d] = u(r).map(({ preview: p, label: a }) => {
if (!p)
return null;
const i = p.cloneNode(!0);
return i.classList.add("spike-ramp-symbol-preview"), A(i, z(this.messages, a)), i;
});
return !l || !o || !d ? null : g`<div class="spike-ramp-preview"><div>${d}</div><div>${o}</div><div>${l}</div></div>`;
}
_renderSpikeRampLines() {
const r = this.legendElement, [{ width: l, height: o }, { width: d }, { width: p, height: a }] = u(r).map(({ size: v }) => w(v) ? { width: k(v.width), height: k(v.height) } : { width: 0, height: 0 }), i = 10, c = 8, n = l + d + p + i * 3, h = o, s = document.createElement("canvas");
s.width = (n + i) * e, s.height = h * e, s.style.width = `${s.width / e}px`, s.style.height = `${s.height / e}px`;
const t = s.getContext("2d");
t.beginPath();
const f = n - (l / 2 + i), x = 0, y = n + c, $ = 0;
t.moveTo(f * e, x * e), t.lineTo(y * e, $ * e);
const R = (n - c) / 2, E = (o - a) / 2, S = n + c, L = (o - a) / 2;
t.moveTo(R * e, E * e), t.lineTo(S * e, L * e);
const P = p / 2, _ = h - a, H = n + c, T = h - a;
return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(), g`<div class="spike-ramp-lines">${s}</div>`;
}
_renderSpikeRampLabels() {
const r = this.legendElement, [{ label: l, height: o }, { label: d }, { label: p, height: a }] = u(r).map(({ label: s, size: t }) => ({
label: s,
height: w(t) ? k(t.height) : 0
})), i = o - a, c = { position: "absolute", top: "0" }, n = { position: "absolute", top: `${i / 2}px` }, h = { position: "absolute", top: `${i}px` };
return g`<div class="spike-ramp-labels-container"><div class="spike-ramp-label" style=${b(c)}>${l}</div><div class="spike-ramp-label" style=${b(n)}>${d}</div><div class="spike-ramp-label" style=${b(h)}>${p}</div></div>`;
}
}
W("arcgis-legend-spike-ramp", j);
export {
j as ArcgisLegendSpikeRamp
};