feat(stage-ui): add shadow toggle for live2d (#750)

Author: Mr-Quin

packages/stage-pages/src/pages/settings/providers/store.ts

@@ -15,4 +15,3 @@ export const useProvidersPageStore = defineStore('providersPage', {
     },
   },
 })
-

packages/stage-ui/src/components/scenarios/settings/model-settings/Live2D.vue

@@ -21,7 +21,7 @@ defineEmits<{
 const { t } = useI18n()
 
 const settings = useSettings()
-const { live2dDisableFocus, live2dIdleAnimationEnabled, live2dAutoBlinkEnabled } = storeToRefs(settings)
+const { live2dDisableFocus, live2dIdleAnimationEnabled, live2dAutoBlinkEnabled, live2dShadowEnabled } = storeToRefs(settings)
 
 const live2d = useLive2d()
 const {
@@ -273,7 +273,7 @@ onUnmounted(() => {
     size="sm"
     :expand="true"
   >
-    <FieldRange v-model="scale" as="div" :min="0.5" :max="2" :step="0.01" :label="t('settings.live2d.scale-and-position.scale')">
+    <FieldRange v-model="scale" as="div" :min="0.1" :max="3" :step="0.01" :label="t('settings.live2d.scale-and-position.scale')">
       <template #label>
         <div flex items-center>
           <div>{{ t('settings.live2d.scale-and-position.scale') }}</div>
@@ -283,7 +283,7 @@ onUnmounted(() => {
         </div>
       </template>
     </FieldRange>
-    <FieldRange v-model="position.x" as="div" :min="-100" :max="100" :step="1" :label="t('settings.live2d.scale-and-position.x')">
+    <FieldRange v-model="position.x" as="div" :min="-1000" :max="1000" :step="1" :label="t('settings.live2d.scale-and-position.x')">
       <template #label>
         <div flex items-center>
           <div>{{ t('settings.live2d.scale-and-position.x') }}</div>
@@ -293,7 +293,7 @@ onUnmounted(() => {
         </div>
       </template>
     </FieldRange>
-    <FieldRange v-model="position.y" as="div" :min="-100" :max="100" :step="1" :label="t('settings.live2d.scale-and-position.y')">
+    <FieldRange v-model="position.y" as="div" :min="-1000" :max="1000" :step="1" :label="t('settings.live2d.scale-and-position.y')">
       <template #label>
         <div flex items-center>
           <div>{{ t('settings.live2d.scale-and-position.y') }}</div>
@@ -398,6 +398,11 @@ onUnmounted(() => {
       <Checkbox v-model="live2dAutoBlinkEnabled" />
     </div>
 
+    <div mt-4 flex items-center justify-between>
+      <span text-sm text-neutral-600 dark:text-neutral-400>Shadow</span>
+      <Checkbox v-model="live2dShadowEnabled" />
+    </div>
+
     <button
 
       mt-4 w-full border rounded bg-neutral-100 px-4 py-2 text-sm text-neutral-700 font-medium transition-colors dark:border-neutral-700 dark:bg-neutral-800 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700

packages/stage-ui/src/components/scenes/Live2D.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 
 import Screen from '../misc/Screen.vue'
 import Live2DCanvas from './live2d/Canvas.vue'
 import Live2DModel from './live2d/Model.vue'
 
+import { useLive2d } from '../../stores/live2d'
+
 import '../../utils/live2d-zip-loader'
 
 withDefaults(defineProps<{
@@ -14,9 +17,6 @@ withDefaults(defineProps<{
   mouthOpenSize?: number
   focusAt?: { x: number, y: number }
   disableFocusAt?: boolean
-  xOffset?: number | string
-  yOffset?: number | string
-  scale?: number
 }>(), {
   paused: false,
   focusAt: () => ({ x: 0, y: 0 }),
@@ -31,6 +31,12 @@ const componentStateModel = defineModel<'pending' | 'loading' | 'mounted'>('mode
 
 const live2dCanvasRef = ref<InstanceType<typeof Live2DCanvas>>()
 
+const live2d = useLive2d()
+const {
+  scale,
+  position,
+} = storeToRefs(live2d)
+
 watch([componentStateModel, componentStateCanvas], () => {
   componentState.value = (componentStateModel.value === 'mounted' && componentStateCanvas.value === 'mounted')
     ? 'mounted'
@@ -64,8 +70,8 @@ defineExpose({
         :height="height"
         :paused="paused"
         :focus-at="focusAt"
-        :x-offset="xOffset"
-        :y-offset="yOffset"
+        :x-offset="position.x"
+        :y-offset="position.y"
         :scale="scale"
         :disable-focus-at="disableFocusAt"
       />

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

@@ -133,6 +133,7 @@ const {
   themeColorsHue,
   themeColorsHueDynamic,
   live2dIdleAnimationEnabled,
+  live2dShadowEnabled,
 } = storeToRefs(useSettings())
 
 const localCurrentMotion = ref<{ group: string, index: number }>({ group: 'Idle', index: 0 })
@@ -388,14 +389,20 @@ function updateDropShadowFilter() {
   if (model.value) {
     const color = getComputedStyle(dropShadowColorComputer.value!).backgroundColor
     dropShadowFilter.value.color = Number(formatHex(color)!.replace('#', '0x'))
-    model.value.filters = [dropShadowFilter.value]
+    if (live2dShadowEnabled.value) {
+      model.value.filters = [dropShadowFilter.value]
+    }
+    else {
+      model.value.filters = []
+    }
   }
 }
 
 watch([() => props.width, () => props.height], () => handleResize())
 watch(modelSrcRef, async () => await loadModel(), { immediate: true })
 watch(dark, updateDropShadowFilter, { immediate: true })
 watch([model, themeColorsHue], updateDropShadowFilter)
+watch(live2dShadowEnabled, updateDropShadowFilter)
 watch(offset, setScaleAndPosition)
 watch(() => props.scale, setScaleAndPosition)
 

packages/stage-ui/src/stores/settings.ts

@@ -102,6 +102,7 @@ export const useSettings = defineStore('settings', () => {
   const live2dDisableFocus = useLocalStorage('settings/live2d/disable-focus', false)
   const live2dIdleAnimationEnabled = useLocalStorage('settings/live2d/idle-animation-enabled', true)
   const live2dAutoBlinkEnabled = useLocalStorage('settings/live2d/auto-blink-enabled', true)
+  const live2dShadowEnabled = useLocalStorage('settings/live2d/shadow-enabled', false)
 
   const disableTransitions = useLocalStorage('settings/disable-transitions', true)
   const usePageSpecificTransitions = useLocalStorage('settings/use-page-specific-transitions', true)
@@ -174,6 +175,7 @@ export const useSettings = defineStore('settings', () => {
     live2dDisableFocus,
     live2dIdleAnimationEnabled,
     live2dAutoBlinkEnabled,
+    live2dShadowEnabled,
     themeColorsHue,
     themeColorsHueDynamic,