@zhsz/cool-design-dv/lib/packages/dv-adorn12/Adorn12.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$1 = require("../dv-box/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const useAdorn = require("../../hooks/useAdorn.js");
const color = require("../../utils/color.js");
const useConfig = require("../../hooks/useConfig.js");
const util = require("../../utils/util.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["id"];
const _hoisted_3 = ["stroke", "stroke-width", "d"];
const _hoisted_4 = ["id"];
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("stop", {
  offset: "0%",
  "stop-color": "transparent",
  "stop-opacity": "1"
}, null, -1);
const _hoisted_6 = ["stop-color"];
const _hoisted_7 = ["r", "cx", "cy", "stroke"];
const _hoisted_8 = ["cx", "cy", "fill"];
const _hoisted_9 = ["values", "dur"];
const _hoisted_10 = ["dur"];
const _hoisted_11 = ["cx", "cy", "fill"];
const _hoisted_12 = { key: 0 };
const _hoisted_13 = ["points", "stroke"];
const _hoisted_14 = ["d", "stroke"];
const _hoisted_15 = ["xlink:href"];
const _hoisted_16 = ["values", "dur"];
const __default__ = vue.defineComponent({
  name: "DvAdorn12"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    haloDuration: {
      type: Number,
      default: 2
    },
    split: {
      type: Boolean,
      default: true
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    const segment = vue.ref(30);
    const sectorAngle = vue.ref(Math.PI / 3);
    const ringNum = vue.ref(3);
    const ringWidth = vue.ref(1);
    const _uid = util.uid();
    const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = vue.useAttrs();
    const page = vue.inject(index.dvPageSymbols, null);
    const { resize, classes, styles, width, height, dark } = useAdorn.useAdorn(
      emits,
      ((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? useConfig.baseConfig.color,
      props,
      page
    );
    const x = vue.computed(() => {
      return width.value / 2;
    });
    const y = vue.computed(() => {
      return height.value / 2;
    });
    const path = vue.computed(() => {
      const startAngle = -Math.PI / 2;
      const angleGap = sectorAngle.value / segment.value;
      const r = width.value / 4;
      let lastEndPoints = util.getCircleRadianPoint(x.value, y.value, r, startAngle);
      return new Array(segment.value).fill("").map((_, i) => {
        const endPoints = util.getCircleRadianPoint(
          x.value,
          y.value,
          r,
          startAngle - (i + 1) * angleGap
        ).map((_2) => _2.toFixed(5));
        const d = `M${lastEndPoints.join(",")} A${r}, ${r} 0 0 0 ${endPoints.join(
          ","
        )}`;
        lastEndPoints = endPoints;
        return d;
      });
    });
    const pathColor = vue.computed(() => {
      const colorGap = 100 / (segment.value - 1);
      return new Array(segment.value).fill(dark.value).map((_, i) => fade(dark.value, (100 - i * colorGap) * 0.4));
    });
    const circle = vue.computed(() => {
      const radiusGap = (width.value / 2 - ringWidth.value / 2) / ringNum.value;
      return new Array(ringNum.value).fill(0).map((_, i) => radiusGap * (i + 1)).filter((n) => n >= 0);
    });
    const splitLinePoints = vue.computed(() => {
      const angleGap = Math.PI / 6;
      const r = width.value / 2;
      return new Array(6).fill("").map((_, i) => {
        const startAngle = angleGap * (i + 1);
        const endAngle = startAngle + Math.PI;
        const startPoint = util.getCircleRadianPoint(x.value, y.value, r, startAngle);
        const endPoint = util.getCircleRadianPoint(x.value, y.value, r, endAngle);
        return `${startPoint.join(",")} ${endPoint.join(",")}`;
      });
    });
    const arc = vue.computed(() => {
      const angleGap = Math.PI / 6;
      const r = width.value / 2 - 1;
      return new Array(4).fill("").map((_, i) => {
        const startAngle = angleGap * (3 * i + 1);
        const endAngle = startAngle + angleGap;
        const startPoint = util.getCircleRadianPoint(x.value, y.value, r, startAngle);
        const endPoint = util.getCircleRadianPoint(x.value, y.value, r, endAngle);
        return `M${startPoint.join(",")} A${x.value}, ${y.value} 0 0 1 ${endPoint.join(",")}`;
      });
    });
    function fade(color$1, percent = 100) {
      const r = color.fade(color$1, percent);
      if (r === false) {
        return void 0;
      } else {
        return r;
      }
    }
    vue.onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    vue.onBeforeUnmount(() => {
      resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
        class: ["my-dv-adorn-12", vue.unref(classes)],
        style: vue.unref(styles),
        "default-width": "300px",
        "default-height": "300px"
      }, vue.unref($attrs)), {
        default: vue.withCtx(() => [
          (vue.openBlock(), vue.createElementBlock("svg", {
            width: `${vue.unref(width)}px`,
            height: `${vue.unref(height)}px`
          }, [
            vue.createElementVNode("defs", null, [
              vue.createElementVNode("g", {
                id: `g${vue.unref(_uid)}`
              }, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (d, i) => {
                  return vue.openBlock(), vue.createElementBlock("path", {
                    stroke: pathColor.value[i],
                    "stroke-width": vue.unref(width) / 2,
                    fill: "transparent",
                    key: i,
                    d
                  }, null, 8, _hoisted_3);
                }), 128))
              ], 8, _hoisted_2),
              vue.createElementVNode("radialGradient", {
                id: `gradient${vue.unref(_uid)}`,
                cx: "50%",
                cy: "50%",
                r: "50%"
              }, [
                _hoisted_5,
                vue.createElementVNode("stop", {
                  offset: "100%",
                  "stop-color": fade(vue.unref(dark), 30),
                  "stop-opacity": "1"
                }, null, 8, _hoisted_6)
              ], 8, _hoisted_4)
            ]),
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(circle.value, (r, i) => {
              return vue.openBlock(), vue.createElementBlock("circle", {
                key: i,
                r,
                cx: x.value,
                cy: y.value,
                stroke: vue.unref(dark),
                "stroke-width": 0.5,
                fill: "transparent"
              }, null, 8, _hoisted_7);
            }), 128)),
            vue.createElementVNode("circle", {
              r: "1",
              cx: x.value,
              cy: y.value,
              stroke: "transparent",
              fill: `url(#gradient${vue.unref(_uid)})`
            }, [
              vue.createElementVNode("animate", {
                attributeName: "r",
                values: `1;${vue.unref(width) / 2}`,
                dur: `${__props.haloDuration}s`,
                repeatCount: "indefinite"
              }, null, 8, _hoisted_9),
              vue.createElementVNode("animate", {
                attributeName: "opacity",
                values: "1;0",
                dur: `${__props.haloDuration}s`,
                repeatCount: "indefinite"
              }, null, 8, _hoisted_10)
            ], 8, _hoisted_8),
            vue.createElementVNode("circle", {
              r: "2",
              cx: x.value,
              cy: y.value,
              fill: vue.unref(dark)
            }, null, 8, _hoisted_11),
            __props.split ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_12, [
              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(splitLinePoints.value, (p, i) => {
                return vue.openBlock(), vue.createElementBlock("polyline", {
                  key: i,
                  points: p,
                  stroke: vue.unref(dark),
                  "stroke-width": 0.5,
                  opacity: "0.5"
                }, null, 8, _hoisted_13);
              }), 128))
            ])) : vue.createCommentVNode("", true),
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(arc.value, (d, i) => {
              return vue.openBlock(), vue.createElementBlock("path", {
                key: `p${i}`,
                d,
                stroke: vue.unref(dark),
                "stroke-width": "2",
                fill: "transparent"
              }, null, 8, _hoisted_14);
            }), 128)),
            vue.createElementVNode("use", {
              "xlink:href": `#g${vue.unref(_uid)}`
            }, [
              vue.createElementVNode("animateTransform", {
                attributeName: "transform",
                type: "rotate",
                values: `0, ${x.value} ${y.value};360, ${x.value} ${y.value}`,
                dur: `${__props.duration}s`,
                repeatCount: "indefinite"
              }, null, 8, _hoisted_16)
            ], 8, _hoisted_15)
          ], 8, _hoisted_1))
        ]),
        _: 1
      }, 16, ["class", "style"]);
    };
  }
});
exports.default = _sfc_main;