diff --git a/packages/antv-x6-design/src/plugins/logic-design/custom-node/remark-node.ts b/packages/antv-x6-design/src/plugins/logic-design/custom-node/remark-node.ts index e3d58c70f706756fce3ff7ac9fba4a8da6b6674f..7237850416ab76f31ed1d4fab3ae9903663492f9 100644 --- a/packages/antv-x6-design/src/plugins/logic-design/custom-node/remark-node.ts +++ b/packages/antv-x6-design/src/plugins/logic-design/custom-node/remark-node.ts @@ -10,21 +10,27 @@ import { Namespace } from '@ibiz-template/core'; */ export class RemarkNode extends Shape.HTML { /** - * 输入数量 - * - * @type {(number)} + * @description 输入数量 + * @type {number} * @memberof RemarkNode */ inputNum: number = 0; /** - * 输出数量 - * - * @type {(number)} + * @description 输出数量 + * @type {number} * @memberof RemarkNode */ outputNum: number = 0; + /** + * @description 是否为编辑状态 + * @private + * @type {boolean} + * @memberof RemarkNode + */ + private isEditable: boolean = false; + constructor(metadata: Node.Metadata = {}) { const data = metadata.data || {}; const nodeSize = { @@ -85,12 +91,12 @@ export class RemarkNode extends Shape.HTML { style: { width: '100%', height: '100%' }, children: [ { - tagName: 'div', + tagName: 'textarea', + selector: 'textarea', className: ns.b('remark'), textContent: data.memo, attrs: { id: this.id, // 添加唯一ID - contenteditable: 'false', }, }, ], @@ -110,7 +116,7 @@ export class RemarkNode extends Shape.HTML { this.setData( { ...this.getData(), - memo: contentEl.innerText, + memo: (contentEl as HTMLTextAreaElement).value, }, { silent: true }, ); @@ -119,19 +125,50 @@ export class RemarkNode extends Shape.HTML { } /** - * @description 禁用键盘 - * - 禁止复制,粘贴,剪切,回车换行 + * @description 重写移动方法,在编辑状态下禁止移动 + * @param {number} dx + * @param {number} dy + * @param {*} [options] + * @returns {*} + * @memberof RemarkNode + */ + translate(dx: number, dy: number, options?: any) { + // 编辑状态下禁止移动 + if (this.isEditable) return this; + return super.translate(dx, dy, options); + } + + /** + * @description 设置节点是否可移动 + * @private + * @param {boolean} editable + * @memberof RemarkNode + */ + private setMovable(editable: boolean): void { + this.isEditable = editable; + this.setAttrs({ + textarea: { + style: { + 'cursor': editable ? 'text' : 'move', + }, + }, + }); + this.setProp('movable', !editable); + } + + /** + * @description 监听键盘事件 * @private * @param {KeyboardEvent} e * @memberof RemarkNode */ - private disableKeyboardEvent(e: KeyboardEvent): void { + private listerKeyboardEvent(e: KeyboardEvent): void { + // 阻止复制,粘贴,剪切,回车冒泡 防止执行异常 if ( e.key === 'Enter' || ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'v' || e.key === 'x')) ) { - e.preventDefault(); e.stopPropagation(); } } @@ -144,22 +181,22 @@ export class RemarkNode extends Shape.HTML { */ private setNodeEditable(editable: boolean): void { const contentEl = document.getElementById(this.id); - if (contentEl && contentEl.contentEditable !== editable.toString()) { - contentEl.contentEditable = editable.toString(); + if (contentEl) { + this.setMovable(editable); if (editable) { // 可编辑时添加事件监听 contentEl.focus(); contentEl.addEventListener('blur', this.saveMome.bind(this)); contentEl.addEventListener( 'keydown', - this.disableKeyboardEvent.bind(this), + this.listerKeyboardEvent.bind(this), ); } else { // 不可编辑时移除事件监听 contentEl.removeEventListener('blur', this.saveMome.bind(this)); contentEl.removeEventListener( 'keydown', - this.disableKeyboardEvent.bind(this), + this.listerKeyboardEvent.bind(this), ); } } diff --git a/packages/antv-x6-design/src/plugins/logic-design/index.scss b/packages/antv-x6-design/src/plugins/logic-design/index.scss index 3302c6b50eb04a1f3145219ba27f9d4fac625ee8..520e3b3b3265701530d7cc5ced5d123f58bf114c 100644 --- a/packages/antv-x6-design/src/plugins/logic-design/index.scss +++ b/packages/antv-x6-design/src/plugins/logic-design/index.scss @@ -143,10 +143,10 @@ @include b(logic-node-remark) { width: 100%; height: 100%; - padding: 10px 8px; - overflow: auto; - font-size: 12px; - word-wrap: break-word; + padding: 5px; + cursor: 'move'; + resize: none; + background: transparent; border: none; outline: none; }