Skip to content

Commit 0a559ba

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge pull request #149 from ParameshwaranSF4845/977115-ShowTooltip
977115: ShowtoolTip example
2 parents 1891a9c + bd7365b commit 0a559ba

File tree

17 files changed

+521
-0
lines changed

17 files changed

+521
-0
lines changed

‎UG-Samples/SymbolPalette/ShowToolTip/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#Symbol Palette Sample
2+
3+
This sample demonstrates How to enable or disable the default tooltip for shapes in the Symbol Palette.
4+
5+
Demo link:
6+
https://blazor.syncfusion.com/demos/diagramcomponent/symbolpalette?theme=fluent
7+
8+
9+
## Prerequisites
10+
11+
* Visual Studio 2022
12+
13+
## How to run the project
14+
15+
* Checkout this project to a location in your disk.
16+
* Open the solution file using the Visual Studio 2022.
17+
* Restore the NuGet packages by rebuilding the solution.
18+
* Run the project.

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/App.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/Pages/Index.razor‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@page "/symbolPalette/showTooltip"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
@using Syncfusion.Blazor.Diagram.SymbolPalette
5+
@using Syncfusion.Blazor.Popups
6+
@using Syncfusion.Blazor.Buttons
7+
8+
<div style="display:flex;gap:20px;">
9+
<div style="width:20%">
10+
<div>
11+
<SfCheckBox @bind-Checked="showTooltip" Label="Show Symbol ID as Tooltip" TChecked="bool">
12+
</SfCheckBox>
13+
</div>
14+
<div id="palette-space" class="sb-mobile-palette" style="border: 2px solid #b200ff">
15+
<SfSymbolPaletteComponent @ref="symbolPalette" Height="1000px" Width="300px" GetSymbolInfo="GetSymbolInfo" Palettes="Palettes" SymbolHeight="60"
16+
SymbolWidth="60" SymbolMargin="symbolMargin">
17+
</SfSymbolPaletteComponent>
18+
</div>
19+
</div>
20+
<div>
21+
<SfDiagramComponent @ref="diagram" Height="1000px" Width="1000px" />
22+
</div>
23+
</div>
24+
25+
@code {
26+
// Controls tooltip visibility for symbols at runtime.
27+
private bool showTooltip = false;
28+
private SfSymbolPaletteComponent? symbolPalette;
29+
private SfDiagramComponent? diagram;
30+
private SymbolMargin symbolMargin = new SymbolMargin()
31+
{
32+
Left = 15,
33+
Right = 15,
34+
Top = 15,
35+
Bottom = 15
36+
};
37+
38+
public DiagramObjectCollection<Palette> Palettes { get; set; } = new DiagramObjectCollection<Palette>();
39+
public DiagramObjectCollection<NodeBase> FlowShapesPalette { get; set; } = new DiagramObjectCollection<NodeBase>();
40+
public DiagramObjectCollection<NodeBase> BasicShapesPalette { get; set; } = new DiagramObjectCollection<NodeBase>();
41+
public DiagramObjectCollection<NodeBase> ConnectorsPalette { get; set; } = new DiagramObjectCollection<NodeBase>();
42+
43+
protected override void OnInitialized()
44+
{
45+
// Initialize all palette models with predefined shapes.
46+
InitPaletteModel();
47+
}
48+
49+
protected override async Task OnAfterRenderAsync(bool firstRender)
50+
{
51+
if (firstRender && symbolPalette != null && diagram != null)
52+
{
53+
// Set diagram as drag-drop target for symbol palette.
54+
symbolPalette.Targets = new DiagramObjectCollection<SfDiagramComponent> { diagram };
55+
}
56+
}
57+
58+
// Configures symbol tooltip display based on checkbox state.
59+
private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
60+
{
61+
// Enable/disable tooltip display based on user preference at runtime.
62+
return new SymbolInfo { ShowTooltip = showTooltip };
63+
}
64+
65+
private void InitPaletteModel()
66+
{
67+
// Add flow shapes to palette.
68+
AddFlowShape(NodeFlowShapes.Terminator, "Terminator", 0);
69+
AddFlowShape(NodeFlowShapes.Decision, "Decision", 1);
70+
AddFlowShape(NodeFlowShapes.Process, "Process", 2);
71+
AddFlowShape(NodeFlowShapes.Document, "Document", 3);
72+
73+
// Add basic shapes to palette.
74+
AddBasicShape(NodeBasicShapes.Rectangle, "Rectangle", 0);
75+
AddBasicShape(NodeBasicShapes.Ellipse, "Ellipse", 1);
76+
AddBasicShape(NodeBasicShapes.Pentagon, "Pentagon", 2);
77+
AddBasicShape(NodeBasicShapes.Hexagon, "Hexagon", 3);
78+
79+
// Add connectors to palette.
80+
AddConnector("Orthogonal", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow, 0);
81+
AddConnector("Straight", ConnectorSegmentType.Straight, DecoratorShape.Arrow, 1);
82+
AddConnector("Bezier", ConnectorSegmentType.Bezier, DecoratorShape.Arrow, 2);
83+
AddConnector("StraightOpp", ConnectorSegmentType.Straight, DecoratorShape.None, 3);
84+
85+
// Create palette collection with all shape categories.
86+
Palettes = new DiagramObjectCollection<Palette>
87+
{
88+
new Palette { Symbols = FlowShapesPalette, Title = "Flow Shapes", ID = "FlowShapes", IsExpanded = true },
89+
new Palette { Symbols = BasicShapesPalette, Title = "Basic Shapes", ID = "BasicShapes", IsExpanded = true },
90+
new Palette { Symbols = ConnectorsPalette, Title = "Connectors", ID = "Connectors", IsExpanded = true }
91+
};
92+
}
93+
94+
private void AddFlowShape(NodeFlowShapes shape, string id, int index)
95+
{
96+
var node = new Node
97+
{
98+
ID = id,
99+
Shape = new FlowShape { Type = NodeShapes.Flow, Shape = shape },
100+
Width = 60,
101+
Height = 60,
102+
Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "#6495ED" },
103+
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip
104+
};
105+
// Add tooltip for even-indexed shapes only.
106+
if (index % 2 == 0)
107+
{
108+
node.Tooltip = new DiagramTooltip
109+
{
110+
Content = $"This is {id} (Flow)",
111+
ShowTipPointer = true,
112+
Position = Position.RightCenter
113+
};
114+
}
115+
FlowShapesPalette.Add(node);
116+
}
117+
118+
private void AddBasicShape(NodeBasicShapes shapeType, string id, int index)
119+
{
120+
var node = new Node
121+
{
122+
ID = id,
123+
Width = 60,
124+
Height = 60,
125+
Shape = new BasicShape
126+
{
127+
Type = NodeShapes.Basic,
128+
Shape = shapeType,
129+
CornerRadius = 10 // Rounded corners for visual appeal.
130+
},
131+
Style = new ShapeStyle { Fill = "#9CCC65", StrokeColor = "#558B2F" },
132+
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip
133+
};
134+
// Add tooltip for even-indexed shapes only.
135+
if (index % 2 == 0)
136+
{
137+
node.Tooltip = new DiagramTooltip
138+
{
139+
Content = $"This is {id} (Basic)",
140+
ShowTipPointer = true,
141+
Position = Position.RightCenter
142+
};
143+
}
144+
BasicShapesPalette.Add(node);
145+
}
146+
147+
private void AddConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape, int index)
148+
{
149+
var connector = new Connector
150+
{
151+
ID = id,
152+
Type = type,
153+
SourcePoint = new DiagramPoint { X = 0, Y = 0 },
154+
TargetPoint = new DiagramPoint { X = 60, Y = 60 },
155+
Style = new ShapeStyle { StrokeWidth = 2, StrokeColor = "#757575" },
156+
TargetDecorator = new DecoratorSettings
157+
{
158+
Shape = decoratorShape,
159+
Style = new ShapeStyle { StrokeColor = "#757575", Fill = "#757575" }
160+
},
161+
Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip
162+
};
163+
// Add tooltip for even-indexed connectors only.
164+
if (index % 2 == 0)
165+
{
166+
connector.Tooltip = new DiagramTooltip
167+
{
168+
Content = $"This is {id} (Connector)",
169+
Position = Position.RightCenter,
170+
ShowTipPointer = true
171+
};
172+
}
173+
ConnectorsPalette.Add(connector);
174+
}
175+
}

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/Pages/_Host.cshtml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/"
2+
@using Microsoft.AspNetCore.Components.Web
3+
@namespace ShowToolTip.Pages
4+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
5+
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<base href="~/" />
12+
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
13+
<link href="css/site.css" rel="stylesheet" />
14+
<link href="ShowToolTip.styles.css" rel="stylesheet" />
15+
<link rel="icon" type="image/png" href="favicon.png"/>
16+
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
17+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
18+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
19+
</head>
20+
<body>
21+
<component type="typeof(App)" render-mode="ServerPrerendered" />
22+
23+
<div id="blazor-error-ui">
24+
<environment include="Staging,Production">
25+
An error has occurred. This application may no longer respond until reloaded.
26+
</environment>
27+
<environment include="Development">
28+
An unhandled exception has occurred. See browser dev tools for details.
29+
</environment>
30+
<a href="" class="reload">Reload</a>
31+
<a class="dismiss">🗙</a>
32+
</div>
33+
34+
<script src="_framework/blazor.server.js"></script>
35+
</body>
36+
</html>

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/Program.cs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using System.Net.NetworkInformation;
2+
using Microsoft.AspNetCore.Components;
3+
using Microsoft.AspNetCore.Components.Web;
4+
using Syncfusion.Blazor;
5+
6+
7+
var builder = WebApplication.CreateBuilder(args);
8+
9+
// Add services to the container.
10+
builder.Services.AddRazorPages();
11+
builder.Services.AddServerSideBlazor();
12+
builder.Services.AddSyncfusionBlazor();
13+
14+
var app = builder.Build();
15+
16+
// Configure the HTTP request pipeline.
17+
if (!app.Environment.IsDevelopment())
18+
{
19+
app.UseExceptionHandler("/Error");
20+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
21+
app.UseHsts();
22+
}
23+
24+
app.UseHttpsRedirection();
25+
26+
app.UseStaticFiles();
27+
28+
app.UseRouting();
29+
30+
app.MapBlazorHub();
31+
app.MapFallbackToPage("/_Host");
32+
33+
app.Run();

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/Properties/launchSettings.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:25916",
7+
"sslPort": 44380
8+
}
9+
},
10+
"profiles": {
11+
"http": {
12+
"commandName": "Project",
13+
"dotnetRunMessages": true,
14+
"launchBrowser": true,
15+
"applicationUrl": "http://localhost:5149",
16+
"environmentVariables": {
17+
"ASPNETCORE_ENVIRONMENT": "Development"
18+
}
19+
},
20+
"https": {
21+
"commandName": "Project",
22+
"dotnetRunMessages": true,
23+
"launchBrowser": true,
24+
"applicationUrl": "https://localhost:7239;http://localhost:5149",
25+
"environmentVariables": {
26+
"ASPNETCORE_ENVIRONMENT": "Development"
27+
}
28+
},
29+
"IIS Express": {
30+
"commandName": "IISExpress",
31+
"launchBrowser": true,
32+
"environmentVariables": {
33+
"ASPNETCORE_ENVIRONMENT": "Development"
34+
}
35+
}
36+
}
37+
}

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/Shared/MainLayout.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@inherits LayoutComponentBase
2+
3+
<PageTitle>ShowToolTip</PageTitle>
4+
<article class="content px-4">
5+
@Body
6+
</article>

‎UG-Samples/SymbolPalette/ShowToolTip/ShowToolTip/Shared/MainLayout.razor.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
main {
8+
flex: 1;
9+
}
10+
11+
.sidebar {
12+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13+
}
14+
15+
.top-row {
16+
background-color: #f7f7f7;
17+
border-bottom: 1px solid #d6d5d5;
18+
justify-content: flex-end;
19+
height: 3.5rem;
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
.top-row ::deep a, .top-row .btn-link {
25+
white-space: nowrap;
26+
margin-left: 1.5rem;
27+
}
28+
29+
.top-row a:first-child {
30+
overflow: hidden;
31+
text-overflow: ellipsis;
32+
}
33+
34+
@media (max-width: 640.98px) {
35+
.top-row:not(.auth) {
36+
display: none;
37+
}
38+
39+
.top-row.auth {
40+
justify-content: space-between;
41+
}
42+
43+
.top-row a, .top-row .btn-link {
44+
margin-left: 0;
45+
}
46+
}
47+
48+
@media (min-width: 641px) {
49+
.page {
50+
flex-direction: row;
51+
}
52+
53+
.sidebar {
54+
width: 250px;
55+
height: 100vh;
56+
position: sticky;
57+
top: 0;
58+
}
59+
60+
.top-row {
61+
position: sticky;
62+
top: 0;
63+
z-index: 1;
64+
}
65+
66+
.top-row, article {
67+
padding-left: 2rem !important;
68+
padding-right: 1.5rem !important;
69+
}
70+
}

0 commit comments

Comments
 (0)