@hailin-zheng/editor-core 2.1.5 → 2.1.7

package/index.js

@@ -291,7 +291,8 @@ class RenderObject {
             data: {
                 ns: "http://www.w3.org/2000/svg",
                 attrs: {
-                    transform: `translate(${this.rect.x},${this.rect.y})`
+                    //transform: `translate(${this.rect.x},${this.rect.y})`
+                    translate: { x: this.rect.x, y: this.rect.y }
                 }
             }
         };
@@ -668,6 +669,35 @@ class CommonUtil {
         }
         return true;
     }
+    static debounce(fn, wait) {
+        let timeout;
+        let lastExecTime = 0;
+        return function (...args) {
+            const context = this;
+            const elapsed = Date.now() - lastExecTime;
+            const shouldCallNow = elapsed >= wait;
+            clearTimeout(timeout);
+            if (shouldCallNow) {
+                fn.apply(context, args);
+                lastExecTime = Date.now();
+            }
+            else {
+                timeout = setTimeout(() => {
+                    fn.apply(context, args);
+                    lastExecTime = Date.now();
+                }, wait - elapsed);
+            }
+        };
+    }
+    static btoa(str) {
+        // 将SVG字符串转换为UTF-8编码的字节数组
+        const encoder = new TextEncoder();
+        encoder.encode(str);
+        // 将字节数组编码为Base64字符串
+        //return btoa(String.fromCharCode.apply(null, svgArray));
+        return btoa(unescape(encodeURIComponent(str)));
+        //return btoa(str.replace(/[\u00A0-\u2666]/g, c => `&#${c.charCodeAt(0)};`));
+    }
 }
 
 const docOpsMap = new Map();
@@ -838,7 +868,7 @@ function getExactDiffProps(oldProps, newProps) {
 function generatePatch(doc) {
     const insertOpsMap = new Map();
     const formatOpsMap = new Map();
-    const patchs = [];
+    const patches = [];
     const ops = docOpsMap.get(doc);
     if (!ops || !ops.length) {
         return [];
@@ -869,11 +899,14 @@ function generatePatch(doc) {
         //     op.prevIndex = log.prevIndex;
         //     op.parentIndex = log.parentIndex;
         // }
-        patchs.push({ index: op.index, parentIndex: op.parentIndex, prevIndex: op.prevIndex, ops: op.ops });
+        if ('insert' in op.ops) {
+            op.ops.insert = ele.clone(true);
+        }
+        patches.push({ index: op.index, parentIndex: op.parentIndex, prevIndex: op.prevIndex, ops: op.ops });
     }
     //清空
     ops.length = 0;
-    return patchs;
+    return patches;
 }
 /**
  * 获取删除元素的操作
@@ -1049,7 +1082,10 @@ var ModifyFlag$1;
 const elementTypeEventHandler = [];
 function invokeTypeHandler(ele, eventName, e, useCapture = false) {
     const predicate = (ele, th) => {
-        if (CommonUtil.isConstructor(th.elementType)) {
+        if (!th.elementTypeCategory) {
+            th.elementTypeCategory = CommonUtil.isConstructor(th.elementType) ? 'constructor' : 'function';
+        }
+        if (th.elementTypeCategory === 'constructor') {
             return ele instanceof th.elementType;
         }
         else {
@@ -1112,6 +1148,7 @@ class Element {
         logUpdateEleProps(this, p, oldValue, newValue);
         this.pubOnChange('self');
     }
+    key;
     //元素是否禁止复制，例如批注元素
     //forbidCopy: boolean;
     constructor(type) {
@@ -1123,6 +1160,7 @@ class Element {
         this.addEvent('ElementMouseLeave', (evt) => {
             this.isMouseenter = false;
         });
+        this.key = nanoid(5);
     }
     destroy() {
         this._eventMap?.clear(this);
@@ -1542,6 +1580,9 @@ class ViewOptions {
     trackDelColor = '#000';
     showLineRect;
     showCharRect;
+    //数据元交互修饰模式
+    dataEleDecoratorMode = 'outline';
+    dataEleDecoratorColor = '#0050b3';
     showTabChar;
     showSpaceChar;
     showLineBreak;
@@ -2463,6 +2504,7 @@ class DataEleDateProps extends DataEleBaseTextProps {
     minValue;
     maxValue;
     format;
+    value;
     clone(dest) {
         const clone = dest ?? new DataEleDateProps();
         super.clone(clone);
@@ -2475,7 +2517,8 @@ class DataEleDateProps extends DataEleBaseTextProps {
         const props = {
             minValue: this.minValue,
             maxValue: this.maxValue,
-            format: this.format
+            format: this.format,
+            value: this.value
         };
         this.getBaseProps(props, options);
         return props;
@@ -3451,9 +3494,10 @@ class DocumentRenderObject extends BlockContainerRenderObject {
             data: {
                 ns: "http://www.w3.org/2000/svg",
                 attrs: {
+                    "xmlns": "http://www.w3.org/2000/svg",
                     width: this.rect.width,
-                    height: this.rect.height,
-                    viewBox: `0 0 ${this.rect.width} ${this.rect.height}`,
+                    height: this.rect.height - 1,
+                    viewBox: `0 0 ${this.rect.width} ${this.rect.height - 1}`,
                     overflow: "hidden"
                 },
             },
@@ -3895,8 +3939,21 @@ function drawDecorator(e, r) {
 }
 function exportDecoratorHTML(event, r) {
     const canPaint = r.element.isMouseenter || r.element.isFocused;
-    if (canPaint) {
-        const strokeColor = '#0050b3';
+    if (!canPaint) {
+        return;
+    }
+    const mode = event.options.dataEleDecoratorMode;
+    const color = event.options.dataEleDecoratorColor;
+    if (mode === 'none') {
+        return;
+    }
+    if (mode === 'overlay') {
+        const bgX = event.relativePagePos.x;
+        const bgY = event.relativePagePos.y;
+        event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
+        return;
+    }
+    else if (mode === 'outline') {
         const verOffset = 0;
         const renderPosMap = getCurrentParaGroupRenders(r).map(item => ({ pos: getRenderPosToDoc(item), render: item }));
         if (renderPosMap.length > 1) {
@@ -3930,7 +3987,7 @@ function exportDecoratorHTML(event, r) {
                         ns: 'http://www.w3.org/2000/svg',
                         attrs: {
                             d: path,
-                            stroke: strokeColor,
+                            stroke: color,
                             fill: 'none',
                             'stroke-width': 1
                         }
@@ -4046,15 +4103,7 @@ class DocumentBodyRenderObject extends MuiltBlockLineRenderObject {
         return cloneRender;
     }
     exportHTML(event) {
-        const t = {
-            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;
         }
@@ -4258,16 +4307,7 @@ class DocumentHeaderRenderObject extends BlockContainerRenderObject {
                 }
             };
         }
-        const t = {
-            sel: "g",
-            data: {
-                ns: "http://www.w3.org/2000/svg",
-                attrs: {
-                    transform: `translate(${this.rect.x},${this.rect.y})`
-                }
-            },
-            children: []
-        };
+        const t = super.exportHTML(event);
         // if (this.element.disableClick && event.mode === 'view') {
         //     t.data.attrs.opacity = 0.5;
         // }
@@ -4836,7 +4876,8 @@ class TextGroupRenderObject extends LeafRenderObject {
             data: {
                 ns: "http://www.w3.org/2000/svg",
                 attrs: {
-                    "transform": `translate(0,${(height - props.fontSize) / 2})`,
+                    //"transform": `translate(0,${(height - props.fontSize) / 2})`,
+                    "translate": { x: 0, y: (height - props.fontSize) / 2 },
                     'dominant-baseline': 'hanging',
                     'font-family': this.element.props.fontName,
                     'font-size': fontSize,
@@ -7220,7 +7261,7 @@ class CommentRenderObject extends LeafRenderObject {
                 data: {
                     ns: 'http://www.w3.org/2000/svg',
                     attrs: {
-                        transform: `translate(0, ${paraLinePos.y - renderPos.y})`,
+                        translate: { x: 0, y: paraLinePos.y - renderPos.y },
                         width: 2,
                         height: paraLinePos.height,
                         fill: color
@@ -8609,8 +8650,9 @@ class DataElementDate extends DataElementInlineGroup {
         return super.cloneSelf(data, DataElementDate);
     }
     setValue(val) {
-        if (val === null) {
+        if (val === null || typeof val === 'undefined') {
             this.clearInnerItems();
+            this.props.value = '';
             return;
         }
         const format = this.props.format ?? 'YYYY-MM-DD';
@@ -8624,18 +8666,24 @@ class DataElementDate extends DataElementInlineGroup {
         }
         this.pubOnChange('self');
         this.clearInnerItems();
+        this.props.value = date.format('YYYY-MM-DD HH:mm:ss');
         const valueText = new TextGroupElement();
         this.props.valueTextProps.clone(valueText.props);
         valueText.text = formatStr;
         this.addChild(valueText, this.length - 1);
         this.onChangedValidate();
     }
-    isValid(val) {
-        const format = this.props.format ?? 'YYYY-MM-DD';
+    isValid(val, format) {
+        if (!format) {
+            format = this.props.format ?? 'YYYY-MM-DD';
+        }
         const date = moment(val, format);
         return date.isValid();
     }
     getValue() {
+        if (this.props.value) {
+            return this.props.value;
+        }
         return ElementSerialize.serializeString(this);
     }
     validate() {
@@ -8682,6 +8730,7 @@ class DataElementDateFactory extends DataElementBaseFactory {
         dataEleProps.minValue = props.minValue;
         dataEleProps.maxValue = props.maxValue;
         dataEleProps.format = props.format;
+        dataEleProps.value = props.value ?? '';
         //dataEleProps.caption = props.caption;
         //dataEleProps.type = props.type;
         dataEleProps.nullText = props.nullText;
@@ -9605,7 +9654,7 @@ function renderMHHTML(event, element, isPaint, nodes = []) {
         data: {
             ns: "http://www.w3.org/2000/svg",
             attrs: {
-                transform: `translate(${x},${y + (height - leftRect.height) / 2})`,
+                translate: { x, y: y + (height - leftRect.height) / 2 },
                 'dominant-baseline': 'Hanging',
                 'font-family': defaultTextProps.fontName,
                 'font-size': defaultTextProps.fontSize,
@@ -9622,7 +9671,7 @@ function renderMHHTML(event, element, isPaint, nodes = []) {
         data: {
             ns: "http://www.w3.org/2000/svg",
             attrs: {
-                transform: `translate(${x + (middleWidth - topRect.width) / 2},${y - 2})`,
+                translate: { x: x + (middleWidth - topRect.width) / 2, y: y - 2 },
                 'dominant-baseline': 'Hanging',
                 'font-family': defaultTextProps.fontName,
                 'font-size': defaultTextProps.fontSize,
@@ -9641,7 +9690,7 @@ function renderMHHTML(event, element, isPaint, nodes = []) {
         data: {
             ns: "http://www.w3.org/2000/svg",
             attrs: {
-                transform: `translate(${x + (middleWidth - bottomRect.width) / 2},${y + topRect.height + 2})`,
+                translate: { x: x + (middleWidth - bottomRect.width) / 2, y: y + topRect.height + 2 },
                 'dominant-baseline': 'Hanging',
                 'font-family': defaultTextProps.fontName,
                 'font-size': defaultTextProps.fontSize,
@@ -9658,7 +9707,7 @@ function renderMHHTML(event, element, isPaint, nodes = []) {
         data: {
             ns: "http://www.w3.org/2000/svg",
             attrs: {
-                transform: `translate(${x},${y + (height - leftRect.height) / 2})`,
+                translate: { x, y: y + (height - leftRect.height) / 2 },
                 'dominant-baseline': 'Hanging',
                 'font-family': defaultTextProps.fontName,
                 'font-size': defaultTextProps.fontSize,
@@ -19926,10 +19975,7 @@ class DocumentChange {
     insertSoftBr() {
         let { startControl, startOffset } = this.selectionState;
         const lastEle = this.insertElement(startControl, startOffset, [new BreakElement()]);
-        const focusEle = ElementUtil.getNextSiblingElement(lastEle);
-        if (focusEle) {
-            this.selectionState.resetRange(focusEle, 0);
-        }
+        this.selectionState.resetRange(lastEle, -1);
     }
     insertPageBreakSymbol() {
         let { startControl, startOffset } = this.selectionState;
@@ -20247,19 +20293,20 @@ function createPrintTemplate({ width, height, orient }) {
           -moz-box-sizing: border-box;
       }
       @page {
-          size: ${orient};
+          size: ${width}px ${height - 1}px ${orient};
           margin: 0;
       }
       div {
-          width: ${width}mm;
-          min-height: ${height}mm;
+          width: ${width}px;
+          min-height: ${height - 1}px;
+          overflow: hidden;
           font-size: 0;
       }
       @media print {
           html,
           body {
-              width: ${width}mm;
-              height: ${height}mm;
+              width: ${width}px;
+              height: ${height - 1}px;
           }
           div {
               width: initial;
@@ -20290,7 +20337,7 @@ function printNodes(printNodes, options, printEvent = null) {
         console.warn('无可打印节点');
         return;
     }
-    const printSize = new PageOptions(options.width, options.height, options.orient);
+    const printSize = options;
     const iframeHTML = createPrintTemplate(printSize);
     printIFrame.contentWindow?.document.write(iframeHTML);
     printIFrame.contentWindow?.document.close();
@@ -20316,18 +20363,6 @@ function printNodes(printNodes, options, printEvent = null) {
     }
     printIFrame.onload = () => {
         setTimeout(() => {
-            printIFrame.contentWindow?.window.matchMedia('print').addListener(function (query) {
-                if (!query.matches) {
-                    console.log('用户已经打印');
-                    // 执行打印完成后需要执行的代码
-                }
-            });
-            printIFrame.contentWindow?.window.matchMedia('screen').addListener(function (query) {
-                if (!query.matches) {
-                    console.log('用户已经打印');
-                    // 执行打印完成后需要执行的代码
-                }
-            });
             printIFrame.contentWindow?.print();
             printIFrame.parentNode?.removeChild(printIFrame);
         }, 0);
@@ -21088,6 +21123,40 @@ class DocumentSvg {
             }
         }
         selectionRects.push(...selectionRectsTemp);
+        // if (currVNode && currVNode.data?.attrs?.transform) {
+        //     currVNode.data.attrs.transform = `translate(${currVNode.data?.attrs?.transform.x},${currVNode.data?.attrs?.transform.y})`
+        // }
+        if (currVNode && currVNode.children) {
+            let translateX = 0, translateY = 0;
+            let line = false;
+            if (render instanceof ParagraphLineRectRenderObject) {
+                translateX = render.rect.x;
+                translateY = render.rect.y;
+                line = true;
+            }
+            currVNode.children.forEach(item => {
+                if (item && item.data?.attrs?.translate && !item.data?.attrs?.transform) {
+                    item.data.attrs.transform = `translate(${item.data.attrs.translate.x + translateX},${item.data.attrs.translate.y + translateY})`;
+                    delete item.data.attrs.translate;
+                }
+                if (line && !item.data.attrs.transform) {
+                    item.data.attrs.transform = `translate(${translateX},${translateY})`;
+                }
+                // if (item && item.data?.attrs?.transform && typeof item.data?.attrs?.transform === 'object') {
+                //     item.data.attrs.transform = `translate(${item.data.attrs.transform.x + translateX},${item.data.attrs.transform.y + translateY})`
+                // } else {
+                //     if (line && !item.data.attrs.transform) {
+                //         item.data.attrs.transform = `translate(${translateX},${translateY})`;
+                //     }
+                // }
+            });
+            if (line) {
+                return currVNode.children;
+            }
+        }
+        if (currVNode && render.element) {
+            currVNode.key = render.element.key + render.element.paintRenders.indexOf(render);
+        }
         return currVNode;
     }
     getHTMLVNode(docRenders) {
@@ -21105,11 +21174,7 @@ class DocumentSvg {
                         position: 'absolute',
                         background: 'white',
                         "box-shadow": "rgba(158, 161, 165, 0.4) 0px 2px 12px 0px",
-                    },
-                    hook: {
-                        insert: (vnode) => {
-                        }
-                    },
+                    }
                 },
                 children: [pageSvg]
             };
@@ -21119,8 +21184,8 @@ class DocumentSvg {
     }
     /**
      * 判断当前元素是否在视窗内
-     * @param rect
      * @private
+     * @param item
      */
     checkInViewBox(item) {
         if (!this.viewOptions.virtualViewMode || this.mode === 'print') {
@@ -26195,46 +26260,31 @@ class DocumentPrintOffscreenBase {
      * 续打
      */
     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, pageSvgVNode } = event;
             if (index === options.startDocIndex && options.startY !== 0) {
                 const bodyRender = docRender.getChild(1);
-                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;
-                // }
+                let x = bodyRender.rect.x, y = options.startY, width = bodyRender.rect.width, 
+                //由于body下面紧跟着页脚线，由于虚打不需要绘制该线，因此要裁剪掉2个像素
+                height = bodyRender.rect.height - (options.startY - bodyRender.rect.y) - 2;
                 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 printRanges = new Array(this.documentPaint.docPages.length).fill(0).map((item, index) => index).filter(index => index >= options.startDocIndex);
-        const canvasNodes = this.getSvgNodes(this.documentPaint.docPages, printRanges);
-        if (!canvasNodes.length) {
+        let svgNodes = this.getSvgNodes(this.documentPaint.docPages, printRanges);
+        if (!svgNodes.length) {
             console.warn('无可打印页');
             return;
         }
-        const docProps = this.docCtx.document.props;
-        printNodes(canvasNodes, { ...docProps });
+        const docProps = this.docCtx.viewOptions.docPageSettings;
+        // if (docProps.orient === 'landscape') {
+        //     svgNodes = svgNodes.map(item => 'data:image/svg+xml;base64,' + CommonUtil.btoa(item)).map(item => `<img src="${item}" width="${docProps.width}px" height="${docProps.height-1}px" style="display: block"/>`);
+        // }
+        printNodes(svgNodes, docProps);
     }
     // /**
     //  * 获取绘制的图片，格式为Base64编码
@@ -26253,6 +26303,9 @@ class DocumentPrintOffscreenBase {
         const canvasNodes = this.getSvgNodes(this.documentPaint.docPages, ranges);
         return canvasNodes;
     }
+    Encode64(str) {
+        return btoa(encodeURIComponent(str));
+    }
     /**
      * 读取数据，排版
      * @param data
@@ -26302,7 +26355,7 @@ class DocumentPrintOffscreenBase {
             modules.class,
             modules.props,
             modules.attributes,
-            modules.style
+            modules.style,
         ]);
         // const pageSvgVNodes = docRenders.filter((item, index) =>
         //     !printRanges || printRanges.indexOf(index) >= 0)
@@ -26614,6 +26667,17 @@ class EditorCalendarVNode {
                             sel: 'div.editor-calendar-footer-right',
                             data: {},
                             children: [{
+                                    sel: 'div.editor-calendar-footer-right-btn',
+                                    data: {
+                                        on: {
+                                            click: () => {
+                                                this.onSetValue.next(undefined);
+                                            }
+                                        }
+                                    },
+                                    text: '清除'
+                                },
+                                {
                                     sel: 'div.editor-calendar-footer-right-btn',
                                     data: {
                                         on: {
@@ -27643,10 +27707,22 @@ class DocEditor {
      * 处理全选当前段落
      */
     docDblClickHandle(evt) {
-        const res = getFocusTextSegment(this.selectionState);
-        if (res) {
+        //1.如果在数据元中双击，则默认选中数据元内部的所有内容
+        const currDataEle = this.getCurrentDataElement();
+        if (currDataEle && currDataEle instanceof DataElementInlineGroup && currDataEle.length > 2) {
+            const range = new SelectionRange();
+            range.setStart(currDataEle.startDecorate, 1);
+            range.setEnd(currDataEle.endDecorate, 0);
+            this.selectionState.addRange(range);
             this.flushToSchedule();
         }
+        else {
+            //2.默认选词
+            const res = getFocusTextSegment(this.selectionState);
+            if (res) {
+                this.flushToSchedule();
+            }
+        }
         this.updateSelection();
         this.onDblClickEvent.next(evt);
     }
@@ -28083,6 +28159,10 @@ class DocEditor {
         }
     }
     scrollToPosition(pos) {
+        const scale = this.viewOptions.scale;
+        //处理缩放
+        pos.x = pos.x * scale;
+        pos.y = pos.y * scale;
         if (pos.y - this.viewOptions.pageOffset.y > 0 && pos.y - this.viewOptions.pageOffset.y < this.viewOptions.viewSettings.height) {
             return;
         }
@@ -28283,9 +28363,12 @@ class DocEditor {
             //console.timeEnd('patch');
         };
         render();
-        this.onShouldRender.subscribe(() => {
+        // this.onShouldRender.subscribe(() => {
+        //     render();
+        // });
+        this.onShouldRender.subscribe(CommonUtil.debounce(() => {
             render();
-        });
+        }, 32));
     }
     /**
      * 留痕提示的容器框，用于渲染后重新计算纵向位置
@@ -28559,10 +28642,10 @@ class DocEditor {
                 if (dataEle && dataEle instanceof DataElementDate && dataEle.props.editable) {
                     const position = editor.getDataElementPosition(dataEle.startDecorate);
                     let currVal = dataEle.getValue();
-                    if (!dataEle.isValid(currVal)) {
+                    if (!dataEle.isValid(currVal, 'YYYY-MM-DD HH:mm:ss')) {
                         currVal = '';
                     }
-                    return calendar.render(position, currVal, dataEle.props.format);
+                    return calendar.render(position, currVal);
                 }
                 calendar.reset();
                 return null;
@@ -28626,7 +28709,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.1.5";
+        return "2.1.7";
     }
 }