ranui/dist/radar-CQNavW9f.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as f, _ as y, i as R } from "./factory-WDxu11V0.js";
import { a as A, i as v, n as w, o as D, t as p } from "./utils-U-9uH7EX.js";
import { a as k, n as O } from "./ssr-BzykYefm.js";
import { getPixelRatio as m, roundRectByArc as P } from "ranuts/utils";
var S = ":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%}", L = "rgba(0,0,0,0)", M = "rgba(0,0,0,1)", d = "#e6e6e6", C = "#e6e6e6", _ = "黑体", u = "rgba(255,121,35,0.60)", g = "rgba(255,121,35,0.60)", N = class extends O {
  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 = p(this, S);
    const t = f(), e = R().class("ran-radar").children(y("canvas").ref(t).build()).build();
    this._shadowDom.appendChild(e);
    const r = A(t, "canvas");
    this.abilityRadarChartContainer = e, this.abilityRadarChart = r, 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") || M;
  }
  get fillColor() {
    return this.getAttribute("fillColor") || this._cssVar("--ran-radar-fill-color") || u;
  }
  set fillColor(t) {
    this.setAttribute("fillColor", t || u);
  }
  get strokeColor() {
    return this.getAttribute("strokeColor") || this._cssVar("--ran-radar-stroke-color") || g;
  }
  set strokeColor(t) {
    this.setAttribute("strokeColor", t || g);
  }
  get sheet() {
    return w(this, "sheet");
  }
  set sheet(t) {
    v(this, "sheet", t);
  }
  handlerExternalCss = () => {
    D(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), s = this.mCenter + e * Math.cos(this.mAngle * r);
      t.lineTo(i, s);
    }
    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 s = 0; s < this.mCount; s++) {
        const a = this.mCenter + i * Math.sin(this.mAngle * s), o = this.mCenter + i * Math.cos(this.mAngle * s);
        t.lineTo(a, o);
      }
      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 s = this.mCenter + this.mRadius * Math.sin(this.mAngle * i), a = this.mCenter + this.mRadius * Math.cos(this.mAngle * i), o = this.mData[i]?.backgroundColor || L, l = this.mData[i]?.fontColor || this.fontColor, n = this.mData[i]?.fontFamily || _, h = this.mData[i]?.fontSize || r;
      t.font = `${h}px ${n}`, this.mAngle * i >= 0 && this.mAngle * i < Math.PI / 2 ? this.drawButton(t, o, s, a, 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, o, s, a - 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, o, s - 44 * e, a - 24 * e, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h) : this.drawButton(t, o, s - 44 * e, a, 44 * e, 24 * e, 12 * e, this.mData[i].abilityName, l, n, h);
    }
    t.restore();
  }
  drawButton(t, e, r, i, s, a, o, l, n, h, c) {
    const b = m(t);
    t.fillStyle = e, P(t, r, i, s, a, o), t.fill(), t.beginPath(), t.fillStyle = n, t.font = `${c || 12 * b}px ${h}`, t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, r + s / 2, i + a / 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, s = this.mCenter + this.mRadius * Math.cos(this.mAngle * r) * this.mData[r].scoreRate / 100;
      t.lineTo(i, s);
    }
    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, s = this.mCenter + this.mRadius * Math.cos(this.mAngle * r) * this.mData[r].scoreRate / 100;
      t.beginPath(), t.arc(i, s, 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());
  }
};
k("r-radar", N);
export {
  N as t
};