Add batch draw call in vue skia node update (#34)

* chore: recover the lock at package ci * feat: add batch draw implement and draw call at vue skia surface and plugin * feat: update launch func of vue skia framework * test: vue playground without softlink use 0.0.10-dev.3 vue-skia * feat: upd check yml of workflow * Revert "test: vue playground without softlink use 0.0.10-dev.3 vue-skia" This reverts commit f5abcb9. * feat: upd vue-playground-without-softlink artifact
rustq · Apr 27, 2024 · 67bd8dc · 67bd8dc
1 parent 821b60a
commit 67bd8dc
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 18 deletions.
diff --git a/.github/workflows/check.yml b/.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
diff --git a/.github/workflows/playground_without_softlink.yml b/.github/workflows/playground_without_softlink.yml
@@ -34,7 +34,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
diff --git a/vue-playground/package-ci.json b/vue-playground/package-ci.json
@@ -12,7 +12,7 @@
     "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"
   },

diff --git a/vue-skia-framework/launch.ts b/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));

diff --git a/vue-skia-framework/plugin/index.ts b/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?.()
             });
 
             /**

diff --git a/vue-skia-framework/surface/index.ts b/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?.());

diff --git a/vue-skia-framework/type.ts b/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 {