@hailin-zheng/editor-core 1.0.6 → 1.0.9

package/{lib/texteditor.js → src/med_editor/texteditor.ts}

@@ -1,81 +1,84 @@
 import { RenderContenxt } from './framework/render-context';
-import { ContextMenuElementEvent, EventMap } from './framework/element-event-define';
+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 } from './framework/document-selection';
+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, PageOptions, ViewOptions } from './framework/element-define';
+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 { IsInSideDataElement, validateDataEle } from './framework/impl/data-element/data-element-base-impl';
+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 { DocumentRenderObject } from './framework/impl/document/doc-impl';
+import { DocumentElement, DocumentRenderObject } from './framework/impl/document/doc-impl';
 import { DocumentComment } from './framework/document-comment';
 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 { getFocusTextSegment } from "./framework/document-segmenter";
+
 import { saveAs } from 'file-saver';
-import { DocumentBodyElement } from "@/med_editor/framework/impl/document/doc-body-impl";
+import { DocumentBodyElement } from "./framework/impl/document/doc-body-impl";
+
 export class CanvasTextEditor {
-    docScroll;
-    holdSpace;
-    ruleCanvas;
-    editCanvasContainer;
-    editCanvas;
-    editInput;
-    editCursor;
-    cursorWrapper;
-    scaleContainer;
-    contentCtx;
-    viewOptions;
-    docCtx;
-    docComment;
-    renderContext;
-    documentPaint;
-    elementReader;
-    documentEvent;
-    documentSelection;
-    documentInput;
-    documentChange;
-    selectionOverlays;
-    docRule;
-    docHistory;
-    eventMap = new EventMap();
-    selectionChanged = new Subject();
-    beforeRenderSubject = new Subject();
-    afterRenderSubject = new Subject();
-    selectionState;
+    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 = new Subject();
+    onContextMenuItemChanged: Subject<EditorContenxtProps> = new Subject();
     //显示数据元编辑框
-    onShowDataElementEditPanelEvent = new Subject();
-    onDblClickEvent = new Subject();
-    onClickEvent = new Subject();
-    onScrollViewEvent = new Subject();
+    onShowDataElementEditPanelEvent: Subject<EditorPanelProps> = new Subject();
+    onDblClickEvent: Subject<Event> = new Subject();
+    onClickEvent: Subject<Event> = new Subject();
+    onScrollViewEvent: Subject<number> = new Subject();
     //文档改变事件:内容及样式，业务模块需要根据此事件，来追踪当前文档是否改变的状态
-    onDocChangedEvent = new Subject();
-    constructor(docScroll, holdSpace, ruleCanvas, editCanvasContainer, editCanvas, editInput, editCursor, cursorWrapper, scaleContainer) {
-        this.docScroll = docScroll;
-        this.holdSpace = holdSpace;
-        this.ruleCanvas = ruleCanvas;
-        this.editCanvasContainer = editCanvasContainer;
-        this.editCanvas = editCanvas;
-        this.editInput = editInput;
-        this.editCursor = editCursor;
-        this.cursorWrapper = cursorWrapper;
-        this.scaleContainer = scaleContainer;
+    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);
@@ -84,7 +87,7 @@ export class CanvasTextEditor {
         this.viewOptions.showLineRect = true;
         this.viewOptions.docSpace = 20;
         this.viewOptions.reviewWindowWidth = 200;
-        this.viewOptions.defaultFontName = '宋体';
+        this.viewOptions.defaultFontName = '宋体'
         //整个画布的尺寸
         this.viewOptions.viewSettings = {
             width: 1000,
@@ -98,7 +101,7 @@ export class CanvasTextEditor {
         this.viewOptions.enableUndo = true;
         this.createDocViewer();
         this.docComment = new DocumentComment(this.docCtx);
-        this.contentCtx = editCanvas.getContext('2d');
+        this.contentCtx = editCanvas.getContext('2d') as CanvasRenderingContext2D;
         this.renderContext = new RenderContenxt(this.contentCtx, this.viewOptions, this.docCtx);
         this.setCanvasProps();
         this.selectionState = this.documentSelection.selectionState;
@@ -111,80 +114,81 @@ export class CanvasTextEditor {
         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.hitInfoChanged(hitInfo)
         });
         this.documentEvent.clickEvent.subscribe((evt) => {
-            this.docClickHandle(evt);
+            this.docClickHandle(evt)
         });
         this.documentEvent.dblClickEvent.subscribe((evt) => {
-            this.docDblClickHandle(evt);
+            this.docDblClickHandle(evt)
         });
         this.documentEvent.changeCursor.subscribe((cursor) => {
-            this.changeCursor(cursor);
+            this.changeCursor(cursor)
         });
         this.documentEvent.contextMenu.subscribe(evt => {
-            this.onContextMenu(evt);
+            this.onContextMenu(evt)
         });
         this.documentEvent.trackTipsChanged.subscribe(data => {
         });
         this.documentInput.onInputEvent.subscribe(data => {
-            this.documentChange.newInput(data);
+            this.documentChange.newInput(data)
         });
         this.documentInput.onBackspaceEvent.subscribe((evt) => {
-            this.documentChange.onBackspace(evt);
+            this.documentChange.onBackspace(evt)
         });
         this.documentInput.onEnterEvent.subscribe(() => {
-            this.documentChange.onEnter();
+            this.documentChange.onEnter()
         });
         this.documentInput.onCopyEvent.subscribe((evt) => {
-            this.documentChange.onCopy(evt);
+            this.documentChange.onCopy(evt)
         });
         this.documentInput.onCutEvent.subscribe((evt) => {
             this.documentChange.onCut(evt);
         });
         this.documentInput.onPasteEvent.subscribe((evt) => {
-            this.documentChange.onPaste(evt);
+            this.documentChange.onPaste(evt)
         });
         this.documentInput.onInsertBr.subscribe(() => {
-            this.documentChange.insertSoftBr();
-        });
+            this.documentChange.insertSoftBr()
+        })
         this.documentInput.onLeftEvent.subscribe(() => {
-            this.documentEvent.moveCursorToLeft();
+            this.documentEvent.moveCursorToLeft()
         });
         this.documentInput.onRightEvent.subscribe(() => {
-            this.documentEvent.moveCursorToRight();
+            this.documentEvent.moveCursorToRight()
         });
         this.documentInput.onDeleteEvent.subscribe((evt) => this.documentChange.onDeleteKeyHandler(evt));
         this.documentInput.onSelectAllEvent.subscribe(() => {
-            this.documentEvent.selectAll();
+            this.documentEvent.selectAll()
         });
         this.documentInput.onHomeEvent.subscribe(() => {
-            this.documentEvent.moveCursorToLineStart();
-        });
+            this.documentEvent.moveCursorToLineStart()
+        })
         this.documentInput.onEndEvent.subscribe(() => {
-            this.documentEvent.moveCursorToLineEnd();
-        });
+            this.documentEvent.moveCursorToLineEnd()
+        })
         this.documentInput.onUpEvent.subscribe(() => {
-            this.documentEvent.moveCursorToUpOrDown(true);
-        });
+            this.documentEvent.moveCursorToUpOrDown(true)
+        })
         this.documentInput.onDownEvent.subscribe(() => {
-            this.documentEvent.moveCursorToUpOrDown(false);
-        });
+            this.documentEvent.moveCursorToUpOrDown(false)
+        })
         this.docCtx.docChange = this.documentChange;
         this.listenContainerHeight();
         this.refreshDocRule();
         this.docCtx.syncRefresh = () => {
-            this.flushToSchedule();
+            this.flushToSchedule()
         };
         this.viewOptions.onChange.subscribe((type) => {
-            this.resetViewer(type);
-        });
+            this.resetViewer(type)
+        })
     }
+
     /**
      * 设置标尺
      */
-    refreshDocRule() {
-        let docLeft = 0; //CommonUtil.getOffsetX(this.editCanvas.parentElement as HTMLDivElement);
+    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;
@@ -197,7 +201,8 @@ export class CanvasTextEditor {
         this.docRule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
         this.docRule.refreshRule();
     }
-    createDocViewer() {
+
+    createDocViewer(): void {
         this.viewOptions.mmToPixelsRatio = this.measureMMToPixs();
         const width = Math.floor(210 * this.viewOptions.mmToPixelsRatio);
         const height = Math.floor(297 * this.viewOptions.mmToPixelsRatio);
@@ -206,7 +211,8 @@ export class CanvasTextEditor {
             this.scrollView(evt);
         };
     }
-    measureMMToPixs() {
+
+    measureMMToPixs(): number {
         const div = document.createElement('div');
         div.style.width = '100mm';
         document.body.appendChild(div);
@@ -214,11 +220,12 @@ export class CanvasTextEditor {
         document.body.removeChild(div);
         return width / 100;
     }
-    flushTask;
-    flushTaskThen = [];
+
+    flushTask!: (() => void) | null;
+    flushTaskThen: Array<(() => void)> = [];
     //是否用于跟踪修改状态，在初始化、数据元赋值等情况不需要跟踪修改标志
-    trackChangeState = true;
-    flushToSchedule() {
+    private trackChangeState = true;
+    flushToSchedule(): void {
         if (this.docCtx.refreshType === 'content') {
             //触发动态脚本
             this.docCtx.dynamicFunc.invokedScripts();
@@ -239,45 +246,51 @@ export class CanvasTextEditor {
             }
         });
     }
+
     /**
      * 触发文档改变事件
      * @returns
      */
-    triggerDocChange() {
+    triggerDocChange(): void {
         if (!this.trackChangeState) {
             return;
         }
         this.onDocChangedEvent.next();
     }
+
     /**
      * fn函数执行时，不触发onDocChange
      * @param fn
      */
-    noEffectChange(fn) {
+    noEffectChange(fn: () => void): void {
         const prev = this.trackChangeState;
         this.trackChangeState = false;
         try {
             fn();
-        }
-        catch (e) {
+        } catch (e) {
             console.error(e);
         }
         this.trackChangeState = prev;
     }
-    loadDoc(data) {
+
+
+
+    loadDoc(data: any | DocumentElement): void {
         this.elementReader.read(data);
         this.refreshDocument();
         this.refreshDocRule();
         this.docHistory.clear();
     }
+
     /**
      * 更新文档容器高度尺寸
      */
-    updateDocumentContainerSize() {
+    updateDocumentContainerSize(): void {
         this.holdSpace.style.height = this.documentPaint.getDocumentContainerHeight() + 'px';
     }
-    scrollView(evt) {
-        const target = evt.target;
+
+    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)";
@@ -285,12 +298,15 @@ export class CanvasTextEditor {
         this.documentPaint.refreshView();
         this.documentEvent.onScrollView();
         this.onScrollViewEvent.next(top);
+
     }
-    refreshDocument() {
+
+    private refreshDocument(): void {
         let rePaint = this.docCtx.refreshType === 'content';
         if (rePaint) {
             this.documentSelection.clearSnapshot();
             this.docComment.readComments();
+
             this.documentPaint.rePages();
             this.beforeRenderSubject.next();
         }
@@ -301,16 +317,19 @@ export class CanvasTextEditor {
         this.setCursor();
         ssChanged && this.selectionChanged.next(this.documentSelection.selectionState);
         this.docRule.refreshRule();
+
     }
-    hitInfoChanged(hitInfo) {
+
+    private hitInfoChanged(hitInfo: { startHitInfo: HitEventInfo, endHitInfo: HitEventInfo }): void {
         this.documentSelection.setSelectionState(hitInfo);
         this.refreshDocument();
         this.selectionChanged.next(this.documentSelection.selectionState);
     }
+
     /**
      * 设置光标
      */
-    setCursor() {
+    private setCursor(): void {
         const { startControl, startOffset } = this.selectionState;
         if (!this.canSetCursor()) {
             this.selectionState.editable = false;
@@ -324,18 +343,19 @@ export class CanvasTextEditor {
                 return;
             }
         }
-        const { startRegion, hitDocIndex } = this.documentEvent.startHitInfo;
+        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
      */
-    canSetCursor() {
+    private canSetCursor(): boolean {
         const { startControl, startOffset, editable } = this.selectionState;
         if (!startControl || !editable) {
             return false;
@@ -365,91 +385,100 @@ export class CanvasTextEditor {
         }
         return true;
     }
+
     /**
      * 修改光标
      * @param newCursor
      */
-    changeCursor(newCursor) {
+    private changeCursor(newCursor: CursorType): void {
         this.editCanvas.style.cursor = newCursor;
         this.viewOptions.cursor = newCursor;
     }
+
     /**
      * 文档点击事件
      */
-    docClickHandle(evt) {
+    private docClickHandle(evt: MouseEvent): void {
         this.setCursor();
         this.selectionOverlays.getSelectionTreeData();
         this.onClickEvent.next(evt);
     }
+
     /**
      * 文档双击事件
      * 处理全选当前段落
      */
-    docDblClickHandle(evt) {
+    private docDblClickHandle(evt: MouseEvent): void {
         const res = getFocusTextSegment(this.selectionState);
         if (res) {
             this.refreshDocument();
         }
         this.onDblClickEvent.next(evt);
     }
+
     /**
      * 获取当前光标所在的数据元
      * @returns
      */
-    getCurrentDataElement() {
+    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);
+            return ElementUtil.getParent(startControl, validateDataEle) as DataElementInlineGroup | DataElementLeaf;
         }
         return null;
     }
+
     /**
      * 设置当前光标所在的数据元的值
      * @param val
      */
-    setCurrentDataElementValue(val) {
+    setCurrentDataElementValue(val: any): void {
         const dataEle = this.getCurrentDataElement();
         if (dataEle) {
             dataEle?.setValue(val);
             this.selectionState.clear();
         }
     }
+
     /**
      * 获取数据元位置
      * @param element
      * @returns
      */
-    getDataElementPosition(element) {
+    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 pos = ElementUtil.getRenderAbsolutePaintPos(startDecorateRender)
         const position = { x: pos.x + width, y: pos.y + height + 5, translateY: this.viewOptions.translateY };
-        return position;
+        return position
     }
+
     /**
      * 获取文档模型
      * @returns
      */
-    getDocSchema() {
+    getDocSchema(): any {
         return ElementSerialize.serialize(this.docCtx.document, this.viewOptions);
     }
-    getDocSchemaJSON() {
+
+    getDocSchemaJSON(): string {
         const res = JSON.stringify(this.getDocSchema());
         return res;
     }
+
     /**
      * 右键菜单
      * @param evt
      */
-    onContextMenu(evt) {
+    onContextMenu(evt: MouseEvent): void {
         evt.preventDefault();
         const { selectionState } = this.documentSelection;
         const { startControl } = selectionState;
@@ -460,17 +489,21 @@ export class CanvasTextEditor {
         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 });
+        this.onContextMenuItemChanged.next({ pos: position, menus: elementEvent.menus })
     }
-    resizeObserver = null;
-    listenContainerHeight() {
+
+    resizeObserver: ResizeObserver | null = null;
+
+    listenContainerHeight(): void {
         this.resizeObserver = new ResizeObserver(entries => {
             this.updateDocHeight();
-        });
+        }
+        );
         this.resizeObserver.observe(this.docScroll);
         this.updateDocHeight();
     }
-    updateDocHeight() {
+
+    private updateDocHeight(): void {
         const { width, height } = this.getContainerHeight();
         this.viewOptions.viewSettings.width = width;
         this.viewOptions.viewSettings.height = height;
@@ -479,7 +512,8 @@ export class CanvasTextEditor {
         }
         this.resetViewer();
     }
-    resetViewer(type = undefined) {
+
+    resetViewer(type: 'demand' | 'force' | undefined = undefined): void {
         const refreshType = type === 'force' ? 'content' : 'appearance';
         if (refreshType === 'content') {
             this.docCtx.document.pubOnChange('self');
@@ -490,12 +524,13 @@ export class CanvasTextEditor {
             this.refreshDocRule();
         });
     }
+
     /**
      * 缩放视图
      * @param scale
      * @returns
      */
-    scaleView(scale) {
+    scaleView(scale: number): number {
         scale = scale < 0.5 ? 0.5 : scale;
         scale = scale > 2 ? 2 : scale;
         this.viewOptions.scale = scale;
@@ -510,50 +545,57 @@ export class CanvasTextEditor {
         this.flushToSchedule();
         return scale;
     }
-    getContainerHeight() {
+
+    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() {
+
+    setCanvasProps(): void {
         this.renderContext?.clear();
         this.renderContext.setCanvasProps();
         this.renderContext?.clear();
     }
+
     /**
      * 在当前位置插入表格
      * @param row
      * @param col
      */
-    insertTable(rows, cols) {
+    insertTable(rows: number, cols: number): void {
         const tb = TableElement.createTable(rows, cols);
         this.documentChange.insertTable(tb);
     }
+
     /**
      * 打印所有文档
      */
-    printAllPages() {
-        documentPrint.print(this.documentSelection.selectionState, this.viewOptions, this.docCtx);
+    printAllPages(): void {
+        documentPrint.print(this.documentSelection.selectionState, this.viewOptions, this.docCtx)
     }
+
     /**
      * 导出所有页到base64
      */
-    exportAllPagesToBase64(fileName) {
-        const imgs = documentPrint.exportCanvasNodes(this.documentSelection.selectionState, this.viewOptions, this.docCtx);
+    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');
+                saveAs(blog, fileName + i + '.png')
             }
-        }));
+        }))
     }
-    exportPDF() {
-        documentPrint.exportPDF('', this.documentSelection.selectionState, this.viewOptions, this.docCtx);
+
+    exportPDF(): void {
+        documentPrint.exportPDF('', this.documentSelection.selectionState, this.viewOptions, this.docCtx)
     }
+
     /**
      * 清除文档
      */
-    clearDoc() {
+    clearDoc(): void {
         if (this.docCtx.document) {
             this.docCtx.document.destroy();
             this.documentSelection.selectionState.clear();
@@ -561,28 +603,32 @@ export class CanvasTextEditor {
         }
         this.docCtx.clear();
     }
+
     /**
      * 新建文档
      * @param options
      */
-    createNewDoc(doc = null) {
+    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() {
+
+    destroy(): void {
         this.docCtx.destroy();
         this.documentEvent.clearSubEvent();
         this.documentInput.destroy();
         this.flushTask = null;
     }
+
+
     /**
      * 获取选区文本属性
      * @returns
      */
-    getSelectionTextGroupProps() {
+    getSelectionTextGroupProps(): TextProps | null {
         const selectionState = this.selectionState;
         const range = selectionState.selectedRange;
         if (!range) {
@@ -600,70 +646,77 @@ export class CanvasTextEditor {
         }
         return null;
     }
-    getSelectionParaProps() {
+
+    getSelectionParaProps(): ParagraphProps | null {
         const selectionState = this.selectionState;
         if (!selectionState || !selectionState.startControl) {
             return null;
         }
-        const para = ElementUtil.getParentByType(selectionState.startControl, ParagraphElement);
+        const para = ElementUtil.getParentByType(selectionState.startControl, ParagraphElement) as ParagraphElement;
         return para.props;
     }
+
     /**
      * 设置文本字体大小
      * @param fontSize
      * @returns
      */
-    setTextFontSize(fontSize) {
+    setTextFontSize(fontSize: number): void {
         if (isNaN(fontSize)) {
             return;
         }
-        const setterFunc = (textProps) => {
+        const setterFunc = (textProps: TextProps) => {
             textProps.fontSize = fontSize;
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
     /**
      * 设置文本颜色
      * @param color \
      */
-    setTextColor(color) {
+    setTextColor(color: string): void {
         color = color || "rgb(0,0,0)";
-        const setterFunc = (textProps) => {
+        const setterFunc = (textProps: TextProps) => {
             textProps.color = color;
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
     /**
      * 设置文本字体名称
      * @param font
      */
-    setTextFont(font) {
+    setTextFont(font: string): void {
         font = font || "宋体";
-        const setterFunc = (textProps) => {
+        const setterFunc = (textProps: TextProps) => {
             textProps.fontName = font;
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
     /**
      * 应用选中文本格式,用于批量设置格式,例如：格式刷
      * @param newStyle
      */
-    applyStyle(newStyle) {
-        const setterFunc = (textProps) => {
+    applyStyle(newStyle: TextProps): void {
+        const setterFunc = (textProps: TextProps) => {
             textProps.setPropsValue(newStyle, textProps);
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
     /**
      * 开启格式刷
      */
-    enableFormatBrush() {
+    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 = {};
+
+            const cancelToken: ICancelTokenFn = {};
             const sub = this.onClickEvent.subscribe(() => {
                 sub.unsubscribe();
                 this.applyStyle(selectedStyle);
@@ -680,180 +733,205 @@ export class CanvasTextEditor {
         }
         return null;
     }
+
     /**
      * 设置文本背景颜色
      * @param color
      */
-    setTextBackColor(color) {
-        const setterFunc = (textProps) => {
+    setTextBackColor(color: string): void {
+        const setterFunc = (textProps: TextProps) => {
             textProps.background = color;
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
     /**
      * 切换文本加粗、下划线、删除等文本样式
      * @param isEffective
      * @param style
      * @param matchValue
      */
-    switchTextStyle(isEffective, style, matchValue, defaultValue = undefined) {
-        const setterFunc = (textProps) => {
+    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;
+                textProps[style] = defaultValue as never;
                 //delete textProps[style];
-            }
-            else {
+            } else {
                 textProps[style] = matchValue;
             }
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
     /**
      * 修改字间距
      */
-    setLetterSpace(letterSpace) {
+    setLetterSpace(letterSpace: number): void {
         letterSpace = letterSpace <= 0 ? 0 : letterSpace;
-        const setterFunc = (textProps) => {
+        const setterFunc = (textProps: TextProps) => {
             textProps.letterSpace = letterSpace;
         };
         DocumentChange.setTextStyle(this.selectionState, setterFunc);
     }
+
+
     /**
      * 设置段落对齐
      * @param align
      */
-    switchParaAlign(align) {
-        const setterFunc = (paraProps) => {
+    switchParaAlign(align: TextAlign): void {
+        const setterFunc = (paraProps: ParagraphProps) => {
             paraProps.textAlign = align;
         };
         DocumentChange.setParaAlign(this.selectionState, setterFunc);
     }
-    combineCell() {
-        TableUtil.mergeCells(this.selectionState);
+
+
+    combineCell(): void {
+        TableUtil.mergeCells(this.selectionState)
     }
+
     /**
      * 切换当前段落项目符号状态
      */
-    setParagraphNumberType() {
+    setParagraphNumberType(): void {
         this.documentChange.setParagraphNumberType();
     }
+
     /**
      * 删除当前批注
      * @param id
      */
-    removeComment(id) {
+    removeComment(id: string): void {
         this.docComment.removeComment(id);
         this.selectionState.clear();
     }
+
     /**
      * 移除焦点所在的批注
      */
-    removeCurrentComment() {
-        const comment = ElementUtil.getParent(this.selectionState.startControl, (item => item instanceof CommContentBaseElement));
+    removeCurrentComment(): void {
+        const comment = ElementUtil.getParent(this.selectionState.startControl, (item => item instanceof CommContentBaseElement)) as CommContentBaseElement;
         if (comment) {
             this.removeComment(comment.props.id);
         }
     }
+
     /**
      * 插入批注
      */
-    insertComment() {
+    insertComment(): void {
         this.documentChange.insertComment();
     }
+
     /**
      * 清除所有批注
      */
-    clearAllComments() {
+    clearAllComments(): void {
         this.docComment.clearAllComments();
     }
-    cutTable() {
-        const row = ElementUtil.getParentByType(this.selectionState.startControl, TableRowElement);
-        const tb = row?.parent;
+
+
+    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, userName, date) {
+    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() {
+    validate(): boolean {
         this.docComment.clearAllValidates();
         return this.documentChange.validate();
     }
+
     /**
      * 撤销
      */
-    undo() {
+    undo(): void {
         this.docHistory.undo();
     }
+
     /**
      * 恢复
      */
-    redo() {
+    redo(): void {
         this.docHistory.redo();
     }
+
     /**
      * 是否可以撤销
      */
-    canUndo() {
+    canUndo(): boolean {
         return this.docHistory.canUndo;
     }
+
     /**
      * 是否可以恢复
      */
-    canRedo() {
+    canRedo(): boolean {
         return this.docHistory.canRedo;
     }
-    switchTrackChanges(eleCtx = null) {
+
+    switchTrackChanges(eleCtx: BranchElement | null = null): void {
         eleCtx = eleCtx || this.docCtx.document;
-        const body = eleCtx.treeFind(item => item instanceof DocumentBodyElement);
+        const body = eleCtx.treeFind(item => item instanceof DocumentBodyElement) as DocumentBodyElement;
         if (body) {
             body.trackChanges = !body.trackChanges;
-        }
-        else {
+        } else {
             throw new Error('未找到doc-body');
         }
     }
+
     get trackTipsChanged() {
         return this.documentEvent.trackTipsChanged;
     }
-    switchFullViewPage() {
+
+    switchFullViewPage(): void {
         this.viewOptions.fullPageView = !this.viewOptions.fullPageView;
     }
-    getSelectedJSON() {
+
+    getSelectedJSON(): string {
         return ElementSerialize.getSelectedJSON(this.selectionState, this.viewOptions);
     }
-    getSelectedText() {
+
+    getSelectedText(): string {
         const copySerializeStr = ElementSerialize.getSelectedStruct(this.selectionState, this.viewOptions);
-        return ElementSerialize.serializeString(copySerializeStr);
+        return ElementSerialize.serializeString(copySerializeStr as BranchElement);
     }
+
     /**
      * 设置纸张方向
      * @param orientation
      */
-    setPaperOrient(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, height) {
+    setPaperSize(width: number, height: number): void {
         const docProps = this.docCtx.document.props;
         docProps.width = width;
         docProps.height = height;
@@ -862,22 +940,24 @@ export class CanvasTextEditor {
         this.viewOptions.docPageSettings = new PageOptions(width, height, docProps.orient);
         this.resetViewer('force');
     }
+
     /**
      * 插入强制换页符
      */
-    insertPageBreakPara() {
+    insertPageBreakPara(): void {
         this.documentChange.insertPageBreakPara();
     }
+
     /**
      * 显示当前元素到视图中
      * @param element
      */
-    bringToView(element) {
-        const ele = element instanceof BranchElement ? ElementUtil.getFirstLeafElement(element) : 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);
+            const docRender = ElementUtil.getParentRender(renderObj, DocumentRenderObject) as DocumentRenderObject;
             const index = docRender.getIndex();
             const cursorPos = DocumentCursor.getElementCursorPos(ele, 0, region, index);
             this.selectionState.surround(element);
@@ -887,15 +967,17 @@ export class CanvasTextEditor {
             this.docScroll.scrollTo(cursorPos.rect.x, cursorPos.rect.y - this.viewOptions.translateY);
         }
     }
+
     /**
      * 设置当前文档页边距
      */
-    setDocumentMargin(pageMargin) {
+    setDocumentMargin(pageMargin: Partial<MarginProps>): void {
         if (!this.docCtx.document) {
             return;
         }
         this.docCtx.document.updateMargin(pageMargin);
     }
+
     /**
      * 插入元素
      * @param targetElement
@@ -903,11 +985,26 @@ export class CanvasTextEditor {
      * @param destEleArray
      * @returns
      */
-    insertElement(targetElement, targetOffset, destEleArray) {
+    insertElement(targetElement: Element, targetOffset: number, destEleArray: Array<Element>): Element | null {
         if (!this.selectionState.editable) {
             return null;
         }
         return this.documentChange.insertElement(targetElement, targetOffset, destEleArray);
     }
+
+
 }
-//# sourceMappingURL=texteditor.js.map
+
+
+export type EditorCurrentPos = {
+    pos: Position
+};
+
+export type EditorContenxtProps = {
+    menus: Array<ContentMenuItem>
+} & EditorCurrentPos
+
+export type EditorPanelProps = {
+    type: string;
+} & EditorCurrentPos;
+