feat: add batch draw implement and draw call at vue skia surface and …

…plugin
rustq · Apr 24, 2024 · e767acf · e767acf
1 parent fccf8ea
commit e767acf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
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 {