@zhsz/cool-design-dv/es/packages/dv-adorn12/Adorn12.vue.mjs

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