feat: stop performance drain when hiding live2d

Author: WRXinYue

app/Live2DApp.ts

@@ -25,6 +25,7 @@ export class Live2DApp {
   private static _showHitAreaFrames = false
   private static _showModelFrame = false
   private static _showStats = false
+  private static _cachedModel: Live2DModel | null = null
 
   static async init(options: Live2dOptions, live2dTipsHandler: Live2dTipsHandler) {
     settings.RENDER_OPTIONS.hello = !options.skipHello
@@ -183,6 +184,32 @@ export class Live2DApp {
     }, 100)
   }
 
+  static hideModel() {
+    if (this.model?.live2dModel) {
+      this._cachedModel = this.model.live2dModel
+      this.pixiApp.stage.removeChild(this.model.live2dModel)
+    }
+  }
+
+  static async showModel() {
+    if (this._cachedModel && !this.pixiApp.stage.children.includes(this._cachedModel)) {
+      this.pixiApp.stage.addChild(this._cachedModel)
+    }
+  }
+
+  static async destroyModel() {
+    this.clearAppStage()
+     
+    if (this.model) {
+      this.model.destroy()
+      this.model = null
+    }
+  }
+
+  static async restoreModel(source: string | ModelSettings) {
+    await this.loadModel(source);
+  }
+
   @save('stats')
   static set showStats(value: boolean) {
     this._showStats = value

client/composable.ts

@@ -1,6 +1,6 @@
 import type { Live2DApp as Live2DAppType } from '../app/Live2DApp'
-import { isClient, useWindowSize } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { isClient, useWindowSize, useTimeoutFn, createSharedComposable } from '@vueuse/core'
+import { ref, watch, onUnmounted } from 'vue'
 import { Live2dTipsHandler } from '../helpers/tips'
 import { hideLive2dTool, showLive2dTool } from '../utils/animate'
 import { getCookie, setCookie } from '../utils/cookie'
@@ -9,20 +9,15 @@ import { convertJsdelivrUrlToGithubApiUrl, getFilenamesFromGitHub } from '../uti
 import { getLive2DModel, setLive2DModelKeys } from '../utils/storage'
 import { useAddonLive2dConfig } from './options'
 
-let isInitialized = false
-const live2DApp = ref<typeof Live2DAppType>()
-const isLive2DHide = ref(false)
-
-export function useAddonLive2d() {
+export const useAddonLive2d = createSharedComposable(() => {
   const live2dOptions = useAddonLive2dConfig()
   const { randomCharacter, randomSkin, live2DCollection, live2dTips, hideOnScreenSizes, defaultVisibility, cookieExpires } = live2dOptions.value
   const { width } = useWindowSize()
-
+  const live2DApp = ref<typeof Live2DAppType>()
+  const isLive2DHide = ref(false)
   const live2dTipsHandler = new Live2dTipsHandler(live2dTips!)
-
+  
   async function _initializeLive2DApp() {
-    isInitialized = true
-
     await import('../lib/index.js')
     live2DApp.value = (await import('../app/Live2DApp')).Live2DApp
 
@@ -141,28 +136,39 @@ export function useAddonLive2d() {
     live2DApp.value?.captureFrame()
   }
 
+  const { start: startHideModel, stop: stopHideModel } = useTimeoutFn(
+    () => live2DApp.value?.hideModel(),
+    2000,
+    { immediate: false }
+  )
+
   function hideLive2D() {
     isLive2DHide.value = true
-
     hideLive2dTool()
 
     const live2dElement = document.getElementById('live2d')!
     // localStorage.setItem('live2d-display', Date.now().toString())
     live2dTipsHandler.showMessage(live2dTips!.tool.display, 2000, 11)
     live2dElement.style.bottom = '-100%'
 
+    stopHideModel()
+    startHideModel()
+
     setTimeout(() => {
       setCookie('live2d', 'Hide', cookieExpires)
     }, 0)
   }
 
   function showLive2D() {
     isLive2DHide.value = false
-
     showLive2dTool()
 
     const live2dElement = document.getElementById('live2d')!
     live2dElement.style.bottom = '0px'
+
+    stopHideModel()
+    live2DApp.value?.showModel()
+
     setTimeout(() => {
       // localStorage.removeItem('live2d-display')
       live2dElement.style.display = ''
@@ -172,7 +178,14 @@ export function useAddonLive2d() {
 
   const toggleLive2DVisibility = () => isLive2DHide.value ? showLive2D() : hideLive2D()
 
-  if (isClient && !isInitialized)
+  onUnmounted(() => {
+    if (live2DApp.value) {
+      live2DApp.value.destroyModel()
+      live2DApp.value = undefined
+    }
+  })
+
+  if (isClient)
     _initializeLive2DApp()
 
   return {
@@ -190,4 +203,4 @@ export function useAddonLive2d() {
     isLive2DHide,
     live2dTipsHandler,
   }
-}
+})