@hailin-zheng/editor-core 1.1.11 → 1.1.13

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/controls/SurfaceView.d.ts

@@ -36,7 +36,7 @@ export declare class SurfaceView extends NodeItems {
     invokeInput(data: string): void;
     invokeKeydown(evt: KeyboardEvent): void;
     setInputPosition({ x, y, height }: Omit<Rect, 'width'>): void;
-    private setInputFocus;
+    setInputFocus(state?: boolean): void;
     hiddenInput(): void;
     endInput(): 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;
@@ -11764,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++) {
@@ -13726,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();
         });
@@ -14159,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) {
@@ -14169,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;
@@ -14779,9 +14803,8 @@ class DocumentEvent {
     }
     /**
      * 获取点击的文档区域
-     * @param docRender
-     * @param pos
      * @returns
+     * @param docEvent
      */
     getHitRegion(docEvent) {
         const hitDocInfo = this.getHitDocPage(docEvent);
@@ -14812,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();
+            }
+        }
+    }
 }
 
 /**
@@ -16925,6 +16972,9 @@ class ElementTrackManage {
      * 执行撤销
      */
     undo() {
+        if (!this.canUndo) {
+            return;
+        }
         suppressTracking(() => {
             this.index--;
             this.executeCommand('undo');
@@ -16946,6 +16996,9 @@ class ElementTrackManage {
      * 执行重做
      */
     redo() {
+        if (!this.canRedo) {
+            return;
+        }
         suppressTracking(() => {
             this.executeCommand('redo');
             this.index++;
@@ -18104,7 +18157,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 => {
@@ -18120,6 +18173,9 @@ class NodeEvent {
         canvas.addEventListener('wheel', evt => {
             this.setActiveAppContext(() => this.onWheelHandler(evt));
         });
+        canvas.addEventListener('click', evt => {
+            this.root.setInputFocus(true);
+        });
         canvas.addEventListener('dblclick', evt => {
             this.setActiveAppContext(() => this.onDblClickHandler(evt));
         });
@@ -18422,6 +18478,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--) {
@@ -18971,6 +19051,7 @@ class SurfaceView extends NodeItems {
             this.invokeKeydown(evt);
         });
         this.input.addEventListener('copy', evt => {
+            console.log('copy了');
             this.invokeClipboardEvent(evt, 'copy');
         });
         this.input.addEventListener('paste', evt => {
@@ -19029,6 +19110,7 @@ class SurfaceView extends NodeItems {
             return;
         }
         this.input.style.display = '';
+        this.input.readOnly = false;
         const left = Math.floor(x) + 'px';
         const top = Math.floor(y) + 'px';
         if (left !== this.input.style.left || top !== this.input.style.top) {
@@ -19042,9 +19124,10 @@ class SurfaceView extends NodeItems {
         state ? this.input.focus() : this.input.blur();
     }
     hiddenInput() {
-        this.input.style.display = 'none';
-        this.input.style.left = '0';
-        this.input.style.top = '0';
+        //this.input.style.display = 'none';
+        this.input.style.left = '-2px';
+        this.input.style.top = '-2px';
+        this.input.readOnly = true;
     }
     endInput() {
     }
@@ -20408,7 +20491,7 @@ class CanvasTextEditor extends AbsolutePanel {
      */
     setCursor() {
         const { startControl, startOffset } = this.selectionState;
-        if (!this.canSetCursor()) {
+        if (!this.canSetCursor() || !this.documentEvent.startHitInfo) {
             this.selectionState.editable = false;
             this.documentInput.setCursorVisibility(false);
             return false;
@@ -20873,6 +20956,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