@hailin-zheng/editor-core 2.0.28 → 2.0.30

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();
@@ -2364,7 +2373,7 @@ class DataEleCheckProps extends DataEleBaseProps {
         if (this.falseChar !== falseChar) {
             props.falseChar = this.falseChar;
         }
-        if (this.border) {
+        if (!this.border) {
             props.border = this.border;
         }
         if (this.trueStateColor !== '#f00000') {
@@ -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",
@@ -12374,14 +12383,14 @@ class ElementUtil {
             }
         };
     }
-    static getMousePos(e) {
+    static getMousePos(e, scale = 1) {
         const svgContainer = e.currentTarget;
         const parentRect = svgContainer.getBoundingClientRect();
         const localX = e.clientX - parentRect.x; //+ this.viewOptions.pageOffset.x;
         const localY = e.clientY - parentRect.y; //+ this.viewOptions.pageOffset.y;
         return {
-            x: localX,
-            y: localY
+            x: localX / scale,
+            y: localY / scale
         };
     }
     static createClipPath(id, width, height, x = 0, y = 0) {
@@ -16120,8 +16129,8 @@ class DocumentPaint {
     getDocumentContainerHeight() {
         if (this.docPages.length > 0) {
             return {
-                width: this.docContainer.rect.width * this.viewOptions.scale,
-                height: this.docContainer.rect.height * this.viewOptions.scale
+                width: this.docContainer.rect.width,
+                height: this.docContainer.rect.height
             };
         }
         else {
@@ -16877,21 +16886,22 @@ class DocumentEvent {
         this.bindEvent();
     }
     getEventListener() {
+        const scale = this.viewOptions.scale;
         return {
             mousedown: (evt) => {
-                this.mousedown(evt, ElementUtil.getMousePos(evt));
+                this.mousedown(evt, ElementUtil.getMousePos(evt, scale));
             },
             mouseup: (evt) => {
-                this.mouseup(evt, ElementUtil.getMousePos(evt));
+                this.mouseup(evt, ElementUtil.getMousePos(evt, scale));
             },
             click: (evt) => {
                 this.mouseClickHandle(evt);
             },
             mousemove: (evt) => {
-                this.mousemove(evt, ElementUtil.getMousePos(evt));
+                this.mousemove(evt, ElementUtil.getMousePos(evt, scale));
             },
             dblclick: (evt) => {
-                this.mouseDblClickHandle(evt, ElementUtil.getMousePos(evt));
+                this.mouseDblClickHandle(evt, ElementUtil.getMousePos(evt, scale));
             },
             contextmenu: (evt) => {
                 this.contextMenu.next(evt);
@@ -19971,11 +19981,10 @@ function createPrintTemplate({ width, height, orient }) {
       @page {
           size: ${orient};
           margin: 0;
-          padding: 0;
       }
       div {
           width: ${width}mm;
-          height: ${height}mm;
+          min-height: ${height}mm;
           font-size: 0;
       }
       @media print {
@@ -19983,7 +19992,6 @@ function createPrintTemplate({ width, height, orient }) {
           body {
               width: ${width}mm;
               height: ${height}mm;
-              margin: 0;
           }
           div {
               width: initial;
@@ -26134,14 +26142,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: []
         };
@@ -27027,7 +27057,15 @@ class DocEditor {
                                 }
                             },
                             children: [
-                                docContentVNode, inputVNode, dropContainer
+                                {
+                                    sel: 'div.scale-container', data: {
+                                        style: {
+                                            transform: 'scale(' + this.viewOptions.scale + ')',
+                                            transformOrigin: 'left top'
+                                        }
+                                    },
+                                    children: [docContentVNode, inputVNode, dropContainer]
+                                }
                             ]
                         }, ruleFunc.refreshRuleSvg().render()
                     ]
@@ -27314,14 +27352,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
         };
     }
     /**
@@ -27392,6 +27430,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;
+        });
         return scale;
     }
     updateRenderCtx() {
@@ -28083,14 +28126,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: [
                             {