Skip to content

Commit d74e92a

Browse files
shyamg1991shyamg1991
authored
Merge pull request #87 from SriRam4552/1030483-UMLSample
1030483: Added Samples For UML Shapes And Annotation Interaction
2 parents b622396 + 3feed7a commit d74e92a

13 files changed

Lines changed: 740 additions & 0 deletions

‎Diagram/Server/Pages/Annotations/AnnotationInteraction.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page "/AnnotationInteraction"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
6+
7+
@code
8+
{
9+
// Defines diagram's node collection.
10+
DiagramObjectCollection<Node> _nodes;
11+
12+
protected override void OnInitialized()
13+
{
14+
_nodes = new DiagramObjectCollection<Node>();
15+
Node node = new Node()
16+
{
17+
ID = "node1",
18+
// Position of the node
19+
OffsetX = 100,
20+
OffsetY = 100,
21+
// Size of the node
22+
Width = 100,
23+
Height = 100,
24+
Style = new ShapeStyle()
25+
{
26+
Fill = "#6BA5D7",
27+
StrokeColor = "white"
28+
},
29+
// Sets the annotation for the node
30+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
31+
{
32+
new ShapeAnnotation
33+
{
34+
Content = "Annotation Text",
35+
// Sets the constraints as Interaction (enables all interactions)
36+
Constraints = AnnotationConstraints.Interaction
37+
}
38+
}
39+
};
40+
_nodes.Add(node);
41+
}
42+
}

‎Diagram/Server/Pages/Annotations/AnnotationPositionChangeEvent.razor‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@page "/AnnotationPositionChangeEvent"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@_nodes" PositionChanging="OnPositionChanging" PositionChanged="OnPositionChanged" />
6+
7+
@code
8+
{
9+
private DiagramObjectCollection<Node> _nodes;
10+
11+
protected override void OnInitialized()
12+
{
13+
_nodes = new DiagramObjectCollection<Node>();
14+
Node node = new Node()
15+
{
16+
ID = "node1",
17+
OffsetX = 250,
18+
OffsetY = 250,
19+
Width = 100,
20+
Height = 100,
21+
Style = new ShapeStyle()
22+
{
23+
Fill = "#6495ED",
24+
StrokeColor = "white"
25+
},
26+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
27+
{
28+
new ShapeAnnotation
29+
{
30+
Content = "Draggable Annotation",
31+
Constraints = AnnotationConstraints.Select | AnnotationConstraints.Drag
32+
}
33+
}
34+
};
35+
_nodes.Add(node);
36+
}
37+
38+
// Event triggered while dragging the annotation
39+
private void OnPositionChanging(PositionChangingEventArgs args)
40+
{
41+
// Prevent position change if needed
42+
// args.Cancel = true;
43+
Console.WriteLine("Annotation position changing");
44+
}
45+
46+
// Event triggered after annotation position changes
47+
private void OnPositionChanged(PositionChangedEventArgs args)
48+
{
49+
Console.WriteLine("Annotation position changed");
50+
}
51+
}

‎Diagram/Server/Pages/Annotations/AnnotationRotationChangeEvent.razor‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@page "/AnnotationRotationChangeEvent"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@_nodes" RotationChanging="OnRotateChanging" RotationChanged="OnRotateChanged" />
6+
7+
@code
8+
{
9+
// To define node collection.
10+
private DiagramObjectCollection<Node> _nodes;
11+
12+
protected override void OnInitialized()
13+
{
14+
_nodes = new DiagramObjectCollection<Node>();
15+
Node node = new Node()
16+
{
17+
ID = "node1",
18+
OffsetX = 250,
19+
OffsetY = 250,
20+
Width = 100,
21+
Height = 100,
22+
Style = new ShapeStyle()
23+
{
24+
Fill = "#6BA5D7",
25+
StrokeColor = "white"
26+
},
27+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
28+
{
29+
new ShapeAnnotation
30+
{
31+
Content = "Rotatable Annotation",
32+
Constraints = AnnotationConstraints.Select | AnnotationConstraints.Rotate
33+
}
34+
}
35+
};
36+
_nodes.Add(node);
37+
}
38+
39+
// Event triggered before annotation rotation changes
40+
private void OnRotateChanging(RotationChangingEventArgs args)
41+
{
42+
// Prevent rotation if needed
43+
// args.Cancel = true;
44+
Console.WriteLine("Annotation rotation changing");
45+
}
46+
47+
// Event triggered after annotation rotation changes
48+
private void OnRotateChanged(RotationChangedEventArgs args)
49+
{
50+
Console.WriteLine("Annotation rotation changed");
51+
}
52+
}

‎Diagram/Server/Pages/Annotations/AnnotationSelectionChangeEvent.razor‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@page "/AnnotationSelectionChangeEvent"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@_nodes" SelectionChanging="OnSelectionChanging" SelectionChanged="OnSelectionChanged" />
6+
7+
@code
8+
{
9+
private DiagramObjectCollection<Node> _nodes;
10+
11+
protected override void OnInitialized()
12+
{
13+
_nodes = new DiagramObjectCollection<Node>();
14+
Node node = new Node()
15+
{
16+
ID = "node1",
17+
OffsetX = 250,
18+
OffsetY = 250,
19+
Width = 100,
20+
Height = 100,
21+
Style = new ShapeStyle()
22+
{
23+
Fill = "#6BA5D7",
24+
StrokeColor = "white"
25+
},
26+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
27+
{
28+
new ShapeAnnotation
29+
{
30+
Content = "Selectable Annotation",
31+
Constraints = AnnotationConstraints.Select
32+
}
33+
}
34+
};
35+
_nodes.Add(node);
36+
}
37+
38+
// Event triggered before annotation selection changes
39+
private void OnSelectionChanging(SelectionChangingEventArgs args)
40+
{
41+
// Prevent annotation selection if needed
42+
// args.Cancel = true;
43+
Console.WriteLine("Annotation selection changing");
44+
}
45+
46+
// Event triggered after annotation selection changes
47+
private void OnSelectionChanged(SelectionChangedEventArgs args)
48+
{
49+
Console.WriteLine("Annotation selection changed");
50+
}
51+
}

‎Diagram/Server/Pages/Annotations/AnnotationSizeChangeEvent.razor‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@page "/AnnotationSizeChangeEvent"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@_nodes" SizeChanged="OnSizeChanged" SizeChanging="OnSizeChanging" />
6+
7+
@code
8+
{
9+
private DiagramObjectCollection<Node> _nodes;
10+
11+
protected override void OnInitialized()
12+
{
13+
_nodes = new DiagramObjectCollection<Node>();
14+
Node node = new Node()
15+
{
16+
ID = "node1",
17+
OffsetX = 250,
18+
OffsetY = 250,
19+
Width = 100,
20+
Height = 100,
21+
Style = new ShapeStyle()
22+
{
23+
Fill = "#6BA5D7",
24+
StrokeColor = "white"
25+
},
26+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
27+
{
28+
new ShapeAnnotation
29+
{
30+
Content = "Resizable Annotation",
31+
Width = 80,
32+
Height = 40,
33+
Constraints = AnnotationConstraints.Select | AnnotationConstraints.Resize
34+
}
35+
}
36+
};
37+
_nodes.Add(node);
38+
}
39+
40+
// Event triggered before annotation size changes
41+
private void OnSizeChanging(SizeChangingEventArgs args)
42+
{
43+
// Prevent size change if needed
44+
// args.Cancel = true;
45+
Console.WriteLine("Annotation size changing");
46+
}
47+
48+
// Event triggered after annotation size changes
49+
private void OnSizeChanged(SizeChangedEventArgs args)
50+
{
51+
Console.WriteLine("Annotation size changed");
52+
}
53+
}

‎Diagram/Server/Pages/Annotations/DragLimitForAnnotation.razor‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@page "/DragLimitForAnnotation"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Connectors="@_connectors" />
6+
7+
@code
8+
{
9+
DiagramObjectCollection<Connector> _connectors;
10+
11+
protected override void OnInitialized()
12+
{
13+
_connectors = new DiagramObjectCollection<Connector>();
14+
Connector connector = new Connector()
15+
{
16+
ID = "connector",
17+
Type = ConnectorSegmentType.Orthogonal,
18+
SourcePoint = new DiagramPoint() { X = 200, Y = 200 },
19+
TargetPoint = new DiagramPoint() { X = 300, Y = 300 },
20+
// Sets the multiple annotation for the connector
21+
Annotations = new DiagramObjectCollection<PathAnnotation>()
22+
{
23+
new PathAnnotation
24+
{
25+
Content = "connector1",
26+
Offset = 0.5,
27+
Constraints = AnnotationConstraints.Interaction | AnnotationConstraints.Drag,
28+
// Set drag limit for a connector annotation
29+
DragLimit = new DiagramThickness()
30+
{
31+
Left = 20,
32+
Right = 20,
33+
Top = 20,
34+
Bottom = 20
35+
}
36+
}
37+
}
38+
};
39+
_connectors.Add(connector);
40+
}
41+
}

‎Diagram/Server/Pages/Annotations/HyperlinksOpenMode.razor‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@page "/HyperlinksOpenMode"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
6+
7+
@code
8+
{
9+
// Defines diagram's node collection.
10+
DiagramObjectCollection<Node> _nodes;
11+
protected override void OnInitialized()
12+
{
13+
_nodes = new DiagramObjectCollection<Node>();
14+
Node node = new Node()
15+
{
16+
ID = "node",
17+
Width = 100,
18+
Height = 100,
19+
OffsetX = 100,
20+
OffsetY = 100,
21+
// Sets the annotation for the Node.
22+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
23+
{
24+
// Add hyperlink that opens in a new tab.
25+
new ShapeAnnotation
26+
{
27+
Hyperlink = new HyperlinkSettings
28+
{
29+
Content = "Open Syncfusion",
30+
Url = "https://www.syncfusion.com",
31+
// Configures the hyperlink to open in a new tab.
32+
OpenMode = HyperlinkOpenMode.Blank
33+
}
34+
}
35+
},
36+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
37+
};
38+
_nodes.Add(node);
39+
}
40+
}

‎Diagram/Server/Pages/Annotations/HyperlinksOpenModeRuntime.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page "/HyperlinksOpenModeRuntime"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
@using Syncfusion.Blazor.Buttons
5+
6+
<SfButton Content="Change Open Mode" OnClick="@ChangeOpenMode" />
7+
<SfDiagramComponent @ref="@_diagram" Height="600px" Nodes="@_nodes" />
8+
9+
@code
10+
{
11+
SfDiagramComponent _diagram;
12+
DiagramObjectCollection<Node> _nodes;
13+
14+
protected override void OnInitialized()
15+
{
16+
_nodes = new DiagramObjectCollection<Node>();
17+
Node node = new Node()
18+
{
19+
ID = "node",
20+
Width = 100,
21+
Height = 100,
22+
OffsetX = 100,
23+
OffsetY = 100,
24+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
25+
{
26+
new ShapeAnnotation
27+
{
28+
Hyperlink = new HyperlinkSettings
29+
{
30+
Content = "Open Syncfusion",
31+
Url = "https://www.syncfusion.com",
32+
OpenMode = HyperlinkOpenMode.Self
33+
}
34+
}
35+
}
36+
};
37+
_nodes.Add(node);
38+
}
39+
40+
public void ChangeOpenMode()
41+
{
42+
HyperlinkSettings hyperlink = _diagram.Nodes[0].Annotations[0].Hyperlink as HyperlinkSettings;
43+
hyperlink.OpenMode = hyperlink.OpenMode == HyperlinkOpenMode.Self ? HyperlinkOpenMode.Blank : HyperlinkOpenMode.Self;
44+
}
45+
}

0 commit comments

Comments
 (0)