ranui 0.1.6 → 0.1.7

package/dist/index-a1a53af6.js

@@ -0,0 +1,354 @@
+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 "./index-d2d69b06.js";
+import { c as createCustomError } from "./index-57492b9b.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".ran-radar{position:relative;width:100%;height:100%;display:block}\n";
+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
+};