feat: add modify internal context menu interface #300

pr675
Hufe921 2 years ago
parent 45e7eab119
commit 0891f053d2

@ -8,13 +8,25 @@ import Editor from "@hufe921/canvas-editor"
const instance = new Editor(container, <IElement[]>data, options) const instance = new Editor(container, <IElement[]>data, options)
instance.register.contextMenuList([ instance.register.contextMenuList([
{ {
key?: string;
isDivider?: boolean; isDivider?: boolean;
icon?: string; icon?: string;
name?: string; // Use %s for selection text. Example: Search: %s name?: string; // Use %s for selection text. Example: Search: %s
shortCut?: string; shortCut?: string;
disable?: boolean;
when?: (payload: IContextMenuContext) => boolean; when?: (payload: IContextMenuContext) => boolean;
callback?: (command: Command, context: IContextMenuContext) => any; callback?: (command: Command, context: IContextMenuContext) => any;
childMenus?: IRegisterContextMenu[]; childMenus?: IRegisterContextMenu[];
} }
]) ])
``` ```
## getContextMenuList
Feature: Get context menu list
Usage:
```javascript
const contextMenuList = await instance.register.getContextMenuList()
```

@ -56,6 +56,7 @@ interface IEditorOption {
printPixelRatio?: number // Print the pixel ratio (larger values are clearer, but larger sizes). default: 3 printPixelRatio?: number // Print the pixel ratio (larger values are clearer, but larger sizes). default: 3
maskMargin?: IMargin // Masking margins above the editorfor example: menu bar, bottom toolbar。default: [0, 0, 0, 0] maskMargin?: IMargin // Masking margins above the editorfor example: menu bar, bottom toolbar。default: [0, 0, 0, 0]
letterClass? string[] // Alphabet class supported by typesetting. default: a-zA-Z. Built-in alternative alphabet class: LETTER_CLASS letterClass? string[] // Alphabet class supported by typesetting. default: a-zA-Z. Built-in alternative alphabet class: LETTER_CLASS
contextMenuDisableKeys?: string[] // Disable context menu keys. default: []
wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string;} watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string;}
control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;} control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}

@ -8,13 +8,25 @@ import Editor from "@hufe921/canvas-editor"
const instance = new Editor(container, <IElement[]>data, options) const instance = new Editor(container, <IElement[]>data, options)
instance.register.contextMenuList([ instance.register.contextMenuList([
{ {
key?: string;
isDivider?: boolean; isDivider?: boolean;
icon?: string; icon?: string;
name?: string; // 使用%s代表选区文本。示例搜索%s name?: string; // 使用%s代表选区文本。示例搜索%s
shortCut?: string; shortCut?: string;
disable?: boolean;
when?: (payload: IContextMenuContext) => boolean; when?: (payload: IContextMenuContext) => boolean;
callback?: (command: Command, context: IContextMenuContext) => any; callback?: (command: Command, context: IContextMenuContext) => any;
childMenus?: IRegisterContextMenu[]; childMenus?: IRegisterContextMenu[];
} }
]) ])
``` ```
## getContextMenuList
功能:获取注册的右键菜单列表
用法:
```javascript
const contextMenuList = await instance.register.getContextMenuList()
```

@ -55,7 +55,8 @@ interface IEditorOption {
historyMaxRecordCount?: number // 历史撤销重做最大记录次数。默认100次 historyMaxRecordCount?: number // 历史撤销重做最大记录次数。默认100次
printPixelRatio?: number // 打印像素比率值越大越清晰但尺寸越大。默认3 printPixelRatio?: number // 打印像素比率值越大越清晰但尺寸越大。默认3
maskMargin?: IMargin // 编辑器上的遮盖边距(如悬浮到编辑器上的菜单栏、底部工具栏)。默认:[0, 0, 0, 0] maskMargin?: IMargin // 编辑器上的遮盖边距(如悬浮到编辑器上的菜单栏、底部工具栏)。默认:[0, 0, 0, 0]
letterClass? string[] // 排版支持的字母类。默认a-zA-Z。内置可选择的字母表类LETTER_CLASS letterClass?: string[] // 排版支持的字母类。默认a-zA-Z。内置可选择的字母表类LETTER_CLASS
contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认:[]
wordBreak?: WordBreak // 单词与标点断行BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认BREAK_WORD wordBreak?: WordBreak // 单词与标点断行BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认BREAK_WORD
watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;} watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;} control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}

@ -1,6 +1,8 @@
import { NAME_PLACEHOLDER } from '../../dataset/constant/ContextMenu' import { NAME_PLACEHOLDER } from '../../dataset/constant/ContextMenu'
import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor' import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor'
import { EditorComponent } from '../../dataset/enum/Editor' import { EditorComponent } from '../../dataset/enum/Editor'
import { DeepRequired } from '../../interface/Common'
import { IEditorOption } from '../../interface/Editor'
import { import {
IContextMenuContext, IContextMenuContext,
IRegisterContextMenu IRegisterContextMenu
@ -25,6 +27,7 @@ interface IRenderPayload {
} }
export class ContextMenu { export class ContextMenu {
private options: DeepRequired<IEditorOption>
private draw: Draw private draw: Draw
private command: Command private command: Command
private range: RangeManager private range: RangeManager
@ -37,6 +40,7 @@ export class ContextMenu {
private context: IContextMenuContext | null private context: IContextMenuContext | null
constructor(draw: Draw, command: Command) { constructor(draw: Draw, command: Command) {
this.options = draw.getOptions()
this.draw = draw this.draw = draw
this.command = command this.command = command
this.range = draw.getRange() this.range = draw.getRange()
@ -57,6 +61,10 @@ export class ContextMenu {
this._addEvent() this._addEvent()
} }
public getContextMenuList(): IRegisterContextMenu[] {
return this.contextMenuList
}
private _addEvent() { private _addEvent() {
// 菜单权限 // 菜单权限
this.container.addEventListener('contextmenu', this._proxyContextMenuEvent) this.container.addEventListener('contextmenu', this._proxyContextMenuEvent)
@ -72,22 +80,34 @@ export class ContextMenu {
document.removeEventListener('mousedown', this._handleSideEffect) document.removeEventListener('mousedown', this._handleSideEffect)
} }
private _proxyContextMenuEvent = (evt: MouseEvent) => { private _filterMenuList(
this.context = this._getContext() menuList: IRegisterContextMenu[]
): IRegisterContextMenu[] {
const { contextMenuDisableKeys } = this.options
const renderList: IRegisterContextMenu[] = [] const renderList: IRegisterContextMenu[] = []
let isRegisterContextMenu = false for (let m = 0; m < menuList.length; m++) {
for (let c = 0; c < this.contextMenuList.length; c++) { const menu = menuList[m]
const menu = this.contextMenuList[c] if (
menu.disable ||
(menu.key && contextMenuDisableKeys.includes(menu.key))
) {
continue
}
if (menu.isDivider) { if (menu.isDivider) {
renderList.push(menu) renderList.push(menu)
} else { } else {
const isMatch = menu.when?.(this.context) if (menu.when?.(this.context!)) {
if (isMatch) {
renderList.push(menu) renderList.push(menu)
isRegisterContextMenu = true
} }
} }
} }
return renderList
}
private _proxyContextMenuEvent = (evt: MouseEvent) => {
this.context = this._getContext()
const renderList = this._filterMenuList(this.contextMenuList)
const isRegisterContextMenu = renderList.some(menu => !menu.isDivider)
if (isRegisterContextMenu) { if (isRegisterContextMenu) {
this.dispose() this.dispose()
this._render({ this._render({
@ -180,8 +200,12 @@ export class ContextMenu {
for (let c = 0; c < contextMenuList.length; c++) { for (let c = 0; c < contextMenuList.length; c++) {
const menu = contextMenuList[c] const menu = contextMenuList[c]
if (menu.isDivider) { if (menu.isDivider) {
// 首尾分隔符不渲染 // 分割线相邻 || 首尾分隔符时不渲染
if (c !== 0 && c !== contextMenuList.length - 1) { if (
c !== 0 &&
c !== contextMenuList.length - 1 &&
!contextMenuList[c - 1]?.isDivider
) {
const divider = document.createElement('div') const divider = document.createElement('div')
divider.classList.add(`${EDITOR_PREFIX}-contextmenu-divider`) divider.classList.add(`${EDITOR_PREFIX}-contextmenu-divider`)
contextMenuContent.append(divider) contextMenuContent.append(divider)
@ -191,6 +215,9 @@ export class ContextMenu {
menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-item`) menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-item`)
// 菜单事件 // 菜单事件
if (menu.childMenus) { if (menu.childMenus) {
const childMenus = this._filterMenuList(menu.childMenus)
const isRegisterContextMenu = childMenus.some(menu => !menu.isDivider)
if (isRegisterContextMenu) {
menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-sub-item`) menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-sub-item`)
menuItem.onmouseenter = () => { menuItem.onmouseenter = () => {
this._setHoverStatus(menuItem, true) this._setHoverStatus(menuItem, true)
@ -200,7 +227,7 @@ export class ContextMenu {
const left = subMenuRect.left + subMenuRect.width const left = subMenuRect.left + subMenuRect.width
const top = subMenuRect.top const top = subMenuRect.top
childMenuContainer = this._render({ childMenuContainer = this._render({
contextMenuList: menu.childMenus!, contextMenuList: childMenus,
left, left,
top, top,
parentMenuContainer: contextMenuContainer parentMenuContainer: contextMenuContainer
@ -215,6 +242,7 @@ export class ContextMenu {
this._setHoverStatus(menuItem, false) this._setHoverStatus(menuItem, false)
} }
} }
}
} else { } else {
menuItem.onmouseenter = () => { menuItem.onmouseenter = () => {
this._setHoverStatus(menuItem, true) this._setHoverStatus(menuItem, true)

@ -1,9 +1,14 @@
import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
import { ElementType } from '../../../dataset/enum/Element' import { ElementType } from '../../../dataset/enum/Element'
import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu' import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
import { Command } from '../../command/Command' import { Command } from '../../command/Command'
const {
CONTROL: { DELETE }
} = INTERNAL_CONTEXT_MENU_KEY
export const controlMenus: IRegisterContextMenu[] = [ export const controlMenus: IRegisterContextMenu[] = [
{ {
key: DELETE,
i18nPath: 'contextmenu.control.delete', i18nPath: 'contextmenu.control.delete',
when: payload => { when: payload => {
return ( return (

@ -1,9 +1,14 @@
import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu' import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
import { isApple } from '../../../utils/ua' import { isApple } from '../../../utils/ua'
import { Command } from '../../command/Command' import { Command } from '../../command/Command'
const {
GLOBAL: { CUT, COPY, PASTE, SELECT_ALL, PRINT }
} = INTERNAL_CONTEXT_MENU_KEY
export const globalMenus: IRegisterContextMenu[] = [ export const globalMenus: IRegisterContextMenu[] = [
{ {
key: CUT,
i18nPath: 'contextmenu.global.cut', i18nPath: 'contextmenu.global.cut',
shortCut: `${isApple ? '⌘' : 'Ctrl'} + X`, shortCut: `${isApple ? '⌘' : 'Ctrl'} + X`,
when: payload => { when: payload => {
@ -14,6 +19,7 @@ export const globalMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: COPY,
i18nPath: 'contextmenu.global.copy', i18nPath: 'contextmenu.global.copy',
shortCut: `${isApple ? '⌘' : 'Ctrl'} + C`, shortCut: `${isApple ? '⌘' : 'Ctrl'} + C`,
when: payload => { when: payload => {
@ -24,6 +30,7 @@ export const globalMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: PASTE,
i18nPath: 'contextmenu.global.paste', i18nPath: 'contextmenu.global.paste',
shortCut: `${isApple ? '⌘' : 'Ctrl'} + V`, shortCut: `${isApple ? '⌘' : 'Ctrl'} + V`,
when: payload => { when: payload => {
@ -34,6 +41,7 @@ export const globalMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: SELECT_ALL,
i18nPath: 'contextmenu.global.selectAll', i18nPath: 'contextmenu.global.selectAll',
shortCut: `${isApple ? '⌘' : 'Ctrl'} + A`, shortCut: `${isApple ? '⌘' : 'Ctrl'} + A`,
when: payload => { when: payload => {
@ -47,6 +55,7 @@ export const globalMenus: IRegisterContextMenu[] = [
isDivider: true isDivider: true
}, },
{ {
key: PRINT,
i18nPath: 'contextmenu.global.print', i18nPath: 'contextmenu.global.print',
icon: 'print', icon: 'print',
when: () => true, when: () => true,

@ -1,12 +1,17 @@
import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
import { ElementType } from '../../../dataset/enum/Element' import { ElementType } from '../../../dataset/enum/Element'
import { import {
IContextMenuContext, IContextMenuContext,
IRegisterContextMenu IRegisterContextMenu
} from '../../../interface/contextmenu/ContextMenu' } from '../../../interface/contextmenu/ContextMenu'
import { Command } from '../../command/Command' import { Command } from '../../command/Command'
const {
HYPERLINK: { DELETE, CANCEL, EDIT }
} = INTERNAL_CONTEXT_MENU_KEY
export const hyperlinkMenus: IRegisterContextMenu[] = [ export const hyperlinkMenus: IRegisterContextMenu[] = [
{ {
key: DELETE,
i18nPath: 'contextmenu.hyperlink.delete', i18nPath: 'contextmenu.hyperlink.delete',
when: payload => { when: payload => {
return ( return (
@ -19,6 +24,7 @@ export const hyperlinkMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: CANCEL,
i18nPath: 'contextmenu.hyperlink.cancel', i18nPath: 'contextmenu.hyperlink.cancel',
when: payload => { when: payload => {
return ( return (
@ -31,6 +37,7 @@ export const hyperlinkMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: EDIT,
i18nPath: 'contextmenu.hyperlink.edit', i18nPath: 'contextmenu.hyperlink.edit',
when: payload => { when: payload => {
return ( return (

@ -1,3 +1,4 @@
import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
import { ImageDisplay } from '../../../dataset/enum/Control' import { ImageDisplay } from '../../../dataset/enum/Control'
import { ElementType } from '../../../dataset/enum/Element' import { ElementType } from '../../../dataset/enum/Element'
import { import {
@ -5,9 +6,13 @@ import {
IRegisterContextMenu IRegisterContextMenu
} from '../../../interface/contextmenu/ContextMenu' } from '../../../interface/contextmenu/ContextMenu'
import { Command } from '../../command/Command' import { Command } from '../../command/Command'
const {
IMAGE: { CHANGE, SAVE_AS, TEXT_WRAP, TEXT_WRAP_EMBED, TEXT_WRAP_UP_DOWN }
} = INTERNAL_CONTEXT_MENU_KEY
export const imageMenus: IRegisterContextMenu[] = [ export const imageMenus: IRegisterContextMenu[] = [
{ {
key: CHANGE,
i18nPath: 'contextmenu.image.change', i18nPath: 'contextmenu.image.change',
icon: 'image-change', icon: 'image-change',
when: payload => { when: payload => {
@ -36,6 +41,7 @@ export const imageMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: SAVE_AS,
i18nPath: 'contextmenu.image.saveAs', i18nPath: 'contextmenu.image.saveAs',
icon: 'image', icon: 'image',
when: payload => { when: payload => {
@ -49,6 +55,7 @@ export const imageMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: TEXT_WRAP,
i18nPath: 'contextmenu.image.textWrap', i18nPath: 'contextmenu.image.textWrap',
when: payload => { when: payload => {
return ( return (
@ -59,6 +66,7 @@ export const imageMenus: IRegisterContextMenu[] = [
}, },
childMenus: [ childMenus: [
{ {
key: TEXT_WRAP_EMBED,
i18nPath: 'contextmenu.image.textWrapType.embed', i18nPath: 'contextmenu.image.textWrapType.embed',
when: () => true, when: () => true,
callback: (command: Command, context: IContextMenuContext) => { callback: (command: Command, context: IContextMenuContext) => {
@ -69,6 +77,7 @@ export const imageMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: TEXT_WRAP_UP_DOWN,
i18nPath: 'contextmenu.image.textWrapType.upDown', i18nPath: 'contextmenu.image.textWrapType.upDown',
when: () => true, when: () => true,
callback: (command: Command, context: IContextMenuContext) => { callback: (command: Command, context: IContextMenuContext) => {

@ -1,13 +1,46 @@
import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
import { VerticalAlign } from '../../../dataset/enum/VerticalAlign' import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
import { TableBorder, TdBorder, TdSlash } from '../../../dataset/enum/table/Table' import {
TableBorder,
TdBorder,
TdSlash
} from '../../../dataset/enum/table/Table'
import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu' import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
import { Command } from '../../command/Command' import { Command } from '../../command/Command'
const {
TABLE: {
BORDER,
BORDER_ALL,
BORDER_EMPTY,
BORDER_EXTERNAL,
BORDER_TD,
BORDER_TD_BOTTOM,
BORDER_TD_BACK,
BORDER_TD_FORWARD,
VERTICAL_ALIGN,
VERTICAL_ALIGN_TOP,
VERTICAL_ALIGN_MIDDLE,
VERTICAL_ALIGN_BOTTOM,
INSERT_ROW_COL,
INSERT_TOP_ROW,
INSERT_BOTTOM_ROW,
INSERT_LEFT_COL,
INSERT_RIGHT_COL,
DELETE_ROW_COL,
DELETE_ROW,
DELETE_COL,
DELETE_TABLE,
MERGE_CELL,
CANCEL_MERGE_CELL
}
} = INTERNAL_CONTEXT_MENU_KEY
export const tableMenus: IRegisterContextMenu[] = [ export const tableMenus: IRegisterContextMenu[] = [
{ {
isDivider: true isDivider: true
}, },
{ {
key: BORDER,
i18nPath: 'contextmenu.table.border', i18nPath: 'contextmenu.table.border',
icon: 'border-all', icon: 'border-all',
when: payload => { when: payload => {
@ -15,6 +48,7 @@ export const tableMenus: IRegisterContextMenu[] = [
}, },
childMenus: [ childMenus: [
{ {
key: BORDER_ALL,
i18nPath: 'contextmenu.table.borderAll', i18nPath: 'contextmenu.table.borderAll',
icon: 'border-all', icon: 'border-all',
when: () => true, when: () => true,
@ -23,6 +57,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: BORDER_EMPTY,
i18nPath: 'contextmenu.table.borderEmpty', i18nPath: 'contextmenu.table.borderEmpty',
icon: 'border-empty', icon: 'border-empty',
when: () => true, when: () => true,
@ -31,6 +66,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: BORDER_EXTERNAL,
i18nPath: 'contextmenu.table.borderExternal', i18nPath: 'contextmenu.table.borderExternal',
icon: 'border-external', icon: 'border-external',
when: () => true, when: () => true,
@ -39,11 +75,13 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: BORDER_TD,
i18nPath: 'contextmenu.table.borderTd', i18nPath: 'contextmenu.table.borderTd',
icon: 'border-td', icon: 'border-td',
when: () => true, when: () => true,
childMenus: [ childMenus: [
{ {
key: BORDER_TD_BOTTOM,
i18nPath: 'contextmenu.table.borderTdBottom', i18nPath: 'contextmenu.table.borderTdBottom',
icon: 'border-td-bottom', icon: 'border-td-bottom',
when: () => true, when: () => true,
@ -52,6 +90,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: BORDER_TD_FORWARD,
i18nPath: 'contextmenu.table.borderTdForward', i18nPath: 'contextmenu.table.borderTdForward',
icon: 'border-td-forward', icon: 'border-td-forward',
when: () => true, when: () => true,
@ -60,6 +99,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: BORDER_TD_BACK,
i18nPath: 'contextmenu.table.borderTdBack', i18nPath: 'contextmenu.table.borderTdBack',
icon: 'border-td-back', icon: 'border-td-back',
when: () => true, when: () => true,
@ -72,6 +112,7 @@ export const tableMenus: IRegisterContextMenu[] = [
] ]
}, },
{ {
key: VERTICAL_ALIGN,
i18nPath: 'contextmenu.table.verticalAlign', i18nPath: 'contextmenu.table.verticalAlign',
icon: 'vertical-align', icon: 'vertical-align',
when: payload => { when: payload => {
@ -79,6 +120,7 @@ export const tableMenus: IRegisterContextMenu[] = [
}, },
childMenus: [ childMenus: [
{ {
key: VERTICAL_ALIGN_TOP,
i18nPath: 'contextmenu.table.verticalAlignTop', i18nPath: 'contextmenu.table.verticalAlignTop',
icon: 'vertical-align-top', icon: 'vertical-align-top',
when: () => true, when: () => true,
@ -87,6 +129,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: VERTICAL_ALIGN_MIDDLE,
i18nPath: 'contextmenu.table.verticalAlignMiddle', i18nPath: 'contextmenu.table.verticalAlignMiddle',
icon: 'vertical-align-middle', icon: 'vertical-align-middle',
when: () => true, when: () => true,
@ -95,6 +138,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: VERTICAL_ALIGN_BOTTOM,
i18nPath: 'contextmenu.table.verticalAlignBottom', i18nPath: 'contextmenu.table.verticalAlignBottom',
icon: 'vertical-align-bottom', icon: 'vertical-align-bottom',
when: () => true, when: () => true,
@ -105,6 +149,7 @@ export const tableMenus: IRegisterContextMenu[] = [
] ]
}, },
{ {
key: INSERT_ROW_COL,
i18nPath: 'contextmenu.table.insertRowCol', i18nPath: 'contextmenu.table.insertRowCol',
icon: 'insert-row-col', icon: 'insert-row-col',
when: payload => { when: payload => {
@ -112,6 +157,7 @@ export const tableMenus: IRegisterContextMenu[] = [
}, },
childMenus: [ childMenus: [
{ {
key: INSERT_TOP_ROW,
i18nPath: 'contextmenu.table.insertTopRow', i18nPath: 'contextmenu.table.insertTopRow',
icon: 'insert-top-row', icon: 'insert-top-row',
when: () => true, when: () => true,
@ -120,6 +166,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: INSERT_BOTTOM_ROW,
i18nPath: 'contextmenu.table.insertBottomRow', i18nPath: 'contextmenu.table.insertBottomRow',
icon: 'insert-bottom-row', icon: 'insert-bottom-row',
when: () => true, when: () => true,
@ -128,6 +175,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: INSERT_LEFT_COL,
i18nPath: 'contextmenu.table.insertLeftCol', i18nPath: 'contextmenu.table.insertLeftCol',
icon: 'insert-left-col', icon: 'insert-left-col',
when: () => true, when: () => true,
@ -136,6 +184,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: INSERT_RIGHT_COL,
i18nPath: 'contextmenu.table.insertRightCol', i18nPath: 'contextmenu.table.insertRightCol',
icon: 'insert-right-col', icon: 'insert-right-col',
when: () => true, when: () => true,
@ -146,6 +195,7 @@ export const tableMenus: IRegisterContextMenu[] = [
] ]
}, },
{ {
key: DELETE_ROW_COL,
i18nPath: 'contextmenu.table.deleteRowCol', i18nPath: 'contextmenu.table.deleteRowCol',
icon: 'delete-row-col', icon: 'delete-row-col',
when: payload => { when: payload => {
@ -153,6 +203,7 @@ export const tableMenus: IRegisterContextMenu[] = [
}, },
childMenus: [ childMenus: [
{ {
key: DELETE_ROW,
i18nPath: 'contextmenu.table.deleteRow', i18nPath: 'contextmenu.table.deleteRow',
icon: 'delete-row', icon: 'delete-row',
when: () => true, when: () => true,
@ -161,6 +212,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: DELETE_COL,
i18nPath: 'contextmenu.table.deleteCol', i18nPath: 'contextmenu.table.deleteCol',
icon: 'delete-col', icon: 'delete-col',
when: () => true, when: () => true,
@ -169,6 +221,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: DELETE_TABLE,
i18nPath: 'contextmenu.table.deleteTable', i18nPath: 'contextmenu.table.deleteTable',
icon: 'delete-table', icon: 'delete-table',
when: () => true, when: () => true,
@ -179,6 +232,7 @@ export const tableMenus: IRegisterContextMenu[] = [
] ]
}, },
{ {
key: MERGE_CELL,
i18nPath: 'contextmenu.table.mergeCell', i18nPath: 'contextmenu.table.mergeCell',
icon: 'merge-cell', icon: 'merge-cell',
when: payload => { when: payload => {
@ -189,6 +243,7 @@ export const tableMenus: IRegisterContextMenu[] = [
} }
}, },
{ {
key: CANCEL_MERGE_CELL,
i18nPath: 'contextmenu.table.mergeCancelCell', i18nPath: 'contextmenu.table.mergeCancelCell',
icon: 'merge-cancel-cell', icon: 'merge-cancel-cell',
when: payload => { when: payload => {

@ -14,12 +14,14 @@ interface IRegisterPayload {
export class Register { export class Register {
public contextMenuList: (payload: IRegisterContextMenu[]) => void public contextMenuList: (payload: IRegisterContextMenu[]) => void
public getContextMenuList: () => IRegisterContextMenu[]
public shortcutList: (payload: IRegisterShortcut[]) => void public shortcutList: (payload: IRegisterShortcut[]) => void
public langMap: (locale: string, lang: DeepPartial<ILang>) => void public langMap: (locale: string, lang: DeepPartial<ILang>) => void
constructor(payload: IRegisterPayload) { constructor(payload: IRegisterPayload) {
const { contextMenu, shortcut, i18n } = payload const { contextMenu, shortcut, i18n } = payload
this.contextMenuList = contextMenu.registerContextMenuList.bind(contextMenu) this.contextMenuList = contextMenu.registerContextMenuList.bind(contextMenu)
this.getContextMenuList = contextMenu.getContextMenuList.bind(contextMenu)
this.shortcutList = shortcut.registerShortcutList.bind(shortcut) this.shortcutList = shortcut.registerShortcutList.bind(shortcut)
this.langMap = i18n.registerLangMap.bind(i18n) this.langMap = i18n.registerLangMap.bind(i18n)
} }

@ -1,3 +1,53 @@
export const NAME_PLACEHOLDER = { export const NAME_PLACEHOLDER = {
SELECTED_TEXT: '%s' SELECTED_TEXT: '%s'
} }
export const INTERNAL_CONTEXT_MENU_KEY = {
GLOBAL: {
CUT: 'globalCut',
COPY: 'globalCopy',
PASTE: 'globalPaste',
SELECT_ALL: 'globalSelectAll',
PRINT: 'globalPrint'
},
CONTROL: {
DELETE: 'controlDelete'
},
HYPERLINK: {
DELETE: 'hyperlinkDelete',
CANCEL: 'hyperlinkCancel',
EDIT: 'hyperEdit'
},
IMAGE: {
CHANGE: 'imageChange',
SAVE_AS: 'imageSaveAs',
TEXT_WRAP: 'imageTextWrap',
TEXT_WRAP_EMBED: 'imageTextWrapEmbed',
TEXT_WRAP_UP_DOWN: 'imageTextWrapUpDown'
},
TABLE: {
BORDER: 'border',
BORDER_ALL: 'tableBorderAll',
BORDER_EMPTY: 'tableBorderEmpty',
BORDER_EXTERNAL: 'tableBorderExternal',
BORDER_TD: 'tableBorderTd',
BORDER_TD_BOTTOM: 'tableBorderTdBottom',
BORDER_TD_FORWARD: 'tableBorderTdForward',
BORDER_TD_BACK: 'tableBorderTdBack',
VERTICAL_ALIGN: 'tableVerticalAlign',
VERTICAL_ALIGN_TOP: 'tableVerticalAlignTop',
VERTICAL_ALIGN_MIDDLE: 'tableVerticalAlignMiddle',
VERTICAL_ALIGN_BOTTOM: 'tableVerticalAlignBottom',
INSERT_ROW_COL: 'tableInsertRowCol',
INSERT_TOP_ROW: 'tableInsertTopRow',
INSERT_BOTTOM_ROW: 'tableInsertBottomRow',
INSERT_LEFT_COL: 'tableInsertLeftCol',
INSERT_RIGHT_COL: 'tableInsertRightCol',
DELETE_ROW_COL: 'tableDeleteRowCol',
DELETE_ROW: 'tableDeleteRow',
DELETE_COL: 'tableDeleteCol',
DELETE_TABLE: 'tableDeleteTable',
MERGE_CELL: 'tableMergeCell',
CANCEL_MERGE_CELL: 'tableCancelMergeCell'
}
}

@ -66,6 +66,7 @@ import { Override } from './core/override/Override'
import { defaultPageBreakOption } from './dataset/constant/PageBreak' import { defaultPageBreakOption } from './dataset/constant/PageBreak'
import { IPageBreak } from './interface/PageBreak' import { IPageBreak } from './interface/PageBreak'
import { LETTER_CLASS } from './dataset/constant/Common' import { LETTER_CLASS } from './dataset/constant/Common'
import { INTERNAL_CONTEXT_MENU_KEY } from './dataset/constant/ContextMenu'
export default class Editor { export default class Editor {
public command: Command public command: Command
@ -167,6 +168,7 @@ export default class Editor {
printPixelRatio: 3, printPixelRatio: 3,
maskMargin: [0, 0, 0, 0], maskMargin: [0, 0, 0, 0],
letterClass: [LETTER_CLASS.ENGLISH], letterClass: [LETTER_CLASS.ENGLISH],
contextMenuDisableKeys: [],
...options, ...options,
header: headerOptions, header: headerOptions,
footer: footerOptions, footer: footerOptions,
@ -248,6 +250,7 @@ export default class Editor {
export { export {
EDITOR_COMPONENT, EDITOR_COMPONENT,
LETTER_CLASS, LETTER_CLASS,
INTERNAL_CONTEXT_MENU_KEY,
Editor, Editor,
RowFlex, RowFlex,
VerticalAlign, VerticalAlign,

@ -65,6 +65,7 @@ export interface IEditorOption {
printPixelRatio?: number printPixelRatio?: number
maskMargin?: IMargin maskMargin?: IMargin
letterClass?: string[] letterClass?: string[]
contextMenuDisableKeys?: string[]
wordBreak?: WordBreak wordBreak?: WordBreak
header?: IHeader header?: IHeader
footer?: IFooter footer?: IFooter

@ -14,11 +14,13 @@ export interface IContextMenuContext {
} }
export interface IRegisterContextMenu { export interface IRegisterContextMenu {
key?: string
i18nPath?: string i18nPath?: string
isDivider?: boolean isDivider?: boolean
icon?: string icon?: string
name?: string name?: string
shortCut?: string shortCut?: string
disable?: boolean
when?: (payload: IContextMenuContext) => boolean when?: (payload: IContextMenuContext) => boolean
callback?: (command: Command, context: IContextMenuContext) => any callback?: (command: Command, context: IContextMenuContext) => any
childMenus?: IRegisterContextMenu[] childMenus?: IRegisterContextMenu[]

Loading…
Cancel
Save