From 49427259b3fb420105ef117ad873180e767d70ab Mon Sep 17 00:00:00 2001 From: wbccb Date: Wed, 25 Sep 2024 11:11:47 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(core):=20=E4=BB=BF=E9=80=A0moveRules?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0resizeRules=E8=A7=84=E5=88=99?= =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E8=8A=82=E7=82=B9resize=E9=99=90=E5=88=B6(#9?= =?UTF-8?q?37)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/model/BaseModel.ts | 16 ++++++++++ packages/core/src/model/GraphModel.ts | 15 +++++++-- packages/core/src/model/node/BaseNodeModel.ts | 32 +++++++++++++++++++ packages/core/src/util/resize.ts | 8 ++++- 4 files changed, 68 insertions(+), 3 deletions(-) diff --git a/packages/core/src/model/BaseModel.ts b/packages/core/src/model/BaseModel.ts index f1490aa6d..ec2d68bad 100644 --- a/packages/core/src/model/BaseModel.ts +++ b/packages/core/src/model/BaseModel.ts @@ -56,6 +56,22 @@ export namespace Model { deltaY: number, ) => boolean | IsAllowMove + /** + * 限制节点resize规则 + * model: 移动节点的 model + * deltaX: 中心点移动的 X 轴距离 + * deltaY: 中心点移动的 Y 轴距离 + * width: 中心点新的width + * height: 中心点新的height + */ + export type NodeResizeRule = ( + model: BaseNodeModel, + deltaX: number, + deltaY: number, + width: number, + height: number, + ) => boolean + export type AdjustEdgeStartAndEndParams = { startPoint: LogicFlow.Point endPoint: LogicFlow.Point diff --git a/packages/core/src/model/GraphModel.ts b/packages/core/src/model/GraphModel.ts index f0d0d6c5f..b28cc09a9 100644 --- a/packages/core/src/model/GraphModel.ts +++ b/packages/core/src/model/GraphModel.ts @@ -81,10 +81,15 @@ export class GraphModel { /** * 节点移动规则判断 - * 在节点移动的时候，会出发此数组中的所有规则判断 + * 在节点移动的时候，会触发此数组中的所有规则判断 */ - nodeMoveRules: Model.NodeMoveRule[] = [] + /** + * 节点resize规则判断 + * 在节点resize的时候，会触发此数组中的所有规则判断 + */ + nodeResizeRules: Model.NodeResizeRule[] = [] + /** * 获取自定义连线轨迹 */ @@ -1230,6 +1235,12 @@ export class GraphModel { } } + addNodeResizeRules(fn: Model.NodeResizeRule) { + if (!this.nodeResizeRules.includes(fn)) { + this.nodeResizeRules.push(fn) + } + } + /** * 设置默认的边类型 * 也就是设置在节点直接有用户手动绘制的连线类型。 diff --git a/packages/core/src/model/node/BaseNodeModel.ts b/packages/core/src/model/node/BaseNodeModel.ts index 08cc0b988..d75fee680 100644 --- a/packages/core/src/model/node/BaseNodeModel.ts +++ b/packages/core/src/model/node/BaseNodeModel.ts @@ -148,6 +148,7 @@ export class BaseNodeModel

targetRules: Model.ConnectRule[] = [] sourceRules: Model.ConnectRule[] = [] moveRules: Model.NodeMoveRule[] = [] // 节点移动之前的hook + resizeRules: Model.NodeResizeRule[] = [] // 节点resize之前的hook hasSetTargetRules = false // 用来限制rules的重复值 hasSetSourceRules = false; // 用来限制rules的重复值 [propName: string]: any // 支持用户自定义属性 @@ -281,6 +282,13 @@ export class BaseNodeModel

*/ resize(resizeInfo: ResizeInfo): ResizeNodeData { const { width, height, deltaX, deltaY } = resizeInfo + + const isAllowResize = this.isAllowResizeNode(deltaX, deltaY, width, height) + + if (!isAllowResize) { + return this.getData() + } + // 移动节点以及文本内容 this.move(deltaX / 2, deltaY / 2) @@ -761,6 +769,30 @@ export class BaseNodeModel

} } + @action addNodeResizeRules(fn: Model.NodeResizeRule) { + if (!this.resizeRules.includes(fn)) { + this.resizeRules.push(fn) + } + } + + /** + * 内部方法 + * 是否允许resize节点到新的位置 + */ + isAllowResizeNode( + deltaX: number, + deltaY: number, + width: number, + height: number, + ): boolean { + const rules = this.resizeRules.concat(this.graphModel.nodeResizeRules) + for (const rule of rules) { + const r = rule(this, deltaX, deltaY, width, height) + if (!r) return false + } + return true + } + @action setSelected(flag = true): void { this.isSelected = flag } diff --git a/packages/core/src/util/resize.ts b/packages/core/src/util/resize.ts index 6514157b9..ac2a8efcb 100644 --- a/packages/core/src/util/resize.ts +++ b/packages/core/src/util/resize.ts @@ -386,6 +386,12 @@ export const handleResize = ({ const preNodeData = nodeModel.getData() const curNodeData = nodeModel.resize(nextSize) + // 检测preNodeData和curNodeData是否没变化 + if (preNodeData.x === curNodeData.x && preNodeData.y === curNodeData.y) { + // 中心点x和y都没有变化，说明无法resize，阻止下面边的更新以及resize事件的emit + return + } + // 更新边 updateEdgePointByAnchors(nodeModel, graphModel) // 触发 resize 事件 @@ -417,7 +423,7 @@ export function calculateWidthAndHeight( y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y), } // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点 - let newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint) + const newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint) // 得到【touchEndPoint】右下角-没有transform的坐标 let endZeroTouchControlPoint: SimplePoint = calculatePointAfterRotateAngle( From fb7799744fe80012e5f27f6ba0387b9f09745263 Mon Sep 17 00:00:00 2001 From: wbccb Date: Wed, 25 Sep 2024 11:14:54 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat(extension):=20=E3=80=90dynamic-group?= =?UTF-8?q?=E3=80=91=E5=AE=8C=E5=96=84transformWidthContainer=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E6=8E=A7=E5=88=B6=E5=AD=90=E5=85=83=E7=B4=A0=E6=98=AF?= =?UTF-8?q?=E5=90=A6=E9=9C=80=E8=A6=81=E5=90=8C=E6=97=B6=E7=BC=A9=E6=94=BE?= =?UTF-8?q?=E7=9A=84=E9=80=BB=E8=BE=91(#1826)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/dynamic-group/model.ts | 7 +++++++ packages/extension/src/dynamic-group/node.ts | 8 ++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index fcb028c93..f7107201b 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -49,6 +49,11 @@ export type IGroupNodeProperties = { // expandWidth?: number // expandHeight?: number + /** + * 缩放或旋转容器时，是否缩放或旋转组内节点 + */ + transformWidthContainer: boolean + /** * 当前分组元素的 zIndex */ @@ -121,6 +126,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { isRestrict, autoResize, autoToFront, + transformWidthContainer, } = data.properties ?? {} this.children = children ? new Set(children) : new Set() @@ -139,6 +145,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { this.collapsedHeight = collapsedHeight ?? DEFAULT_GROUP_COLLAPSE_HEIGHT this.isRestrict = isRestrict ?? false + this.transformWidthContainer = transformWidthContainer ?? true this.autoResize = autoResize ?? false this.collapsible = collapsible ?? true this.autoToFront = autoToFront ?? false diff --git a/packages/extension/src/dynamic-group/node.ts b/packages/extension/src/dynamic-group/node.ts index 89f1a2f05..615387488 100644 --- a/packages/extension/src/dynamic-group/node.ts +++ b/packages/extension/src/dynamic-group/node.ts @@ -28,6 +28,10 @@ export class DynamicGroupNode< // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算 eventCenter.on('node:rotate', ({ model }) => { + const { transformWidthContainer } = this.props.model + if (!transformWidthContainer) { + return + } // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致） if (model.id === curGroup.id) { const center = { x: curGroup.x, y: curGroup.y } @@ -60,6 +64,10 @@ export class DynamicGroupNode< eventCenter.on( 'node:resize', ({ deltaX, deltaY, index, model, preData }) => { + const { transformWidthContainer } = this.props.model + if (!transformWidthContainer) { + return + } if (model.id === curGroup.id) { // node:resize是group已经改变width和height后的回调 // 因此这里一定得用preData（没resize改变width之前的值），而不是data/model From 7c1117da60daa4e3618e338605769b5fb0c074ab Mon Sep 17 00:00:00 2001 From: wbccb Date: Wed, 25 Sep 2024 11:15:57 +0800 Subject: [PATCH 3/6] chore(extension): transformWidthContainer->transformWithContainer --- packages/extension/src/dynamic-group/model.ts | 8 ++++---- packages/extension/src/dynamic-group/node.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index f7107201b..b96fc76ec 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -52,7 +52,7 @@ export type IGroupNodeProperties = { /** * 缩放或旋转容器时，是否缩放或旋转组内节点 */ - transformWidthContainer: boolean + transformWithContainer: boolean /** * 当前分组元素的 zIndex @@ -99,7 +99,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { // 当前分组是否在可添加状态 - 实时状态 @observable groupAddable: boolean = false // 缩放或旋转容器时，是否缩放或旋转组内节点 - @observable transformWidthContainer: boolean = true + @observable transformWithContainer: boolean = true childrenLastCollapseStateDict: Map = new Map() constructor(data: NodeConfig, graphModel: GraphModel) { @@ -126,7 +126,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { isRestrict, autoResize, autoToFront, - transformWidthContainer, + transformWithContainer, } = data.properties ?? {} this.children = children ? new Set(children) : new Set() @@ -145,7 +145,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { this.collapsedHeight = collapsedHeight ?? DEFAULT_GROUP_COLLAPSE_HEIGHT this.isRestrict = isRestrict ?? false - this.transformWidthContainer = transformWidthContainer ?? true + this.transformWithContainer = transformWithContainer ?? true this.autoResize = autoResize ?? false this.collapsible = collapsible ?? true this.autoToFront = autoToFront ?? false diff --git a/packages/extension/src/dynamic-group/node.ts b/packages/extension/src/dynamic-group/node.ts index 615387488..04fff3846 100644 --- a/packages/extension/src/dynamic-group/node.ts +++ b/packages/extension/src/dynamic-group/node.ts @@ -28,8 +28,8 @@ export class DynamicGroupNode< // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算 eventCenter.on('node:rotate', ({ model }) => { - const { transformWidthContainer } = this.props.model - if (!transformWidthContainer) { + const { transformWithContainer } = this.props.model + if (!transformWithContainer) { return } // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致） @@ -64,8 +64,8 @@ export class DynamicGroupNode< eventCenter.on( 'node:resize', ({ deltaX, deltaY, index, model, preData }) => { - const { transformWidthContainer } = this.props.model - if (!transformWidthContainer) { + const { transformWithContainer } = this.props.model + if (!transformWithContainer) { return } if (model.id === curGroup.id) { From 97c8f08fe3cb0770528813380f58c26cc074ce5b Mon Sep 17 00:00:00 2001 From: wbccb Date: Wed, 25 Sep 2024 11:16:25 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat(extension):=20=E3=80=90dynamic-group?= =?UTF-8?q?=E3=80=91isRestrict=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0resize=E9=99=90=E5=88=B6=E9=80=BB=E8=BE=91-=E6=A0=B9?= =?UTF-8?q?=E6=8D=AE=E5=86=85=E5=AE=B9=E5=8D=A0=E5=9C=B0=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E6=9D=A5=E9=99=90=E5=88=B6=E7=BC=A9=E5=B0=8F=E8=8C=83=E5=9B=B4?= =?UTF-8?q?(#937)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/dynamic-group/index.ts | 69 +++++++++++++++++++ packages/extension/src/dynamic-group/node.ts | 18 +++-- 2 files changed, 83 insertions(+), 4 deletions(-) diff --git a/packages/extension/src/dynamic-group/index.ts b/packages/extension/src/dynamic-group/index.ts index d0d15a240..35bb0297b 100644 --- a/packages/extension/src/dynamic-group/index.ts +++ b/packages/extension/src/dynamic-group/index.ts @@ -451,6 +451,56 @@ export class DynamicGroup { }) } + /** + * 检测group:resize后的bounds是否会小于children的bounds + * 限制group进行resize时不能小于内部的占地面积 + * @param groupModel + * @param deltaX + * @param deltaY + * @param newWidth + * @param newHeight + */ + checkGroupBoundsWithChildren( + groupModel: DynamicGroupNodeModel, + deltaX: number, + deltaY: number, + newWidth: number, + newHeight: number, + ) { + if (groupModel.children) { + const { children, x, y } = groupModel + // 根据deltaX和deltaY计算出当前model的bounds + const newX = x + deltaX / 2 + const newY = y + deltaY / 2 + const groupMinX = newX - newWidth / 2 + const groupMinY = newY - newHeight / 2 + const groupMaxX = newX + newWidth / 2 + const groupMaxY = newY + newHeight / 2 + + const childrenArray = Array.from(children) + for (let i = 0; i < childrenArray.length; i++) { + const childId = childrenArray[i] + const child = this.lf.getNodeModelById(childId) + if (!child) { + continue + } + const childBounds = child.getBounds() + const { minX, minY, maxX, maxY } = childBounds + // parent:resize后的bounds不能小于child:bounds，否则阻止其resize + const canResize = + groupMinX <= minX && + groupMinY <= minY && + groupMaxX >= maxX && + groupMaxY >= maxY + if (!canResize) { + return false + } + } + } + + return true + } + /** * Group 插件的初始化方法 * TODO：1. 待讨论，可能之前插件分类是有意义的 components, material, tools @@ -494,6 +544,25 @@ export class DynamicGroup { return true }) + + // https://github.com/didi/LogicFlow/issues/1442 + // https://github.com/didi/LogicFlow/issues/937 + // 添加分组节点resize规则 + // isRestrict限制模式下，当前model resize时不能小于children的占地面积 + // 并且在isRestrict限制模式下，transformWidthContainer即使设置为true，也无效 + graphModel.addNodeResizeRules((model, deltaX, deltaY, width, height) => { + if (model.isGroup && model.isRestrict) { + return this.checkGroupBoundsWithChildren( + model as DynamicGroupNodeModel, + deltaX, + deltaY, + width, + height, + ) + } + return true + }) + graphModel.dynamicGroup = this lf.on('node:add,node:drop,node:dnd-add', this.addNodeToGroup) diff --git a/packages/extension/src/dynamic-group/node.ts b/packages/extension/src/dynamic-group/node.ts index 04fff3846..f17426414 100644 --- a/packages/extension/src/dynamic-group/node.ts +++ b/packages/extension/src/dynamic-group/node.ts @@ -28,8 +28,14 @@ export class DynamicGroupNode< // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算 eventCenter.on('node:rotate', ({ model }) => { - const { transformWithContainer } = this.props.model - if (!transformWithContainer) { + 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 旋转操作逻辑一致） @@ -64,8 +70,12 @@ export class DynamicGroupNode< eventCenter.on( 'node:resize', ({ deltaX, deltaY, index, model, preData }) => { - const { transformWithContainer } = this.props.model - if (!transformWithContainer) { + 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) { From ede64434f89991f50d582c9b737aa501ca4452da Mon Sep 17 00:00:00 2001 From: wbccb Date: Wed, 25 Sep 2024 14:41:13 +0800 Subject: [PATCH 5/6] =?UTF-8?q?docs:=20=E3=80=90dynamic-group=E3=80=91?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0isRestrict=E6=96=B0=E7=9A=84=E9=99=90?= =?UTF-8?q?=E5=88=B6=E8=AF=B4=E6=98=8E+transformWithContainer=E7=9A=84?= =?UTF-8?q?=E8=AF=B4=E6=98=8E(#937=20#1826)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/docs/tutorial/extension/dynamic-group.en.md | 12 +++++++++++- .../docs/docs/tutorial/extension/dynamic-group.zh.md | 10 +++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/sites/docs/docs/tutorial/extension/dynamic-group.en.md b/sites/docs/docs/tutorial/extension/dynamic-group.en.md index 2328312e1..730a74932 100644 --- a/sites/docs/docs/tutorial/extension/dynamic-group.en.md +++ b/sites/docs/docs/tutorial/extension/dynamic-group.en.md @@ -116,7 +116,8 @@ export type IGroupNodeProperties = { */ isCollapsed?: boolean /** - * Whether to restrict the movement range of child nodes + * Whether to restrict the movement range of child nodes + + * Limit resizing to not exceed children's floor area * Defaults to false, allowing nodes to be dragged out of the group */ isRestrict?: boolean @@ -139,6 +140,14 @@ export type IGroupNodeProperties = { collapsedWidth?: number collapsedHeight?: number + /** + * When scaling or rotating a container, + * do you scale or rotate the nodes within the group + * Default to true, when scaling or rotating the container, + * the nodes within the group are scaled or rotated by default + */ + transformWithContainer: boolean + /** * zIndex of the group element */ @@ -168,6 +177,7 @@ const dynamicGroupNodeConfig = { height: 250, radius: 5, isCollapsed: true, + transformWidthContainer: true, }, } ``` diff --git a/sites/docs/docs/tutorial/extension/dynamic-group.zh.md b/sites/docs/docs/tutorial/extension/dynamic-group.zh.md index a98cb931a..481cec508 100644 --- a/sites/docs/docs/tutorial/extension/dynamic-group.zh.md +++ b/sites/docs/docs/tutorial/extension/dynamic-group.zh.md @@ -119,7 +119,8 @@ export type IGroupNodeProperties = { */ isCollapsed?: boolean /** - * 子节点是否限制移动范围 + * 子节点是否限制移动范围 + + * 限制resize不能超过children占地面积 * 默认为 false，允许拖拽移除分组 */ isRestrict?: boolean @@ -143,6 +144,12 @@ export type IGroupNodeProperties = { collapsedWidth?: number collapsedHeight?: number + /** + * 缩放或旋转容器时，是否缩放或旋转组内节点 + * 默认为 true，缩放或旋转容器时，默认缩放或旋转组内节点 + */ + transformWithContainer: boolean + /** * 当前分组元素的 zIndex */ @@ -172,6 +179,7 @@ const dynamicGroupNodeConfig = { height: 250, radius: 5, isCollapsed: true, + transformWithContainer: true, }, } ``` From d15d8a278297980b34e00d7c42c1445d6aa1a939 Mon Sep 17 00:00:00 2001 From: wbccb Date: Sun, 29 Sep 2024 16:32:15 +0800 Subject: [PATCH 6/6] =?UTF-8?q?chore(extension):=20=E3=80=90dynamic-group?= =?UTF-8?q?=E3=80=91transformWithContainer=E9=BB=98=E8=AE=A4=E4=B8=BAfalse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/dynamic-group/model.ts | 6 +++--- sites/docs/docs/tutorial/extension/dynamic-group.en.md | 6 +++--- sites/docs/docs/tutorial/extension/dynamic-group.zh.md | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index b96fc76ec..0803cdaf9 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -52,7 +52,7 @@ export type IGroupNodeProperties = { /** * 缩放或旋转容器时，是否缩放或旋转组内节点 */ - transformWithContainer: boolean + transformWithContainer?: boolean /** * 当前分组元素的 zIndex @@ -99,7 +99,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { // 当前分组是否在可添加状态 - 实时状态 @observable groupAddable: boolean = false // 缩放或旋转容器时，是否缩放或旋转组内节点 - @observable transformWithContainer: boolean = true + @observable transformWithContainer: boolean = false childrenLastCollapseStateDict: Map = new Map() constructor(data: NodeConfig, graphModel: GraphModel) { @@ -145,7 +145,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { this.collapsedHeight = collapsedHeight ?? DEFAULT_GROUP_COLLAPSE_HEIGHT this.isRestrict = isRestrict ?? false - this.transformWithContainer = transformWithContainer ?? true + this.transformWithContainer = transformWithContainer ?? false this.autoResize = autoResize ?? false this.collapsible = collapsible ?? true this.autoToFront = autoToFront ?? false diff --git a/sites/docs/docs/tutorial/extension/dynamic-group.en.md b/sites/docs/docs/tutorial/extension/dynamic-group.en.md index 730a74932..ebdd38b08 100644 --- a/sites/docs/docs/tutorial/extension/dynamic-group.en.md +++ b/sites/docs/docs/tutorial/extension/dynamic-group.en.md @@ -143,10 +143,10 @@ export type IGroupNodeProperties = { /** * When scaling or rotating a container, * do you scale or rotate the nodes within the group - * Default to true, when scaling or rotating the container, + * Default to false, when scaling or rotating the container, * the nodes within the group are scaled or rotated by default */ - transformWithContainer: boolean + transformWithContainer?: boolean /** * zIndex of the group element @@ -259,4 +259,4 @@ Groups are a special type of node, so it is still possible to use [custom connec Grouping functionality is not the same as swimlanes; developers need to implement swimlanes based on the grouping functionality. Future LogicFlow support for BPMN will include full BPMN swimlane support. Contributions for implementations are welcome. -::: \ No newline at end of file +::: diff --git a/sites/docs/docs/tutorial/extension/dynamic-group.zh.md b/sites/docs/docs/tutorial/extension/dynamic-group.zh.md index 481cec508..4dac9c022 100644 --- a/sites/docs/docs/tutorial/extension/dynamic-group.zh.md +++ b/sites/docs/docs/tutorial/extension/dynamic-group.zh.md @@ -146,9 +146,9 @@ export type IGroupNodeProperties = { /** * 缩放或旋转容器时，是否缩放或旋转组内节点 - * 默认为 true，缩放或旋转容器时，默认缩放或旋转组内节点 + * 默认为 false，缩放或旋转容器时，默认缩放或旋转组内节点 */ - transformWithContainer: boolean + transformWithContainer?: boolean /** * 当前分组元素的 zIndex