@logicflow/extension 2.0.9 → 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

@@ -28,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 }
@@ -60,6 +70,14 @@ export class DynamicGroupNode<
     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