@hailin-zheng/editor-core 1.1.5 → 1.1.6

package/controls/Canvas.d.ts

@@ -1,10 +1,7 @@
-import { IArrangeEvent, IMeasureEvent, IRenderData, Panel, Size } from "./Node";
+import { AbsolutePanel, IRenderData } from "./Node";
 /**
  * 采用绝对布局系统的容器
  */
-export declare class Canvas extends Panel {
-    constructor();
-    measureOverride(e: IMeasureEvent, availableSize: Size): Size;
-    protected arrangeOverride(e: IArrangeEvent, finalSize: Size): Size;
+export declare class Canvas extends AbsolutePanel {
     render(e: IRenderData): void;
 }

package/controls/Node.d.ts

@@ -42,6 +42,8 @@ export interface IAppState {
 export declare abstract class NodeCore {
     enableClip: boolean;
     pointEvent: boolean;
+    allowHitTest: boolean;
+    hitTest(hitPos: Position, currPos: Position): boolean;
     get enable(): boolean;
     set enable(value: boolean);
     private _enable;
@@ -171,6 +173,7 @@ export declare abstract class NodeItems extends NodeCore {
     eventMap: WeakMap<NodeCore, Array<Subscription>>;
     absoluteItems: boolean;
     containerPropName: string;
+    constructor();
     addChild(control: NodeCore, index?: number): void;
     getRenderItems(): Array<NodeCore>;
     removeChild(index: number | NodeCore): void;
@@ -184,6 +187,14 @@ export declare abstract class NodeItems extends NodeCore {
 }
 export declare abstract class Panel extends NodeItems {
 }
+/**
+ * 子内容采用绝对定位的容器
+ */
+export declare abstract class AbsolutePanel extends NodeItems {
+    protected constructor();
+    measureOverride(e: IMeasureEvent, availableSize: Size): Size;
+    protected arrangeOverride(e: IArrangeEvent, finalSize: Size): Size;
+}
 export interface ActiveAppContext {
     root: SurfaceView;
     render: () => void;
@@ -199,6 +210,10 @@ export declare function renderNode(node: NodeCore, renderCtx: ViewPaint, appStat
  * @param renderCtx
  */
 export declare function drawBorderline(node: NodeCore, renderCtx: ViewPaint): void;
+/**
+ * 绘制外轮廓
+ */
+export declare function drawOutline(node: NodeCore, renderCtx: ViewPaint): void;
 export declare function clipContent(node: NodeCore, renderCtx: ViewPaint): void;
 export declare function translate(renderCtx: ViewPaint, x: number, y: number): void;
 export declare function getParents(node: NodeCore): Array<NodeCore>;

package/controls/Text.d.ts

@@ -1,17 +1,18 @@
 import { Size, IRenderData, IMeasureEvent, IArrangeEvent } from "./Node";
 import { TextBase } from "./TextBase";
-export declare type TextVertAlign = 'superscript' | 'subscript';
 /**
  * 文本元素尺寸默认按照横向排列进行测量，内容高度等于字体大小
  * 如果有默认宽度限制，而且支持换行显示，则内容高度等于多行累计高度
  */
 export declare class LabelNode extends TextBase {
+    constructor();
     private _textWrapping;
     get textWrapping(): "wrap" | "no";
     set textWrapping(value: "wrap" | "no");
     protected cacheTextRect: TextMeasureRect;
-    private textUnits;
+    private lines;
     measureOverride(e: IMeasureEvent, availableSize: Size): Size;
+    private getMuiltLines;
     protected arrangeOverride(e: IArrangeEvent, finalSize: Size): Size;
     private getTextProps;
     private measureTextRect;

package/controls/ViewPaint.d.ts

@@ -17,11 +17,20 @@ export declare class ViewPaint {
     getGlobalAlpha(): number;
     clear(): void;
     drawText(text: string, textProps: TextProps, x: number, y: number, width: number, height: number): void;
+    drawText2(text: string, textProps: {
+        color: string;
+        fontSize: number;
+        fontName: string;
+    }, x: number, y: number): void;
     fillCircular(x: number, y: number, r: number, color?: string): void;
     measureText(text: string, textProps: TextProps): {
         width: number;
         height: number;
     };
+    measureText2(text: string, font: {
+        fontSize: number;
+        fontName: string;
+    }): number;
     measureTextUnits(units: Array<TextUnits>, textProps: TextProps): void;
     clearRect(x: number, y: number, width: number, height: number): void;
     save(): void;

package/index-cjs.js

@@ -4261,7 +4261,6 @@ class TableUtil {
         if (!ss.startControl) {
             return;
         }
-        ss.clear();
         const startCell = ElementUtil.getParentByType(ss.startControl, TableCellElement);
         if (!startCell?.parent) {
             throw new Error('parent is null');
@@ -4272,6 +4271,7 @@ class TableUtil {
         if (tb.length === 0) {
             tb.remove();
         }
+        ss.clear();
     }
     /**
      * 移除光标所在的当前列
@@ -11193,6 +11193,7 @@ class ParagraphMeasure {
      */
     measureParagraph(p, limitWidth) {
         ElementUtil.fixParagraphContent(p);
+        this.verifyPara(p, limitWidth);
         p.cacheRender = null;
         const paraModels = [];
         let currRenderLine;
@@ -11313,6 +11314,17 @@ class ParagraphMeasure {
         }
         return paraRenders;
     }
+    /**
+     * 校验当前段落属性
+     */
+    verifyPara(p, limitWidth) {
+        if (p.props.indent > 0 && p.props.indent + 20 > limitWidth) {
+            p.props.indent = limitWidth - 20;
+        }
+        if (p.props.hanging > 0 && p.props.hanging + 20 > limitWidth) {
+            p.props.hanging = limitWidth - 20;
+        }
+    }
     /**
      * 获取段落行布局横向坐标起始位置，被段落text-align影响
      */
@@ -17149,6 +17161,10 @@ var ModifyFlag;
 class NodeCore {
     enableClip = true;
     pointEvent = true;
+    allowHitTest = false;
+    hitTest(hitPos, currPos) {
+        return false;
+    }
     get enable() {
         return this._enable;
     }
@@ -17478,6 +17494,9 @@ class NodeItems extends NodeCore {
     eventMap = new WeakMap();
     absoluteItems = false;
     containerPropName;
+    constructor() {
+        super();
+    }
     addChild(control, index = -1) {
         if (this.containerPropName) {
             this[this.containerPropName].addChild(control, index);
@@ -17549,6 +17568,33 @@ class NodeItems extends NodeCore {
         return this.controls.length;
     }
 }
+/**
+ * 子内容采用绝对定位的容器
+ */
+class AbsolutePanel extends NodeItems {
+    constructor() {
+        super();
+        this.absoluteItems = true;
+    }
+    measureOverride(e, availableSize) {
+        this.controls.forEach(item => {
+            item.measure(e, availableSize);
+        });
+        return super.measureOverride(e, availableSize);
+    }
+    arrangeOverride(e, finalSize) {
+        this.controls.forEach(item => {
+            const itemRect = {
+                x: item.x,
+                y: item.y,
+                width: item.desiredSize.width,
+                height: item.desiredSize.height
+            };
+            item.arrange(e, itemRect);
+        });
+        return super.arrangeOverride(e, finalSize);
+    }
+}
 let currentActiveAppContext = null;
 function getCurrentActiveAppContext() {
     return currentActiveAppContext;
@@ -17666,7 +17712,7 @@ function drawBorderline(node, renderCtx) {
     if (!node.border) {
         return;
     }
-    let { x, y, finalRect: { width, height } } = node;
+    let { finalRect: { x, y, width, height } } = node;
     const ctx = renderCtx.ctx;
     ctx.save();
     ctx.fillStyle = node.borderColor;
@@ -18230,7 +18276,7 @@ class NodeEvent {
         };
         mouseleaveRenders.forEach(item => {
             onMouseoutEvent.target = item;
-            invokeEvent(onMouseoutEvent, 'mouseleave', item, false);
+            invokeEvent(onMouseoutEvent, 'mouseout', item, false);
         });
         const onMouseoverEvent = {
             pos: this.appState.pos,
@@ -18396,7 +18442,8 @@ class NodeEvent {
             width: width,
             height: height
         };
-        if (isInsideRectByPosition(currRect, hitPos)) {
+        const hitTest = node.allowHitTest ? node.hitTest(hitPos, currRect) : isInsideRectByPosition(currRect, hitPos);
+        if (hitTest) {
             //有边框和内边距，所以在计算子节点的时候，需要考虑
             const innerPos = {
                 x: currRect.x + node.border + node.padding,
@@ -18558,6 +18605,13 @@ class ViewPaint {
             this.drawHoriLine(x, y, width, textProps.color, 1);
         }
     }
+    drawText2(text, textProps, x, y) {
+        this.ctx.save();
+        this.ctx.fillStyle = textProps.color;
+        this.ctx.font = `${textProps.fontSize}px ${textProps.fontName}`;
+        this.ctx.fillText(text, x, y + textProps.fontSize / 7);
+        this.ctx.restore();
+    }
     fillCircular(x, y, r, color = 'black') {
         this.ctx.save();
         this.ctx.beginPath();
@@ -18572,6 +18626,10 @@ class ViewPaint {
         const textMeasure = this.ctx.measureText(text);
         return { width: textMeasure.width, height: textProps.fontSize };
     }
+    measureText2(text, font) {
+        this.ctx.font = font.fontSize + 'px ' + font.fontName;
+        return this.ctx.measureText(text).width;
+    }
     measureTextUnits(units, textProps) {
         this.ctx.font = textProps.getFont();
         const letterSpace = textProps.letterSpace ?? 0;
@@ -18988,6 +19046,11 @@ class SurfaceView extends NodeItems {
  * 如果有默认宽度限制，而且支持换行显示，则内容高度等于多行累计高度
  */
 class LabelNode extends TextBase {
+    constructor() {
+        super();
+        this.border = 1;
+        this.borderColor = '#000';
+    }
     _textWrapping = 'no';
     get textWrapping() {
         return this._textWrapping;
@@ -18997,34 +19060,54 @@ class LabelNode extends TextBase {
         this._textWrapping = value;
     }
     cacheTextRect;
-    textUnits;
+    //private textUnits!: Array<TextUnits>;
+    lines = [];
     measureOverride(e, availableSize) {
-        const textProps = this.getTextProps();
-        this.textUnits = this.text.split('').map(char => ({ char, actualSize: 0, sourceSize: 0 }));
-        e.render.measureTextUnits(this.textUnits, textProps);
+        this.getTextProps();
+        this.lines = this.getMuiltLines(this.text, e);
+        // this.textUnits = this.text.split('').map<TextUnits>(char => ({char, actualSize: 0, sourceSize: 0}));
+        // e.render.measureTextUnits(this.textUnits, textProps);
         //没有宽度限制，测量横向排列的尺寸大小，此时不需要考虑换行
-        if (Number.isNaN(this._width)) {
-            return {
-                width: this.textUnits.reduce((prev, curr) => {
-                    return prev + curr.sourceSize;
-                }, 0), height: this.fontSize
-            };
-        }
-        if (this._textWrapping === 'no') {
-            return { width: this.getPercentWidth(availableSize.width), height: this.fontSize };
-        }
-        return this.measureTextRect(this.textUnits, {
+        // if (Number.isNaN(this._width)) {
+        //     // return {
+        //     //     width: this.lines[0].textUnits.reduce((prev, curr) => {
+        //     //         return prev + curr.sourceSize
+        //     //     }, 0), height: this.fontSize
+        //     // };
+        //     return this.measureTextRect(this.lines, {
+        //         width: availableSize.width,
+        //         height: this.getPercentHeight(availableSize.height)
+        //     });
+        // }
+        // if (this._textWrapping === 'no') {
+        //     return {width: this.getPercentWidth(availableSize.width), height: this.fontSize};
+        // }
+        return this.measureTextRect(this.lines, {
             width: availableSize.width,
             height: this.getPercentHeight(availableSize.height)
         });
     }
-    arrangeOverride(e, finalSize) {
-        if (!Number.isNaN(this._width) && this._textWrapping === 'wrap') {
-            this.measureTextRect(this.textUnits, {
-                width: finalSize.width,
-                height: finalSize.height
-            });
+    getMuiltLines(text, e) {
+        const lineRects = [];
+        const lines = this.text.split('\r\n');
+        for (let i = 0; i < lines.length; i++) {
+            const units = lines[i].split('').map(char => ({ char, actualSize: 0, sourceSize: 0 }));
+            e.render.measureTextUnits(units, this.getTextProps());
+            lineRects.push({ textUnits: units });
         }
+        return lineRects;
+    }
+    arrangeOverride(e, finalSize) {
+        // if (!Number.isNaN(this._width) && this._textWrapping === 'wrap') {
+        //     this.measureTextRect(this.lines, {
+        //         width: finalSize.width,
+        //         height: finalSize.height
+        //     });
+        // }
+        this.measureTextRect(this.lines, {
+            width: finalSize.width,
+            height: finalSize.height
+        });
         return super.arrangeOverride(e, finalSize);
     }
     getTextProps() {
@@ -19034,54 +19117,56 @@ class LabelNode extends TextBase {
         textProps.color = this.color ?? '#000';
         return textProps;
     }
-    measureTextRect(textUnits, availableSize, final = false) {
-        const sumWidth = textUnits.reduce((prev, curr) => {
-            return curr.sourceSize + prev;
-        }, 0);
+    measureTextRect(lines, availableSize, final = false) {
         //总宽度大于可用宽度，换行计算
         const cacheLines = [];
         const { width: limitWidth, height: limitHeight } = availableSize;
-        let line = { lineUnits: [], x: 0, y: 0, width: 0, height: 0 };
-        cacheLines.push(line);
-        for (let i = 0; i < textUnits.length; i++) {
-            const unit = textUnits[i];
-            //至少每行一个字符
-            if (line.lineUnits.length > 0 && line.width + unit.sourceSize > limitWidth) {
-                line = { lineUnits: [], x: 0, y: 0, width: 0, height: 0 };
-                cacheLines.push(line);
-            }
-            line.lineUnits.push(unit);
-            line.width += unit.sourceSize;
-            line.height = this.fontSize;
+        for (let i = 0; i < lines.length; i++) {
+            const lineText = lines[i];
+            let line = { lineUnits: [], x: 0, y: 0, width: 0, height: 0 };
+            cacheLines.push(line);
+            for (let j = 0; j < lineText.textUnits.length; j++) {
+                const unit = lineText.textUnits[j];
+                //至少每行一个字符
+                if (line.lineUnits.length > 0 && line.width + unit.sourceSize > limitWidth) {
+                    line = { lineUnits: [], x: 0, y: 0, width: 0, height: 0 };
+                    cacheLines.push(line);
+                }
+                line.lineUnits.push(unit);
+                line.width += unit.sourceSize;
+                line.height = this.fontSize;
+            }
         }
         let contentHeight = 0;
+        let maxLineWidth = 0;
         cacheLines.forEach(line => {
             line.y = contentHeight;
             contentHeight += line.height;
+            maxLineWidth = Math.max(line.width, maxLineWidth);
         });
         //期望高度
         let desiredHeight = final ? limitHeight : contentHeight;
         this.cacheTextRect = {
             lines: cacheLines,
-            width: sumWidth,
+            width: maxLineWidth,
             height: contentHeight,
             desiredHeight,
             desiredWidth: limitWidth
         };
         return {
-            width: limitWidth,
+            width: maxLineWidth,
             height: desiredHeight
         };
     }
     render(e) {
-        const textProp = new TextProps();
-        textProp.fontName = this.fontName;
-        textProp.fontSize = this.fontSize;
-        textProp.color = this.color;
-        if (this.textWrapping === 'no' || Number.isNaN(this._width)) {
-            e.render.drawText(this.text, textProp, 0, 0, this.finalRect.width, textProp.fontSize);
-            return;
-        }
+        // const textProp = new TextProps();
+        // textProp.fontName = this.fontName;
+        // textProp.fontSize = this.fontSize;
+        // textProp.color = this.color;
+        // if (this.textWrapping === 'no' || Number.isNaN(this._width)) {
+        //     e.render.drawText(this.text, textProp, 0, 0, this.finalRect.width, textProp.fontSize);
+        //     return;
+        // }
         for (let i = 0; i < this.cacheTextRect.lines.length; i++) {
             const line = this.cacheTextRect.lines[i];
             this.drawLine(e, line);
@@ -19097,7 +19182,7 @@ class LabelNode extends TextBase {
         render.tran(() => {
             const textProps = this.getTextProps();
             render.ctx.font = textProps.getFont();
-            render.drawText(line.lineUnits.join(''), textProps, 0, line.y, line.width, line.height);
+            render.drawText(line.lineUnits.map(item => item.char).join(''), textProps, 0, line.y, line.width, line.height);
         });
     }
 }
@@ -19347,8 +19432,8 @@ class ScrollView extends NodeItems {
         });
         this.addEventListener('wheel', evt => {
             const { deltaY, deltaX } = evt;
-            this.horBar.updateScrollByCurrent(deltaX / 10, deltaY / 10);
-            this.verBar.updateScrollByCurrent(deltaX / 10, deltaY / 10);
+            this.horBar.updateScrollByCurrent(deltaX, deltaY);
+            this.verBar.updateScrollByCurrent(deltaX, deltaY);
         });
     }
     scrollTo(x, y) {
@@ -20067,7 +20152,7 @@ function pointInPoly(pt, poly) {
  * 1.在单页模式下，文档最小宽度为单个文档宽度+合适的外边距
  * 2.在多页模式下，文档最小宽度为单个文档宽度+合适的外边距
  */
-class CanvasTextEditor extends NodeItems {
+class CanvasTextEditor extends AbsolutePanel {
     editCanvas;
     editInput;
     contentCtx;
@@ -20994,6 +21079,13 @@ class CanvasTextEditor extends NodeItems {
         const win = new Window();
         win.width = 1000;
         win.height = 800;
+        //win.content.addChild(timelineScrollbar)
+        const rule2 = new RuleControl(this.docCtx);
+        this.rule = rule2;
+        rule2.width = 700;
+        rule2.height = 30;
+        rule2.x = 20;
+        rule2.y = 500;
         const surface = new SurfaceView(this.editCanvas, this.editInput);
         this.surfaceView = surface;
         surface.width = 1000;
@@ -21005,12 +21097,6 @@ class CanvasTextEditor extends NodeItems {
             this.resetViewer();
         });
         surface.addChild(scrollView);
-        const rule2 = new RuleControl(this.docCtx);
-        this.rule = rule2;
-        rule2.width = 700;
-        rule2.height = 30;
-        rule2.x = 20;
-        rule2.y = 500;
         surface.addChild(rule2);
         //surface.addChild(win);
         surface.start();
@@ -21085,24 +21171,6 @@ class CanvasTextEditor extends NodeItems {
             appCtx.root.setInputPosition(caretPos);
         }
     }
-    measureOverride(e, availableSize) {
-        this.controls.forEach(item => {
-            item.measure(e, availableSize);
-        });
-        return super.measureOverride(e, availableSize);
-    }
-    arrangeOverride(e, finalSize) {
-        this.controls.forEach(item => {
-            const itemRect = {
-                x: item.x,
-                y: item.y,
-                width: item.desiredSize.width,
-                height: item.desiredSize.height
-            };
-            item.arrange(e, itemRect);
-        });
-        return super.arrangeOverride(e, finalSize);
-    }
 }
 
 /**