@hailin-zheng/editor-core 1.0.7 → 1.0.10

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

@@ -1,43 +1,51 @@
 import { DocumentEvalFunc } from "./document-eval-func";
 import { DocumentImagesLoader } from "./document-images-loader";
-import { ModifyFlag } from "./element-define";
-import { ElementSerialize } from "./element-serialize";
+import { SelectionState } from "./document-selection";
+import { BranchElement, Element, ImgLoadStatus, ModifyFlag, Rect, RefreshType, ViewOptions } from "./element-define";
+import { ElementEvent, EventTypes } from "./element-event-define";
+import { DataElementValueStruct, ElementSerialize } from "./element-serialize";
 import { DataElementInlineGroup, DataElementLeaf, validateDataEle } from "./impl/data-element/data-element-base-impl";
 import { DataElementCheck } from "./impl/data-element/data-element-check-impl";
 import { DocumentElement } from "./impl/document/doc-impl";
-import { TrackRunElement } from "@/med_editor/framework/impl/text/track-run-impl";
+import { TrackRunElement, TrackRunTypeEnum } from "./impl/text/track-run-impl";
 import { ElementUtil } from "./element-util";
 import { DocumentBodyPartElement } from "./impl/document/doc-body-part-impl";
+import { DocumentChange } from "./document-change";
 import { CommonUtil } from "./common-util";
+
+interface RegisterTypeHandlerProps<T extends Element> {
+    elementType: { new(...args: any): T },
+    eventName: EventTypes,
+    handler: <E extends ElementEvent>(e: E) => void,
+    useCapture: boolean
+}
 /**
  * 当前打开的文档的上下文信息，当前文档所有的属性设置都暴露在上下文中
  */
 export class EditorContext {
-    selectionState;
-    viewOptions;
-    isDirty = false;
-    cursorRect;
-    _document;
+    isDirty: boolean = false;
+    cursorRect!: Rect | null;
+    private _document!: DocumentElement;
     //文档刷新的订阅事件
     //refSub!: Subscription;
-    syncRefresh;
-    imageLoader;
-    dynamicFunc;
-    docChange;
-    clearPrevDocCb;
-    constructor(selectionState, viewOptions) {
-        this.selectionState = selectionState;
-        this.viewOptions = viewOptions;
+    syncRefresh!: () => void;
+    imageLoader: IImageLoader;
+    dynamicFunc: DocumentEvalFunc;
+    docChange!: DocumentChange;
+    clearPrevDocCb!: (() => void) | null;
+    constructor(public readonly selectionState: SelectionState, public readonly viewOptions: ViewOptions) {
         this.dynamicFunc = new DocumentEvalFunc(this);
         this.imageLoader = new DocumentImagesLoader();
         this.selectionState.onChangedEvent.subscribe(() => {
             this.syncRefresh?.();
         });
     }
-    get document() {
+
+    public get document(): DocumentElement {
         return this._document;
     }
-    set document(value) {
+
+    public set document(value: DocumentElement) {
         this.clearPrevDocCb?.();
         this._document = value;
         this.initScripts();
@@ -62,77 +70,88 @@ export class EditorContext {
                 this._document.destroy();
             }
             this.clearPrevDocCb = null;
-        };
+        }
     }
-    clear() {
+
+    clear(): void {
         this.selectionState.clear();
-        this.imageLoader.clear();
-        ;
+        this.imageLoader.clear();;
         this.dynamicFunc.destroyScripts();
         this.isDirty = false;
     }
-    get defaultCtx() {
+
+    get defaultCtx(): DocumentContext {
         return new DocumentContext(this._document, this.selectionState);
     }
-    getCurrentCtx(ele) {
-        const parentCtx = ElementUtil.getParent(ele, (item) => item instanceof DocumentElement || item instanceof DocumentBodyPartElement);
+
+    getCurrentCtx(ele: Element): DocumentContext {
+        const parentCtx = ElementUtil.getParent(ele, (item) => item instanceof DocumentElement || item instanceof DocumentBodyPartElement) as BranchElement;
         return new DocumentContext(parentCtx, this.selectionState);
     }
+
     /**
      * 根据当前选区，返回所在的上下文元素，返回类型为DocumentElement|DocumentBodyPartElement
      */
-    getCurrentEleCtx() {
+    getCurrentEleCtx(): BranchElement | null {
         const { startControl } = this.selectionState;
         if (!startControl) {
             return null;
         }
-        const parentCtx = ElementUtil.getParent(startControl, (item) => item instanceof DocumentElement || item instanceof DocumentBodyPartElement);
+        const parentCtx = ElementUtil.getParent(startControl, (item) => item instanceof DocumentElement || item instanceof DocumentBodyPartElement) as BranchElement;
         return parentCtx;
     }
-    getCtx(ele) {
+
+    getCtx(ele: BranchElement): DocumentContext {
         return new DocumentContext(ele, this.selectionState);
     }
-    ele_types_handlers = [];
-    registerTypeHandlers(elementType, eventName, handler, useCapture = false) {
+
+
+    private ele_types_handlers: Array<RegisterTypeHandlerProps<Element>> = [];
+    registerTypeHandlers<T extends Element>(elementType: { new(...args: any): T }, eventName: EventTypes, handler: (e: ElementEvent) => void, useCapture: boolean = false): void {
         this.ele_types_handlers.push({
             elementType,
             eventName,
             handler,
             useCapture
-        });
+        })
     }
-    invokeTypeHandler(ele, eventName, e, useCapture = false) {
+
+    invokeTypeHandler(ele: Element, eventName: EventTypes, e: ElementEvent, useCapture: boolean = false): void {
         for (const th of this.ele_types_handlers) {
             if (ele instanceof th.elementType && th.eventName === eventName && th.useCapture === useCapture) {
                 th.handler(e);
             }
         }
     }
-    destroy() {
+
+    destroy(): void {
         this.clear();
         this.document.destroy();
         this.clearPrevDocCb?.();
         this.ele_types_handlers.length = 0;
-        this.imageLoader.clear();
-        ;
+        this.imageLoader.clear();;
     }
+
     /**
      * 切换到行打印模式
      */
-    switchTextlineMode() {
+    switchTextlineMode(): void {
         this.document.viewOptions.textRowLineMode = !this.document.viewOptions.textRowLineMode;
         this.syncRefresh();
     }
+
     /**
      * 实例化动态脚本
      */
-    initScripts() {
+    private initScripts(): void {
         this.dynamicFunc.initScripts(this.document.props.scripts);
     }
+
+
     /**
      * 替换数据元
      */
-    replaceDataElement(oldDataElement, newElement, ss) {
+    replaceDataElement(oldDataElement: DataElementLeaf | DataElementInlineGroup, newElement: DataElementLeaf | DataElementInlineGroup, ss: SelectionState): void {
         //清除光标
         ss.clear();
         //执行刷新
@@ -141,72 +160,96 @@ export class EditorContext {
         //删除旧节点
         oldDataElement.remove();
     }
-    get refreshType() {
-        return this._document?.modifyFlag === ModifyFlag.None ? 'appearance' : 'content';
+
+    get refreshType(): RefreshType {
+        return this._document?.modifyFlag === ModifyFlag.None ? 'appearance' : 'content'
     }
 }
+
+export interface ImageSourceItem {
+    src: string,
+    task: Promise<void>;
+    cbs: Array<(status: ImgLoadStatus) => void>;
+    ele: HTMLImageElement,
+    loadStatus: ImgLoadStatus
+}
+
+export interface IImageLoader {
+    clear(): void;
+    loadImage(src: string, onCallback: (status: ImgLoadStatus) => void): void;
+    getImage(src: string): HTMLImageElement | undefined;
+    imagesLoadCompleted(): boolean;
+    getLoadTasks(): Array<Promise<void>>;
+}
+
 /**
  * 文档上下文
  */
 export class DocumentContext {
-    ctx;
-    ss;
-    constructor(ctx, ss) {
-        this.ctx = ctx;
-        this.ss = ss;
-    }
-    getControlIDList() {
-        const dataEleList = this.ctx.treeFilter(item => validateDataEle(item));
+    constructor(private ctx: BranchElement, private ss: SelectionState) { }
+
+    getControlIDList(): Array<string> {
+        const dataEleList = <unknown>this.ctx.treeFilter(item => validateDataEle(item)) as Array<{ props: { id: string } }>;
         return dataEleList.map(item => item.props.id);
     }
-    getControlInstanceList() {
-        return this.ctx.treeFilter(item => validateDataEle(item));
+
+    getControlInstanceList(): Array<DataElementInlineGroup | DataElementLeaf> {
+        return this.ctx.treeFilter(item => validateDataEle(item)) as Array<DataElementInlineGroup | DataElementLeaf>;
     }
-    getControlById(id) {
-        return this.ctx.treeFind(item => validateDataEle(item) && item['props']['id'] === id);
+
+    getControlById(id: string): DataElementInlineGroup | DataElementLeaf {
+        return this.ctx.treeFind(item => validateDataEle(item) && (<any>item)['props']['id'] === id) as DataElementInlineGroup | DataElementLeaf;
     }
-    getControlByName(name) {
-        return this.ctx.treeFind(item => validateDataEle(item) && item['props']['name'] === name);
+
+    getControlByName(name: string): DataElementInlineGroup | DataElementLeaf {
+        return this.ctx.treeFind(item => validateDataEle(item) && (<any>item)['props']['name'] === name) as DataElementInlineGroup | DataElementLeaf;
     }
+
     /**
     * 获取数据元值集合
     */
-    getDataElementValues() {
+    getDataElementValues(): Array<DataElementValueStruct> {
         const structList = this.getDataElementModelList();
-        return structList.map(item => ({
+        return structList.map<DataElementValueStruct>(item => ({
             id: item.id,
             name: item.name,
             value: item.getValue()
         }));
     }
+
     /**
      * 获取数据元结构以及get\set闭包调用函数
-     * @returns
+     * @returns 
      */
-    getDataElementModelList() {
-        const dataEleList = this.ctx.treeFilter(item => validateDataEle(item));
-        const dataInlineGroups = dataEleList.filter(item => item instanceof DataElementInlineGroup);
-        const dataLeafs = dataEleList.filter(item => item instanceof DataElementLeaf);
+    getDataElementModelList(): Array<DataCheckEleModel | DataInputEleModel | DataLeafEleModel> {
+        const dataEleList = this.ctx.treeFilter(item => validateDataEle(item)) as Array<DataElementInlineGroup | DataElementLeaf>;
+
+        const dataInlineGroups = dataEleList.filter(item => item instanceof DataElementInlineGroup) as Array<DataElementInlineGroup>;
+        const dataLeafs = dataEleList.filter(item => item instanceof DataElementLeaf) as Array<DataElementLeaf>;
+
         //复选框数据元
-        const dataCheckList = dataLeafs.filter(item => item instanceof DataElementCheck);
+        const dataCheckList = dataLeafs.filter(item => item instanceof DataElementCheck) as Array<DataElementCheck>;
         //除复选框之外的LeafDataElement
-        const dataOtherLeafValues = CommonUtil.removeUnionSet(dataLeafs, dataCheckList).map(item => ({ id: item.props.id, name: item.props.name, fieldName: item.props.field, item, getValue: () => { return item.getValue(); }, setValue: (val) => { item.setValue(val); } }));
-        const dataInlineStructList = dataInlineGroups.map(item => ({ id: item.props.id, name: item.props.name, fieldName: item.props.fieldName, item, getValue: () => { return item.getValue(); }, setValue: (val) => { item.setValue(val); } }));
+        const dataOtherLeafValues = CommonUtil.removeUnionSet(dataLeafs, dataCheckList).map<DataLeafEleModel>(item => (
+            { id: item.props.id as string, name: item.props.name as string, fieldName: item.props.field as string, item, getValue: () => { return item.getValue() }, setValue: (val) => { item.setValue(val) } }));
+        const dataInlineStructList = dataInlineGroups.map<DataInputEleModel>(item => (
+            { id: item.props.id, name: item.props.name, fieldName: item.props.fieldName, item, getValue: () => { return item.getValue() }, setValue: (val) => { item.setValue(val) } }));
         //复选框列表
         const dataCheckStructList = this.getDataCheckModelList(dataCheckList);
         return [...dataInlineStructList, ...dataCheckStructList, ...dataOtherLeafValues];
     }
+
     /**
      * 获取复选框数据元结构列表
-     * @param dataCheckList
-     * @returns
+     * @param dataCheckList 
+     * @returns 
      */
-    getDataCheckModelList(dataCheckList) {
+    private getDataCheckModelList(dataCheckList: Array<DataElementCheck>): Array<DataCheckEleModel | DataLeafEleModel> {
         //不存在groupName的复选框
         const singleCheckList = dataCheckList.filter(item => !item.props.groupName);
         //存在groupName的复选框
         const groupNames = Array.from(new Set(dataCheckList.filter(item => item.props.groupName).map(item => item.props.groupName)));
-        const groupCheckListValues = groupNames.map((groupName) => {
+        const groupCheckListValues = groupNames.map<DataCheckEleModel>((groupName) => {
             const groupCheckItems = dataCheckList.filter(item => item.props.groupName === groupName);
             return {
                 id: groupName,
@@ -218,17 +261,15 @@ export class DocumentContext {
                     let checkedValue = '';
                     if (groupCheckItems[0].props.multiSelect) {
                         checkedValue = groupCheckItems.filter(item => item.props.checked).map(item => item.getValue() + '').join(';');
-                    }
-                    else {
-                        const checkedSingleItem = groupCheckItems.find(item => item.props.checked);
+                    } else {
+                        const checkedSingleItem = groupCheckItems.find(item => item.props.checked)
                         if (checkedSingleItem) {
                             checkedValue = checkedSingleItem.props.checkedValue;
                         }
-                    }
-                    ;
+                    };
                     return checkedValue;
                 },
-                setValue: (val) => {
+                setValue: (val: string | Array<string>) => {
                     //为null时
                     if (val === null || val === undefined) {
                         groupCheckItems.forEach(item => item.props.checked = false);
@@ -236,38 +277,40 @@ export class DocumentContext {
                     }
                     if (groupCheckItems[0].props.multiSelect) {
                         const valItems = typeof val === 'string' ? val.split(';') : val;
+
                         groupCheckItems.forEach(item => {
                             item.props.checked = valItems.indexOf(item.props.checkedValue + '') >= 0;
                         });
-                    }
-                    else {
+                    } else {
                         groupCheckItems.forEach(item => {
                             item.props.checked = item.props.checkedValue === val;
                         });
-                    }
-                    ;
+                    };
                 }
-            };
-        });
-        const singleCheckListValues = singleCheckList.map(item => ({ id: item.props.id, name: item.props.name, fieldName: item.props.fieldName, item, getValue: () => { return item.getValue(); }, setValue: (val) => { item.setValue(val); } }));
+            }
+        })
+        const singleCheckListValues = singleCheckList.map<DataLeafEleModel>(item => ({ id: item.props.id, name: item.props.name, fieldName: item.props.fieldName, item, getValue: () => { return item.getValue() }, setValue: (val) => { item.setValue(val) } }));
         return [...singleCheckListValues, ...groupCheckListValues];
     }
+
     /**
      * 获取留痕块元素列表
      */
-    getTrackElements() {
-        return this.ctx.treeFilter(item => item instanceof TrackRunElement);
+    getTrackElements(): Array<TrackRunElement> {
+        return this.ctx.treeFilter(item => item instanceof TrackRunElement) as Array<TrackRunElement>;
     }
-    getTrackElmeentById(id) {
-        return this.ctx.treeFind(item => item instanceof TrackRunElement && item.props.id === id);
+
+    getTrackElmeentById(id: string): TrackRunElement | null {
+        return this.ctx.treeFind(item => item instanceof TrackRunElement && item.props.id === id) as TrackRunElement | null;
     }
+
     /**
      * 获取留痕块内数据
      */
-    getTracksData() {
+    getTracksData(): Array<TrackBlockData> {
         const trackElements = this.getTrackElements();
         return trackElements.map(item => {
-            const trackRun = item;
+            const trackRun = item as TrackRunElement;
             const content = ElementSerialize.serializeString(trackRun, { all: true });
             return {
                 //用户id
@@ -277,45 +320,50 @@ export class DocumentContext {
                 //日期
                 date: trackRun.props.date,
                 //类型，ins-run：插入，del-run：删除
-                type: trackRun.type,
+                type: trackRun.type as TrackRunTypeEnum,
                 //留痕块id
                 id: trackRun.props.id,
                 //内容
                 content
-            };
+            }
         });
     }
-    setControlValue(id, value) {
+
+    setControlValue(id: string, value: string): void {
         const dataEle = this.getControlById(id);
         if (dataEle) {
             dataEle.setValue(value);
         }
         this.ss.clear();
     }
-    setControlValueByName(name, val) {
-        const dataEle = this.getControlByName(name);
-        dataEle.setValue(val);
+
+    setControlValueByName(name: string, val: any): void {
+        const dataEle = this.getControlByName(name)
+        dataEle.setValue(val)
     }
+
     /**
      * 获取复选框选中的值
      */
-    getCheckBoxValues(groupName) {
+    getCheckBoxValues(groupName: string): Array<string> {
         const ckbs = this.getCheckBoxList(groupName);
         return ckbs.filter(item => item.props.checked).map(item => item.props.checkedValue);
     }
-    getCheckBoxList(groupName) {
-        return this.getControlInstanceList().filter(item => item instanceof DataElementCheck && item.props.groupName === groupName);
+
+    getCheckBoxList(groupName: string): Array<DataElementCheck> {
+        return this.getControlInstanceList().filter(item => item instanceof DataElementCheck && item.props.groupName === groupName) as Array<DataElementCheck>;
     }
+
     /**
      * 当前上下文执行默认绑定
-     * @param data
+     * @param data 
      */
-    bindDataValues(data, predicateKey = 'fieldName') {
+    bindDataValues(data: string | Object | Array<{ key: string, value: any }>, predicateKey: 'id' | 'name' | 'fieldName' = 'fieldName'): void {
         this.ss.clear();
-        let bindData = typeof data === 'string' ? JSON.parse(data) : data;
+        let bindData = typeof data === 'string' ? JSON.parse(data) as Object : data;
         if (Array.isArray(bindData)) {
             const obj = {};
-            bindData.forEach(item => { obj[item.key] = item.value; });
+            bindData.forEach(item => { obj[item.key] = item.value });
             bindData = obj;
         }
         const dataList = this.getDataElementModelList();
@@ -327,4 +375,36 @@ export class DocumentContext {
         });
     }
 }
-//# sourceMappingURL=document-context.js.map
+
+
+interface DataEleBaseModel {
+    id: string;
+    name: string;
+    fieldName: string;
+    getValue: () => any;
+    setValue: (val: any) => void;
+}
+interface DataCheckEleModel extends DataEleBaseModel {
+    item: Array<DataElementCheck>;
+    multiSelect: boolean;
+}
+
+interface DataInputEleModel extends DataEleBaseModel {
+    item: DataElementInlineGroup
+}
+
+interface DataLeafEleModel extends DataEleBaseModel {
+    item: DataElementLeaf;
+}
+
+/**
+ * 留痕块结构化数据
+ */
+interface TrackBlockData {
+    userId: string;
+    userName: string;
+    date: string;
+    type: TrackRunTypeEnum,
+    content: string,
+    id: string;
+}

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

@@ -1,22 +1,24 @@
+import { EditorContext } from "./document-context";
+
 export class DocumentEvalFunc {
-    docCtx;
-    constructor(docCtx) {
-        this.docCtx = docCtx;
+    constructor(public docCtx: EditorContext) {
+
     }
-    scriptsFunc;
+    scriptsFunc!: (() => void) | null;
+
     /**
      * 实例化动态脚本
      */
-    initScripts(scripts) {
+    initScripts(scripts: string): void {
         this.destroyScripts();
         if (scripts) {
             try {
-                const func = new Function("docCtx", scripts);
+                const func = new Function("docCtx", scripts)
                 this.scriptsFunc = func(this.docCtx);
-            }
-            catch (e) {
+            } catch (e) {
                 console.error("自定义标本解析错误", e);
             }
+
         }
         // const func = (docCtx: DocumentContext) => {
         //     const sexELe = docCtx.getControlById('NqoYI')
@@ -30,19 +32,22 @@ export class DocumentEvalFunc {
         //     };
         // };
     }
+
     /**
      * 销毁动态脚本实例
      */
-    destroyScripts() {
+    destroyScripts(): void {
         if (this.scriptsFunc) {
             this.scriptsFunc = null;
         }
     }
+
     /**
      * 触发动态脚本
      */
-    invokedScripts() {
+    invokedScripts(): void {
         this.scriptsFunc?.();
     }
+
+
 }
-//# sourceMappingURL=document-eval-func.js.map