feat: add modify internal context menu interface #300
This commit is contained in:
@@ -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 editor(for example: menu bar, bottom toolbar)。default: [0, 0, 0, 0]
|
maskMargin?: IMargin // Masking margins above the editor(for 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[]
|
||||||
|
|||||||
Reference in New Issue
Block a user