From 39e7bc962aa5f397f168ea8493f645a420d6dede Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 14:25:04 +0800 Subject: [PATCH 01/10] =?UTF-8?q?fix(extension/label):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E6=96=87=E6=9C=AC=E6=A1=86=E5=9B=BA=E5=AE=9A=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E7=99=BD=E5=BA=95=E5=92=8Chover=E5=90=8E=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E5=81=8F=E7=A7=BB=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/style/index.less | 2 -- packages/extension/src/style/raw.ts | 4 ---- packages/extension/src/tools/label/Label.tsx | 7 ++++++- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/extension/src/style/index.less b/packages/extension/src/style/index.less index ad8e50925..391b52d2a 100644 --- a/packages/extension/src/style/index.less +++ b/packages/extension/src/style/index.less @@ -57,13 +57,11 @@ } &-wrap { - width: 100px; /* 根据需要调整宽度 */ white-space: normal; overflow-wrap: break-word; /* 允许单词内换行 */ } &-nowrap { - width: 100px; /* 根据需要调整宽度 */ overflow: visible; white-space: nowrap; } diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts index 980327024..b75eb0de4 100644 --- a/packages/extension/src/style/raw.ts +++ b/packages/extension/src/style/raw.ts @@ -55,15 +55,11 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs text-overflow: ellipsis; } .lf-label-overlay .lf-label-editor-wrap { - width: 100px; - /* 根据需要调整宽度 */ white-space: normal; overflow-wrap: break-word; /* 允许单词内换行 */ } .lf-label-overlay .lf-label-editor-nowrap { - width: 100px; - /* 根据需要调整宽度 */ overflow: visible; white-space: nowrap; } diff --git a/packages/extension/src/tools/label/Label.tsx b/packages/extension/src/tools/label/Label.tsx index a6f930218..065407762 100644 --- a/packages/extension/src/tools/label/Label.tsx +++ b/packages/extension/src/tools/label/Label.tsx @@ -260,6 +260,8 @@ export class Label extends Component { ? `${transform} rotate(${rotate}deg)` : `${transform} rotate(${vertical ? -0.25 : 0}turn)`, } + const labelContentDom = document.createElement('div') + labelContentDom.style.display = 'inline-block' return (
{ })} style={{ maxWidth: `${maxLabelWidth}px`, - width: `${maxLabelWidth}px`, + boxSizing: 'content-box', + display: 'inline-block', + background: + isEditing || element.BaseType === 'edge' ? '#fff' : 'transparent', ...style, }} dangerouslySetInnerHTML={{ __html: content }} From 3391c95f996e76d1a545d5ab73734d079a4090c5 Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 14:45:51 +0800 Subject: [PATCH 02/10] =?UTF-8?q?fix(extension/label):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8DLabel=E6=A1=86=E5=8D=95=E5=87=BB=E5=90=8E=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E6=8B=96=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/tools/label/Label.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/extension/src/tools/label/Label.tsx b/packages/extension/src/tools/label/Label.tsx index 065407762..c8fb5d1ef 100644 --- a/packages/extension/src/tools/label/Label.tsx +++ b/packages/extension/src/tools/label/Label.tsx @@ -75,14 +75,20 @@ export class Label extends Component { const { editConfigModel: { nodeTextDraggable }, } = graphModel - // 当 label 允许拖拽 且不处于拖拽状态时， StepDrag 开启拖拽 if ((label.draggable ?? nodeTextDraggable) && !this.state.isDragging) { - this.setState({ isDragging: true }) this.stepDrag.handleMouseDown(e) } } + handleMouseUp = (e: MouseEvent) => { + if (this.state.isDragging) { + this.stepDrag.handleMouseUp(e) + } + } handleDragging = ({ deltaX, deltaY }: IDragParams) => { + if (!this.state.isDragging) { + this.setState({ isDragging: true }) + } const { label, element, graphModel } = this.props // DONE: 添加缩放时拖拽的逻辑，对 deltaX 和 deltaY 进行按比例缩放 @@ -260,8 +266,6 @@ export class Label extends Component { ? `${transform} rotate(${rotate}deg)` : `${transform} rotate(${vertical ? -0.25 : 0}turn)`, } - const labelContentDom = document.createElement('div') - labelContentDom.style.display = 'inline-block' return (
{ className={classNames('lf-label-editor-container')} style={containerStyle} onMouseDown={this.handleMouseDown} + onMouseUp={this.handleMouseUp} onDblClick={this.handleDbClick} onBlur={this.handleBlur} onMouseEnter={this.setHoverOn} @@ -286,7 +291,7 @@ export class Label extends Component { })} style={{ maxWidth: `${maxLabelWidth}px`, - boxSizing: 'content-box', + boxSizing: 'border-box', display: 'inline-block', background: isEditing || element.BaseType === 'edge' ? '#fff' : 'transparent', From 7bf13e5c8af24be420fa61860dbfd8017e402fbe Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 16:08:16 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat(extension/label):=20label=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/extension/label/index.tsx | 3 + packages/extension/src/tools/label/Label.tsx | 95 +++++++++++-------- packages/extension/src/tools/label/index.ts | 56 ++++++++++- 3 files changed, 114 insertions(+), 40 deletions(-) diff --git a/examples/engine-browser-examples/src/pages/extension/label/index.tsx b/examples/engine-browser-examples/src/pages/extension/label/index.tsx index 473f5b99d..41d7083ed 100644 --- a/examples/engine-browser-examples/src/pages/extension/label/index.tsx +++ b/examples/engine-browser-examples/src/pages/extension/label/index.tsx @@ -158,6 +158,9 @@ export default function BasicNode() { const lf = new LogicFlow({ ...config, container: containerRef.current as HTMLElement, + keyboard: { + enabled: true, + }, // container: document.querySelector('#graph') as HTMLElement, plugins: [Label, DndPanel], pluginsOptions: { diff --git a/packages/extension/src/tools/label/Label.tsx b/packages/extension/src/tools/label/Label.tsx index c8fb5d1ef..bf254a3d8 100644 --- a/packages/extension/src/tools/label/Label.tsx +++ b/packages/extension/src/tools/label/Label.tsx @@ -25,6 +25,7 @@ export interface ILabelState { isEditing: boolean isHovered: boolean isDragging: boolean + isSelected: boolean } @observer @@ -52,6 +53,7 @@ export class Label extends Component { isEditing: false, isHovered: false, isDragging: false, + isSelected: false, } } @@ -75,8 +77,12 @@ export class Label extends Component { const { editConfigModel: { nodeTextDraggable }, } = graphModel - // 当 label 允许拖拽 且不处于拖拽状态时， StepDrag 开启拖拽 - if ((label.draggable ?? nodeTextDraggable) && !this.state.isDragging) { + // 当 label 允许拖拽 且不处于拖拽状态、不处于编辑状态时， StepDrag 开启拖拽 + if ( + (label.draggable ?? nodeTextDraggable) && + !this.state.isDragging && + !this.state.isEditing + ) { this.stepDrag.handleMouseDown(e) } } @@ -89,27 +95,16 @@ export class Label extends Component { if (!this.state.isDragging) { this.setState({ isDragging: true }) } - const { label, element, graphModel } = this.props + const { label, graphModel } = this.props // DONE: 添加缩放时拖拽的逻辑，对 deltaX 和 deltaY 进行按比例缩放 const { transformModel } = graphModel const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY) - // DONE：更新 label 位置，触发 LABEL:DRAG 事件，并抛出相关的数据 - const { - properties: { _label }, - } = element - const elementLabel = _label as LabelConfig[] - const idx = findIndex(elementLabel, (cur) => cur.id === label.id) - - const target = elementLabel[idx] - elementLabel[idx] = { - ...target, - x: target.x + curDeltaX, - y: target.y + curDeltaY, - } - const targetElem = graphModel.getElement(element.id) - targetElem?.setProperty('_label', elementLabel) + this.setElementModelLabelInfo({ + x: label.x + curDeltaX, + y: label.y + curDeltaY, + }) graphModel.eventCenter.emit('label:drag', { data: label.getData(), @@ -120,6 +115,21 @@ export class Label extends Component { this.setState({ isDragging: false }) } + handleClick = (e: MouseEvent) => { + const { label, element, graphModel } = this.props + // 更新当前Label选中状态 + element.setSelected(!this.state.isSelected) + this.setState({ isSelected: !this.state.isSelected }) + this.setElementModelLabelInfo({ + isSelected: true, + }) + graphModel.eventCenter.emit('label:click', { + data: label.getData(), + e, + model: element, + }) + } + handleDbClick = (e: MouseEvent) => { const { label, element, graphModel } = this.props graphModel.eventCenter.emit('label:dblclick', { @@ -169,6 +179,25 @@ export class Label extends Component { isDragging: false, isHovered: false, }) + this.setState({ isSelected: false }) + } + + setElementModelLabelInfo(data) { + const { label, element, graphModel } = this.props + const { + properties: { _label }, + } = element + const elementLabel = _label as LabelConfig[] + const idx = findIndex(elementLabel, (cur) => cur.id === label.id) + + const target = elementLabel[idx] + elementLabel[idx] = { + ...target, + ...data, + } + + const targetElem = graphModel.getElement(element.id) + targetElem?.setProperty('_label', elementLabel) } // 重新计算 Label 大小 @@ -178,10 +207,13 @@ export class Label extends Component { // 当 Label 被元素遮盖时，隐藏它 componentDidMount() { - const { label, element, graphModel } = this.props + const { element, graphModel } = this.props // 在点击元素、边或者画布 时，结束 Label 的编辑态 graphModel.eventCenter.on('blank:click,node:click,edge:click', () => { + if (this.state.isSelected) { + this.setState({ isSelected: false }) + } // 如果当前 label 处于编辑态，则结束编辑态 if (this.state.isEditing) { this.setState({ isEditing: false }) @@ -189,21 +221,11 @@ export class Label extends Component { const value = this.textRef.current?.innerText ?? '' const content = this.textRef.current?.innerHTML ?? '' - const { - properties: { _label }, - } = element - const elementLabel = _label as LabelConfig[] - const idx = findIndex(elementLabel, (cur) => cur.id === label.id) - - const target = elementLabel[idx] - elementLabel[idx] = { - ...target, + this.setElementModelLabelInfo({ value, content, - } - - const targetElem = graphModel.getElement(element.id) - targetElem?.setProperty('_label', elementLabel) + isSelected: false, + }) element.setElementState(ElementState.DEFAULT) } @@ -211,7 +233,6 @@ export class Label extends Component { this.textRef.current.contentEditable = 'false' } }) - // TODO: 节点拖拽结束后，更新 Label 的位置 // eventCenter.on('node:drag', () => {}) // eventCenter.on('node:drop', () => {}) @@ -222,7 +243,7 @@ export class Label extends Component { componentDidUpdate() { // snapshot: any, // previousState: Readonly, // previousProps: Readonly, - console.log('Label componentDidUpdate') + // console.log('Label componentDidUpdate') // console.log('previousProps', previousProps) // console.log('previousState', previousState) // console.log('snapshot', snapshot) @@ -238,7 +259,7 @@ export class Label extends Component { render() { const { label, element, graphModel } = this.props - const { isDragging, isHovered, isEditing } = this.state + const { isDragging, isHovered, isSelected, isEditing } = this.state const { transformModel } = graphModel const { transform } = transformModel.getTransformStyle() const { @@ -266,7 +287,6 @@ export class Label extends Component { ? `${transform} rotate(${rotate}deg)` : `${transform} rotate(${vertical ? -0.25 : 0}turn)`, } - return (
{ style={containerStyle} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} + onClick={this.handleClick} onDblClick={this.handleDbClick} onBlur={this.handleBlur} onMouseEnter={this.setHoverOn} @@ -286,7 +307,7 @@ export class Label extends Component { className={classNames('lf-label-editor', { 'lf-label-editor-dragging': isDragging, 'lf-label-editor-editing': isEditing, - 'lf-label-editor-hover': !isEditing && isHovered, + 'lf-label-editor-hover': !isEditing && (isHovered || isSelected), [`lf-label-editor-${textOverflowMode}`]: !isEditing, })} style={{ diff --git a/packages/extension/src/tools/label/index.ts b/packages/extension/src/tools/label/index.ts index de1e36eff..80753f704 100644 --- a/packages/extension/src/tools/label/index.ts +++ b/packages/extension/src/tools/label/index.ts @@ -1,5 +1,13 @@ import LogicFlow, { createUuid, GraphModel, TextMode } from '@logicflow/core' -import { cloneDeep, forEach, isArray, isObject, map } from 'lodash-es' +import { + cloneDeep, + forEach, + isArray, + isEmpty, + isEqual, + isObject, + map, +} from 'lodash-es' import LabelOverlay, { LabelConfigType } from './LabelOverlay' import { BBoxInfo, @@ -53,7 +61,7 @@ export class Label implements Extension { this.addEventListeners() // TODO: 3. 自定义快捷键，比如 delete，选中 label 时，移除 label - // this.rewriteShortcut() + this.rewriteShortcut() // 插件中注册 LabelOverlay 工具，用于 label 的编辑 lf.tool.registerTool(LabelOverlay.toolName, LabelOverlay) @@ -377,7 +385,49 @@ export class Label implements Extension { // TODO: others methods ??? } - // private rewriteShortcut() {} + private rewriteShortcut() { + const { keyboard, graphModel } = this.lf + const { + options: { keyboard: keyboardOptions }, + } = keyboard + keyboard.off(['backspace']) + keyboard.on(['backspace'], () => { + if (!keyboardOptions?.enabled) return true + if (graphModel.textEditElement) return true + const elements = graphModel.getSelectElements(true) + this.lf.clearSelectElements() + elements.edges.forEach((edge) => { + const { properties } = edge + if (properties && !isEmpty(properties._label)) { + const newLabelList = properties._label.filter( + (label) => !label.isSelected, + ) + // 如果两个labelList长度不一致，说明有选中的元素，此时backspace做的动作是删除label + if (!isEqual(newLabelList.length, properties._label.length)) { + const edgeModel = graphModel.getEdgeModelById(edge.id) + edgeModel?.setProperty('_label', newLabelList) + return + } + } + edge.id && this.lf.deleteEdge(edge.id) + }) + elements.nodes.forEach((node) => { + const { properties } = node + if (properties && !isEmpty(properties._label)) { + const newLabelList = properties._label.filter( + (label) => !label.isSelected, + ) + if (!isEqual(newLabelList.length, properties._label.length)) { + const nodeModel = graphModel.getNodeModelById(node.id) + nodeModel?.setProperty('_label', newLabelList) + return + } + } + node.id && this.lf.deleteNode(node.id) + }) + return false + }) + } /** * 更新当前渲染使用的 Text or Label 模式 From 471fecaf94bb7a6378c5b4a19f9c9ad2230e9ccd Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 16:10:47 +0800 Subject: [PATCH 04/10] =?UTF-8?q?fix(extension/label):=20=E6=98=AF?= =?UTF-8?q?=E5=90=A6=E6=89=A7=E8=A1=8C=E5=88=A0=E9=99=A4=E9=80=BB=E8=BE=91?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BD=93=E5=89=8D=E7=94=BB=E5=B8=83=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E7=8A=B6=E6=80=81=E7=9A=84=E5=88=A4=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/tools/label/index.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/tools/label/index.ts b/packages/extension/src/tools/label/index.ts index 80753f704..43631284a 100644 --- a/packages/extension/src/tools/label/index.ts +++ b/packages/extension/src/tools/label/index.ts @@ -396,9 +396,16 @@ export class Label implements Extension { if (graphModel.textEditElement) return true const elements = graphModel.getSelectElements(true) this.lf.clearSelectElements() + const { + graphModel: { editConfigModel }, + } = this.lf elements.edges.forEach((edge) => { const { properties } = edge - if (properties && !isEmpty(properties._label)) { + if ( + properties && + !isEmpty(properties._label) && + editConfigModel.textMode === TextMode.LABEL + ) { const newLabelList = properties._label.filter( (label) => !label.isSelected, ) @@ -413,7 +420,11 @@ export class Label implements Extension { }) elements.nodes.forEach((node) => { const { properties } = node - if (properties && !isEmpty(properties._label)) { + if ( + properties && + !isEmpty(properties._label) && + editConfigModel.textMode === TextMode.LABEL + ) { const newLabelList = properties._label.filter( (label) => !label.isSelected, ) From 929e67b0657225c967e3ada9d5c0768d6f983afe Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 16:40:45 +0800 Subject: [PATCH 05/10] =?UTF-8?q?fix(extension/label):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E8=BE=B9=E6=A1=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/style/index.less | 4 ++-- packages/extension/src/style/raw.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/extension/src/style/index.less b/packages/extension/src/style/index.less index 391b52d2a..58dde5ac8 100644 --- a/packages/extension/src/style/index.less +++ b/packages/extension/src/style/index.less @@ -32,13 +32,13 @@ } &-editing { - border: 2px solid #275dc5; + outline: 2px solid #275dc5; outline: none; cursor: text; } &-hover { - border: 2px dashed #acacac; + outline: 2px dashed #acacac; } // textOverflowMode diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts index b75eb0de4..1385d46c1 100644 --- a/packages/extension/src/style/raw.ts +++ b/packages/extension/src/style/raw.ts @@ -33,12 +33,12 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs cursor: move; } .lf-label-overlay .lf-label-editor-editing { - border: 2px solid #275dc5; + outline: 2px solid #275dc5; outline: none; cursor: text; } .lf-label-overlay .lf-label-editor-hover { - border: 2px dashed #acacac; + outline: 2px dashed #acacac; } .lf-label-overlay .lf-label-editor-clip { width: 100px; From 0f8bf72c22c77b717742a17e34865154d55322b8 Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 17:24:14 +0800 Subject: [PATCH 06/10] =?UTF-8?q?fix(extension/style):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E6=8B=96=E6=8B=BD=E9=9D=A2=E6=9D=BF=E8=A2=ABlabel?= =?UTF-8?q?=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/style/index.less | 1 + packages/extension/src/style/raw.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/extension/src/style/index.less b/packages/extension/src/style/index.less index 58dde5ac8..8de085b94 100644 --- a/packages/extension/src/style/index.less +++ b/packages/extension/src/style/index.less @@ -177,6 +177,7 @@ /* dndpanel */ .lf-dndpanel { position: absolute; + z-index: 999; margin: 5px; padding: 15px 5px; background: rgb(255 255 255 / 80%); diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts index 1385d46c1..6991b88d0 100644 --- a/packages/extension/src/style/raw.ts +++ b/packages/extension/src/style/raw.ts @@ -154,6 +154,7 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs } /* dndpanel */ .lf-dndpanel { + z-index: 999; position: absolute; margin: 5px; padding: 15px 5px; From 48060a21035e125ab29002d7d09576df53129653 Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 17:25:33 +0800 Subject: [PATCH 07/10] =?UTF-8?q?fix(core):=20=E4=BF=AE=E5=A4=8D=E4=BD=BF?= =?UTF-8?q?=E7=94=A8label=E6=83=85=E5=86=B5=E4=B8=8B=E5=8F=8C=E5=87=BB?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E4=BC=9A=E8=AE=A9=E8=8A=82=E7=82=B9=E8=BF=9B?= =?UTF-8?q?=E5=85=A5=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91=E6=80=81=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/view/node/BaseNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/view/node/BaseNode.tsx b/packages/core/src/view/node/BaseNode.tsx index 787a6fb14..bfde37d11 100644 --- a/packages/core/src/view/node/BaseNode.tsx +++ b/packages/core/src/view/node/BaseNode.tsx @@ -377,7 +377,7 @@ export abstract class BaseNode

extends Component< // 不是双击的，默认都是单击 if (isDoubleClick) { if (editConfigModel.nodeTextEdit) { - if (model.text.editable) { + if (model.text.editable && editConfigModel.textMode === TextMode.TEXT) { model.setSelected(false) graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT) } From 0a7275c5ac9ea35cba6a7f3ef04073cbd2b0e5f1 Mon Sep 17 00:00:00 2001 From: liuziqi Date: Thu, 21 Nov 2024 17:26:26 +0800 Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E5=85=B6=E4=BB=96label=E6=97=B6=E5=BD=93=E5=89=8Dlabe?= =?UTF-8?q?l=E7=8A=B6=E6=80=81=E4=B8=8D=E6=9B=B4=E6=96=B0=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/tools/label/Label.tsx | 70 ++++++++++++------- .../extension/src/tools/label/LabelModel.ts | 1 + 2 files changed, 46 insertions(+), 25 deletions(-) diff --git a/packages/extension/src/tools/label/Label.tsx b/packages/extension/src/tools/label/Label.tsx index bf254a3d8..0117f8889 100644 --- a/packages/extension/src/tools/label/Label.tsx +++ b/packages/extension/src/tools/label/Label.tsx @@ -178,8 +178,8 @@ export class Label extends Component { this.setState({ isDragging: false, isHovered: false, + isSelected: false, }) - this.setState({ isSelected: false }) } setElementModelLabelInfo(data) { @@ -207,32 +207,52 @@ export class Label extends Component { // 当 Label 被元素遮盖时，隐藏它 componentDidMount() { - const { element, graphModel } = this.props + const { label, element, graphModel } = this.props // 在点击元素、边或者画布 时，结束 Label 的编辑态 - graphModel.eventCenter.on('blank:click,node:click,edge:click', () => { - if (this.state.isSelected) { - this.setState({ isSelected: false }) - } - // 如果当前 label 处于编辑态，则结束编辑态 - if (this.state.isEditing) { - this.setState({ isEditing: false }) - - const value = this.textRef.current?.innerText ?? '' - const content = this.textRef.current?.innerHTML ?? '' - - this.setElementModelLabelInfo({ - value, - content, - isSelected: false, - }) - - element.setElementState(ElementState.DEFAULT) - } - if (this.textRef.current) { - this.textRef.current.contentEditable = 'false' - } - }) + graphModel.eventCenter.on( + 'blank:click,node:click,edge:click,label:click', + ({ data }) => { + // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于选中态 + // 则取消选中态 + if ( + data?.type !== 'label' || + (data.type === 'label' && data.id !== label.id) || + this.state.isSelected + ) { + this.setState({ isSelected: false }) + } + // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于编辑态 + // 则结束编辑态 + if ( + (data?.type !== 'label' || + (data.type == 'label' && data.id !== label.id)) && + this.state.isEditing + ) { + this.setState({ isEditing: false }) + + const value = this.textRef.current?.innerText ?? '' + const content = this.textRef.current?.innerHTML ?? '' + + this.setElementModelLabelInfo({ + value, + content, + isSelected: false, + }) + + element.setElementState(ElementState.DEFAULT) + } + // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 的文本DOM存在 + // 则结束文本DOM的编辑态 + if ( + (data?.type !== 'label' || + (data.type == 'label' && data.id !== label.id)) && + this.textRef.current + ) { + this.textRef.current.contentEditable = 'false' + } + }, + ) // TODO: 节点拖拽结束后，更新 Label 的位置 // eventCenter.on('node:drag', () => {}) // eventCenter.on('node:drop', () => {}) diff --git a/packages/extension/src/tools/label/LabelModel.ts b/packages/extension/src/tools/label/LabelModel.ts index a9e41606d..87d35018b 100644 --- a/packages/extension/src/tools/label/LabelModel.ts +++ b/packages/extension/src/tools/label/LabelModel.ts @@ -64,6 +64,7 @@ export class LabelModel { id: this.id, x: this.x, y: this.y, + type: 'label', content: this.content, value: this.value, rotate: this.rotate, From cd9bfb63063b1d5668e5ff35052d0f7cf0a91e5a Mon Sep 17 00:00:00 2001 From: boyongjiong Date: Mon, 25 Nov 2024 20:52:18 +0800 Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=E5=9C=A8=20Label=20=E6=8F=92?= =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E9=9C=80=E8=A6=81=E4=BD=BF=E7=94=A8=20getDat?= =?UTF-8?q?a=20=E4=B8=AD=E7=9A=84=20type=20=E5=AD=97=E6=AE=B5=EF=BC=8C?= =?UTF-8?q?=E4=BD=86=E7=B1=BB=E5=9E=8B=E6=9C=AA=E5=AE=9A=E4=B9=89=EF=BC=8C?= =?UTF-8?q?=E6=89=93=E5=8C=85=E4=BC=9A=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 解决该问题 --- packages/core/src/LogicFlow.tsx | 1 + packages/extension/src/style/raw.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/LogicFlow.tsx b/packages/core/src/LogicFlow.tsx index 03933cfb9..89202cbab 100644 --- a/packages/core/src/LogicFlow.tsx +++ b/packages/core/src/LogicFlow.tsx @@ -1451,6 +1451,7 @@ export namespace LogicFlow { // label数据类型声明 export type LabelConfig = { id?: string // label唯一标识 + type?: string x: number y: number content?: string // 富文本内容 diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts index 6991b88d0..f33547c06 100644 --- a/packages/extension/src/style/raw.ts +++ b/packages/extension/src/style/raw.ts @@ -154,8 +154,8 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs } /* dndpanel */ .lf-dndpanel { - z-index: 999; position: absolute; + z-index: 999; margin: 5px; padding: 15px 5px; background: rgba(255, 255, 255, 0.8); From 71c4b7eacbb2c6fd6d1c22f24c50dbc46f1a882a Mon Sep 17 00:00:00 2001 From: liuziqi Date: Tue, 26 Nov 2024 11:13:11 +0800 Subject: [PATCH 10/10] =?UTF-8?q?style(extension/labable):=20=E8=A7=A3?= =?UTF-8?q?=E5=86=B3.lf-label-overlay=E7=9A=84=E9=87=8D=E5=A4=8D=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/style/index.less | 1 - packages/extension/src/style/raw.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/extension/src/style/index.less b/packages/extension/src/style/index.less index 8de085b94..02cf040a6 100644 --- a/packages/extension/src/style/index.less +++ b/packages/extension/src/style/index.less @@ -33,7 +33,6 @@ &-editing { outline: 2px solid #275dc5; - outline: none; cursor: text; } diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts index f33547c06..e83c0deb0 100644 --- a/packages/extension/src/style/raw.ts +++ b/packages/extension/src/style/raw.ts @@ -34,7 +34,6 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs } .lf-label-overlay .lf-label-editor-editing { outline: 2px solid #275dc5; - outline: none; cursor: text; } .lf-label-overlay .lf-label-editor-hover {