Skip to content

Commit dccfecc

Browse files
sergepilipchuksergepilipchuk
authored
Merge pull request #2 from sergepilipchuk/sp-update-readme-24-2-1
Update readme file (new template)
2 parents 7129482 + 1d6f54d commit dccfecc

File tree

6 files changed

+106
-14
lines changed

6 files changed

+106
-14
lines changed

‎CS/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCaculator.cs‎ renamed to ‎CS/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCalculator.cs‎

File renamed without changes.

‎CS/MsaglHelpers/MsaglHelpers.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<ItemGroup>
7575
<Compile Include="Converter.cs" />
7676
<Compile Include="LayoutCalculators\PhyloTreeLayoutCalculator.cs" />
77-
<Compile Include="LayoutCalculators\DisconnectedGraphsLayoutCaculator.cs" />
77+
<Compile Include="LayoutCalculators\DisconnectedGraphsLayoutCalculator.cs" />
7878
<Compile Include="LayoutCalculators\ILayoutCalculator.cs" />
7979
<Compile Include="LayoutCalculators\MDSLayoutCalculator.cs" />
8080
<Compile Include="LayoutCalculators\RankingLayoutCalculator.cs" />

‎Images/diagram-layouts.jpg‎

178 KB
Loading

‎Readme.md‎

Lines changed: 104 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,94 @@
33
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T394199)
44
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
55
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
6-
<!-- default badges end -->
7-
<!-- default file list -->
8-
*Files to look at*:
6+
7+
# WPF Diagram Control - Microsoft Automatic Graph Layout (MSAGL) Algorithms
8+
9+
This example integrates **Microsoft Automatic Graph Layout (MSAGL)** algorithms with the WPF [`DiagramControl`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Diagram.DiagramControl). The workflow extracts a graph from the diagram, processes it with an MSAGL algorithm, and applies calculated node positions to diagram items.
10+
11+
![Diagram Control - Microsoft Automatic Graph Layout (MSAGL) Algorithms](./Images/diagram-layouts.jpg)
12+
13+
## Implementation Details
14+
15+
### Extract the Graph
16+
17+
Use the `GraphOperations.GetDiagramGraph` method to extract the current diagram. The method returns a `Graph` object that contains the collections of nodes and edges represented by diagram items:
18+
19+
```csharp
20+
GraphOperations.GetDiagramGraph(diagramControl);
21+
```
22+
23+
### Calculate Position Information
24+
25+
For each shape, calculate diagram shape coordinates and store them in `PositionInfo` objects:
26+
27+
```csharp
28+
layout.RelayoutGraphNodesPosition(GraphOperations.GetDiagramGraph(diagramControl));
29+
30+
public virtual IEnumerable<PositionInfo<IDiagramItem>> RelayoutGraphNodesPosition(Graph<IDiagramItem> graph) {
31+
GeometryGraph = MsaglGeometryGraphHelpers.CreateGeometryGraph(graph);
32+
LayoutCalculator.CalculateLayout(GeometryGraph);
33+
return MsaglGeometryGraphHelpers.GetGetNodesPositionInfo(GeometryGraph);
34+
}
35+
```
36+
37+
### Apply Layout
38+
39+
Update the diagram with calculated node positions:
40+
41+
```csharp
42+
diagramControl.RelayoutDiagramItems(
43+
layout.RelayoutGraphNodesPosition(GraphOperations.GetDiagramGraph(diagramControl))
44+
);
45+
```
46+
47+
### Update Shape Connectors
48+
49+
After shapes are repositioned, reroute shape connectors and register a routing strategy:
50+
51+
```csharp
52+
diagramControl.Items.OfType<IDiagramConnector>().ForEach(connector => {
53+
connector.Type = layout.GetDiagramConnectorType();
54+
connector.UpdateRoute();
55+
});
56+
57+
diagramControl.Controller.RegisterRoutingStrategy(
58+
layout.GetDiagramConnectorType(),
59+
layout.GetDiagramRoutingStrategy()
60+
);
61+
```
62+
63+
### Display Entire Diagram
64+
65+
Fit the view so that all items are visible in the viewport:
66+
67+
```csharp
68+
diagramControl.FitToDrawing();
69+
```
70+
71+
### Ribbon commands
72+
73+
Create ribbon items and handle their `ItemClick` events to apply different MSAGL algorithms:
74+
75+
```csharp
76+
void ApplySugiyama(object s, ItemClickEventArgs e) {
77+
ApplyLayout(new GraphLayout(new SugiyamaLayoutCalculator()));
78+
}
79+
void ApplyRanking(object s, ItemClickEventArgs e) {
80+
ApplyLayout(new GraphLayout(new RankingLayoutCalculator()));
81+
}
82+
void ApplyPhyloTree(object s, ItemClickEventArgs e) {
83+
ApplyLayout(new PhyloTreeLayout(new PhyloTreeLayoutCalculator()));
84+
}
85+
void ApplyMDS(object s, ItemClickEventArgs e) {
86+
ApplyLayout(new GraphLayout(new MDSLayoutCalculator()));
87+
}
88+
void ApplyDisconnectedGraphs(object s, ItemClickEventArgs e) {
89+
ApplyLayout(new GraphLayout(new DisconnectedGraphsLayoutCalculator()));
90+
}
91+
```
92+
93+
## Files to Review
994

1095
* [LayoutExampleWindow.xaml](./CS/DXDiagram.CustomLayoutAlgorithms/LayoutExampleWindow.xaml) (VB: [LayoutExampleWindow.xaml](./VB/DXDiagram.CustomLayoutAlgorithms/LayoutExampleWindow.xaml))
1196
* [LayoutExampleWindow.xaml.cs](./CS/DXDiagram.CustomLayoutAlgorithms/LayoutExampleWindow.xaml.cs) (VB: [LayoutExampleWindow.xaml.vb](./VB/DXDiagram.CustomLayoutAlgorithms/LayoutExampleWindow.xaml.vb))
@@ -14,27 +99,34 @@
1499
* [Converter.cs](./CS/MsaglHelpers/Converter.cs) (VB: [Converter.vb](./VB/MsaglHelpers/Converter.vb))
15100
* [GraphLayout.cs](./CS/MsaglHelpers/Layout/GraphLayout.cs) (VB: [GraphLayout.vb](./VB/MsaglHelpers/Layout/GraphLayout.vb))
16101
* [PhyloTreeLayout.cs](./CS/MsaglHelpers/Layout/PhyloTreeLayout.cs) (VB: [PhyloTreeLayout.vb](./VB/MsaglHelpers/Layout/PhyloTreeLayout.vb))
17-
* [DisconnectedGraphsLayoutCaculator.cs](./CS/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCaculator.cs) (VB: [DisconnectedGraphsLayoutCaculator.vb](./VB/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCaculator.vb))
102+
* [DisconnectedGraphsLayoutCalculator.cs](./CS/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCalculator.cs) (VB: [DisconnectedGraphsLayoutCalculator.vb](./VB/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCalculator.vb))
18103
* [ILayoutCalculator.cs](./CS/MsaglHelpers/LayoutCalculators/ILayoutCalculator.cs) (VB: [ILayoutCalculator.vb](./VB/MsaglHelpers/LayoutCalculators/ILayoutCalculator.vb))
19104
* [MDSLayoutCalculator.cs](./CS/MsaglHelpers/LayoutCalculators/MDSLayoutCalculator.cs) (VB: [MDSLayoutCalculator.vb](./VB/MsaglHelpers/LayoutCalculators/MDSLayoutCalculator.vb))
20105
* [PhyloTreeLayoutCalculator.cs](./CS/MsaglHelpers/LayoutCalculators/PhyloTreeLayoutCalculator.cs) (VB: [PhyloTreeLayoutCalculator.vb](./VB/MsaglHelpers/LayoutCalculators/PhyloTreeLayoutCalculator.vb))
21106
* [RankingLayoutCalculator.cs](./CS/MsaglHelpers/LayoutCalculators/RankingLayoutCalculator.cs) (VB: [RankingLayoutCalculator.vb](./VB/MsaglHelpers/LayoutCalculators/RankingLayoutCalculator.vb))
22107
* [SugiyamaLayoutCalculator.cs](./CS/MsaglHelpers/LayoutCalculators/SugiyamaLayoutCalculator.cs) (VB: [SugiyamaLayoutCalculator.vb](./VB/MsaglHelpers/LayoutCalculators/SugiyamaLayoutCalculator.vb))
23108
* [MsaglGeometryGraphHelpers.cs](./CS/MsaglHelpers/MsaglGeometryGraphHelpers.cs) (VB: [MsaglGeometryGraphHelpers.vb](./VB/MsaglHelpers/MsaglGeometryGraphHelpers.vb))
24109
* [RoutingHelper.cs](./CS/MsaglHelpers/RoutingHelper.cs) (VB: [RoutingHelper.vb](./VB/MsaglHelpers/RoutingHelper.vb))
25-
<!-- default file list end -->
26-
# WPF Diagram Control - Microsoft Automatic Graph Layout (MSAGL) Algorithms
27110

111+
## Documentation
28112

29-
DiagramControl provides two methods that make it easier to use external graph layout algorithms to arrange diagram shapes. The <strong><em>GraphOperations.GetDiagramGraph</em></strong> method reads the diagram currently loaded into DiagramControl and returns the <strong><em>Graph</em></strong> object that contains collections of edges and nodes represented by diagram items. You can use this information to calculate positions for diagram shapes. Then, for every shape, create the <strong><em>PositionInfo</em> </strong>object containing the shape reference and its position. To apply the layout to the loaded diagram, call the <em><strong>DiagramControl.RelayoutDiagramItems</strong></em> method that accepts the collection of PositionInfo objects.<br><br>This example demonstrates how the GetDiagramGraph and RelayoutDiagramItems methods can be used to connect the <a href="https://github.com/Microsoft/automatic-graph-layout">Microsoft Automatic Graph Layout (MSAGL)</a> library to DiagramControl.
113+
* [DiagramControl](https://docs.devexpress.com/WPF/DevExpress.Xpf.Diagram.DiagramControl)
114+
* [Diagram Items](https://docs.devexpress.com/WPF/116675/controls-and-libraries/diagram-control/diagram-items)
115+
* [DiagramDesignerControl](https://docs.devexpress.com/WPF/DevExpress.Xpf.Diagram.DiagramDesignerControl)
116+
* [RibbonControl](https://docs.devexpress.com/WPF/DevExpress.Xpf.Ribbon.RibbonControl)
117+
* [RibbonPageCategory](https://docs.devexpress.com/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategory)
118+
* [RibbonPage](https://docs.devexpress.com/WPF/DevExpress.Xpf.Ribbon.RibbonPage)
30119

31-
<br/>
120+
## More Examples
32121

122+
* [WPF DiagramControl - Create Custom Shapes with Connection Points](https://github.com/DevExpress-Examples/wpf-diagramdesigner-create-custom-shapes-with-connection-points)
123+
* [WPF DiagramControl - Create Custom Context Menus](https://github.com/DevExpress-Examples/wpf-diagram-custom-context-menu)
124+
* [WPF Diagram Control - Track and Restrict Drag Actions](https://github.com/DevExpress-Examples/wpf-diagram-track-and-restrict-drag-actions)
33125

34126
<!-- feedback -->
35-
## Does this example address your development requirements/objectives?
36-
37-
[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=wpf-diagram-ms-automatic-graph-layout-algorithms&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=wpf-diagram-ms-automatic-graph-layout-algorithms&~~~was_helpful=no)
38-
127+
## Does this example address your development requirements/objectives?
128+
129+
[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=wpf-diagram-ms-automatic-graph-layout-algorithms&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=wpf-diagram-ms-automatic-graph-layout-algorithms&~~~was_helpful=no)
130+
39131
(you will be redirected to DevExpress.com to submit your response)
40132
<!-- feedback end -->

‎VB/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCaculator.vb‎ renamed to ‎VB/MsaglHelpers/LayoutCalculators/DisconnectedGraphsLayoutCalculator.vb‎

File renamed without changes.

‎VB/MsaglHelpers/MsaglHelpers.vbproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<ItemGroup>
8686
<Compile Include="Converter.vb" />
8787
<Compile Include="LayoutCalculators\PhyloTreeLayoutCalculator.vb" />
88-
<Compile Include="LayoutCalculators\DisconnectedGraphsLayoutCaculator.vb" />
88+
<Compile Include="LayoutCalculators\DisconnectedGraphsLayoutCalculator.vb" />
8989
<Compile Include="LayoutCalculators\ILayoutCalculator.vb" />
9090
<Compile Include="LayoutCalculators\MDSLayoutCalculator.vb" />
9191
<Compile Include="LayoutCalculators\RankingLayoutCalculator.vb" />

0 commit comments

Comments
 (0)