@hailin-zheng/editor-core 2.0.27 → 2.0.29

package/index.js

@@ -643,6 +643,15 @@ class CommonUtil {
             ele.removeChild(ele.firstChild);
         }
     }
+    static findParent(curr, predicate) {
+        if (!curr) {
+            return null;
+        }
+        if (predicate(curr)) {
+            return curr;
+        }
+        return this.findParent(curr.parentElement, predicate);
+    }
 }
 
 const docOpsMap = new Map();
@@ -3396,7 +3405,7 @@ class DocumentRenderObject extends BlockContainerRenderObject {
                 ns: "http://www.w3.org/2000/svg",
                 attrs: {
                     id: "selection",
-                }
+                },
             },
             children: []
         };
@@ -3421,7 +3430,7 @@ class DocumentRenderObject extends BlockContainerRenderObject {
                     height: this.rect.height,
                     viewBox: `0 0 ${this.rect.width} ${this.rect.height}`,
                     overflow: "hidden"
-                }
+                },
             },
             children: [
                 pageCorner, highlight, ...CommonUtil.toArray(event.getChildNodes(this)), pageNum, selection
@@ -8447,17 +8456,17 @@ class DataElementCheckRenderObject extends LeafRenderObject {
             const style = props.style;
             if (props.multiSelect) {
                 style === 'RadioButton' ? this.drawCircleCheckbox(t, width, height, props.checked)
-                    : this.drawRectCheckbox(t, width, height, props.size, props.checked);
+                    : this.drawRectCheckbox(t, width, height, props.size, props.checked, props.border);
             }
             else {
-                style === 'CheckBox' ? this.drawRectCheckbox(t, width, height, props.size, props.checked)
+                style === 'CheckBox' ? this.drawRectCheckbox(t, width, height, props.size, props.checked, props.border)
                     : this.drawCircleCheckbox(t, width, height, props.checked);
             }
         }
         return t;
     }
-    drawRectCheckbox(t, width, height, size, checked) {
-        t.children.push({
+    drawRectCheckbox(t, width, height, size, checked, border) {
+        border && t.children.push({
             sel: 'rect',
             data: {
                 ns: "http://www.w3.org/2000/svg",
@@ -13338,6 +13347,7 @@ class EditorContext {
                 this._document.destroy();
             }
             this.clearPrevDocCb = null;
+            this.selectionState.startHitInfo = null;
         };
     }
     clear() {
@@ -19967,9 +19977,6 @@ function createPrintTemplate({ width, height, orient }) {
           box-sizing: border-box;
           -moz-box-sizing: border-box;
       }
-      body *{
-        white-space: pre;
-      }
       @page {
           size: ${orient};
           margin: 0;
@@ -26134,14 +26141,36 @@ class EditorCalendarVNode {
                 style: {
                     position: 'absolute',
                     left: (position.x - 10) + 'px',
-                    top: position.y + 'px',
+                    top: position.y + 5 + position.height + 'px',
                     'min-width': '100px',
                     'background-color': 'white',
                     'z-index': '1000',
                     'border-radius': '5px',
                     'box-shadow': '0 0 5px 0 rgba(0,0,0,0.2)',
                     'user-select': 'none',
-                }
+                },
+                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';
+                            }
+                        }
+                    }
+                },
             },
             children: []
         };
@@ -27172,22 +27201,26 @@ class DocEditor {
      */
     setCursor() {
         this.selectionState;
-        if (!this.canSetCursor() || !this.documentEvent.startHitInfo) {
+        if (!this.canSetCursor() || !this.selectionState.startHitInfo) {
             this.selectionState.editable = false;
             this.docCtx.selectionState.cursorPos = null;
-            this.hiddenInput(false);
+            const cursorRect = this.getCursorRect();
+            this.hiddenInput(false, cursorRect);
             return false;
         }
         const cursorRect = this.getCursorRect();
         this.docCtx.cursorRect = ElementUtil.cloneRect(cursorRect);
         this.selectionState.cursorPos = cursorRect;
-        const abPos = this.transToAbsolutePos(ElementUtil.cloneRect(cursorRect));
+        const abPos = ElementUtil.cloneRect(cursorRect);
         this.setCursorPosition(abPos);
         //this.documentEvent.invokeCursor(startControl);
         return true;
     }
     getCursorRect() {
         try {
+            if (!this.documentEvent.startHitInfo) {
+                return { x: 0, y: 0, width: 0, height: 0 };
+            }
             const { startControl, startOffset } = this.selectionState;
             const { startRegion, hitDocIndex } = this.documentEvent.startHitInfo;
             const cursorPos = DocumentCursor.getElementCursorPos(startControl, startOffset, startRegion, hitDocIndex);
@@ -27204,14 +27237,16 @@ class DocEditor {
      */
     setCursorVisibility(visibility) {
         if (visibility) {
+            this.editInput.style.removeProperty('display');
             this.editInput.focus();
         }
     }
-    hiddenInput(reset = true) {
+    hiddenInput(reset = true, pos = null) {
         //this.input.style.display = 'none';
-        this.editInput.style.left = '-2px';
-        this.editInput.style.top = '-2px';
+        this.editInput.style.left = pos ? pos.x + 'px' : '-2px';
+        this.editInput.style.top = pos ? pos.y + 'px' : '-2px';
         this.editInput.readOnly = true;
+        this.editInput.style.display = 'none';
         !reset && this.editInput.focus();
     }
     /**
@@ -27226,22 +27261,6 @@ class DocEditor {
         this.setCursorVisibility(true);
         //this.setCursorInputStatus();
     }
-    /**
-     * 将相对坐标位置转换为绝对坐标位
-     * 由于缩放，导致绝对位置=相对位置*scale
-     * @param pos
-     */
-    transToAbsolutePos(pos) {
-        const { scale } = this.viewOptions;
-        this.documentPaint.docContainer.rect.x;
-        this.documentPaint.docContainer.rect.y;
-        pos.x = pos.x * scale;
-        pos.y = pos.y * scale;
-        if ('height' in pos) {
-            pos.height = pos.height * scale;
-        }
-        return pos;
-    }
     /**
      * 判断是否光标可以设置接受编辑
      * @returns
@@ -27324,14 +27343,14 @@ class DocEditor {
         const startDecorateRender = element.paintRenders[0];
         if (!startDecorateRender) {
             console.error('未找到数据元开始渲染元素');
-            return;
+            return null;
         }
         const { x, height, y, width } = startDecorateRender.rect;
         const pos = ElementUtil.getRenderAbsolutePaintPos(startDecorateRender);
         return {
             x: pos.x + width,
-            y: pos.y + height + 5,
-            translateY: this.viewOptions.pageOffset.y
+            y: pos.y,
+            height
         };
     }
     /**
@@ -28093,14 +28112,36 @@ class DocEditor {
                             style: {
                                 position: 'absolute',
                                 left: (position.x - 10) + 'px',
-                                top: position.y + 'px',
+                                top: position.y + 5 + position.height + 'px',
                                 'min-width': '100px',
                                 'background-color': 'white',
                                 'z-index': '1000',
                                 'border-radius': '5px',
                                 'box-shadow': '0 0 5px 0 rgba(0,0,0,0.2)',
                                 'user-select': 'none',
-                            }
+                            },
+                            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';
+                                        }
+                                    }
+                                }
+                            },
                         },
                         children: [
                             {