From a7f1895f9678600a798b53fe7be2c9f07346c9cb Mon Sep 17 00:00:00 2001
From: MeloAlright <meloalright@gmail.com>
Date: Sat, 20 Apr 2024 23:04:25 +0800
Subject: [PATCH 1/4] Support :blur :grayscale :brighten :invert in v-image
 (#29)

---
 soft-skia-wasm/src/lib.rs                | 12 +++++++++
 soft-skia/Cargo.toml                     |  1 +
 soft-skia/src/shape.rs                   | 31 +++++++++++++++++++++++-
 vue-playground/src/App.vue               | 11 +++++++++
 vue-playground/src/code.ts               | 11 +++++++++
 vue-skia-framework/components/VImage.vue | 16 ++++++++++++
 vue-skia-framework/plugin/index.ts       |  4 +++
 7 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/soft-skia-wasm/src/lib.rs b/soft-skia-wasm/src/lib.rs
index 59c6213c..803b7afe 100644
--- a/soft-skia-wasm/src/lib.rs
+++ b/soft-skia-wasm/src/lib.rs
@@ -92,6 +92,10 @@ pub struct WASMImageAttr {
     y: i32,
     width: u32,
     height: u32,
+    blur: Option<f32>,
+    grayscale: Option<bool>,
+    brighten: Option<i32>,
+    invert: Option<bool>,
 }
 
 #[derive(Serialize, Deserialize, Debug)]
@@ -385,6 +389,10 @@ impl SoftSkiaWASM {
                 image,
                 width,
                 height,
+                blur,
+                grayscale,
+                brighten,
+                invert,
             }) => self.0.set_shape_to_child(
                 id,
                 Shapes::I(Image {
@@ -393,6 +401,10 @@ impl SoftSkiaWASM {
                     y,
                     width,
                     height,
+                    blur,
+                    grayscale,
+                    brighten,
+                    invert,
                 }),
             ),
             WASMShapesAttr::T(WASMTextAttr {
diff --git a/soft-skia/Cargo.toml b/soft-skia/Cargo.toml
index 4bd3a250..cd0a3e25 100644
--- a/soft-skia/Cargo.toml
+++ b/soft-skia/Cargo.toml
@@ -12,6 +12,7 @@ png = "0.17.5"
 tiny-skia = "0.10.0"
 base64 = "0.21.0"
 fontdue = "0.7.3"
+image = "0.25.1"
 
 [dependencies.web-sys]
 version = "0.3"
diff --git a/soft-skia/src/shape.rs b/soft-skia/src/shape.rs
index c090842b..b6abe9d2 100644
--- a/soft-skia/src/shape.rs
+++ b/soft-skia/src/shape.rs
@@ -7,6 +7,8 @@ use fontdue::{
 use std::iter::zip;
 pub use tiny_skia::{ColorU8, FillRule, Mask, Paint, PathBuilder, Pixmap, Stroke, Transform};
 use tiny_skia::{LineCap, LineJoin, Path, PixmapPaint};
+use image::io::Reader as ImageReader;
+use std::io::Cursor;
 
 #[derive(Debug)]
 pub enum Shapes {
@@ -112,6 +114,10 @@ pub struct Image {
     pub y: i32,
     pub width: u32,
     pub height: u32,
+    pub blur: Option<f32>,
+    pub grayscale: Option<bool>,
+    pub brighten: Option<i32>,
+    pub invert: Option<bool>,
 }
 
 #[derive(Debug)]
@@ -509,7 +515,30 @@ impl Shape for Image {
 
     fn draw(&self, pixmap: &mut Pixmap, context: &DrawContext) -> () {
         let u8_array = base64::decode(&self.image).expect("base64 decode failed");
-        let p = Pixmap::decode_png(&u8_array).expect("decode png failed");
+        let mut bytes: Vec<u8> = Vec::new();
+
+        let mut img = ImageReader::new(Cursor::new(&u8_array as &[u8])).with_guessed_format().unwrap().decode().unwrap();
+
+        if let Some(blur) = self.blur {
+            img = img.blur(blur);
+        }
+        if let Some(grayscale) = self.grayscale {
+            if grayscale {
+                img = img.grayscale();
+            }
+        }
+        if let Some(brighten) = self.brighten {
+            img = img.brighten(brighten);
+        }
+        if let Some(invert) = self.invert {
+            if invert {
+                img.invert();
+            }
+        }
+
+        img.write_to(&mut Cursor::new(&mut bytes), image::ImageFormat::Png).unwrap();
+
+        let p = Pixmap::decode_png(&bytes).expect("decode png failed");
         let scale_x = self.width as f32 / p.width() as f32;
         let scale_y = self.height as f32 / p.height() as f32;
         pixmap.draw_pixmap(
diff --git a/vue-playground/src/App.vue b/vue-playground/src/App.vue
index 9fe3f5c3..4816f666 100644
--- a/vue-playground/src/App.vue
+++ b/vue-playground/src/App.vue
@@ -73,6 +73,17 @@
           :style="'fill'"
         >
         </v-rect>
+        <v-image
+          :x="30"
+          :y="40"
+          :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+          :width="70"
+          :height="70"
+          v-bind:blur="10"
+          :grayscale="false"
+          :brighten="40"
+          :invert="false"
+        ></v-image>
         <v-image
           :x="0"
           :y="0"
diff --git a/vue-playground/src/code.ts b/vue-playground/src/code.ts
index 53f23d48..73d79583 100644
--- a/vue-playground/src/code.ts
+++ b/vue-playground/src/code.ts
@@ -15,6 +15,17 @@ export default `<v-surface :width="360" :height="360">
     [98, 90],
     [138, 10],
   ]" :style="'fill'" :strokeWidth="1" :color="'rgba(200, 255, 0, 0.7)'" />
+  <v-image
+    :x="30"
+    :y="40"
+    :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+    :width="70"
+    :height="70"
+    v-bind:blur="10"
+    :grayscale="false"
+    :brighten="40"
+    :invert="false"
+  ></v-image>
   <v-image
     :x="0"
     :y="0"
diff --git a/vue-skia-framework/components/VImage.vue b/vue-skia-framework/components/VImage.vue
index c172b7c2..0cabe962 100644
--- a/vue-skia-framework/components/VImage.vue
+++ b/vue-skia-framework/components/VImage.vue
@@ -34,6 +34,22 @@ export default defineComponent({
     height: {
       type: Number as PropType<number>,
       required: true,
+    },
+    blur: {
+      type: Number as PropType<number>,
+      required: false,
+    },
+    grayscale: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+    },
+    brighten: {
+      type: Number as PropType<number>,
+      required: false,
+    },
+    invert: {
+      type: Boolean as PropType<boolean>,
+      required: false,
     }
   },
   methods: {
diff --git a/vue-skia-framework/plugin/index.ts b/vue-skia-framework/plugin/index.ts
index 5b891f78..6113218c 100644
--- a/vue-skia-framework/plugin/index.ts
+++ b/vue-skia-framework/plugin/index.ts
@@ -170,6 +170,10 @@ const VSKNode = (name: string) => {
                         y: attrs.y,
                         width: attrs.width,
                         height: attrs.height,
+                        blur: attrs.blur,
+                        grayscale: attrs.grayscale,
+                        brighten: attrs.brighten,
+                        invert: attrs.invert,
                       },
                     },
                   });

From 79f483b1d826061a93cbacc5962bc9c7f66bb14c Mon Sep 17 00:00:00 2001
From: meloalright <meloalright@gmail.com>
Date: Sun, 21 Apr 2024 01:57:45 +0800
Subject: [PATCH 2/4] fix: v-image props into v-sk-image

---
 vue-skia-framework/components/VImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-skia-framework/components/VImage.vue b/vue-skia-framework/components/VImage.vue
index 0cabe962..56ad672e 100644
--- a/vue-skia-framework/components/VImage.vue
+++ b/vue-skia-framework/components/VImage.vue
@@ -1,5 +1,5 @@
 <template >
-  <v-sk-image v-if="loaded" :image="base64String" :x="x" :y="y" :width="width" :height="height" />
+  <v-sk-image v-if="loaded" :image="base64String" :x="x" :y="y" :width="width" :height="height" :blur="blur" :grayscale="grayscale" :brighten="brighten" :invert="invert" />
 </template>
 
 <script lang="ts">

From 3df61d4892acabbb2830bc33b61c26904c8fffb9 Mon Sep 17 00:00:00 2001
From: meloalright <meloalright@gmail.com>
Date: Sun, 21 Apr 2024 01:58:18 +0800
Subject: [PATCH 3/4] chore: optimize doc and ci

---
 .github/workflows/ci.yml                |  9 ++++-----
 README.md                               | 12 ++++++++++--
 package.json                            |  7 +------
 soft-skia-wasm/Cargo.toml               |  2 +-
 soft-skia/Cargo.toml                    |  2 +-
 vue-playground/package-ci.json          |  2 +-
 vue-skia-framework/package-publish.json |  4 ++--
 7 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 16fdc6da..6ce4be6e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -33,21 +33,20 @@ jobs:
       - name: soft-skia-wasm
         run: |
           cargo install wasm-pack
-          pnpm run build:wasm
+          cd soft-skia-wasm
+          wasm-pack build --release --target web
 
       - name: vue-skia-framework
         run: |
           cd vue-skia-framework
           pnpm i
-          cd ..
-          pnpm run build:vue
+          pnpm run build
 
       - name: vue-playground
         run: |
           cd vue-playground
           pnpm i
-          cd ..
-          pnpm --filter vue-playground build
+          pnpm run build
 
       - name: Archive vue-skia-framework artifacts
         uses: actions/upload-artifact@v3
diff --git a/README.md b/README.md
index 23b36ffb..c069f348 100644
--- a/README.md
+++ b/README.md
@@ -105,8 +105,16 @@ $ wasm-pack build --release --target web
 
 ```shell
 $ cd vue-skia-framework
-$ npm i
-$ npm run build
+$ pnpm i
+$ pnpm run build
+```
+
+#### Vue Playground Development
+
+```shell
+$ cd vue-playground
+$ pnpm i
+$ pnpm run serve
 ```
 
 ## License
diff --git a/package.json b/package.json
index b863eea5..ce3d229b 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,6 @@
   "name": "monorepo",
   "version": "0.1.0",
   "private": "true",
-  "scripts": {
-    "serve": "pnpm --filter vue-playground serve",
-    "build": "pnpm build:wasm && pnpm build:vue",
-    "build:vue": "pnpm --filter vue-skia build",
-    "build:wasm": "cd soft-skia-wasm && wasm-pack build"
-  },
+  "scripts": {},
   "packageManager": "pnpm@7.32.0"
 }
diff --git a/soft-skia-wasm/Cargo.toml b/soft-skia-wasm/Cargo.toml
index e8934550..31af4967 100644
--- a/soft-skia-wasm/Cargo.toml
+++ b/soft-skia-wasm/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "soft-skia-wasm"
-version = "0.8.0"
+version = "0.9.0"
 authors = ["meloalright <meloalright@gmail.com>"]
 edition = "2018"
 
diff --git a/soft-skia/Cargo.toml b/soft-skia/Cargo.toml
index cd0a3e25..54b86557 100644
--- a/soft-skia/Cargo.toml
+++ b/soft-skia/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "soft_skia"
-version = "0.8.0"
+version = "0.9.0"
 edition = "2021"
 description="software rasterization skia binding"
 license = "MIT"
diff --git a/vue-playground/package-ci.json b/vue-playground/package-ci.json
index 00d3eb57..a2224e46 100644
--- a/vue-playground/package-ci.json
+++ b/vue-playground/package-ci.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-playground",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/vue-skia-framework/package-publish.json b/vue-skia-framework/package-publish.json
index 91e245c0..5cbcf47a 100644
--- a/vue-skia-framework/package-publish.json
+++ b/vue-skia-framework/package-publish.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-skia",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "files": [
     "lib",
     "type.d.ts",
@@ -13,6 +13,6 @@
   "main": "./main.js",
   "module": "./main.js",
   "dependencies": {
-    "soft-skia-wasm": "0.8.0"
+    "soft-skia-wasm": "0.9.0"
   }
 }

From 6ed449e2ee352e8505ee09ccd9dcec49541350a0 Mon Sep 17 00:00:00 2001
From: meloalright <meloalright@gmail.com>
Date: Sun, 21 Apr 2024 02:20:52 +0800
Subject: [PATCH 4/4] feat: lock ci version of vue skia

---
 vue-playground/package-ci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-playground/package-ci.json b/vue-playground/package-ci.json
index a2224e46..439246a3 100644
--- a/vue-playground/package-ci.json
+++ b/vue-playground/package-ci.json
@@ -14,7 +14,7 @@
     "prismjs": "^1.29.0",
     "vue": "^3.2.13",
     "vue-live": "^2.5.4",
-    "vue-skia": "latest"
+    "vue-skia": "0.0.9"
   },
   "devDependencies": {
     "@types/node": "^20.5.0",