fix(motion-map): cannot export (#81)

apps/stage-web/src/components/Widgets/Live2DSettings.vue

@@ -5,6 +5,7 @@ import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useFileDialog, useObjectUrl } from '@vueuse/core'
 import JSZip from 'jszip'
 import localforage from 'localforage'
+import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -15,14 +16,15 @@ const modelFile = useFileDialog({
 })
 
 const settings = useSettings()
-const modelUrl = ref(settings.live2dModelUrl)
+const { live2dModelFile, live2dMotionMap, live2dLoadSource, loadingLive2dModel, availableLive2dMotions, live2dModelUrl } = storeToRefs(settings)
+const localModelUrl = ref(live2dModelUrl.value)
 
 modelFile.onChange((files) => {
   if (files && files.length > 0) {
-    settings.live2dMotionMap = {}
+    live2dMotionMap.value = {}
-    settings.live2dModelFile = files[0]
+    live2dModelFile.value = files[0]
-    settings.live2dLoadSource = 'file'
+    live2dLoadSource.value = 'file'
-    settings.loadingLive2dModel = true
+    loadingLive2dModel.value = true
   }
 })
 
@@ -31,16 +33,16 @@ watch(() => settings.loadingLive2dModel, (value) => {
     return
   }
 
-  if (settings.live2dLoadSource !== 'file') {
+  if (live2dLoadSource.value !== 'file') {
     return
   }
 
-  settings.availableLive2dMotions.forEach((motion) => {
+  availableLive2dMotions.value.forEach((motion) => {
     if (motion.motionName in Emotion) {
-      settings.live2dMotionMap[motion.fileName] = motion.motionName
+      live2dMotionMap.value[motion.fileName] = motion.motionName
     }
     else {
-      settings.live2dMotionMap[motion.fileName] = EmotionNeutralMotionName
+      live2dMotionMap.value[motion.fileName] = EmotionNeutralMotionName
     }
   })
 })
@@ -85,13 +87,13 @@ async function saveMotionMap() {
     return
   }
 
-  const patchedFile = await patchMotionMap(fileFromIndexedDB, settings.live2dMotionMap)
+  const patchedFile = await patchMotionMap(fileFromIndexedDB, live2dMotionMap.value)
-  settings.live2dModelFile = patchedFile
+  live2dModelFile.value = patchedFile
-  settings.live2dLoadSource = 'file'
+  live2dLoadSource.value = 'file'
-  settings.loadingLive2dModel = true
+  loadingLive2dModel.value = true
 }
 
-const exportObjectUrl = useObjectUrl(settings.live2dModelFile)
+const exportObjectUrl = useObjectUrl(live2dModelFile)
 </script>
 
 <template>
@@ -130,7 +132,7 @@ const exportObjectUrl = useObjectUrl(settings.live2dModelFile)
             </div>
             <div>
               <input
-                v-model="modelUrl"
+                v-model="localModelUrl"
                 :disabled="settings.loadingLive2dModel"
                 type="text"
                 rounded
@@ -145,7 +147,7 @@ const exportObjectUrl = useObjectUrl(settings.live2dModelFile)
                 hover="bg-zinc-200 dark:bg-zinc-700"
                 transition="all ease-in-out duration-250"
                 ml-2 rounded px-2 py-1 text-sm outline-none
-                @click="settings.live2dModelUrl = modelUrl"
+                @click="live2dModelUrl = localModelUrl"
               >
                 {{ t('settings.live2d.change-model.from-url-confirm') }}
               </button>

apps/stage-web/src/pages/settings/models/index.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { WidgetStage } from '@proj-airi/stage-ui/components'
+import Live2DCanvas from '@proj-airi/stage-ui/components/Live2D/Canvas.vue'
+import Live2DModel from '@proj-airi/stage-ui/components/Live2D/Model.vue'
+import { useElementBounding } from '@vueuse/core'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import Live2DSettings from '../../../components/Widgets/Live2DSettings.vue'
 
 const router = useRouter()
+const live2dContainerRef = ref<HTMLDivElement>()
+const { width, height } = useElementBounding(live2dContainerRef)
 </script>
 
 <template>
@@ -22,7 +27,11 @@ const router = useRouter()
     </h1>
   </div>
   <div flex>
-    <WidgetStage w="50%" h="80vh" />
+    <div ref="live2dContainerRef" w="50%" h="80vh">
+      <Live2DCanvas v-slot="{ app }" :width="width" :height="height">
+        <Live2DModel :app="app" :mouth-open-size="0" :width="width" :height="height" :paused="false" />
+      </Live2DCanvas>
+    </div>
     <Live2DSettings w="50%" h="80vh" />
   </div>
 

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

@@ -16,7 +16,7 @@ export const useSettings = defineStore('settings', () => {
 
   // TODO: extract to a separate store, use a single page to do this
   const live2dModelFile = ref<File>()
-  const live2dModelUrl = ref<string>('./assets/live2d/models/hiyori_pro_zh.zip')
+  const live2dModelUrl = ref<string>('/assets/live2d/models/hiyori_pro_zh.zip')
   const live2dLoadSource = ref<'file' | 'url'>('url')
   const loadingLive2dModel = ref(false) // if set to true, the model will be loaded
   const live2dPosition = useLocalStorage('settings/live2d/position', { x: 0, y: 0 }) // position is relative to the center of the screen