pixel-flow-vue 1.0.11 → 1.0.13
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 -108
- 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 +21 -46
- package/pixel-flow-vue.d.ts +16 -0
- package/LICENSE +0 -21
- package/dist/index.d.ts +0 -121
- package/dist/pixel-flow-vue.js +0 -113
- 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,110 +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
|
-
|
|
8
|
-
## Install
|
|
9
|
-
|
|
10
|
-
```bash
|
|
11
|
-
npm install pixel-flow-vue
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Usage
|
|
15
|
-
|
|
16
|
-
### Global registration
|
|
17
|
-
|
|
18
|
-
```ts
|
|
19
|
-
// main.ts
|
|
20
|
-
import { createApp } from 'vue'
|
|
21
|
-
import PixelFlowVue from 'pixel-flow-vue'
|
|
22
|
-
import 'pixel-flow-vue/style.css'
|
|
23
|
-
import App from './App.vue'
|
|
24
|
-
|
|
25
|
-
createApp(App).use(PixelFlowVue).mount('#app')
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
```vue
|
|
29
|
-
<template>
|
|
30
|
-
<PixelFlow :width="800" :height="450" />
|
|
31
|
-
</template>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### On-demand (Composition API)
|
|
35
|
-
|
|
36
|
-
```vue
|
|
37
|
-
<template>
|
|
38
|
-
<PixelFlow
|
|
39
|
-
ref="flowRef"
|
|
40
|
-
:width="800"
|
|
41
|
-
:height="450"
|
|
42
|
-
:colors="['#00f5ff', '#7b2fff']"
|
|
43
|
-
:particle-count="200"
|
|
44
|
-
:speed="1.5"
|
|
45
|
-
:pixel-size="5"
|
|
46
|
-
@ready="onReady"
|
|
47
|
-
@tick="onTick"
|
|
48
|
-
/>
|
|
49
|
-
<button @click="flowRef?.stop()">Pause</button>
|
|
50
|
-
<button @click="flowRef?.start()">Resume</button>
|
|
51
|
-
</template>
|
|
52
|
-
|
|
53
|
-
<script setup lang="ts">
|
|
54
|
-
import { ref } from 'vue'
|
|
55
|
-
import { PixelFlow } from 'pixel-flow-vue'
|
|
56
|
-
import type { PixelFlowInstance } from 'pixel-flow-vue'
|
|
57
|
-
|
|
58
|
-
const flowRef = ref<PixelFlowInstance | null>(null)
|
|
59
|
-
const onReady = () => console.log('ready!')
|
|
60
|
-
const onTick = (frame: number) => {}
|
|
61
|
-
</script>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### Headless (no component)
|
|
65
|
-
|
|
66
|
-
```ts
|
|
67
|
-
import { createPixelFlow } from 'pixel-flow-vue'
|
|
68
|
-
|
|
69
|
-
const canvas = document.querySelector<HTMLCanvasElement>('#c')!
|
|
70
|
-
const stop = createPixelFlow({ canvas, particleCount: 80, speed: 2 })
|
|
71
|
-
// stop() ← call to cancel
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
## Props
|
|
75
|
-
|
|
76
|
-
| Prop | Type | Default | Description |
|
|
77
|
-
|-----------------|------------|---------------------------------------------|--------------------------|
|
|
78
|
-
| `width` | `number` | `600` | Canvas width (px) |
|
|
79
|
-
| `height` | `number` | `400` | Canvas height (px) |
|
|
80
|
-
| `colors` | `string[]` | `['#00f5ff','#7b2fff','#ff2fa0','#ffdd00']` | Particle color palette |
|
|
81
|
-
| `particleCount` | `number` | `120` | Number of particles |
|
|
82
|
-
| `speed` | `number` | `1` | Speed multiplier 0.1–5 |
|
|
83
|
-
| `pixelSize` | `number` | `4` | Pixel block size (px) |
|
|
84
|
-
| `background` | `string` | `'#0d0d0d'` | Canvas background color |
|
|
85
|
-
| `autoPlay` | `boolean` | `true` | Auto-start on mount |
|
|
86
|
-
|
|
87
|
-
## Events
|
|
88
|
-
|
|
89
|
-
| Event | Payload | Description |
|
|
90
|
-
|---------|----------------|-----------------------------|
|
|
91
|
-
| `ready` | — | Fired when animation starts |
|
|
92
|
-
| `tick` | `frame: number`| Fired every animation frame |
|
|
93
|
-
|
|
94
|
-
## Exposed Methods
|
|
95
|
-
|
|
96
|
-
| Method | Description |
|
|
97
|
-
|-----------|--------------------------|
|
|
98
|
-
| `start()` | Start / restart the loop |
|
|
99
|
-
| `stop()` | Stop the animation loop |
|
|
100
|
-
|
|
101
|
-
## Publish to npm
|
|
102
|
-
|
|
103
|
-
```bash
|
|
104
|
-
npm login
|
|
105
|
-
npm publish --access public
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## License
|
|
109
|
-
|
|
110
|
-
[MIT](LICENSE)
|
|
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,55 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixel-flow-vue",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A lightweight Vue 3 pixel-flow canvas animation plugin with TypeScript support",
|
|
3
|
+
"version": "1.0.13",
|
|
5
4
|
"type": "module",
|
|
6
|
-
"main": "
|
|
7
|
-
"module": "
|
|
8
|
-
"types": "
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
"types": "./dist/index.d.ts",
|
|
13
|
-
"default": "./dist/pixel-flow-vue.js"
|
|
14
|
-
},
|
|
15
|
-
"require": {
|
|
16
|
-
"types": "./dist/index.d.ts",
|
|
17
|
-
"default": "./dist/pixel-flow-vue.umd.cjs"
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
"./style.css": "./dist/style.css"
|
|
21
|
-
},
|
|
22
|
-
"files": ["dist", "README.md", "LICENSE"],
|
|
23
|
-
"sideEffects": ["**/*.css"],
|
|
24
|
-
"scripts": {
|
|
25
|
-
"dev": "vite --config vite.dev.config.ts",
|
|
26
|
-
"build": "vue-tsc --noEmit && vite build",
|
|
27
|
-
"prepublishOnly": "npm run build"
|
|
28
|
-
},
|
|
29
|
-
"keywords": [
|
|
30
|
-
"vue", "vue3", "plugin", "pixel", "flow",
|
|
31
|
-
"animation", "canvas", "typescript", "component"
|
|
5
|
+
"main": "dist/pixel-flow-vue.umd.js",
|
|
6
|
+
"module": "dist/pixel-flow-vue.es.js",
|
|
7
|
+
"types": "pixel-flow-vue.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist/*",
|
|
10
|
+
"pixel-flow-vue.d.ts"
|
|
32
11
|
],
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"
|
|
37
|
-
"url": "https://github.com/your-username/pixel-flow-vue.git"
|
|
38
|
-
},
|
|
39
|
-
"homepage": "https://github.com/your-username/pixel-flow-vue#readme",
|
|
40
|
-
"bugs": {
|
|
41
|
-
"url": "https://github.com/your-username/pixel-flow-vue/issues"
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "vite",
|
|
14
|
+
"build": "vue-tsc -b && vite build",
|
|
15
|
+
"preview": "vite preview"
|
|
42
16
|
},
|
|
43
|
-
"
|
|
44
|
-
"
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"sass": "^1.101.0",
|
|
19
|
+
"vue": "^3.5.34"
|
|
45
20
|
},
|
|
46
21
|
"devDependencies": {
|
|
47
|
-
"@types/node": "^
|
|
48
|
-
"@vitejs/plugin-vue": "^
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"vue-tsc": "^2.
|
|
22
|
+
"@types/node": "^24.12.3",
|
|
23
|
+
"@vitejs/plugin-vue": "^6.0.6",
|
|
24
|
+
"@vitejs/plugin-vue-jsx": "^5.1.5",
|
|
25
|
+
"@vue/tsconfig": "^0.9.1",
|
|
26
|
+
"typescript": "~6.0.2",
|
|
27
|
+
"vite": "^8.0.12",
|
|
28
|
+
"vue-tsc": "^3.2.8"
|
|
54
29
|
}
|
|
55
30
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { App, Plugin } from 'vue'
|
|
2
|
+
import hxButton from './packages/hx-button/index'
|
|
3
|
+
|
|
4
|
+
export { hxButton }
|
|
5
|
+
|
|
6
|
+
declare const _default: {
|
|
7
|
+
install: (app: App) => void
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default _default
|
|
11
|
+
|
|
12
|
+
declare module '*.vue' {
|
|
13
|
+
import type { DefineComponent } from 'vue'
|
|
14
|
+
const component: DefineComponent<{}, {}, any>
|
|
15
|
+
export default component
|
|
16
|
+
}
|
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,121 +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
|
-
/**
|
|
31
|
-
* 创建像素粒子流动画。
|
|
32
|
-
* @returns 停止函数，调用后取消动画循环。
|
|
33
|
-
*/
|
|
34
|
-
export declare function createPixelFlow(options: PixelFlowOptions): () => void;
|
|
35
|
-
|
|
36
|
-
export declare const PixelFlow: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
37
|
-
width: number;
|
|
38
|
-
height: number;
|
|
39
|
-
colors: () => string[];
|
|
40
|
-
particleCount: number;
|
|
41
|
-
speed: number;
|
|
42
|
-
pixelSize: number;
|
|
43
|
-
background: string;
|
|
44
|
-
autoPlay: boolean;
|
|
45
|
-
}>>, {
|
|
46
|
-
start: () => void;
|
|
47
|
-
stop: () => void;
|
|
48
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
49
|
-
ready: () => void;
|
|
50
|
-
tick: (frame: number) => void;
|
|
51
|
-
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
52
|
-
width: number;
|
|
53
|
-
height: number;
|
|
54
|
-
colors: () => string[];
|
|
55
|
-
particleCount: number;
|
|
56
|
-
speed: number;
|
|
57
|
-
pixelSize: number;
|
|
58
|
-
background: string;
|
|
59
|
-
autoPlay: boolean;
|
|
60
|
-
}>>> & Readonly<{
|
|
61
|
-
onReady?: (() => any) | undefined;
|
|
62
|
-
onTick?: ((frame: number) => any) | undefined;
|
|
63
|
-
}>, {
|
|
64
|
-
colors: string[];
|
|
65
|
-
particleCount: number;
|
|
66
|
-
speed: number;
|
|
67
|
-
pixelSize: number;
|
|
68
|
-
width: number;
|
|
69
|
-
height: number;
|
|
70
|
-
background: string;
|
|
71
|
-
autoPlay: boolean;
|
|
72
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
73
|
-
|
|
74
|
-
/** PixelFlow 组件通过 defineExpose 暴露的实例方法 */
|
|
75
|
-
export declare interface PixelFlowInstance {
|
|
76
|
-
start: () => void;
|
|
77
|
-
stop: () => void;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/** pixel-flow-vue — 公共类型 */
|
|
81
|
-
/** createPixelFlow 配置项 */
|
|
82
|
-
export declare interface PixelFlowOptions {
|
|
83
|
-
/** 目标 HTMLCanvasElement */
|
|
84
|
-
canvas: HTMLCanvasElement;
|
|
85
|
-
/** 粒子颜色数组，默认 4 种霓虹色 */
|
|
86
|
-
colors?: string[];
|
|
87
|
-
/** 粒子数量，默认 120 */
|
|
88
|
-
particleCount?: number;
|
|
89
|
-
/** 速度倍率 (0.1~5)，默认 1 */
|
|
90
|
-
speed?: number;
|
|
91
|
-
/** 像素块大小 (px)，默认 4 */
|
|
92
|
-
pixelSize?: number;
|
|
93
|
-
/** 每帧回调 */
|
|
94
|
-
onTick?: () => void;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
declare const PixelFlowVue: {
|
|
98
|
-
install(app: App): void;
|
|
99
|
-
};
|
|
100
|
-
export default PixelFlowVue;
|
|
101
|
-
|
|
102
|
-
declare interface Props {
|
|
103
|
-
/** 画布宽度，默认 600 */
|
|
104
|
-
width?: number;
|
|
105
|
-
/** 画布高度，默认 400 */
|
|
106
|
-
height?: number;
|
|
107
|
-
/** 粒子颜色数组 */
|
|
108
|
-
colors?: string[];
|
|
109
|
-
/** 粒子数量，默认 120 */
|
|
110
|
-
particleCount?: number;
|
|
111
|
-
/** 速度倍率，默认 1 */
|
|
112
|
-
speed?: number;
|
|
113
|
-
/** 像素块大小，默认 4 */
|
|
114
|
-
pixelSize?: number;
|
|
115
|
-
/** 背景色，默认 #0d0d0d */
|
|
116
|
-
background?: string;
|
|
117
|
-
/** 挂载后自动开始，默认 true */
|
|
118
|
-
autoPlay?: boolean;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
export { }
|
package/dist/pixel-flow-vue.js
DELETED
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { defineComponent as k, ref as A, onMounted as C, onUnmounted as z, watch as P, openBlock as S, createElementBlock as _, normalizeStyle as D } from "vue";
|
|
2
|
-
function F(n) {
|
|
3
|
-
const {
|
|
4
|
-
canvas: i,
|
|
5
|
-
colors: d = ["#00f5ff", "#7b2fff", "#ff2fa0", "#ffdd00"],
|
|
6
|
-
particleCount: a = 120,
|
|
7
|
-
speed: f = 1,
|
|
8
|
-
pixelSize: h = 4,
|
|
9
|
-
onTick: o
|
|
10
|
-
} = n, u = i.getContext("2d");
|
|
11
|
-
if (!u) throw new Error("[pixel-flow-vue] Cannot get 2D context");
|
|
12
|
-
const e = u;
|
|
13
|
-
let s = 0, x = !0;
|
|
14
|
-
function m() {
|
|
15
|
-
return {
|
|
16
|
-
x: Math.random() * i.width,
|
|
17
|
-
y: Math.random() * i.height,
|
|
18
|
-
vx: (Math.random() - 0.5) * f * 2,
|
|
19
|
-
vy: (Math.random() - 0.5) * f * 2,
|
|
20
|
-
color: d[Math.floor(Math.random() * d.length)],
|
|
21
|
-
size: h * (0.4 + Math.random() * 0.8),
|
|
22
|
-
alpha: Math.random(),
|
|
23
|
-
alphaDir: Math.random() > 0.5 ? 1 : -1
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
const l = Array.from({ length: a }, m);
|
|
27
|
-
function v(t) {
|
|
28
|
-
t.x += t.vx * f, t.y += t.vy * f, (t.x < 0 || t.x > i.width) && (t.vx *= -1), (t.y < 0 || t.y > i.height) && (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);
|
|
29
|
-
}
|
|
30
|
-
function M(t) {
|
|
31
|
-
e.globalAlpha = t.alpha, e.fillStyle = t.color, e.fillRect(Math.round(t.x), Math.round(t.y), Math.round(t.size), Math.round(t.size));
|
|
32
|
-
}
|
|
33
|
-
function b() {
|
|
34
|
-
for (let r = 0; r < l.length; r++)
|
|
35
|
-
for (let c = r + 1; c < l.length; c++) {
|
|
36
|
-
const p = l[r].x - l[c].x, g = l[r].y - l[c].y, w = Math.sqrt(p * p + g * g);
|
|
37
|
-
w < 80 && (e.globalAlpha = (1 - w / 80) * 0.22, e.strokeStyle = l[r].color, e.lineWidth = 0.7, e.beginPath(), e.moveTo(l[r].x, l[r].y), e.lineTo(l[c].x, l[c].y), e.stroke());
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
function y() {
|
|
41
|
-
if (!x) return;
|
|
42
|
-
const { width: t, height: r } = i;
|
|
43
|
-
e.globalAlpha = 0.15, e.fillStyle = "#000", e.fillRect(0, 0, t, r), e.globalAlpha = 1;
|
|
44
|
-
for (const c of l)
|
|
45
|
-
v(c), M(c);
|
|
46
|
-
b(), o == null || o(), s = requestAnimationFrame(y);
|
|
47
|
-
}
|
|
48
|
-
return y(), function() {
|
|
49
|
-
x = !1, cancelAnimationFrame(s);
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
const R = ["width", "height"], B = /* @__PURE__ */ k({
|
|
53
|
-
__name: "PixelFlow",
|
|
54
|
-
props: {
|
|
55
|
-
width: { default: 600 },
|
|
56
|
-
height: { default: 400 },
|
|
57
|
-
colors: { default: () => ["#00f5ff", "#7b2fff", "#ff2fa0", "#ffdd00"] },
|
|
58
|
-
particleCount: { default: 120 },
|
|
59
|
-
speed: { default: 1 },
|
|
60
|
-
pixelSize: { default: 4 },
|
|
61
|
-
background: { default: "#0d0d0d" },
|
|
62
|
-
autoPlay: { type: Boolean, default: !0 }
|
|
63
|
-
},
|
|
64
|
-
emits: ["ready", "tick"],
|
|
65
|
-
setup(n, { expose: i, emit: d }) {
|
|
66
|
-
const a = n, f = d, h = A(null);
|
|
67
|
-
let o = null, u = 0;
|
|
68
|
-
function e() {
|
|
69
|
-
h.value && (o == null || o(), o = F({
|
|
70
|
-
canvas: h.value,
|
|
71
|
-
colors: a.colors,
|
|
72
|
-
particleCount: a.particleCount,
|
|
73
|
-
speed: a.speed,
|
|
74
|
-
pixelSize: a.pixelSize,
|
|
75
|
-
onTick: () => f("tick", ++u)
|
|
76
|
-
}), f("ready"));
|
|
77
|
-
}
|
|
78
|
-
function s() {
|
|
79
|
-
o == null || o(), o = null;
|
|
80
|
-
}
|
|
81
|
-
return C(() => {
|
|
82
|
-
a.autoPlay && e();
|
|
83
|
-
}), z(() => s()), P(
|
|
84
|
-
() => [a.particleCount, a.speed, a.pixelSize, a.colors],
|
|
85
|
-
() => {
|
|
86
|
-
o && e();
|
|
87
|
-
},
|
|
88
|
-
{ deep: !0 }
|
|
89
|
-
), i({ start: e, stop: s }), (x, m) => (S(), _("canvas", {
|
|
90
|
-
ref_key: "canvasRef",
|
|
91
|
-
ref: h,
|
|
92
|
-
width: n.width,
|
|
93
|
-
height: n.height,
|
|
94
|
-
style: D({ display: "block", background: n.background }),
|
|
95
|
-
class: "pixel-flow"
|
|
96
|
-
}, null, 12, R));
|
|
97
|
-
}
|
|
98
|
-
}), X = (n, i) => {
|
|
99
|
-
const d = n.__vccOpts || n;
|
|
100
|
-
for (const [a, f] of i)
|
|
101
|
-
d[a] = f;
|
|
102
|
-
return d;
|
|
103
|
-
}, q = /* @__PURE__ */ X(B, [["__scopeId", "data-v-02bb9f54"]]), I = {
|
|
104
|
-
install(n) {
|
|
105
|
-
n.component("PixelFlow", q);
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
export {
|
|
109
|
-
q as PixelFlow,
|
|
110
|
-
F as createPixelFlow,
|
|
111
|
-
I as default
|
|
112
|
-
};
|
|
113
|
-
//# 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\ninterface Particle {\n x: number; y: number\n vx: number; vy: number\n color: string\n size: number\n alpha: number\n alphaDir: 1 | -1\n}\n\n/**\n * 创建像素粒子流动画。\n * @returns 停止函数，调用后取消动画循环。\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 // 在 null 检查之后重新赋值为非空类型，避免 TS18047 在嵌套函数中误报\n const maybeCtx = canvas.getContext('2d')\n if (!maybeCtx) throw new Error('[pixel-flow-vue] Cannot get 2D context')\n const ctx: CanvasRenderingContext2D = maybeCtx\n\n let rafId = 0\n let active = true\n\n /* ---- 粒子工厂 ---- */\n function spawn(): Particle {\n return {\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n vx: (Math.random() - 0.5) * speed * 2,\n vy: (Math.random() - 0.5) * speed * 2,\n color: colors[Math.floor(Math.random() * colors.length)],\n size: pixelSize * (0.4 + 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 }, spawn)\n\n /* ---- 更新 ---- */\n function update(p: Particle): void {\n p.x += p.vx * speed\n p.y += p.vy * speed\n if (p.x < 0 || p.x > canvas.width) p.vx *= -1\n if (p.y < 0 || p.y > canvas.height) p.vy *= -1\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 drawPixel(p: Particle): void {\n ctx.globalAlpha = p.alpha\n ctx.fillStyle = p.color\n ctx.fillRect(Math.round(p.x), Math.round(p.y), Math.round(p.size), Math.round(p.size))\n }\n\n /* ---- 连线 ---- */\n function drawLinks(): void {\n const MAX = 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 < MAX) {\n ctx.globalAlpha = (1 - dist / MAX) * 0.22\n ctx.strokeStyle = particles[i].color\n ctx.lineWidth = 0.7\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 (!active) return\n const { width: w, height: h } = canvas\n // 拖尾：半透明黑色蒙层\n ctx.globalAlpha = 0.15\n ctx.fillStyle = '#000'\n ctx.fillRect(0, 0, w, h)\n ctx.globalAlpha = 1\n\n for (const p of particles) { update(p); drawPixel(p) }\n drawLinks()\n\n onTick?.()\n rafId = requestAnimationFrame(loop)\n }\n\n loop()\n\n return function stop(): void {\n active = false\n cancelAnimationFrame(rafId)\n }\n}\n","<template>\n <canvas\n ref=\"canvasRef\"\n :width=\"width\"\n :height=\"height\"\n :style=\"{ display: 'block', background: background }\"\n class=\"pixel-flow\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue'\nimport { createPixelFlow } from '../core/pixelFlow'\nimport type { PixelFlowInstance } from '../types'\n\n// ---------- props ----------\ninterface Props {\n /** 画布宽度，默认 600 */\n width?: number\n /** 画布高度，默认 400 */\n height?: number\n /** 粒子颜色数组 */\n colors?: string[]\n /** 粒子数量，默认 120 */\n particleCount?: number\n /** 速度倍率，默认 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// ---------- emits ----------\nconst emit = defineEmits<{\n (e: 'ready'): void\n (e: 'tick', frame: number): void\n}>()\n\n// ---------- internal ----------\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nlet stopFn: (() => void) | null = null\nlet frameCount = 0\n\nfunction start(): void {\n if (!canvasRef.value) return\n stopFn?.()\n stopFn = createPixelFlow({\n canvas: canvasRef.value,\n colors: props.colors,\n particleCount: props.particleCount,\n speed: props.speed,\n pixelSize: props.pixelSize,\n onTick: () => emit('tick', ++frameCount),\n })\n emit('ready')\n}\n\nfunction stop(): void {\n stopFn?.()\n stopFn = null\n}\n\nonMounted(() => { if (props.autoPlay) start() })\nonUnmounted(() => stop())\n\n// 配置变化时热重启\nwatch(\n () => [props.particleCount, props.speed, props.pixelSize, props.colors] as const,\n () => { if (stopFn) start() },\n { deep: true },\n)\n\n// ---------- expose ----------\ndefineExpose<PixelFlowInstance>({ start, stop })\n</script>\n\n<style scoped>\n.pixel-flow { border-radius: 4px; }\n</style>\n","/**\n * pixel-flow-vue\n * Vue 3 + TypeScript canvas pixel-flow animation plugin\n */\nimport type { App } from 'vue'\nimport PixelFlow from './components/PixelFlow.vue'\nimport { createPixelFlow } from './core/pixelFlow'\n\nexport type { PixelFlowOptions, PixelFlowInstance } from './types'\nexport { PixelFlow, createPixelFlow }\n\n// ---------- Vue plugin ----------\nconst PixelFlowVue = {\n install(app: App): void {\n app.component('PixelFlow', PixelFlow)\n },\n}\n\nexport default PixelFlowVue\n"],"names":["createPixelFlow","options","canvas","colors","particleCount","speed","pixelSize","onTick","maybeCtx","ctx","rafId","active","spawn","particles","update","p","drawPixel","drawLinks","i","j","dx","dy","dist","loop","w","h","props","__props","emit","__emit","canvasRef","ref","stopFn","frameCount","start","stop","onMounted","onUnmounted","watch","__expose","_createElementBlock","PixelFlowVue","app","PixelFlow"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(c,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(c=typeof globalThis<"u"?globalThis:c||self,a(c.PixelFlowVue={},c.Vue))})(this,function(c,a){"use strict";function p(i){const{canvas:f,colors:u=["#00f5ff","#7b2fff","#ff2fa0","#ffdd00"],particleCount:o=120,speed:d=1,pixelSize:h=4,onTick:l}=i,y=f.getContext("2d");if(!y)throw new Error("[pixel-flow-vue] Cannot get 2D context");const t=y;let x=0,m=!0;function g(){return{x:Math.random()*f.width,y:Math.random()*f.height,vx:(Math.random()-.5)*d*2,vy:(Math.random()-.5)*d*2,color:u[Math.floor(Math.random()*u.length)],size:h*(.4+Math.random()*.8),alpha:Math.random(),alphaDir:Math.random()>.5?1:-1}}const n=Array.from({length:o},g);function S(e){e.x+=e.vx*d,e.y+=e.vy*d,(e.x<0||e.x>f.width)&&(e.vx*=-1),(e.y<0||e.y>f.height)&&(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 A(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 r=0;r<n.length;r++)for(let s=r+1;s<n.length;s++){const b=n[r].x-n[s].x,v=n[r].y-n[s].y,_=Math.sqrt(b*b+v*v);_<80&&(t.globalAlpha=(1-_/80)*.22,t.strokeStyle=n[r].color,t.lineWidth=.7,t.beginPath(),t.moveTo(n[r].x,n[r].y),t.lineTo(n[s].x,n[s].y),t.stroke())}}function M(){if(!m)return;const{width:e,height:r}=f;t.globalAlpha=.15,t.fillStyle="#000",t.fillRect(0,0,e,r),t.globalAlpha=1;for(const s of n)S(s),A(s);C(),l==null||l(),x=requestAnimationFrame(M)}return M(),function(){m=!1,cancelAnimationFrame(x)}}const k=["width","height"],w=((i,f)=>{const u=i.__vccOpts||i;for(const[o,d]of f)u[o]=d;return u})(a.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(i,{expose:f,emit:u}){const o=i,d=u,h=a.ref(null);let l=null,y=0;function t(){h.value&&(l==null||l(),l=p({canvas:h.value,colors:o.colors,particleCount:o.particleCount,speed:o.speed,pixelSize:o.pixelSize,onTick:()=>d("tick",++y)}),d("ready"))}function x(){l==null||l(),l=null}return a.onMounted(()=>{o.autoPlay&&t()}),a.onUnmounted(()=>x()),a.watch(()=>[o.particleCount,o.speed,o.pixelSize,o.colors],()=>{l&&t()},{deep:!0}),f({start:t,stop:x}),(m,g)=>(a.openBlock(),a.createElementBlock("canvas",{ref_key:"canvasRef",ref:h,width:i.width,height:i.height,style:a.normalizeStyle({display:"block",background:i.background}),class:"pixel-flow"},null,12,k))}}),[["__scopeId","data-v-02bb9f54"]]),P={install(i){i.component("PixelFlow",w)}};c.PixelFlow=w,c.createPixelFlow=p,c.default=P,Object.defineProperties(c,{__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\ninterface Particle {\n x: number; y: number\n vx: number; vy: number\n color: string\n size: number\n alpha: number\n alphaDir: 1 | -1\n}\n\n/**\n * 创建像素粒子流动画。\n * @returns 停止函数，调用后取消动画循环。\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 // 在 null 检查之后重新赋值为非空类型，避免 TS18047 在嵌套函数中误报\n const maybeCtx = canvas.getContext('2d')\n if (!maybeCtx) throw new Error('[pixel-flow-vue] Cannot get 2D context')\n const ctx: CanvasRenderingContext2D = maybeCtx\n\n let rafId = 0\n let active = true\n\n /* ---- 粒子工厂 ---- */\n function spawn(): Particle {\n return {\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n vx: (Math.random() - 0.5) * speed * 2,\n vy: (Math.random() - 0.5) * speed * 2,\n color: colors[Math.floor(Math.random() * colors.length)],\n size: pixelSize * (0.4 + 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 }, spawn)\n\n /* ---- 更新 ---- */\n function update(p: Particle): void {\n p.x += p.vx * speed\n p.y += p.vy * speed\n if (p.x < 0 || p.x > canvas.width) p.vx *= -1\n if (p.y < 0 || p.y > canvas.height) p.vy *= -1\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 drawPixel(p: Particle): void {\n ctx.globalAlpha = p.alpha\n ctx.fillStyle = p.color\n ctx.fillRect(Math.round(p.x), Math.round(p.y), Math.round(p.size), Math.round(p.size))\n }\n\n /* ---- 连线 ---- */\n function drawLinks(): void {\n const MAX = 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 < MAX) {\n ctx.globalAlpha = (1 - dist / MAX) * 0.22\n ctx.strokeStyle = particles[i].color\n ctx.lineWidth = 0.7\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 (!active) return\n const { width: w, height: h } = canvas\n // 拖尾：半透明黑色蒙层\n ctx.globalAlpha = 0.15\n ctx.fillStyle = '#000'\n ctx.fillRect(0, 0, w, h)\n ctx.globalAlpha = 1\n\n for (const p of particles) { update(p); drawPixel(p) }\n drawLinks()\n\n onTick?.()\n rafId = requestAnimationFrame(loop)\n }\n\n loop()\n\n return function stop(): void {\n active = false\n cancelAnimationFrame(rafId)\n }\n}\n","<template>\n <canvas\n ref=\"canvasRef\"\n :width=\"width\"\n :height=\"height\"\n :style=\"{ display: 'block', background: background }\"\n class=\"pixel-flow\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch } from 'vue'\nimport { createPixelFlow } from '../core/pixelFlow'\nimport type { PixelFlowInstance } from '../types'\n\n// ---------- props ----------\ninterface Props {\n /** 画布宽度，默认 600 */\n width?: number\n /** 画布高度，默认 400 */\n height?: number\n /** 粒子颜色数组 */\n colors?: string[]\n /** 粒子数量，默认 120 */\n particleCount?: number\n /** 速度倍率，默认 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// ---------- emits ----------\nconst emit = defineEmits<{\n (e: 'ready'): void\n (e: 'tick', frame: number): void\n}>()\n\n// ---------- internal ----------\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nlet stopFn: (() => void) | null = null\nlet frameCount = 0\n\nfunction start(): void {\n if (!canvasRef.value) return\n stopFn?.()\n stopFn = createPixelFlow({\n canvas: canvasRef.value,\n colors: props.colors,\n particleCount: props.particleCount,\n speed: props.speed,\n pixelSize: props.pixelSize,\n onTick: () => emit('tick', ++frameCount),\n })\n emit('ready')\n}\n\nfunction stop(): void {\n stopFn?.()\n stopFn = null\n}\n\nonMounted(() => { if (props.autoPlay) start() })\nonUnmounted(() => stop())\n\n// 配置变化时热重启\nwatch(\n () => [props.particleCount, props.speed, props.pixelSize, props.colors] as const,\n () => { if (stopFn) start() },\n { deep: true },\n)\n\n// ---------- expose ----------\ndefineExpose<PixelFlowInstance>({ start, stop })\n</script>\n\n<style scoped>\n.pixel-flow { border-radius: 4px; }\n</style>\n","/**\n * pixel-flow-vue\n * Vue 3 + TypeScript canvas pixel-flow animation plugin\n */\nimport type { App } from 'vue'\nimport PixelFlow from './components/PixelFlow.vue'\nimport { createPixelFlow } from './core/pixelFlow'\n\nexport type { PixelFlowOptions, PixelFlowInstance } from './types'\nexport { PixelFlow, createPixelFlow }\n\n// ---------- Vue plugin ----------\nconst PixelFlowVue = {\n install(app: App): void {\n app.component('PixelFlow', PixelFlow)\n },\n}\n\nexport default PixelFlowVue\n"],"names":["createPixelFlow","options","canvas","colors","particleCount","speed","pixelSize","onTick","maybeCtx","ctx","rafId","active","spawn","particles","update","p","drawPixel","drawLinks","i","j","dx","dy","dist","loop","w","h","props","__props","emit","__emit","canvasRef","ref","stopFn","frameCount","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[data-v-02bb9f54]{border-radius:4px}
|