pixel-flow-vue 1.0.3 → 1.0.5

package/README.md

@@ -12,7 +12,7 @@
 ## 安装
 
 ```bash
-npm install pixel-flow
+npm install pixel-flow-vue
 ```
 
 ## 快速开始
@@ -23,9 +23,9 @@ npm install pixel-flow
 
 ```javascript
 import { createApp } from 'vue'
-import PixelFlow from 'pixel-flow'
+import PixelFlow from 'pixel-flow-vue'
 import App from './App.vue'
-
+```,old_str:
 const app = createApp(App)
 app.use(PixelFlow)
 app.mount('#app')
@@ -86,7 +86,7 @@ const heartData = [
 在子组件中获取当前的渲染配置。
 
 ```javascript
-import { usePixelFlow } from 'pixel-flow'
+import { usePixelFlow } from 'pixel-flow-vue'
 
 const { config, updateConfig } = usePixelFlow()
 console.log(config.value.pixelSize)

package/dist/pixel-flow-vue.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.PixelFlowVue={},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

@@ -1,6 +1,6 @@
 {
   "name": "pixel-flow-vue",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A Vue-based pixel flow library",
   "type": "module",
   "main": "./dist/pixel-flow-vue.umd.cjs",

package/dist/pixel-flow.umd.cjs

@@ -1 +0,0 @@
-(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});