feat: v text support maxWidth

package.json

@@ -3,7 +3,10 @@
   "version": "0.1.0",
   "private": "true",
   "scripts": {
-    "serve": "pnpm -C vue-playground serve"
+    "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"
   },
   "packageManager": "pnpm@7.32.0"
 }

soft-skia-wasm/src/lib.rs

@@ -100,7 +100,8 @@ pub struct WASMTextAttr {
     x: i32,
     y: i32,
     font_size: Option<f32>,
-    color: Option<String>
+    color: Option<String>,
+    max_width: Option<f32>,
 }
 
 
@@ -294,11 +295,12 @@ impl SoftSkiaWASM {
                 y,
                 text,
                 font_size,
-                color
+                color,
+                max_width,
             }) => {
                 let color = parse_color(color);
                 let font_size = font_size.unwrap_or(16.0);
-                self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size, color }))
+                self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size, color, max_width }))
             }
         };
     }

soft-skia/Cargo.toml

@@ -11,4 +11,10 @@ license = "MIT"
 png = "0.17.5"
 tiny-skia = "0.10.0"
 base64 = "0.21.0"
-fontdue = "0.7.3"
+fontdue = "0.7.3"
+
+[dependencies.web-sys]
+version = "0.3"
+features = [
+  "console",
+]

soft-skia/src/lib.rs

@@ -1,4 +1,5 @@
 pub mod tree;
 pub mod shape;
 pub mod instance;
-pub mod provider;
+pub mod provider;
+mod util;

soft-skia/src/shape.rs

@@ -5,6 +5,8 @@ pub use tiny_skia::{ColorU8, FillRule, Mask, Paint, PathBuilder, Pixmap, Stroke,
 use tiny_skia::{LineCap, LineJoin, Path, PixmapPaint};
 use std::iter::zip;
 
+use crate::log;
+
 #[derive(Debug)]
 pub enum Shapes {
     R(Rect),
@@ -118,6 +120,7 @@ pub struct Text {
     pub y: i32,
     pub font_size: f32,
     pub color: Option<ColorU8>,
+    pub max_width: Option<f32>,
 }
 
 impl Shapes {
@@ -541,6 +544,7 @@ impl Shape for Text {
         let fonts = &[roboto_regular];
         let mut layout = Layout::new(CoordinateSystem::PositiveYDown);
         layout.reset(&LayoutSettings {
+            max_width: self.max_width,
             ..LayoutSettings::default()
         });
         layout.append(fonts, &TextStyle::new(&self.text, self.font_size, 0));
@@ -571,6 +575,10 @@ impl Shape for Text {
         }
         let mut rgba_bitmap:Vec<u8> = vec![];
         for i in 0..bitmap.len() {
+            if bitmap[i] == 0 {
+                rgba_bitmap.extend([0, 0, 0, 0].iter());
+                continue;
+            }
             if let Some(color) = self.color {
                 rgba_bitmap.extend([color.red(), color.green(), color.blue(), bitmap[i]].iter());
             } else {
@@ -587,7 +595,6 @@ impl Shape for Text {
             Transform::from_row(1.0, 0.0, 0.0, 1.0, 0.0, 0.0),
             None,
         );
-
     }
 }
 

soft-skia/src/util.rs

@@ -0,0 +1,9 @@
+extern crate web_sys;
+
+// A macro to provide `println!(..)`-style syntax for `console.log` logging.
+#[macro_export]
+macro_rules! log {
+    ( $( $t:tt )* ) => {
+        web_sys::console::log_1(&format!( $( $t )* ).into());
+    }
+}

vue-playground/src/code.ts

@@ -28,7 +28,7 @@ export default `<v-surface :width="360" :height="360">
     </template>
     <v-circle :cx="0" :cy="60" :r="50" :style="'fill'" />
     <v-circle :cx="0" :cy="60" :r="70" />
-    <v-text :x="70" :y="0" :fontSize="16" color="red" text="Hello"></v-text>
+    <v-text :x="70" :y="0" :fontSize="16" color="red" text="Hello World!" :maxWidth="50"></v-text>
   </v-group>
 </v-surface>
 `;

vue-skia-framework/components/VText.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sk-text :text="text" :x="x" :y="y" :fontSize="fontSize" :color="color" />
+  <v-sk-text :text="text" :x="x" :y="y" :fontSize="fontSize" :color="color" :maxWidth="maxWidth"/>
 </template>
 
 <script lang="ts">
@@ -27,6 +27,10 @@ export default defineComponent({
     color: {
       type: String as PropType<string>,
       required: false
+    },
+    maxWidth: {
+      type: Number as PropType<number>,
+      required: false
     }
   }
 });

vue-skia-framework/launch.ts

@@ -9,13 +9,11 @@ const launch = function () {
             SSWInitialHelper.initialStatus = 1;
             const wasm = import("soft-skia-wasm/soft_skia_wasm.js");
             wasm.then((ssw) => {
-                ssw.default().then(() => {
                     window.ssw = ssw;
                     while (SSWInitialHelper.initialSucceedCallbackQueue.length) {
                         SSWInitialHelper.initialSucceedCallbackQueue.pop()();
                     }
                     resolve(void 0)
-                })
             })
         } else if (SSWInitialHelper.initialStatus === 1) {
             SSWInitialHelper.initialSucceedCallbackQueue.push(() => resolve(void 0));

vue-skia-framework/plugin/index.ts

@@ -183,6 +183,7 @@ const VSKNode = (name: string) => {
                         y: attrs.y,
                         font_size: attrs.fontSize,
                         color: attrs.color,
+                        max_width: attrs.maxWidth,
                       },
                     },
                   });