更新类型

src/configs/contextMenu.ts

@@ -1,7 +1,6 @@
 import { ContextMenu } from '@/components/ContextMenu/types'
-import { CanvasElement } from '@/types/canvas'
 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'
@@ -38,8 +37,8 @@ export const contextMenus = (): ContextMenu[] => {
   const { lockElement, deleteElement } = useHandleElement()
   const { alignElement, layerElement } = useHandleTool()
   const { canvasObject } = storeToRefs(useMainStore())
-  const element = canvasObject.value as CanvasElement
-  if (!canvasObject.value) {
+  const element = canvasObject.value as FabricObject
+  if (!element) {
     return [
       {
         text: '粘贴',

src/hooks/useHandleElement.ts

@@ -68,13 +68,13 @@ export default () => {
   const patseEelement = async () => {
     const [ canvas ] = useCanvas()
     if (!clonedObject.value) return
-    const clonedObj = await clonedObject.value.clone(propertiesToInclude) as CanvasElement
+    const clonedObj = await clonedObject.value.clone(propertiesToInclude) as FabricObject
     let left = clonedObject.value.left + 10, top = clonedObject.value.top + 10
     if (currentPoint.value) {
       left = currentPoint.value.x, top = currentPoint.value.y
     }
     canvas.discardActiveObject()
-    mainStore.setCanvasObject(null)
+    mainStore.setCanvasObject(undefined)
     clonedObj.set({left, top, evented: true})
     if (clonedObj.type === ElementNames.ACTIVE) {
       clonedObj.canvas = canvas
@@ -131,7 +131,7 @@ export default () => {
     }
     if (element.type === ElementNames.TEXTBOX && deleteTextbox(element as TextboxElement)) return
     canvas.discardActiveObject()
-    mainStore.setCanvasObject(null)
+    mainStore.setCanvasObject(undefined)
     canvas.remove(element as FabricObject)
     canvas.renderAll()
     templatesStore.modifedElement()
@@ -217,7 +217,7 @@ export default () => {
     if (!activeObject) return
     const objects = activeObject.removeAll() as FabricObject[]
     canvas.discardActiveObject()
-    mainStore.setCanvasObject(null)
+    mainStore.setCanvasObject(undefined)
     if (activeObject.group) {
       activeObject.group.add(...objects)
       activeObject.group.remove(activeObject as FabricObject)
@@ -231,10 +231,10 @@ export default () => {
     canvas.renderAll()
   }
 
-  const findElement = (eid: string, elements: FabricObject[] | undefined): CanvasElement | undefined => {
+  const findElement = (eid: string, elements: FabricObject[] | undefined): FabricObject | undefined => {
     if (!elements) return
     for (let i = 0; i < elements.length; i++) {
-      const item = elements[i] as CanvasElement
+      const item = elements[i] as FabricObject
       if (item.id === eid) {
         return item
       }
@@ -245,10 +245,10 @@ export default () => {
     return
   }
 
-  const queryElement = (eid: string): CanvasElement | undefined => {
+  const queryElement = (eid: string): FabricObject | undefined => {
     const [ canvas ] = useCanvas()
-    const elements = canvas.getObjects().filter(item => !WorkSpaceCommonType.includes((item as CanvasElement).id))
-    let element = elements.filter(obj => (obj as CanvasElement).id === eid)[0] as CanvasElement
+    const elements = canvas.getObjects().filter(item => !WorkSpaceCommonType.includes((item as FabricObject).id))
+    let element = elements.filter(obj => (obj as FabricObject).id === eid)[0] as FabricObject
     if (!element) {
       return findElement(eid, elements as FabricObject[])
     }
@@ -319,7 +319,7 @@ export default () => {
 
   const cancelElement = () => {
     const [ canvas ] = useCanvas()
-    mainStore.setCanvasObject(null)
+    mainStore.setCanvasObject(undefined)
     canvas.discardActiveObject()
     canvas.renderAll()
   }

src/store/modules/main.ts

@@ -9,10 +9,10 @@ import { ExportTypes, PoolType, SystemFont } from '@/types/common'
 import useCanvas from '@/views/Canvas/useCanvas'
 
 export interface MainState {
-  canvasObject: CanvasElement | null
+  canvasObject: FabricObject | undefined
   hoveredObject: FabricObject | undefined 
   leavedObject: FabricObject | undefined 
-  clonedObject: CanvasElement | null
+  clonedObject: FabricObject | undefined
   currentPoint: PointElement | null
   rightState: RightStates
   activeElementIdList: string[]
@@ -37,8 +37,8 @@ export const databaseId = nanoid(10)
 
 export const useMainStore = defineStore('main', {
   state: (): MainState => ({
-    canvasObject: null,
-    clonedObject: null,
+    canvasObject: undefined,
+    clonedObject: undefined,
     hoveredObject: undefined,
     leavedObject: undefined,
     currentPoint: null,
@@ -84,7 +84,7 @@ export const useMainStore = defineStore('main', {
       this.activeElementIdList = activeElementIdList
     },
 
-    setCanvasObject(canvasObject: CanvasElement | null) {
+    setCanvasObject(canvasObject: FabricObject | undefined) {
       this.canvasObject = canvasObject
     },
 

src/views/Editor/CanvasHeader/index.vue

@@ -20,7 +20,7 @@
     </div>
 
     <div class="center-handler">
-      <el-tooltip placement="top" content="图层">
+      <!-- <el-tooltip placement="top" content="图层">
         <IconLayers class="handler-item" ref="layerRef" :class="{ 'disable': !handleElement }"/>
       </el-tooltip>
       <el-popover ref="layerPopoverRef" :virtual-ref="layerRef" trigger="click" virtual-triggering width="240" :disabled="!handleElement">
@@ -40,7 +40,7 @@
             </el-tooltip>
           </el-button-group>
         </el-row>
-      </el-popover>
+      </el-popover> -->
 
       <!-- <el-tooltip placement="top" content="对齐">
         <IconAlignTextCenter class="handler-item" ref="alignRef" :class="{ 'disable': !handleElement }"/>
@@ -89,10 +89,10 @@
         </el-row>
       </el-popover> -->
 
-      <el-tooltip placement="top" content="锁定">
+      <!-- <el-tooltip placement="top" content="锁定">
         <IconLock class="handler-item" @click="changeElementLock(false)" v-if="lock" :class="{ 'disable': !handleElement }"/>
         <IconUnlock class="handler-item" @click="changeElementLock(true)" v-else :class="{ 'disable': !handleElement }"/>
-      </el-tooltip>
+      </el-tooltip> -->
       <el-tooltip placement="top" :hide-after="0">
         <template #content>交叉</template>
         <IconIntersection class="handler-item" @click="intersection()"/>
@@ -128,7 +128,7 @@ import useHandleTool from '@/hooks/useHandleTool'
 import useCanvasScale from '@/hooks/useCanvasScale'
 import useHandleElement from '@/hooks/useHandleElement'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
-import { Path } from 'fabric'
+import { Object as FabricObject } from 'fabric'
 
 const fabricStore = useFabricStore()
 const mainStore = useMainStore()
@@ -157,7 +157,7 @@ const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
 
 const { redo, undo } = useHistorySnapshot()
 
-const handleElement = computed(() => canvasObject.value as CanvasElement)
+const handleElement = computed(() => canvasObject.value as FabricObject)
 
 const canGroup = computed(() => {
   if (!handleElement.value) return false
@@ -173,7 +173,7 @@ const lock = computed(() => {
   return handleElement.value.lockMovementX && handleElement.value.lockMovementY ? true : false
 })
 
-// 锁定解锁
+// // 锁定解锁
 const changeElementLock = (status: boolean) => {
   if (!handleElement.value) return
   handleElement.value.lockMovementY = handleElement.value.lockMovementX = status
@@ -196,29 +196,29 @@ const intersection = () => {
   intersectElements()
 }
 
-// 修改旋转
-const changeRotate = (value: number) => {
-  const [ canvas ] = useCanvas()
-  if (!handleElement.value || !canvas) return
-  handleElement.value.set({angle: value})
-  canvas.renderAll()
-  templatesStore.modifedElement()
-}
+// // 修改旋转
+// const changeRotate = (value: number) => {
+//   const [ canvas ] = useCanvas()
+//   if (!handleElement.value || !canvas) return
+//   handleElement.value.set({angle: value})
+//   canvas.renderAll()
+//   templatesStore.modifedElement()
+// }
 
 // 修改旋转45度（顺时针或逆时针）
-const changeRotate45 = (command: '+' | '-') => {
-  const [ canvas ] = useCanvas()
-  if (!handleElement.value || !canvas) return
-  let _rotate = Math.floor(rotate.value / 45) * 45
-  if (command === '+') _rotate = _rotate + 45
-  else if (command === '-') _rotate = _rotate - 45
-  if (_rotate < -180) _rotate = -180
-  if (_rotate > 180) _rotate = 180
-  rotate.value = _rotate
-  handleElement.value.angle = _rotate
-  canvas.renderAll()
-  templatesStore.modifedElement()
-}
+// const changeRotate45 = (command: '+' | '-') => {
+//   const [ canvas ] = useCanvas()
+//   if (!handleElement.value || !canvas) return
+//   let _rotate = Math.floor(rotate.value / 45) * 45
+//   if (command === '+') _rotate = _rotate + 45
+//   else if (command === '-') _rotate = _rotate - 45
+//   if (_rotate < -180) _rotate = -180
+//   if (_rotate > 180) _rotate = 180
+//   rotate.value = _rotate
+//   handleElement.value.angle = _rotate
+//   canvas.renderAll()
+//   templatesStore.modifedElement()
+// }
 
 const applyCanvasPresetScale = (value: number) => {
   setCanvasScalePercentage(value)

src/views/Editor/CanvasMenu/components/LayerComponents/LayerDraggableCom.vue

@@ -53,7 +53,7 @@ import { ElementNames } from '@/types/elements'
 import { useMainStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import useHandleElement from "@/hooks/useHandleElement"
-import { Group } from 'fabric'
+import { Group, Object as FabricObject } from 'fabric'
 
 const { 
   selectElement, 
@@ -68,7 +68,7 @@ const {
 
 const props = defineProps({
   element: {
-    type: Object as PropType<CanvasElement>,
+    type: Object as PropType<FabricObject>,
     required: true,
   },
   index: {
@@ -80,7 +80,7 @@ const props = defineProps({
 const mainStore = useMainStore()
 const { canvasObject } = storeToRefs(mainStore)
 
-const handleElement = computed(() => canvasObject.value as CanvasElement)
+const handleElement = computed(() => canvasObject.value as FabricObject)
 </script>
 <style lang="scss" scoped>
 .layout-search {

src/views/Editor/CanvasRight/Backgrounds/ElementFill.vue

@@ -308,20 +308,20 @@ watch(gridColorRecent, () => {
 const handleElement = computed(() => canvasObject.value as CanvasElement)
 
 const background = computed(() => {
-  if (!canvasObject.value) {
+  if (!handleElement.value) {
     return {
       fillType: 0,
       fill: '#fff',
     } as BackgroundElement
   }
-  if (!canvasObject.value.background) {
+  if (!handleElement.value.background) {
     return {
       fillType: 0,
       fill: handleElement.value.fill,
       color: (handleElement.value as TextboxElement).color
     } as BackgroundElement
   }
-  return canvasObject.value.background
+  return handleElement.value.background
 })
 
 // 设置背景图片隐藏

src/views/Editor/CanvasRight/Backgrounds/index.vue

@@ -771,7 +771,7 @@ const generateShadingBackgroundRandom = () => {
 const generateBackgroundImage = async (backgroundImage: Image, url: string) => {
   const [ canvas ] = useCanvas()
   if (canvasObject.value && canvasObject.value.name === 'backgroundImage') {
-    const imageElement = canvasObject.value as ImageElement
+    const imageElement = canvasObject.value as Image
     await imageElement.setSrc(url)
   }
   else {

src/views/Editor/CanvasRight/Components/ElementClip.vue

@@ -37,13 +37,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { PathShapeLibs } from '@/configs/shape'
 import { PathPoolItem } from '@/types/elements'
 import { useMainStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import { Path } from 'fabric'
-import { nanoid } from 'nanoid'
 import { PathElement } from '@/types/canvas'
 import useCanvas from '@/views/Canvas/useCanvas'
 const mainStore = useMainStore()

src/views/Editor/CanvasRight/Components/ElementFilter.vue

@@ -212,15 +212,15 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
-import { filters } from 'fabric'
+import { filters, Image } from 'fabric'
 import { ImageElement } from '@/types/canvas'
 import { ElementNames } from '@/types/elements'
 import { SharpenMatrix, EmbossMatrix, GrayscaleType } from '@/configs/images'
 import useCanvas from '@/views/Canvas/useCanvas'
 
 const [ canvas ] = useCanvas()
 const { canvasObject } = storeToRefs(useMainStore())
-const handleElement = computed(() => canvasObject.value as ImageElement)
+const handleElement = computed(() => canvasObject.value as Image)
 
 interface FilterOption {
   label: string

src/views/Editor/CanvasRight/Components/ElementGradient.vue

@@ -13,7 +13,7 @@
           <template #reference>
             <ColorButton :color="maskColor" style="flex: 3;" />
           </template>
-          <ColorPicker :modelValue="maskColor" @update:modelValue="color => updateMaskColor(color)"/>
+          <ColorPicker :modelValue="maskColor" @update:modelValue="(color: string) => updateMaskColor(color)"/>
         </el-popover>
       </div>
       <div class="row">
@@ -29,7 +29,7 @@ import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { ImageElement } from '@/types/canvas'
-import { filters } from 'fabric'
+import { filters, Image } from 'fabric'
 import useCanvas from '@/views/Canvas/useCanvas'
 
 const BlendColorFilter = 'BlendColor'
@@ -39,7 +39,7 @@ const maskAlpha = ref(0.3)
 const { canvasObject } = storeToRefs(useMainStore())
 
 const hasGradient = ref(false)
-const handleElement = computed(() => canvasObject.value as ImageElement)
+const handleElement = computed(() => canvasObject.value as Image)
 
 const updateMaskColor = (color: string) => {
   maskColor.value = color