@hailin-zheng/editor-core 2.0.7 → 2.0.8

package/index.js

@@ -1539,6 +1539,8 @@ class ViewOptions {
     //整页模式，不分页
     _fullPageView = false;
     ruleHeight = 30;
+    //是否打印页眉页脚线
+    printHeaderFooterLine = false;
     get fullPageView() {
         return this._fullPageView;
     }
@@ -3701,6 +3703,21 @@ class DataElementRenderObject extends InlineGroupRenderObject {
     exportHTML(event) {
         const node = super.exportHTML(event);
         exportDecoratorHTML(event, this);
+        if (this.element.props.underline) {
+            const { x, y } = event.relativePagePos;
+            event.highlights.push({
+                sel: 'path',
+                data: {
+                    ns: 'http://www.w3.org/2000/svg',
+                    attrs: {
+                        d: `M${x} ${y + this.rect.height} L${x + this.rect.width} ${y + this.rect.height}`,
+                        stroke: '#000',
+                        fill: 'none',
+                        'stroke-width': 1
+                    }
+                }
+            });
+        }
         return node;
     }
     /**
@@ -3975,7 +3992,7 @@ class DocumentBodyRenderObject extends MuiltBlockLineRenderObject {
         return cloneRender;
     }
     exportHTML(event) {
-        return {
+        const t = {
             sel: "g",
             data: {
                 ns: "http://www.w3.org/2000/svg",
@@ -3984,6 +4001,10 @@ class DocumentBodyRenderObject extends MuiltBlockLineRenderObject {
                 }
             }
         };
+        if (this.element.disableClick && event.mode === 'view') {
+            t.data.attrs['opacity'] = 0.5;
+        }
+        return t;
     }
 }
 class DocumentBodyFactory extends ElementFactory {
@@ -4062,15 +4083,25 @@ class DocumentFooterRenderObject extends BlockContainerRenderObject {
         return cloneRender;
     }
     exportHTML(event) {
-        return {
-            sel: "g",
-            data: {
-                ns: "http://www.w3.org/2000/svg",
-                attrs: {
-                    transform: `translate(${this.rect.x},${this.rect.y})`
-                }
-            }
-        };
+        const t = super.exportHTML(event);
+        if (this.element.disableClick && event.mode === 'view') {
+            t.data.attrs.opacity = 0.5;
+        }
+        if (event.options.printHeaderFooterLine) {
+            t.children = [{
+                    sel: 'path',
+                    data: {
+                        ns: "http://www.w3.org/2000/svg",
+                        attrs: {
+                            d: `M${0} ${0} h${this.rect.width} `,
+                            stroke: '#000',
+                            'stroke-width': "1",
+                            fill: 'none',
+                        }
+                    }
+                }];
+        }
+        return t;
     }
 }
 class DocumentFooterFactory extends ElementFactory {
@@ -4159,7 +4190,7 @@ class DocumentHeaderRenderObject extends BlockContainerRenderObject {
         const isHeaderEmpty = ElementUtil.checkEmptyRenderContent(this);
         let headerLine;
         //存在输入内容时，绘制页眉-页体分割线
-        if (!isHeaderEmpty || !this.element.disableClick) {
+        if (!isHeaderEmpty || !this.element.disableClick || event.mode === 'print') {
             headerLine = {
                 sel: 'path',
                 data: {
@@ -4167,7 +4198,7 @@ class DocumentHeaderRenderObject extends BlockContainerRenderObject {
                     attrs: {
                         d: `M${0} ${this.rect.height} L${this.rect.width} ${this.rect.height}`,
                         stroke: '#000',
-                        'stroke-width': '0.5',
+                        'stroke-width': '1',
                         fill: 'none',
                         x: 0,
                         y: this.rect.height,
@@ -4185,6 +4216,9 @@ class DocumentHeaderRenderObject extends BlockContainerRenderObject {
             },
             children: []
         };
+        if (this.element.disableClick && event.mode === 'view') {
+            t.data.attrs.opacity = 0.5;
+        }
         if (headerLine) {
             t.children = [headerLine];
         }
@@ -4383,7 +4417,7 @@ class TableCellRenderObject extends InlineMuiltBlockLineRenderObject {
         const t = super.exportHTML(event);
         const counter = event.getCounter('cell');
         const clipId = `CP_${counter}`;
-        t.children = [...CommonUtil.toArray(event.getChildNodes(this)), this.createClipPath(clipId)];
+        t.children = [...CommonUtil.toArray(event.getChildNodes(this)), ElementUtil.createClipPath(clipId, this.rect.width, this.rect.height)];
         if (this.element.props.backgroundColor) {
             //t.data.attrs.fill = this.element.props.backgroundColor;
             t.children.splice(0, 0, this.createBgRect());
@@ -4409,29 +4443,6 @@ class TableCellRenderObject extends InlineMuiltBlockLineRenderObject {
         }
         return null;
     }
-    createClipPath(id) {
-        return {
-            sel: 'clipPath',
-            data: {
-                ns: 'http://www.w3.org/2000/svg',
-                attrs: {
-                    id
-                }
-            },
-            children: [
-                {
-                    sel: 'rect',
-                    data: {
-                        ns: 'http://www.w3.org/2000/svg',
-                        attrs: {
-                            width: this.rect.width,
-                            height: this.rect.height
-                        }
-                    }
-                }
-            ]
-        };
-    }
 }
 class TableCellFactory extends ElementFactory {
     match(type) {
@@ -4489,7 +4500,7 @@ class TableRowElement extends BlockContainerElement {
                 }
                 break;
             }
-            //cell.modifyFlag = ModifyFlag.Modify;
+            cell.modifyFlag = ModifyFlag$1.Modify;
         }
     }
     createRenderObject() {
@@ -5816,7 +5827,7 @@ class TableUtil {
             }
         }
         //如果合并的单元格都是空段落，则不合并内容
-        if (!cellContents.every((item) => (item instanceof ParagraphElement && item.length === 1))) {
+        if (!cellContents.every((item) => (item instanceof ParagraphElement && item.length <= 1))) {
             for (let i = 0; i < cellContents.length; i++) {
                 startCell.addChild(cellContents[i]);
             }
@@ -8071,7 +8082,7 @@ class ElementUtil {
     static getRecursionPrevSiblingElement(currElement, inPara = false, forCursor = false, viewOptions) {
         const parent = currElement?.parent;
         //删除留痕块的measureRender在不显示留痕模式下，不生成render
-        if (!currElement || !parent || (!currElement.cacheRender && !(currElement instanceof TrackRunElement))) {
+        if (!currElement || !parent || (!currElement.paintRenders.length && !(currElement instanceof TrackRunElement))) {
             return null;
         }
         //如果当前数据元不可编辑，则直接跳过
@@ -8177,7 +8188,7 @@ class ElementUtil {
      */
     static getRecursionNextSiblingElement(currElement, inPara = false, forCursor = false, viewOptions) {
         const parent = currElement?.parent;
-        if (!currElement || !parent || !currElement.cacheRender) {
+        if (!currElement || !parent || !currElement.paintRenders.length) {
             return null;
         }
         //如果当前数据元不可编辑，则直接跳过
@@ -8606,6 +8617,31 @@ class ElementUtil {
             y: localY
         };
     }
+    static createClipPath(id, width, height, x = 0, y = 0) {
+        return {
+            sel: 'clipPath',
+            data: {
+                ns: 'http://www.w3.org/2000/svg',
+                attrs: {
+                    id
+                }
+            },
+            children: [
+                {
+                    sel: 'rect',
+                    data: {
+                        ns: 'http://www.w3.org/2000/svg',
+                        attrs: {
+                            width,
+                            height,
+                            x,
+                            y
+                        }
+                    }
+                }
+            ]
+        };
+    }
 }
 
 class RenderContext {
@@ -11531,6 +11567,10 @@ class DocumentBodyPartRenderObject extends MuiltBlockLineRenderObject {
         }
         return cloneRender;
     }
+    exportHTML(event) {
+        const t = super.exportHTML(event);
+        return t;
+    }
 }
 class DocumentBodyPartFactory extends ElementFactory {
     match(type) {
@@ -25423,51 +25463,62 @@ class DocumentPrintOffscreenBase {
     /**
      * 续打
      */
-    async printForContinuation(data, ranges = null, options) {
-        const sub = this.beforeRenderEvent.subscribe((event) => {
-            const { index, renderCtx, docRender } = event;
-            if (index === options.startDocIndex) {
-                const bodyRender = docRender.getChild(1);
-                let x = 0, y = options.startY, width = bodyRender.rect.width, height = bodyRender.rect.height - (options.startY - bodyRender.rect.y);
-                if (options.startDocIndex === options.endDocIndex) {
-                    height = options.endY - options.startY;
-                }
-                renderCtx.mainContext.clip(x, y, width, height);
-            }
-        });
+    async printForContinuation(data, options) {
+        // const sub = this.beforeRenderEvent.subscribe((event) => {
+        //     const {index, renderCtx, docRender, pageSvgVNode} = event;
+        //     if (index === options.startDocIndex) {
+        //         const bodyRender = docRender.getChild(1);
+        //         let x = 0, y = options.startY, width = bodyRender.rect.width,
+        //             height = bodyRender.rect.height - (options.startY - bodyRender.rect.y);
+        //         if (options.startDocIndex === options.endDocIndex) {
+        //             height = options.endY - options.startY;
+        //         }
+        //         renderCtx.mainContext.clip(x, y, width, height);
+        //     }
+        // });
         this.afterRenderEvent.subscribe((event) => {
-            const { index, renderCtx, docRender } = event;
-            if (options.startDocIndex !== options.endDocIndex && index === options.endDocIndex) {
+            const { index, renderCtx, docRender, pageSvgVNode } = event;
+            if (index === options.startDocIndex) {
                 const bodyRender = docRender.getChild(1);
-                const height = bodyRender.rect.height - (options.endY - bodyRender.rect.y);
-                renderCtx.contentContext.clearRect(bodyRender.rect.x, options.endY, bodyRender.rect.width, height);
-            }
+                let x = bodyRender.rect.x, y = options.startY, width = bodyRender.rect.width, height = bodyRender.rect.height - (options.startY - bodyRender.rect.y);
+                // if (options.startDocIndex === options.endDocIndex) {
+                //     height = options.endY - options.startY;
+                // }
+                const pageClip = ElementUtil.createClipPath('page-clip-' + index, width, height, x, y);
+                //pageSvgVNode.children?.push(pageClip)
+                pageSvgVNode.children?.push(pageClip);
+                pageSvgVNode.data.attrs['clip-path'] = `url(#${'page-clip-' + index})`;
+            }
+            // if (options.startDocIndex !== options.endDocIndex && index === options.endDocIndex) {
+            //     const bodyRender = docRender.getChild(1);
+            //     const height = bodyRender.rect.height - (options.endY - bodyRender.rect.y);
+            //     renderCtx.contentContext.clearRect(bodyRender.rect.x, options.endY, bodyRender.rect.width, height);
+            // }
         });
         await this.prepare(data);
-        const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
+        const canvasNodes = this.getSvgNodes(this.documentPaint.docPages, null);
         if (!canvasNodes.length) {
             console.warn('无可打印页');
             return;
         }
         const docProps = this.docCtx.document.props;
         printNodes(canvasNodes, { ...docProps });
-        sub.unsubscribe();
-    }
-    /**
-     * 获取绘制的图片，格式为Base64编码
-     */
-    async getImagesContent(data, ranges = null) {
-        await this.prepare(data);
-        const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
-        if (!canvasNodes.length) {
-            console.warn('无可导出页');
-            return [];
-        }
-        return canvasNodes.map(node => node.toDataURL());
     }
+    // /**
+    //  * 获取绘制的图片，格式为Base64编码
+    //  */
+    // async getImagesContent(data: any | DocumentElement, ranges: Array<number> | null = null): Promise<Array<string>> {
+    //     await this.prepare(data);
+    //     const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
+    //     if (!canvasNodes.length) {
+    //         console.warn('无可导出页')
+    //         return [];
+    //     }
+    //     return canvasNodes.map(node => node.toDataURL());
+    // }
     async getPrintNodes(data, ranges = null) {
         await this.prepare(data);
-        const canvasNodes = this.getCanvasNodes(this.documentPaint.docPages, ranges);
+        const canvasNodes = this.getSvgNodes(this.documentPaint.docPages, ranges);
         return canvasNodes;
     }
     /**
@@ -25486,42 +25537,53 @@ class DocumentPrintOffscreenBase {
             height
         });
     }
-    getCanvasNodes(printPages, printRanges = null) {
-        const { scale, docPageSettings: { width, height } } = this.viewOptions;
-        const canvasList = [];
-        for (let i = 0; i < printPages.length; i++) {
-            if (printRanges && printRanges.indexOf(i) === -1) {
-                continue;
-            }
-            const { canvas: canvasNode, ctx } = this.createCanvas(width, height);
-            const renderCtx = this.createRenderCtx(ctx, this.viewOptions, this.docCtx);
-            renderCtx.init({ width, height, scale });
-            renderCtx.drawMode = 'print';
-            const doc = printPages[i];
-            const tmp = ElementUtil.cloneRect(doc.rect);
-            doc.rect.x = 0;
-            doc.rect.y = 0;
-            this.beforeRenderEvent.next({ index: i, renderCtx, docRender: doc });
-            ElementPaint.drawPage(renderCtx, this.docCtx, doc, { x: 0, y: 0 });
-            this.afterRenderEvent.next({ index: i, renderCtx, docRender: doc });
-            renderCtx.overlaysContext.clear();
-            renderCtx.mainContext.fillRect(0, 0, width, height, 'white');
-            renderCtx.commit({ width, height, scale }, { x: 0, y: 0 });
-            doc.rect = tmp;
-            canvasList.push(canvasNode);
-        }
-        return canvasList;
-    }
+    // getCanvasNodes(printPages: Array<DocumentRenderObject>, printRanges: Array<number> | null = null): Array<HTMLCanvasElement> {
+    //     const {scale, docPageSettings: {width, height}} = this.viewOptions;
+    //     const canvasList: Array<HTMLCanvasElement> = [];
+    //     for (let i = 0; i < printPages.length; i++) {
+    //         if (printRanges && printRanges.indexOf(i) === -1) {
+    //             continue;
+    //         }
+    //         const {canvas: canvasNode, ctx} = this.createCanvas(width, height);
+    //         const renderCtx = this.createRenderCtx(ctx, this.viewOptions, this.docCtx);
+    //         renderCtx.init({width, height, scale});
+    //         renderCtx.drawMode = 'print';
+    //         const doc = printPages[i];
+    //         const tmp = ElementUtil.cloneRect(doc.rect);
+    //         doc.rect.x = 0;
+    //         doc.rect.y = 0;
+    //         this.beforeRenderEvent.next({index: i, renderCtx, docRender: doc})
+    //         ElementPaint.drawPage(renderCtx, this.docCtx, doc, {x: 0, y: 0});
+    //         this.afterRenderEvent.next({index: i, renderCtx, docRender: doc})
+    //         renderCtx.overlaysContext.clear();
+    //         renderCtx.mainContext.fillRect(0, 0, width, height, 'white');
+    //         renderCtx.commit({width, height, scale}, {x: 0, y: 0});
+    //         doc.rect = tmp;
+    //         canvasList.push(canvasNode);
+    //     }
+    //     return canvasList;
+    // }
     getSvgNodes(docRenders, printRanges = null) {
         const docSvgHelper = new DocumentSvg(this.viewOptions, new Map(), this.renderCtx); //.getHTMLVNode(docRenders) as Array<EditorVNodeObject>;
         docSvgHelper.mode = 'print';
-        const pageSvgVNodes = docRenders.filter((item, index) => !printRanges || printRanges.indexOf(index) >= 0).map(item => docSvgHelper.getPageSvgVNode(item));
         const patch = init([
             modules.class,
             modules.props,
             modules.attributes,
             modules.style
         ]);
+        // const pageSvgVNodes = docRenders.filter((item, index) =>
+        //     !printRanges || printRanges.indexOf(index) >= 0)
+        //     .map(item => docSvgHelper.getPageSvgVNode(item));
+        const pageSvgVNodes = [];
+        docRenders.forEach((item, index) => {
+            if (!printRanges || printRanges.indexOf(index) >= 0) {
+                //this.beforeRenderEvent.next({index, renderCtx: this.renderCtx, docRender: item})
+                const pageSvg = docSvgHelper.getPageSvgVNode(item);
+                this.afterRenderEvent.next({ index, renderCtx: this.renderCtx, docRender: item, pageSvgVNode: pageSvg });
+                pageSvgVNodes.push(pageSvg);
+            }
+        });
         const domNodes = pageSvgVNodes.map(item => patch(item)); //.map(item => docParser.parseFromString(item, 'text/html').firstChild) as Array<HTMLElement>;
         return domNodes;
     }
@@ -25754,7 +25816,7 @@ class EditorCalendarVNode {
                                         on: {
                                             change: (event) => {
                                                 if (moment(event.target.value, 'HH:mm:ss').isValid()) {
-                                                    this.selectedTime = event.target.value;
+                                                    this.selectedTime.value = event.target.value;
                                                 }
                                                 else {
                                                     event.target.value = this.currTime.value;
@@ -26821,8 +26883,8 @@ class DocEditor {
      */
     getCurrentDataElement() {
         const selectionState = this.documentSelection.selectionState;
-        const { startControl, startOffset } = selectionState;
-        if (startControl) {
+        const { startControl, startOffset, collapsed } = selectionState;
+        if (startControl && collapsed) {
             if (!ElementUtil.verifyHitable(startControl)) {
                 return null;
             }
@@ -27226,7 +27288,7 @@ class DocEditor {
             const docRender = ElementUtil.getParentRender(renderObj, DocumentRenderObject);
             const index = docRender.getIndex();
             const cursorPos = DocumentCursor.getElementCursorPos(ele, 0, region, index);
-            this.selectionState.surround(element);
+            this.selectionState.resetRange(element, 0);
             if (cursorPos.rect.y - this.viewOptions.pageOffset.y > 0 && cursorPos.rect.y - this.viewOptions.pageOffset.y < this.viewOptions.viewSettings.height) {
                 return;
             }