pixel-flow-vue 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -179
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/dist/pixel-flow-vue.css +2 -0
- package/dist/pixel-flow-vue.es.js +23 -0
- package/dist/pixel-flow-vue.umd.js +1 -0
- package/package.json +17 -50
- package/LICENSE +0 -21
- package/dist/index.d.ts +0 -122
- package/dist/pixel-flow-vue.js +0 -129
- package/dist/pixel-flow-vue.js.map +0 -1
- package/dist/pixel-flow-vue.umd.cjs +0 -2
- package/dist/pixel-flow-vue.umd.cjs.map +0 -1
- package/dist/style.css +0 -1
package/README.md
CHANGED
|
@@ -1,181 +1,5 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Vue 3 + TypeScript + Vite
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
|
4
4
|
|
|
5
|
-
[
|
|
6
|
-
[](LICENSE)
|
|
7
|
-
[](https://vuejs.org/)
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
## ✨ Features
|
|
12
|
-
|
|
13
|
-
- 🎨 **Pixel-art style** flowing particle animation via Canvas
|
|
14
|
-
- ⚡ **Vite + Rollup** built — ESM & UMD bundles included
|
|
15
|
-
- 🔷 **Full TypeScript** types exported out of the box
|
|
16
|
-
- 🎛️ Highly configurable: colors, speed, particle count, pixel size
|
|
17
|
-
- 🪄 `start()` / `stop()` control via component `ref`
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## 📦 Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install pixel-flow-vue
|
|
25
|
-
# or
|
|
26
|
-
pnpm add pixel-flow-vue
|
|
27
|
-
# or
|
|
28
|
-
yarn add pixel-flow-vue
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## 🚀 Quick Start
|
|
34
|
-
|
|
35
|
-
### Global registration
|
|
36
|
-
|
|
37
|
-
```ts
|
|
38
|
-
// main.ts
|
|
39
|
-
import { createApp } from 'vue'
|
|
40
|
-
import App from './App.vue'
|
|
41
|
-
import PixelFlowVue from 'pixel-flow-vue'
|
|
42
|
-
import 'pixel-flow-vue/style.css'
|
|
43
|
-
|
|
44
|
-
createApp(App).use(PixelFlowVue).mount('#app')
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```vue
|
|
48
|
-
<!-- anywhere in your app -->
|
|
49
|
-
<template>
|
|
50
|
-
<PixelFlow :width="800" :height="450" />
|
|
51
|
-
</template>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### On-demand import
|
|
55
|
-
|
|
56
|
-
```vue
|
|
57
|
-
<template>
|
|
58
|
-
<PixelFlow
|
|
59
|
-
ref="flowRef"
|
|
60
|
-
:width="800"
|
|
61
|
-
:height="450"
|
|
62
|
-
:colors="['#00f5ff', '#7b2fff']"
|
|
63
|
-
:particle-count="200"
|
|
64
|
-
:speed="1.5"
|
|
65
|
-
:pixel-size="5"
|
|
66
|
-
@ready="onReady"
|
|
67
|
-
/>
|
|
68
|
-
<button @click="flowRef?.stop()">Stop</button>
|
|
69
|
-
<button @click="flowRef?.start()">Start</button>
|
|
70
|
-
</template>
|
|
71
|
-
|
|
72
|
-
<script setup lang="ts">
|
|
73
|
-
import { ref } from 'vue'
|
|
74
|
-
import { PixelFlow } from 'pixel-flow-vue'
|
|
75
|
-
import type { PixelFlowInstance } from 'pixel-flow-vue'
|
|
76
|
-
|
|
77
|
-
const flowRef = ref<PixelFlowInstance | null>(null)
|
|
78
|
-
|
|
79
|
-
function onReady() {
|
|
80
|
-
console.log('Pixel flow is ready!')
|
|
81
|
-
}
|
|
82
|
-
</script>
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### Use the core engine directly (headless)
|
|
86
|
-
|
|
87
|
-
```ts
|
|
88
|
-
import { createPixelFlow } from 'pixel-flow-vue'
|
|
89
|
-
|
|
90
|
-
const canvas = document.querySelector<HTMLCanvasElement>('#myCanvas')!
|
|
91
|
-
const stop = createPixelFlow({
|
|
92
|
-
canvas,
|
|
93
|
-
colors: ['#ff2fa0', '#ffdd00'],
|
|
94
|
-
particleCount: 80,
|
|
95
|
-
speed: 2,
|
|
96
|
-
pixelSize: 6,
|
|
97
|
-
})
|
|
98
|
-
|
|
99
|
-
// Later: stop the animation
|
|
100
|
-
stop()
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
---
|
|
104
|
-
|
|
105
|
-
## 🎛️ Props
|
|
106
|
-
|
|
107
|
-
| Prop | Type | Default | Description |
|
|
108
|
-
| --------------- | ---------- | --------------------------------------------------- | ------------------------------ |
|
|
109
|
-
| `width` | `number` | `600` | Canvas width (px) |
|
|
110
|
-
| `height` | `number` | `400` | Canvas height (px) |
|
|
111
|
-
| `colors` | `string[]` | `['#00f5ff','#7b2fff','#ff2fa0','#ffdd00']` | Particle color palette |
|
|
112
|
-
| `particleCount` | `number` | `120` | Number of particles |
|
|
113
|
-
| `speed` | `number` | `1` | Speed multiplier (0.1 ~ 5) |
|
|
114
|
-
| `pixelSize` | `number` | `4` | Base pixel block size (px) |
|
|
115
|
-
| `background` | `string` | `'#0d0d0d'` | Canvas background color |
|
|
116
|
-
| `autoPlay` | `boolean` | `true` | Start animation on mount |
|
|
117
|
-
|
|
118
|
-
---
|
|
119
|
-
|
|
120
|
-
## 📡 Events
|
|
121
|
-
|
|
122
|
-
| Event | Payload | Description |
|
|
123
|
-
| ------- | -------------- | ------------------------------------ |
|
|
124
|
-
| `ready` | — | Fired when the animation loop starts |
|
|
125
|
-
| `tick` | `frame: number`| Fired on every animation frame |
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## 🔌 Exposed Methods (via `ref`)
|
|
130
|
-
|
|
131
|
-
| Method | Description |
|
|
132
|
-
| --------- | ------------------------ |
|
|
133
|
-
| `start()` | Start / restart the loop |
|
|
134
|
-
| `stop()` | Stop the animation loop |
|
|
135
|
-
|
|
136
|
-
---
|
|
137
|
-
|
|
138
|
-
## 📁 Package Exports
|
|
139
|
-
|
|
140
|
-
| Import path | Description |
|
|
141
|
-
| ------------------------- | --------------------- |
|
|
142
|
-
| `pixel-flow-vue` | Plugin + component |
|
|
143
|
-
| `pixel-flow-vue/style.css`| Component styles |
|
|
144
|
-
|
|
145
|
-
---
|
|
146
|
-
|
|
147
|
-
## 🔧 Development
|
|
148
|
-
|
|
149
|
-
```bash
|
|
150
|
-
# Clone and install
|
|
151
|
-
git clone https://github.com/your-username/pixel-flow-vue.git
|
|
152
|
-
cd pixel-flow-vue
|
|
153
|
-
pnpm install
|
|
154
|
-
|
|
155
|
-
# Start dev server (playground)
|
|
156
|
-
pnpm dev
|
|
157
|
-
|
|
158
|
-
# Build for production
|
|
159
|
-
pnpm build
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
---
|
|
163
|
-
|
|
164
|
-
## 📤 Publishing to npm
|
|
165
|
-
|
|
166
|
-
```bash
|
|
167
|
-
# 1. Log in to npm
|
|
168
|
-
npm login
|
|
169
|
-
|
|
170
|
-
# 2. Build
|
|
171
|
-
pnpm build
|
|
172
|
-
|
|
173
|
-
# 3. Publish
|
|
174
|
-
npm publish --access public
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
---
|
|
178
|
-
|
|
179
|
-
## 📄 License
|
|
180
|
-
|
|
181
|
-
[MIT](LICENSE) © your-username
|
|
5
|
+
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
package/dist/favicon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
|
package/dist/icons.svg
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
|
3
|
+
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
|
4
|
+
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
|
5
|
+
</symbol>
|
|
6
|
+
<symbol id="discord-icon" viewBox="0 0 20 19">
|
|
7
|
+
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
|
8
|
+
</symbol>
|
|
9
|
+
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
|
10
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
|
11
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
|
12
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
|
13
|
+
</symbol>
|
|
14
|
+
<symbol id="github-icon" viewBox="0 0 19 19">
|
|
15
|
+
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="social-icon" viewBox="0 0 20 20">
|
|
18
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
|
19
|
+
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
|
20
|
+
</symbol>
|
|
21
|
+
<symbol id="x-icon" viewBox="0 0 19 19">
|
|
22
|
+
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
|
23
|
+
</symbol>
|
|
24
|
+
</svg>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { createElementBlock as e, openBlock as t } from "vue";
|
|
2
|
+
//#region \0plugin-vue:export-helper
|
|
3
|
+
var n = (e, t) => {
|
|
4
|
+
let n = e.__vccOpts || e;
|
|
5
|
+
for (let [e, r] of t) n[e] = r;
|
|
6
|
+
return n;
|
|
7
|
+
}, r = {}, i = { class: "tButton" };
|
|
8
|
+
function a(n, r) {
|
|
9
|
+
return t(), e("button", i, "测试 发布 按钮组件1");
|
|
10
|
+
}
|
|
11
|
+
var o = /*#__PURE__*/ n(r, [["render", a], ["__scopeId", "data-v-0957b8d5"]]);
|
|
12
|
+
o.name = "hx-button", o.install = function(e) {
|
|
13
|
+
e.component("hx-button", o);
|
|
14
|
+
};
|
|
15
|
+
var s = o, c = [s], l = function(e) {
|
|
16
|
+
l.installed || (l.installed = !0, c.map((t) => {
|
|
17
|
+
e.component(t.name, t);
|
|
18
|
+
}));
|
|
19
|
+
};
|
|
20
|
+
typeof window < "u" && window.Vue && l(window.Vue);
|
|
21
|
+
var u = { install: l };
|
|
22
|
+
//#endregion
|
|
23
|
+
export { u as default, s as hxButton };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`pixel-flow-vue`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r={},i={class:`tButton`};function a(e,n){return(0,t.openBlock)(),(0,t.createElementBlock)(`button`,i,`测试 发布 按钮组件1`)}var o=n(r,[[`render`,a],[`__scopeId`,`data-v-0957b8d5`]]);o.name=`hx-button`,o.install=function(e){e.component(`hx-button`,o)};var s=o,c=[s],l=function(e){l.installed||(l.installed=!0,c.map(t=>{e.component(t.name,t)}))};typeof window<`u`&&window.Vue&&l(window.Vue),e.default={install:l},e.hxButton=s});
|
package/package.json
CHANGED
|
@@ -1,62 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixel-flow-vue",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A lightweight Vue 3 pixel-flow animation plugin with TypeScript support",
|
|
3
|
+
"version": "1.0.12",
|
|
5
4
|
"type": "module",
|
|
6
|
-
"main": "
|
|
7
|
-
"module": "
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"import": "./dist/pixel-flow-vue.js",
|
|
12
|
-
"require": "./dist/pixel-flow-vue.umd.cjs",
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
14
|
-
},
|
|
15
|
-
"./style.css": "./dist/style.css"
|
|
16
|
-
},
|
|
5
|
+
"main": "dist/pixel-flow-vue.umd.js",
|
|
6
|
+
"module": "dist/pixel-flow-vue.es.js",
|
|
17
7
|
"files": [
|
|
18
|
-
"dist",
|
|
19
|
-
"
|
|
20
|
-
"LICENSE"
|
|
8
|
+
"dist/*",
|
|
9
|
+
"pixel-flow-vue.d.ts"
|
|
21
10
|
],
|
|
22
11
|
"scripts": {
|
|
23
12
|
"dev": "vite",
|
|
24
|
-
"build": "vue-tsc
|
|
25
|
-
"
|
|
26
|
-
"preview": "vite preview",
|
|
27
|
-
"lint": "eslint src --ext .ts,.vue --fix"
|
|
28
|
-
},
|
|
29
|
-
"keywords": [
|
|
30
|
-
"vue",
|
|
31
|
-
"vue3",
|
|
32
|
-
"plugin",
|
|
33
|
-
"pixel",
|
|
34
|
-
"flow",
|
|
35
|
-
"animation",
|
|
36
|
-
"canvas",
|
|
37
|
-
"typescript",
|
|
38
|
-
"component"
|
|
39
|
-
],
|
|
40
|
-
"author": "",
|
|
41
|
-
"license": "MIT",
|
|
42
|
-
"repository": {
|
|
43
|
-
"type": "git",
|
|
44
|
-
"url": "https://github.com/your-username/pixel-flow-vue.git"
|
|
45
|
-
},
|
|
46
|
-
"homepage": "https://github.com/your-username/pixel-flow-vue#readme",
|
|
47
|
-
"bugs": {
|
|
48
|
-
"url": "https://github.com/your-username/pixel-flow-vue/issues"
|
|
13
|
+
"build": "vue-tsc -b && vite build",
|
|
14
|
+
"preview": "vite preview"
|
|
49
15
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"sass": "^1.101.0",
|
|
18
|
+
"vue": "^3.5.34"
|
|
52
19
|
},
|
|
53
20
|
"devDependencies": {
|
|
54
|
-
"@types/node": "^
|
|
55
|
-
"@vitejs/plugin-vue": "^
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"vue-tsc": "^2.
|
|
21
|
+
"@types/node": "^24.12.3",
|
|
22
|
+
"@vitejs/plugin-vue": "^6.0.6",
|
|
23
|
+
"@vitejs/plugin-vue-jsx": "^5.1.5",
|
|
24
|
+
"@vue/tsconfig": "^0.9.1",
|
|
25
|
+
"typescript": "~6.0.2",
|
|
26
|
+
"vite": "^8.0.12",
|
|
27
|
+
"vue-tsc": "^3.2.8"
|
|
61
28
|
}
|
|
62
29
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 pixel-flow-vue contributors
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/dist/index.d.ts
DELETED
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import { App } from 'vue';
|
|
2
|
-
import { ComponentOptionsMixin } from 'vue';
|
|
3
|
-
import { ComponentProvideOptions } from 'vue';
|
|
4
|
-
import { DefineComponent } from 'vue';
|
|
5
|
-
import { ExtractPropTypes } from 'vue';
|
|
6
|
-
import { PropType } from 'vue';
|
|
7
|
-
import { PublicProps } from 'vue';
|
|
8
|
-
|
|
9
|
-
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
10
|
-
|
|
11
|
-
declare type __VLS_Prettify<T> = {
|
|
12
|
-
[K in keyof T]: T[K];
|
|
13
|
-
} & {};
|
|
14
|
-
|
|
15
|
-
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
16
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
17
|
-
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
18
|
-
} : {
|
|
19
|
-
type: PropType<T[K]>;
|
|
20
|
-
required: true;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
declare type __VLS_WithDefaults<P, D> = {
|
|
25
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
26
|
-
default: D[K];
|
|
27
|
-
}> : P[K];
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export declare function createPixelFlow(options: PixelFlowOptions): () => void;
|
|
31
|
-
|
|
32
|
-
export declare const PixelFlow: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
33
|
-
width: number;
|
|
34
|
-
height: number;
|
|
35
|
-
colors: () => string[];
|
|
36
|
-
particleCount: number;
|
|
37
|
-
speed: number;
|
|
38
|
-
pixelSize: number;
|
|
39
|
-
background: string;
|
|
40
|
-
autoPlay: boolean;
|
|
41
|
-
}>>, {
|
|
42
|
-
start: typeof start;
|
|
43
|
-
stop: typeof stop_2;
|
|
44
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
45
|
-
ready: () => void;
|
|
46
|
-
tick: (frame: number) => void;
|
|
47
|
-
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
48
|
-
width: number;
|
|
49
|
-
height: number;
|
|
50
|
-
colors: () => string[];
|
|
51
|
-
particleCount: number;
|
|
52
|
-
speed: number;
|
|
53
|
-
pixelSize: number;
|
|
54
|
-
background: string;
|
|
55
|
-
autoPlay: boolean;
|
|
56
|
-
}>>> & Readonly<{
|
|
57
|
-
onReady?: (() => any) | undefined;
|
|
58
|
-
onTick?: ((frame: number) => any) | undefined;
|
|
59
|
-
}>, {
|
|
60
|
-
colors: string[];
|
|
61
|
-
particleCount: number;
|
|
62
|
-
speed: number;
|
|
63
|
-
pixelSize: number;
|
|
64
|
-
width: number;
|
|
65
|
-
height: number;
|
|
66
|
-
background: string;
|
|
67
|
-
autoPlay: boolean;
|
|
68
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
69
|
-
|
|
70
|
-
/** PixelFlow 组件对外暴露的 ref 类型 */
|
|
71
|
-
export declare interface PixelFlowInstance {
|
|
72
|
-
/** 开始 / 重启动画 */
|
|
73
|
-
start: () => void;
|
|
74
|
-
/** 暂停动画 */
|
|
75
|
-
stop: () => void;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/** createPixelFlow 的配置参数 */
|
|
79
|
-
export declare interface PixelFlowOptions {
|
|
80
|
-
/** 目标 Canvas 元素 */
|
|
81
|
-
canvas: HTMLCanvasElement;
|
|
82
|
-
/** 粒子颜色列表 */
|
|
83
|
-
colors?: string[];
|
|
84
|
-
/** 粒子数量 */
|
|
85
|
-
particleCount?: number;
|
|
86
|
-
/** 速度倍率 (0.1 ~ 5) */
|
|
87
|
-
speed?: number;
|
|
88
|
-
/** 像素块大小（px） */
|
|
89
|
-
pixelSize?: number;
|
|
90
|
-
/** 每帧回调 */
|
|
91
|
-
onTick?: () => void;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
declare const PixelFlowVue: {
|
|
95
|
-
install(app: App): void;
|
|
96
|
-
};
|
|
97
|
-
export default PixelFlowVue;
|
|
98
|
-
|
|
99
|
-
declare interface Props {
|
|
100
|
-
/** 画布宽度，默认 600 */
|
|
101
|
-
width?: number;
|
|
102
|
-
/** 画布高度，默认 400 */
|
|
103
|
-
height?: number;
|
|
104
|
-
/** 像素粒子颜色列表 */
|
|
105
|
-
colors?: string[];
|
|
106
|
-
/** 粒子数量，默认 120 */
|
|
107
|
-
particleCount?: number;
|
|
108
|
-
/** 粒子速度倍率 (0.1 ~ 5)，默认 1 */
|
|
109
|
-
speed?: number;
|
|
110
|
-
/** 像素大小，默认 4 */
|
|
111
|
-
pixelSize?: number;
|
|
112
|
-
/** 背景色，默认 '#0d0d0d' */
|
|
113
|
-
background?: string;
|
|
114
|
-
/** 是否自动播放，默认 true */
|
|
115
|
-
autoPlay?: boolean;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
declare function start(): void;
|
|
119
|
-
|
|
120
|
-
declare function stop_2(): void;
|
|
121
|
-
|
|
122
|
-
export { }
|
package/dist/pixel-flow-vue.js
DELETED
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { defineComponent as b, ref as P, computed as _, onMounted as S, onUnmounted as z, watch as C, openBlock as D, createElementBlock as A, normalizeStyle as F } from "vue";
|
|
2
|
-
function R(c) {
|
|
3
|
-
const {
|
|
4
|
-
canvas: i,
|
|
5
|
-
colors: s = ["#00f5ff", "#7b2fff", "#ff2fa0", "#ffdd00"],
|
|
6
|
-
particleCount: a = 120,
|
|
7
|
-
speed: f = 1,
|
|
8
|
-
pixelSize: h = 4,
|
|
9
|
-
onTick: l
|
|
10
|
-
} = c, x = i.getContext("2d");
|
|
11
|
-
if (!x) throw new Error("[pixel-flow-vue] Failed to get 2D context");
|
|
12
|
-
const e = x;
|
|
13
|
-
let d = 0, u = !0;
|
|
14
|
-
function m() {
|
|
15
|
-
const t = i.width, o = i.height;
|
|
16
|
-
return {
|
|
17
|
-
x: Math.random() * t,
|
|
18
|
-
y: Math.random() * o,
|
|
19
|
-
vx: (Math.random() - 0.5) * f * 1.5,
|
|
20
|
-
vy: (Math.random() - 0.5) * f * 1.5,
|
|
21
|
-
color: s[Math.floor(Math.random() * s.length)],
|
|
22
|
-
size: h * (0.5 + Math.random() * 0.8),
|
|
23
|
-
alpha: Math.random(),
|
|
24
|
-
alphaDir: Math.random() > 0.5 ? 1 : -1
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
const n = Array.from({ length: a }, m);
|
|
28
|
-
function v(t) {
|
|
29
|
-
const o = i.width, r = i.height;
|
|
30
|
-
t.x += t.vx * f, t.y += t.vy * f, (t.x < 0 || t.x > o) && (t.vx *= -1), (t.y < 0 || t.y > r) && (t.vy *= -1), t.alpha += 0.012 * t.alphaDir, t.alpha >= 1 && (t.alpha = 1, t.alphaDir = -1), t.alpha <= 0.1 && (t.alpha = 0.1, t.alphaDir = 1);
|
|
31
|
-
}
|
|
32
|
-
function M(t) {
|
|
33
|
-
e.globalAlpha = t.alpha, e.fillStyle = t.color, e.fillRect(
|
|
34
|
-
Math.round(t.x),
|
|
35
|
-
Math.round(t.y),
|
|
36
|
-
Math.round(t.size),
|
|
37
|
-
Math.round(t.size)
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
function k() {
|
|
41
|
-
for (let o = 0; o < n.length; o++)
|
|
42
|
-
for (let r = o + 1; r < n.length; r++) {
|
|
43
|
-
const y = n[o].x - n[r].x, g = n[o].y - n[r].y, w = Math.sqrt(y * y + g * g);
|
|
44
|
-
w < 80 && (e.globalAlpha = (1 - w / 80) * 0.25, e.strokeStyle = n[o].color, e.lineWidth = 0.8, e.beginPath(), e.moveTo(n[o].x, n[o].y), e.lineTo(n[r].x, n[r].y), e.stroke());
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
function p() {
|
|
48
|
-
if (!u) return;
|
|
49
|
-
const t = i.width, o = i.height;
|
|
50
|
-
e.globalAlpha = 0.18, e.fillStyle = "#000", e.fillRect(0, 0, t, o), e.globalAlpha = 1;
|
|
51
|
-
for (const r of n)
|
|
52
|
-
v(r), M(r);
|
|
53
|
-
k(), l == null || l(), d = requestAnimationFrame(p);
|
|
54
|
-
}
|
|
55
|
-
return p(), function() {
|
|
56
|
-
u = !1, cancelAnimationFrame(d);
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
const B = ["width", "height"], q = /* @__PURE__ */ b({
|
|
60
|
-
__name: "PixelFlow",
|
|
61
|
-
props: {
|
|
62
|
-
width: { default: 600 },
|
|
63
|
-
height: { default: 400 },
|
|
64
|
-
colors: { default: () => ["#00f5ff", "#7b2fff", "#ff2fa0", "#ffdd00"] },
|
|
65
|
-
particleCount: { default: 120 },
|
|
66
|
-
speed: { default: 1 },
|
|
67
|
-
pixelSize: { default: 4 },
|
|
68
|
-
background: { default: "#0d0d0d" },
|
|
69
|
-
autoPlay: { type: Boolean, default: !0 }
|
|
70
|
-
},
|
|
71
|
-
emits: ["ready", "tick"],
|
|
72
|
-
setup(c, { expose: i, emit: s }) {
|
|
73
|
-
const a = c, f = s, h = P(null);
|
|
74
|
-
let l = null, x = 0;
|
|
75
|
-
const e = _(() => ({
|
|
76
|
-
display: "block",
|
|
77
|
-
background: a.background
|
|
78
|
-
}));
|
|
79
|
-
function d() {
|
|
80
|
-
if (!h.value) return;
|
|
81
|
-
l == null || l();
|
|
82
|
-
const m = {
|
|
83
|
-
canvas: h.value,
|
|
84
|
-
colors: a.colors,
|
|
85
|
-
particleCount: a.particleCount,
|
|
86
|
-
speed: a.speed,
|
|
87
|
-
pixelSize: a.pixelSize,
|
|
88
|
-
onTick: () => f("tick", ++x)
|
|
89
|
-
};
|
|
90
|
-
l = R(m), f("ready");
|
|
91
|
-
}
|
|
92
|
-
function u() {
|
|
93
|
-
l == null || l(), l = null;
|
|
94
|
-
}
|
|
95
|
-
return S(() => {
|
|
96
|
-
a.autoPlay && d();
|
|
97
|
-
}), z(() => {
|
|
98
|
-
u();
|
|
99
|
-
}), C(
|
|
100
|
-
() => [a.particleCount, a.speed, a.pixelSize, a.colors],
|
|
101
|
-
() => {
|
|
102
|
-
l && d();
|
|
103
|
-
},
|
|
104
|
-
{ deep: !0 }
|
|
105
|
-
), i({ start: d, stop: u }), (m, n) => (D(), A("canvas", {
|
|
106
|
-
ref_key: "canvasRef",
|
|
107
|
-
ref: h,
|
|
108
|
-
width: c.width,
|
|
109
|
-
height: c.height,
|
|
110
|
-
style: F(e.value),
|
|
111
|
-
class: "pixel-flow-canvas"
|
|
112
|
-
}, null, 12, B));
|
|
113
|
-
}
|
|
114
|
-
}), E = (c, i) => {
|
|
115
|
-
const s = c.__vccOpts || c;
|
|
116
|
-
for (const [a, f] of i)
|
|
117
|
-
s[a] = f;
|
|
118
|
-
return s;
|
|
119
|
-
}, I = /* @__PURE__ */ E(q, [["__scopeId", "data-v-89863d06"]]), j = {
|
|
120
|
-
install(c) {
|
|
121
|
-
c.component("PixelFlow", I);
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
export {
|
|
125
|
-
I as PixelFlow,
|
|
126
|
-
R as createPixelFlow,
|
|
127
|
-
j as default
|
|
128
|
-
};
|
|
129
|
-
//# sourceMappingURL=pixel-flow-vue.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pixel-flow-vue.js","sources":["../src/core/pixelFlow.ts","../src/components/PixelFlow.vue","../src/index.ts"],"sourcesContent":["import type { PixelFlowOptions } from '../types'\n\n// -------------------------------------------------------\n// 粒子结构\n// -------------------------------------------------------\ninterface Particle {\n x: number\n y: number\n vx: number\n vy: number\n color: string\n size: number\n alpha: number\n alphaDir: number\n}\n\n// -------------------------------------------------------\n// 工厂函数：createPixelFlow\n// 返回一个 stop 函数，调用后停止动画循环\n// -------------------------------------------------------\nexport function createPixelFlow(options: PixelFlowOptions): () => void {\n const {\n canvas,\n colors = ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n particleCount = 120,\n speed = 1,\n pixelSize = 4,\n onTick,\n } = options\n\n const rawCtx = canvas.getContext('2d')\n if (!rawCtx) throw new Error('[pixel-flow-vue] Failed to get 2D context')\n // After the null-check, rebind as non-nullable so TypeScript is satisfied\n // inside every nested closure (TS cannot narrow across function boundaries).\n const ctx: CanvasRenderingContext2D = rawCtx\n\n let rafId = 0\n let running = true\n\n // ---- 初始化粒子 ----\n function makeParticle(): Particle {\n const w = canvas.width\n const h = canvas.height\n return {\n x: Math.random() * w,\n y: Math.random() * h,\n vx: (Math.random() - 0.5) * speed * 1.5,\n vy: (Math.random() - 0.5) * speed * 1.5,\n color: colors[Math.floor(Math.random() * colors.length)],\n size: pixelSize * (0.5 + Math.random() * 0.8),\n alpha: Math.random(),\n alphaDir: Math.random() > 0.5 ? 1 : -1,\n }\n }\n\n const particles: Particle[] = Array.from({ length: particleCount }, makeParticle)\n\n // ---- 更新单个粒子 ----\n function updateParticle(p: Particle): void {\n const w = canvas.width\n const h = canvas.height\n\n p.x += p.vx * speed\n p.y += p.vy * speed\n\n // 边界回弹\n if (p.x < 0 || p.x > w) p.vx *= -1\n if (p.y < 0 || p.y > h) p.vy *= -1\n\n // 呼吸透明度\n p.alpha += 0.012 * p.alphaDir\n if (p.alpha >= 1) { p.alpha = 1; p.alphaDir = -1 }\n if (p.alpha <= 0.1) { p.alpha = 0.1; p.alphaDir = 1 }\n }\n\n // ---- 绘制单个像素块 ----\n function drawParticle(p: Particle): void {\n ctx.globalAlpha = p.alpha\n ctx.fillStyle = p.color\n ctx.fillRect(\n Math.round(p.x),\n Math.round(p.y),\n Math.round(p.size),\n Math.round(p.size),\n )\n }\n\n // ---- 连线：距离近的粒子之间画线 ----\n function drawConnections(): void {\n const maxDist = 80\n for (let i = 0; i < particles.length; i++) {\n for (let j = i + 1; j < particles.length; j++) {\n const dx = particles[i].x - particles[j].x\n const dy = particles[i].y - particles[j].y\n const dist = Math.sqrt(dx * dx + dy * dy)\n if (dist < maxDist) {\n ctx.globalAlpha = (1 - dist / maxDist) * 0.25\n ctx.strokeStyle = particles[i].color\n ctx.lineWidth = 0.8\n ctx.beginPath()\n ctx.moveTo(particles[i].x, particles[i].y)\n ctx.lineTo(particles[j].x, particles[j].y)\n ctx.stroke()\n }\n }\n }\n }\n\n // ---- 动画主循环 ----\n function loop(): void {\n if (!running) return\n\n const w = canvas.width\n const h = canvas.height\n\n // 拖尾效果：半透明清屏\n ctx.globalAlpha = 0.18\n ctx.fillStyle = '#000'\n ctx.fillRect(0, 0, w, h)\n\n ctx.globalAlpha = 1\n\n // 更新 & 绘制\n for (const p of particles) {\n updateParticle(p)\n drawParticle(p)\n }\n\n drawConnections()\n\n onTick?.()\n rafId = requestAnimationFrame(loop)\n }\n\n loop()\n\n // ---- 返回 stop 函数 ----\n return function stop() {\n running = false\n cancelAnimationFrame(rafId)\n }\n}\n","<template>\n <canvas\n ref=\"canvasRef\"\n :width=\"width\"\n :height=\"height\"\n :style=\"canvasStyle\"\n class=\"pixel-flow-canvas\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, watch } from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { createPixelFlow } from '../core/pixelFlow'\nimport type { PixelFlowOptions } from '../types'\n\n// ----------------------------------------------------------------\n// Props\n// ----------------------------------------------------------------\ninterface Props {\n /** 画布宽度，默认 600 */\n width?: number\n /** 画布高度，默认 400 */\n height?: number\n /** 像素粒子颜色列表 */\n colors?: string[]\n /** 粒子数量，默认 120 */\n particleCount?: number\n /** 粒子速度倍率 (0.1 ~ 5)，默认 1 */\n speed?: number\n /** 像素大小，默认 4 */\n pixelSize?: number\n /** 背景色，默认 '#0d0d0d' */\n background?: string\n /** 是否自动播放，默认 true */\n autoPlay?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n width: 600,\n height: 400,\n colors: () => ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n particleCount: 120,\n speed: 1,\n pixelSize: 4,\n background: '#0d0d0d',\n autoPlay: true,\n})\n\n// ----------------------------------------------------------------\n// Emits\n// ----------------------------------------------------------------\nconst emit = defineEmits<{\n (e: 'ready'): void\n (e: 'tick', frame: number): void\n}>()\n\n// ----------------------------------------------------------------\n// Refs & state\n// ----------------------------------------------------------------\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nlet stopFn: (() => void) | null = null\nlet frame = 0\n\nconst canvasStyle = computed<CSSProperties>(() => ({\n display: 'block',\n background: props.background,\n}))\n\n// ----------------------------------------------------------------\n// Start / Stop helpers\n// ----------------------------------------------------------------\nfunction start() {\n if (!canvasRef.value) return\n stopFn?.()\n\n const options: PixelFlowOptions = {\n canvas: canvasRef.value,\n colors: props.colors,\n particleCount: props.particleCount,\n speed: props.speed,\n pixelSize: props.pixelSize,\n onTick: () => emit('tick', ++frame),\n }\n\n stopFn = createPixelFlow(options)\n emit('ready')\n}\n\nfunction stop() {\n stopFn?.()\n stopFn = null\n}\n\n// ----------------------------------------------------------------\n// Lifecycle\n// ----------------------------------------------------------------\nonMounted(() => {\n if (props.autoPlay) start()\n})\n\nonUnmounted(() => {\n stop()\n})\n\nwatch(\n () => [props.particleCount, props.speed, props.pixelSize, props.colors],\n () => {\n if (stopFn) start() // 重启以应用新配置\n },\n { deep: true }\n)\n\n// ----------------------------------------------------------------\n// Expose public API\n// ----------------------------------------------------------------\ndefineExpose({ start, stop })\n</script>\n\n<style scoped>\n.pixel-flow-canvas {\n border-radius: 4px;\n}\n</style>\n","import type { App } from 'vue'\nimport PixelFlow from './components/PixelFlow.vue'\nexport type { PixelFlowOptions, PixelFlowInstance } from './types'\nexport { createPixelFlow } from './core/pixelFlow'\n\n// ----------------------------------------------------------------\n// Vue 插件安装函数\n// ----------------------------------------------------------------\nconst PixelFlowVue = {\n install(app: App) {\n app.component('PixelFlow', PixelFlow)\n },\n}\n\n// ----------------------------------------------------------------\n// 导出\n// ----------------------------------------------------------------\nexport { PixelFlow }\nexport default PixelFlowVue\n"],"names":["createPixelFlow","options","canvas","colors","particleCount","speed","pixelSize","onTick","rawCtx","ctx","rafId","running","makeParticle","w","h","particles","updateParticle","p","drawParticle","drawConnections","i","j","dx","dy","dist","loop","props","__props","emit","__emit","canvasRef","ref","stopFn","frame","canvasStyle","computed","start","stop","onMounted","onUnmounted","watch","__expose","_createElementBlock","PixelFlowVue","app","PixelFlow"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(s,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(s=typeof globalThis<"u"?globalThis:s||self,n(s.PixelFlowVue={},s.Vue))})(this,function(s,n){"use strict";function w(f){const{canvas:c,colors:u=["#00f5ff","#7b2fff","#ff2fa0","#ffdd00"],particleCount:o=120,speed:d=1,pixelSize:x=4,onTick:l}=f,p=c.getContext("2d");if(!p)throw new Error("[pixel-flow-vue] Failed to get 2D context");const t=p;let h=0,m=!0;function y(){const e=c.width,a=c.height;return{x:Math.random()*e,y:Math.random()*a,vx:(Math.random()-.5)*d*1.5,vy:(Math.random()-.5)*d*1.5,color:u[Math.floor(Math.random()*u.length)],size:x*(.5+Math.random()*.8),alpha:Math.random(),alphaDir:Math.random()>.5?1:-1}}const i=Array.from({length:o},y);function S(e){const a=c.width,r=c.height;e.x+=e.vx*d,e.y+=e.vy*d,(e.x<0||e.x>a)&&(e.vx*=-1),(e.y<0||e.y>r)&&(e.vy*=-1),e.alpha+=.012*e.alphaDir,e.alpha>=1&&(e.alpha=1,e.alphaDir=-1),e.alpha<=.1&&(e.alpha=.1,e.alphaDir=1)}function z(e){t.globalAlpha=e.alpha,t.fillStyle=e.color,t.fillRect(Math.round(e.x),Math.round(e.y),Math.round(e.size),Math.round(e.size))}function C(){for(let a=0;a<i.length;a++)for(let r=a+1;r<i.length;r++){const M=i[a].x-i[r].x,_=i[a].y-i[r].y,P=Math.sqrt(M*M+_*_);P<80&&(t.globalAlpha=(1-P/80)*.25,t.strokeStyle=i[a].color,t.lineWidth=.8,t.beginPath(),t.moveTo(i[a].x,i[a].y),t.lineTo(i[r].x,i[r].y),t.stroke())}}function v(){if(!m)return;const e=c.width,a=c.height;t.globalAlpha=.18,t.fillStyle="#000",t.fillRect(0,0,e,a),t.globalAlpha=1;for(const r of i)S(r),z(r);C(),l==null||l(),h=requestAnimationFrame(v)}return v(),function(){m=!1,cancelAnimationFrame(h)}}const b=["width","height"],g=((f,c)=>{const u=f.__vccOpts||f;for(const[o,d]of c)u[o]=d;return u})(n.defineComponent({__name:"PixelFlow",props:{width:{default:600},height:{default:400},colors:{default:()=>["#00f5ff","#7b2fff","#ff2fa0","#ffdd00"]},particleCount:{default:120},speed:{default:1},pixelSize:{default:4},background:{default:"#0d0d0d"},autoPlay:{type:Boolean,default:!0}},emits:["ready","tick"],setup(f,{expose:c,emit:u}){const o=f,d=u,x=n.ref(null);let l=null,p=0;const t=n.computed(()=>({display:"block",background:o.background}));function h(){if(!x.value)return;l==null||l();const y={canvas:x.value,colors:o.colors,particleCount:o.particleCount,speed:o.speed,pixelSize:o.pixelSize,onTick:()=>d("tick",++p)};l=w(y),d("ready")}function m(){l==null||l(),l=null}return n.onMounted(()=>{o.autoPlay&&h()}),n.onUnmounted(()=>{m()}),n.watch(()=>[o.particleCount,o.speed,o.pixelSize,o.colors],()=>{l&&h()},{deep:!0}),c({start:h,stop:m}),(y,i)=>(n.openBlock(),n.createElementBlock("canvas",{ref_key:"canvasRef",ref:x,width:f.width,height:f.height,style:n.normalizeStyle(t.value),class:"pixel-flow-canvas"},null,12,b))}}),[["__scopeId","data-v-89863d06"]]),k={install(f){f.component("PixelFlow",g)}};s.PixelFlow=g,s.createPixelFlow=w,s.default=k,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
2
|
-
//# sourceMappingURL=pixel-flow-vue.umd.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pixel-flow-vue.umd.cjs","sources":["../src/core/pixelFlow.ts","../src/components/PixelFlow.vue","../src/index.ts"],"sourcesContent":["import type { PixelFlowOptions } from '../types'\n\n// -------------------------------------------------------\n// 粒子结构\n// -------------------------------------------------------\ninterface Particle {\n x: number\n y: number\n vx: number\n vy: number\n color: string\n size: number\n alpha: number\n alphaDir: number\n}\n\n// -------------------------------------------------------\n// 工厂函数：createPixelFlow\n// 返回一个 stop 函数，调用后停止动画循环\n// -------------------------------------------------------\nexport function createPixelFlow(options: PixelFlowOptions): () => void {\n const {\n canvas,\n colors = ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n particleCount = 120,\n speed = 1,\n pixelSize = 4,\n onTick,\n } = options\n\n const rawCtx = canvas.getContext('2d')\n if (!rawCtx) throw new Error('[pixel-flow-vue] Failed to get 2D context')\n // After the null-check, rebind as non-nullable so TypeScript is satisfied\n // inside every nested closure (TS cannot narrow across function boundaries).\n const ctx: CanvasRenderingContext2D = rawCtx\n\n let rafId = 0\n let running = true\n\n // ---- 初始化粒子 ----\n function makeParticle(): Particle {\n const w = canvas.width\n const h = canvas.height\n return {\n x: Math.random() * w,\n y: Math.random() * h,\n vx: (Math.random() - 0.5) * speed * 1.5,\n vy: (Math.random() - 0.5) * speed * 1.5,\n color: colors[Math.floor(Math.random() * colors.length)],\n size: pixelSize * (0.5 + Math.random() * 0.8),\n alpha: Math.random(),\n alphaDir: Math.random() > 0.5 ? 1 : -1,\n }\n }\n\n const particles: Particle[] = Array.from({ length: particleCount }, makeParticle)\n\n // ---- 更新单个粒子 ----\n function updateParticle(p: Particle): void {\n const w = canvas.width\n const h = canvas.height\n\n p.x += p.vx * speed\n p.y += p.vy * speed\n\n // 边界回弹\n if (p.x < 0 || p.x > w) p.vx *= -1\n if (p.y < 0 || p.y > h) p.vy *= -1\n\n // 呼吸透明度\n p.alpha += 0.012 * p.alphaDir\n if (p.alpha >= 1) { p.alpha = 1; p.alphaDir = -1 }\n if (p.alpha <= 0.1) { p.alpha = 0.1; p.alphaDir = 1 }\n }\n\n // ---- 绘制单个像素块 ----\n function drawParticle(p: Particle): void {\n ctx.globalAlpha = p.alpha\n ctx.fillStyle = p.color\n ctx.fillRect(\n Math.round(p.x),\n Math.round(p.y),\n Math.round(p.size),\n Math.round(p.size),\n )\n }\n\n // ---- 连线：距离近的粒子之间画线 ----\n function drawConnections(): void {\n const maxDist = 80\n for (let i = 0; i < particles.length; i++) {\n for (let j = i + 1; j < particles.length; j++) {\n const dx = particles[i].x - particles[j].x\n const dy = particles[i].y - particles[j].y\n const dist = Math.sqrt(dx * dx + dy * dy)\n if (dist < maxDist) {\n ctx.globalAlpha = (1 - dist / maxDist) * 0.25\n ctx.strokeStyle = particles[i].color\n ctx.lineWidth = 0.8\n ctx.beginPath()\n ctx.moveTo(particles[i].x, particles[i].y)\n ctx.lineTo(particles[j].x, particles[j].y)\n ctx.stroke()\n }\n }\n }\n }\n\n // ---- 动画主循环 ----\n function loop(): void {\n if (!running) return\n\n const w = canvas.width\n const h = canvas.height\n\n // 拖尾效果：半透明清屏\n ctx.globalAlpha = 0.18\n ctx.fillStyle = '#000'\n ctx.fillRect(0, 0, w, h)\n\n ctx.globalAlpha = 1\n\n // 更新 & 绘制\n for (const p of particles) {\n updateParticle(p)\n drawParticle(p)\n }\n\n drawConnections()\n\n onTick?.()\n rafId = requestAnimationFrame(loop)\n }\n\n loop()\n\n // ---- 返回 stop 函数 ----\n return function stop() {\n running = false\n cancelAnimationFrame(rafId)\n }\n}\n","<template>\n <canvas\n ref=\"canvasRef\"\n :width=\"width\"\n :height=\"height\"\n :style=\"canvasStyle\"\n class=\"pixel-flow-canvas\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, watch } from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { createPixelFlow } from '../core/pixelFlow'\nimport type { PixelFlowOptions } from '../types'\n\n// ----------------------------------------------------------------\n// Props\n// ----------------------------------------------------------------\ninterface Props {\n /** 画布宽度，默认 600 */\n width?: number\n /** 画布高度，默认 400 */\n height?: number\n /** 像素粒子颜色列表 */\n colors?: string[]\n /** 粒子数量，默认 120 */\n particleCount?: number\n /** 粒子速度倍率 (0.1 ~ 5)，默认 1 */\n speed?: number\n /** 像素大小，默认 4 */\n pixelSize?: number\n /** 背景色，默认 '#0d0d0d' */\n background?: string\n /** 是否自动播放，默认 true */\n autoPlay?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n width: 600,\n height: 400,\n colors: () => ['#00f5ff', '#7b2fff', '#ff2fa0', '#ffdd00'],\n particleCount: 120,\n speed: 1,\n pixelSize: 4,\n background: '#0d0d0d',\n autoPlay: true,\n})\n\n// ----------------------------------------------------------------\n// Emits\n// ----------------------------------------------------------------\nconst emit = defineEmits<{\n (e: 'ready'): void\n (e: 'tick', frame: number): void\n}>()\n\n// ----------------------------------------------------------------\n// Refs & state\n// ----------------------------------------------------------------\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nlet stopFn: (() => void) | null = null\nlet frame = 0\n\nconst canvasStyle = computed<CSSProperties>(() => ({\n display: 'block',\n background: props.background,\n}))\n\n// ----------------------------------------------------------------\n// Start / Stop helpers\n// ----------------------------------------------------------------\nfunction start() {\n if (!canvasRef.value) return\n stopFn?.()\n\n const options: PixelFlowOptions = {\n canvas: canvasRef.value,\n colors: props.colors,\n particleCount: props.particleCount,\n speed: props.speed,\n pixelSize: props.pixelSize,\n onTick: () => emit('tick', ++frame),\n }\n\n stopFn = createPixelFlow(options)\n emit('ready')\n}\n\nfunction stop() {\n stopFn?.()\n stopFn = null\n}\n\n// ----------------------------------------------------------------\n// Lifecycle\n// ----------------------------------------------------------------\nonMounted(() => {\n if (props.autoPlay) start()\n})\n\nonUnmounted(() => {\n stop()\n})\n\nwatch(\n () => [props.particleCount, props.speed, props.pixelSize, props.colors],\n () => {\n if (stopFn) start() // 重启以应用新配置\n },\n { deep: true }\n)\n\n// ----------------------------------------------------------------\n// Expose public API\n// ----------------------------------------------------------------\ndefineExpose({ start, stop })\n</script>\n\n<style scoped>\n.pixel-flow-canvas {\n border-radius: 4px;\n}\n</style>\n","import type { App } from 'vue'\nimport PixelFlow from './components/PixelFlow.vue'\nexport type { PixelFlowOptions, PixelFlowInstance } from './types'\nexport { createPixelFlow } from './core/pixelFlow'\n\n// ----------------------------------------------------------------\n// Vue 插件安装函数\n// ----------------------------------------------------------------\nconst PixelFlowVue = {\n install(app: App) {\n app.component('PixelFlow', PixelFlow)\n },\n}\n\n// ----------------------------------------------------------------\n// 导出\n// ----------------------------------------------------------------\nexport { PixelFlow }\nexport default PixelFlowVue\n"],"names":["createPixelFlow","options","canvas","colors","particleCount","speed","pixelSize","onTick","rawCtx","ctx","rafId","running","makeParticle","w","h","particles","updateParticle","p","drawParticle","drawConnections","i","j","dx","dy","dist","loop","props","__props","emit","__emit","canvasRef","ref","stopFn","frame","canvasStyle","computed","start","stop","onMounted","onUnmounted","watch","__expose","_createElementBlock","PixelFlowVue","app","PixelFlow"],"mappings":"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"}
|
package/dist/style.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.pixel-flow-canvas[data-v-89863d06]{border-radius:4px}
|