From 09cae5347174c1152911c9ce71ce8cf9570c7192 Mon Sep 17 00:00:00 2001 From: MeloAlright Date: Sat, 27 Apr 2024 11:32:49 +0800 Subject: [PATCH] 0.0.10 (#35) * 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 f5abcb927a4cf81791901c7a545bdfec66e7f696. * feat: upd vue-playground-without-softlink artifact * feat: upd version 0.0.10 * feat: playground without softlink ci should only pr or push --- .github/workflows/check.yml | 8 ++++++ .../workflows/playground_without_softlink.yml | 3 +- soft-skia-wasm/Cargo.toml | 2 +- soft-skia/Cargo.toml | 2 +- vue-playground/package-ci.json | 6 ++-- vue-skia-framework/launch.ts | 13 +++++---- vue-skia-framework/package-publish.json | 4 +-- vue-skia-framework/plugin/index.ts | 2 ++ vue-skia-framework/surface/index.ts | 28 ++++++++++++------- vue-skia-framework/type.ts | 1 + 10 files changed, 44 insertions(+), 25 deletions(-) diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml index 280b6c64..d9058778 100644 --- 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 index d21c9bb2..f5dd3234 100644 --- a/.github/workflows/playground_without_softlink.yml +++ b/.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 \ No newline at end of file diff --git a/soft-skia-wasm/Cargo.toml b/soft-skia-wasm/Cargo.toml index 31af4967..b807e790 100644 --- a/soft-skia-wasm/Cargo.toml +++ b/soft-skia-wasm/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "soft-skia-wasm" -version = "0.9.0" +version = "0.10.0" authors = ["meloalright "] edition = "2018" diff --git a/soft-skia/Cargo.toml b/soft-skia/Cargo.toml index 54b86557..a86ac3ea 100644 --- a/soft-skia/Cargo.toml +++ b/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" diff --git a/vue-playground/package-ci.json b/vue-playground/package-ci.json index 7d41accc..bb335d45 100644 --- a/vue-playground/package-ci.json +++ b/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", diff --git a/vue-skia-framework/launch.ts b/vue-skia-framework/launch.ts index 4039f8c7..7572f865 100644 --- 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/package-publish.json b/vue-skia-framework/package-publish.json index 5cbcf47a..d84da169 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.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" } } diff --git a/vue-skia-framework/plugin/index.ts b/vue-skia-framework/plugin/index.ts index 6113218c..8e3182b7 100644 --- 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 index 1220893f..419847c5 100644 --- 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 index 36a5c165..82a975a2 100644 --- 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 {