@arcgis/map-components
Version:
ArcGIS Map Components
227 lines (226 loc) • 10.6 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { svg as a, html as H } from "lit";
import { getBoundingBox as J, computeBBox as V, getTransformMatrix as X } from "@arcgis/core/applications/Components/svgUtils.js";
import j from "@arcgis/core/Color.js";
import { nothing as t, safeStyleMap as Y } from "@arcgis/lumina";
import { p as q, t as K } from "./utils2.js";
let Q = 0;
function Z() {
return Q++;
}
let _ = 0;
function A() {
return _++;
}
let nn = 0;
function tn() {
return nn++;
}
const z = /* @__PURE__ */ new Map([
["dash", [4, 3]],
["dashdot", [4, 3, 1, 3]],
["dot", [1, 3]],
["longdash", [8, 3]],
["longdashdot", [8, 3, 1, 3]],
["longdashdotdot", [8, 3, 1, 3, 1, 3]],
["shortdash", [4, 1]],
["shortdashdot", [4, 1, 1, 1]],
["shortdashdotdot", [4, 1, 1, 1, 1, 1]],
["shortdot", [1, 1]],
["solid", []]
]), en = "http://www.w3.org/2000/svg", rn = Math.PI;
function on(n) {
const { pattern: i, linearGradient: e } = n;
if (i)
return a`<pattern height=${i.height ?? t} id=${i.id ?? t} patternUnits=userSpaceOnUse width=${i.width ?? t} x=${i.x ?? 0 ?? t} y=${i.y ?? 0 ?? t}><image height=${i.image.height ?? t} href=${i.image.href ?? t} width=${i.image.width ?? t} x=${i.image.x ?? t} y=${i.image.y ?? t} /></pattern>`;
if (e) {
const r = e.stops.map((o) => a`<stop offset=${o.offset ?? t} stop-color=${o.color ?? t} />`);
return a`<linearGradient gradientUnits=userSpaceOnUse id=${e.id ?? t} x1=${e.x1 ?? t} x2=${e.x2 ?? t} y1=${e.y1 ?? t} y2=${e.y2 ?? t}>${r}</linearGradient>`;
}
return null;
}
function D(n) {
if (!n)
return { fill: "none", pattern: null, linearGradient: null };
if (!("type" in n))
return { fill: new j(n).toString(), pattern: null, linearGradient: null };
if (n.type === "pattern") {
const e = `patternId-${Z()}`;
return {
fill: `url(#${e})`,
pattern: {
id: e,
x: n.x,
y: n.y,
width: n.width,
height: n.height,
image: {
x: 0,
y: 0,
width: n.width,
height: n.height,
href: n.src
}
},
linearGradient: null
};
}
const i = `linearGradientId-${A()}`;
return {
fill: `url(#${i})`,
pattern: null,
linearGradient: {
id: i,
x1: n.x1,
y1: n.y1,
x2: n.x2,
y2: n.y2,
stops: n.colors.map((e) => ({
offset: e.offset,
color: e.color && new j(e.color).toString()
}))
}
};
}
function N(n) {
const i = {
color: "none",
width: 1,
cap: "butt",
join: "4",
dashArray: "none",
dashOffset: "0"
};
return n && (n.width != null && (i.width = n.width), n.cap && (i.cap = n.cap), n.join && (i.join = n.join.toString()), n.color && (i.color = new j(n.color).toString()), n.dashArray && (i.dashArray = n.dashArray), n.dashoffset && (i.dashOffset = n.dashoffset), n.style && !n.dashArray && (i.dashArray = an(n).join(",") || "none")), i;
}
function an(n) {
if (!n?.style)
return [];
const { dashArray: i, style: e, width: r } = n;
if (typeof i == "string" && i !== "none")
return i.split(",").map((l) => Number(l));
const o = r ?? 0, d = z.has(e) ? z.get(e).map((l) => l * o) : [];
if (n.cap !== "butt")
for (const [l, c] of d.entries())
d[l] = l % 2 === 1 ? c + o : Math.max(c - o, 1);
return d;
}
function ln(n) {
return n.map((i) => `${i.command} ${i.values.join(" ")}`).join(" ").trim();
}
function G(n, i) {
if (n == null)
throw new Error("value is None");
}
function P(n, i, e, r, o) {
if (n) {
if (n.type === "circle")
return a`<circle cx=${n.cx ?? t} cy=${n.cy ?? t} fill=${i ?? t} fill-rule=evenodd r=${n.r ?? t} stroke=${e.color ?? t} stroke-dasharray=${e.dashArray ?? void 0 ?? t} stroke-dashoffset=${e.dashOffset ?? void 0 ?? t} stroke-linecap=${e.cap ?? t} stroke-linejoin=${e.join ?? t} stroke-miterlimit=4 stroke-width=${e.width ?? t} />`;
if (n.type === "ellipse")
return a`<ellipse cx=${n.cx ?? t} cy=${n.cy ?? t} fill=${i ?? t} fill-rule=evenodd rx=${n.rx ?? t} ry=${n.ry ?? t} stroke=${e.color ?? t} stroke-dasharray=${e.dashArray ?? void 0 ?? t} stroke-linecap=${e.cap ?? t} stroke-linejoin=${e.join ?? t} stroke-miterlimit=4 stroke-width=${e.width ?? t} />`;
if (n.type === "rect")
return a`<rect fill=${i ?? t} fill-rule=evenodd height=${n.height ?? t} stroke=${e.color ?? t} stroke-dasharray=${e.dashArray ?? void 0 ?? t} stroke-linecap=${e.cap ?? t} stroke-linejoin=${e.join ?? t} stroke-miterlimit=4 stroke-width=${e.width ?? t} width=${n.width ?? t} x=${n.x ?? t} y=${n.y ?? t} />`;
if (n.type === "image")
return a`<image aria-label=${o ?? "" ?? t} height=${n.height ?? t} href=${n.src ?? t} preserveAspectRatio=none width=${n.width ?? t} x=${n.x ?? t} y=${n.y ?? t} />`;
if (n.type === "path") {
const d = typeof n.path != "string" ? ln(n.path) : n.path;
return a`<path d=${d ?? t} fill=${i ?? t} fill-rule=evenodd stroke=${e.color ?? t} stroke-dasharray=${e.dashArray ?? void 0 ?? t} stroke-linecap=${e.cap ?? t} stroke-linejoin=${e.join ?? t} stroke-miterlimit=4 stroke-width=${e.width ?? t} />`;
}
if (n.type === "text")
return G(r), a`<text dominant-baseline=${(r.dominantBaseline === "inherit" || r.dominantBaseline === "alphabetic" || r.dominantBaseline === "auto" || r.dominantBaseline === "central" || r.dominantBaseline === "hanging" || r.dominantBaseline === "ideographic" || r.dominantBaseline === "mathematical" || r.dominantBaseline === "middle" || r.dominantBaseline === "text-bottom" || r.dominantBaseline === "text-top" ? r.dominantBaseline : void 0) ?? t} fill=${i ?? t} fill-rule=evenodd font-family=${r.font.family ?? t} font-size=${r.font.size ?? t} font-style=${r.font.style ?? t} font-variant=${r.font.variant ?? t} font-weight=${r.font.weight ?? t} kerning=${r.kerning ?? t} rotate=${r.rotate ?? t} stroke=${e.color ?? t} stroke-dasharray=${e.dashArray ?? void 0 ?? t} stroke-linecap=${e.cap ?? t} stroke-linejoin=${e.join ?? t} stroke-miterlimit=4 stroke-width=${e.width ?? t} text-anchor=${(r.align === "inherit" || r.align === "middle" || r.align === "end" || r.align === "start" ? r.align : void 0) ?? t} text-decoration=${(r.decoration === "inherit" || r.decoration === "none" || r.decoration === "blink" || r.decoration === "line-through" || r.decoration === "overline" || r.decoration === "underline" ? r.decoration : void 0) ?? t} text-rendering=auto x=${n.x ?? t} y=${n.y ?? t}>${n.text}</text>`;
}
return null;
}
function sn(n, i, e) {
const r = U(n);
if (!r)
return null;
const { strength: o, radius: d } = r, l = o > 0 ? d : 0, c = 5 ** (i / 100) * (0.4 + i / 100), h = (o + l * 0.5) * c, u = (o + l) * i, f = o * 4 + 1;
return a`<filter filterUnits=userSpaceOnUse height=300% .id=${`bloom${e}`} width=300% x=-100% y=-100%><feMorphology in=SourceGraphic operator=dilate radius=${h ?? t} result=dilate /><feGaussianBlur in=dilate result=blur stdDeviation=${u / 25} /><feGaussianBlur in=blur result=intensityBlur stdDeviation=${u / 50} /><feComponentTransfer in=SourceGraphic result=intensityBrightness><feFuncR slope=${f ?? t} type=linear /><feFuncG slope=${f ?? t} type=linear /><feFuncB slope=${f ?? t} type=linear /></feComponentTransfer><feMerge><feMergeNode in=intensityBlur /><feMergeNode in=intensityBrightness /><feGaussianBlur stdDeviation=${o / 10} /></feMerge></filter>`;
}
function w(n, i) {
const e = n * (rn / 180);
return Math.abs(i * Math.sin(e)) + Math.abs(i * Math.cos(e));
}
function R(n, i) {
const e = {
align: null,
decoration: null,
kerning: null,
rotate: null,
font: {
style: null,
variant: null,
weight: null,
size: null,
family: null
}
};
if (n) {
const r = n.alignBaseline, o = r === "baseline" ? "auto" : r === "top" ? "text-top" : r === "bottom" ? "hanging" : r;
e.align = n.align, e.dominantBaseline = o, e.decoration = n.decoration, e.kerning = n.kerning ? "auto" : "0", e.rotate = n.rotated ? "90" : "0", G(i), e.font.style = i.style || "normal", e.font.variant = i.variant || "normal", e.font.weight = i.weight || "normal", e.font.size = i.size?.toString() || "10pt", e.font.family = i.family || "serif";
}
return e;
}
function dn(n, i) {
if (!n || n.length === 0)
return null;
const e = [];
for (const r of n) {
const { shape: o, fill: d, stroke: l, font: c } = r, h = D(d), u = N(l), f = o.type === "text" ? R(o, c) : null, v = P(o, h.fill, u, f);
v && e.push(v);
}
return a`<mask id=${i ?? t} maskUnits=userSpaceOnUse><g>${e}</g></mask>`;
}
function U(n) {
const i = n?.match(/bloom\(\s*([^\s]+)\s+([^\s]+)\s+([^\s]+)\s*\)/iu);
if (!i)
return null;
const [, e, r, o] = i;
return {
strength: Number(e),
radius: q(K(r)),
threshold: Number(o)
};
}
function $n(n, i, e, r = {}) {
const o = [], d = [], l = tn(), c = sn(r.cssEffectFilter, i, l);
let h = null;
if (c) {
const s = U(r.cssEffectFilter), g = r.clipBloomEffect || !s?.strength ? 0 : (s.strength + s.radius / 2) / 3, m = i + i * g, y = e + e * g;
h = [Math.max(m, 10), Math.max(y, 10)];
}
let u = i, f = e;
if (r.useRotationSize)
for (let s = 0; s < n.length; s++) {
const g = r.rotations?.[s] ?? 0;
u = Math.max(w(g, i), u), f = Math.max(w(g, e), f);
}
for (let s = 0; s < n.length; s++) {
const g = n[s], m = [], y = [];
let k = 0, b = 0, B = 0;
for (const p of g) {
const { shape: $, fill: T, stroke: F, font: W, offset: M } = p;
!r.ignoreStrokeWidth && $.type !== "text" && (k += F?.width || 0);
const O = D(T), C = N(F), E = $.type === "text" ? R($, W) : null;
o.push(on(O)), m.push(P($, O.fill, C, E, r.ariaLabel)), y.push(J($)), M && (b += M[0], B += M[1]);
}
const x = r.rotations?.[s] ?? 0;
r.useRotationSize && (b += (u - w(x, i)) / 2, B += (f - w(x, e)) / 2);
const L = V(y), I = X(L, i, e, k, r.scale ?? !1, x, r.useRotationSize ?? !1, [b, B], h);
let S = null;
if (r.masking) {
const p = `mask-${s}`, $ = r.masking[s];
o.push(dn($, p)), S = `url(#${p})`;
}
d.push(S ? a`<g mask=${S ?? t}><g transform=${I ?? t}>${m}</g></g>` : a`<g transform=${I ?? t}>${m}</g>`);
}
return c && (G(h), u = h[0], f = h[1]), H`<svg aria-label=${r.ariaLabel ?? t} height=${f ?? t} role=img style=${Y("display: block;")} width=${u ?? t} xmlns=${en}>${a`${c}<defs>${o}</defs>${c ? a`<g filter=${`url(#bloom${l})`}>${d}</g>` : d}`}</svg>`;
}
export {
on as a,
P as b,
N as c,
D as g,
$n as r
};