feat:add save as image element contextmenu

src/editor/assets/css/index.css

@@ -374,6 +374,10 @@
   background-image: url(../../assets/images/print.svg);
 }
 
+.contextmenu-image {
+  background-image: url(../../assets/images/image.svg);
+}
+
 .contextmenu-insert-row-col {
   background-image: url(../../assets/images/insert-row-col.svg);
 }

src/editor/assets/images/image.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_0-公共_x2F_02工具栏_x2F_插入图片-16px-"><g id="Group-19" transform="translate(1 1)"><path id="Combined-Shape" class="st0" d="M1 0h12c.6 0 1 .4 1 1v11c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm0 1v11h12V1H1z"/><circle id="椭圆形" class="st0" cx="10" cy="4" r="1"/><path id="Path" class="st0" d="M8.5 11.2l-4-4.1L1 10.7V9.2c1.7-1.6 2.7-2.5 3-2.8.4-.5.7-.4 1 0L8.5 10 11 7.3c.4-.5.6-.5 1-.1l2 2.8v1.5l-2.5-3.4-3 3.1z"/></g></g></svg>

src/editor/core/command/Command.ts

@@ -55,6 +55,7 @@ export class Command {
   private static search: Function
   private static replace: Function
   private static print: Function
+  private static saveAsImageElement: Function
   private static getImage: Function
   private static getValue: Function
   private static getWordCount: Function
@@ -111,6 +112,7 @@ export class Command {
     Command.search = adapt.search.bind(adapt)
     Command.replace = adapt.replace.bind(adapt)
     Command.print = adapt.print.bind(adapt)
+    Command.saveAsImageElement = adapt.saveAsImageElement.bind(adapt)
     Command.getImage = adapt.getImage.bind(adapt)
     Command.getValue = adapt.getValue.bind(adapt)
     Command.getWordCount = adapt.getWordCount.bind(adapt)
@@ -309,6 +311,10 @@ export class Command {
     return Command.print()
   }
 
+  public executeSaveAsImageElement() {
+    return Command.saveAsImageElement()
+  }
+
   public getImage(): string[] {
     return Command.getImage()
   }

src/editor/core/command/CommandAdapt.ts

@@ -13,7 +13,7 @@ import { IColgroup } from '../../interface/table/Colgroup'
 import { ITd } from '../../interface/table/Td'
 import { ITr } from '../../interface/table/Tr'
 import { IWatermark } from '../../interface/Watermark'
-import { getUUID } from '../../utils'
+import { downloadFile, getUUID } from '../../utils'
 import { formatElementList } from '../../utils/element'
 import { printImageBase64 } from '../../utils/print'
 import { Control } from '../draw/control/Control'
@@ -1238,6 +1238,14 @@ export class CommandAdapt {
     }
   }
 
+  public saveAsImageElement() {
+    const { startIndex } = this.range.getRange()
+    const elementList = this.draw.getElementList()
+    const element = elementList[startIndex]
+    if (!element || element.type !== ElementType.IMAGE) return
+    downloadFile(element.url!, `${element.id!}.png`)
+  }
+
   public getImage(): string[] {
     return this.draw.getDataURL()
   }

src/editor/core/contextmenu/ContextMenu.ts

@@ -95,7 +95,14 @@ export class ContextMenu {
     const isInTable = positionContext.isTable
     // 是否存在跨行/列
     const isCrossRowCol = isInTable && !!crossRowCol
+    // 当前元素
+    const elementList = this.draw.getElementList()
+    const startElement = elementList[startIndex] || null
+    const endElement = elementList[endIndex] || null
+
     return {
+      startElement,
+      endElement,
       isReadonly,
       editorHasSelection,
       editorTextFocus,

src/editor/core/contextmenu/menus/imageMenus.ts

@@ -0,0 +1,16 @@
+import { ElementType } from '../../../dataset/enum/Element'
+import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
+import { Command } from '../../command/Command'
+
+export const imageMenus: IRegisterContextMenu[] = [
+  {
+    name: '另存为图片',
+    icon: 'image',
+    when: (payload) => {
+      return !payload.editorHasSelection && payload.startElement?.type === ElementType.IMAGE
+    },
+    callback: (command: Command) => {
+      command.executeSaveAsImageElement()
+    }
+  },
+]

src/editor/index.ts

@@ -25,6 +25,7 @@ import { IControlOption } from './interface/Control'
 import { ICheckboxOption } from './interface/Checkbox'
 import { defaultCheckboxOption } from './dataset/constant/Checkbox'
 import { DeepRequired } from './interface/Common'
+import { imageMenus } from './core/contextmenu/menus/imageMenus'
 
 export default class Editor {
 
@@ -105,6 +106,7 @@ export default class Editor {
     })
     this.register.contextMenuList(globalMenus)
     this.register.contextMenuList(tableMenus)
+    this.register.contextMenuList(imageMenus)
   }
 
 }

src/editor/interface/contextmenu/ContextMenu.ts

@@ -1,4 +1,8 @@
+import { IElement } from '../Element'
+
 export interface IContextMenuContext {
+  startElement: IElement | null;
+  endElement: IElement | null;
   isReadonly: boolean;
   editorHasSelection: boolean;
   editorTextFocus: boolean;