@logicflow/extension 2.0.10 → 2.0.12

package/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<ILabelProps, ILabelState> {
       isEditing: false,
       isHovered: false,
       isDragging: false,
+      isSelected: false,
     }
   }
 
@@ -75,35 +77,34 @@ export class Label extends Component<ILabelProps, ILabelState> {
     const {
       editConfigModel: { nodeTextDraggable },
     } = graphModel
-
-    // 当 label 允许拖拽 且不处于拖拽状态时， StepDrag 开启拖拽
-    if ((label.draggable ?? nodeTextDraggable) && !this.state.isDragging) {
-      this.setState({ isDragging: true })
+    // 当 label 允许拖拽 且不处于拖拽状态、不处于编辑状态时， StepDrag 开启拖拽
+    if (
+      (label.draggable ?? nodeTextDraggable) &&
+      !this.state.isDragging &&
+      !this.state.isEditing
+    ) {
       this.stepDrag.handleMouseDown(e)
     }
   }
+  handleMouseUp = (e: MouseEvent) => {
+    if (this.state.isDragging) {
+      this.stepDrag.handleMouseUp(e)
+    }
+  }
   handleDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const { label, element, graphModel } = this.props
+    if (!this.state.isDragging) {
+      this.setState({ isDragging: true })
+    }
+    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(),
@@ -114,6 +115,21 @@ export class Label extends Component<ILabelProps, ILabelState> {
     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', {
@@ -162,9 +178,28 @@ export class Label extends Component<ILabelProps, ILabelState> {
     this.setState({
       isDragging: false,
       isHovered: false,
+      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 大小
   reCalcLabelSize = () => {}
 
@@ -175,37 +210,49 @@ export class Label extends Component<ILabelProps, ILabelState> {
     const { label, element, graphModel } = this.props
 
     // 在点击元素、边或者画布 时，结束 Label 的编辑态
-    graphModel.eventCenter.on('blank:click,node:click,edge:click', () => {
-      // 如果当前 label 处于编辑态，则结束编辑态
-      if (this.state.isEditing) {
-        this.setState({ isEditing: false })
-
-        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,
-          value,
-          content,
+    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 })
         }
-
-        const targetElem = graphModel.getElement(element.id)
-        targetElem?.setProperty('_label', elementLabel)
-
-        element.setElementState(ElementState.DEFAULT)
-      }
-      if (this.textRef.current) {
-        this.textRef.current.contentEditable = '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', () => {})
@@ -216,7 +263,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
 
   componentDidUpdate() {
     // snapshot: any, // previousState: Readonly<ILabelState>, // previousProps: Readonly<ILabelProps>,
-    console.log('Label componentDidUpdate')
+    // console.log('Label componentDidUpdate')
     // console.log('previousProps', previousProps)
     // console.log('previousState', previousState)
     // console.log('snapshot', snapshot)
@@ -232,7 +279,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
 
   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 {
@@ -260,13 +307,14 @@ export class Label extends Component<ILabelProps, ILabelState> {
         ? `${transform} rotate(${rotate}deg)`
         : `${transform} rotate(${vertical ? -0.25 : 0}turn)`,
     }
-
     return (
       <div
         id={`element-container-${id}`}
         className={classNames('lf-label-editor-container')}
         style={containerStyle}
         onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        onClick={this.handleClick}
         onDblClick={this.handleDbClick}
         onBlur={this.handleBlur}
         onMouseEnter={this.setHoverOn}
@@ -279,12 +327,15 @@ export class Label extends Component<ILabelProps, ILabelState> {
           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={{
             maxWidth: `${maxLabelWidth}px`,
-            width: `${maxLabelWidth}px`,
+            boxSizing: 'border-box',
+            display: 'inline-block',
+            background:
+              isEditing || element.BaseType === 'edge' ? '#fff' : 'transparent',
             ...style,
           }}
           dangerouslySetInnerHTML={{ __html: content }}

package/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,

package/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,60 @@ 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()
+      const {
+        graphModel: { editConfigModel },
+      } = this.lf
+      elements.edges.forEach((edge) => {
+        const { properties } = edge
+        if (
+          properties &&
+          !isEmpty(properties._label) &&
+          editConfigModel.textMode === TextMode.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) &&
+          editConfigModel.textMode === TextMode.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 模式