ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
182 lines (181 loc) • 8.67 kB
JavaScript
import { a as f, f as m, n as y, o as R, r as A, t as v } from "./utils-D1iZnChu.js";
import { _ as P, i as p } from "./factory-ZNhcQ4tf.js";
import { a as w, n as D } from "./ssr-DSGwPtEd.js";
var k = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{--ran-radar-polygon-color: var(--ran-color-border, #e6e6e6);--ran-radar-line-color: var(--ran-color-border, #e6e6e6);--ran-radar-fill-color: rgba(255, 121, 35, .6);--ran-radar-stroke-color: rgba(255, 121, 35, .6)}.ran-radar{position:var(--ran-radar-position, relative);width:var(--ran-radar-width, 100%);height:var(--ran-radar-height, 100%);display:var(--ran-radar-display, block)}.ran-radar canvas{width:100%;height:100%}", M = "rgba(0,0,0,0)", S = "rgba(0,0,0,1)", d = "#e6e6e6", C = "#e6e6e6", O = "黑体", g = "rgba(255,121,35,0.60)", u = "rgba(255,121,35,0.60)", L = class extends D {
mData;
mCount;
mW;
mCenter;
mRadius;
mAngle;
static get observedAttributes() {
return [
"abilitys",
"colorpolygon",
"colorline",
"fillcolor",
"strokecolor",
"sheet"
];
}
abilityRadarChartContainer;
abilityRadarChart;
_iconElement;
_shadowDom;
resizeObserver;
constructor() {
super(), this._shadowDom = y(this, k);
const t = v(this._shadowDom, ".ran-radar", () => p().class("ran-radar").children(P("canvas").build()).build()), e = t.querySelector("canvas");
this.abilityRadarChartContainer = t, this.abilityRadarChart = e, this.resizeObserver = new ResizeObserver(this.resize), this.resizeObserver.observe(this.abilityRadarChartContainer);
}
resize = () => {
this.refreshData();
};
get abilitys() {
const t = this.getAttribute("abilitys");
if (typeof t == "string") try {
return JSON.parse(t);
} catch (e) {
return console.error(`Failed to parse the rule in JSON.parse: ${t}, error: ${e}`), t;
}
return t;
}
set abilitys(t) {
typeof t == "string" ? this.setAttribute("abilitys", t || "") : this.setAttribute("abilitys", JSON.stringify(t) || "");
}
_cssVar(t) {
return typeof getComputedStyle > "u" ? "" : getComputedStyle(this).getPropertyValue(t).trim();
}
get colorPolygon() {
return this.getAttribute("colorPolygon") || this._cssVar("--ran-radar-polygon-color") || d;
}
set colorPolygon(t) {
this.setAttribute("colorPolygon", t || d);
}
get colorLine() {
return this.getAttribute("colorLine") || this._cssVar("--ran-radar-line-color") || C;
}
set colorLine(t) {
this.setAttribute("colorLine", t || C);
}
get fontColor() {
return this._cssVar("--ran-color-text") || S;
}
get fillColor() {
return this.getAttribute("fillColor") || this._cssVar("--ran-radar-fill-color") || g;
}
set fillColor(t) {
this.setAttribute("fillColor", t || g);
}
get strokeColor() {
return this.getAttribute("strokeColor") || this._cssVar("--ran-radar-stroke-color") || u;
}
set strokeColor(t) {
this.setAttribute("strokeColor", t || u);
}
get sheet() {
return A(this, "sheet");
}
set sheet(t) {
f(this, "sheet", t);
}
handlerExternalCss = () => {
R(this, this._shadowDom, "sheet", null, this.sheet);
};
refreshData() {
const t = this.abilityRadarChart.getContext("2d");
if (!this.abilityRadarChartContainer || !t) return;
const e = m(t), r = this.abilityRadarChartContainer.clientWidth * e, i = this.abilityRadarChartContainer.clientHeight * e;
this.abilityRadarChart.width = r, this.abilityRadarChart.height = i, this.mW = r, this.mData = this.abilitys, this.mCount = this.mData?.length || 1, this.mCenter = this.mW / 2, this.mRadius = this.mCenter - 50 * e, this.mAngle = Math.PI * 2 / this.mCount, this.drawPolygon(t), this.drawSide(t), this.drawLines(t), this.drawText(t), this.drawRegion(t), this.drawCircle(t);
}
drawSide(t) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
t.save(), t.strokeStyle = this.colorLine;
const e = this.mRadius;
for (let r = 0; r < this.mCount; r++) {
const i = this.mCenter + e * Math.sin(this.mAngle * r), a = this.mCenter + e * Math.cos(this.mAngle * r);
t.lineTo(i, a);
}
t.closePath(), t.stroke();
}
drawPolygon(t) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
t.save(), t.strokeStyle = this.colorPolygon;
const e = this.mRadius / 4;
t.setLineDash([6, 6]);
for (let r = 0; r < 4; r++) {
t.beginPath();
const i = e * (r + 1);
for (let a = 0; a < this.mCount; a++) {
const o = this.mCenter + i * Math.sin(this.mAngle * a), s = this.mCenter + i * Math.cos(this.mAngle * a);
t.lineTo(o, s);
}
t.closePath(), t.stroke();
}
t.restore();
}
drawLines(t) {
if (!(!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle)) {
t.save(), t.beginPath(), t.strokeStyle = this.colorLine;
for (let e = 0; e < this.mCount; e++) {
const r = this.mCenter + this.mRadius * Math.sin(this.mAngle * e), i = this.mCenter + this.mRadius * Math.cos(this.mAngle * e);
t.moveTo(this.mCenter, this.mCenter), t.lineTo(r, i);
}
t.stroke(), t.restore();
}
}
drawText(t) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
t.save();
const e = m(t), r = this.mCenter / 12;
for (let i = 0; i < this.mCount; i++) {
const a = this.mCenter + this.mRadius * Math.sin(this.mAngle * i), o = this.mCenter + this.mRadius * Math.cos(this.mAngle * i), s = this.mData[i]?.backgroundColor || M, l = this.mData[i]?.fontColor || this.fontColor, n = this.mData[i]?.fontFamily || O, h = this.mData[i]?.fontSize || r;
t.font = `${h}px ${n}`, this.mAngle * i >= 0 && this.mAngle * i < Math.PI / 2 ? this.drawButton(t, s, a, o, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.mAngle * i >= Math.PI / 2 && this.mAngle * i < Math.PI ? this.drawButton(t, s, a, o - 24 * e, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.mAngle * i >= Math.PI && this.mAngle * i < Math.PI * 3 / 2 ? this.drawButton(t, s, a - 44 * e, o - 24 * e, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.drawButton(t, s, a - 44 * e, o, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h);
}
t.restore();
}
drawButton(t, e, r, i, a, o, s, l, n, h, c) {
t.beginPath();
const b = m(t);
t.fillStyle = e, t.moveTo(r + s, i), t.lineTo(r + a - s, i), t.arc(r + a - s, i + s, s, Math.PI * 3 / 2, Math.PI * 2), t.lineTo(r + a, i + o - s), t.arc(r + a - s, i + o - s, s, Math.PI, Math.PI / 2), t.lineTo(r + s, i + o), t.arc(r + s, i + o - s, s, Math.PI / 2, Math.PI), t.lineTo(r, i + s), t.arc(r + s, i + s, s, Math.PI, Math.PI * 3 / 2), t.fill(), t.closePath(), t.beginPath(), t.fillStyle = n, t.font = `${c || 12 * b}px ${h}`, t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, r + a / 2, i + o / 2);
}
drawRegion(t) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
const e = m(t);
t.save(), t.beginPath();
for (let r = 0; r < this.mCount; r++) {
const i = this.mCenter + this.mRadius * Math.sin(this.mAngle * r) * this.mData[r].scoreRate / 100, a = this.mCenter + this.mRadius * Math.cos(this.mAngle * r) * this.mData[r].scoreRate / 100;
t.lineTo(i, a);
}
t.closePath(), t.fillStyle = this.fillColor, t.fill(), t.strokeStyle = this.strokeColor, t.lineWidth = 1 * e, t.stroke(), t.restore();
}
drawCircle(t) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
const e = m(t);
t.save();
for (let r = 0; r < this.mCount; r++) {
const i = this.mCenter + this.mRadius * Math.sin(this.mAngle * r) * this.mData[r].scoreRate / 100, a = this.mCenter + this.mRadius * Math.cos(this.mAngle * r) * this.mData[r].scoreRate / 100;
t.beginPath(), t.arc(i, a, 3, 0, Math.PI * 2), t.lineWidth = 1.5 * e, t.strokeStyle = this.strokeColor, t.stroke();
}
t.restore();
}
connectedCallback() {
this.handlerExternalCss(), this.refreshData();
}
disconnectedCallback() {
this.resizeObserver.disconnect();
}
attributeChangedCallback(t, e, r) {
e !== r && ([
"abilitys",
"colorpolygon",
"colorline",
"fillcolor",
"strokecolor"
].includes(t) && this.abilityRadarChartContainer && this.refreshData(), t === "sheet" && this.handlerExternalCss());
}
};
w("r-radar", L);
export {
L as t
};