feat(stage-ui): allow user to disable Live2D mouse tracking (#303)

---------

Co-authored-by: Neko <neko@ayaka.moe>

packages/i18n/src/locales/en/settings.yaml

@@ -63,6 +63,10 @@ live2d:
     title: Extract colors from model
     button-extract:
       title: Extract
+  focus:
+    title: Disable model mouse tracking
+    button-disable:
+      title: Disable
 microphone: Microphone
 models: Model
 pages:

packages/i18n/src/locales/zh-Hans/settings.yaml

@@ -58,6 +58,10 @@ live2d:
   theme-color-from-model:
     button-extract:
       title: 提取
+  focus:
+    title: 禁用模型鼠标跟踪
+    button-disable:
+      title: 禁用
 microphone: 麦克风
 models: 模型
 pages:

packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2D.vue

@@ -2,14 +2,14 @@
 import JSZip from 'jszip'
 import localforage from 'localforage'
 
-import { FieldRange, Input } from '@proj-airi/ui'
+import { Checkbox, FieldRange, Input } from '@proj-airi/ui'
 import { useFileDialog, useObjectUrl } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { Emotion, EmotionNeutralMotionName } from '../../../../constants'
-import { useLive2d } from '../../../../stores'
+import { useLive2d, useSettings } from '../../../../stores'
 import { Section } from '../../../Layouts'
 import { Button } from '../../../Misc'
 import { ColorPalette } from '../../../Widgets'
@@ -29,6 +29,9 @@ const modelFileDialog = useFileDialog({
   accept: 'application/zip',
 })
 
+const settings = useSettings()
+const { live2dDisableFocus } = storeToRefs(settings)
+
 const live2d = useLive2d()
 const {
   modelFile,
@@ -252,4 +255,18 @@ const exportObjectUrl = useObjectUrl(modelFile)
       </template>
     </FieldRange>
   </Section>
+  <Section
+    :title="t('settings.live2d.focus.title')"
+    icon="i-solar:eye-scan-bold-duotone"
+    :class="[
+      'rounded-xl',
+      'bg-white/80  dark:bg-black/75',
+      'backdrop-blur-lg',
+    ]"
+  >
+    <Checkbox
+      v-model="live2dDisableFocus"
+      :label="t('settings.live2d.focus.button-disable.title')"
+    />
+  </Section>
 </template>

packages/stage-ui/src/components/Scenes/Live2D/Model.vue

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<{
   mouthOpenSize: 0,
   paused: false,
   focusAt: () => ({ x: 0, y: 0 }),
-  disableFocusAt: false,
+  disableFocusAt: useSettings().live2dDisableFocus,
   scale: 1,
 })
 

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

@@ -12,8 +12,10 @@ export const useSettings = defineStore('settings', () => {
   const selectedAudioDevice = ref<MediaDeviceInfo>()
 
   const language = useLocalStorage('settings/language', 'en')
+  
   const stageView = useLocalStorage('settings/stage/view/model-renderer', '2d')
   const stageViewControlsEnabled = ref(false)
+  const live2dDisableFocus = useLocalStorage('settings/live2d/disable-focus', false)
 
   const isAudioInputOn = useLocalStorage('settings/audio/input', 'false')
   const selectedAudioDeviceId = computed(() => selectedAudioDevice.value?.deviceId)
@@ -78,6 +80,7 @@ export const useSettings = defineStore('settings', () => {
     usePageSpecificTransitions,
     language,
     stageView,
+    live2dDisableFocus,
     stageViewControlsEnabled,
     themeColorsHue,
     themeColorsHueDynamic,