@hailin-zheng/editor-core 1.0.6 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hailin-zheng/editor-core",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "description": "",
   "main": "texteditor.ts",
   "scripts": {
@@ -39,7 +39,7 @@
     "rxjs": "^6.6.7"
   },
   "files": [
-    "lib",
+    "src/med_editor/",
     "package.json"
   ]
 }

package/{lib/doc-ruler.js → src/med_editor/doc-ruler.ts}

@@ -1,27 +1,36 @@
-import { ElementUtil } from "@/med_editor/framework/element-util";
-import { DocumentCursor } from "./framework/document-selection";
+import { ElementUtil } from "./framework/element-util";
+import { DocumentCursor, SelectionState } from "./framework/document-selection";
+import { Position, ViewOptions } from "./framework/element-define";
+import { HitEventInfo } from "./framework/element-event-define";
 import { DocumentRenderObject } from "./framework/impl/document/doc-impl";
 import { ParagraphElement, ParagraphRenderObject } from "./framework/impl/paragraph/p-impl";
+import { TableCellRenderObject } from "./framework/impl/table/table-cell-impl";
 import { TableRowRenderObject } from "./framework/impl/table/table-row-impl";
+import { RenderObject } from "./framework/render-define";
+
+export interface RuleOptions {
+    width: number;
+    pagePL: number;
+    pagePR: number;
+    docLeft: number;
+
+}
 export class DocRule {
-    canvas;
-    viewOptions;
-    ss;
-    ctx;
-    options;
+    private ctx!: CanvasRenderingContext2D;
+    private options: RuleOptions;
     //标尺高度
-    ruleHeight = 30;
+    private ruleHeight = 30;
     //当前标尺的位置
-    thumbX;
-    mouseDownPos;
-    indentThumbPoints = [];
-    hangThumbPoints = [];
-    mouseDownThumbType = 'none';
-    constructor(canvas, viewOptions, ss) {
-        this.canvas = canvas;
-        this.viewOptions = viewOptions;
-        this.ss = ss;
-        this.ctx = this.canvas.getContext('2d');
+    private thumbX: {
+        indent: number,
+        hanging: number
+    }
+    private mouseDownPos!: Position | null;
+    private indentThumbPoints: Array<Position> = [];
+    private hangThumbPoints: Array<Position> = [];
+    private mouseDownThumbType: 'none' | 'indent' | 'hang' = 'none';
+    constructor(public canvas: HTMLCanvasElement, public viewOptions: ViewOptions, public ss: SelectionState) {
+        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
         this.options = {
             width: 0,
             pagePL: 0,
@@ -36,12 +45,14 @@ export class DocRule {
         this.canvas.addEventListener("mousemove", (evt) => this.canvasMousemove(evt));
         this.canvas.addEventListener("mouseup", (evt) => this.canvasMouseup(evt));
     }
-    destroy() {
+
+    destroy(): void {
         this.canvas.removeEventListener("mousedown", this.canvasMousedown);
         this.canvas.removeEventListener("mousemove", this.canvasMousemove);
         this.canvas.removeEventListener("mouseup", this.canvasMouseup);
     }
-    setRuleOptions(options) {
+
+    setRuleOptions(options: RuleOptions) {
         this.options = options;
         const convertRatio = this.viewOptions.mmToPixelsRatio;
         this.options.pagePL = Math.floor(this.options.pagePL * convertRatio);
@@ -50,16 +61,19 @@ export class DocRule {
         ElementUtil.setCanvasProps(this.canvas, this.ctx, { width: this.getParentWidth(), height: this.ruleHeight });
         //this.canvas.style.left = this.options.docLeft + 'px';
     }
-    getParentWidth() {
-        const parent = this.canvas.parentElement;
+
+    getParentWidth(): number {
+        const parent = this.canvas.parentElement as HTMLDivElement;
         return parent.getBoundingClientRect().width;
     }
-    fillRect(x, y, width, height, color) {
+
+    private fillRect(x: number, y: number, width: number, height: number, color: string) {
         this.ctx.fillStyle = color;
         this.ctx.fillRect(x, y, width, height);
     }
-    drawIndentThumb(x, y) {
-        const points = [];
+
+    private drawIndentThumb(x: number, y: number): Array<Position> {
+        const points: Array<Position> = [];
         x -= 4;
         points.push({ x: x, y });
         points.push({ x: x, y: y + 3 });
@@ -70,8 +84,9 @@ export class DocRule {
         this.drawLine(points);
         return points;
     }
-    drawHangThumb(x, y) {
-        const points = [];
+
+    private drawHangThumb(x: number, y: number): Array<Position> {
+        const points: Array<{ x: number, y: number }> = [];
         x -= 4;
         points.push({ x: x, y });
         points.push({ x: x, y: y - 3 });
@@ -85,12 +100,14 @@ export class DocRule {
         this.drawLine(points);
         return points;
     }
-    measureText(text) {
+
+    private measureText(text: string) {
         this.ctx.font = "8px 'Times New Roman'";
         const measure = this.ctx.measureText(text);
         return measure.width;
     }
-    drawLine(points) {
+
+    private drawLine(points: Array<Position>): void {
         this.ctx.beginPath();
         this.ctx.save();
         this.ctx.fillStyle = "white";
@@ -101,8 +118,7 @@ export class DocRule {
             y += 0.5;
             if (j === 0) {
                 this.ctx.moveTo(x, y);
-            }
-            else {
+            } else {
                 this.ctx.lineTo(x, y);
             }
         }
@@ -111,7 +127,8 @@ export class DocRule {
         this.ctx.closePath();
         this.ctx.restore();
     }
-    drawText(text, x, y) {
+
+    private drawText(text: string, x: number, y: number) {
         this.ctx.save();
         this.ctx.fillStyle = "rgb(0,0,0)";
         this.ctx.textBaseline = "alphabetic";
@@ -119,39 +136,41 @@ export class DocRule {
         this.ctx.fillText(text, x, y + 8 - 1);
         this.ctx.restore();
     }
+
     /**
      * 刷新新的状态
-     * @param indent
-     * @param hang
+     * @param indent 
+     * @param hang 
      */
-    refreshRule() {
+    refreshRule(): void {
         this.ctx.clearRect(0, 0, this.canvas.width, this.ruleHeight);
         this.ctx.save();
         this.ctx.translate(this.options.docLeft, 0);
         this.drawRule();
         this.ctx.restore();
     }
-    canvasMousedown(evt) {
+
+    private canvasMousedown(evt: MouseEvent): void {
         const clickPos = this.getMousePos(evt);
         if (this.pointInPoly(clickPos, this.indentThumbPoints)) {
             this.mouseDownThumbType = 'indent';
             this.mouseDownPos = clickPos;
-        }
-        else if (this.pointInPoly(clickPos, this.hangThumbPoints)) {
+        } else if (this.pointInPoly(clickPos, this.hangThumbPoints)) {
             this.mouseDownThumbType = 'hang';
             this.mouseDownPos = clickPos;
-        }
-        else {
+        } else {
             console.log("未点击在里面");
         }
     }
-    getMousePos(evt) {
+
+    private getMousePos(evt: MouseEvent): Position {
         return {
             x: evt.offsetX - this.options.docLeft,
             y: evt.offsetY
-        };
+        }
     }
-    canvasMousemove(evt) {
+
+    private canvasMousemove(evt: MouseEvent): void {
         if (['indent', 'hang'].indexOf(this.mouseDownThumbType) < 0) {
             return;
         }
@@ -164,12 +183,10 @@ export class DocRule {
         const remainder = moveX % 5;
         if (Math.abs(remainder) < 3) {
             return;
-        }
-        else {
+        } else {
             if (remainder < 0) {
                 moveX -= 5 + remainder;
-            }
-            else {
+            } else {
                 moveX += 5 - remainder;
             }
         }
@@ -179,7 +196,7 @@ export class DocRule {
         canvasPos.x = this.mouseDownPos.x + moveX;
         const para = this.getCurrPara();
         if (!para) {
-            throw new Error('para is null');
+            throw new Error('para is null')
         }
         if (this.mouseDownThumbType === 'indent') {
             this.thumbX.indent += moveX;
@@ -198,28 +215,33 @@ export class DocRule {
             this.drawRule();
         }
     }
-    canvasMouseup(evt) {
+
+    private canvasMouseup(evt: MouseEvent): void {
         this.mouseDownThumbType = 'none';
         this.mouseDownPos = null;
     }
-    pointInPoly(pt, poly) {
+
+
+    private pointInPoly(pt: Position, poly: Array<Position>): boolean {
         let c = false;
         for (let i = -1, l = poly.length, j = l - 1; ++i < l; j = i) {
             if (((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) && pt.x < ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) / (poly[j].y - poly[i].y) + poly[i].x) {
-                c = !c;
+                c = !c
             }
         }
         return c;
     }
+
+
     /**
      * 绘制
      */
-    drawRule() {
+    private drawRule(): void {
         this.fillRect(0, 0, this.options.pagePL, this.ruleHeight, "rgb(198,198,198)");
         this.fillRect(this.options.width - this.options.pagePR, 0, this.options.pagePR, this.ruleHeight, "rgb(198,198,198)");
         for (let j = 0; j < 50; j++) {
             const gantWidth = 20;
-            const points = [];
+            const points: Array<Position> = [];
             const x = j * gantWidth;
             if (x > this.options.width) {
                 break;
@@ -234,57 +256,61 @@ export class DocRule {
         this.indentThumbPoints = this.drawIndentThumb(this.thumbX.indent, 6);
         this.hangThumbPoints = this.drawHangThumb(this.thumbX.hanging, 25);
     }
-    getRuleMarksPos() {
+
+    private getRuleMarksPos(): void {
         const { startControl, startOffset, startHitInfo } = this.ss;
         if (!startControl || !startHitInfo) {
             return;
         }
-        const para = ElementUtil.getParentByType(startControl, ParagraphElement);
+        const para = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
         const indent = para.props.indent;
         const hanging = para.props.hanging;
-        const { startRegion, hitDocIndex } = this.ss.startHitInfo;
+        const { startRegion, hitDocIndex } = this.ss.startHitInfo as HitEventInfo;
         const cursorPosi = DocumentCursor.getElementCursorPos(startControl, startOffset, startRegion, hitDocIndex);
         //当前段落
-        const paraRender = ElementUtil.getParentRender(cursorPosi.render, ParagraphRenderObject);
+        const paraRender = ElementUtil.getParentRender(cursorPosi.render, ParagraphRenderObject) as ParagraphRenderObject;
         //当前段落位置
-        const paraRenderPos = ElementUtil.getRenderAbsolutePaintPos(paraRender);
+        const paraRenderPos = ElementUtil.getRenderAbsolutePaintPos(paraRender)
         //当前文档
-        const docRender = ElementUtil.getParentRender(paraRender, DocumentRenderObject);
+        const docRender = ElementUtil.getParentRender(paraRender, DocumentRenderObject) as DocumentRenderObject;
         //当前文档位置
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender);
+        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender)
         this.thumbX.indent = paraRenderPos.x - docRenderPos.x + indent;
         this.thumbX.hanging = paraRenderPos.x - docRenderPos.x + hanging;
         this.setParentMarksPos(paraRender);
     }
-    getCurrPara() {
+
+    private getCurrPara(): ParagraphElement | null {
         const { startControl, startOffset } = this.ss;
         if (!startControl) {
             return null;
         }
         return ElementUtil.getParentByType(startControl, ParagraphElement);
     }
-    setParentMarksPos(childRender) {
-        const items = [];
+
+    private setParentMarksPos(childRender: RenderObject): Array<{ pos: Position }> {
+        const items: Array<{ pos: Position }> = [];
         const parentRender = childRender.parent;
         if (!parentRender || parentRender instanceof DocumentRenderObject) {
             return items;
         }
         if (parentRender instanceof TableRowRenderObject) {
-            const docRender = ElementUtil.getParentRender(parentRender, DocumentRenderObject);
-            const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender);
+            const docRender = ElementUtil.getParentRender(parentRender, DocumentRenderObject) as DocumentRenderObject;
+            const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender)
             for (let i = 0; i < parentRender.length; i++) {
-                const cellRender = parentRender.getChild(i);
-                const pos = ElementUtil.getRenderAbsolutePaintPos(cellRender);
+                const cellRender = parentRender.getChild(i) as TableCellRenderObject;
+                const pos = ElementUtil.getRenderAbsolutePaintPos(cellRender)
                 this.drawCellMark(pos.x - docRenderPos.x, 0, cellRender.padding.left);
             }
         }
         items.push(...this.setParentMarksPos(parentRender));
         return items;
     }
-    drawCellMark(x, y, width) {
+
+    private drawCellMark(x: number, y: number, width: number): void {
         x += 0.5;
         y += 0.5;
-        this.fillRect(x, y, width, this.ruleHeight, 'rgb(198,198,198,0.2)');
+        this.fillRect(x, y, width, this.ruleHeight, 'rgb(198,198,198,0.2)')
         for (let i = 0; i < width; i++) {
             this.ctx.save();
             this.ctx.beginPath();
@@ -297,17 +323,18 @@ export class DocRule {
             this.ctx.restore();
         }
     }
-    scaleView() {
+
+    scaleView(): void {
         return;
         const { scale } = this.viewOptions;
         //this.canvas.style.transformOrigin = 'center center';
-        const parent = this.canvas.parentElement;
+        const parent = this.canvas.parentElement as HTMLDivElement;
         if (scale === 1) {
             parent.style.transform = '';
-        }
-        else {
+        } else {
             parent.style.transform = `scale(${this.viewOptions.scale})`;
         }
     }
+
+
 }
-//# sourceMappingURL=doc-ruler.js.map

package/src/med_editor/framework/common-util.ts

@@ -0,0 +1,200 @@
+import moment from "moment";
+import { Rect } from "./element-define";
+import { BorderType } from "./render-define";
+interface Position {
+    x: number;
+    y: number;
+}
+
+export class CommonUtil {
+
+    /**
+     * 判断坐标是否在矩形框内
+     * @param rect 
+     * @param position 
+     * @returns 
+     */
+    static isInsideRectByPosition(rect: Rect, position: Position): boolean {
+        return position.x >= rect.x
+            &&
+            position.x <= rect.x + rect.width
+            &&
+            position.y >= rect.y
+            &&
+            position.y <= rect.y + rect.height;
+    }
+
+    static isInsideRectByRect(rect: Rect, position: Rect): boolean {
+        return position.x >= rect.x
+            &&
+            position.x <= rect.x + rect.width
+            &&
+            position.y >= rect.y
+            &&
+            position.y <= rect.y + rect.height
+            &&
+            position.y + position.height <= rect.y + rect.height
+            &&
+            position.x + position.width <= rect.x + rect.width;
+    }
+
+    /**
+     * 判断坐标是否在矩形的边框上
+     * @param rect 
+     * @param borderWidth 
+     * @param position 
+     */
+    static isInRectBorder(rect: Rect, borderWidth: number, position: Position): { borderType: BorderType } {
+        const leftBorderRect: Rect = { x: 0, y: 0, width: borderWidth, height: rect.height, maxWidth: 0, maxHeight: 0 };
+        const rightBorderRect: Rect = { x: rect.width - borderWidth, y: 0, width: borderWidth, height: rect.height, maxWidth: 0, maxHeight: 0 };
+        const topBorderRect: Rect = { x: 0, y: 0, width: rect.width, height: borderWidth, maxWidth: 0, maxHeight: 0 };
+        const bottomBorderRect: Rect = { x: 0, y: rect.height - borderWidth, width: rect.width, height: borderWidth, maxWidth: 0, maxHeight: 0 };
+        let borderType: BorderType = 'none';
+        if (this.isInsideRectByPosition(leftBorderRect, position)) {
+            borderType = 'left';
+        } else if (this.isInsideRectByPosition(rightBorderRect, position)) {
+            borderType = 'right';
+        } else if (this.isInsideRectByPosition(topBorderRect, position)) {
+            borderType = 'top';
+        } else if (this.isInsideRectByPosition(bottomBorderRect, position)) {
+            borderType = 'bottom';
+        }
+        return { borderType };
+    }
+
+    /**
+     * 判断坐标是否在图片的缩放操作点上
+     */
+    static isInPictureResizePoint(rect: Rect, pos: Position, r: number): { borderType: BorderType } | null {
+        const { width, height } = rect;
+        const x = 0;
+        const y = 0;
+        const points: Array<{ x: number, y: number, type: BorderType }> = [{ x, y, type: 'left-top' }, { x: x + width, y, type: 'right-top' }, { x: x + (Math.floor(width / 2)), y: y, type: 'top-middle' }, { x, y: y + Math.floor(height / 2), type: 'left-middle' }, { x, y: y + height, type: 'left-bottom' }, { x: width, y: Math.floor(height / 2), type: 'right-middle' }, { x: x + width, y: y + height, type: 'right-bottom' }, { x: x + (Math.floor(width / 2)), y: y + height, type: 'bottom-middle' }];
+        for (let i = 0; i < points.length; i++) {
+            const point = points[i];
+            const { x: px, y: py } = point;
+            if (((px - pos.x) * (px - pos.x) + (py - pos.y) * (py - pos.y)) < r * r) {
+                return { borderType: point.type };
+            }
+        }
+        return null;
+    }
+
+
+    /**
+    * 整形符合连线要求
+    * @param points 
+    * @param width 
+    * @param strokeColor 
+    */
+    static resharpPoints(points: Array<Position>): Array<Position> {
+        let prevPoint: Position = points[0];
+        const array: Array<Position> = [];
+        array.push(prevPoint);
+        for (let i = 1; i < points.length; i++) {
+            const currPoint = points[i];
+            //不在同一水平线
+            if (currPoint.y !== prevPoint.y && currPoint.x !== prevPoint.x) {
+                array.push({ x: currPoint.x, y: prevPoint.y });
+            }
+            array.push(currPoint);
+            prevPoint = currPoint;
+        }
+        return array;
+    }
+
+    static getOffsetX(node: HTMLElement): number {
+        if (!node.parentElement) {
+            throw new Error('node.parentElement is null')
+        }
+        const parent = node.parentElement.getBoundingClientRect().left;
+        const curr = node.getBoundingClientRect().left;
+        return curr - parent;
+    }
+
+    static randomColor() {
+        let str = "#";
+        for (let i = 0; i < 6; i++) {
+            str += Math.floor(Math.random() * 16).toString(16);
+        }
+        return str;
+    }
+
+    /**
+     * 判断一个数值是否在另一个数值的增益区间中
+     * @param val 
+     * @param offset 
+     * @param compareValue 
+     * @returns 
+     */
+    static ApproxmateValueInRange(val: number, offset: number, compareValue: number): boolean {
+        return (val - offset) <= compareValue && (val + offset) >= compareValue;
+    }
+
+
+    static getEmptyValue<T>(val: T, emptyVal: T): T {
+        if (!val) {
+            return emptyVal;
+        }
+        return val;
+    }
+
+    /**
+     * 移除并集
+     * @param array 
+     * @param deleteItems 
+     * @returns 
+     */
+    static removeUnionSet<T>(array: Array<T>, deleteItems: Array<T>): Array<T> {
+        const arraySet = new Set(array);
+        for (let i = 0; i < deleteItems.length; i++) {
+            const item = deleteItems[i];
+            if (arraySet.has(item)) {
+                arraySet.delete(item)
+            }
+        }
+        return Array.from(arraySet);
+    }
+
+    static nullToString(val: any): string {
+        if (val === null || val === undefined) {
+            return '';
+        }
+        return val;
+    }
+
+    static formatDate(date: Date, format: string): string {
+        return moment(date).format(format);
+    }
+
+    static formatNow(format: string): string {
+        return this.formatDate(new Date(), format);
+    }
+
+    static parseText(text: string, data: object): string {
+        const reg = /\{(.*?)\}/g;
+        let result = text;
+        let match;
+        while (match = reg.exec(text)) {
+            const key = match[1];
+            const value = data[key];
+            result = result.replace(match[0], value);
+        }
+        return result;
+    }
+
+    //获取和当前日期相差的秒数
+    static getNowDiffSeconds(date: Date | string): number {
+        date = typeof date === 'string' ? new Date(date) : date;
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        return diff / 1000;
+    }
+
+    //验证当前字符串是否为日期格式
+    static isDate(str: string): boolean {
+        const reg = /^\d{4}-\d{2}-\d{2}$/;
+        return reg.test(str);
+    }
+
+}