@hailin-zheng/editor-core 2.0.54 → 2.1.1

package/index.js

@@ -3,7 +3,6 @@ import moment from 'moment';
 import * as acor from 'acorn';
 import { generate } from 'astring';
 import estraverse from 'estraverse';
-import * as bwipjs from 'bwip-js';
 import JsBarcode from 'jsbarcode';
 import { toVNode, init as init$1, styleModule, classModule, attributesModule, eventListenersModule } from 'snabbdom';
 
@@ -1550,6 +1549,8 @@ class ViewOptions {
     ruleHeight = 30;
     //是否打印页眉页脚线
     printHeaderFooterLine = false;
+    //显示段落回车符号
+    showEnterSymbol = false;
     get fullPageView() {
         return this._fullPageView;
     }
@@ -4304,6 +4305,27 @@ class PSymbolRenderObject extends LeafRenderObject {
         }
         render.contentContext.drawText('↩', this.element.textProps, position.x, position.y, 20, this.rect.height);
     }
+    exportHTML(event) {
+        if (!event.options.showEnterSymbol || event.mode === 'print') {
+            return null;
+        }
+        return {
+            sel: 'text',
+            text: '↵',
+            data: {
+                ns: "http://www.w3.org/2000/svg",
+                attrs: {
+                    //"transform": `translate(0,${(height - props.fontSize) / 2})`,
+                    'dominant-baseline': 'hanging',
+                    'font-family': 'Courier',
+                    'font-size': this.element.defaultHeight,
+                    x: this.rect.x,
+                    y: this.rect.y,
+                    fill: 'green'
+                }
+            },
+        };
+    }
     //绘制段落符号
     clone() {
         const render = new PSymbolRenderObject(this.element);
@@ -8193,30 +8215,13 @@ class DataElementBarcode extends DataElementLeaf {
         return this.props.text;
     }
     drawBarcode(renderCtx, pos) {
-        this.createBarcodeCache();
         renderCtx.contentContext.ctx.drawImage(this.barCodeCanvas, pos.x, pos.y, this.props.width, this.props.height);
     }
-    createBarcodeCache() {
-        if (this.cache) {
-            return;
-        }
-        this.cache = true;
-        if (!this.barCodeCanvas) {
-            this.barCodeCanvas = document.createElement('canvas');
-        }
-        this.barCodeCanvas = bwipjs.toCanvas(this.barCodeCanvas, {
-            bcid: this.props.type,
-            text: this.props.text || "0123456789",
-            height: 10,
-            includetext: true,
-            textxalign: "center", // Always good to set this
-        });
-    }
 }
 class DataElementBarcodeRenderObject extends ResizeLeafRenderObject {
     render(e) {
-        const barcodeEle = this.element;
-        barcodeEle.drawBarcode(e.render, e.position);
+        // const barcodeEle = this.element as DataElementBarcode;
+        // barcodeEle.drawBarcode(e.render, e.position);
     }
     clone() {
         const clone = new DataElementBarcodeRenderObject(this.element);
@@ -9090,6 +9095,27 @@ class BreakRenderObject extends LeafRenderObject {
         }
         render.contentContext.drawText('↓', this.element.textProps, position.x, position.y, 20, this.rect.height);
     }
+    exportHTML(event) {
+        if (!event.options.showEnterSymbol || event.mode === 'print') {
+            return null;
+        }
+        return {
+            sel: 'text',
+            text: '↓',
+            data: {
+                ns: "http://www.w3.org/2000/svg",
+                attrs: {
+                    //"transform": `translate(0,${(height - props.fontSize) / 2})`,
+                    'dominant-baseline': 'hanging',
+                    'font-family': 'Courier',
+                    'font-size': this.rect.height,
+                    x: this.rect.x + 4,
+                    y: this.rect.y,
+                    fill: 'green'
+                }
+            },
+        };
+    }
     clone() {
         const render = new BreakRenderObject(this.element);
         render.rect = ElementUtil.cloneRect(this.rect);
@@ -9130,6 +9156,9 @@ class DataElementText extends DataElementInlineGroup {
         if (!this.startDecorate) {
             return;
         }
+        if (val === null || val === undefined) {
+            val = '';
+        }
         if (this.getValue() === val) {
             return;
         }
@@ -12410,6 +12439,7 @@ class ElementUtil {
         };
     }
     static getMousePos(e, scale = 1) {
+        //scale=1;
         const svgContainer = e.currentTarget;
         const parentRect = svgContainer.getBoundingClientRect();
         const localX = e.clientX - parentRect.x; //+ this.viewOptions.pageOffset.x;
@@ -16130,7 +16160,9 @@ class DocumentPaint {
         //文档容器总宽度等于内容宽度
         //单页模式，docContainer居中
         this.docContainer.rect.width = viewWidth;
-        let docLeft = Math.floor((viewWidth - contentWidth) / 2);
+        //let docLeft = Math.floor((viewWidth - contentWidth) / 2);
+        //处理由于缩放问题，transform-origin:left-top,因此需要提前计算需要偏移的位置
+        let docLeft = Math.floor((viewWidth - contentWidth * (this.viewOptions.scale)) / 2);
         docLeft = docLeft < 0 ? 0 : docLeft;
         pages.forEach(item => item.rect.x = docLeft);
         this.docContainer.rect.x = 0;
@@ -19137,7 +19169,8 @@ class DocumentChange {
         if (!prevEle) {
             const nextEle = ElementUtil.getRecursionNextSiblingElement(control, true, true, this.viewOptions);
             if (nextEle) {
-                this.selectionState.resetRange(nextEle, 0);
+                //this.selectionState.resetRange(nextEle, 0);
+                this.setSelectionStateByDeleteEvent(nextEle, 0, control);
                 control.remove();
                 return;
             }
@@ -19145,24 +19178,48 @@ class DocumentChange {
             return;
         }
         if (ElementUtil.isInSameParagraph(control, prevEle)) {
-            this.selectionState.resetRange(prevEle, -1);
+            //this.selectionState.resetRange(prevEle, -1);
+            this.setSelectionStateByDeleteEvent(prevEle, -1, control);
             control.remove();
             return;
         }
         else {
             const nextEle = ElementUtil.getRecursionNextSiblingElement(control, true, true, this.viewOptions);
             if (nextEle && ElementUtil.getPrevSiblingElement(nextEle) === control) {
-                this.selectionState.resetRange(nextEle, 0);
+                //this.selectionState.resetRange(nextEle, 0);
+                this.setSelectionStateByDeleteEvent(nextEle, 0, control);
                 control.remove();
                 return;
             }
             else {
-                this.selectionState.resetRange(prevEle, -1);
+                //this.selectionState.resetRange(prevEle, -1);
+                this.setSelectionStateByDeleteEvent(prevEle, -1, control);
                 control.remove();
                 return;
             }
         }
     }
+    /**
+     * 处理在表单模式下光标定位的问题
+     * @param target
+     * @param targetOffset
+     * @param deleteTarget
+     * @private
+     */
+    setSelectionStateByDeleteEvent(target, targetOffset, deleteTarget) {
+        if (this.viewOptions.docMode === DocMode.FormEdit) {
+            const dataEle = ElementUtil.getParent(deleteTarget, (item) => item instanceof DataElementInlineGroup);
+            if (dataEle && ElementUtil.getParent(target, (item) => item instanceof DataElementInlineGroup) === dataEle) {
+                this.selectionState.resetRange(target, targetOffset);
+                return;
+            }
+            if (dataEle) {
+                this.selectionState.resetRange(dataEle.startDecorate, 1);
+                return;
+            }
+        }
+        this.selectionState.resetRange(target, targetOffset);
+    }
     /**
      * 回车事件
      */
@@ -26142,6 +26199,7 @@ function createSignal(state) {
  * 渲染日历虚拟节点处理类
  */
 class EditorCalendarVNode {
+    viewOptions;
     currYear;
     currMonth;
     currCalendarMode;
@@ -26150,7 +26208,8 @@ class EditorCalendarVNode {
     onSetValue = new Subject$1();
     currTime;
     selectedTime;
-    constructor() {
+    constructor(viewOptions) {
+        this.viewOptions = viewOptions;
         this.currYear = createSignal(new Date().getFullYear());
         //月份赋值是按照索引来的,所以要减1
         this.currMonth = createSignal(new Date().getMonth());
@@ -26218,29 +26277,49 @@ class EditorCalendarVNode {
                 hook: {
                     insert: (vnode) => {
                         const elm = vnode.elm;
-                        const parent = CommonUtil.findParent(elm, (item) => item.className === 'scroll-container');
-                        if (parent) {
-                            const parentRect = parent.getBoundingClientRect();
-                            const elmRect = elm.getBoundingClientRect();
-                            if (elmRect.top < parentRect.top) {
-                                elm.style.top = (position.y - elmRect.height) + 'px';
-                            }
-                            if (elmRect.left < parentRect.left) {
-                                elm.style.left = (position.x - 10) + 'px';
-                            }
-                            if (elmRect.right > parentRect.right) {
-                                elm.style.left = (position.x - elmRect.width + 10) + 'px';
-                            }
-                            if (elmRect.top + elmRect.height > parentRect.top + parentRect.height) {
-                                elm.style.top = (position.y - position.height - elmRect.height) + 'px';
-                            }
-                        }
+                        this.resizePosition(elm, position);
+                    },
+                    update: (oldVnode, vnode) => {
+                        const elm = vnode.elm;
+                        this.resizePosition(elm, position);
                     }
                 },
             },
             children: []
         };
     }
+    resizePosition(elm, position) {
+        const parent = CommonUtil.findParent(elm, (item) => item.className === 'scroll-container');
+        const scale = this.viewOptions.scale;
+        if (parent) {
+            const parentRect = parent.getBoundingClientRect();
+            const elmRect = elm.getBoundingClientRect();
+            // elmRect.width /= scale;
+            // elmRect.height /= scale;
+            // parentRect.width /= scale;
+            // parentRect.height /= scale;
+            if (elmRect.top < parentRect.top) {
+                elm.style.top = (position.y - elmRect.height / scale) + 'px';
+            }
+            if (elmRect.left < parentRect.left) {
+                elm.style.left = (position.x - 10) + 'px';
+            }
+            if (elmRect.right > parentRect.right) {
+                elm.style.left = (position.x - elmRect.width / scale + 10) + 'px';
+                //elm.style.left = parentRect.width - elmRect.width + 'px';
+            }
+            if (elmRect.top + elmRect.height > parentRect.top + parentRect.height) {
+                const newTop = position.y - position.height - elmRect.height;
+                const oldTop = position.y + 5 + position.height;
+                //计算前后的高度的差距,然后判断新的值是否在父元素的范围内，如果不在则使用旧的值
+                if (newTop > 0 && oldTop - newTop < elmRect.top - parentRect.top) {
+                    elm.style.top = (position.y - position.height - elmRect.height) + 'px';
+                }
+                //elm.style.top = (top - (elmRect.top + elmRect.height - (parentRect.top + parentRect.height))) + 'px';
+                //elm.style.top = (position.y - position.height - elmRect.height) + 'px';
+            }
+        }
+    }
     renderDay() {
         //获取当前月份需要渲染的天数集合
         const days = this.getDays();
@@ -27085,8 +27164,13 @@ class DocEditor {
                 const listVNode = this.renderDataListVNode();
                 const dropContainer = {
                     sel: 'div.drop-container',
-                    data: {},
-                    children: [listVNode.render(), calendarFunc.render(), menuFunc.render()]
+                    data: {
+                        style: {
+                            'transform-origin': '0 0',
+                            'transform': `scale(${this.viewOptions.scale})`
+                        }
+                    },
+                    children: [inputVNode, listVNode.render(), calendarFunc.render(), menuFunc.render()]
                 };
                 return {
                     sel: 'div.svg-container',
@@ -27124,17 +27208,7 @@ class DocEditor {
                                     }
                                 }
                             },
-                            children: [
-                                {
-                                    sel: 'div.scale-container', data: {
-                                        style: {
-                                            transform: 'scale(' + this.viewOptions.scale + ')',
-                                            transformOrigin: 'left top'
-                                        }
-                                    },
-                                    children: [docContentVNode, inputVNode, dropContainer]
-                                }
-                            ]
+                            children: [docContentVNode, dropContainer]
                         }, ruleFunc.refreshRuleSvg().render()
                     ]
                 };
@@ -27240,8 +27314,8 @@ class DocEditor {
             this.contentChanged.next();
         }
         this.updateSelection();
-        this.onShouldRender.next();
         this.setCursor();
+        this.onShouldRender.next();
         //this.refreshView();
     }
     /**
@@ -27385,12 +27459,12 @@ class DocEditor {
      */
     docClickHandle(evt) {
         this.hiddenInput();
-        this.setCursor();
-        this.updateSelection();
+        // this.setCursor();
+        // this.updateSelection();
+        this.refreshDocument();
         this.onClickEvent.next(evt);
         if (this.menusData) {
             this.menusData = null;
-            this.onChange();
         }
     }
     /**
@@ -27479,7 +27553,9 @@ class DocEditor {
         elementEvent.source = startControl;
         DocumentEvent.invokeEvent('ElementContextMenu', startControl, elementEvent, 'All');
         //const position = {x: evt.offsetX + 10, y: evt.offsetY, translateY: this.viewOptions.pageOffset.y};
-        const pos = ElementUtil.getMousePos(evt);
+        const pos = ElementUtil.getMousePos(evt, this.viewOptions.scale);
+        pos.x += 10;
+        pos.y -= 10;
         this.menusData = {
             position: pos,
             menus: elementEvent.menus
@@ -27520,11 +27596,11 @@ class DocEditor {
         this.updateRenderCtx();
         this.flushToSchedule();
         this.documentPaint.layoutPages();
-        const sub = this.afterNodePatch.subscribe(() => {
-            sub.unsubscribe();
-            const scrollDOM = this.svgContainer.querySelector('.scroll-container');
-            scrollDOM.scrollLeft = (scrollDOM.scrollWidth - scrollDOM.getBoundingClientRect().width) / 2;
-        });
+        // const sub = this.afterNodePatch.subscribe(() => {
+        //     sub.unsubscribe();
+        //     const scrollDOM = this.svgContainer.querySelector('.scroll-container') as HTMLElement;
+        //     scrollDOM.scrollLeft = (scrollDOM.scrollWidth - scrollDOM.getBoundingClientRect().width) / 2;
+        // })
         return scale;
     }
     updateRenderCtx() {
@@ -28054,7 +28130,10 @@ class DocEditor {
                         style: {
                             height: '0px',
                             position: 'relative',
+                            width: '0px',
                             'user-select': 'none',
+                            transform: 'scale(' + this.viewOptions.scale + ')',
+                            'transform-origin': '0 0'
                         },
                         on: this.documentEvent.getEventListener()
                     },
@@ -28233,30 +28312,11 @@ class DocEditor {
                             hook: {
                                 insert: (vnode) => {
                                     const elm = vnode.elm;
-                                    const parent = CommonUtil.findParent(elm, (item) => item.className === 'scroll-container');
-                                    if (parent) {
-                                        const parentRect = parent.getBoundingClientRect();
-                                        const elmRect = elm.getBoundingClientRect();
-                                        if (elmRect.top < parentRect.top) {
-                                            elm.style.top = (position.y - elmRect.height) + 'px';
-                                        }
-                                        if (elmRect.left < parentRect.left) {
-                                            elm.style.left = (position.x - 10) + 'px';
-                                        }
-                                        if (elmRect.right > parentRect.right) {
-                                            elm.style.left = (position.x - elmRect.width + 10) + 'px';
-                                        }
-                                        if (elmRect.top + elmRect.height > parentRect.top + parentRect.height) {
-                                            const newTop = position.y - position.height - elmRect.height;
-                                            const oldTop = position.y + 5 + position.height;
-                                            //计算前后的高度的差距,然后判断新的值是否在父元素的范围内，如果不在则使用旧的值
-                                            if (oldTop - newTop < elmRect.top - parentRect.top) {
-                                                elm.style.top = (position.y - position.height - elmRect.height) + 'px';
-                                            }
-                                            //elm.style.top = (top - (elmRect.top + elmRect.height - (parentRect.top + parentRect.height))) + 'px';
-                                            //elm.style.top = (position.y - position.height - elmRect.height) + 'px';
-                                        }
-                                    }
+                                    editor.resizePosition(elm, position);
+                                },
+                                update: (oldVnode, vnode) => {
+                                    const elm = vnode.elm;
+                                    editor.resizePosition(elm, position);
                                 }
                             },
                         },
@@ -28275,8 +28335,40 @@ class DocEditor {
             }
         };
     }
+    resizePosition(elm, position) {
+        const parent = CommonUtil.findParent(elm, (item) => item.className === 'scroll-container');
+        const scale = this.viewOptions.scale;
+        if (parent) {
+            const parentRect = parent.getBoundingClientRect();
+            const elmRect = elm.getBoundingClientRect();
+            // elmRect.width /= scale;
+            // elmRect.height /= scale;
+            // parentRect.width /= scale;
+            // parentRect.height /= scale;
+            if (elmRect.top < parentRect.top) {
+                elm.style.top = (position.y - elmRect.height / scale) + 'px';
+            }
+            if (elmRect.left < parentRect.left) {
+                elm.style.left = (position.x - 10) + 'px';
+            }
+            if (elmRect.right > parentRect.right) {
+                elm.style.left = (position.x - elmRect.width / scale + 10) + 'px';
+                //elm.style.left = parentRect.width - elmRect.width + 'px';
+            }
+            if (elmRect.top + elmRect.height > parentRect.top + parentRect.height) {
+                const newTop = position.y - position.height - elmRect.height;
+                const oldTop = position.y + 5 + position.height;
+                //计算前后的高度的差距,然后判断新的值是否在父元素的范围内，如果不在则使用旧的值
+                if (newTop > 0 && oldTop - newTop < elmRect.top - parentRect.top) {
+                    elm.style.top = (position.y - position.height - elmRect.height) + 'px';
+                }
+                //elm.style.top = (top - (elmRect.top + elmRect.height - (parentRect.top + parentRect.height))) + 'px';
+                //elm.style.top = (position.y - position.height - elmRect.height) + 'px';
+            }
+        }
+    }
     renderCalendar() {
-        const calendar = new EditorCalendarVNode();
+        const calendar = new EditorCalendarVNode(this.viewOptions);
         const editor = this;
         calendar.onSetValue.subscribe((value) => {
             const dataEle = editor.getCurrentDataElement();
@@ -28362,7 +28454,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.0.54";
+        return "2.1.1";
     }
 }