@hailin-zheng/editor-core 1.0.4 → 1.0.7

package/src/med_editor/doc-ruler.ts

@@ -1,340 +0,0 @@
-import { ElementUtil } from "@/med_editor/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 {
-    private ctx!: CanvasRenderingContext2D;
-    private options: RuleOptions;
-    //标尺高度
-    private ruleHeight = 30;
-    //当前标尺的位置
-    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,
-            pagePR: 0,
-            docLeft: 0
-        };
-        this.thumbX = {
-            indent: 0,
-            hanging: 0
-        };
-        this.canvas.addEventListener("mousedown", (evt) => this.canvasMousedown(evt));
-        this.canvas.addEventListener("mousemove", (evt) => this.canvasMousemove(evt));
-        this.canvas.addEventListener("mouseup", (evt) => this.canvasMouseup(evt));
-    }
-
-    destroy(): void {
-        this.canvas.removeEventListener("mousedown", this.canvasMousedown);
-        this.canvas.removeEventListener("mousemove", this.canvasMousemove);
-        this.canvas.removeEventListener("mouseup", this.canvasMouseup);
-    }
-
-    setRuleOptions(options: RuleOptions) {
-        this.options = options;
-        const convertRatio = this.viewOptions.mmToPixelsRatio;
-        this.options.pagePL = Math.floor(this.options.pagePL * convertRatio);
-        this.options.pagePR = Math.floor(this.options.pagePR * convertRatio);
-        this.scaleView();
-        ElementUtil.setCanvasProps(this.canvas, this.ctx, { width: this.getParentWidth(), height: this.ruleHeight });
-        //this.canvas.style.left = this.options.docLeft + 'px';
-    }
-
-    getParentWidth(): number {
-        const parent = this.canvas.parentElement as HTMLDivElement;
-        return parent.getBoundingClientRect().width;
-    }
-
-    private fillRect(x: number, y: number, width: number, height: number, color: string) {
-        this.ctx.fillStyle = color;
-        this.ctx.fillRect(x, y, width, height);
-    }
-
-    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 });
-        points.push({ x: x + 4, y: y + 7 });
-        points.push({ x: x + 8, y: y + 3 });
-        points.push({ x: x + 8, y });
-        points.push({ x: x, y });
-        this.drawLine(points);
-        return 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 });
-        points.push({ x: x + 4, y: y - 7 });
-        points.push({ x: x + 8, y: y - 3 });
-        points.push({ x: x + 8, y });
-        points.push({ x: x, y });
-        points.push({ x: x, y: y + 3 });
-        points.push({ x: x + 8, y: y + 3 });
-        points.push({ x: x + 8, y: y });
-        this.drawLine(points);
-        return points;
-    }
-
-    private measureText(text: string) {
-        this.ctx.font = "8px 'Times New Roman'";
-        const measure = this.ctx.measureText(text);
-        return measure.width;
-    }
-
-    private drawLine(points: Array<Position>): void {
-        this.ctx.beginPath();
-        this.ctx.save();
-        this.ctx.fillStyle = "white";
-        this.ctx.lineWidth = 0.5;
-        for (let j = 0; j < points.length; j++) {
-            let { x, y } = points[j];
-            x += 0.5;
-            y += 0.5;
-            if (j === 0) {
-                this.ctx.moveTo(x, y);
-            } else {
-                this.ctx.lineTo(x, y);
-            }
-        }
-        this.ctx.stroke();
-        this.ctx.fill();
-        this.ctx.closePath();
-        this.ctx.restore();
-    }
-
-    private drawText(text: string, x: number, y: number) {
-        this.ctx.save();
-        this.ctx.fillStyle = "rgb(0,0,0)";
-        this.ctx.textBaseline = "alphabetic";
-        this.ctx.font = "8px 'Times New Roman'";
-        this.ctx.fillText(text, x, y + 8 - 1);
-        this.ctx.restore();
-    }
-
-    /**
-     * 刷新新的状态
-     * @param indent 
-     * @param hang 
-     */
-    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();
-    }
-
-    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)) {
-            this.mouseDownThumbType = 'hang';
-            this.mouseDownPos = clickPos;
-        } else {
-            console.log("未点击在里面");
-        }
-    }
-
-    private getMousePos(evt: MouseEvent): Position {
-        return {
-            x: evt.offsetX - this.options.docLeft,
-            y: evt.offsetY
-        }
-    }
-
-    private canvasMousemove(evt: MouseEvent): void {
-        if (['indent', 'hang'].indexOf(this.mouseDownThumbType) < 0) {
-            return;
-        }
-        if (!this.mouseDownPos) {
-            return;
-        }
-        const canvasPos = this.getMousePos(evt);
-        let moveX = canvasPos.x - this.mouseDownPos.x;
-        //至少移动5px再进行修改
-        const remainder = moveX % 5;
-        if (Math.abs(remainder) < 3) {
-            return;
-        } else {
-            if (remainder < 0) {
-                moveX -= 5 + remainder;
-            } else {
-                moveX += 5 - remainder;
-            }
-        }
-        if (moveX === 0) {
-            return;
-        }
-        canvasPos.x = this.mouseDownPos.x + moveX;
-        const para = this.getCurrPara();
-        if (!para) {
-            throw new Error('para is null')
-        }
-        if (this.mouseDownThumbType === 'indent') {
-            this.thumbX.indent += moveX;
-            this.thumbX.indent = this.thumbX.indent < 0 ? 0 : this.thumbX.indent;
-            this.thumbX.indent = this.thumbX.indent > this.options.width ? this.options.width : this.thumbX.indent;
-            this.mouseDownPos = canvasPos;
-            para.props.indent += moveX;
-            this.drawRule();
-        }
-        if (this.mouseDownThumbType === 'hang') {
-            this.thumbX.hanging += moveX;
-            this.thumbX.hanging = this.thumbX.hanging < 0 ? 0 : this.thumbX.hanging;
-            this.thumbX.hanging = this.thumbX.hanging > this.options.width ? this.options.width : this.thumbX.hanging;
-            this.mouseDownPos = canvasPos;
-            para.props.hanging += moveX;
-            this.drawRule();
-        }
-    }
-
-    private canvasMouseup(evt: MouseEvent): void {
-        this.mouseDownThumbType = 'none';
-        this.mouseDownPos = null;
-    }
-
-
-    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
-            }
-        }
-        return c;
-    }
-
-
-    /**
-     * 绘制
-     */
-    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: Array<Position> = [];
-            const x = j * gantWidth;
-            if (x > this.options.width) {
-                break;
-            }
-            const y = 10;
-            points.push({ x, y }, { x, y: y + 10 });
-            this.drawLine(points);
-            const textWidth = this.measureText(j + "");
-            this.drawText(j + '', x + Math.floor((gantWidth - textWidth) / 2), y + 1);
-        }
-        this.getRuleMarksPos();
-        this.indentThumbPoints = this.drawIndentThumb(this.thumbX.indent, 6);
-        this.hangThumbPoints = this.drawHangThumb(this.thumbX.hanging, 25);
-    }
-
-    private getRuleMarksPos(): void {
-        const { startControl, startOffset, startHitInfo } = this.ss;
-        if (!startControl || !startHitInfo) {
-            return;
-        }
-        const para = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
-        const indent = para.props.indent;
-        const hanging = para.props.hanging;
-        const { startRegion, hitDocIndex } = this.ss.startHitInfo as HitEventInfo;
-        const cursorPosi = DocumentCursor.getElementCursorPos(startControl, startOffset, startRegion, hitDocIndex);
-        //当前段落
-        const paraRender = ElementUtil.getParentRender(cursorPosi.render, ParagraphRenderObject) as ParagraphRenderObject;
-        //当前段落位置
-        const paraRenderPos = ElementUtil.getRenderAbsolutePaintPos(paraRender)
-        //当前文档
-        const docRender = ElementUtil.getParentRender(paraRender, DocumentRenderObject) as DocumentRenderObject;
-        //当前文档位置
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender)
-        this.thumbX.indent = paraRenderPos.x - docRenderPos.x + indent;
-        this.thumbX.hanging = paraRenderPos.x - docRenderPos.x + hanging;
-        this.setParentMarksPos(paraRender);
-    }
-
-    private getCurrPara(): ParagraphElement | null {
-        const { startControl, startOffset } = this.ss;
-        if (!startControl) {
-            return null;
-        }
-        return ElementUtil.getParentByType(startControl, ParagraphElement);
-    }
-
-    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) as DocumentRenderObject;
-            const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender)
-            for (let i = 0; i < parentRender.length; i++) {
-                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;
-    }
-
-    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)')
-        for (let i = 0; i < width; i++) {
-            this.ctx.save();
-            this.ctx.beginPath();
-            this.ctx.lineWidth = 0.3;
-            this.ctx.setLineDash([0.5, 0.5, 0.5]);
-            this.ctx.moveTo(x + i, y);
-            this.ctx.lineTo(x + i, y + this.ruleHeight);
-            this.ctx.stroke();
-            this.ctx.closePath();
-            this.ctx.restore();
-        }
-    }
-
-    scaleView(): void {
-        return;
-        const { scale } = this.viewOptions;
-        //this.canvas.style.transformOrigin = 'center center';
-        const parent = this.canvas.parentElement as HTMLDivElement;
-        if (scale === 1) {
-            parent.style.transform = '';
-        } else {
-            parent.style.transform = `scale(${this.viewOptions.scale})`;
-        }
-    }
-
-
-}

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

@@ -1,200 +0,0 @@
-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);
-    }
-
-}