@hailin-zheng/editor-core 1.0.7 → 1.0.10

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

@@ -1,27 +1,46 @@
+import { EditorContext } from "./document-context";
+import { Position, ViewOptions } from "./element-define";
+import { TextProps } from "./element-props";
 import { ElementUtil } from "./element-util";
+import { DocumentRenderObject } from "./impl/document/doc-impl";
 import { ParagraphElement } from "./impl/paragraph/p-impl";
+import { TextGroupElement, TextGroupRenderObject } from "./impl/text/text-impl";
+
+export interface TextUnits {
+    sourceSize: number,
+    actualSize: number,
+    char: string
+}
+
+export type RenderContenxtType = {
+    contentContext: PaintContent;
+    overlaysContext: PaintContent;
+    drawMode: 'view' | 'print';
+    clear(): void;
+    viewOptions: ViewOptions;
+    docCtx: EditorContext;
+    commit(pageSetting: { width: number, height: number } | null): void
+};
+
 export class RenderContenxt {
-    mainCtx;
-    viewOptions;
-    docCtx;
-    contentContext;
-    overlaysContext;
-    drawMode = 'view';
-    contentOffCanvas;
-    overlayOffCanvas;
-    constructor(mainCtx, viewOptions, docCtx) {
-        this.mainCtx = mainCtx;
-        this.viewOptions = viewOptions;
-        this.docCtx = docCtx;
+    contentContext!: PaintContent;
+    overlaysContext!: PaintContent;
+    drawMode: 'view' | 'print' = 'view';
+    private contentOffCanvas!: HTMLCanvasElement;
+    private overlayOffCanvas!: HTMLCanvasElement;
+
+    constructor(public mainCtx: CanvasRenderingContext2D, public viewOptions: ViewOptions, public docCtx: EditorContext) {
         this.createNativeCanvas();
     }
-    createNativeCanvas() {
+
+    private createNativeCanvas() {
         this.contentOffCanvas = document.createElement('canvas');
         this.overlayOffCanvas = document.createElement('canvas');
-        this.contentContext = new PaintContent(this.contentOffCanvas.getContext('2d'), this.viewOptions);
-        this.overlaysContext = new PaintContent(this.overlayOffCanvas.getContext('2d'), this.viewOptions);
+        this.contentContext = new PaintContent(this.contentOffCanvas.getContext('2d') as CanvasRenderingContext2D, this.viewOptions);
+        this.overlaysContext = new PaintContent(this.overlayOffCanvas.getContext('2d') as CanvasRenderingContext2D, this.viewOptions);
         this.setCanvasProps();
     }
+
     // private createOffscreenCanvas() {
     //     this.contentOffCanvas = new OffscreenCanvas(250, 250);
     //     this.overlayOffCanvas = new OffscreenCanvas(250, 250);
@@ -29,9 +48,10 @@ export class RenderContenxt {
     //     this.overlaysContext = new PaintContent(this.overlayOffCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D, this.viewOptions);
     //     this.setCanvasProps();
     // }
-    setCanvasProps(pageSetting = null) {
+
+    setCanvasProps(pageSetting: { width: number, height: number } | null = null): void {
         if (!pageSetting) {
-            pageSetting = { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight };
+            pageSetting = { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight }
             if (this.viewOptions.showReviewWindow) {
                 pageSetting.width += this.viewOptions.reviewWindowWidth;
             }
@@ -40,19 +60,21 @@ export class RenderContenxt {
             width: this.viewOptions.viewSettings.width,
             height: this.viewOptions.viewPaintHeight
         };
-        ElementUtil.setCanvasProps(this.contentOffCanvas, this.contentContext.ctx, pageSetting, this.viewOptions.scale);
-        ElementUtil.setCanvasProps(this.overlayOffCanvas, this.overlaysContext.ctx, pageSetting, this.viewOptions.scale);
-        ElementUtil.setCanvasProps(this.mainCtx.canvas, this.mainCtx, pageSetting, this.viewOptions.scale);
+        ElementUtil.setCanvasProps(this.contentOffCanvas, this.contentContext.ctx, pageSetting, this.viewOptions.scale)
+        ElementUtil.setCanvasProps(this.overlayOffCanvas, this.overlaysContext.ctx, pageSetting, this.viewOptions.scale)
+        ElementUtil.setCanvasProps(this.mainCtx.canvas, this.mainCtx, pageSetting, this.viewOptions.scale)
     }
-    clear() {
+
+    clear(): void {
         this.contentContext.clear();
         this.overlaysContext.clear();
         this.mainCtx.clearRect(0, 0, this.mainCtx.canvas.width, this.mainCtx.canvas.height);
     }
-    commit(pageSetting = null) {
+
+    commit(pageSetting: { width: number, height: number } | null = null): void {
         //pageSetting = pageSetting || { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight };
         if (!pageSetting) {
-            pageSetting = { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight };
+            pageSetting = { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight }
             if (this.viewOptions.showReviewWindow) {
                 pageSetting.width += this.viewOptions.reviewWindowWidth;
             }
@@ -62,34 +84,38 @@ export class RenderContenxt {
         if (!this.overlayOffCanvas.width || !this.overlayOffCanvas.height) {
             return;
         }
+
         this.mainCtx.drawImage(this.overlayOffCanvas, 0, 0, ElementUtil.getDprNumber(width, this.viewOptions.scale), ElementUtil.getDprNumber(height));
         //console.time('drawImage');
         this.mainCtx.drawImage(this.contentOffCanvas, 0, 0, ElementUtil.getDprNumber(width, this.viewOptions.scale), ElementUtil.getDprNumber(height));
         //console.timeEnd('drawImage');
     }
+
 }
+
 export class PaintContent {
-    ctx;
-    viewOptions;
-    constructor(ctx, viewOptions) {
-        this.ctx = ctx;
-        this.viewOptions = viewOptions;
+    constructor(public ctx: CanvasRenderingContext2D, private viewOptions: ViewOptions) {
         this.init();
     }
-    init() {
+
+    init(): void {
         this.ctx.textBaseline = 'alphabetic';
     }
-    setGlobalAlpha(alpha) {
+
+    setGlobalAlpha(alpha: number): void {
         this.ctx.globalAlpha = alpha;
     }
-    getGlobalAlpha() {
+
+    getGlobalAlpha(): number {
         return this.ctx.globalAlpha;
     }
-    clear() {
+
+    clear(): void {
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
         this.init();
     }
-    drawText(text, textProps, x, y, width, height) {
+
+    drawText(text: string, textProps: TextProps, x: number, y: number, width: number, height: number): void {
         if (textProps.background) {
             this.fillRect(x, y, width, height, textProps.background);
         }
@@ -109,7 +135,8 @@ export class PaintContent {
             this.drawLine(x, y, width, textProps.color, 1);
         }
     }
-    fillCircular(x, y, r, color = 'black') {
+
+    fillCircular(x: number, y: number, r: number, color: string = 'black'): void {
         this.ctx.save();
         this.ctx.beginPath();
         this.ctx.fillStyle = color;
@@ -117,8 +144,9 @@ export class PaintContent {
         this.ctx.fill();
         this.ctx.restore();
     }
-    drawTextUnits(textGroupRender, x, y) {
-        const textEle = textGroupRender.element;
+
+    drawTextUnits(textGroupRender: TextGroupRenderObject, x: number, y: number): void {
+        const textEle = textGroupRender.element as TextGroupElement;
         const textProps = textEle.props;
         const { width, height } = textGroupRender.rect;
         this.ctx.save();
@@ -151,20 +179,24 @@ export class PaintContent {
         }
         this.ctx.restore();
     }
-    getParaLineHeight(textEle) {
+
+    getParaLineHeight(textEle: TextGroupElement): number {
         const para = ElementUtil.getParentByType(textEle, ParagraphElement);
         if (!para) {
-            throw new Error('未能找到父级段落元素');
+            throw new Error('未能找到父级段落元素')
         }
         return para.props.lineHeight;
     }
-    measureText(text, textProps) {
+
+    measureText(text: string, textProps: TextProps): { width: number, height: number } {
         this.ctx.fillStyle = textProps.color;
         this.ctx.font = textProps.getFont();
         const textMeasure = this.ctx.measureText(text);
         return { width: textMeasure.width, height: textProps.fontSize };
     }
-    measureTextUnits(units, textProps) {
+
+
+    measureTextUnits(units: Array<TextUnits>, textProps: TextProps): void {
         this.ctx.font = textProps.getFont();
         const letterSpace = textProps.letterSpace ?? 0;
         for (let i = 0; i < units.length; i++) {
@@ -174,16 +206,21 @@ export class PaintContent {
             char.sourceSize = textMeasure.width;
         }
     }
-    clearRect(x, y, width, height) {
+
+    clearRect(x: number, y: number, width: number, height: number): void {
         this.ctx.clearRect(x, y, width, height);
     }
-    save() {
+
+    save(): void {
         this.ctx.save();
     }
-    restore() {
+
+    restore(): void {
         this.ctx.restore();
     }
-    strokeRect(x, y, width, height, strokeColor = 'black', strokeWidth = 1) {
+
+
+    strokeRect(x: number, y: number, width: number, height: number, strokeColor = 'black', strokeWidth = 1): void {
         x = Math.ceil(x);
         y = Math.ceil(y);
         x += 0.5;
@@ -195,8 +232,10 @@ export class PaintContent {
         this.ctx.restore();
         //this.strokeLines([{ x, y }, { x: x + width, y }, { x: x + width, y: y + height }, { x, y: y + height }, { x, y }], strokeWidth, strokeColor);
     }
+
     //strokeRectImageData(x:number)
-    drawLine(x, y, width, lineColor = 'black', lineWidth = 1) {
+
+    drawLine(x: number, y: number, width: number, lineColor = 'black', lineWidth = 1): void {
         x = Math.ceil(x);
         y = Math.ceil(y);
         x += 0.5;
@@ -211,7 +250,8 @@ export class PaintContent {
         this.ctx.closePath();
         this.ctx.restore();
     }
-    fillRect(x, y, width, height, fillColor = 'white', shadowBlur = 0, shadowColor = 'black') {
+
+    fillRect(x: number, y: number, width: number, height: number, fillColor = 'white', shadowBlur = 0, shadowColor = 'black'): void {
         x = Math.ceil(x);
         y = Math.ceil(y);
         x += 0.5;
@@ -230,7 +270,8 @@ export class PaintContent {
         this.ctx.closePath();
         this.ctx.restore();
     }
-    strokeLines(lines, width = 1, strokeColor = 'black') {
+
+    strokeLines(lines: Array<Position>, width = 1, strokeColor = 'black'): void {
         this.ctx.save();
         this.ctx.strokeStyle = strokeColor;
         this.ctx.lineWidth = width;
@@ -244,8 +285,7 @@ export class PaintContent {
             y += 0.5;
             if (i === 0) {
                 this.ctx.moveTo(x, y);
-            }
-            else {
+            } else {
                 this.ctx.lineTo(x, y);
             }
         }
@@ -253,7 +293,8 @@ export class PaintContent {
         this.ctx.closePath();
         this.ctx.restore();
     }
-    fillLines(lines, width = 1, fillColor = 'black') {
+
+    fillLines(lines: Array<Position>, width = 1, fillColor = 'black'): void {
         this.ctx.save();
         this.ctx.beginPath();
         this.ctx.fillStyle = fillColor;
@@ -266,8 +307,7 @@ export class PaintContent {
             y += 0.5;
             if (i === 0) {
                 this.ctx.moveTo(x, y);
-            }
-            else {
+            } else {
                 this.ctx.lineTo(x, y);
             }
         }
@@ -275,17 +315,20 @@ export class PaintContent {
         this.ctx.closePath();
         this.ctx.restore();
     }
-    drawCheckBox(x, y, width, height, isChecked) {
+
+
+    drawCheckBox(x: number, y: number, width: number, height: number, isChecked: boolean): void {
         this.strokeRect(x, y, width, height, 'black', 1);
         if (isChecked) {
-            const lines = [];
+            const lines: Array<Position> = [];
             lines.push({ x: x + (Math.ceil(width / 4)), y: y + (Math.ceil(height / 2)) });
             lines.push({ x: x + (Math.ceil(width / 2)), y: y + (Math.floor(height * 3 / 4)) });
             lines.push({ x: x + (Math.ceil(width * 3 / 4)), y: y + (Math.ceil(height / 4)) });
             this.strokeLines(lines, 2, 'red');
         }
     }
-    drawRadioBox(x, y, width, height, isChecked) {
+
+    drawRadioBox(x: number, y: number, width: number, height: number, isChecked: boolean): void {
         x = x + Math.floor(width / 2);
         y = y + Math.floor(height / 2);
         width = Math.floor(width / 2);
@@ -304,6 +347,8 @@ export class PaintContent {
         }
         this.ctx.restore();
     }
+
+
     /**
      * 绘制图片
      * @param image
@@ -316,10 +361,11 @@ export class PaintContent {
      * @param dWidth image在目标canvas上绘制的宽度
      * @param dHeight image在目标canvas上绘制的高度
      */
-    drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
+    drawImage(image: HTMLImageElement, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void {
         this.ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
     }
-    drawDashLine(points, lineDash, lineColor = 'black', lineWidth = 1) {
+
+    drawDashLine(points: Array<Position>, lineDash: Array<number>, lineColor = 'black', lineWidth = 1): void {
         this.ctx.save();
         this.ctx.setLineDash(lineDash);
         this.ctx.strokeStyle = lineColor;
@@ -331,8 +377,7 @@ export class PaintContent {
             y += 0.5;
             if (i === 0) {
                 this.ctx.moveTo(x, y);
-            }
-            else {
+            } else {
                 this.ctx.lineTo(x, y);
             }
         }
@@ -340,7 +385,8 @@ export class PaintContent {
         this.ctx.closePath();
         this.ctx.restore();
     }
-    roundRect(x, y, width, height, radius, fill, stroke) {
+
+    roundRect(x: number, y: number, width: number, height: number, radius: number | { tl: number, tr: number, br: number, bl: number }, fill: boolean, stroke: boolean) {
         x += 0.5;
         y += 0.5;
         if (typeof stroke === 'undefined') {
@@ -348,8 +394,7 @@ export class PaintContent {
         }
         if (typeof radius === 'number') {
             radius = { tl: radius, tr: radius, br: radius, bl: radius };
-        }
-        else {
+        } else {
             var defaultRadius = { tl: 0, tr: 0, br: 0, bl: 0 };
             for (var side in defaultRadius) {
                 radius[side] = radius[side] || defaultRadius[side];
@@ -373,12 +418,14 @@ export class PaintContent {
         if (stroke) {
             this.ctx.stroke();
         }
+
     }
-    clip(x, y, width, height) {
+
+    clip(x: number, y: number, width: number, height: number): void {
         this.ctx.save();
         this.ctx.beginPath();
         this.ctx.rect(x, y, width, height);
         this.ctx.clip();
     }
+
 }
-//# sourceMappingURL=render-context.js.map

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

@@ -1,36 +1,37 @@
-import { Rect, MarginProps, PaddingProps } from './element-define';
+import { Rect, Element, MarginProps, PaddingProps, Position } from './element-define'
+import { RenderContenxtType } from './render-context';
 /**
  * 定义组件的UI形式的渲染
  */
-export class RenderObject {
-    element;
-    margin;
-    padding;
-    rect = new Rect();
-    parent;
+export abstract class RenderObject<T extends Element = Element> {
+    margin!: MarginProps;
+    padding!: PaddingProps;
+    rect: Rect = new Rect();
+    parent!: BranchRenderObject;
     /**
     * 可点击性，例如：null-text 占位符元素不具备可点击能力
     */
-    disableClick;
-    constructor(element) {
-        this.element = element;
+    disableClick!: boolean;
+    constructor(public element: T) {
         this.margin = new MarginProps();
         this.padding = new PaddingProps();
     }
-    pagePaintCompleted(ctx, position) { }
-    destroy() {
+    abstract clone(): RenderObject;
+    pagePaintCompleted(ctx: RenderContenxtType, position: Position): void { }
+    destroy(): void {
         //this.parent = null;
         //this.margin = null;
         //this.padding = null;
         //this.rect = null;
         //this.element = null;
     }
+
     /**
     * 获取内容区域框体
-    * @param render
-    * @returns
+    * @param render 
+    * @returns 
     */
-    getInnnerRect() {
+    getInnnerRect(): Rect {
         const { padding } = this;
         const rect = new Rect();
         rect.x = padding.left;
@@ -41,64 +42,73 @@ export class RenderObject {
         }
         return rect;
     }
-    getInnerMaxWidth() {
+
+    getInnerMaxWidth(): number {
         if (!this.rect.maxWidth) {
-            throw new Error('this.rect.maxWidth is null');
+            throw new Error('this.rect.maxWidth is null')
         }
         const { padding, margin } = this;
         return this.rect.maxWidth - padding.left - padding.right - margin.left - margin.bottom;
     }
+
     /**
     * 根据内框内容高度，更新外框框体高度
-    * @param render
-    * @param innerRect
+    * @param render 
+    * @param innerRect 
     */
-    updateRenderHeight(innerRect) {
-        const innnerHeight = typeof innerRect === 'number' ? innerRect : innerRect.height;
+    updateRenderHeight(innerRect: Rect | number): void {
+        const innnerHeight = typeof innerRect === 'number' ? innerRect : (<Rect>innerRect).height;
         const { padding, margin } = this;
         //外层容器高度等于内容高度+外边距+内边距
         this.rect.height = innnerHeight + padding.top + padding.bottom;
     }
-    getIndex() {
+
+    getIndex(): number {
         if (this.parent) {
             return this.parent.getChildIndex(this);
-        }
-        else {
+        } else {
             return 0;
         }
     }
 }
+
 /**
  * 叶子节点渲染元素
  */
-export class LeafRenderObject extends RenderObject {
-    constructor(element) {
-        super(element);
+export abstract class LeafRenderObject<T extends Element = Element> extends RenderObject<T> {
+    constructor(element: T | null) {
+        super(element as T);
     }
+    abstract render(ctx: RenderContenxtType, position: { x: number, y: number }): void;
+
 }
+
 /**
  * 枝干节点渲染元素
  */
-export class BranchRenderObject extends RenderObject {
-    constructor(element) {
-        super(element);
+export abstract class BranchRenderObject<T extends Element = Element> extends RenderObject<T> {
+    constructor(element: T | null) {
+        super(element as T);
     }
-    chilren = [];
-    getItems() {
+    private chilren: Array<RenderObject> = [];
+    getItems(): Array<RenderObject> {
         return this.chilren;
     }
-    addChild(...items) {
+
+    addChild(...items: Array<RenderObject>): void {
         for (let i = 0; i < items.length; i++) {
             const item = items[i];
             item.parent = this;
             this.chilren.push(item);
         }
     }
-    insertChild(item, index) {
+
+    insertChild(item: RenderObject, index: number): void {
         this.chilren.splice(index, 0, item);
         item.parent = this;
     }
-    removeChild(child) {
+
+    removeChild(child: RenderObject): void {
         const index = this.chilren.indexOf(child);
         if (index < 0) {
             throw new Error('为查找到当前元素');
@@ -108,17 +118,18 @@ export class BranchRenderObject extends RenderObject {
         }
         this.chilren.splice(index, 1);
     }
-    removeChildByIndex(index) {
+
+    removeChildByIndex(index: number): void {
         const child = this.chilren[index];
         if (child) {
             this.chilren.splice(index, 1);
             //child.parent = null;
-        }
-        else {
+        } else {
             throw new Error('为查找到当前元素');
         }
     }
-    clear() {
+
+    clear(): void {
         const items = [...this.chilren];
         for (let i = items.length - 1; i >= 0; i--) {
             this.removeChildByIndex(i);
@@ -127,13 +138,20 @@ export class BranchRenderObject extends RenderObject {
     get length() {
         return this.chilren.length;
     }
-    getChild(index) {
-        return this.chilren[index];
+
+
+    getChild<T extends RenderObject = RenderObject>(index: number): T {
+        return this.chilren[index] as T;
     }
-    getChildIndex(child) {
+
+    getChildIndex(child: RenderObject): number {
         return this.chilren.indexOf(child);
     }
-    destroy() {
+
+    abstract beginRender(ctx: RenderContenxtType, position: Position): void;
+    abstract endRender(ctx: RenderContenxtType, position: Position): void;
+
+    destroy(): void {
         super.destroy();
         const len = this.length;
         for (let i = len - 1; i >= 0; i--) {
@@ -145,51 +163,62 @@ export class BranchRenderObject extends RenderObject {
         //this.chilren = null;
     }
 }
+
+
 /**
  * 块级渲染元素
  */
-export class BlockContentRenderObject extends BranchRenderObject {
-    setRenderWidth(maxWidth) {
+export abstract class BlockContentRenderObject<T extends Element = Element> extends BranchRenderObject<T> {
+    setRenderWidth(maxWidth: number): void {
         this.rect.maxWidth = maxWidth;
         this.rect.width = maxWidth;
     }
 }
-export class InlineGroupRenderObject extends BranchRenderObject {
+
+export abstract class InlineGroupRenderObject<T extends Element = Element> extends BranchRenderObject<T> {
 }
+
 /**
  * 包含块级渲染元素的容器元素,例如body、table-cell等
  */
-export class BlockContainerRenderObject extends BranchRenderObject {
-    setRenderWidth(maxWidth) {
+export abstract class BlockContainerRenderObject<T extends Element = Element> extends BranchRenderObject<T> {
+    setRenderWidth(maxWidth: number): void {
         this.rect.maxWidth = maxWidth;
         this.rect.width = maxWidth;
     }
 }
+
 /**
  * 多级 ‘BlockLineRectRenderObject’ 包裹元素，例如 p、table
  */
-export class MuiltBlockLineRenderObject extends BlockContentRenderObject {
-}
+export abstract class MuiltBlockLineRenderObject<T extends Element = Element> extends BlockContentRenderObject<T> { }
+
 /**
  * 容器-子内容为多个行内块级元素，例如table-row
  */
-export class InlineBlockContainer extends MuiltBlockLineRenderObject {
-}
+export abstract class InlineBlockContainer extends MuiltBlockLineRenderObject { }
+
 /**
  * 服务于table-cell
  * 可被多级拆分的元素
  */
-export class InlineMuiltBlockLineRenderObject extends MuiltBlockLineRenderObject {
-}
+export abstract class InlineMuiltBlockLineRenderObject extends MuiltBlockLineRenderObject { }
+
 /**
  * 最小不可分割单位的块级行框，例如 p-line
  * 一行不可存在于两个页面中,块级行框不能分布在两个页面中
  */
-export class BlockLineRectRenderObject extends BlockContentRenderObject {
+export abstract class BlockLineRectRenderObject extends BlockContentRenderObject { }
+
+
+export type BorderType = 'left' | 'right' | 'top' | 'bottom' | 'left-middle' | 'right-middle' | 'top-middle' | 'bottom-middle' | 'none' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
+export type CursorType = 'text' | 'row-resize' | 'col-resize' | 'none' | 'default' | 'move' | 'pointer' | 'w-resize' | 's-resize' | 'se-resize' | 'ne-resize';
+export enum RenderObjectType {
+    Branch = 0,
+    Leaf = 1
+}
+
+export interface IMeasureRenderStruct<T> {
+    rect: Rect,
+    render: T
 }
-export var RenderObjectType;
-(function (RenderObjectType) {
-    RenderObjectType[RenderObjectType["Branch"] = 0] = "Branch";
-    RenderObjectType[RenderObjectType["Leaf"] = 1] = "Leaf";
-})(RenderObjectType || (RenderObjectType = {}));
-//# sourceMappingURL=render-define.js.map