更新右键清空画布

src/configs/contextMenu.ts

@@ -1,6 +1,5 @@
-import { ContextMenu } from '@/components/ContextMenu/types'
+import { ContextMenu } from '@/components/Contextmenu/types'
 import { ElementNames, AlignCommand, LayerCommand } from '@/types/elements'
-import { Object as FabricObject } from 'fabric'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import useHandleElement from '@/hooks/useHandleElement'
@@ -35,10 +34,10 @@ export const contextMenuThumbnails = (): ContextMenu[] => {
 }
 
 export const contextMenus = (): ContextMenu[] => {
-  const { lockElement, deleteElement, cutElement, copyElement, pasteElement, uncombineElements, combineElements } = useHandleElement()
+  const { lockElement, deleteElement, cutElement, copyElement, pasteElement, uncombineElements, combineElements, resetElements } = useHandleElement()
   const { alignElement, layerElement } = useHandleTool()
   const { canvasObject } = storeToRefs(useMainStore())
-  const element = canvasObject.value as FabricObject
+  const element = canvasObject.value
   if (!element) {
     return [
       {
@@ -62,7 +61,7 @@ export const contextMenus = (): ContextMenu[] => {
       },
       {
         text: '重置',
-        // handler: enterScreeningFromStart,
+        handler: resetElements,
       },
     ]
   }

src/hooks/useHandleElement.ts

@@ -8,7 +8,7 @@ import { useFabricStore, useMainStore, useTemplatesStore } from "@/store"
 import { TextboxElement, CanvasElement, GroupElement } from "@/types/canvas"
 import { clipperPath } from '@/utils/clipper'
 import { useActiveElement } from '@vueuse/core'
-import { computed } from 'vue'
+import { ElMessageBox } from "element-plus"
 import useCanvas from "@/views/Canvas/useCanvas"
 import useCanvasZindex from "./useCanvasZindex"
 import { copyText } from '@/utils/clipboard'
@@ -28,7 +28,7 @@ export default () => {
     const element = queryElement(option.id)
     if (!element) return
     if (element.group) {
-      const elementGroup = queryOption((element.group as GroupElement).id) as Group
+      const elementGroup = queryOption((element.group as GroupElement).id) as GroupElement | undefined
       if (!elementGroup) return
       const _element = elementGroup.objects[oldIndex]
       elementGroup.objects.splice(oldIndex, 1)
@@ -379,6 +379,16 @@ export default () => {
 
   }
 
+  const resetElements = () => {
+    const [ canvas ] = useCanvas()
+    ElMessageBox.confirm('确认是否清空画布？', 'Warning', {
+      confirmButtonText: 'OK',
+      type: 'warning',
+    }).then(() => {
+      templatesStore.clearTemplate()
+    });
+  }
+
   return {
     // createElement,
     layerElement,
@@ -402,6 +412,7 @@ export default () => {
     backwardElement,
     checkElement,
     intersectElements,
-    maskElement
+    maskElement,
+    resetElements
   }
 }

src/store/modules/template.ts

@@ -212,6 +212,12 @@ export const useTemplatesStore = defineStore('Templates', {
       addHistorySnapshot()
     },
 
+    clearTemplate() {
+      const objects = this.templates[this.templateIndex].objects.filter(item => item.id === WorkSpaceDrawType)
+      this.templates[this.templateIndex].objects = objects
+      this.renderTemplate()
+    },
+
     updateWorkSpace(props: Partial<Template>) {
       const templateIndex = this.templateIndex
       this.templates[templateIndex] = { ...this.templates[templateIndex], ...props }