@logicflow/extension 2.0.13 → 2.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.9"
+    "@logicflow/core": "2.0.11"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,7 +31,7 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.0.9"
+    "@logicflow/core": "2.0.11"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/selection-select/index.ts

@@ -166,18 +166,20 @@ export class SelectionSelect {
         true,
       )
       const { dynamicGroup, group } = this.lf.graphModel
+      const nonGroupedElements: typeof elements = []
       elements.forEach((element) => {
         // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
-        if (!group || !group.getNodeGroup(element.id)) {
-          this.lf.selectElementById(element.id, true)
+        if (group && group.getNodeGroup(element.id)) {
+          return
         }
-        // 如果节点属于动态分组，则不不选中节点
-        if (!dynamicGroup || !dynamicGroup.getGroupByNodeId(element.id)) {
-          this.lf.selectElementById(element.id, true)
+        if (dynamicGroup && dynamicGroup.getGroupByNodeId(element.id)) {
+          return
         }
+        this.lf.selectElementById(element.id, true)
+        nonGroupedElements.push(element)
       })
       this.lf.emit('selection:selected', {
-        elements,
+        elements: nonGroupedElements,
         leftTopPoint: lt,
         rightBottomPoint: rb,
       })

package/src/dynamic-group/index.ts

@@ -229,7 +229,8 @@ export class DynamicGroup {
         console.log('isAllowAppendIn', isAllowAppendIn)
         if (isAllowAppendIn) {
           group.addChild(node.id)
-          this.nodeGroupMap.set(node.id, group.id)
+          // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
+          // TODO 下面这个是干什么的，是否需要一起移动到事件的逻辑中？
           group.setAllowAppendChild(true)
         } else {
           // 抛出不允许插入的事件
@@ -242,6 +243,14 @@ export class DynamicGroup {
     }
   }
 
+  onGroupAddNode = ({
+    data: groupData,
+    childId,
+  }: CallbackArgs<'group:add-node'>) => {
+    console.log('group:add-node', groupData)
+    this.nodeGroupMap.set(childId, groupData.id)
+  }
+
   removeNodeFromGroup = ({
     data: node,
     model,
@@ -666,7 +675,7 @@ export class DynamicGroup {
 
     lf.on('graph:updated', ({ data }) => console.log('data', data))
 
-    lf.on('group:add-node', ({ data }) => console.log('group:add-node', data))
+    lf.on('group:add-node', this.onGroupAddNode)
 
     // https://github.com/didi/LogicFlow/issues/1346
     // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
@@ -733,6 +742,7 @@ export class DynamicGroup {
     this.lf.off('node:click', this.onNodeSelect)
     this.lf.off('node:mousemove', this.onNodeMove)
     this.lf.off('graph:rendered', this.onGraphRendered)
+    this.lf.off('group:add-node', this.onGroupAddNode)
 
     // 还原 lf.addElements 方法？
     // 移除 graphModel 上重写的 addNodeMoveRules 方法？

package/src/dynamic-group/model.ts

@@ -181,6 +181,35 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     return data
   }
 
+  /**
+   * 获取分组内的节点
+   * @param groupModel
+   */
+  getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] {
+    const nodeIds: string[] = []
+    if (groupModel.isGroup) {
+      forEach(Array.from(groupModel.children), (nodeId: string) => {
+        nodeIds.push(nodeId)
+      })
+    }
+    return nodeIds
+  }
+
+  getMoveDistance(
+    deltaX: number,
+    deltaY: number,
+    isIgnoreRule = false,
+  ): [number, number] {
+    const [moveDeltaX, moveDeltaY] = super.getMoveDistance(
+      deltaX,
+      deltaY,
+      isIgnoreRule,
+    )
+    const nodeIds = this.getNodesInGroup(this)
+    this.graphModel.moveNodes(nodeIds, deltaX, deltaY, isIgnoreRule)
+    return [moveDeltaX, moveDeltaY]
+  }
+
   /**
    * 重写 getHistoryData 方法
    */
@@ -463,7 +492,10 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   addChild(id: string) {
     this.children.add(id)
     const groupData = this.getData()
-    this.graphModel.eventCenter.emit('group:add-node', { data: groupData })
+    this.graphModel.eventCenter.emit('group:add-node', {
+      data: groupData,
+      childId: id,
+    })
   }
 
   /**

package/src/dynamic-group/node.ts

@@ -106,24 +106,27 @@ export class DynamicGroupNode<
     }
   }
 
-  onNodeMouseMove = ({
-    deltaX,
-    deltaY,
-    data,
-  }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => {
-    const { model: curGroup, graphModel } = this.props
-    const { transformModel } = graphModel
-    const { SCALE_X, SCALE_Y } = transformModel
-    if (data.id === curGroup.id) {
-      const nodeIds = this.getNodesInGroup(curGroup, graphModel)
-      // https://github.com/didi/LogicFlow/issues/1914
-      // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
-      // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
-      // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
-      // 因此这里需要增加SCALE的处理
-      graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true)
+  onNodeMouseMove = () =>
+    // {
+    // deltaX,
+    // deltaY,
+    // data,
+    // }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>
+    {
+      // console.log(data,deltaX,deltaY,'111')
+      // const { model: curGroup, graphModel } = this.props
+      // const { transformModel } = graphModel
+      // const { SCALE_X, SCALE_Y } = transformModel
+      // if (data.id === curGroup.id) {
+      //   const nodeIds = this.getNodesInGroup(curGroup, graphModel)
+      //   // https://github.com/didi/LogicFlow/issues/1914
+      //   // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
+      //   // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
+      //   // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
+      //   // 因此这里需要增加SCALE的处理
+      //   graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true)
+      // }
     }
-  }
 
   graphRendered = () => {
     const { model } = this.props
@@ -169,6 +172,7 @@ export class DynamicGroupNode<
   /**
    * 获取分组内的节点
    * @param groupModel
+   * @param graphModel
    */
   getNodesInGroup(
     groupModel: DynamicGroupNodeModel,

package/src/style/index.less

@@ -221,6 +221,11 @@
   border: 1px solid #93a3b4;
 }
 
+.lf-mini-map .lf-graph {
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .lf-mini-map-graph {
   position: relative;
   overflow: hidden;

package/src/tools/label/Label.tsx

@@ -182,6 +182,14 @@ export class Label extends Component<ILabelProps, ILabelState> {
     })
   }
 
+  handleInput = (e: InputEvent) => {
+    const { label, graphModel } = this.props
+    graphModel.eventCenter.emit('label:input', {
+      e,
+      data: label.getData(),
+    })
+  }
+
   setElementModelLabelInfo(data) {
     const { label, element, graphModel } = this.props
     const {
@@ -330,6 +338,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
             'lf-label-editor-hover': !isEditing && (isHovered || isSelected),
             [`lf-label-editor-${textOverflowMode}`]: !isEditing,
           })}
+          onInput={this.handleInput}
           style={{
             maxWidth: `${maxLabelWidth}px`,
             boxSizing: 'border-box',

package/src/tools/label/index.ts

@@ -221,8 +221,12 @@ export class Label implements Extension {
       editable: true,
       vertical: false,
     }
-
-    if (!isMultiple || len >= (curLabelOption?.maxCount ?? maxCount)) {
+    // 全局的isMultiple为false，或全局isMultiple为true但局部isMultiple指明是false，或当前label长度已经达到上线时，不允许添加多个 label
+    if (
+      !isMultiple ||
+      (isMultiple && curLabelOption.isMultiple === false) ||
+      len >= (curLabelOption?.maxCount ?? maxCount)
+    ) {
       return
     }