@hailin-zheng/editor-core 1.0.60 → 1.0.62

package/README.md

@@ -79,7 +79,7 @@
 * <a href="#setCellBackground">setCellBackground 表格背景颜色</a>
 
 <h3 id="summary"><code>简介</code></h3>
-编辑器 基于 ts+canvas。运行环境新版浏览器。
+编辑器 基于 ts+canvas。运行环境现代主流浏览器(chrome等)。
 
 <h3 id="install"><code>安装</code></h3>
 执行 npm i editor-core，安装编辑器。从 “editor-core” 可以引入编辑器类editor-core、loadDoc等导出的属性方法。
@@ -1635,7 +1635,96 @@ const getSelectionState = (): SelectionState => getEditor().selectionState;
 ```
 <!-- /div -->
 
-
+<h3>如果当前性别为男性，隐藏月经史数据元</h3>
+```js
+ //获取文档上下文
+        const docEleCtx = this.docCtx.getCtx(this.docCtx.document);
+        //获取年龄数据元
+        const dataEle = docEleCtx.getControlById('1493477712134672386') as DataElementText;
+        //获取要隐藏的数据组
+        const dataGroup = docEleCtx.ctx.treeFind((item) => item instanceof DataElementGroupElement) as DataElementGroupElement;
+        //侦听数据元更改时间
+        dataEle.onChangeSubject.subscribe((e) => {
+            //在文档重新排版、绘制前，获取最终的指定节点的内容
+            const beforeRefreshSub = this.onBeforeRefreshDocument.subscribe((e2) => {
+                console.log('内容发生改变，隐藏数据组');
+                //获取年龄数据元输入的值
+                const age = Number.parseInt(dataEle.getValue());
+                //年龄大于20，隐藏数据元
+                dataGroup.props.hidden = age > 20;
+                //取消订阅事件
+                beforeRefreshSub.unsubscribe();
+            });
+
+        });
+```
+<h3>插入新段落</h3>
+说明：在当前段落后面插入新段落,段落的内容为当前时间
+
+```typescript
+        const {startControl} = this.selectionState;
+        if (!startControl) {
+            return;
+        }
+        //1.获取当前段落
+        const currentParagraph = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
+        //2.创建新段落对象
+        const newPara = ParagraphElement.createElement();
+        //3.创建文本对象
+        const newText = new TextGroupElement();
+        newText.text = '当前时间为' + new Date();
+        newText.props.fontName = '楷体';
+        newText.props.fontSize = 18;
+        newText.props.color = '#5b8c00';
+        //4.将文本对象追加到新段落中
+        newPara.addChild(newText);
+        //5.在当前段落后面追加新段落
+        currentParagraph.parent.addChild(newPara, currentParagraph.getIndex() + 1);
+        //6.定位光标到新段落末尾处
+        this.selectionState.resetRange(newText,-1);
+```
+<h3>插入文本数据元</h3>
+说明：在当前位置插入文本数据元
+```typescript
+const {startControl} = this.selectionState;
+        if (!startControl) {
+            return;
+        }
+        const newDataTextElement=new DataElementText();
+        newDataTextElement.props.nullText='请输入内容';
+        newDataTextElement.props.nullTextProps=new TextProps();
+        newDataTextElement.props.nullTextProps.fontSize=16;
+        newDataTextElement.props.nullTextProps.fontName='宋体';
+        newDataTextElement.props.nullTextProps.color='#ffc53d';
+        newDataTextElement.props.valueTextProps=new TextProps();
+        newDataTextElement.props.valueTextProps.fontSize=18;
+        newDataTextElement.props.valueTextProps.fontName='楷体';
+        newDataTextElement.props.valueTextProps.color='#096dd9';
+        this.insertNewElement(newDataTextElement);
+```
+<h3>修改页眉</h3>
+说明：可以批量修改所有模板的页眉
+```typescript
+        //1.获取页眉对象
+        const headerElement=this.docCtx.document.headerElement;
+
+        //2.创建新段落对象
+        const newPara = ParagraphElement.createElement();
+        //3.段落文本居中显示
+        newPara.props.textAlign='center';
+        //4.创建文本对象
+        const newText = new TextGroupElement();
+        newText.text = 'XXX人民医院病历文书';
+        newText.props.fontName = '楷体';
+        newText.props.fontSize = 28;
+        newText.props.color = '#000';
+        //5.将文本对象追加到新段落中
+        newPara.addChild(newText);
+
+        //6.清除页眉内容，并添加新内容
+        headerElement.clearItems();
+        headerElement.addChild(newPara);
+```
 <!-- 
 编辑页脚页眉
 双击页眉，body，页脚 开启是否可编辑，默认body 是可编辑；

package/index-cjs.js

@@ -1425,6 +1425,7 @@ class ViewOptions {
     viewBackcolor = 'rgb(230,230,230)';
     paraSymbolColor = 'rgb(128,128,128)';
     dataGroupColor = 'rgb(0,80,179)';
+    defaultLineHeight = 1.3;
     //新增-留痕块文本颜色
     trackInsColor = '#ff4d4f';
     //删除-留痕块文本颜色
@@ -1471,6 +1472,8 @@ class ViewOptions {
     pageNumOffset = 0;
     //页排版模式：单页模式、多页模式、适应页宽模式
     pageLayoutMode = 'singlePage';
+    //默认tab缩进的量
+    defaultIndent = 20;
     //内容区宽度，受审阅窗口宽度影响
     get contentWidth() {
         if (this.showReviewWindow) {
@@ -1733,6 +1736,12 @@ class TextProps extends INotifyPropertyChanged {
             && this.border === props.border;
     }
 }
+exports.ParagraphNumberType = void 0;
+(function (ParagraphNumberType) {
+    ParagraphNumberType[ParagraphNumberType["none"] = -1] = "none";
+    ParagraphNumberType[ParagraphNumberType["ul"] = 0] = "ul";
+    ParagraphNumberType[ParagraphNumberType["ol"] = 1] = "ol";
+})(exports.ParagraphNumberType || (exports.ParagraphNumberType = {}));
 class ParagraphProps extends INotifyPropertyChanged {
     //段落默认的文本属性
     //textProps!: TextProps;
@@ -1740,7 +1749,7 @@ class ParagraphProps extends INotifyPropertyChanged {
     hanging = 0;
     lineHeight = 1.3;
     textAlign = 'left';
-    numberType = -1;
+    numberType = exports.ParagraphNumberType.none;
     pageBreak = false;
     clone(dest = null) {
         const clone = dest ?? new ParagraphProps();
@@ -1762,13 +1771,13 @@ class ParagraphProps extends INotifyPropertyChanged {
         if (this.hanging) {
             props["hanging"] = this.hanging;
         }
-        if (this.lineHeight && this.lineHeight !== 1.3) {
+        if (this.lineHeight && this.lineHeight !== viewOptions.defaultLineHeight) {
             props["lineHeight"] = this.lineHeight;
         }
         if (this.textAlign && this.textAlign !== "left") {
             props["textAlign"] = this.textAlign;
         }
-        if (this.numberType !== -1) {
+        if (this.numberType !== exports.ParagraphNumberType.none) {
             props["numberType"] = this.numberType;
         }
         if (this.pageBreak) {
@@ -2378,6 +2387,13 @@ class ValidateProps {
     id;
     title;
     msg;
+    clone(dest) {
+        const clone = dest ?? new ValidateProps();
+        clone.id = this.id;
+        clone.title = this.title;
+        clone.msg = this.msg;
+        return clone;
+    }
 }
 class DataElementGroupProps {
     id;
@@ -3300,6 +3316,19 @@ class ParagraphElement extends BlockContentElement {
                 }
             }
         }, true);
+        this.addEvent('ElementKeyDown', evt => {
+            //当前存在缩进，点击tab
+            if (evt.sourceEvent.keyCode === 9) {
+                const { startControl, startOffset } = evt.selectionState;
+                if (startOffset === 0 && startControl === this.getChild(0)) {
+                    const defaultIndent = evt.ctx.viewOptions.defaultIndent;
+                    let increaseValue = evt.sourceEvent.shiftKey ? -defaultIndent : defaultIndent;
+                    this.props.indent += increaseValue;
+                    evt.isCancel = true;
+                    evt.sourceEvent.preventDefault();
+                }
+            }
+        }, true);
     }
     /**
      * 设置样式
@@ -3347,25 +3376,39 @@ class ParagraphRenderObject extends MuiltBlockLineRenderObject {
      */
     drawProjectNumber(ctx, viewOptions) {
         const paraElement = this.element;
-        if (paraElement.props.numberType >= 0) {
+        if (paraElement.props.numberType !== exports.ParagraphNumberType.none) {
             if (paraElement.paintRenders.indexOf(this) > 0) {
                 return;
             }
             const firstLine = this.getChild(0);
-            if (!firstLine) {
-                debugger;
-            }
             const firstInline = firstLine.getChild(0);
-            if (!firstInline) {
-                debugger;
-            }
             const firstInlinePaintPos = ElementUtil.getRenderAbsolutePaintPos(firstInline, {
                 x: 0,
                 y: -viewOptions.translateY
             });
-            const numberSymbolY = firstInlinePaintPos.y + Math.ceil(firstInline.rect.height / 2);
-            //ctx.contentContext.drawText(str, textProps, firstInlinePaintPos.x - paraElement.paraProps.indent, numberSymbolY, 14, 14);
-            ctx.contentContext.fillCircular(firstInlinePaintPos.x - paraElement.props.indent + 2, numberSymbolY, 4);
+            if (paraElement.props.numberType === exports.ParagraphNumberType.ul) {
+                const numberSymbolY = firstInlinePaintPos.y + Math.ceil(firstInline.rect.height / 2);
+                ctx.contentContext.fillCircular(firstInlinePaintPos.x - paraElement.props.indent + 2, numberSymbolY, 4);
+            }
+            else if (paraElement.props.numberType === exports.ParagraphNumberType.ol) {
+                const parent = paraElement.parent;
+                let i = paraElement.getIndex() - 1;
+                for (; i >= 0; i--) {
+                    if (parent.getChild(i) instanceof ParagraphElement) {
+                        //紧挨上面的段落
+                        const prevSiblingPara = parent.getChild(i);
+                        if (prevSiblingPara.props.numberType !== paraElement.props.numberType || prevSiblingPara.props.indent !== paraElement.props.indent) {
+                            break;
+                        }
+                    }
+                }
+                const olText = (paraElement.getIndex() - i) + '.';
+                const textProps = new TextProps();
+                textProps.color = '#000';
+                textProps.fontSize = firstInline.rect.height - 4;
+                textProps.fontName = '宋体';
+                ctx.contentContext.drawText(olText, textProps, firstInlinePaintPos.x - paraElement.props.indent + 2, firstInlinePaintPos.y + 2, 40, textProps.fontSize);
+            }
         }
     }
     clone() {
@@ -3393,7 +3436,7 @@ class ParagraphFactory extends ElementFactory {
         paraElement.props.hanging = props?.hanging ?? 0;
         paraElement.props.textAlign = props?.textAlign ?? 'left';
         paraElement.props.numberType = props?.numberType ?? -1;
-        paraElement.props.lineHeight = props?.lineHeight ?? 1.3;
+        paraElement.props.lineHeight = props?.lineHeight ?? this.options.defaultLineHeight;
         paraElement.props.pageBreak = props?.pageBreak ?? false;
         return paraElement;
     }
@@ -7044,7 +7087,14 @@ class CommContentElement extends CommContentBaseElement {
         };
     }
     clone(data) {
-        throw new Error('不支持');
+        const clone = new CommContentElement();
+        this.props.clone(clone.props);
+        if (data) {
+            for (let i = 0; i < this.length; i++) {
+                clone.addChild(this.getChild(i).clone(true));
+            }
+        }
+        return clone;
     }
 }
 class CommContentRenderObject extends CommContentBaseRenderObject {
@@ -7060,7 +7110,10 @@ class CommContentRenderObject extends CommContentBaseRenderObject {
         });
         const commMarkLinePos = ElementUtil.getParaLinePos(this.commMarkRender.render, commMarkPos);
         commMarkPos.y = commMarkLinePos.y + 2;
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender, { x: 0, y: -e.docCtx.viewOptions.translateY });
+        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender, {
+            x: 0,
+            y: -e.docCtx.viewOptions.translateY
+        });
         const marginLeft = commMarkPos.x - docRenderPos.x - docRender.padding.left;
         const marginRight = e.docCtx.viewOptions.docPageSettings.width - marginLeft - docRender.padding.right * 2;
         e.render.overlaysContext.drawDashLine([commMarkPos, {
@@ -7257,7 +7310,14 @@ class ValidateElement extends CommContentBaseElement {
         return null;
     }
     clone(data) {
-        throw new Error("Method not implemented.");
+        const clone = new ValidateElement();
+        this.props.clone(clone.props);
+        if (data) {
+            for (let i = 0; i < this.length; i++) {
+                clone.addChild(this.getChild(i).clone(true));
+            }
+        }
+        return clone;
     }
     setContent(content) {
         this.clearItems();
@@ -10074,7 +10134,7 @@ class ElementMeasure {
             const innerLineRect = innerLineRects[i];
             innerLineRect.rect.x = this.getParaLineRectStartX(innerLineRects.length, i, paragraph, render, innerLineRect);
             //限制最大行高
-            const maxLineHeight = Math.floor(14 * 1.3);
+            const maxLineHeight = paragraph.props.lineHeight !== this.options.defaultLineHeight ? 100 : Math.floor(14 * 2);
             //fillLineHeight填充行高
             let fillLineHeight = Math.ceil(innerLineRect.rect.height * (paragraph.props.lineHeight - 1));
             fillLineHeight = fillLineHeight > maxLineHeight ? maxLineHeight : fillLineHeight;
@@ -11665,63 +11725,6 @@ class DocumentPaint {
     }
 }
 
-/**
- * 段落行
- */
-class ParaLineElement extends LeafElement {
-    constructor() {
-        super('p-line');
-        this.props = new ParaLineProps();
-    }
-    clone(data) {
-        const clone = new ParaLineElement();
-        this.props.clone(clone.props);
-        return clone;
-    }
-    createRenderObject(options, renderCtx) {
-        const render = new ParaLineRenderObject(this);
-        render.rect.width = 9999;
-        return render;
-    }
-    serialize(viewOptions) {
-        return {
-            type: this.type,
-            props: {
-                ...this.props
-            }
-        };
-    }
-}
-class ParaLineRenderObject extends LeafRenderObject {
-    clone() {
-        const clone = new ParaLineRenderObject(this.element);
-        clone.rect = ElementUtil.cloneRect(this.rect);
-        return clone;
-    }
-    render(e) {
-        const { render, position } = e;
-        render.contentContext.drawHoriLine(position.x, position.y, this.parent.rect.width, 'black', 1);
-    }
-}
-class ParaLineElementFactory extends ElementFactory {
-    createElement(data, renderCtx) {
-        const ele = new ParaLineElement();
-        ele.props.lineType = data.props?.lineType ?? 'solid';
-        return ele;
-    }
-    match(type) {
-        return type === 'p-line';
-    }
-}
-class ParaLineProps {
-    lineType = 'solid';
-    clone(dest) {
-        const clone = dest ?? new ParaLineProps();
-        clone.lineType = this.lineType;
-        return clone;
-    }
-}
-
 class ElementReader {
     docCtx;
     renderCtx;
@@ -11763,7 +11766,6 @@ class ElementReader {
         this.addFactory(RunElementFactory);
         this.addFactory(DataElementGroupFactory);
         this.addFactory(DocumentBodyPartFactory);
-        this.addFactory(ParaLineElementFactory);
         // this.registerReadFunc<TrackRunProps>('ins-run', (data) => {
         //     const props = new TrackRunProps(data.type);
         //     props.userId = data.userId;
@@ -14443,12 +14445,12 @@ class DocumentChange {
         }
         const para = ElementUtil.getParentByType(startControl, ParagraphElement);
         const format = {};
-        if (para.props.numberType >= 0) {
-            format.numberType = -1;
+        if (para.props.numberType !== exports.ParagraphNumberType.none) {
+            format.numberType = exports.ParagraphNumberType.none;
             format.indent = 0;
         }
         else {
-            format.numberType = 0;
+            format.numberType = exports.ParagraphNumberType.ul;
             format.indent = 15;
         }
         para.setFormat(format);
@@ -16667,27 +16669,6 @@ class CanvasTextEditor {
         }
         this.flushToSchedule();
     }
-    test2() {
-        //获取文档上下文
-        const docEleCtx = this.docCtx.getCtx(this.docCtx.document);
-        //获取年龄数据元
-        const dataEle = docEleCtx.getControlById('1493477712134672386');
-        //获取要隐藏的数据组
-        const dataGroup = docEleCtx.ctx.treeFind((item) => item instanceof DataElementGroupElement);
-        //侦听数据元更改时间
-        dataEle.onChangeSubject.subscribe((e) => {
-            //在文档重新排版、绘制前，获取最终的指定节点的内容
-            const beforeRefreshSub = this.onBeforeRefreshDocument.subscribe((e2) => {
-                console.log('内容发生改变，隐藏数据组');
-                //获取年龄数据元输入的值
-                const age = Number.parseInt(dataEle.getValue());
-                //年龄大于20，隐藏数据元
-                dataGroup.props.hidden = age > 20;
-                //取消订阅事件
-                beforeRefreshSub.unsubscribe();
-            });
-        });
-    }
 }
 
 /**