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);
  return value;
};
import { g as getPixelRatio } from "./utils-74Icp-PI.js";
import { c as createCustomError } from "./index-CSnBqUsQ.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}html.dark .r-preview-mask .r-preview-contain{background-color:#191919!important}.ran-radar{position:relative;width:100%;height:100%;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) {
            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();
      }
      disconnectCallback() {
      }
      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
};
