@hailin-zheng/editor-core 1.0.7 → 1.0.10

package/{lib/framework/element-define.js → src/med_editor/framework/element-define.ts}

@@ -1,138 +1,167 @@
-import { Subject } from "rxjs";
-import { EventMap } from "./element-event-define";
+import { Subject, Subscription } from "rxjs";
+import { ElementEvent, EventMap, EventTypes } from "./element-event-define";
 import { watchChanged } from "./notify";
-import { LeafRenderObject } from "./render-define";
+import { RenderContenxtType } from "./render-context";
+import { CursorType, LeafRenderObject, RenderObject } from "./render-define";
+
 export class Rect {
     x = 0;
     y = 0;
     width = 0;
     height = 0;
-    maxHeight = 0;
-    maxWidth = 0;
+    maxHeight: number = 0;
+    maxWidth: number = 0;
 }
+
+export interface SerializeProps {
+    type: string,
+    props?: any,
+    children?: Array<SerializeProps>;
+    complete?: boolean;
+}
+
+/**
+ * 刷新类型
+ * 刷新外观，不需要进行测量，直接进入绘制
+ * 刷新内容，需要重新测量，再绘制
+ */
+export type RefreshType = 'appearance' | 'content';
+
 /**
  * 修改标志
  */
-export var ModifyFlag;
-(function (ModifyFlag) {
+export enum ModifyFlag {
     //被修改
-    ModifyFlag[ModifyFlag["Modify"] = 0] = "Modify";
+    Modify = 0,
     //无修改
-    ModifyFlag[ModifyFlag["None"] = 1] = "None";
+    None = 1,
     //子项被修改
-    ModifyFlag[ModifyFlag["Track"] = 2] = "Track";
-})(ModifyFlag || (ModifyFlag = {}));
+    Track = 2
+}
+
+export interface OnChangeEventProps {
+    data: any
+}
 /**
  * 定义组件的数据，配置
  */
-export class Element {
-    type;
-    modifyFlag = ModifyFlag.Modify;
-    isMouseenter;
-    _eventMap;
-    _refreshEvent = new Subject();
-    _onChangeEvent = new Subject();
-    observers = new WeakMap();
-    paintRenders = [];
-    measureRender;
-    focusable;
-    isFocused;
+export abstract class Element<P extends object = any> {
+    modifyFlag: ModifyFlag = ModifyFlag.Modify;
+    isMouseenter!: boolean;
+    private _eventMap: EventMap | null;
+    private _refreshEvent: Subject<void> = new Subject();
+    protected _onChangeEvent: Subject<void> = new Subject();
+    private observers: WeakMap<Element, Array<Subscription>> = new WeakMap();
+    paintRenders: Array<RenderObject> = [];
+    measureRender!: RenderObject | null;
+    focusable!: boolean;
+    isFocused!: boolean;
     /**
      * 修饰元素不能复制、序列化、删除(需要手动删除)
      */
-    isDecorate;
+    isDecorate!: boolean;
     /**
      * 可点击性，例如：null-text 占位符元素不具备可点击能力
      * 2.编辑页眉页脚的能力
      */
-    disableClick;
-    _parent;
-    get parent() {
-        return this._parent;
+    disableClick!: boolean;
+    private _parent!: BranchElement | null;
+    get parent(): BranchElement {
+        return this._parent as BranchElement;
     }
-    set parent(val) {
+    set parent(val: BranchElement) {
         this._parent = val;
     }
-    _props;
-    get props() {
+    private _props!: P;
+    public get props(): P {
         return this._props;
     }
-    set props(value) {
+    public set props(value: P) {
         this.pubOnChange('self');
-        this._props = watchChanged(value, () => { this.notifyChanged(); });
+        this._props = watchChanged(value, () => { this.notifyChanged() })
         //this._props = value;
     }
-    notifyChanged() {
-        this.pubOnChange('self');
+
+    private notifyChanged(): void {
+        this.pubOnChange('self')
     }
+
     //元素是否禁止复制，例如批注元素
     //forbidCopy: boolean;
-    constructor(type) {
-        this.type = type;
+    constructor(public type: string) {
         this._eventMap = new EventMap();
-        this.addEvent('ElementMouseEnter', (evt) => { this.isMouseenter = true; });
-        this.addEvent('ElementMouseLeave', (evt) => { this.isMouseenter = false; });
-    }
-    destroy() {
+        this.addEvent('ElementMouseEnter', (evt) => { this.isMouseenter = true });
+        this.addEvent('ElementMouseLeave', (evt) => { this.isMouseenter = false });
+    }
+    abstract createRenderObject(options: ViewOptions, renderCtx: RenderContenxtType): RenderObject | null;
+    abstract serialize(viewOptions: ViewOptions): SerializeProps | null;
+    abstract clone(data: boolean): Element;
+    abstract getChildLength(): number;
+    abstract getSelfLength(): number;
+    destroy(): void {
         this._eventMap?.clear(this);
         this.paintRenders.length = 0;
         this._parent = null;
         this.measureRender = null;
         this.unsubscribe(this);
     }
-    addEvent(event, handle, useCapture = false) {
+    addEvent<T extends ElementEvent>(event: EventTypes, handle: (evt: T) => void, useCapture = false): string {
         if (!this._eventMap) {
-            throw new Error('eventMap is null');
+            throw new Error('eventMap is null')
         }
         return this._eventMap?.add(this, event, handle, useCapture);
     }
-    removeEvent(eventId) {
+    removeEvent(eventId: string): void {
         if (!this._eventMap) {
-            throw new Error('eventMap is null');
+            throw new Error('eventMap is null')
         }
         this._eventMap.remove(this, eventId);
     }
-    removeEventByType(eventType) {
+    removeEventByType(eventType: EventTypes): void {
         if (!this._eventMap) {
-            throw new Error('eventMap is null');
+            throw new Error('eventMap is null')
         }
         this._eventMap.removeByType(this, eventType);
     }
-    invokeEvent(event, evt, userCapture = false) {
+    invokeEvent(event: EventTypes, evt: ElementEvent, userCapture = false): void {
         if (!this._eventMap) {
-            throw new Error('eventMap is null');
+            throw new Error('eventMap is null')
         }
         const listeners = this._eventMap.get(this, event, userCapture);
         listeners.forEach(item => item(evt));
     }
-    beginMeasure() {
+    beginMeasure(): void {
         this.paintRenders.length = 0;
     }
-    getIndex() {
+    getIndex(): number {
         if (this.parent) {
             return this.parent.getChildIndex(this);
-        }
-        else {
+        } else {
             return 0;
         }
     }
-    get refreshSubject() {
+    get refreshSubject(): Subject<void> {
         return this._refreshEvent;
     }
-    get onChangeSubject() {
+    get onChangeSubject(): Subject<void> {
         return this._onChangeEvent;
     }
-    refreshView() {
+
+    refreshView(): void {
         this._refreshEvent.next();
     }
-    unsubscribe(element) {
+
+    abstract pubOnChange(selfChange: pubChangeType): void
+
+    unsubscribe(element: Element): void {
         const subs = this.observers.get(element);
         if (subs) {
-            subs.forEach(sub => { sub.unsubscribe(); });
+            subs.forEach(sub => { sub.unsubscribe() });
             this.observers.delete(element);
         }
     }
-    addsubscribe(element, ...sub) {
+
+    addsubscribe(element: Element, ...sub: Array<Subscription>): void {
         let subs = this.observers.get(element);
         if (!subs) {
             subs = [];
@@ -140,31 +169,36 @@ export class Element {
         }
         subs.push(...sub);
     }
+
     /**
      * 移除当前节点
      */
-    remove() {
+    remove(): void {
         if (this.parent) {
             this.parent.removeChild(this);
         }
     }
 }
+
+
+
 /**
  * 最小节点元素
  */
-export class LeafElement extends Element {
-    cursorType = 'text';
+export abstract class LeafElement<P extends object = any> extends Element<P> {
+    cursorType: CursorType = 'text';
     //abstract createRenderObject(options: ViewOptions, renderCtx: RenderContenxt): LeafRenderObject;
-    getChildLength() {
+    getChildLength(): number {
         return 1;
     }
-    destroy() {
+    destroy(): void {
         super.destroy();
     }
-    getSelfLength() {
+    getSelfLength(): number {
         return 1;
     }
-    pubOnChange(selfChange) {
+
+    pubOnChange(selfChange: pubChangeType): void {
         if (this.modifyFlag === ModifyFlag.None) {
             this.refreshView();
         }
@@ -178,22 +212,23 @@ export class LeafElement extends Element {
             if (this.modifyFlag === ModifyFlag.None) {
                 this.modifyFlag = ModifyFlag.Track;
             }
-        }
-        else {
+        } else {
             this.modifyFlag = ModifyFlag.Modify;
         }
         this._onChangeEvent.next();
     }
 }
+
+
 /**
  * 枝干节点，包含若干个枝干或者叶子节点
  */
-export class BranchElement extends Element {
-    chilren = [];
-    constructor(type) {
+export abstract class BranchElement<P extends object = any> extends Element<P> {
+    private chilren: Array<Element> = [];
+    constructor(type: string) {
         super(type);
     }
-    addChild(child, index = -1) {
+    addChild(child: Element, index = -1): void {
         if (index === -1) {
             index = this.length;
         }
@@ -208,7 +243,8 @@ export class BranchElement extends Element {
         this.addsubscribe(child, refSub, onChangeSub);
         this.pubOnChange('self');
     }
-    removeChild(child) {
+
+    removeChild(child: Element): void {
         const index = this.chilren.indexOf(child);
         if (index < 0) {
             throw new Error('为查找到当前元素');
@@ -216,30 +252,33 @@ export class BranchElement extends Element {
         this.disposeChild(child);
         this.chilren.splice(index, 1);
     }
-    removeChildByIndex(index) {
+
+    removeChildByIndex(index: number): void {
         const child = this.chilren[index];
         if (child) {
             this.chilren.splice(index, 1);
             this.disposeChild(child);
-        }
-        else {
+        } else {
             throw new Error('为查找到当前元素');
         }
     }
-    disposeChild(child) {
+
+    disposeChild(child: Element): void {
         this.unsubscribe(child);
         if (child.parent === this) {
-            child.parent = null;
+            (<any>child).parent = null;
         }
         this.pubOnChange('self');
     }
-    clearItems() {
+
+    clearItems(): void {
         const items = [...this.chilren];
         for (let i = items.length - 1; i >= 0; i--) {
             this.removeChildByIndex(i);
         }
     }
-    destroy() {
+
+    destroy(): void {
         super.destroy();
         const items = [...this.chilren];
         for (let i = items.length - 1; i >= 0; i--) {
@@ -248,39 +287,45 @@ export class BranchElement extends Element {
             this.removeChild(child);
         }
     }
+
     get length() {
         return this.chilren.length;
     }
-    find(predicate) {
+
+    find(predicate: (item: Element, index: number) => boolean): Element | undefined {
         return this.chilren.find(predicate);
     }
-    getChild(index) {
-        return this.chilren[index];
+
+    getChild<T extends Element = Element>(index: number): T {
+        return this.chilren[index] as T;
     }
-    getChildIndex(child) {
+
+    getChildIndex(child: Element): number {
         return this.chilren.indexOf(child);
     }
-    getChildLength() {
+
+    getChildLength(): number {
         //return this.chilren.reduce((prev, curr) => prev + 1 + curr.getChildLength(), 0);
         return this.chilren.reduce((prev, curr) => {
             if (curr instanceof BranchElement) {
                 return prev + 1 + curr.getChildLength();
-            }
-            else if (curr instanceof LeafElement) {
+            } else if (curr instanceof LeafElement) {
                 return prev + curr.getChildLength();
+            } else {
+                return 0
             }
-            else {
-                return 0;
-            }
-        }, 0);
+        }, 0)
     }
-    getSelfLength() {
+
+    getSelfLength(): number {
         return 1 + this.chilren.reduce((prev, curr) => {
             return prev + curr.getSelfLength();
         }, 0);
     }
-    treeFilter(predicate) {
-        const items = [];
+
+
+    treeFilter(predicate: (item: Element, index: number) => boolean): Array<Element> {
+        const items: Array<Element> = [];
         for (let i = 0; i < this.length; i++) {
             const item = this.getChild(i);
             if (predicate(item, i)) {
@@ -292,7 +337,8 @@ export class BranchElement extends Element {
         }
         return items;
     }
-    treeFind(predicate) {
+
+    treeFind(predicate: (item: Element, index: number) => boolean): Element | null {
         for (let i = 0; i < this.length; i++) {
             const item = this.getChild(i);
             if (predicate(item, i)) {
@@ -307,7 +353,8 @@ export class BranchElement extends Element {
         }
         return null;
     }
-    pubOnChange(selfChange) {
+
+    pubOnChange(selfChange: pubChangeType): void {
         if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
             return;
         }
@@ -318,117 +365,146 @@ export class BranchElement extends Element {
             if (this.modifyFlag === ModifyFlag.None) {
                 this.modifyFlag = ModifyFlag.Track;
             }
-        }
-        else {
+        } else {
             this.modifyFlag = ModifyFlag.Modify;
             for (let i = 0; i < this.length; i++) {
-                this.getChild(i).pubOnChange('to-child');
+                this.getChild(i).pubOnChange('to-child')
             }
         }
         this._onChangeEvent.next();
     }
 }
+
+export type pubChangeType = 'self' | 'tracker' | 'to-child';
 /**
  * 行内编组元素
  */
-export class InlineGroupElement extends BranchElement {
-}
+export abstract class InlineGroupElement<P extends object = any> extends BranchElement<P> { }
+
 /**
  * 块级元素，目前只有P元素
  */
-export class BlockContentElement extends BranchElement {
-}
+export abstract class BlockContentElement<P extends object = any> extends BranchElement<P> { }
+
 /**
  * 包含块级渲染元素的容器元素,例如body、table-cell、table等
  */
-export class BlockContainerElement extends BranchElement {
-    noFillEmpty;
+export abstract class BlockContainerElement<P extends object = any> extends BranchElement<P> {
+    noFillEmpty!: boolean;
 }
-export class ElementFactory {
-    options;
+
+export interface readElementProps<T> {
+    type: string;
+    props: T | undefined;
+    children: any | undefined
 }
+
+export abstract class ElementFactory<T = null> {
+    options!: ViewOptions;
+    abstract match(type: string): boolean;
+    abstract createElement(data: readElementProps<T>, renderCtx: RenderContenxtType): Element;
+}
+
+export interface SelectionContentRange {
+    target: Element
+    isFullSelected: boolean,
+    startOffset: number,
+    endOffset: number,
+    selectedChildren: Array<SelectionContentRange>,
+}
+
 /**
  * 编辑模式
  */
-export var EditMode;
-(function (EditMode) {
+export enum EditMode {
     /**
      * 自由模式，设计模板时使用
      */
-    EditMode[EditMode["Free"] = 0] = "Free";
+    Free = 0,
     /**
      * 严格模式，医生书写模式时使用,只可更改数据元值
      */
-    EditMode[EditMode["Strict"] = 1] = "Strict";
+    Strict = 1,
     /**
      * 查看模式,任何修改文档的操作都不允许，但是可选中，有拖蓝
      */
-    EditMode[EditMode["View"] = 2] = "View";
+    View = 2,
     /**
      * 禁用模式，当前区域不可点击，不可选中，页脚、页眉编辑时的控制
      */
-    EditMode[EditMode["Disabled"] = 3] = "Disabled";
-})(EditMode || (EditMode = {}));
+    Disabled = 3
+}
+
 /**
  * 文档模式
  */
-export var DocMode;
-(function (DocMode) {
-    DocMode[DocMode["Design"] = 0] = "Design";
+export enum DocMode {
+    Design = 0,
     /**
      * 完全编辑模式
      */
-    DocMode[DocMode["Edit"] = 1] = "Edit";
+    Edit = 1,
     /**
      * 表单编辑模式
      */
-    DocMode[DocMode["FormEdit"] = 2] = "FormEdit";
+    FormEdit = 2,
     /**
      * 视图模式，只能查看
      */
-    DocMode[DocMode["View"] = 3] = "View";
-})(DocMode || (DocMode = {}));
-export var BooleanEnum;
-(function (BooleanEnum) {
-    BooleanEnum[BooleanEnum["Null"] = 0] = "Null";
-    BooleanEnum[BooleanEnum["True"] = 1] = "True";
-    BooleanEnum[BooleanEnum["False"] = 2] = "False";
-})(BooleanEnum || (BooleanEnum = {}));
+    View = 3
+}
+
+export enum BooleanEnum {
+    Null,
+    True,
+    False
+}
+
+export interface DocUser {
+    id: string,
+    name: string
+}
+
 export class PageOptions {
-    _width = 0;
-    _height = 0;
-    orient = 'portrait';
-    constructor(width, height, orient = 'portrait') {
+    private _width: number = 0;
+    private _height: number = 0;
+    orient: OrientType = 'portrait';
+    constructor(width: number, height: number, orient: OrientType = 'portrait') {
         this._width = width;
         this._height = height;
         this.orient = orient;
     }
-    get width() {
+    get width(): number {
         if (this.orient === 'landscape') {
             return this._height;
-        }
-        else {
+        } else {
             return this._width;
         }
     }
-    set width(value) {
+
+    set width(value: number) {
         this._width = value;
     }
-    get height() {
+
+    get height(): number {
         if (this.orient === 'landscape') {
             return this._width;
-        }
-        else {
+        } else {
             return this._height;
         }
+
     }
-    set height(value) {
+
+    set height(value: number) {
         this._height = value;
     }
 }
+
+export type OrientType = 'landscape' | 'portrait';
+
 export class ViewOptions {
-    copyRightInfo;
-    watermark;
+    copyRightInfo!: string;
+    watermark?: string;
     drawLineRectColor = "rgb(0,0,0)";
     drawCharRectColor = "rgb(0,0,0)";
     drawSymbolsColor = 'rgb(128,128,128)';
@@ -441,50 +517,54 @@ export class ViewOptions {
     dataEleOutlineColor = 'rgb(131,175,155,0.7)';
     viewBackcolor = 'rgb(230,230,230)';
     paraSymbolColor = 'rgb(128,128,128)';
-    dataGroupColor = 'rgb(0,80,179)';
-    showLineRect;
-    showCharRect;
-    showParaMark;
-    showTabChar;
-    showSpaceChar;
-    showLineBreak;
+    dataGroupColor = 'rgb(0,80,179)'
+    showLineRect!: boolean;
+    showCharRect!: boolean;
+    showParaMark!: boolean;
+    showTabChar!: boolean;
+    showSpaceChar!: boolean;
+    showLineBreak!: boolean;
     bodyMarginTop = 8;
-    devMode = false;
-    showDebug;
-    resourceMode = 'immediate';
-    serverMode = false;
-    secretBrowse = false;
+    devMode: boolean = false;
+    showDebug!: boolean;
+    resourceMode: 'lazy' | 'immediate' = 'immediate';
+    serverMode: boolean = false;
+    secretBrowse: boolean = false;
     //中文版式，处理中文换行；前置标点和后置标点
-    chineseLayout = true;
+    chineseLayout: boolean = true;
     //整页模式，不分页
-    _fullPageView = false;
-    get fullPageView() {
+    private _fullPageView: boolean = false;
+    get fullPageView(): boolean {
         return this._fullPageView;
     }
-    set fullPageView(value) {
+    set fullPageView(value: boolean) {
         this._fullPageView = value;
         this.onChange.next('force');
     }
     //毫米和像素的转换比
-    mmToPixelsRatio = 0;
-    cursor = 'text';
+    mmToPixelsRatio: number = 0;
+    cursor: CursorType = 'text';
     //当前文档偏移量，取决于滚动条位置
     translateY = 0;
     //文档大小
-    docPageSettings = new PageOptions(0, 0);
+    docPageSettings: PageOptions = new PageOptions(0, 0);
     //视图大小,canvas
-    viewSettings;
-    pageNumFormat = '第{index}页/共{count}页';
+    viewSettings!: {
+        width: number;
+        height: number;
+    };
+    pageNumFormat: string = '第{index}页/共{count}页';
     //获取canvas节点的高度
-    get viewPaintHeight() {
+    get viewPaintHeight(): number {
         //return this.viewSettings.height / this.scale;
         return this.viewSettings.height;
     }
+
     /**
      * 内容区域的高度
      * 同时限定canvas的最小宽度
      */
-    get ContentWidth() {
+    get ContentWidth(): number {
         let width = this.docPageSettings.width;
         if (this.showReviewWindow) {
             width = width + this.reviewWindowWidth;
@@ -492,29 +572,29 @@ export class ViewOptions {
         return width;
     }
     //两个页的间距
-    docSpace = 0;
+    docSpace: number = 0;
     //是否显示审阅窗口
-    _showReviewWindow = false;
-    get showReviewWindow() {
+    private _showReviewWindow: boolean = false;
+    public get showReviewWindow(): boolean {
         return this._showReviewWindow;
     }
-    set showReviewWindow(value) {
+    public set showReviewWindow(value: boolean) {
         this._showReviewWindow = value;
         this.onChange.next();
     }
     //审阅窗口宽度
-    reviewWindowWidth = 200;
+    reviewWindowWidth: number = 200;
     //缩放
-    _scale = 1;
-    get scale() {
+    private _scale: number = 1;
+    get scale(): number {
         return this._scale;
     }
-    set scale(val) {
+    set scale(val: number) {
         this._scale = val;
     }
-    docMode = DocMode.Design;
+    docMode: DocMode = DocMode.Design;
     //是否开启重做功能
-    enableUndo = true;
+    enableUndo: boolean = true;
     // //是否开启留痕模式
     // private _enableTrackChanges: boolean = false;
     // public get enableTrackChanges(): boolean {
@@ -525,55 +605,70 @@ export class ViewOptions {
     //     this.onChange.next('force');
     // }
     //是否显示审阅痕迹
-    _showTrackChanges = true;
-    get showTrackChanges() {
+    private _showTrackChanges: boolean = true;
+    public get showTrackChanges(): boolean {
         return this._showTrackChanges;
     }
-    set showTrackChanges(value) {
+    public set showTrackChanges(value: boolean) {
         this._showTrackChanges = value;
         this.onChange.next('force');
     }
     //医嘱打印模式，文字行模式,将表格多行对象转换为多个表格行对象
-    textRowLineMode = false;
-    editUser = { id: '', name: '' };
+    textRowLineMode: boolean = false;
+    editUser: DocUser = { id: '', name: '' };
     //留痕区域的生效时间段，同一用户的留痕块在此时间外需要生成新的留痕块
-    trackChangePeriod = 10;
-    onChange = new Subject();
+    trackChangePeriod: number = 10;
+    onChange: Subject<'demand' | 'force'> = new Subject();
     constructor() { }
 }
+
+
 export class MarginProps {
-    top;
-    bottom;
-    left;
-    right;
-    constructor(top = 0, bottom = 0, left = 0, right = 0) {
-        this.top = top;
-        this.bottom = bottom;
-        this.left = left;
-        this.right = right;
-    }
-    clone() {
+
+    constructor(public top: number = 0, public bottom: number = 0, public left: number = 0, public right: number = 0) { }
+    clone(): MarginProps {
         const cloneMargin = new MarginProps(this.top, this.bottom, this.left, this.right);
         return cloneMargin;
     }
 }
-export class PaddingProps extends MarginProps {
-}
+
+export class PaddingProps extends MarginProps { }
+
 export class BorderProps {
-    width;
-    color;
-    style;
-    constructor(width = 0, color = 'transparent', style = 'solid') {
-        this.width = width;
-        this.color = color;
-        this.style = style;
-    }
-    clone() {
+    constructor(public width: number = 0, public color: string = 'transparent', public style: string = 'solid') { }
+    clone(): BorderProps {
         return new BorderProps(this.width, this.color, this.style);
     }
 }
-export class IDispose {
+
+export abstract class IDispose {
+    abstract destroy(): void;
 }
-export class ResizeLeafRenderObject extends LeafRenderObject {
+
+
+export type TextAlign = 'center' | 'left' | 'right' | 'justify';
+
+export interface Position {
+    x: number;
+    y: number;
 }
-//# sourceMappingURL=element-define.js.map
+
+
+export abstract class ResizeLeafRenderObject extends LeafRenderObject { }
+
+
+export type NullableType<T> = {
+    [PropName in keyof T]?: T[PropName]
+};
+
+
+export type RequiredType<T> = {
+    [PropName in keyof T]: T[PropName]
+};
+
+export type ImgLoadStatus = 'no' | 'loading' | 'completed' | 'error';
+
+export interface ICancelTokenFn {
+    cancel?: () => void;
+    onFinish?: () => void;
+}