feat: 完成右边栏素材选中逻辑

Author: wangrongding

src/components/player/CanvasPlayer.vue

@@ -47,6 +47,7 @@ emitter.on(BusEvent.ElementDelete, onDelete)
 emitter.on(BusEvent.ElementAdd, onAdd)
 emitter.on(BusEvent.ElementAlign, setElementAlign)
 emitter.on(BusEvent.ElementLayer, setElementLayer)
+emitter.on(BusEvent.ElementSelect, selectElement)
 emitter.on(BusEvent.ElementSelectAll, selectAll)
 emitter.on(BusEvent.CanvasFullScreen, toggleCanvasFullScreen)
 emitter.on(BusEvent.CanvasExportCurrentFrame, onExportCurrentFrame)
@@ -572,6 +573,16 @@ function canvasOnMouseDown(e: fabric.IEvent<MouseEvent>) {
   }
 }
 
+// 选中元素
+function selectElement(obj: ElementItem) {
+  const targetElement: ElementItem = canvas
+    .getObjects()
+    .find((item: ElementItem) => item.elementId === obj.elementId)!
+  if (!targetElement) return
+  canvas.setActiveObject(targetElement)
+  canvas.requestRenderAll()
+}
+
 // 全选
 function selectAll() {
   canvas.discardActiveObject()
@@ -584,7 +595,7 @@ function selectAll() {
 
 // 元素选中时
 function onElementSelected(e: fabric.IEvent<MouseEvent>) {
-  setFocusElements(e.selected, undefined)
+  setFocusElements(e.selected, e.deselected)
 }
 
 // 元素取消选中时

src/components/right-panel/RightPanel.vue

@@ -83,10 +83,11 @@ function setLayer(align: 'up' | 'down' | 'top' | 'bottom') {
           v-if="elementList.length > 0"
         >
           <div
-            class="flex items-center justify-between rounded-md border border-[#3b3b4f] p-2"
+            class="flex cursor-pointer items-center justify-between rounded-md border border-[#3b3b4f] p-2"
             :class="focusElementIds.includes(item.elementId) ? 'bg-black' : ''"
             v-for="(item, index) in elementList"
             :key="index"
+            @click="emitter.emit(BusEvent.ElementSelect, item)"
           >
             <p class="m-0 h-[16px] p-0 leading-[16px]">{{ item.elementType }} - {{ index + 1 }}</p>
             <button class="btn btn-error btn-sm" @click="deleteElement(item)">

src/stores/player.ts

@@ -45,12 +45,11 @@ export const usePlayerStore = defineStore('playerStore', () => {
     selected: ElementList | undefined,
     deselected: ElementList | undefined,
   ) {
-    if (selected) {
-      focusElements.value = [...focusElements.value, ...selected]
-    } else if (deselected) {
-      const elementId = deselected.map((item) => item.elementId || '')
+    if (selected) focusElements.value.push(...selected)
+    if (deselected) {
+      const deselectedElementId = deselected.map((item) => item.elementId || '')
       focusElements.value = focusElements.value.filter(
-        (item) => !elementId.includes(item.elementId || ''),
+        (item) => !deselectedElementId.includes(item.elementId || ''),
       )
     }
   }

src/utils/eventBus.ts

@@ -1,3 +1,4 @@
+import { fabric } from 'fabric'
 import mitt from 'mitt'
 import type { Emitter } from 'mitt'
 import type { ElementItem } from '~/stores/player'
@@ -7,6 +8,7 @@ export enum BusEvent {
   ElementPaste = 'element:paste',
   ElementDelete = 'element:delete',
   ElementAdd = 'element:add',
+  ElementSelect = 'element:select',
   ElementSelectAll = 'element:select-all',
   ElementAlign = 'element:align',
   ElementFlip = 'element:flip',
@@ -37,6 +39,8 @@ type BusEvents = {
   [BusEvent.ElementFlip]: 'x' | 'y'
   // 元素层级
   [BusEvent.ElementLayer]: 'up' | 'down' | 'top' | 'bottom'
+  // 选中元素
+  [BusEvent.ElementSelect]: fabric.Object
   // 全选
   [BusEvent.ElementSelectAll]: void
   // ============================= video =============================