@arcgis/map-components
Version:
ArcGIS Map Components
89 lines (88 loc) • 4.45 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as C } from "../../chunks/runtime.js";
import { css as P, html as X } from "lit";
import { LitElement as j, safeStyleMap as v, safeClassMap as Y } from "@arcgis/lumina";
import { s as k, g as I, p as R } from "../../chunks/utils2.js";
const A = P`.size-ramp-container{display:flex;align-items:center;justify-content:center}.size-ramp-vertical-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.size-ramp-label{margin:0 .5em;white-space:nowrap}.size-ramp-vertical-ramp{display:flex;flex-direction:column;align-items:center}.size-ramp-ramp{display:flex;flex-direction:row-reverse;align-items:center}.size-ramp-preview{display:flex}`, M = "#ddd";
function N(e) {
if (!e)
return;
if (e.type.includes("3d")) {
if (!("symbolLayers" in e) || !e.symbolLayers?.length)
return;
const t = e.symbolLayers.at(-1), s = t && "resource" in t ? t.resource?.primitive : void 0;
return s === "circle" || s === "cross" || s === "kite" || s === "sphere" || s === "cube" || s === "diamond";
}
const r = "style" in e ? e.style : void 0;
return r === "circle" || r === "diamond" || r === "cross";
}
function O(e) {
if (e) {
if (e.type.includes("3d")) {
if (!("symbolLayers" in e) || !e.symbolLayers?.length)
return;
const r = e.symbolLayers.at(-1), t = r && "resource" in r ? r.resource?.primitive : void 0;
return t === "triangle" || t === "cone" || t === "tetrahedron";
}
return "style" in e && e.style === "triangle";
}
}
class _ extends j {
constructor() {
super(...arguments), this.hasIndicators = !1, this.legendElement = null, this.opacity = 1;
}
static {
this.properties = { hasIndicators: 5, legendElement: 0, opacity: 9, messages: 0 };
}
static {
this.styles = A;
}
render() {
if (this.legendElement.theme === "spike")
return X`<div style=${v({ display: "flex", flex: "1", justifyContent: "center" })}><arcgis-legend-spike-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-spike-ramp></div>`;
const { legendElement: r, hasIndicators: t, opacity: s } = this, l = r.infos, d = l.at(0), p = l.at(-1);
if (!d || !p)
return null;
const { label: g, ...y } = d, { label: f, ...z } = p;
let n = y.preview, i = z.preview;
if (!n || !i)
return null;
n = n.cloneNode(!0), n.style.display = "flex", k(n, I(this.messages, g)), i = i.cloneNode(!0), i.style.display = "flex", k(i, I(this.messages, f));
const a = { opacity: `${s ?? ""}` };
return X`<div class=${Y(t ? "size-ramp-vertical-container" : "size-ramp-container")}><div class="size-ramp-label">${t ? g : f}</div><div class=${Y(t ? "size-ramp-vertical-ramp" : "size-ramp-ramp")}><div class="size-ramp-preview" style=${v(a)}>${n}</div>${this._renderSizeRampLines(r)}<div class="size-ramp-preview" style=${v(a)}>${i}</div></div><div class="size-ramp-label">${t ? f : g}</div></div>`;
}
_renderSizeRampLines(r) {
const t = r.infos, s = t.at(0), l = t.at(-1);
if (!s || !l)
return null;
const d = s.symbol, p = this.hasIndicators, g = s.size && typeof s.size == "number" ? s.size : 0, y = l.size && typeof l.size == "number" ? l.size : 0, f = s.outlineSize || 0, z = l.outlineSize || 0, n = R(g + f), i = R(y + z), a = p ? n : n + 50, m = p ? n / 2 + 50 : n, u = O(d), h = N(d), c = document.createElement("canvas");
c.width = a, c.height = m, c.style.width = `${c.width}px`, c.style.height = `${c.height}px`;
const o = c.getContext("2d");
if (p) {
o.beginPath();
const S = 0, x = 0, $ = a / 2 - i / 2, b = m;
o.moveTo(S, x), o.lineTo($, b);
const L = a, w = 0, T = a / 2 + i / 2, E = m;
o.moveTo(L, w), o.lineTo(T, E);
} else {
o.beginPath();
const S = 0, x = m / 2 - i / 2, $ = a, b = 0;
o.moveTo(S, x), o.lineTo($, b);
const L = 0, w = m / 2 + i / 2, T = a, E = m;
o.moveTo(L, w), o.lineTo(T, E);
}
return o.strokeStyle = M, o.stroke(), X`<div style=${v(p ? {
display: "flex",
marginTop: `-${u ? 0 : h ? n / 2 : 0}px`,
marginBottom: `-${u ? i : h ? i / 2 : 0}px`
} : {
display: "flex",
marginRight: `-${u ? 0 : h ? n / 2 : 0}px`,
marginLeft: `-${u ? 0 : h ? i / 2 : 0}px`
})}>${c}</div>`;
}
}
C("arcgis-legend-card-size-ramp", _);
export {
_ as LegendCardSizeRamp
};