From a2d668dd618ebd906625771f6c1dbb33eff89364 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sat, 25 Jun 2022 21:56:02 +0800 Subject: [PATCH] feat:add save as image element contextmenu --- src/editor/assets/css/index.css | 4 ++++ src/editor/assets/images/image.svg | 1 + src/editor/core/command/Command.ts | 6 ++++++ src/editor/core/command/CommandAdapt.ts | 10 +++++++++- src/editor/core/contextmenu/ContextMenu.ts | 7 +++++++ src/editor/core/contextmenu/menus/imageMenus.ts | 16 ++++++++++++++++ src/editor/index.ts | 2 ++ src/editor/interface/contextmenu/ContextMenu.ts | 4 ++++ 8 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 src/editor/assets/images/image.svg create mode 100644 src/editor/core/contextmenu/menus/imageMenus.ts diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index f9ce7a7..2d9bf80 100644 --- a/src/editor/assets/css/index.css +++ b/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); } diff --git a/src/editor/assets/images/image.svg b/src/editor/assets/images/image.svg new file mode 100644 index 0000000..7b43678 --- /dev/null +++ b/src/editor/assets/images/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 84df0fc..6e933b2 100644 --- a/src/editor/core/command/Command.ts +++ b/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() } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 2ed2279..e6df51a 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/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() } diff --git a/src/editor/core/contextmenu/ContextMenu.ts b/src/editor/core/contextmenu/ContextMenu.ts index f6080d1..cf8f6bc 100644 --- a/src/editor/core/contextmenu/ContextMenu.ts +++ b/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, diff --git a/src/editor/core/contextmenu/menus/imageMenus.ts b/src/editor/core/contextmenu/menus/imageMenus.ts new file mode 100644 index 0000000..2bd2fca --- /dev/null +++ b/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() + } + }, +] \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index bcda20e..87f7e8f 100644 --- a/src/editor/index.ts +++ b/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) } } diff --git a/src/editor/interface/contextmenu/ContextMenu.ts b/src/editor/interface/contextmenu/ContextMenu.ts index 9cd3a7f..8f25fa2 100644 --- a/src/editor/interface/contextmenu/ContextMenu.ts +++ b/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;