@hailin-zheng/editor-core 2.1.0 → 2.1.2

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';
 
@@ -652,6 +651,23 @@ class CommonUtil {
         }
         return this.findParent(curr.parentElement, predicate);
     }
+    static isIntersect(rect1, rect2) {
+        const left1 = rect1.x;
+        const top1 = rect1.y;
+        const right1 = rect1.x + rect1.width;
+        const bottom1 = rect1.y + rect1.height;
+        const left2 = rect2.x;
+        const top2 = rect2.y;
+        const right2 = rect2.x + rect2.width;
+        const bottom2 = rect2.y + rect2.height;
+        if (left1 >= right2 || left2 >= right1) {
+            return false;
+        }
+        if (top1 >= bottom2 || top2 >= bottom1) {
+            return false;
+        }
+        return true;
+    }
 }
 
 const docOpsMap = new Map();
@@ -1518,6 +1534,8 @@ class ViewOptions {
     paraSymbolColor = 'rgb(128,128,128)';
     dataGroupColor = 'rgb(0,80,179)';
     defaultLineHeight = 1;
+    //虚拟视图模式,处理可视区域内的元素
+    virtualViewMode = false;
     //新增-留痕块文本颜色
     trackInsColor = '#ff4d4f';
     //删除-留痕块文本颜色
@@ -1550,6 +1568,8 @@ class ViewOptions {
     ruleHeight = 30;
     //是否打印页眉页脚线
     printHeaderFooterLine = false;
+    //显示段落回车符号
+    showEnterSymbol = false;
     get fullPageView() {
         return this._fullPageView;
     }
@@ -4304,6 +4324,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 +8234,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 +9114,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 +9175,9 @@ class DataElementText extends DataElementInlineGroup {
         if (!this.startDecorate) {
             return;
         }
+        if (val === null || val === undefined) {
+            val = '';
+        }
         if (this.getValue() === val) {
             return;
         }
@@ -12410,6 +12458,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;
@@ -16126,11 +16175,13 @@ class DocumentPaint {
         this.docContainer.clear();
         const { pageLayoutMode, viewSettings: { width: viewWidth } } = this.viewOptions;
         //文档内容区宽度
-        const contentWidth = this.viewOptions.contentWidth;
+        const { contentWidth, scale } = this.viewOptions;
         //文档容器总宽度等于内容宽度
         //单页模式，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 * scale) / 2) / scale;
         docLeft = docLeft < 0 ? 0 : docLeft;
         pages.forEach(item => item.rect.x = docLeft);
         this.docContainer.rect.x = 0;
@@ -16281,6 +16332,132 @@ class PageBreakFactory extends ElementFactory {
     }
 }
 
+const fontSize = 12;
+const verPadding = 2;
+/**
+ * 恒牙牙位图
+ */
+class PermanentTeethElement extends LeafElement {
+    constructor() {
+        super('permanent-teeth');
+        this.props = new PermanentTeethProps();
+        this.props.topLeft = '87654321';
+        this.props.topRight = '12345678';
+        this.props.bottomLeft = '87654321';
+        this.props.bottomRight = '12345678';
+    }
+    clone(data) {
+        const clone = new PermanentTeethElement();
+        clone.props = this.props.clone();
+        return clone;
+    }
+    createRenderObject(data) {
+        const clone = new PermanentTeethRenderObject(this);
+        clone.rect.width = 150;
+        //字体大小*2+上下间距2*2
+        clone.rect.height = fontSize * 2 + verPadding * 2;
+        //clone.rect= ElementUtil.cloneRect(this.rect);
+        return clone;
+    }
+    serialize(viewOptions) {
+        return {
+            type: this.type,
+            props: this.props.getSerializeProps(viewOptions)
+        };
+    }
+}
+class PermanentTeethRenderObject extends LeafRenderObject {
+    render(e) {
+    }
+    clone() {
+        const clone = new PermanentTeethRenderObject(this.element);
+        clone.rect = ElementUtil.cloneRect(this.rect);
+        return clone;
+    }
+    // measure(): { width: number, height: number } {
+    //     const ele = this.element;
+    //
+    // }
+    exportHTML(event) {
+        const ele = this.element;
+        const g = super.exportHTML(event);
+        const contentHorPadding = 4;
+        g.children = [];
+        // g.children.push(ElementUtil.getFillSvgPath(`M 0 ${this.rect.height / 2} h${this.rect.width}`, '#000', 1));
+        // g.children.push(ElementUtil.getFillSvgPath(`M ${this.rect.width / 2} 0 v${this.rect.height}`, '#000', 1));
+        //
+        g.children.push(ElementUtil.getFillSvgRect(0, this.rect.height / 2, this.rect.width, 1, '#000'));
+        g.children.push(ElementUtil.getFillSvgRect(this.rect.width / 2, 0, 1, this.rect.height, '#000'));
+        const getSvgText = (text, x, y) => {
+            return {
+                sel: 'text',
+                text: text,
+                data: {
+                    ns: "http://www.w3.org/2000/svg",
+                    attrs: {
+                        'dominant-baseline': 'hanging',
+                        'font-family': 'Arial',
+                        'font-size': fontSize,
+                        x,
+                        y,
+                    }
+                },
+            };
+        };
+        const topLeftWidth = event.renderCtx.mainContext.measureTextWidth(ele.props.topLeft, {
+            fontSize: fontSize,
+            fontName: 'Arial'
+        });
+        const bottomLeftWidth = event.renderCtx.mainContext.measureTextWidth(ele.props.bottomLeft, {
+            fontSize: fontSize,
+            fontName: 'Arial'
+        });
+        g.children.push(getSvgText(ele.props.topLeft, this.rect.width / 2 - topLeftWidth - contentHorPadding, verPadding));
+        g.children.push(getSvgText(ele.props.topRight, this.rect.width / 2 + contentHorPadding, verPadding));
+        g.children.push(getSvgText(ele.props.bottomLeft, this.rect.width / 2 - bottomLeftWidth - contentHorPadding, this.rect.height - fontSize + verPadding));
+        g.children.push(getSvgText(ele.props.bottomRight, this.rect.width / 2 + contentHorPadding, this.rect.height - fontSize + verPadding));
+        return g;
+    }
+}
+class PermanentTeethFactory extends ElementFactory {
+    match(type) {
+        return type === 'permanent-teeth';
+    }
+    createElement(data) {
+        const ele = new PermanentTeethElement();
+        ele.props.bottomLeft = data.props?.bottomLeft ?? '';
+        ele.props.bottomRight = data.props?.bottomRight ?? '';
+        ele.props.topLeft = data.props?.topLeft ?? '';
+        ele.props.topRight = data.props?.topRight ?? '';
+        return ele;
+    }
+}
+/**
+ * 恒牙牙位图属性
+ */
+class PermanentTeethProps extends INotifyPropertyChanged {
+    topLeft;
+    topRight;
+    bottomLeft;
+    bottomRight;
+    getSerializeProps(viewOptions) {
+        return {
+            topLeft: this.topLeft,
+            topRight: this.topRight,
+            bottomLeft: this.bottomLeft,
+            bottomRight: this.bottomRight,
+        };
+    }
+    clone(dest) {
+        dest = dest || new PermanentTeethProps();
+        dest.topLeft = this.topLeft;
+        dest.topRight = this.topRight;
+        dest.bottomLeft = this.bottomLeft;
+        dest.bottomRight = this.bottomRight;
+        return dest;
+    }
+}
+
 class ElementReader {
     docCtx;
     constructor(docCtx) {
@@ -16322,6 +16499,7 @@ class ElementReader {
         this.addFactory(DocumentBodyPartFactory);
         this.addFactory(PageBreakFactory);
         this.addFactory(TabFactory);
+        this.addFactory(PermanentTeethFactory);
         // this.registerReadFunc<TrackRunProps>('ins-run', (data) => {
         //     const props = new TrackRunProps(data.type);
         //     props.userId = data.userId;
@@ -17015,6 +17193,7 @@ class DocumentEvent {
         docEvent.shift = evt.shiftKey;
         docEvent.ctrl = evt.ctrlKey;
         this.ismousedown = false;
+        this.mousedownPos = { x: docEvent.globalX, y: docEvent.globalY };
         //console.log('松开了')
         this.edgeRenderInfo = null;
     }
@@ -19137,7 +19316,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 +19325,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);
+    }
     /**
      * 回车事件
      */
@@ -20888,7 +21092,7 @@ class DocumentSvg {
     }
     getHTMLVNode(docRenders) {
         this.counterMap = {};
-        const pageNodes = docRenders.map(item => {
+        const pageNodes = docRenders.filter(item => this.checkInViewBox(item)).map(item => {
             const pageSvg = this.getPageSvgVNode(item);
             const pageUnit = {
                 sel: 'div.page-unit',
@@ -20913,6 +21117,24 @@ class DocumentSvg {
         });
         return pageNodes;
     }
+    /**
+     * 判断当前元素是否在视窗内
+     * @param rect
+     * @private
+     */
+    checkInViewBox(item) {
+        if (!this.viewOptions.virtualViewMode || this.mode === 'print') {
+            return true;
+        }
+        const viewBoxRect = {
+            x: this.viewOptions.pageOffset.x,
+            y: this.viewOptions.pageOffset.y,
+            width: this.viewOptions.viewSettings.width,
+            height: this.viewOptions.viewSettings.height
+        };
+        const eleRect = item.rect;
+        return CommonUtil.isIntersect(viewBoxRect, eleRect);
+    }
     getPageSvgVNode(item) {
         this.highlights = [];
         const rects = [];
@@ -26142,6 +26364,7 @@ function createSignal(state) {
  * 渲染日历虚拟节点处理类
  */
 class EditorCalendarVNode {
+    viewOptions;
     currYear;
     currMonth;
     currCalendarMode;
@@ -26150,7 +26373,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,36 +26442,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) {
-                                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';
-                            }
-                        }
+                        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();
@@ -27092,8 +27329,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',
@@ -27131,18 +27373,7 @@ class DocEditor {
                                     }
                                 }
                             },
-                            children: [
-                                {
-                                    sel: 'div.scale-container', data: {
-                                        style: {
-                                            transform: 'scale(' + this.viewOptions.scale + ')',
-                                            transformOrigin: 'right top',
-                                            width: this.viewOptions.docPageSettings.width + 'px',
-                                        }
-                                    },
-                                    children: [docContentVNode, inputVNode, dropContainer]
-                                }
-                            ]
+                            children: [docContentVNode, dropContainer]
                         }, ruleFunc.refreshRuleSvg().render()
                     ]
                 };
@@ -27530,11 +27761,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() {
@@ -28066,6 +28297,8 @@ class DocEditor {
                             position: 'relative',
                             width: '0px',
                             'user-select': 'none',
+                            transform: 'scale(' + this.viewOptions.scale + ')',
+                            'transform-origin': '0 0'
                         },
                         on: this.documentEvent.getEventListener()
                     },
@@ -28244,30 +28477,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);
                                 }
                             },
                         },
@@ -28286,8 +28500,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();
@@ -28373,7 +28619,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.1.0";
+        return "2.1.2";
     }
 }