From dc8f44794873617aa22f03f396b0813273c096bb Mon Sep 17 00:00:00 2001
From: "Mr.Mao" <951416545@qq.com>
Date: Fri, 8 Nov 2024 11:01:20 +0800
Subject: [PATCH] fix: transferControlToOffscreen cannot set properties of
 undefined

---
 .../src/components/application/index.ts          | 16 +++++++++++-----
 packages/vue3-pixi/src/composables/useScreen.ts  |  4 +++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/vue3-pixi/src/components/application/index.ts b/packages/vue3-pixi/src/components/application/index.ts
index 7ce401f..6e046a4 100644
--- a/packages/vue3-pixi/src/components/application/index.ts
+++ b/packages/vue3-pixi/src/components/application/index.ts
@@ -43,13 +43,12 @@ export const Application = defineComponent({
     const pixiApp = ref()
 
     let app: App<Container> | undefined
-
     function mount() {
-
+      let view: HTMLCanvasElement | OffscreenCanvas | undefined = canvas.value
       if (props.transferControlToOffscreen)
-        canvas.value?.transferControlToOffscreen()
+        view = canvas.value?.transferControlToOffscreen() as OffscreenCanvas
 
-      const context = canvas.value?.getContext('webgl', {
+      const context = view?.getContext('webgl', {
         alpha: props.alpha,
         antialias: props.antialias,
         depth: props.depth,
@@ -64,7 +63,14 @@ export const Application = defineComponent({
       if (!context)
         warn('could not crate webgl context')
 
-      const inst = new _Application({ view: canvas.value, ...props })
+      const params = { ...props } as { [key: string]: any }
+      // delete params.autoDensity
+
+      const inst = new _Application({ view, ...params })
+
+      inst.view.width = params.width
+      inst.view.height = params.height
+
       pixiApp.value = markRaw(inst)
 
       app = createApp({
diff --git a/packages/vue3-pixi/src/composables/useScreen.ts b/packages/vue3-pixi/src/composables/useScreen.ts
index 6057c38..53b782d 100644
--- a/packages/vue3-pixi/src/composables/useScreen.ts
+++ b/packages/vue3-pixi/src/composables/useScreen.ts
@@ -5,6 +5,7 @@ import type { Application, ICanvas } from 'pixi.js'
 import { Rectangle } from 'pixi.js'
 
 import { computedWithControl, useResizeObserver } from '@vueuse/core'
+
 import { useApplication } from './useApplication'
 
 export function useScreen(app?: Ref<Application<ICanvas>>): Ref<Rectangle> {
@@ -17,7 +18,8 @@ export function useScreen(app?: Ref<Application<ICanvas>>): Ref<Rectangle> {
     () => useApp.value?.screen || defaultRectangle,
   )
 
-  useResizeObserver(view, screen.trigger)
+  if (view?.value instanceof HTMLCanvasElement)
+    useResizeObserver(view, screen.trigger)
 
   return screen
 }