Revert "fix(stage-tamagotchi): fix model flickering and jumping on window res…" (#1364)

This reverts commit 3a8dc75233.

packages/stage-ui-live2d/src/components/scenes/live2d/Model.vue

@@ -5,7 +5,7 @@ import type { PixiLive2DInternalModel } from '../../../composables/live2d'
 
 import { listenBeatSyncBeatSignal } from '@proj-airi/stage-shared/beat-sync'
 import { useTheme } from '@proj-airi/ui'
-import { breakpointsTailwind, until, useBreakpoints } from '@vueuse/core'
+import { breakpointsTailwind, until, useBreakpoints, useDebounceFn } from '@vueuse/core'
 import { formatHex } from 'culori'
 import { Mutex } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
@@ -120,9 +120,9 @@ function setScaleAndPosition() {
   if (!model.value)
     return
 
-  let offsetFactor = 1.0
+  let offsetFactor = 2.2
   if (isMobile.value) {
-    offsetFactor = 1.0
+    offsetFactor = 2.2
   }
 
   const heightScale = (props.height * 0.95 / initialModelHeight.value * offsetFactor)
@@ -137,7 +137,7 @@ function setScaleAndPosition() {
   model.value.scale.set(scale * props.scale, scale * props.scale)
 
   model.value.x = (props.width / 2) + offset.value.xOffset
-  model.value.y = (props.height / 2) + offset.value.yOffset
+  model.value.y = props.height + offset.value.yOffset
 }
 
 const live2dStore = useLive2d()
@@ -398,6 +398,8 @@ async function setMotion(motionName: string, index?: number) {
   }
 }
 
+const handleResize = useDebounceFn(setScaleAndPosition, 100)
+
 const dropShadowColorComputer = ref<HTMLDivElement>()
 const dropShadowAnimationId = ref(0)
 
@@ -418,7 +420,7 @@ function updateDropShadowFilter() {
   model.value.filters = [dropShadowFilter.value]
 }
 
-watch([() => props.width, () => props.height], setScaleAndPosition)
+watch([() => props.width, () => props.height], handleResize)
 watch(modelSrcRef, async () => await loadModel(), { immediate: true })
 watch(dark, updateDropShadowFilter, { immediate: true })
 watch([model, themeColorsHue], updateDropShadowFilter)

packages/ui/src/components/layouts/screen.vue

@@ -1,20 +1,61 @@
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const containerRef = ref<HTMLDivElement>()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const { width } = useWindowSize()
+const { width, height } = useWindowSize()
 const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
 
+const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
+const isTablet = computed(() => breakpoints.between('md', 'lg').value)
+const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
+
 const canvasWidth = computed(() => {
-  if (breakpoints.smaller('lg').value)
+  if (isDesktop.value)
+    return containerElementBounding.width.value
+  else if (isMobile.value)
     return (width.value - 16) // padding
-  return containerElementBounding.width.value
+  else if (isTablet.value)
+    return (width.value - 16) // padding
+  else
+    return containerElementBounding.width.value
 })
 
-const canvasHeight = computed(() => containerElementBounding.height.value || 0)
+const canvasHeight = ref(0)
+
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+watch([containerElementBounding.width, containerElementBounding.height], () => {
+  if (isDesktop.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
 
 onMounted(async () => {
   if (!containerRef.value)