@hailin-zheng/editor-core 1.1.10 → 1.1.12

package/controls/NodeEvent.d.ts

@@ -26,6 +26,8 @@ export declare class NodeEvent {
      */
     onWheelHandler(evt: WheelEvent): void;
     onContextMenuHandler(evt: MouseEvent): void;
+    onCopyHandler(evt: ClipboardEvent): void;
+    onKeydownHandler(evt: KeyboardEvent): void;
     getHitNode(hitPos: Position, parentPos: Position): IHitInfo | null;
     getMouseHitNode(node: NodeCore, hitPos: Position, parentPos: Position): IHitInfo | null;
     invokeNodeFocusedEvent(prevNode: NodeCore | null, prevParents: Array<NodeCore>, currNode: NodeCore | null): void;

package/index-cjs.js

@@ -1958,7 +1958,7 @@ class TableRowProps extends INotifyPropertyChanged {
 class TableProps extends INotifyPropertyChanged {
     id;
     cols;
-    alignment;
+    align;
     border = 'all';
     allowBreakRow;
     clone(dest) {
@@ -1966,7 +1966,7 @@ class TableProps extends INotifyPropertyChanged {
         super.cloneAttachedProperty(clone);
         clone.id = this.id;
         clone.cols = [...this.cols];
-        clone.alignment = this.alignment;
+        clone.align = this.align;
         clone.border = this.border;
         return clone;
     }
@@ -1974,7 +1974,7 @@ class TableProps extends INotifyPropertyChanged {
         return {
             id: this.id,
             cols: this.cols,
-            alignment: this.alignment,
+            alignment: this.align,
             border: this.border
         };
     }
@@ -3202,7 +3202,7 @@ class DataElementRenderObject extends InlineGroupRenderObject {
                 textProps.fontSize = 16;
                 textProps.fontName = viewOptions.defaultFontName;
                 textProps.color = '#fff';
-                const titleWidth = render.contentContext.measureText(caption, textProps).width;
+                const titleWidth = render.contentContext.measureText2(caption, textProps);
                 const x = position.x;
                 const y = position.y - 20;
                 render.contentContext.fillRect(x, y, titleWidth + 10, 20, 'blue');
@@ -4840,7 +4840,9 @@ class TableElement extends BlockContainerElement {
         return clone;
     }
     createRenderObject() {
-        return new TableRenderObject(this);
+        const render = new TableRenderObject(this);
+        render.rect.width = this.props.cols.reduce((prev, curr) => curr + prev, 0);
+        return render;
     }
     beginMeasure(data) {
         super.beginMeasure(data);
@@ -4929,7 +4931,7 @@ class TableFactory extends ElementFactory {
         tbProps.border = props.border || 'all';
         tbProps.cols = [];
         tbProps.id = props.id;
-        tbProps.alignment = props.alignment;
+        tbProps.align = props.align;
         for (const col of cols) {
             if (typeof col === 'object') {
                 tbProps.cols.push(col.width);
@@ -5086,7 +5088,7 @@ class TextGroupElement extends LeafElement {
         return this.textMeasures.map(item => item.char).join('');
     }
     createRenderObject(data) {
-        if (!this.isMeasure || this.modifyFlag !== exports.ModifyFlag.None) {
+        if (!this.isMeasure || this.modifyFlag !== exports.ModifyFlag.None || !this.cacheRender) {
             data.renderCtx.contentContext.measureTextUnits(this.textMeasures, this.props);
             this.isMeasure = true;
         }
@@ -5582,7 +5584,7 @@ class ElementUtil {
                 line.rect.x = innerRect.x;
             }
             line.rect.y = innerRect.height + innerRect.y + line.margin.top;
-            //line.rect.maxWidth = innerRect.maxWidth;
+            this.setHorizontalAlign(line, innerRect);
             innerRect.height += line.rect.height + line.margin.top + line.margin.bottom;
         }
         render.updateRenderHeight(innerRect);
@@ -5590,8 +5592,7 @@ class ElementUtil {
     }
     static remeasureTableRow(rowRender, foreceColIndex = -1) {
         const rowEle = rowRender.element;
-        const rowMinHeight = rowEle.props.minHeight > 19 ? rowEle.props.minHeight : 19;
-        let maxCellHeight = rowMinHeight;
+        let maxCellHeight = rowEle.props.minHeight > 19 ? rowEle.props.minHeight : 19;
         //限制行最小高度
         maxCellHeight = maxCellHeight < 19 ? 19 : maxCellHeight;
         //获取行内非纵向合并单元格的最高单元格高度
@@ -5673,11 +5674,24 @@ class ElementUtil {
         }
     }
     /**
-     * 设置表格横向排列方式
-     * @param tbRender
+     * 设置原色横向排列方式
      * @private
-     */
-    static setTableAlign(tbRender) {
+     * @param render
+     * @param limitRect
+     */
+    static setHorizontalAlign(render, limitRect) {
+        if (render.element && render.element.props && render.element.props.align) {
+            const align = render.element.props.align;
+            if (align) {
+                const remainSpace = limitRect.width - render.rect.width;
+                if (align === 'center') {
+                    render.rect.x = Math.floor(remainSpace / 2);
+                }
+                else if (align === 'end') {
+                    render.rect.x = remainSpace;
+                }
+            }
+        }
         // const {alignment} = tbRender.element.props;
         // if (!alignment) {
         //     return;
@@ -7090,6 +7104,10 @@ class PaintContent {
         const textMeasure = this.ctx.measureText(text);
         return { width: textMeasure.width, height: textProps.fontSize };
     }
+    measureText2(text, font) {
+        this.ctx.font = font.fontSize + 'px ' + font.fontName;
+        return this.ctx.measureText(text).width;
+    }
     measureTextUnits(units, textProps) {
         this.ctx.font = textProps.getFont();
         const letterSpace = textProps.letterSpace ?? 0;
@@ -9741,6 +9759,7 @@ class SelectionState {
     selectedRange;
     editable = true;
     renderContainer;
+    //光标所在的位置，当前位置时相对文档的位置，而非DOM页面中的位置
     cursorPos;
     //当前选区的上下文是否支持留痕修改
     enableTrackChanges = false;
@@ -11763,8 +11782,7 @@ class DocumentArrange {
             item.rect.y = bodyInnerLimitRect.height + item.margin.top;
             pageBodyRender.addChild(item);
             bodyInnerLimitRect.height += item.rect.height + item.margin.top + item.margin.bottom;
-            //上一个元素的bottom-margin
-            //bodyInnerLimitRect.prevMargin = item.margin.bottom;
+            ElementUtil.setHorizontalAlign(item, bodyInnerLimitRect);
             ElementUtil.updateRenderHeightByInnerRect(pageBodyRender, bodyInnerLimitRect);
         };
         for (let i = 0; i < doc.bodyElement.length; i++) {
@@ -13725,6 +13743,9 @@ class DocumentEvent {
         this.editor.addEventListener('contextmenu', evt => {
             this.contextMenu.next(evt.sourceEvt);
         });
+        this.editor.addEventListener('keydown', evt => {
+            this.onKeydown(evt.sourceEvt);
+        });
         this.documentInput.onLeftEvent.subscribe(() => {
             this.moveCursorToLeft();
         });
@@ -14158,6 +14179,10 @@ class DocumentEvent {
     mouseDblClickHandle(nodeEvt) {
         const docEvent = new MouseElementEvent(this.docCtx);
         this.setEventViewPos(nodeEvt.sourceHitPos, docEvent);
+        const hitInfo = this.getHitInfo(docEvent);
+        if (!hitInfo) {
+            return;
+        }
         //需要先处理是否开启页眉页脚编辑功能
         const hitRegion = this.getHitRegion(docEvent);
         if ((hitRegion === 'footer' || hitRegion === 'header') && !this.docCtx.document.headerEditState) {
@@ -14168,7 +14193,7 @@ class DocumentEvent {
             this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);
             return;
         }
-        const hitInfo = this.getHitInfo(docEvent);
+        //const hitInfo = this.getHitInfo(docEvent);
         if (hitInfo) {
             docEvent.source = hitInfo.element;
             docEvent.sourceRender = hitInfo.render;
@@ -14737,7 +14762,7 @@ class DocumentEvent {
             return;
         }
         let { x, y } = this.selectionState.cursorPos;
-        y -= this.viewOptions.pageOffset.y;
+        //y -= this.viewOptions.pageOffset.y;
         for (let i = 0; i < 50; i++) {
             const docEvent = new MouseElementEvent(this.docCtx);
             docEvent.globalX = x;
@@ -14778,9 +14803,8 @@ class DocumentEvent {
     }
     /**
      * 获取点击的文档区域
-     * @param docRender
-     * @param pos
      * @returns
+     * @param docEvent
      */
     getHitRegion(docEvent) {
         const hitDocInfo = this.getHitDocPage(docEvent);
@@ -14811,6 +14835,30 @@ class DocumentEvent {
             return null;
         }
     }
+    onKeydown(evt) {
+        const copy = () => {
+            const input = document.createElement('input');
+            document.body.appendChild(input);
+            input.select();
+            input.focus();
+            input.addEventListener('copy', evt2 => {
+                document.body.removeChild(input);
+                const execCopy = this.editor['execCopy'];
+                execCopy.call(this.editor, evt2);
+            });
+            document.execCommand('copy');
+        };
+        if (navigator.appVersion.indexOf('Mac') >= 0) {
+            if (evt.metaKey && evt.keyCode === 67) {
+                copy();
+            }
+        }
+        else {
+            if (evt.ctrlKey && evt.keyCode === 67) {
+                copy();
+            }
+        }
+    }
 }
 
 /**
@@ -14922,7 +14970,6 @@ class DocumentInput {
      * @param visibility
      */
     setCursorVisibility(visibility) {
-        //this.cursorWrapper.style.display = visibility ? 'block' : 'none';
         if (visibility) {
             this.setInputFocus(true);
         }
@@ -18104,7 +18151,7 @@ class NodeEvent {
         this.canvas = canvas;
         this.setAppState(null);
         canvas.addEventListener('mousedown', evt => {
-            evt.preventDefault();
+            //evt.preventDefault();
             this.setActiveAppContext(() => this.onMousedownHandler(evt));
         });
         canvas.addEventListener('mousemove', evt => {
@@ -18126,6 +18173,9 @@ class NodeEvent {
         canvas.addEventListener('contextmenu', evt => {
             this.setActiveAppContext(() => this.onContextMenuHandler(evt));
         });
+        canvas.addEventListener('keydown', evt => {
+            this.setActiveAppContext(() => this.onKeydownHandler(evt));
+        });
         this.root.addEventListener('preGotFocus', (evt) => {
             this.invokeNodeFocusedEvent(this.prevNode, this.prevFocusNodes, evt.source);
         }, true);
@@ -18422,6 +18472,30 @@ class NodeEvent {
         };
         invokeEvent(onContextMenuEvent, 'contextmenu', this.appState.sourceNode);
     }
+    onCopyHandler(evt) {
+        if (this.appState.sourceNode) {
+            const onCopyEvent = {
+                source: this.appState.sourceNode,
+                cancelable: true,
+                isCancel: false,
+                target: this.appState.sourceNode,
+                sourceEvt: evt
+            };
+            invokeEvent(onCopyEvent, 'copy', this.appState.sourceNode);
+        }
+    }
+    onKeydownHandler(evt) {
+        if (this.appState.sourceNode) {
+            const onKeydownEvent = {
+                source: this.appState.sourceNode,
+                cancelable: true,
+                isCancel: false,
+                target: this.appState.sourceNode,
+                sourceEvt: evt
+            };
+            invokeEvent(onKeydownEvent, 'keydown', this.appState.sourceNode);
+        }
+    }
     getHitNode(hitPos, parentPos) {
         if (this.root.popNodes.length) {
             for (let i = this.root.popNodes.length - 1; i >= 0; i--) {
@@ -20416,8 +20490,6 @@ class CanvasTextEditor extends AbsolutePanel {
         const { startRegion, hitDocIndex } = this.documentEvent.startHitInfo;
         const cursorPos = DocumentCursor.getElementCursorPos(startControl, startOffset, startRegion, hitDocIndex);
         this.docCtx.cursorRect = ElementUtil.cloneRect(cursorPos.rect);
-        this.transToAbsolutePos(ElementUtil.cloneRect(cursorPos.rect));
-        //this.documentInput.setCursorPosition(abPos);
         const focusEvent = {
             target: this,
             source: this,
@@ -20875,6 +20947,13 @@ class CanvasTextEditor extends AbsolutePanel {
         const copySerializeStr = ElementSerialize.getSelectedStruct(this.selectionState, this.viewOptions);
         return ElementSerialize.serializeString(copySerializeStr);
     }
+    /**
+     * 执行编辑器内部复制事件
+     * @param evt
+     */
+    execCopy(evt) {
+        this.documentChange.onCopy(evt);
+    }
     /**
      * 设置纸张方向
      * @param orientation
@@ -21174,11 +21253,12 @@ class CanvasTextEditor extends AbsolutePanel {
     drawCaret(e) {
         const appCtx = getCurrentActiveAppContext();
         if (appCtx) {
-            const caretPos = this.selectionState.cursorPos;
+            let caretPos = this.selectionState.cursorPos;
             if (!caretPos) {
                 appCtx.root.hiddenInput();
                 return;
             }
+            caretPos = ElementUtil.cloneRect(caretPos);
             caretPos.x += this.border + this.padding + e.renderPos.x;
             caretPos.y += this.border + this.padding + e.renderPos.y;
             appCtx.root.setInputPosition(caretPos);