@hailin-zheng/editor-core 1.0.6 → 1.0.9

package/{lib/framework/document-history.js → src/med_editor/framework/document-history.ts}

@@ -1,15 +1,20 @@
-import { debounceTime, filter } from 'rxjs/operators';
+import { read } from "fs";
+import { Subject } from "rxjs";
+import { debounceTime, filter } from 'rxjs/operators'
+import { EditorContext } from "./document-context";
+import { ElementReader } from "./element-reader";
 import { ElementSerialize } from "./element-serialize";
+
+export interface DocumentHistoryItem {
+    content: any,
+    time: Date
+}
 /**
- * 支持文档重做和撤销的类
+ * 支持文档重做和撤销的类   
  */
 export class DocumentHistory {
-    docCtx;
-    reader;
-    task = Promise.resolve();
-    constructor(docCtx, reader, onDocChangedEvent) {
-        this.docCtx = docCtx;
-        this.reader = reader;
+    task: Promise<void> = Promise.resolve();
+    constructor(public docCtx: EditorContext, public reader: ElementReader, onDocChangedEvent: Subject<void>) {
         onDocChangedEvent.pipe(filter(() => this.docCtx.viewOptions.enableUndo), debounceTime(1500)).subscribe(() => {
             this.task.then(() => {
                 if (!this.docCtx.viewOptions.enableUndo || !this.docCtx.isDirty) {
@@ -19,10 +24,10 @@ export class DocumentHistory {
             });
         });
     }
-    _undoStack = [];
-    _index = -1;
-    maxLength = 50;
-    generateHistoryItem() {
+    private _undoStack: DocumentHistoryItem[] = [];
+    private _index: number = -1;
+    maxLength: number = 50;
+    generateHistoryItem(): void {
         console.log('生成历史记录');
         if (this.maxLength === this._undoStack.length) {
             this._undoStack.shift();
@@ -35,31 +40,37 @@ export class DocumentHistory {
         });
         this._index++;
     }
+
     get index() {
         return this._index;
     }
+
     get canUndo() {
         return this._index > 0;
     }
+
     get canRedo() {
         return this._index < this._undoStack.length - 1;
     }
+
     undo() {
         if (this.canUndo) {
             this._index--;
             this.reader.read(this._undoStack[this._index].content);
         }
     }
+
     redo() {
         if (this.canRedo) {
             this._index++;
             this.reader.read(this._undoStack[this._index].content);
         }
     }
+
     clear() {
         this._undoStack = [];
         this._index = -1;
         this.generateHistoryItem();
     }
-}
-//# sourceMappingURL=document-history.js.map
+
+}

package/{lib/framework/document-images-loader.js → src/med_editor/framework/document-images-loader.ts}

@@ -1,9 +1,14 @@
-export class DocumentImagesLoader {
-    images = [];
-    clear() {
+import { IImageLoader, ImageSourceItem } from "./document-context";
+import { ImgLoadStatus } from "./element-define";
+
+export class DocumentImagesLoader implements IImageLoader {
+    images: Array<ImageSourceItem> = [];
+
+    clear(): void {
         this.images.length = 0;
     }
-    loadImage(src, onCallback) {
+
+    loadImage(src: string, onCallback: (status: ImgLoadStatus) => void): void {
         if (!src) {
             return;
         }
@@ -12,55 +17,58 @@ export class DocumentImagesLoader {
         if (matchItem) {
             if (matchItem.loadStatus === 'no') {
                 matchItem.cbs.push(onCallback);
-            }
-            else {
+            } else {
                 onCallback(matchItem.loadStatus);
             }
             return;
         }
         const ele = new Image();
         ele.src = src;
-        const task = new Promise((r, i) => {
+        const task = new Promise<void>((r, i) => {
             ele.onload = (e) => { this.invokeImgLoad(src, 'completed'); r(); };
             ele.onerror = (e) => { this.invokeImgLoad(src, 'error'); r(); };
         });
-        const imgItem = {
+        const imgItem: ImageSourceItem = {
             ele,
             src,
             cbs: [onCallback],
             loadStatus: 'no',
             task
         };
-        this.images.push(imgItem);
+        this.images.push(imgItem)
         // if (this.viewOptions.resourceMode === 'immediate') {
         //     ele.onload = (e) => { this.invokeImgLoad(src, 'completed'); };
         //     ele.onerror = (e) => { this.invokeImgLoad(src, 'error'); };
         // }
     }
-    invokeImgLoad(src, status) {
+
+    invokeImgLoad(src: string, status: ImgLoadStatus): void {
         const img = this.images.find(item => item.src === src);
         if (img) {
             img.loadStatus = status;
             img.cbs.forEach(cb => cb(status));
         }
     }
-    getLoadTasks() {
+
+    getLoadTasks(): Array<Promise<void>> {
         return this.images.map(item => item.task);
     }
-    getImage(src) {
+
+
+    getImage(src: string): HTMLImageElement | undefined {
         const img = this.images.find(item => item.src === src);
         return img?.ele;
     }
+
     /**
      * 判断图片是否都已经加载完毕
      * 用于打印时判断，如果当前图片没有加载完毕就打印，图片是打印不出来
-     * @returns
+     * @returns 
      */
-    imagesLoadCompleted() {
+    imagesLoadCompleted(): boolean {
         if (this.images.length === 0) {
             return true;
         }
-        return this.images.every(item => ['completed', 'error'].includes(item.loadStatus));
+        return this.images.every(item => ['completed', 'error'].includes(item.loadStatus))
     }
-}
-//# sourceMappingURL=document-images-loader.js.map
+}

package/{lib/framework/document-input-cursor.js → src/med_editor/framework/document-input-cursor.ts}

@@ -1,70 +1,77 @@
 import { fromEvent, Subject } from "rxjs";
+import { LeafElement } from "./element-define";
 import { KeyboradElementEvent } from "./element-event-define";
 import { DocumentEvent } from "./document-event";
+import { EditorContext } from "./document-context";
+
+export interface ICompositionStartInfo {
+    element: LeafElement, offset: number
+}
+export interface InputData {
+    composition?: boolean;
+    //开启输入法后的光标的起点位置
+    compositionStartInfo?: ICompositionStartInfo;
+    //输入法之前输入的内容
+    prevInputData?: string;
+    data: string
+}
+
 /**
  * 输入处理
  */
 export class DocumentInput {
-    editInput;
-    editCursor;
-    cursorWrapper;
-    docCtx;
     /**
      * 光标是否可见
      */
-    _cursorVisibility = false;
+    private _cursorVisibility = false;
     /**
      * 光标闪烁状态
      */
-    _cursorBlinksState = false;
-    cursorBlinksIntervalID;
+    private _cursorBlinksState = false;
+    private cursorBlinksIntervalID: any;
     //是否是开启输入法了
-    compositionStart = false;
+    private compositionStart = false;
     //开启输入法后输入的文字
-    compositionPrevData;
+    private compositionPrevData!: string;
     //开启输入法后的的元素
-    compositionStartInfo;
+    private compositionStartInfo!: ICompositionStartInfo | null;
     //输入内容事件
-    onInputEvent = new Subject();
+    onInputEvent: Subject<InputData> = new Subject();
     //backspace 键盘事件
-    onBackspaceEvent = new Subject();
+    onBackspaceEvent: Subject<KeyboardEvent> = new Subject();
     //delete 键盘事件
-    onDeleteEvent = new Subject();
+    onDeleteEvent: Subject<KeyboardEvent> = new Subject();
     //enter 键盘事件
-    onEnterEvent = new Subject();
+    onEnterEvent: Subject<void> = new Subject();
     //左键
-    onLeftEvent = new Subject();
+    onLeftEvent: Subject<void> = new Subject();
     //右键
-    onRightEvent = new Subject();
+    onRightEvent: Subject<void> = new Subject();
     //复制
-    onCopyEvent = new Subject();
+    onCopyEvent: Subject<ClipboardEvent> = new Subject();
     //剪切
-    onCutEvent = new Subject();
+    onCutEvent: Subject<ClipboardEvent> = new Subject();
     //粘贴
-    onPasteEvent = new Subject();
+    onPasteEvent: Subject<ClipboardEvent> = new Subject();
     //插入换行符
-    onInsertBr = new Subject();
+    onInsertBr: Subject<void> = new Subject();
     //ctrl+A 全选事件
-    onSelectAllEvent = new Subject();
+    onSelectAllEvent: Subject<void> = new Subject();
     //home 事件
-    onHomeEvent = new Subject();
+    onHomeEvent: Subject<void> = new Subject();
     //end 事件
-    onEndEvent = new Subject();
-    onUpEvent = new Subject();
-    onDownEvent = new Subject();
-    constructor(editInput, editCursor, cursorWrapper, docCtx) {
-        this.editInput = editInput;
-        this.editCursor = editCursor;
-        this.cursorWrapper = cursorWrapper;
-        this.docCtx = docCtx;
+    onEndEvent: Subject<void> = new Subject();
+    onUpEvent: Subject<void> = new Subject();
+    onDownEvent: Subject<void> = new Subject();
+    constructor(private editInput: HTMLInputElement, private editCursor: HTMLSpanElement, private cursorWrapper: HTMLDivElement, private docCtx: EditorContext) {
         this.startCursorBlinks();
         fromEvent(this.editInput, 'blur').subscribe(() => {
             this._cursorVisibility = false;
             //console.log('输入框 blur');
-        });
+        })
         fromEvent(this.editInput, 'focus').subscribe(() => {
             //console.log('输入框 focus');
-        });
+        })
         fromEvent(this.editInput, 'input').subscribe(() => {
             if (this.compositionStart) {
                 return;
@@ -77,37 +84,37 @@ export class DocumentInput {
                 const { startControl, startOffset } = this.docCtx.selectionState;
                 this.onInputEvent.next({
                     data: this.editInput.value, prevInputData: '', compositionStartInfo: {
-                        element: startControl,
+                        element: startControl as LeafElement,
                         offset: startOffset
                     }
                 });
                 this.editInput.value = '';
             }
-        });
-        fromEvent(this.editInput, 'compositionstart').subscribe((evt) => {
+        })
+        fromEvent<CompositionEvent>(this.editInput, 'compositionstart').subscribe((evt) => {
             this.compositionStart = true;
             this.compositionPrevData = '';
             const { startControl, startOffset } = this.docCtx.selectionState;
             //console.log('输入法开始');
             this.compositionStartInfo = {
-                element: startControl,
+                element: startControl as LeafElement,
                 offset: startOffset
             };
         });
-        fromEvent(this.editInput, 'compositionupdate').subscribe((evt) => {
+        fromEvent<CompositionEvent>(this.editInput, 'compositionupdate').subscribe((evt) => {
             if (evt.data === this.compositionPrevData) {
                 return;
             }
             //console.log('输入了：' + evt.data);
             this.onInputEvent.next({
                 data: evt.data,
-                compositionStartInfo: this.compositionStartInfo,
+                compositionStartInfo: this.compositionStartInfo as ICompositionStartInfo,
                 composition: true,
                 prevInputData: this.compositionPrevData
             });
             this.compositionPrevData = evt.data;
         });
-        fromEvent(this.editInput, 'compositionend').subscribe((evt) => {
+        fromEvent<CompositionEvent>(this.editInput, 'compositionend').subscribe((evt) => {
             //console.log('compositionend')
             this.compositionStart = false;
             this.editInput.value = "";
@@ -126,61 +133,55 @@ export class DocumentInput {
             this.compositionStartInfo = null;
             //this.compositionRecordContent = '';
         });
-        fromEvent(this.editInput, 'keydown').subscribe((evt) => {
+        fromEvent<KeyboardEvent>(this.editInput, 'keydown').subscribe((evt) => {
             const keyEvent = new KeyboradElementEvent(this.docCtx);
             keyEvent.sourceEvent = evt;
-            if (DocumentEvent.invokeEvent('ElementKeyDown', this.docCtx.selectionState.startControl, keyEvent, 'Capture', this.docCtx)) {
+            if (DocumentEvent.invokeEvent('ElementKeyDown', this.docCtx.selectionState.startControl as LeafElement, keyEvent, 'Capture', this.docCtx)) {
                 return;
             }
             if (evt.keyCode === 8) {
                 this.onBackspaceEvent.next(evt);
-            }
-            else if (evt.keyCode === 13 && !evt.shiftKey) {
+            } else if (evt.keyCode === 13 && !evt.shiftKey) {
                 this.onEnterEvent.next();
-            }
-            else if (evt.keyCode === 37) {
+            } else if (evt.keyCode === 37) {
                 this.onLeftEvent.next();
-            }
-            else if (evt.keyCode === 39) {
+            } else if (evt.keyCode === 39) {
                 this.onRightEvent.next();
-            }
-            else if (evt.keyCode === 38) {
+            } else if (evt.keyCode === 38) {
                 this.onUpEvent.next();
-            }
-            else if (evt.keyCode === 40) {
+            } else if (evt.keyCode === 40) {
                 this.onDownEvent.next();
             }
             else if (evt.keyCode === 9) {
                 evt.preventDefault();
-            }
-            else if (evt.keyCode === 13 && evt.shiftKey) {
+            } else if (evt.keyCode === 13 && evt.shiftKey) {
                 evt.preventDefault();
                 this.onInsertBr.next();
-            }
-            else if (evt.keyCode === 46) {
+            } else if (evt.keyCode === 46) {
                 this.onDeleteEvent.next(evt);
-            }
-            else if (evt.ctrlKey && evt.keyCode === 65) {
+            } else if (evt.ctrlKey && evt.keyCode === 65) {
                 evt.preventDefault();
                 this.onSelectAllEvent.next();
-            }
-            else if (evt.keyCode === 36) {
+            } else if (evt.keyCode === 36) {
                 this.onHomeEvent.next();
             }
             else if (evt.keyCode === 35) {
                 this.onEndEvent.next();
             }
         });
-        fromEvent(this.editInput, "copy").subscribe(evt => {
+        fromEvent<ClipboardEvent>(this.editInput, "copy").subscribe(evt => {
             this.onCopyEvent.next(evt);
         });
-        fromEvent(this.editInput, "paste").subscribe(evt => {
+        fromEvent<ClipboardEvent>(this.editInput, "paste").subscribe(evt => {
             this.onPasteEvent.next(evt);
         });
-        fromEvent(this.editInput, "cut").subscribe(evt => {
+        fromEvent<ClipboardEvent>(this.editInput, "cut").subscribe(evt => {
             this.onCutEvent.next(evt);
         });
     }
+
+
+
     /**
      * 设置光标闪烁
     */
@@ -189,9 +190,11 @@ export class DocumentInput {
         //     //this.setCursorBlinks();
         // }, 500);
     }
-    destroy() {
+
+    destroy(): void {
         clearInterval(this.cursorBlinksIntervalID);
     }
+
     /**
      * 设置光标闪烁
      */
@@ -199,41 +202,43 @@ export class DocumentInput {
         this.editCursor.style.background = this._cursorBlinksState ? 'transparent' : 'black';
         this._cursorBlinksState = !this._cursorBlinksState;
     }
+
     /**
      * 设置光标位置
      * @param position
      */
-    setCursorPosition(position) {
+    setCursorPosition(position: { x: number; y: number; height: number; }) {
         this.cursorWrapper.style.left = position.x + 'px';
         this.cursorWrapper.style.top = position.y + 'px';
         this.cursorWrapper.style.height = position.height + 'px';
         this.setCursorVisibility(true);
         //this.setCursorInputStatus();
     }
+
     /**
      * 设置虚拟光标的可见性
      * @param visibility
      */
-    setCursorVisibility(visibility) {
+    setCursorVisibility(visibility: boolean) {
         this.cursorWrapper.style.display = visibility ? 'block' : 'none';
         if (visibility) {
             this.setInputFocus(true);
         }
     }
+
     /**
      * 设置输入状态
-     * @param focus
+     * @param focus 
      */
-    setInputFocus(focus) {
+    setInputFocus(focus: boolean): void {
         if (focus) {
             this.editInput.readOnly = false;
             this.editInput.focus();
-        }
-        else {
+
+        } else {
             //this.editInput.blur();
             this.editInput.readOnly = true;
             this.docCtx.selectionState.cursorPos = null;
         }
     }
-}
-//# sourceMappingURL=document-input-cursor.js.map
+}

package/{lib/framework/document-paint.js → src/med_editor/framework/document-paint.ts}

@@ -1,32 +1,32 @@
 import { ElementMeasure } from "./element-measure";
 import { ElementPaint } from "./element-paint";
 import { ElementRenderCut } from "./element-render-cut";
+import { DocumentRenderObject } from "./impl/document/doc-impl";
+import { RenderContenxtType } from "./render-context";
+import { Element, SelectionContentRange, ViewOptions } from "./element-define";
 import { DocumentContainerRender } from "./impl/document/doc-container-impl";
 import { ElementUtil } from "./element-util";
 import { DocumentSelection } from "./document-selection";
+import { CommsContainerRenderObject } from "./impl/comments/comments-container-impl";
 import { RangeUtil } from "./range-util";
 import { SelectionOverlays } from "./selection-overlays";
+import { EditorContext } from "./document-context";
+import { CommContentElement, CommentRangeStatus } from "./impl/comments/comment-content-impl";
+
 export class DocumentPaint {
-    viewOptions;
-    renderContext;
-    docCtx;
-    selectedSets;
-    elementMeasure;
-    elementRenderCut;
-    elementPaint;
-    docPages;
-    docContainer;
-    commsContainer;
-    constructor(viewOptions, renderContext, docCtx, selectedSets) {
-        this.viewOptions = viewOptions;
-        this.renderContext = renderContext;
-        this.docCtx = docCtx;
-        this.selectedSets = selectedSets;
+    elementMeasure: ElementMeasure;
+    elementRenderCut: ElementRenderCut;
+    elementPaint: ElementPaint;
+    docPages!: Array<DocumentRenderObject>;
+    docContainer!: DocumentContainerRender;
+    commsContainer!: CommsContainerRenderObject;
+    constructor(private viewOptions: ViewOptions, private renderContext: RenderContenxtType, private docCtx: EditorContext, private selectedSets: Map<Element, SelectionContentRange>) {
         this.elementMeasure = new ElementMeasure(this.viewOptions, this.renderContext);
         this.elementRenderCut = new ElementRenderCut(this.viewOptions, this.renderContext);
         this.elementPaint = new ElementPaint(this.viewOptions, this.renderContext);
     }
-    rePages() {
+
+    rePages(): void {
         // const destroyItems = [this.docContainer, this.commsContainer];
         // destroyItems.forEach(item => item?.destroy())
         //Promise.resolve().then(() => { destroyItems.forEach(item => item?.destroy()) });
@@ -38,9 +38,9 @@ export class DocumentPaint {
         this.docContainer.rect.width = this.viewOptions.docPageSettings.width;
         // console.time('排版计时');
         const documentRender = this.elementMeasure.measureDocument(this.docCtx.document);
-        this.commsContainer = documentRender.getChild(3);
+        this.commsContainer = documentRender.getChild(3) as CommsContainerRenderObject;
         if (this.commsContainer) {
-            this.commsContainer = this.commsContainer.clone();
+            this.commsContainer = this.commsContainer.clone() as CommsContainerRenderObject;
         }
         //console.timeEnd('排版计时');
         //console.time('断页计时');
@@ -50,11 +50,14 @@ export class DocumentPaint {
         ElementUtil.remeasure(this.docContainer);
         this.setCommRangeMark();
         this.docPages = docPages;
+
+
     }
+
     /**
      * 获取设置文档容器的总高度
      */
-    getDocumentContainerHeight() {
+    getDocumentContainerHeight(): number {
         if (this.docPages.length > 0) {
             const lastPage = this.docPages[this.docPages.length - 1];
             const lastPageY = lastPage.rect.y + lastPage.rect.height + this.viewOptions.docSpace;
@@ -64,29 +67,34 @@ export class DocumentPaint {
             return 0;
         }
     }
-    refreshView(rePaint = false) {
+
+    refreshView(rePaint = false): void {
         //console.time('计时');
         this.elementPaint.drawPages(this.docContainer, this.selectedSets, this.commsContainer, rePaint);
         //console.timeEnd('计时');
+
     }
-    getDocPages() {
+
+    getDocPages(): Array<DocumentRenderObject> {
         return this.docPages;
     }
-    getDocContainer() {
+
+    getDocContainer(): DocumentContainerRender {
         return this.docContainer;
     }
+
     /***
      * 设置审阅区间样式痕迹
      */
-    setCommRangeMark() {
+    setCommRangeMark(): void {
         if (!this.viewOptions.showReviewWindow) {
             return;
         }
         const cce = this.docCtx.document.commentsContainerElement;
-        const set = new Map();
-        const commentRangeStatus = [];
+        const set = new Map<Element, SelectionContentRange>();
+        const commentRangeStatus: Array<CommentRangeStatus> = [];
         for (let i = 0; i < cce.length; i++) {
-            const commContent = cce.getChild(i);
+            const commContent = cce.getChild(i) as CommContentElement;
             const { startMark, endMark, props: { id }, focus } = commContent;
             const ancestorCommonControl = DocumentSelection.getAncestorCommonControl(startMark, endMark);
             const commonRange = RangeUtil.getSelctionRange(startMark, 0, endMark, 1, ancestorCommonControl);
@@ -94,10 +102,9 @@ export class DocumentPaint {
             commentRangeStatus.push({
                 commContent,
                 range: commonRange
-            });
+            })
         }
         this.commsContainer.selectedSet = set;
         this.commsContainer.commentRangeStatus = commentRangeStatus;
     }
 }
-//# sourceMappingURL=document-paint.js.map