diff --git a/src/stores/player.ts b/src/stores/player.ts index 7fb802e..374d260 100644 --- a/src/stores/player.ts +++ b/src/stores/player.ts @@ -1,12 +1,12 @@ import type { fabric } from 'fabric' import { defineStore, storeToRefs } from 'pinia' -import { ref, computed } from 'vue' +import { ref, computed, type Ref } from 'vue' +import { nanoid } from 'nanoid' type ElementTypes = 'text' | 'image' | 'video' | 'svg' | 'audio' -export interface ElementItem { - id: string - type: ElementTypes - element: fabric.Object +export interface ElementItem extends fabric.Object { + elementId?: string + elementType?: ElementTypes } export type ElementList = ElementItem[] @@ -16,9 +16,11 @@ export const usePlayerStore = defineStore('playerStore', () => { // 播放列表 const playList = ref([]) // 轨道数 - const trackCount = computed(() => playList.value.length) + const trackCount = computed(() => playList.value.length) // 元素列表 - const elementList = ref([]) + const elementList: Ref = ref([]) + // 当前选中的元素 + const focusElements: Ref = ref([]) // 当前时间 const currentTime = ref(0) // 总时长 @@ -30,13 +32,28 @@ export const usePlayerStore = defineStore('playerStore', () => { } // 添加元素 function addElement(type: ElementTypes, element: fabric.Object) { - elementList.value.push({ id: String(Date.now()), element, type }) + Object.assign(element, { elementId: nanoid(), elementType: type }) + elementList.value.push(element as ElementItem) } // 删除元素 - function removeElement(id: string) { - const index = elementList.value.findIndex((item) => item.id === id) + function removeElement(elementId: string) { + const index = elementList.value.findIndex((item) => item.elementId === elementId) if (index !== -1) elementList.value.splice(index, 1) } + // 设置当前元素 + function setFocusElements( + selected: ElementList | undefined, + deselected: ElementList | undefined, + ) { + if (selected) { + focusElements.value = [...focusElements.value, ...selected] + } else if (deselected) { + const elementId = deselected.map((item) => item.elementId || '') + focusElements.value = focusElements.value.filter( + (item) => !elementId.includes(item.elementId || ''), + ) + } + } return { playStatus, @@ -45,9 +62,11 @@ export const usePlayerStore = defineStore('playerStore', () => { currentTime, duration, elementList, + focusElements, togglePlay, addElement, removeElement, + setFocusElements, } })