ranui
Version:
UI Component library based on `Web Component`
320 lines (319 loc) • 12.7 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { g as getPixelRatio } from "./plus-BQnIzzvi.js";
import { c as createCustomError } from "./index-9tJmVuyv.js";
const f7170ee498e0dd32cbdcb63fba8f75cc = ".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}.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)}";
const BACKGROUND_COLOR = "rgba(0,0,0,0)";
const FONT_COLOR = "rgba(0,0,0,1)";
const POLYGON_COLOR = "#e6e6e6";
const LINE_COLOR = "#e6e6e6";
const FONT_FAMILY = "黑体";
const FILL_COLOR = "rgba(255,121,35,0.60)";
const STROKE_COLOR = "rgba(255,121,35,0.60)";
function Custom() {
if (typeof document !== "undefined" && !customElements.get("r-radar")) {
class RadarChart extends HTMLElement {
constructor() {
super();
__publicField(this, "mData");
__publicField(this, "mCount");
__publicField(this, "mW");
__publicField(this, "mCenter");
__publicField(this, "mRadius");
__publicField(this, "mAngle");
__publicField(this, "abilityRadarChartContainer");
__publicField(this, "abilityRadarChart");
__publicField(this, "_iconElement");
__publicField(this, "_shadowDom");
this.abilityRadarChartContainer = document.createElement("div");
this.abilityRadarChartContainer.setAttribute("class", "ran-radar");
this.abilityRadarChart = document.createElement("canvas");
this.abilityRadarChart.style.setProperty("width", "100%");
this.abilityRadarChart.style.setProperty("height", "100%");
this.abilityRadarChartContainer.appendChild(this.abilityRadarChart);
const shadowRoot = this.attachShadow({ mode: "closed" });
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
this._shadowDom = shadowRoot;
shadowRoot.appendChild(this.abilityRadarChartContainer);
}
static get observedAttributes() {
return ["abilitys", "colorPolygon", "colorLine", "fillColor", "strokeColor"];
}
get abilitys() {
const item = this.getAttribute("abilitys");
if (typeof item === "string") {
try {
const result = JSON.parse(item);
return result;
} catch (error) {
console.error(`Failed to parse the rule in JSON.parse: ${item}, error: ${error}`);
return item;
}
}
return item;
}
set abilitys(value) {
if (typeof value === "string") {
this.setAttribute("abilitys", value || "");
} else {
this.setAttribute("abilitys", JSON.stringify(value) || "");
}
}
// 多边形颜色
get colorPolygon() {
return this.getAttribute("colorPolygon") || POLYGON_COLOR;
}
set colorPolygon(value) {
this.setAttribute("colorPolygon", value || POLYGON_COLOR);
}
// 顶点连线颜色
get colorLine() {
return this.getAttribute("colorLine") || LINE_COLOR;
}
set colorLine(value) {
this.setAttribute("colorLine", value || LINE_COLOR);
}
// 数据渲染处的颜色
get fillColor() {
return this.getAttribute("fillColor") || FILL_COLOR;
}
set fillColor(value) {
this.setAttribute("fillColor", value || FILL_COLOR);
}
// 数据渲染处线和点的颜色
get strokeColor() {
return this.getAttribute("strokeColor") || STROKE_COLOR;
}
set strokeColor(value) {
this.setAttribute("strokeColor", value || STROKE_COLOR);
}
refreshData() {
var _a;
const ctx = this.abilityRadarChart.getContext("2d");
if (!this.abilityRadarChartContainer || !ctx) return;
const radio = getPixelRatio(ctx);
const width = this.abilityRadarChartContainer.clientWidth * radio;
const height = this.abilityRadarChartContainer.clientHeight * radio;
this.abilityRadarChart.width = width;
this.abilityRadarChart.height = height;
this.mW = width;
this.mData = this.abilitys;
this.mCount = ((_a = this.mData) == null ? void 0 : _a.length) || 1;
this.mCenter = this.mW / 2;
this.mRadius = this.mCenter - 50 * radio;
this.mAngle = Math.PI * 2 / this.mCount;
this.drawPolygon(ctx);
this.drawSide(ctx);
this.drawLines(ctx);
this.drawText(ctx);
this.drawRegion(ctx);
this.drawCircle(ctx);
}
drawSide(ctx) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
ctx.save();
ctx.strokeStyle = this.colorLine;
const r = this.mRadius;
for (let j = 0; j < this.mCount; j++) {
const x = this.mCenter + r * Math.sin(this.mAngle * j);
const y = this.mCenter + r * Math.cos(this.mAngle * j);
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
}
// 绘制多边形边
drawPolygon(ctx) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
ctx.save();
ctx.strokeStyle = this.colorPolygon;
const r = this.mRadius / 4;
ctx.setLineDash([6, 6]);
for (let i = 0; i < 4; i++) {
ctx.beginPath();
const currR = r * (i + 1);
for (let j = 0; j < this.mCount; j++) {
const x = this.mCenter + currR * Math.sin(this.mAngle * j);
const y = this.mCenter + currR * Math.cos(this.mAngle * j);
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
}
ctx.restore();
}
// 顶点连线
drawLines(ctx) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle) return;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = this.colorLine;
for (let i = 0; i < this.mCount; i++) {
const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i);
const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i);
ctx.moveTo(this.mCenter, this.mCenter);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
}
// 绘制文本
drawText(ctx) {
var _a, _b, _c, _d;
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
ctx.save();
const radio = getPixelRatio(ctx);
const defaultFontSize = this.mCenter / 12;
for (let i = 0; i < this.mCount; i++) {
const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i);
const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i);
const backgroundColor = ((_a = this.mData[i]) == null ? void 0 : _a.backgroundColor) || BACKGROUND_COLOR;
const fontColor = ((_b = this.mData[i]) == null ? void 0 : _b.fontColor) || FONT_COLOR;
const fontFamily = ((_c = this.mData[i]) == null ? void 0 : _c.fontFamily) || FONT_FAMILY;
const fontSize = ((_d = this.mData[i]) == null ? void 0 : _d.fontSize) || defaultFontSize;
ctx.font = `${fontSize}px ${fontFamily}`;
if (this.mAngle * i >= 0 && this.mAngle * i < Math.PI / 2) {
this.drawButton(
ctx,
backgroundColor,
x,
y,
44 * radio,
24 * radio,
12 * radio,
this.mData[i].abilityName,
fontColor,
fontFamily,
fontSize
);
} else if (this.mAngle * i >= Math.PI / 2 && this.mAngle * i < Math.PI) {
this.drawButton(
ctx,
backgroundColor,
x,
y - 24 * radio,
44 * radio,
24 * radio,
12 * radio,
this.mData[i].abilityName,
fontColor,
fontFamily,
fontSize
);
} else if (this.mAngle * i >= Math.PI && this.mAngle * i < Math.PI * 3 / 2) {
this.drawButton(
ctx,
backgroundColor,
x - 44 * radio,
y - 24 * radio,
44 * radio,
24 * radio,
12 * radio,
this.mData[i].abilityName,
fontColor,
fontFamily,
fontSize
);
} else {
this.drawButton(
ctx,
backgroundColor,
x - 44 * radio,
y,
44 * radio,
24 * radio,
12 * radio,
this.mData[i].abilityName,
fontColor,
fontFamily,
fontSize
);
}
}
ctx.restore();
}
drawButton(ctx, color, x, y, width, height, radius, text, fontColor, fontFamily, fontSize) {
ctx.beginPath();
const radio = getPixelRatio(ctx);
ctx.fillStyle = color;
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arc(x + width - radius, y + radius, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.lineTo(x + width, y + height - radius);
ctx.arc(x + width - radius, y + height - radius, radius, Math.PI, Math.PI / 2);
ctx.lineTo(x + radius, y + height);
ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
ctx.lineTo(x, y + radius);
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = fontColor;
ctx.font = `${fontSize || 12 * radio}px ${fontFamily}`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(text, x + width / 2, y + height / 2);
}
// 绘制数据区域
drawRegion(ctx) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
const radio = getPixelRatio(ctx);
ctx.save();
ctx.beginPath();
for (let i = 0; i < this.mCount; i++) {
const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i) * this.mData[i].scoreRate / 100;
const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i) * this.mData[i].scoreRate / 100;
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = this.fillColor;
ctx.fill();
ctx.strokeStyle = this.strokeColor;
ctx.lineWidth = 1 * radio;
ctx.stroke();
ctx.restore();
}
// 画点
drawCircle(ctx) {
if (!this.mRadius || !this.mCount || !this.mCenter || !this.mAngle || !this.mData) return;
const radio = getPixelRatio(ctx);
ctx.save();
for (let i = 0; i < this.mCount; i++) {
const x = this.mCenter + this.mRadius * Math.sin(this.mAngle * i) * this.mData[i].scoreRate / 100;
const y = this.mCenter + this.mRadius * Math.cos(this.mAngle * i) * this.mData[i].scoreRate / 100;
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.lineWidth = 1.5 * radio;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
connectedCallback() {
this.refreshData();
}
attributeChangedCallback(name, oldValue, newValue) {
const attribute = ["abilitys", "colorPolygon", "colorLine", "fillColor", "strokeColor"];
if (attribute.includes(name) && this.abilityRadarChartContainer && oldValue !== newValue) {
this.refreshData();
}
}
}
customElements.define("r-radar", RadarChart);
return RadarChart;
} else {
return createCustomError("document is undefined or r-radar is exist");
}
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
index as a,
index$1 as i
};