0.0.10

.github/workflows/check.yml

@@ -67,3 +67,11 @@ jobs:
           name: soft-skia-wasm
           path: |
             soft-skia-wasm/pkg
+
+      - name: Archive vue-playground in monorepo artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: vue-playground
+          path: |
+            vue-playground
+            !vue-playground/node_modules

.github/workflows/playground_without_softlink.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - '0\.*\.*'
   pull_request:
     branches:
       - main
@@ -34,7 +33,7 @@ jobs:
       - name: Archive vue-playground results
         uses: actions/upload-artifact@v3
         with:
-          name: vue-playground-use-latest
+          name: vue-playground-without-softlink
           path: |
             vue-playground
             !vue-playground/node_modules

soft-skia-wasm/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "soft-skia-wasm"
-version = "0.9.0"
+version = "0.10.0"
 authors = ["meloalright <[email protected]>"]
 edition = "2018"
 

soft-skia/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "soft_skia"
-version = "0.9.0"
+version = "0.10.0"
 edition = "2021"
 description="software rasterization skia binding"
 license = "MIT"

vue-playground/package-ci.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-playground",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,9 +12,9 @@
     "core-js": "^3.8.3",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
-    "vue": "3.3.4",
+    "vue": "^3.2.13",
     "vue-live": "^2.5.4",
-    "vue-skia": "0.0.9"
+    "vue-skia": "0.0.10"
   },
   "devDependencies": {
     "@types/node": "^20.5.0",

vue-skia-framework/launch.ts

@@ -8,12 +8,13 @@ const launch = function () {
         if (SSWInitialHelper.initialStatus === 0) {
             SSWInitialHelper.initialStatus = 1;
             const wasm = import("soft-skia-wasm/soft_skia_wasm.js");
-            wasm.then((ssw) => {
-                    window.ssw = ssw;
-                    while (SSWInitialHelper.initialSucceedCallbackQueue.length) {
-                        SSWInitialHelper.initialSucceedCallbackQueue.pop()();
-                    }
-                    resolve(void 0)
+            wasm.then(async (ssw) => {
+                await ssw.default();
+                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/package-publish.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-skia",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "files": [
     "lib",
     "type.d.ts",
@@ -13,6 +13,6 @@
   "main": "./main.js",
   "module": "./main.js",
   "dependencies": {
-    "soft-skia-wasm": "0.9.0"
+    "soft-skia-wasm": "0.10.0"
   }
 }

vue-skia-framework/plugin/index.ts

@@ -113,6 +113,7 @@ const VSKNode = (name: string) => {
                 (
                   parent as ComponentInternalInstanceWithSoftSkiaWASM
                 )._ssw_grouped?.(instance);
+                root._ssw_batchDraw?.()
             });
 
             onUpdated(() => {
@@ -123,6 +124,7 @@ const VSKNode = (name: string) => {
                 }
                 const core = root.ssw;
                 updateInstance(core, name, instance, attrs);
+                root._ssw_batchDraw?.()
             });
 
             /**

vue-skia-framework/surface/index.ts

@@ -33,27 +33,35 @@ export default {
         const ssw = window.ssw;
         const rootID = SelfIncreaseCount.count;
         const core = new ssw.SoftSkiaWASM(rootID);
+
+        let waitingForDraw = false;
+
         instance.ssw = core; // Save on component instance
         instance._ssw_id = rootID;
         core.setAttrBySerde(rootID, { attr: { R: { x: 0, y: 0, width: attrs.width, height: attrs.height, color: 'transparent', style: "fill" } } })
 
+        // batch draw func
+        function batchDraw() {
+            if (!waitingForDraw) {
+                waitingForDraw = true;
+                window.requestAnimationFrame(() => {
+                    const base64 = core.toBase64();
+                    container.value.setAttribute("src", base64);
+                    waitingForDraw = false;
+                });
+            }
+        }
+        instance._ssw_batchDraw = () => batchDraw();
 
         onMounted(() => {
-            const base64 = core.toBase64();
-            container.value.setAttribute("src", base64);
+            batchDraw();
         });
 
         onUpdated(() => {
-            const base64 = core.toBase64();
-            // console.log(core.toDebug?.())
-            container.value.setAttribute("src", base64);
+            batchDraw();
         });
 
-        onBeforeUnmount(() => {
-            // const instance = getCurrentInstance() as ComponentInternalInstanceWithSoftSkiaWASM;
-            // const core = instance.ssw;
-            // core.free();
-        });
+        onBeforeUnmount(() => {});
 
 
         return () => h('img', { ref: container }, slots.default?.());

vue-skia-framework/type.ts

@@ -7,6 +7,7 @@ export type ComponentInternalInstanceWithSoftSkiaWASM = ComponentInternalInstanc
     ssw: SoftSkiaWASM;
     _ssw_id: number;
     _ssw_grouped?: (instance: ComponentInternalInstanceWithSoftSkiaWASM) => void;
+    _ssw_batchDraw?: () => void;
 }
 
 declare global {