@hailin-zheng/editor-core 1.0.4 → 1.0.7

package/src/med_editor/framework/document-history.ts

@@ -1,76 +0,0 @@
-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 {
-    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) {
-                    return;
-                }
-                this.generateHistoryItem();
-            });
-        });
-    }
-    private _undoStack: DocumentHistoryItem[] = [];
-    private _index: number = -1;
-    maxLength: number = 50;
-    generateHistoryItem(): void {
-        console.log('生成历史记录');
-        if (this.maxLength === this._undoStack.length) {
-            this._undoStack.shift();
-        }
-        this._undoStack.splice(this._index + 1, this._undoStack.length - this._index - 1);
-        const content = ElementSerialize.serialize(this.docCtx.document, this.docCtx.viewOptions);
-        this._undoStack.push({
-            content,
-            time: new Date()
-        });
-        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();
-    }
-
-}

package/src/med_editor/framework/document-images-loader.ts

@@ -1,74 +0,0 @@
-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: string, onCallback: (status: ImgLoadStatus) => void): void {
-        if (!src) {
-            return;
-        }
-        //已经存在的资源不需要重新加载
-        let matchItem = this.images.find(item => item.src === src);
-        if (matchItem) {
-            if (matchItem.loadStatus === 'no') {
-                matchItem.cbs.push(onCallback);
-            } else {
-                onCallback(matchItem.loadStatus);
-            }
-            return;
-        }
-        const ele = new Image();
-        ele.src = src;
-        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: ImageSourceItem = {
-            ele,
-            src,
-            cbs: [onCallback],
-            loadStatus: 'no',
-            task
-        };
-        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: 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(): Array<Promise<void>> {
-        return this.images.map(item => item.task);
-    }
-
-
-    getImage(src: string): HTMLImageElement | undefined {
-        const img = this.images.find(item => item.src === src);
-        return img?.ele;
-    }
-
-    /**
-     * 判断图片是否都已经加载完毕
-     * 用于打印时判断，如果当前图片没有加载完毕就打印，图片是打印不出来
-     * @returns 
-     */
-    imagesLoadCompleted(): boolean {
-        if (this.images.length === 0) {
-            return true;
-        }
-        return this.images.every(item => ['completed', 'error'].includes(item.loadStatus))
-    }
-}

package/src/med_editor/framework/document-input-cursor.ts

@@ -1,244 +0,0 @@
-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 {
-    /**
-     * 光标是否可见
-     */
-    private _cursorVisibility = false;
-    /**
-     * 光标闪烁状态
-     */
-    private _cursorBlinksState = false;
-    private cursorBlinksIntervalID: any;
-    //是否是开启输入法了
-    private compositionStart = false;
-    //开启输入法后输入的文字
-    private compositionPrevData!: string;
-    //开启输入法后的的元素
-    private compositionStartInfo!: ICompositionStartInfo | null;
-    //输入内容事件
-    onInputEvent: Subject<InputData> = new Subject();
-    //backspace 键盘事件
-    onBackspaceEvent: Subject<KeyboardEvent> = new Subject();
-    //delete 键盘事件
-    onDeleteEvent: Subject<KeyboardEvent> = new Subject();
-    //enter 键盘事件
-    onEnterEvent: Subject<void> = new Subject();
-    //左键
-    onLeftEvent: Subject<void> = new Subject();
-    //右键
-    onRightEvent: Subject<void> = new Subject();
-    //复制
-    onCopyEvent: Subject<ClipboardEvent> = new Subject();
-    //剪切
-    onCutEvent: Subject<ClipboardEvent> = new Subject();
-    //粘贴
-    onPasteEvent: Subject<ClipboardEvent> = new Subject();
-    //插入换行符
-    onInsertBr: Subject<void> = new Subject();
-    //ctrl+A 全选事件
-    onSelectAllEvent: Subject<void> = new Subject();
-    //home 事件
-    onHomeEvent: Subject<void> = new Subject();
-    //end 事件
-    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;
-            }
-            if (!this.editInput.value) {
-                return;
-            }
-            //console.log('输入文字了');
-            if (!this.compositionStart) {
-                const { startControl, startOffset } = this.docCtx.selectionState;
-                this.onInputEvent.next({
-                    data: this.editInput.value, prevInputData: '', compositionStartInfo: {
-                        element: startControl as LeafElement,
-                        offset: startOffset
-                    }
-                });
-                this.editInput.value = '';
-            }
-        })
-        fromEvent<CompositionEvent>(this.editInput, 'compositionstart').subscribe((evt) => {
-            this.compositionStart = true;
-            this.compositionPrevData = '';
-            const { startControl, startOffset } = this.docCtx.selectionState;
-            //console.log('输入法开始');
-            this.compositionStartInfo = {
-                element: startControl as LeafElement,
-                offset: startOffset
-            };
-        });
-        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 as ICompositionStartInfo,
-                composition: true,
-                prevInputData: this.compositionPrevData
-            });
-            this.compositionPrevData = evt.data;
-        });
-        fromEvent<CompositionEvent>(this.editInput, 'compositionend').subscribe((evt) => {
-            //console.log('compositionend')
-            this.compositionStart = false;
-            this.editInput.value = "";
-            this.compositionPrevData = '';
-            // this.onInputEvent.next({
-            //     data: evt.data,
-            //     compositionStartOffset: this.compositionStartOffset,
-            //     compositionRecordContent: this.compositionRecordContent
-            // });
-            // this.onInputEvent.next({
-            //     data: evt.data,
-            //     compositionStartInfo: this.compositionStartInfo,
-            //     composition: true,
-            //     prevInputData: ''
-            // });
-            this.compositionStartInfo = null;
-            //this.compositionRecordContent = '';
-        });
-        fromEvent<KeyboardEvent>(this.editInput, 'keydown').subscribe((evt) => {
-            const keyEvent = new KeyboradElementEvent(this.docCtx);
-            keyEvent.sourceEvent = evt;
-            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) {
-                this.onEnterEvent.next();
-            } else if (evt.keyCode === 37) {
-                this.onLeftEvent.next();
-            } else if (evt.keyCode === 39) {
-                this.onRightEvent.next();
-            } else if (evt.keyCode === 38) {
-                this.onUpEvent.next();
-            } else if (evt.keyCode === 40) {
-                this.onDownEvent.next();
-            }
-            else if (evt.keyCode === 9) {
-                evt.preventDefault();
-            } else if (evt.keyCode === 13 && evt.shiftKey) {
-                evt.preventDefault();
-                this.onInsertBr.next();
-            } else if (evt.keyCode === 46) {
-                this.onDeleteEvent.next(evt);
-            } else if (evt.ctrlKey && evt.keyCode === 65) {
-                evt.preventDefault();
-                this.onSelectAllEvent.next();
-            } else if (evt.keyCode === 36) {
-                this.onHomeEvent.next();
-            }
-            else if (evt.keyCode === 35) {
-                this.onEndEvent.next();
-            }
-        });
-        fromEvent<ClipboardEvent>(this.editInput, "copy").subscribe(evt => {
-            this.onCopyEvent.next(evt);
-        });
-        fromEvent<ClipboardEvent>(this.editInput, "paste").subscribe(evt => {
-            this.onPasteEvent.next(evt);
-        });
-        fromEvent<ClipboardEvent>(this.editInput, "cut").subscribe(evt => {
-            this.onCutEvent.next(evt);
-        });
-    }
-
-
-
-    /**
-     * 设置光标闪烁
-    */
-    startCursorBlinks() {
-        // this.cursorBlinksIntervalID = setInterval(() => {
-        //     //this.setCursorBlinks();
-        // }, 500);
-    }
-
-    destroy(): void {
-        clearInterval(this.cursorBlinksIntervalID);
-    }
-
-    /**
-     * 设置光标闪烁
-     */
-    setCursorBlinks() {
-        this.editCursor.style.background = this._cursorBlinksState ? 'transparent' : 'black';
-        this._cursorBlinksState = !this._cursorBlinksState;
-    }
-
-    /**
-     * 设置光标位置
-     * @param 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: boolean) {
-        this.cursorWrapper.style.display = visibility ? 'block' : 'none';
-        if (visibility) {
-            this.setInputFocus(true);
-        }
-    }
-
-    /**
-     * 设置输入状态
-     * @param focus 
-     */
-    setInputFocus(focus: boolean): void {
-        if (focus) {
-            this.editInput.readOnly = false;
-            this.editInput.focus();
-
-        } else {
-            //this.editInput.blur();
-            this.editInput.readOnly = true;
-            this.docCtx.selectionState.cursorPos = null;
-        }
-    }
-}

package/src/med_editor/framework/document-paint.ts

@@ -1,110 +0,0 @@
-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 {
-    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(): void {
-        // const destroyItems = [this.docContainer, this.commsContainer];
-        // destroyItems.forEach(item => item?.destroy())
-        //Promise.resolve().then(() => { destroyItems.forEach(item => item?.destroy()) });
-        if (!this.docCtx.document.length) {
-            return;
-        }
-        this.docContainer = new DocumentContainerRender();
-        this.docCtx.selectionState.renderContainer = this.docContainer;
-        this.docContainer.rect.width = this.viewOptions.docPageSettings.width;
-        // console.time('排版计时');
-        const documentRender = this.elementMeasure.measureDocument(this.docCtx.document);
-        this.commsContainer = documentRender.getChild(3) as CommsContainerRenderObject;
-        if (this.commsContainer) {
-            this.commsContainer = this.commsContainer.clone() as CommsContainerRenderObject;
-        }
-        //console.timeEnd('排版计时');
-        //console.time('断页计时');
-        const docPages = this.elementRenderCut.cutPage(documentRender, this.docCtx.document);
-        //console.timeEnd('断页计时');
-        this.docContainer.addPages(docPages);
-        ElementUtil.remeasure(this.docContainer);
-        this.setCommRangeMark();
-        this.docPages = docPages;
-
-
-    }
-
-    /**
-     * 获取设置文档容器的总高度
-     */
-    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;
-            return lastPageY + (this.viewOptions.viewSettings.height * (this.viewOptions.scale - 1));
-        }
-        else {
-            return 0;
-        }
-    }
-
-    refreshView(rePaint = false): void {
-        //console.time('计时');
-        this.elementPaint.drawPages(this.docContainer, this.selectedSets, this.commsContainer, rePaint);
-        //console.timeEnd('计时');
-
-    }
-
-    getDocPages(): Array<DocumentRenderObject> {
-        return this.docPages;
-    }
-
-    getDocContainer(): DocumentContainerRender {
-        return this.docContainer;
-    }
-
-    /***
-     * 设置审阅区间样式痕迹
-     */
-    setCommRangeMark(): void {
-        if (!this.viewOptions.showReviewWindow) {
-            return;
-        }
-        const cce = this.docCtx.document.commentsContainerElement;
-        const set = new Map<Element, SelectionContentRange>();
-        const commentRangeStatus: Array<CommentRangeStatus> = [];
-        for (let i = 0; i < cce.length; 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);
-            SelectionOverlays.addToCommentSets(commonRange, set);
-            commentRangeStatus.push({
-                commContent,
-                range: commonRange
-            })
-        }
-        this.commsContainer.selectedSet = set;
-        this.commsContainer.commentRangeStatus = commentRangeStatus;
-    }
-}

package/src/med_editor/framework/document-print-offscreen.ts

@@ -1,134 +0,0 @@
-import { EditorContext } from "./document-context";
-import { DocumentPaint } from "./document-paint";
-import { exportCanvasToPDF, printNodes } from "./document-print";
-import { SelectionState } from "./document-selection";
-import { ViewOptions } from "./element-define";
-import { ElementPaint } from "./element-paint";
-import { ElementReader } from "./element-reader";
-import { ElementUtil } from "./element-util";
-import { DocumentElement, DocumentRenderObject } from "./impl/document/doc-impl";
-import { RenderContenxt, RenderContenxtType } from "./render-context";
-
-/**
- * 离屏打印
- */
-export class DocumentPrintOffscreen {
-    documentPaint: DocumentPaint;
-    viewOptions: ViewOptions;
-    docCtx: EditorContext;
-    renderCtx: RenderContenxt;
-    elementReader: ElementReader;
-    ctx: CanvasRenderingContext2D;
-    constructor() {
-        this.viewOptions = new ViewOptions();
-        this.viewOptions.copyRightInfo = '万达信息电子病历编辑器,www.wondersgroup.com';
-        this.viewOptions.showCharRect = true;
-        this.viewOptions.drawCharRectColor = 'green';
-        this.viewOptions.showLineRect = true;
-        this.viewOptions.docSpace = 20;
-        this.viewOptions.reviewWindowWidth = 200;
-        this.viewOptions.mmToPixelsRatio = 3.7795001220703126;
-        //整个画布的尺寸
-        this.viewOptions.viewSettings = {
-            width: 1000,
-            height: 800
-        };
-        this.viewOptions.editUser = {
-            id: '6666',
-            name: '管理员'
-        };
-        const canvas = document.createElement('canvas');
-        this.ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-        const ss = new SelectionState();
-        this.docCtx = new EditorContext(ss, this.viewOptions);
-        this.renderCtx = new RenderContenxt(this.ctx, this.viewOptions, this.docCtx);
-        this.documentPaint = new DocumentPaint(this.viewOptions, this.renderCtx, this.docCtx, new Map());
-        this.elementReader = new ElementReader(this.docCtx, this.viewOptions, this.renderCtx);
-        this.docCtx.syncRefresh = () => {
-        };
-    }
-    async print(data: any | DocumentElement, ranges: Array<number> | null = null): Promise<void> {
-        await this.prepare(data);
-        const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
-        if (!canvasNodes.length) {
-            console.warn('无可打印页')
-            return;
-        }
-        const docProps = this.docCtx.document.props;
-        printNodes(canvasNodes, { ...docProps });
-    }
-
-    /**
-     * 导出PDF
-     * @param fileName
-     * @param ss
-     * @param viewOptions
-     * @param docCtx
-     * @param ranges
-     */
-    async exportToPDF(data: any | DocumentElement, fileName: string, ranges: Array<number> | null = null): Promise<void> {
-        await this.prepare(data);
-        const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
-        if (!canvasNodes.length) {
-            console.warn('无可导出页')
-            return;
-        }
-        exportCanvasToPDF(fileName, canvasNodes, this.docCtx.document.props);
-    }
-
-
-    /**
-     * 获取绘制的图片，格式为Base64编码
-     */
-    async getImagesContent(data: any | DocumentElement, ranges: Array<number> | null = null): Promise<Array<string>> {
-        await this.prepare(data);
-        const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
-        if (!canvasNodes.length) {
-            console.warn('无可导出页')
-            return [];
-        }
-        return canvasNodes.map(node => node.toDataURL());
-    }
-
-    /**
-     * 读取数据，排版
-     * @param data
-     */
-    private async prepare(data: any | DocumentElement,): Promise<void> {
-        this.elementReader.read(data);
-        this.documentPaint.rePages();
-        await Promise.all(this.docCtx.imageLoader.getLoadTasks());
-        this.renderCtx.setCanvasProps(this.viewOptions.docPageSettings);
-    }
-
-    private getCanvasNodes(printPages: Array<DocumentRenderObject>, printRanges: Array<number> | null = null): Array<HTMLCanvasElement> {
-        const { width, height } = this.viewOptions.docPageSettings;
-        const canvasList: Array<HTMLCanvasElement> = [];
-        for (let i = 0; i < printPages.length; i++) {
-            if (printRanges && printRanges.indexOf(i) === -1) {
-                continue;
-            }
-            const canvasNode = document.createElement('canvas');
-            canvasNode.style.cursor = 'text';
-            canvasNode.style.width = width + 'px';
-            canvasNode.style.height = height + 'px';
-            const ctx = canvasNode.getContext('2d') as CanvasRenderingContext2D;
-            ElementUtil.setCanvasProps(canvasNode, ctx, this.viewOptions.docPageSettings);
-            const renderCtx = new RenderContenxt(ctx, this.viewOptions, this.docCtx);
-            renderCtx.setCanvasProps(this.viewOptions.docPageSettings);
-            renderCtx.drawMode = 'print';
-            const doc = printPages[i];
-            const tmp = ElementUtil.cloneRect(doc.rect);
-            doc.rect.x = 0;
-            doc.rect.y = 0;
-            ElementPaint.drawPage(renderCtx, doc, { x: 0, y: 0 });
-            renderCtx.overlaysContext.clear();
-            renderCtx.mainCtx.fillStyle = 'white';
-            renderCtx.mainCtx.fillRect(0, 0, width, height);
-            renderCtx.commit(this.viewOptions.docPageSettings);
-            doc.rect = tmp;
-            canvasList.push(canvasNode);
-        }
-        return canvasList;
-    }
-}