Feature Request: Nested nodes with auto nesting for Diagram

Question

Please add these features to support nested nodes in the new diagram control for Blazor. Please note, I may have picked the wrong control in this forum post as I am not sure which one is the new one.

Action: Drag and drop a node onto another node
- Desired Outcome:
  - Event is triggered where we can cancel the event via code
  - Node is dropped inside (aka nested) inside the dropped node
  - The new parent node's width/height is increased to fit the dropped child node
  - If a connector was present before the drag/drop, it is retained in the data but no longer visualized
  - Parent's annotation is set to top align in the parent node above the dropped child node
Action: Drag a child node outside of a parent node and drop it
- Desired Outcome:
  - Event is triggered where we can cancel the event via code
  - Child node is removed from the parent node and placed in the mouse position of the diagram
  - If a connector exists in the data, redraw the connect between the child and parent
  - If no child nodes are left in the parent, the annotation is middle aligned in the parent node
Business Rules:
- A parent can contain zero to many child nodes
- All connectors between parent and child are retained
- A child node can contain zero to many other child nodes
- Child nodes can have actions acted upon them while inside the parent such as selecting all children and aligning them, text changes, etc.
Typical Use Cases:
- Swim lanes for BPMN diagrams
- BPMN sub-processes
- ArchiMate nesting of controls
- Network diagram showing devices inside a location node

Scott Peal · Answer

BTW, I was able to build most of the above using the node grouping; however, an out-of-box solution would be great. I am happy to share my code with your developers if wanted.

Balavignesh RaviChandran · Answer

Hello Scott Peal,

Most of your requirements can be fulfilled by utilizing the BPMN Expanded sub-process shape in the Diagram component. To gain more knowledge about BPMN shapes and expanded sub-processes, please refer to the UG documentation.

Here are the links to the resources:
BPMN Shapes: https://blazor.syncfusion.com/documentation/diagram/bpmn-shapes/bpmn-shapes
Expanded Sub-Process Shape: https://blazor.syncfusion.com/documentation/diagram/bpmn-shapes/bpmn-expanded-sub-process

In addition, we have provided an example sample using the BPMN shapes and video output for your reference. Please note that Diagram does not support events when dropping child nodes into parent nodes and cancelling drop.
Sample:https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/KB-Samples/BPMNSample

Balavignesh RaviChandran · Answer

here is the video output for your reference,Attachment: OutPut_6a5d9dae.zip