diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json index ab4cc4d66..34407f4e3 100644 --- a/apps/stage-web/package.json +++ b/apps/stage-web/package.json @@ -61,6 +61,7 @@ "drizzle-orm": "^0.40.0", "jszip": "^3.10.1", "localforage": "^1.10.0", + "node-vibrant": "^4.0.3", "nprogress": "^0.2.0", "ofetch": "^1.4.1", "onnxruntime-web": "^1.21.0", diff --git a/apps/stage-web/src/components/Widgets/Live2DSettings.vue b/apps/stage-web/src/components/Widgets/Live2DSettings.vue index 906a7e56a..54b74903c 100644 --- a/apps/stage-web/src/components/Widgets/Live2DSettings.vue +++ b/apps/stage-web/src/components/Widgets/Live2DSettings.vue @@ -3,12 +3,21 @@ import { Collapsable } from '@proj-airi/stage-ui/components' import { Emotion, EmotionNeutralMotionName } from '@proj-airi/stage-ui/constants' import { useSettings } from '@proj-airi/stage-ui/stores' import { useFileDialog, useObjectUrl } from '@vueuse/core' +import { converter } from 'culori' import JSZip from 'jszip' import localforage from 'localforage' import { storeToRefs } from 'pinia' import { ref, watch } from 'vue' import { useI18n } from 'vue-i18n' +defineProps<{ + palette: string[] +}>() + +const emit = defineEmits<{ + (e: 'extractColorsFromModel'): void +}>() + const { t } = useI18n() const modelFile = useFileDialog({ @@ -16,7 +25,7 @@ const modelFile = useFileDialog({ }) const settings = useSettings() -const { live2dModelFile, live2dMotionMap, live2dLoadSource, loadingLive2dModel, availableLive2dMotions, live2dModelUrl } = storeToRefs(settings) +const { live2dModelFile, live2dMotionMap, live2dLoadSource, loadingLive2dModel, availableLive2dMotions, live2dModelUrl, themeColorsHue } = storeToRefs(settings) const localModelUrl = ref(live2dModelUrl.value) modelFile.onChange((files) => { @@ -94,6 +103,10 @@ async function saveMotionMap() { } const exportObjectUrl = useObjectUrl(live2dModelFile) + +function handleHueClick(color: string) { + themeColorsHue.value = converter('oklch')(color)?.h ?? 0 +}