From 3175bad5e70e9ac2143a1101c9e3e674cc793b69 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Fri, 17 May 2024 20:46:36 +0800 Subject: [PATCH] feat: add executeUpdateOptions api #571 --- docs/en/guide/command-execute.md | 10 ++ docs/guide/command-execute.md | 10 ++ src/editor/core/command/Command.ts | 2 + src/editor/core/command/CommandAdapt.ts | 12 +- src/editor/index.ts | 165 +--------------------- src/editor/interface/Editor.ts | 13 ++ src/editor/utils/option.ts | 176 ++++++++++++++++++++++++ src/main.ts | 5 +- 8 files changed, 226 insertions(+), 167 deletions(-) create mode 100644 src/editor/utils/option.ts diff --git a/docs/en/guide/command-execute.md b/docs/en/guide/command-execute.md index 989204f..8e0c4cf 100644 --- a/docs/en/guide/command-execute.md +++ b/docs/en/guide/command-execute.md @@ -911,3 +911,13 @@ Usage: ```javascript instance.command.executeSetControlHighlight(payload: ISetControlHighlightOption) ``` + +## executeUpdateOptions + +Feature: Update options + +Usage: + +```javascript +instance.command.executeUpdateOptions(payload: IUpdateOption) +``` diff --git a/docs/guide/command-execute.md b/docs/guide/command-execute.md index 8f3e768..6bd0093 100644 --- a/docs/guide/command-execute.md +++ b/docs/guide/command-execute.md @@ -911,3 +911,13 @@ instance.command.executeSetControlProperties(payload: ISetControlProperties) ```javascript instance.command.executeSetControlHighlight(payload: ISetControlHighlightOption) ``` + +## executeUpdateOptions + +功能：修改配置 + +用法： + +```javascript +instance.command.executeUpdateOptions(payload: IUpdateOption) +``` diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 1e91db0..af62fe1 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -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) diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 8ec3523..611c7aa 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -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() } diff --git a/src/editor/index.ts b/src/editor/index.ts index c67ba01..1559544 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -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 = { - ...defaultTableOption, - ...options.table - } - const headerOptions: Required = { - ...defaultHeaderOption, - ...options.header - } - const footerOptions: Required = { - ...defaultFooterOption, - ...options.footer - } - const pageNumberOptions: Required = { - ...defaultPageNumberOption, - ...options.pageNumber - } - const waterMarkOptions: Required = { - ...defaultWatermarkOption, - ...options.watermark - } - const controlOptions: Required = { - ...defaultControlOption, - ...options.control - } - const checkboxOptions: Required = { - ...defaultCheckboxOption, - ...options.checkbox - } - const radioOptions: Required = { - ...defaultRadioOption, - ...options.radio - } - const cursorOptions: Required = { - ...defaultCursorOption, - ...options.cursor - } - const titleOptions: Required = { - ...defaultTitleOption, - ...options.title - } - const placeholderOptions: Required = { - ...defaultPlaceholderOption, - ...options.placeholder - } - const groupOptions: Required = { - ...defaultGroupOption, - ...options.group - } - const pageBreakOptions: Required = { - ...defaultPageBreakOption, - ...options.pageBreak - } - const zoneOptions: Required = { - ...defaultZoneOption, - ...options.zone - } - const backgroundOptions: Required = { - ...defaultBackground, - ...options.background - } - const lineBreakOptions: Required = { - ...defaultLineBreak, - ...options.lineBreak - } - const separatorOptions: Required = { - ...defaultSeparatorOption, - ...options.separator - } - - const editorOptions: DeepRequired = { - 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[] = [] diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index a2af604..2c08bb3 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -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' +> diff --git a/src/editor/utils/option.ts b/src/editor/utils/option.ts new file mode 100644 index 0000000..65a944c --- /dev/null +++ b/src/editor/utils/option.ts @@ -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 { + const tableOptions: Required = { + ...defaultTableOption, + ...options.table + } + const headerOptions: Required = { + ...defaultHeaderOption, + ...options.header + } + const footerOptions: Required = { + ...defaultFooterOption, + ...options.footer + } + const pageNumberOptions: Required = { + ...defaultPageNumberOption, + ...options.pageNumber + } + const waterMarkOptions: Required = { + ...defaultWatermarkOption, + ...options.watermark + } + const controlOptions: Required = { + ...defaultControlOption, + ...options.control + } + const checkboxOptions: Required = { + ...defaultCheckboxOption, + ...options.checkbox + } + const radioOptions: Required = { + ...defaultRadioOption, + ...options.radio + } + const cursorOptions: Required = { + ...defaultCursorOption, + ...options.cursor + } + const titleOptions: Required = { + ...defaultTitleOption, + ...options.title + } + const placeholderOptions: Required = { + ...defaultPlaceholderOption, + ...options.placeholder + } + const groupOptions: Required = { + ...defaultGroupOption, + ...options.group + } + const pageBreakOptions: Required = { + ...defaultPageBreakOption, + ...options.pageBreak + } + const zoneOptions: Required = { + ...defaultZoneOption, + ...options.zone + } + const backgroundOptions: Required = { + ...defaultBackground, + ...options.background + } + const lineBreakOptions: Required = { + ...defaultLineBreak, + ...options.lineBreak + } + const separatorOptions: Required = { + ...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 + } +} diff --git a/src/main.ts b/src/main.ts index 61b03a9..8b69998 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1118,10 +1118,7 @@ window.onload = function () { const newOptionValue = payload.find(p => p.name === 'option')?.value if (!newOptionValue) return const newOption = JSON.parse(newOptionValue) - Object.keys(newOption).forEach(key => { - Reflect.set(options, key, newOption[key]) - }) - instance.command.executeForceUpdate() + instance.command.executeUpdateOptions(newOption) } }) }