@logicflow/extension 2.0.8 → 2.0.10

package/src/dynamic-group/model.ts

@@ -49,6 +49,11 @@ export type IGroupNodeProperties = {
   // expandWidth?: number
   // expandHeight?: number
 
+  /**
+   * 缩放或旋转容器时，是否缩放或旋转组内节点
+   */
+  transformWithContainer?: boolean
+
   /**
    * 当前分组元素的 zIndex
    */
@@ -79,6 +84,8 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   children!: Set<string>
   // 是否限制组内节点的移动范围。默认不限制 TODO: 完善该功能
   isRestrict: boolean = false
+  // isRestrict 模式启用时，如果同时设置 autoResize 为 true，那么子节点在父节点中移动时，父节点会自动调整大小
+  autoResize: boolean = false
   // 分组节点是否可以折叠
   collapsible: boolean = true
 
@@ -94,7 +101,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   // 当前分组是否在可添加状态 - 实时状态
   @observable groupAddable: boolean = false
   // 缩放或旋转容器时，是否缩放或旋转组内节点
-  @observable transformWidthContainer: boolean = true
+  @observable transformWithContainer: boolean = false
   childrenLastCollapseStateDict: Map<string, boolean> = new Map()
 
   constructor(data: NodeConfig<IGroupNodeProperties>, graphModel: GraphModel) {
@@ -121,6 +128,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
       isRestrict,
       autoResize,
       autoToFront,
+      transformWithContainer,
     } = data.properties ?? {}
 
     this.children = children ? new Set(children) : new Set()
@@ -139,6 +147,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     this.collapsedHeight = collapsedHeight ?? DEFAULT_GROUP_COLLAPSE_HEIGHT
 
     this.isRestrict = isRestrict ?? false
+    this.transformWithContainer = transformWithContainer ?? false
     this.autoResize = autoResize ?? false
     this.collapsible = collapsible ?? true
     this.autoToFront = autoToFront ?? false
@@ -195,8 +204,15 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
       isCollapsed,
     } = this
     if (isCollapsed) {
+      // 如果当前是折叠模式
+      // 存入history的时候，将坐标恢复到未折叠前的坐标数据
+      // 因为拿出history数据的时候，会触发collapse()进行坐标的折叠计算
       data.x = x + expandWidth / 2 - collapsedWidth / 2
       data.y = y + expandHeight / 2 - collapsedHeight / 2
+      if (data.text) {
+        data.text.x = data.text.x + expandWidth / 2 - collapsedWidth / 2
+        data.text.y = data.text.y + expandHeight / 2 - collapsedHeight / 2
+      }
     }
     return data
   }

package/src/dynamic-group/node.ts

@@ -1,7 +1,11 @@
-import LogicFlow, { GraphModel, h, RectNode } from '@logicflow/core'
+import LogicFlow, {
+  GraphModel,
+  h,
+  RectNode,
+  handleResize,
+} from '@logicflow/core'
 import { forEach } from 'lodash-es'
 import { DynamicGroupNodeModel } from './model'
-import { handleResize } from '@logicflow/core/es/util/resize'
 
 import Position = LogicFlow.Position
 import { rotatePointAroundCenter } from '../tools/label/utils'
@@ -24,6 +28,16 @@ export class DynamicGroupNode<
 
     // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
     eventCenter.on('node:rotate', ({ model }) => {
+      const { transformWithContainer, isRestrict } = this.props.model
+      if (!transformWithContainer || isRestrict) {
+        // isRestrict限制模式下，当前model resize时不能小于占地面积
+        // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
+        // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
+        // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
+        // 由于transformWidthContainer是控制rotate+resize，为保持transformWidthContainer本来的含义
+        // parent:resize=>child:resize不支持，那么parent:rotate=>child:rotate也不支持
+        return
+      }
       // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致）
       if (model.id === curGroup.id) {
         const center = { x: curGroup.x, y: curGroup.y }
@@ -53,27 +67,81 @@ export class DynamicGroupNode<
     })
 
     // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-    eventCenter.on('node:resize', ({ deltaX, deltaY, index, model }) => {
-      // TODO: 目前 Resize 的比例值有问题，导致缩放时，节点会变形，需要修复
-      if (model.id === curGroup.id) {
-        forEach(Array.from(curGroup.children), (childId) => {
-          const child = graphModel.getNodeModelById(childId)
-          if (child) {
-            // child.rotate = model.rotate
-            handleResize({
-              deltaX,
-              deltaY,
-              index,
-              nodeModel: child,
-              graphModel,
-              cancelCallback: () => {},
-            })
-          }
-        })
+    eventCenter.on(
+      'node:resize',
+      ({ deltaX, deltaY, index, model, preData }) => {
+        const { transformWithContainer, isRestrict } = this.props.model
+        if (!transformWithContainer || isRestrict) {
+          // isRestrict限制模式下，当前model resize时不能小于占地面积
+          // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
+          // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
+          // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
+          return
+        }
+        if (model.id === curGroup.id) {
+          // node:resize是group已经改变width和height后的回调
+          // 因此这里一定得用preData（没resize改变width之前的值），而不是data/model
+          const { properties } = preData
+          const { width: groupWidth, height: groupHeight } = properties || {}
+          forEach(Array.from(curGroup.children), (childId) => {
+            const child = graphModel.getNodeModelById(childId)
+            if (child) {
+              // 根据比例去控制缩放dx和dy
+              const childDx = (child.width / groupWidth!) * deltaX
+              const childDy = (child.height / groupHeight!) * deltaY
+
+              // child.rotate = model.rotate
+              handleResize({
+                deltaX: childDx,
+                deltaY: childDy,
+                index,
+                nodeModel: child,
+                graphModel,
+                cancelCallback: () => {},
+              })
+            }
+          })
+        }
+      },
+    )
+
+    // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
+    eventCenter.on('node:mousemove', ({ deltaX, deltaY, data }) => {
+      if (data.id === curGroup.id) {
+        const { model: curGroup, graphModel } = this.props
+        const nodeIds = this.getNodesInGroup(curGroup, graphModel)
+        graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
       }
     })
   }
 
+  /**
+   * 获取分组内的节点
+   * @param groupModel
+   */
+  getNodesInGroup(
+    groupModel: DynamicGroupNodeModel,
+    graphModel: GraphModel,
+  ): string[] {
+    let nodeIds: string[] = []
+    if (groupModel.isGroup) {
+      forEach(Array.from(groupModel.children), (nodeId: string) => {
+        nodeIds.push(nodeId)
+
+        const nodeModel = graphModel.getNodeModelById(nodeId)
+        if (nodeModel?.isGroup) {
+          nodeIds = nodeIds.concat(
+            this.getNodesInGroup(
+              nodeModel as DynamicGroupNodeModel,
+              graphModel,
+            ),
+          )
+        }
+      })
+    }
+    return nodeIds
+  }
+
   getResizeControl(): h.JSX.Element | null {
     const { resizable, isCollapsed } = this.props.model
     const showResizeControl = resizable && !isCollapsed