lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add executeUpdateOptions api #571

Browse Source
This commit is contained in:
Hufe921
2024-05-17 20:46:36 +08:00
parent 1e669a6f03
commit 3175bad5e7
8 changed files with 226 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/core/command/Command.ts
+2
View File
@@ -90,6 +90,7 @@ export class Command {
public executeSetControlExtension: CommandAdapt['setControlExtension']
public executeSetControlProperties: CommandAdapt['setControlProperties']
public executeSetControlHighlight: CommandAdapt['setControlHighlight']
public executeUpdateOptions: CommandAdapt['updateOptions']
public getCatalog: CommandAdapt['getCatalog']
public getImage: CommandAdapt['getImage']
public getOptions: CommandAdapt['getOptions']
@@ -205,6 +206,7 @@ export class Command {
this.executeDeleteGroup = adapt.deleteGroup.bind(adapt)
this.executeLocationGroup = adapt.locationGroup.bind(adapt)
this.executeSetZone = adapt.setZone.bind(adapt)
this.executeUpdateOptions = adapt.updateOptions.bind(adapt)
// 获取
this.getImage = adapt.getImage.bind(adapt)
this.getOptions = adapt.getOptions.bind(adapt)
src/editor/core/command/CommandAdapt.ts
+11 -1
View File
@@ -45,7 +45,8 @@ import {
IEditorHTML,
IEditorOption,
IEditorResult,
IEditorText
IEditorText,
IUpdateOption
} from '../../interface/Editor'
import { IElement, IElementStyle } from '../../interface/Element'
import { IPasteOption } from '../../interface/Event'
@@ -71,6 +72,7 @@ import {
getTextFromElementList,
zipElementList
} from '../../utils/element'
import { mergeOption } from '../../utils/option'
import { printImageBase64 } from '../../utils/print'
import { Control } from '../draw/control/Control'
import { Draw } from '../draw/Draw'
@@ -2399,6 +2401,14 @@ export class CommandAdapt {
this.draw.getControl().setHighlightList(payload)
}
public updateOptions(payload: IUpdateOption) {
const newOption = mergeOption(payload)
Object.entries(newOption).forEach(([key, value]) => {
Reflect.set(this.options, key, value)
})
this.forceUpdate()
}
public getControlList(): IElement[] {
return this.draw.getControl().getList()
}
src/editor/index.ts
+3 -162
View File
@@ -24,66 +24,33 @@ import {
WordBreak
} from './dataset/enum/Editor'
import { EDITOR_COMPONENT } from './dataset/constant/Editor'
import { IHeader } from './interface/Header'
import { IWatermark } from './interface/Watermark'
import { defaultHeaderOption } from './dataset/constant/Header'
import { defaultWatermarkOption } from './dataset/constant/Watermark'
import { ControlIndentation, ControlType } from './dataset/enum/Control'
import { defaultControlOption } from './dataset/constant/Control'
import { IControlOption } from './interface/Control'
import { ICheckboxOption } from './interface/Checkbox'
import { IRadioOption } from './interface/Radio'
import { defaultCheckboxOption } from './dataset/constant/Checkbox'
import { defaultRadioOption } from './dataset/constant/Radio'
import { DeepRequired } from './interface/Common'
import { INavigateInfo } from './core/draw/interactive/Search'
import { Shortcut } from './core/shortcut/Shortcut'
import { KeyMap } from './dataset/enum/KeyMap'
import { BlockType } from './dataset/enum/Block'
import { IBlock } from './interface/Block'
import { ILang } from './interface/i18n/I18n'
import { ICursorOption } from './interface/Cursor'
import { defaultCursorOption } from './dataset/constant/Cursor'
import { IPageNumber } from './interface/PageNumber'
import { defaultPageNumberOption } from './dataset/constant/PageNumber'
import { VerticalAlign } from './dataset/enum/VerticalAlign'
import { TableBorder, TdBorder, TdSlash } from './dataset/enum/table/Table'
import { IFooter } from './interface/Footer'
import { defaultFooterOption } from './dataset/constant/Footer'
import { MaxHeightRatio, NumberType } from './dataset/enum/Common'
import { ITitleOption } from './interface/Title'
import { defaultTitleOption } from './dataset/constant/Title'
import { TitleLevel } from './dataset/enum/Title'
import { ListStyle, ListType } from './dataset/enum/List'
import { ICatalog, ICatalogItem } from './interface/Catalog'
import { IPlaceholder } from './interface/Placeholder'
import { defaultPlaceholderOption } from './dataset/constant/Placeholder'
import { Plugin } from './core/plugin/Plugin'
import { UsePlugin } from './interface/Plugin'
import { EventBus } from './core/event/eventbus/EventBus'
import { EventBusMap } from './interface/EventBus'
import { IGroup } from './interface/Group'
import { defaultGroupOption } from './dataset/constant/Group'
import { IRangeStyle } from './interface/Listener'
import { Override } from './core/override/Override'
import { defaultPageBreakOption } from './dataset/constant/PageBreak'
import { IPageBreak } from './interface/PageBreak'
import { LETTER_CLASS } from './dataset/constant/Common'
import { INTERNAL_CONTEXT_MENU_KEY } from './dataset/constant/ContextMenu'
import { IRange } from './interface/Range'
import { deepClone, splitText } from './utils'
import { IZoneOption } from './interface/Zone'
import { defaultZoneOption } from './dataset/constant/Zone'
import { IBackgroundOption } from './interface/Background'
import { defaultBackground } from './dataset/constant/Background'
import { BackgroundRepeat, BackgroundSize } from './dataset/enum/Background'
import { TextDecorationStyle } from './dataset/enum/Text'
import { ILineBreakOption } from './interface/LineBreak'
import { defaultLineBreak } from './dataset/constant/LineBreak'
import { ISeparatorOption } from './interface/Separator'
import { defaultSeparatorOption } from './dataset/constant/Separator'
import { ITableOption } from './interface/table/Table'
import { defaultTableOption } from './dataset/constant/Table'
import { mergeOption } from './utils/option'
export default class Editor {
public command: Command
@@ -99,134 +66,8 @@ export default class Editor {
data: IEditorData | IElement[],
options: IEditorOption = {}
) {
const tableOptions: Required<ITableOption> = {
...defaultTableOption,
...options.table
}
const headerOptions: Required<IHeader> = {
...defaultHeaderOption,
...options.header
}
const footerOptions: Required<IFooter> = {
...defaultFooterOption,
...options.footer
}
const pageNumberOptions: Required<IPageNumber> = {
...defaultPageNumberOption,
...options.pageNumber
}
const waterMarkOptions: Required<IWatermark> = {
...defaultWatermarkOption,
...options.watermark
}
const controlOptions: Required<IControlOption> = {
...defaultControlOption,
...options.control
}
const checkboxOptions: Required<ICheckboxOption> = {
...defaultCheckboxOption,
...options.checkbox
}
const radioOptions: Required<IRadioOption> = {
...defaultRadioOption,
...options.radio
}
const cursorOptions: Required<ICursorOption> = {
...defaultCursorOption,
...options.cursor
}
const titleOptions: Required<ITitleOption> = {
...defaultTitleOption,
...options.title
}
const placeholderOptions: Required<IPlaceholder> = {
...defaultPlaceholderOption,
...options.placeholder
}
const groupOptions: Required<IGroup> = {
...defaultGroupOption,
...options.group
}
const pageBreakOptions: Required<IPageBreak> = {
...defaultPageBreakOption,
...options.pageBreak
}
const zoneOptions: Required<IZoneOption> = {
...defaultZoneOption,
...options.zone
}
const backgroundOptions: Required<IBackgroundOption> = {
...defaultBackground,
...options.background
}
const lineBreakOptions: Required<ILineBreakOption> = {
...defaultLineBreak,
...options.lineBreak
}
const separatorOptions: Required<ISeparatorOption> = {
...defaultSeparatorOption,
...options.separator
}
const editorOptions: DeepRequired<IEditorOption> = {
mode: EditorMode.EDIT,
defaultType: 'TEXT',
defaultColor: '#000000',
defaultFont: 'Microsoft YaHei',
defaultSize: 16,
minSize: 5,
maxSize: 72,
defaultRowMargin: 1,
defaultBasicRowMarginHeight: 8,
defaultTabWidth: 32,
width: 794,
height: 1123,
scale: 1,
pageGap: 20,
underlineColor: '#000000',
strikeoutColor: '#FF0000',
rangeAlpha: 0.6,
rangeColor: '#AECBFA',
rangeMinWidth: 5,
searchMatchAlpha: 0.6,
searchMatchColor: '#FFFF00',
searchNavigateMatchColor: '#AAD280',
highlightAlpha: 0.6,
resizerColor: '#4182D9',
resizerSize: 5,
marginIndicatorSize: 35,
marginIndicatorColor: '#BABABA',
margins: [100, 120, 100, 120],
pageMode: PageMode.PAGING,
defaultHyperlinkColor: '#0000FF',
paperDirection: PaperDirection.VERTICAL,
inactiveAlpha: 0.6,
historyMaxRecordCount: 100,
wordBreak: WordBreak.BREAK_WORD,
printPixelRatio: 3,
maskMargin: [0, 0, 0, 0],
letterClass: [LETTER_CLASS.ENGLISH],
contextMenuDisableKeys: [],
scrollContainerSelector: '',
...options,
table: tableOptions,
header: headerOptions,
footer: footerOptions,
pageNumber: pageNumberOptions,
watermark: waterMarkOptions,
control: controlOptions,
checkbox: checkboxOptions,
radio: radioOptions,
cursor: cursorOptions,
title: titleOptions,
placeholder: placeholderOptions,
group: groupOptions,
pageBreak: pageBreakOptions,
zone: zoneOptions,
background: backgroundOptions,
lineBreak: lineBreakOptions,
separator: separatorOptions
}
// 合并配置
const editorOptions = mergeOption(options)
// 数据处理
data = deepClone(data)
let headerElementList: IElement[] = []
src/editor/interface/Editor.ts
+13
View File
@@ -105,3 +105,16 @@ export interface IEditorHTML {
}
export type IEditorText = IEditorHTML
export type IUpdateOption = Omit<
IEditorOption,
| 'mode'
| 'width'
| 'height'
| 'scale'
| 'pageGap'
| 'pageMode'
| 'paperDirection'
| 'historyMaxRecordCount'
| 'scrollContainerSelector'
>
src/editor/utils/option.ts
+176
View File
@@ -0,0 +1,176 @@
import { defaultBackground } from '../dataset/constant/Background'
import { defaultCheckboxOption } from '../dataset/constant/Checkbox'
import { LETTER_CLASS } from '../dataset/constant/Common'
import { defaultControlOption } from '../dataset/constant/Control'
import { defaultCursorOption } from '../dataset/constant/Cursor'
import { defaultFooterOption } from '../dataset/constant/Footer'
import { defaultGroupOption } from '../dataset/constant/Group'
import { defaultHeaderOption } from '../dataset/constant/Header'
import { defaultLineBreak } from '../dataset/constant/LineBreak'
import { defaultPageBreakOption } from '../dataset/constant/PageBreak'
import { defaultPageNumberOption } from '../dataset/constant/PageNumber'
import { defaultPlaceholderOption } from '../dataset/constant/Placeholder'
import { defaultRadioOption } from '../dataset/constant/Radio'
import { defaultSeparatorOption } from '../dataset/constant/Separator'
import { defaultTableOption } from '../dataset/constant/Table'
import { defaultTitleOption } from '../dataset/constant/Title'
import { defaultWatermarkOption } from '../dataset/constant/Watermark'
import { defaultZoneOption } from '../dataset/constant/Zone'
import { IBackgroundOption } from '../interface/Background'
import { ICheckboxOption } from '../interface/Checkbox'
import { DeepRequired } from '../interface/Common'
import { IControlOption } from '../interface/Control'
import { ICursorOption } from '../interface/Cursor'
import { IEditorOption } from '../interface/Editor'
import { IFooter } from '../interface/Footer'
import { IGroup } from '../interface/Group'
import { IHeader } from '../interface/Header'
import { ILineBreakOption } from '../interface/LineBreak'
import { IPageBreak } from '../interface/PageBreak'
import { IPageNumber } from '../interface/PageNumber'
import { IPlaceholder } from '../interface/Placeholder'
import { IRadioOption } from '../interface/Radio'
import { ISeparatorOption } from '../interface/Separator'
import { ITableOption } from '../interface/table/Table'
import { ITitleOption } from '../interface/Title'
import { IWatermark } from '../interface/Watermark'
import { IZoneOption } from '../interface/Zone'
import {
EditorMode,
PageMode,
PaperDirection,
WordBreak
} from '../dataset/enum/Editor'
export function mergeOption(
options: IEditorOption = {}
): DeepRequired<IEditorOption> {
const tableOptions: Required<ITableOption> = {
...defaultTableOption,
...options.table
}
const headerOptions: Required<IHeader> = {
...defaultHeaderOption,
...options.header
}
const footerOptions: Required<IFooter> = {
...defaultFooterOption,
...options.footer
}
const pageNumberOptions: Required<IPageNumber> = {
...defaultPageNumberOption,
...options.pageNumber
}
const waterMarkOptions: Required<IWatermark> = {
...defaultWatermarkOption,
...options.watermark
}
const controlOptions: Required<IControlOption> = {
...defaultControlOption,
...options.control
}
const checkboxOptions: Required<ICheckboxOption> = {
...defaultCheckboxOption,
...options.checkbox
}
const radioOptions: Required<IRadioOption> = {
...defaultRadioOption,
...options.radio
}
const cursorOptions: Required<ICursorOption> = {
...defaultCursorOption,
...options.cursor
}
const titleOptions: Required<ITitleOption> = {
...defaultTitleOption,
...options.title
}
const placeholderOptions: Required<IPlaceholder> = {
...defaultPlaceholderOption,
...options.placeholder
}
const groupOptions: Required<IGroup> = {
...defaultGroupOption,
...options.group
}
const pageBreakOptions: Required<IPageBreak> = {
...defaultPageBreakOption,
...options.pageBreak
}
const zoneOptions: Required<IZoneOption> = {
...defaultZoneOption,
...options.zone
}
const backgroundOptions: Required<IBackgroundOption> = {
...defaultBackground,
...options.background
}
const lineBreakOptions: Required<ILineBreakOption> = {
...defaultLineBreak,
...options.lineBreak
}
const separatorOptions: Required<ISeparatorOption> = {
...defaultSeparatorOption,
...options.separator
}
return {
mode: EditorMode.EDIT,
defaultType: 'TEXT',
defaultColor: '#000000',
defaultFont: 'Microsoft YaHei',
defaultSize: 16,
minSize: 5,
maxSize: 72,
defaultRowMargin: 1,
defaultBasicRowMarginHeight: 8,
defaultTabWidth: 32,
width: 794,
height: 1123,
scale: 1,
pageGap: 20,
underlineColor: '#000000',
strikeoutColor: '#FF0000',
rangeAlpha: 0.6,
rangeColor: '#AECBFA',
rangeMinWidth: 5,
searchMatchAlpha: 0.6,
searchMatchColor: '#FFFF00',
searchNavigateMatchColor: '#AAD280',
highlightAlpha: 0.6,
resizerColor: '#4182D9',
resizerSize: 5,
marginIndicatorSize: 35,
marginIndicatorColor: '#BABABA',
margins: [100, 120, 100, 120],
pageMode: PageMode.PAGING,
defaultHyperlinkColor: '#0000FF',
paperDirection: PaperDirection.VERTICAL,
inactiveAlpha: 0.6,
historyMaxRecordCount: 100,
wordBreak: WordBreak.BREAK_WORD,
printPixelRatio: 3,
maskMargin: [0, 0, 0, 0],
letterClass: [LETTER_CLASS.ENGLISH],
contextMenuDisableKeys: [],
scrollContainerSelector: '',
...options,
table: tableOptions,
header: headerOptions,
footer: footerOptions,
pageNumber: pageNumberOptions,
watermark: waterMarkOptions,
control: controlOptions,
checkbox: checkboxOptions,
radio: radioOptions,
cursor: cursorOptions,
title: titleOptions,
placeholder: placeholderOptions,
group: groupOptions,
pageBreak: pageBreakOptions,
zone: zoneOptions,
background: backgroundOptions,
lineBreak: lineBreakOptions,
separator: separatorOptions
}
}