@logicflow/extension 2.0.11 → 2.0.12

package/src/materials/node-selection/index.ts

@@ -1,5 +1,11 @@
 import { get } from 'lodash-es'
-import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
+import LogicFlow, {
+  BaseNodeModel,
+  h,
+  PolygonNode,
+  PolygonNodeModel,
+} from '@logicflow/core'
+import { ResizeControl } from '@logicflow/core/lib/view/Control'
 
 export type INodeSelectionProperties = {
   strokeColor?: string | 'none'
@@ -124,7 +130,7 @@ class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
    * 更新points - 多边形顶点坐标集合
    * @param points
    */
-  updatePoints(points) {
+  updatePoints(points: [number, number][]) {
     this.points = points
   }
 
@@ -139,7 +145,7 @@ class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
   /**
    * 计算新的 points 和 x y
    */
-  updatePointsByNodes(nodesIds) {
+  updatePointsByNodes(nodesIds: string[]) {
     const points: [number, number][] = []
     let minX = Infinity
     let minY = Infinity
@@ -165,18 +171,74 @@ class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
       y: (maxY + minY) / 2,
     })
   }
+
+  isResize = false
+  override resize(
+    resizeInfo: ResizeControl.ResizeInfo,
+  ): ResizeControl.ResizeNodeData {
+    this.isResize = true
+    const { width, height } = resizeInfo
+    const scale = {
+      x: width / this.width,
+      y: height / this.height,
+    }
+    const childIds = (this.properties.node_selection_ids || []).slice()
+    const childModels: BaseNodeModel[] = []
+    const usedGroupId = new Set<string>()
+    while (childIds.length) {
+      const id = childIds.shift()!
+      const node = this.graphModel.nodesMap[id]?.model
+      if (!node) {
+        continue
+      }
+      if (!isNodeSelectionModel(node)) {
+        childModels.push(node)
+        continue
+      }
+      // 跳出循环引用
+      if (usedGroupId.has(node.id)) {
+        continue
+      }
+      usedGroupId.add(node.id)
+      childIds.push(...(node.properties.node_selection_ids || []))
+    }
+
+    const begin = {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+    }
+
+    const res = super.resize(resizeInfo)
+
+    const end = {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+    }
+
+    childModels.forEach((node) => {
+      node.width = node.width * scale.x
+      node.height = node.height * scale.y
+      const deltaX = (node.x - begin.x) * scale.x + end.x - node.x
+      const deltaY = (node.y - begin.y) * scale.y + end.y - node.y
+      node.move(deltaX, deltaY, true)
+    })
+    this.isResize = false
+    return res
+  }
 }
 
+const NODE_SELECTION_TYPE = 'node-selection'
 class NodeSelection {
   static pluginName = 'node-selection'
-  lf // lf 实例
+  lf: LogicFlow // lf 实例
   selectNodes: any[] = [] // 选择的nodes
   currentClickNode // 当前点击的节点，选中的节点是无序的
   d = 10
 
-  constructor({ lf }) {
+  constructor({ lf }: LogicFlow.IExtensionProps) {
+    this.lf = lf
     lf.register({
-      type: 'node-selection',
+      type: NODE_SELECTION_TYPE,
       view: NodeSelectionView,
       model: NodeSelectionModel,
     })
@@ -199,6 +261,8 @@ class NodeSelection {
       properties: {
         node_selection_ids: this.selectNodesIds,
       },
+      x: 0,
+      y: 0,
     })
     node.updatePointsByNodes(this.selectNodesIds)
   }
@@ -215,7 +279,7 @@ class NodeSelection {
 
     this.lf
       .getNodeModelById(nodeSelection.id)
-      .updatePointsByNodes(this.selectNodesIds)
+      ?.updatePointsByNodes(this.selectNodesIds)
   }
 
   /**
@@ -228,24 +292,44 @@ class NodeSelection {
     const oldIds = ids.filter((id) => id !== this.currentClickNode.id)
     return rawData.nodes.find((node) => {
       if (node.type === 'node-selection') {
-        const nodeSelectionIds = get(node, 'properties.node_selection_ids', [])
+        const nodeSelectionIds = get(
+          node,
+          'properties.node_selection_ids',
+          [],
+        ) as string[]
         return oldIds.every((id) => nodeSelectionIds.includes(id))
       }
       return false
     })
   }
 
-  render(lf) {
+  protected onNodeChange(lf: LogicFlow, model: BaseNodeModel) {
+    const connectedSelections = lf.graphModel.nodes.filter((node) => {
+      if (!isNodeSelectionModel(node)) {
+        return false
+      }
+      const childIds: string[] = node.properties.node_selection_ids || []
+      return childIds.includes(model.id)
+    })
+
+    Promise.resolve().then(() => {
+      connectedSelections.forEach((node) => {
+        node.updatePointsByNodes(node.properties.node_selection_ids || [])
+      })
+    })
+  }
+
+  render(lf: LogicFlow) {
     this.lf = lf
 
     lf.on('node:click', (val) => {
-      if (!val.e.shiftKey || val.data.type === 'node-selection') return
+      if (!val.e.shiftKey || val.data.type === NODE_SELECTION_TYPE) return
       this.currentClickNode = val.data
 
       // 如果selectNodesIds中已存在此节点，则取消选中此节点
       let hasExists = false
       if (this.selectNodesIds.includes(val.data.id)) {
-        this.lf.getNodeModelById(val.data.id).setSelected(false)
+        this.lf.getNodeModelById(val.data.id)?.setSelected(false)
         hasExists = true
       }
 
@@ -263,17 +347,34 @@ class NodeSelection {
       }
     })
     lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
-      if (model.type === 'node-selection') {
-        // 如果移动的是分组，那么分组的子节点也跟着移动。
-        const nodeIds = model.properties.node_selection_ids
+      this.onNodeChange(lf, model)
+      /**
+       * 如果移动的是分组，那么分组的子节点也跟着移动。
+       * 忽略来自分组resize导致的move
+       */
+      if (isNodeSelectionModel(model) && !model.isResize) {
+        const nodeIds = model.properties.node_selection_ids || []
         lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
         return true
       }
       return true
     })
+
+    lf.graphModel.addNodeResizeRules((model) => {
+      if (!isNodeSelectionModel(model)) {
+        this.onNodeChange(lf, model)
+      }
+      return true
+    })
   }
 }
 
+const isNodeSelectionModel = (
+  node: BaseNodeModel,
+): node is NodeSelectionModel => {
+  return !!(node && (node.type as string) === NODE_SELECTION_TYPE)
+}
+
 export default NodeSelection
 
 export { NodeSelection }

package/src/style/index.less

@@ -32,13 +32,12 @@
     }
 
     &-editing {
-      border: 2px solid #275dc5;
-      outline: none;
+      outline: 2px solid #275dc5;
       cursor: text;
     }
 
     &-hover {
-      border: 2px dashed #acacac;
+      outline: 2px dashed #acacac;
     }
 
     // textOverflowMode
@@ -57,13 +56,11 @@
     }
 
     &-wrap {
-      width: 100px; /* 根据需要调整宽度 */
       white-space: normal;
       overflow-wrap: break-word; /* 允许单词内换行 */
     }
 
     &-nowrap {
-      width: 100px; /* 根据需要调整宽度 */
       overflow: visible;
       white-space: nowrap;
     }
@@ -179,6 +176,7 @@
 /* dndpanel */
 .lf-dndpanel {
   position: absolute;
+  z-index: 999;
   margin: 5px;
   padding: 15px 5px;
   background: rgb(255 255 255 / 80%);

package/src/style/raw.ts

@@ -33,12 +33,11 @@ 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: none;
+  outline: 2px solid #275dc5;
   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;
@@ -55,15 +54,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;
 }
@@ -159,6 +154,7 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
 /* dndpanel */
 .lf-dndpanel {
   position: absolute;
+  z-index: 999;
   margin: 5px;
   padding: 15px 5px;
   background: rgba(255, 255, 255, 0.8);

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 模式