@zhsz/cool-design-dv/lib/packages/dv-starry/Starry.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const starry = require("../../utils/starry.js");
const index$1 = require("../dv-box/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const _hoisted_1 = ["width", "height"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "Starry",
  props: {
    amount: {
      type: Number,
      default: 300
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a;
    const $attrs = vue.useAttrs();
    const props = __props;
    const starry$1 = vue.ref();
    const canvas = vue.ref();
    const $emit = __emit;
    const width = vue.ref(0);
    const height = vue.ref(0);
    const page = vue.inject(index.dvPageSymbols, null);
    const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
    function resize($el) {
      var _a2, _b;
      const rect = $el == null ? void 0 : $el.getBoundingClientRect();
      if (!rect) {
        return;
      }
      width.value = rect.width / (((_a2 = page == null ? void 0 : page.widthScale) == null ? void 0 : _a2.value) ?? 1);
      height.value = rect.height / (((_b = page == null ? void 0 : page.heightScale) == null ? void 0 : _b.value) ?? 1);
      $emit("resize", [width.value, height.value]);
    }
    vue.onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      starry$1.value = new starry.default(canvas.value, { amount: props.amount });
      starry$1.value.run();
      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));
      starry$1.value && starry$1.value.destroy();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
        class: "my-dv-starry",
        "default-width": "100%",
        "default-height": "100%"
      }, vue.unref($attrs)), {
        default: vue.withCtx(() => [
          vue.createElementVNode("canvas", {
            ref_key: "canvas",
            ref: canvas,
            width: width.value,
            height: height.value
          }, null, 8, _hoisted_1)
        ]),
        _: 1
      }, 16);
    };
  }
});
exports.default = _sfc_main;