pixel-flow-vue 1.0.2

package/README.md

@@ -0,0 +1,110 @@
+# Pixel Flow
+
+一个基于 Vue 3 的轻量级像素风渲染组件库。通过简单的颜色数组和配置，即可在 Web 页面上渲染出精美的像素艺术。
+
+## 特性
+
+- 🚀 **基于 Vue 3**: 充分利用组合式 API 和响应式系统。
+- 🎨 **Canvas 渲染**: 使用 Canvas API 确保高性能渲染，支持大规模像素点。
+- 🛠️ **高度可定制**: 轻松控制像素大小、间隙和颜色。
+- 📦 **轻量级**: 零外部依赖（除 Vue 外）。
+
+## 安装
+
+```bash
+npm install pixel-flow
+```
+
+## 快速开始
+
+### 1. 全局注册
+
+在 `main.js` 中引入并安装：
+
+```javascript
+import { createApp } from 'vue'
+import PixelFlow from 'pixel-flow'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(PixelFlow)
+app.mount('#app')
+```
+
+### 2. 基础使用
+
+在组件中使用 `PixelProvider` 和 `PixelRenderer`：
+
+```vue
+<script setup>
+const heartData = [
+  'transparent', 'red', 'red', 'transparent', 'red', 'red', 'transparent',
+  'red', 'red', 'red', 'red', 'red', 'red', 'red',
+  'red', 'red', 'red', 'red', 'red', 'red', 'red',
+  'transparent', 'red', 'red', 'red', 'red', 'red', 'transparent',
+  'transparent', 'transparent', 'red', 'red', 'red', 'transparent', 'transparent',
+  'transparent', 'transparent', 'transparent', 'red', 'transparent', 'transparent', 'transparent',
+];
+</script>
+
+<template>
+  <PixelProvider :pixel-size="20" :gap="2">
+    <PixelRenderer 
+      :data="heartData" 
+      :width="7" 
+      :height="6" 
+    />
+  </PixelProvider>
+</template>
+```
+
+## 组件 API
+
+### PixelProvider
+
+提供渲染上下文的容器组件。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `pixel-size` | `Number` | `10` | 单个像素点的大小（单位：px） |
+| `gap` | `Number` | `1` | 像素点之间的间隙（单位：px） |
+
+### PixelRenderer
+
+核心渲染组件。
+
+| 属性 | 类型 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `data` | `Array \| Object` | 是 | 像素颜色数组或包含 `pixels` 的对象 |
+| `width` | `Number` | 是 | 像素矩阵的宽度 |
+| `height` | `Number` | 是 | 像素矩阵的高度 |
+
+## 组合式 API
+
+### usePixelFlow
+
+在子组件中获取当前的渲染配置。
+
+```javascript
+import { usePixelFlow } from 'pixel-flow'
+
+const { config, updateConfig } = usePixelFlow()
+console.log(config.value.pixelSize)
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器（查看示例）
+npm run dev
+
+# 打包构建
+npm run build
+```
+
+## 许可证
+
+ISC License

package/dist/pixel-flow.css

@@ -0,0 +1,2 @@
+.pixel-provider[data-v-5cb8bb32]{display:contents}.pixel-renderer[data-v-4cb25cf9]{line-height:0;display:inline-block}
+/*$vite$:1*/

package/dist/pixel-flow.js

@@ -0,0 +1,101 @@
+import { createElementBlock as e, createElementVNode as t, inject as n, onMounted as r, openBlock as i, provide as a, ref as o, renderSlot as s, watch as c } from "vue";
+//#region src/composables/usePixelFlow.js
+var l = Symbol("PixelFlow");
+function u(e = {}) {
+	let t = o({
+		pixelSize: 10,
+		gap: 1,
+		...e
+	}), n = (e) => {
+		t.value = {
+			...t.value,
+			...e
+		};
+	};
+	return a(l, {
+		config: t,
+		updateConfig: n
+	}), {
+		config: t,
+		updateConfig: n
+	};
+}
+function d() {
+	let e = n(l);
+	if (!e) throw Error("usePixelFlow must be used within a PixelProvider");
+	return e;
+}
+//#endregion
+//#region \0plugin-vue:export-helper
+var f = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, p = { class: "pixel-provider" }, m = /*#__PURE__*/ f({
+	__name: "PixelProvider",
+	props: {
+		pixelSize: {
+			type: Number,
+			default: 10
+		},
+		gap: {
+			type: Number,
+			default: 1
+		}
+	},
+	setup(t) {
+		let n = t;
+		return u({
+			pixelSize: n.pixelSize,
+			gap: n.gap
+		}), (t, n) => (i(), e("div", p, [s(t.$slots, "default", {}, void 0, !0)]));
+	}
+}, [["__scopeId", "data-v-5cb8bb32"]]);
+//#endregion
+//#region src/utils/resolver.js
+function h(e) {
+	return Array.isArray(e) ? e : e && typeof e == "object" && e.pixels ? e.pixels : [];
+}
+//#endregion
+//#region src/components/PixelRenderer.vue
+var g = { class: "pixel-renderer" }, _ = /*#__PURE__*/ f({
+	__name: "PixelRenderer",
+	props: {
+		data: {
+			type: [Array, Object],
+			required: !0
+		},
+		width: {
+			type: Number,
+			required: !0
+		},
+		height: {
+			type: Number,
+			required: !0
+		}
+	},
+	setup(n) {
+		let a = n, s = o(null), { config: l } = d(), u = () => {
+			let e = s.value;
+			if (!e) return;
+			let t = e.getContext("2d"), n = h(a.data), { pixelSize: r, gap: i } = l.value;
+			e.width = a.width * (r + i), e.height = a.height * (r + i), t.clearRect(0, 0, e.width, e.height);
+			for (let e = 0; e < a.height; e++) for (let o = 0; o < a.width; o++) {
+				let s = n[e * a.width + o] || "transparent";
+				s !== "transparent" && (t.fillStyle = s, t.fillRect(o * (r + i), e * (r + i), r, r));
+			}
+		};
+		return r(() => {
+			u();
+		}), c([() => a.data, l], () => {
+			u();
+		}, { deep: !0 }), (n, r) => (i(), e("div", g, [t("canvas", {
+			ref_key: "canvasRef",
+			ref: s
+		}, null, 512)]));
+	}
+}, [["__scopeId", "data-v-4cb25cf9"]]), v = { install(e) {
+	e.component("PixelProvider", m), e.component("PixelRenderer", _);
+} };
+//#endregion
+export { m as PixelProvider, _ as PixelRenderer, v as default, h as resolvePixelData, d as usePixelFlow };

package/dist/pixel-flow.umd.cjs

@@ -0,0 +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.PixelFlow={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Symbol(`PixelFlow`);function r(e={}){let r=(0,t.ref)({pixelSize:10,gap:1,...e}),i=e=>{r.value={...r.value,...e}};return(0,t.provide)(n,{config:r,updateConfig:i}),{config:r,updateConfig:i}}function i(){let e=(0,t.inject)(n);if(!e)throw Error(`usePixelFlow must be used within a PixelProvider`);return e}var a=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},o={class:`pixel-provider`},s=a({__name:`PixelProvider`,props:{pixelSize:{type:Number,default:10},gap:{type:Number,default:1}},setup(e){let n=e;return r({pixelSize:n.pixelSize,gap:n.gap}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,o,[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)]))}},[[`__scopeId`,`data-v-5cb8bb32`]]);function c(e){return Array.isArray(e)?e:e&&typeof e==`object`&&e.pixels?e.pixels:[]}var l={class:`pixel-renderer`},u=a({__name:`PixelRenderer`,props:{data:{type:[Array,Object],required:!0},width:{type:Number,required:!0},height:{type:Number,required:!0}},setup(e){let n=e,r=(0,t.ref)(null),{config:a}=i(),o=()=>{let e=r.value;if(!e)return;let t=e.getContext(`2d`),i=c(n.data),{pixelSize:o,gap:s}=a.value;e.width=n.width*(o+s),e.height=n.height*(o+s),t.clearRect(0,0,e.width,e.height);for(let e=0;e<n.height;e++)for(let r=0;r<n.width;r++){let a=i[e*n.width+r]||`transparent`;a!==`transparent`&&(t.fillStyle=a,t.fillRect(r*(o+s),e*(o+s),o,o))}};return(0,t.onMounted)(()=>{o()}),(0,t.watch)([()=>n.data,a],()=>{o()},{deep:!0}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,l,[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:r},null,512)]))}},[[`__scopeId`,`data-v-4cb25cf9`]]);e.PixelProvider=s,e.PixelRenderer=u,e.default={install(e){e.component(`PixelProvider`,s),e.component(`PixelRenderer`,u)}},e.resolvePixelData=c,e.usePixelFlow=i});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "pixel-flow-vue",
+  "version": "1.0.2",
+  "description": "A Vue-based pixel flow library",
+  "type": "module",
+  "main": "./dist/pixel-flow-vue.umd.cjs",
+  "module": "./dist/pixel-flow-vue.js",
+  "exports": {
+    ".": {
+      "import": "./dist/pixel-flow-vue.js",
+      "require": "./dist/pixel-flow-vue.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "vue": "^3.5.35"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "vite": "^8.0.16"
+  },
+  "keywords": [
+    "vue",
+    "pixel",
+    "canvas",
+    "renderer",
+    "pixel-art"
+  ],
+  "author": "",
+  "license": "ISC"
+}