@hailin-zheng/editor-core 1.0.4 → 1.0.7

package/src/med_editor/texteditor.ts

@@ -1,1011 +0,0 @@
-import { RenderContenxt } from './framework/render-context';
-import { ContentMenuItem, ContextMenuElementEvent, EventMap, HitEventInfo } from './framework/element-event-define';
-import { DocumentPaint } from './framework/document-paint';
-import { ElementReader } from './framework/element-reader';
-import { DocumentEvent } from './framework/document-event';
-import { Subject } from 'rxjs';
-import { DocumentInput } from './framework/document-input-cursor';
-import { DocumentCursor, DocumentSelection, SelectionState } from './framework/document-selection';
-import { ElementUtil } from './framework/element-util';
-import { DocumentChange } from './framework/document-change';
-import { CursorType } from './framework/render-define';
-import { SelectionOverlays } from './framework/selection-overlays';
-import {
-    BranchElement,
-    DocMode,
-    Element,
-    ICancelTokenFn,
-    LeafElement,
-    MarginProps,
-    OrientType,
-    PageOptions,
-    Position,
-    TextAlign,
-    ViewOptions
-} from './framework/element-define';
-import { ElementSerialize } from './framework/element-serialize';
-import { TableElement } from './framework/impl/table/table-impl';
-import { documentPrint } from './framework/document-print';
-import { DocumentTemplate } from './framework/document-template';
-import {
-    DataElementInlineGroup,
-    DataElementLeaf, IsInSideDataElement,
-    validateDataEle
-} from './framework/impl/data-element/data-element-base-impl';
-import { DocRule } from './doc-ruler';
-import { ParagraphProps, TextProps } from './framework/element-props';
-import { TextGroupElement } from './framework/impl/text/text-impl';
-import { ParagraphElement } from './framework/impl/paragraph/p-impl';
-import { TableUtil } from './framework/impl/table/table-util';
-import { EditorContext } from './framework/document-context';
-import { DocumentElement, DocumentRenderObject } from './framework/impl/document/doc-impl';
-import { DocumentComment } from './framework/document-comment';
-import { DocumentPrintOffscreen } from './framework/document-print-offscreen';
-import { CommContentBaseElement } from './framework/impl/comments/comment-content-impl';
-import { DocumentHistory } from './framework/document-history';
-import { TableRowElement } from './framework/impl/table/table-row-impl';
-import { getFocusTextSegment } from "@/med_editor/framework/document-segmenter";
-
-import { saveAs } from 'file-saver';
-import { DocumentBodyElement } from "@/med_editor/framework/impl/document/doc-body-impl";
-
-export class CanvasTextEditor {
-    private contentCtx: CanvasRenderingContext2D;
-    viewOptions: ViewOptions;
-    docCtx: EditorContext;
-    private docComment: DocumentComment;
-    private renderContext: RenderContenxt;
-    private documentPaint: DocumentPaint;
-    elementReader: ElementReader;
-    private documentEvent: DocumentEvent;
-    private documentSelection: DocumentSelection;
-    private documentInput: DocumentInput;
-    private documentChange: DocumentChange;
-    private selectionOverlays: SelectionOverlays;
-    private docRule: DocRule;
-    private docHistory: DocumentHistory;
-    private eventMap: EventMap = new EventMap();
-    selectionChanged: Subject<SelectionState> = new Subject();
-    beforeRenderSubject: Subject<void> = new Subject();
-    afterRenderSubject: Subject<void> = new Subject();
-    selectionState: SelectionState;
-    //显示右键菜单
-    onContextMenuItemChanged: Subject<EditorContenxtProps> = new Subject();
-    //显示数据元编辑框
-    onShowDataElementEditPanelEvent: Subject<EditorPanelProps> = new Subject();
-    onDblClickEvent: Subject<Event> = new Subject();
-    onClickEvent: Subject<Event> = new Subject();
-    onScrollViewEvent: Subject<number> = new Subject();
-    //文档改变事件:内容及样式，业务模块需要根据此事件，来追踪当前文档是否改变的状态
-    onDocChangedEvent: Subject<void> = new Subject();
-
-    constructor(private docScroll: HTMLDivElement, private holdSpace: HTMLDivElement, private ruleCanvas: HTMLCanvasElement, private editCanvasContainer: HTMLDivElement, private editCanvas: HTMLCanvasElement, private editInput: HTMLInputElement, private editCursor: HTMLSpanElement, private cursorWrapper: HTMLDivElement, private scaleContainer: HTMLDivElement) {
-        this.viewOptions = new ViewOptions();
-        this.documentSelection = new DocumentSelection();
-        this.docCtx = new EditorContext(this.documentSelection.selectionState, this.viewOptions);
-        this.viewOptions.copyRightInfo = '万达信息电子病历编辑器,www.wondersgroup.com';
-        this.viewOptions.drawCharRectColor = 'green';
-        this.viewOptions.showLineRect = true;
-        this.viewOptions.docSpace = 20;
-        this.viewOptions.reviewWindowWidth = 200;
-        this.viewOptions.defaultFontName = '宋体'
-        //整个画布的尺寸
-        this.viewOptions.viewSettings = {
-            width: 1000,
-            height: this.getContainerHeight().height
-        };
-        this.viewOptions.editUser = {
-            id: '6666',
-            name: '管理员'
-        };
-        this.viewOptions.fullPageView = false;
-        this.viewOptions.enableUndo = true;
-        this.createDocViewer();
-        this.docComment = new DocumentComment(this.docCtx);
-        this.contentCtx = editCanvas.getContext('2d') as CanvasRenderingContext2D;
-        this.renderContext = new RenderContenxt(this.contentCtx, this.viewOptions, this.docCtx);
-        this.setCanvasProps();
-        this.selectionState = this.documentSelection.selectionState;
-        this.selectionOverlays = new SelectionOverlays(this.documentSelection.selectionState);
-        this.documentPaint = new DocumentPaint(this.viewOptions, this.renderContext, this.docCtx, this.selectionOverlays.selectedSets);
-        this.elementReader = new ElementReader(this.docCtx, this.viewOptions, this.renderContext);
-        this.documentEvent = new DocumentEvent(editCanvas, this.documentPaint, this.viewOptions, this.documentSelection.selectionState, this.docCtx);
-        this.docRule = new DocRule(this.ruleCanvas, this.viewOptions, this.documentSelection.selectionState);
-        this.documentChange = new DocumentChange(this.documentSelection.selectionState, this.viewOptions, this.elementReader, this.docCtx, this.docComment);
-        this.docHistory = new DocumentHistory(this.docCtx, this.elementReader, this.onDocChangedEvent);
-        this.documentInput = new DocumentInput(editInput, editCursor, cursorWrapper, this.docCtx);
-        this.documentEvent.hitInfoChanged.subscribe((hitInfo) => {
-            this.hitInfoChanged(hitInfo)
-        });
-        this.documentEvent.clickEvent.subscribe((evt) => {
-            this.docClickHandle(evt)
-        });
-        this.documentEvent.dblClickEvent.subscribe((evt) => {
-            this.docDblClickHandle(evt)
-        });
-        this.documentEvent.changeCursor.subscribe((cursor) => {
-            this.changeCursor(cursor)
-        });
-        this.documentEvent.contextMenu.subscribe(evt => {
-            this.onContextMenu(evt)
-        });
-        this.documentEvent.trackTipsChanged.subscribe(data => {
-        });
-        this.documentInput.onInputEvent.subscribe(data => {
-            this.documentChange.newInput(data)
-        });
-        this.documentInput.onBackspaceEvent.subscribe((evt) => {
-            this.documentChange.onBackspace(evt)
-        });
-        this.documentInput.onEnterEvent.subscribe(() => {
-            this.documentChange.onEnter()
-        });
-        this.documentInput.onCopyEvent.subscribe((evt) => {
-            this.documentChange.onCopy(evt)
-        });
-        this.documentInput.onCutEvent.subscribe((evt) => {
-            this.documentChange.onCut(evt);
-        });
-        this.documentInput.onPasteEvent.subscribe((evt) => {
-            this.documentChange.onPaste(evt)
-        });
-        this.documentInput.onInsertBr.subscribe(() => {
-            this.documentChange.insertSoftBr()
-        })
-        this.documentInput.onLeftEvent.subscribe(() => {
-            this.documentEvent.moveCursorToLeft()
-        });
-        this.documentInput.onRightEvent.subscribe(() => {
-            this.documentEvent.moveCursorToRight()
-        });
-        this.documentInput.onDeleteEvent.subscribe((evt) => this.documentChange.onDeleteKeyHandler(evt));
-        this.documentInput.onSelectAllEvent.subscribe(() => {
-            this.documentEvent.selectAll()
-        });
-        this.documentInput.onHomeEvent.subscribe(() => {
-            this.documentEvent.moveCursorToLineStart()
-        })
-        this.documentInput.onEndEvent.subscribe(() => {
-            this.documentEvent.moveCursorToLineEnd()
-        })
-        this.documentInput.onUpEvent.subscribe(() => {
-            this.documentEvent.moveCursorToUpOrDown(true)
-        })
-        this.documentInput.onDownEvent.subscribe(() => {
-            this.documentEvent.moveCursorToUpOrDown(false)
-        })
-        this.docCtx.docChange = this.documentChange;
-        this.listenContainerHeight();
-        this.refreshDocRule();
-        this.docCtx.syncRefresh = () => {
-            this.flushToSchedule()
-        };
-        this.viewOptions.onChange.subscribe((type) => {
-            this.resetViewer(type)
-        })
-    }
-
-    /**
-     * 设置标尺
-     */
-    refreshDocRule(): void {
-        let docLeft = 0//CommonUtil.getOffsetX(this.editCanvas.parentElement as HTMLDivElement);
-        let pagePL = 0, pagePR = 0;
-        if (this.documentPaint.docContainer) {
-            docLeft += this.documentPaint.docContainer.rect.x;
-        }
-        if (this.docCtx.document?.props?.padding) {
-            const { left, right } = this.docCtx.document.props.padding;
-            pagePL = left;
-            pagePR = right;
-        }
-        this.docRule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
-        this.docRule.refreshRule();
-    }
-
-    createDocViewer(): void {
-        this.viewOptions.mmToPixelsRatio = this.measureMMToPixs();
-        const width = Math.floor(210 * this.viewOptions.mmToPixelsRatio);
-        const height = Math.floor(297 * this.viewOptions.mmToPixelsRatio);
-        this.viewOptions.docPageSettings = new PageOptions(width, height);
-        this.docScroll.onscroll = (evt) => {
-            this.scrollView(evt);
-        };
-    }
-
-    measureMMToPixs(): number {
-        const div = document.createElement('div');
-        div.style.width = '100mm';
-        document.body.appendChild(div);
-        const width = div.getBoundingClientRect().width;
-        document.body.removeChild(div);
-        return width / 100;
-    }
-
-    flushTask!: (() => void) | null;
-    flushTaskThen: Array<(() => void)> = [];
-    //是否用于跟踪修改状态，在初始化、数据元赋值等情况不需要跟踪修改标志
-    private trackChangeState = true;
-    flushToSchedule(): void {
-        if (this.docCtx.refreshType === 'content') {
-            //触发动态脚本
-            this.docCtx.dynamicFunc.invokedScripts();
-            this.triggerDocChange();
-        }
-        if (this.flushTask) {
-            return;
-        }
-        this.flushTask = () => {
-            this.refreshDocument();
-            this.flushTaskThen.forEach(item => item());
-            this.flushTaskThen.length = 0;
-            this.flushTask = null;
-        };
-        Promise.resolve().then(() => {
-            if (this.flushTask) {
-                this.flushTask();
-            }
-        });
-    }
-
-    /**
-     * 触发文档改变事件
-     * @returns
-     */
-    triggerDocChange(): void {
-        if (!this.trackChangeState) {
-            return;
-        }
-        this.onDocChangedEvent.next();
-    }
-
-    /**
-     * fn函数执行时，不触发onDocChange
-     * @param fn
-     */
-    noEffectChange(fn: () => void): void {
-        const prev = this.trackChangeState;
-        this.trackChangeState = false;
-        try {
-            fn();
-        } catch (e) {
-            console.error(e);
-        }
-        this.trackChangeState = prev;
-    }
-
-
-
-    loadDoc(data: any | DocumentElement): void {
-        this.elementReader.read(data);
-        this.refreshDocument();
-        this.refreshDocRule();
-        this.docHistory.clear();
-    }
-
-    /**
-     * 更新文档容器高度尺寸
-     */
-    updateDocumentContainerSize(): void {
-        this.holdSpace.style.height = this.documentPaint.getDocumentContainerHeight() + 'px';
-    }
-
-    scrollView(evt: Event): void {
-        const target = evt.target as HTMLDivElement;
-        const top = Math.floor(target.scrollTop);
-        this.editCanvasContainer.style.top = top + 'px';
-        this.cursorWrapper.style.transform = "translate(0,-" + top + "px)";
-        this.viewOptions.translateY = top;
-        this.documentPaint.refreshView();
-        this.documentEvent.onScrollView();
-        this.onScrollViewEvent.next(top);
-
-    }
-
-    private refreshDocument(): void {
-        let rePaint = this.docCtx.refreshType === 'content';
-        if (rePaint) {
-            this.documentSelection.clearSnapshot();
-            this.docComment.readComments();
-
-            this.documentPaint.rePages();
-            this.beforeRenderSubject.next();
-        }
-        const ssChanged = this.documentSelection.updateSelectionState();
-        this.selectionOverlays.getSelectionTreeData();
-        this.documentPaint.refreshView(rePaint);
-        this.updateDocumentContainerSize();
-        this.setCursor();
-        ssChanged && this.selectionChanged.next(this.documentSelection.selectionState);
-        this.docRule.refreshRule();
-
-    }
-
-    private hitInfoChanged(hitInfo: { startHitInfo: HitEventInfo, endHitInfo: HitEventInfo }): void {
-        this.documentSelection.setSelectionState(hitInfo);
-        this.refreshDocument();
-        this.selectionChanged.next(this.documentSelection.selectionState);
-    }
-
-    /**
-     * 设置光标
-     */
-    private setCursor(): void {
-        const { startControl, startOffset } = this.selectionState;
-        if (!this.canSetCursor()) {
-            this.selectionState.editable = false;
-            this.documentInput.setCursorVisibility(false);
-            return;
-        }
-        if (this.selectionState.afterSelectionChanged) {
-            //需要重新刷新，不触发GotCusor事件
-            if (this.selectionState.afterSelectionChanged(this.selectionState)) {
-                this.selectionState.afterSelectionChanged = null;
-                return;
-            }
-        }
-        const { startRegion, hitDocIndex } = this.documentEvent.startHitInfo as HitEventInfo;
-        const cursorPos = DocumentCursor.getElementCursorPos(startControl, startOffset, startRegion, hitDocIndex);
-        this.docCtx.cursorRect = ElementUtil.cloneRect(cursorPos.rect);
-        this.documentInput.setCursorPosition(cursorPos.rect);
-        this.selectionState.cursorPos = cursorPos.rect;
-        this.documentEvent.invokeCursor(startControl);
-    }
-
-    /**
-     * 判断是否光标可以设置接受编辑
-     * @returns
-     */
-    private canSetCursor(): boolean {
-        const { startControl, startOffset, editable } = this.selectionState;
-        if (!startControl || !editable) {
-            return false;
-        }
-        if (this.viewOptions.docMode === DocMode.Design) {
-            return true;
-        }
-        //浏览模式
-        if (this.viewOptions.docMode === DocMode.View) {
-            return false;
-        }
-        //表单模式下，如果不在数据元素中，则不显示光标
-        if (this.viewOptions.docMode === DocMode.FormEdit) {
-            if (!IsInSideDataElement(startControl, startOffset)) {
-                return false;
-            }
-        }
-        if (!ElementUtil.verifyHitable(startControl)) {
-            return false;
-        }
-        //表单模式下，数据元不可编辑
-        if (this.viewOptions.docMode === DocMode.FormEdit && IsInSideDataElement(startControl, startOffset)) {
-            const dataEle = ElementUtil.getDataElement(startControl);
-            if (!dataEle.props.editable) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    /**
-     * 修改光标
-     * @param newCursor
-     */
-    private changeCursor(newCursor: CursorType): void {
-        this.editCanvas.style.cursor = newCursor;
-        this.viewOptions.cursor = newCursor;
-    }
-
-    /**
-     * 文档点击事件
-     */
-    private docClickHandle(evt: MouseEvent): void {
-        this.setCursor();
-        this.selectionOverlays.getSelectionTreeData();
-        this.onClickEvent.next(evt);
-    }
-
-    /**
-     * 文档双击事件
-     * 处理全选当前段落
-     */
-    private docDblClickHandle(evt: MouseEvent): void {
-        const res = getFocusTextSegment(this.selectionState);
-        if (res) {
-            this.refreshDocument();
-        }
-        this.onDblClickEvent.next(evt);
-    }
-
-    /**
-     * 获取当前光标所在的数据元
-     * @returns
-     */
-    getCurrentDataElement(): DataElementInlineGroup | DataElementLeaf | null {
-        const selectionState = this.documentSelection.selectionState;
-        const { startControl } = selectionState;
-        if (startControl) {
-            if (!ElementUtil.verifyHitable(startControl)) {
-                return null;
-            }
-            return ElementUtil.getParent(startControl, validateDataEle) as DataElementInlineGroup | DataElementLeaf;
-        }
-        return null;
-    }
-
-    /**
-     * 设置当前光标所在的数据元的值
-     * @param val
-     */
-    setCurrentDataElementValue(val: any): void {
-        const dataEle = this.getCurrentDataElement();
-        if (dataEle) {
-            dataEle?.setValue(val);
-            this.selectionState.clear();
-        }
-    }
-
-    /**
-     * 获取数据元位置
-     * @param element
-     * @returns
-     */
-    getDataElementPosition(element: LeafElement) {
-        const startDecorateRender = this.documentPaint.elementPaint.getLeafElementPaintMap(element);
-        if (!startDecorateRender) {
-            console.error('未找到数据元开始渲染元素');
-            return;
-        }
-        const { x, height, y, width } = startDecorateRender.rect;
-        const pos = ElementUtil.getRenderAbsolutePaintPos(startDecorateRender)
-        const position = { x: pos.x + width, y: pos.y + height + 5, translateY: this.viewOptions.translateY };
-        return position
-    }
-
-    /**
-     * 获取文档模型
-     * @returns
-     */
-    getDocSchema(): any {
-        return ElementSerialize.serialize(this.docCtx.document, this.viewOptions);
-    }
-
-    getDocSchemaJSON(): string {
-        const res = JSON.stringify(this.getDocSchema());
-        return res;
-    }
-
-    /**
-     * 右键菜单
-     * @param evt
-     */
-    onContextMenu(evt: MouseEvent): void {
-        evt.preventDefault();
-        const { selectionState } = this.documentSelection;
-        const { startControl } = selectionState;
-        if (!startControl) {
-            return;
-        }
-        const elementEvent = new ContextMenuElementEvent(this.docCtx);
-        elementEvent.source = startControl;
-        DocumentEvent.invokeEvent('ElementContextMenu', startControl, elementEvent, 'All', this.docCtx);
-        const position = { x: evt.offsetX + 10, y: evt.offsetY, translateY: this.viewOptions.translateY };
-        this.onContextMenuItemChanged.next({ pos: position, menus: elementEvent.menus })
-    }
-
-    resizeObserver: ResizeObserver | null = null;
-
-    listenContainerHeight(): void {
-        this.resizeObserver = new ResizeObserver(entries => {
-            this.updateDocHeight();
-        }
-        );
-        this.resizeObserver.observe(this.docScroll);
-        this.updateDocHeight();
-    }
-
-    private updateDocHeight(): void {
-        const { width, height } = this.getContainerHeight();
-        this.viewOptions.viewSettings.width = width;
-        this.viewOptions.viewSettings.height = height;
-        if (width < this.viewOptions.ContentWidth) {
-            this.viewOptions.viewSettings.width = this.viewOptions.ContentWidth;
-        }
-        this.resetViewer();
-    }
-
-    resetViewer(type: 'demand' | 'force' | undefined = undefined): void {
-        const refreshType = type === 'force' ? 'content' : 'appearance';
-        if (refreshType === 'content') {
-            this.docCtx.document.pubOnChange('self');
-        }
-        this.setCanvasProps();
-        this.flushToSchedule();
-        this.flushTaskThen.push(() => {
-            this.refreshDocRule();
-        });
-    }
-
-    /**
-     * 缩放视图
-     * @param scale
-     * @returns
-     */
-    scaleView(scale: number): number {
-        scale = scale < 0.5 ? 0.5 : scale;
-        scale = scale > 2 ? 2 : scale;
-        this.viewOptions.scale = scale;
-        this.scaleContainer.style.transform = `scale(${scale})`;
-        this.scaleContainer.style.transformOrigin = "center top";
-        if (scale === 1) {
-            this.scaleContainer.style.transform = '';
-            this.scaleContainer.style.transformOrigin = '';
-        }
-        this.setCanvasProps();
-        this.refreshDocRule();
-        this.flushToSchedule();
-        return scale;
-    }
-
-    getContainerHeight(): { height: number, width: number } {
-        let { height, width } = this.docScroll.getBoundingClientRect();
-        // const div=this.docScroll.children[0] as HTMLElement;
-        // const { height, width } = div.getBoundingClientRect();
-        return { height: Math.floor(height), width: Math.floor(width) };
-    }
-
-    setCanvasProps(): void {
-        this.renderContext?.clear();
-        this.renderContext.setCanvasProps();
-        this.renderContext?.clear();
-    }
-
-    /**
-     * 在当前位置插入表格
-     * @param row
-     * @param col
-     */
-    insertTable(rows: number, cols: number): void {
-        const tb = TableElement.createTable(rows, cols);
-        this.documentChange.insertTable(tb);
-    }
-
-    /**
-     * 打印所有文档
-     */
-    printAllPages(): void {
-        documentPrint.print(this.documentSelection.selectionState, this.viewOptions, this.docCtx)
-    }
-
-    /**
-     * 导出所有页到base64
-     */
-    exportAllPagesToBase64(fileName: string): void {
-        const imgs = documentPrint.exportCanvasNodes(this.documentSelection.selectionState, this.viewOptions, this.docCtx)
-        imgs.forEach((item, i) => item.toBlob(blog => {
-            if (blog) {
-                saveAs(blog, fileName + i + '.png')
-            }
-        }))
-    }
-
-    exportPDF(): void {
-        documentPrint.exportPDF('', this.documentSelection.selectionState, this.viewOptions, this.docCtx)
-    }
-
-    /**
-     * 清除文档
-     */
-    clearDoc(): void {
-        if (this.docCtx.document) {
-            this.docCtx.document.destroy();
-            this.documentSelection.selectionState.clear();
-            this.documentEvent.clearHitInfo();
-        }
-        this.docCtx.clear();
-    }
-
-    /**
-     * 新建文档
-     * @param options
-     */
-    createNewDoc(doc: DocumentElement | null = null): void {
-        //this.docCtx.clear();
-        const newDoc = doc ?? DocumentTemplate.createA4Doc();
-        // this.elementReader.setDocument(newDoc);
-        // this.refreshDocument('content');
-        this.loadDoc(ElementSerialize.serialize(newDoc, this.viewOptions));
-    }
-
-    destroy(): void {
-        this.docCtx.destroy();
-        this.documentEvent.clearSubEvent();
-        this.documentInput.destroy();
-        this.flushTask = null;
-    }
-
-
-    /**
-     * 获取选区文本属性
-     * @returns
-     */
-    getSelectionTextGroupProps(): TextProps | null {
-        const selectionState = this.selectionState;
-        const range = selectionState.selectedRange;
-        if (!range) {
-            if (selectionState.collapsed) {
-                if (selectionState.startControl instanceof TextGroupElement) {
-                    return selectionState.startControl.props;
-                }
-            }
-            return null;
-        }
-        const startRange = ElementUtil.getFirstSelectedRange(range);
-        const endRange = ElementUtil.getLastSelectedRange(range);
-        if (startRange.target instanceof TextGroupElement) {
-            return startRange.target.props;
-        }
-        return null;
-    }
-
-    getSelectionParaProps(): ParagraphProps | null {
-        const selectionState = this.selectionState;
-        if (!selectionState || !selectionState.startControl) {
-            return null;
-        }
-        const para = ElementUtil.getParentByType(selectionState.startControl, ParagraphElement) as ParagraphElement;
-        return para.props;
-    }
-
-    /**
-     * 设置文本字体大小
-     * @param fontSize
-     * @returns
-     */
-    setTextFontSize(fontSize: number): void {
-        if (isNaN(fontSize)) {
-            return;
-        }
-        const setterFunc = (textProps: TextProps) => {
-            textProps.fontSize = fontSize;
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-    /**
-     * 设置文本颜色
-     * @param color \
-     */
-    setTextColor(color: string): void {
-        color = color || "rgb(0,0,0)";
-        const setterFunc = (textProps: TextProps) => {
-            textProps.color = color;
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-    /**
-     * 设置文本字体名称
-     * @param font
-     */
-    setTextFont(font: string): void {
-        font = font || "宋体";
-        const setterFunc = (textProps: TextProps) => {
-            textProps.fontName = font;
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-    /**
-     * 应用选中文本格式,用于批量设置格式,例如：格式刷
-     * @param newStyle
-     */
-    applyStyle(newStyle: TextProps): void {
-        const setterFunc = (textProps: TextProps) => {
-            textProps.setPropsValue(newStyle, textProps);
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-    /**
-     * 开启格式刷
-     */
-    enableFormatBrush(): ICancelTokenFn | null {
-        const startControl = this.selectionState.startControl;
-        if (startControl instanceof TextGroupElement) {
-            const selectedStyle = startControl.props.clone(null);
-            const selectionOverlayColor = this.viewOptions.selectionOverlaysColor;
-            this.viewOptions.selectionOverlaysColor = "rgba(0,58,140,0.8)";
-
-            const cancelToken: ICancelTokenFn = {};
-            const sub = this.onClickEvent.subscribe(() => {
-                sub.unsubscribe();
-                this.applyStyle(selectedStyle);
-                this.viewOptions.selectionOverlaysColor = selectionOverlayColor;
-                if (cancelToken.onFinish) {
-                    cancelToken.onFinish();
-                }
-            });
-            cancelToken.cancel = () => {
-                sub.unsubscribe();
-                this.viewOptions.selectionOverlaysColor = selectionOverlayColor;
-            };
-            return cancelToken;
-        }
-        return null;
-    }
-
-    /**
-     * 设置文本背景颜色
-     * @param color
-     */
-    setTextBackColor(color: string): void {
-        const setterFunc = (textProps: TextProps) => {
-            textProps.background = color;
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-    /**
-     * 切换文本加粗、下划线、删除等文本样式
-     * @param isEffective
-     * @param style
-     * @param matchValue
-     */
-    switchTextStyle<P extends keyof TextProps, V extends TextProps[P]>(isEffective: boolean, style: P, matchValue: V, defaultValue: any = undefined): void {
-        const setterFunc = (textProps: TextProps) => {
-            if (isEffective) {
-                textProps[style] = defaultValue as never;
-                //delete textProps[style];
-            } else {
-                textProps[style] = matchValue;
-            }
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-    /**
-     * 修改字间距
-     */
-    setLetterSpace(letterSpace: number): void {
-        letterSpace = letterSpace <= 0 ? 0 : letterSpace;
-        const setterFunc = (textProps: TextProps) => {
-            textProps.letterSpace = letterSpace;
-        };
-        DocumentChange.setTextStyle(this.selectionState, setterFunc);
-    }
-
-
-    /**
-     * 设置段落对齐
-     * @param align
-     */
-    switchParaAlign(align: TextAlign): void {
-        const setterFunc = (paraProps: ParagraphProps) => {
-            paraProps.textAlign = align;
-        };
-        DocumentChange.setParaAlign(this.selectionState, setterFunc);
-    }
-
-
-    combineCell(): void {
-        TableUtil.mergeCells(this.selectionState)
-    }
-
-    /**
-     * 切换当前段落项目符号状态
-     */
-    setParagraphNumberType(): void {
-        this.documentChange.setParagraphNumberType();
-    }
-
-    /**
-     * 删除当前批注
-     * @param id
-     */
-    removeComment(id: string): void {
-        this.docComment.removeComment(id);
-        this.selectionState.clear();
-    }
-
-    /**
-     * 移除焦点所在的批注
-     */
-    removeCurrentComment(): void {
-        const comment = ElementUtil.getParent(this.selectionState.startControl, (item => item instanceof CommContentBaseElement)) as CommContentBaseElement;
-        if (comment) {
-            this.removeComment(comment.props.id);
-        }
-    }
-
-    /**
-     * 插入批注
-     */
-    insertComment(): void {
-        this.documentChange.insertComment();
-    }
-
-    /**
-     * 清除所有批注
-     */
-    clearAllComments(): void {
-        this.docComment.clearAllComments();
-    }
-
-
-    cutTable(): void {
-        const row = ElementUtil.getParentByType(this.selectionState.startControl, TableRowElement) as TableRowElement;
-        const tb = row?.parent as TableElement;
-        TableUtil.cutTable(tb, row.getIndex());
-        const para = new ParagraphElement();
-        tb.parent.addChild(para, tb.getIndex() + 1);
-    }
-
-    /**
-     * 初始化当前文档创建用户信息
-     * 一份文档只需要设置一次
-     */
-    initCurrentDocUser(userId: string, userName: string, date: string): void {
-        const doc = this.docCtx.document;
-        doc.props.createUserId = userId;
-        doc.props.createUserName = userName;
-        doc.props.createDate = date;
-    }
-
-    /**
-     * 验证文档内容
-     * @returns
-     */
-    validate(): boolean {
-        this.docComment.clearAllValidates();
-        return this.documentChange.validate();
-    }
-
-    /**
-     * 撤销
-     */
-    undo(): void {
-        this.docHistory.undo();
-    }
-
-    /**
-     * 恢复
-     */
-    redo(): void {
-        this.docHistory.redo();
-    }
-
-    /**
-     * 是否可以撤销
-     */
-    canUndo(): boolean {
-        return this.docHistory.canUndo;
-    }
-
-    /**
-     * 是否可以恢复
-     */
-    canRedo(): boolean {
-        return this.docHistory.canRedo;
-    }
-
-    switchTrackChanges(eleCtx: BranchElement | null = null): void {
-        eleCtx = eleCtx || this.docCtx.document;
-        const body = eleCtx.treeFind(item => item instanceof DocumentBodyElement) as DocumentBodyElement;
-        if (body) {
-            body.trackChanges = !body.trackChanges;
-        } else {
-            throw new Error('未找到doc-body');
-        }
-    }
-
-    get trackTipsChanged() {
-        return this.documentEvent.trackTipsChanged;
-    }
-
-    switchFullViewPage(): void {
-        this.viewOptions.fullPageView = !this.viewOptions.fullPageView;
-    }
-
-    getSelectedJSON(): string {
-        return ElementSerialize.getSelectedJSON(this.selectionState, this.viewOptions);
-    }
-
-    getSelectedText(): string {
-        const copySerializeStr = ElementSerialize.getSelectedStruct(this.selectionState, this.viewOptions);
-        return ElementSerialize.serializeString(copySerializeStr as BranchElement);
-    }
-
-    /**
-     * 设置纸张方向
-     * @param orientation
-     */
-    setPaperOrient(orientation: OrientType): void {
-        this.docCtx.document.props.orient = orientation;
-        this.viewOptions.docPageSettings.orient = orientation;
-        this.resetViewer('force');
-        this.selectionState.clear();
-    }
-
-    /**
-     * 设置纸张大小,单位为毫米(mm)
-     * @param width
-     * @param height
-     */
-    setPaperSize(width: number, height: number): void {
-        const docProps = this.docCtx.document.props;
-        docProps.width = width;
-        docProps.height = height;
-        width = Math.floor(width * this.viewOptions.mmToPixelsRatio);
-        height = Math.floor(height * this.viewOptions.mmToPixelsRatio);
-        this.viewOptions.docPageSettings = new PageOptions(width, height, docProps.orient);
-        this.resetViewer('force');
-    }
-
-    /**
-     * 插入强制换页符
-     */
-    insertPageBreakPara(): void {
-        this.documentChange.insertPageBreakPara();
-    }
-
-    /**
-     * 显示当前元素到视图中
-     * @param element
-     */
-    bringToView(element: Element): void {
-        const ele = element instanceof BranchElement ? ElementUtil.getFirstLeafElement(element) : element as LeafElement;
-        if (ele) {
-            const region = ElementUtil.getElementRegion(ele);
-            const renderObj = ele.paintRenders[0];
-            const docRender = ElementUtil.getParentRender(renderObj, DocumentRenderObject) as DocumentRenderObject;
-            const index = docRender.getIndex();
-            const cursorPos = DocumentCursor.getElementCursorPos(ele, 0, region, index);
-            this.selectionState.surround(element);
-            if (cursorPos.rect.y - this.viewOptions.translateY > 0 && cursorPos.rect.y - this.viewOptions.translateY < this.viewOptions.viewPaintHeight) {
-                return;
-            }
-            this.docScroll.scrollTo(cursorPos.rect.x, cursorPos.rect.y - this.viewOptions.translateY);
-        }
-    }
-
-    /**
-     * 设置当前文档页边距
-     */
-    setDocumentMargin(pageMargin: Partial<MarginProps>): void {
-        if (!this.docCtx.document) {
-            return;
-        }
-        this.docCtx.document.updateMargin(pageMargin);
-    }
-
-    /**
-     * 插入元素
-     * @param targetElement
-     * @param targetOffset
-     * @param destEleArray
-     * @returns
-     */
-    insertElement(targetElement: Element, targetOffset: number, destEleArray: Array<Element>): Element | null {
-        if (!this.selectionState.editable) {
-            return null;
-        }
-        return this.documentChange.insertElement(targetElement, targetOffset, destEleArray);
-    }
-
-
-}
-
-
-export type EditorCurrentPos = {
-    pos: Position
-};
-
-export type EditorContenxtProps = {
-    menus: Array<ContentMenuItem>
-} & EditorCurrentPos
-
-export type EditorPanelProps = {
-    type: string;
-} & EditorCurrentPos;
-