- Home
- Forum
- Angular - EJ 2
- prevent swimlane size changing when an item is close to the edge
prevent swimlane size changing when an item is close to the edge
Hello,
How can I prevent the swimlane resizing when an item approaches to the edges?
I would be appreciate it if someone let me know about this.
Best Regard,
Behnam
Add the AllowMovingOutsideLane constraints to the node. This ensures that when you drag a node to another lane, the current lane does not move or resize. Refer to the code example and sample below.
|
public getNodeDefaults(node: NodeModel) { node.style.strokeColor = '#717171'; node.constraints = NodeConstraints.Default | NodeConstraints.AllowMovingOutsideLane; return node; } |
Sample
|
https://stackblitz.com/edit/angular-rcz18l-axpxck?file=app.component.html,app.component.ts |
Thanks for your answer, but still I have the same problem when I move an object closer to the horizontal edge of the swimlane, the size of the swimlane increases.
We will validate and update with more details on Aug 17th, 2023.
Hi,
We modified the sample to achieve your requirement. By utilizing the positionChange event, we were able to restrict the positioning of child nodes within the swimlane. Refer the sample below.
Code-snippet
|
public positionChange(args: IDraggingEventArgs): void { if (args.state == 'Progress') { if (args.newValue.offsetX > this.swimlane.width) { args.cancel = true; } if (args.newValue.offsetY > this.swimlane.height) { args.cancel = true; } } } |
Sample
https://stackblitz.com/edit/angular-rcz18l-uf1fkt?file=app.component.ts
Regards,
Gobinath
Thanks for your response, for the first swimlane, it does not work and still when I move the object closer to the edge, the size gets bigger. for the second swimlane when I change the SnapConstraints.ShowLines to be visible, size could be changed if I move the object closer to the edges.
Best Regards,
Behnam
Hi,
We can able to replicate the issue at our end. We will validate and update you with more details on August 22, 2023.
Regards,
Gobinath
Hi,
We modified the sample to your requirement. By utilizing the positionChange event, we were able to restrict the child nodes within specific lanes during swimlane-based dragging. Refer the sample below.
Code-snippet
public positionChange(args: IDraggingEventArgs): void { if (args.state == 'Progress') { if (args.newValue.offsetX +(this.diagram.selectedItems.nodes[0] as any).width > this.getParent.wrapper.outerBounds.right ) { args.cancel = true; } if (args.newValue.offsetY +(this.diagram.selectedItems.nodes[0] as any).height > this.getParent.wrapper.outerBounds.bottom ) { args.cancel = true; } } } |
Sample
https://stackblitz.com/edit/angular-rcz18l-ewxc3k?file=app.component.ts
Regards,
Gobinath
- 7 Replies
- 4 Participants
- Marked answer
-
BN Behnam Norouzi
- Jul 31, 2023 01:34 PM UTC
- Aug 22, 2023 02:11 PM UTC