@zhsz/cool-design-dv
Version:
69 lines (68 loc) • 2.49 kB
JavaScript
import { defineComponent, useAttrs, ref, inject, getCurrentInstance, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode } from "vue";
import Starry from "../../utils/starry.mjs";
import Box from "../dv-box/index.mjs";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
const _hoisted_1 = ["width", "height"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Starry",
props: {
amount: {
type: Number,
default: 300
}
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a;
const $attrs = useAttrs();
const props = __props;
const starry = ref();
const canvas = ref();
const $emit = __emit;
const width = ref(0);
const height = ref(0);
const page = inject(dvPageSymbols, null);
const instance = (_a = 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]);
}
onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
starry.value = new Starry(canvas.value, { amount: props.amount });
starry.value.run();
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));
starry.value && starry.value.destroy();
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Box), mergeProps({
class: "my-dv-starry",
"default-width": "100%",
"default-height": "100%"
}, unref($attrs)), {
default: withCtx(() => [
createElementVNode("canvas", {
ref_key: "canvas",
ref: canvas,
width: width.value,
height: height.value
}, null, 8, _hoisted_1)
]),
_: 1
}, 16);
};
}
});
export {
_sfc_main as default
};