Skip to content

Updated code snippet for context menu #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated code snippet for context menu #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 148 additions & 8 deletions ...ontextMenuEvent/ContextMenuItemClickedEvent/ContextMenuItemClickedEvent/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,156 @@
@page "/"

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px">
<ContextMenuSettings Show="true" ShowCustomMenuOnly="false" ContextMenuItemClicked="@ContextMenuItemClickHandler">
<SfDiagramComponent @ref="diagram"
Height="600px"
Nodes="NodeCollection"
Connectors="ConnectorCollection">
<ContextMenuSettings Show="true"
Items="contextMenuItemModels"
ShowCustomMenuOnly="true"
ContextMenuOpening="OnContextMenuOpen"
ContextMenuItemClicked="ContextMenuItemClickHandler">
</ContextMenuSettings>
</SfDiagramComponent>

@code
{
// Defines context menu and ContextMenuItemClicked event
public void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg)
@code {
// Reference to diagram
private SfDiagramComponent diagram;

// Diagram collections
private DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
private DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
// Nodes
Node node1 = new Node()
{
ID = "node1",
Height = 100,
Width = 100,
OffsetX = 100,
OffsetY = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white",
StrokeWidth = 1
}
};

Node node2 = new Node()
{
ID = "node2",
Height = 100,
Width = 100,
OffsetX = 300,
OffsetY = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white",
StrokeWidth = 1
}
};

NodeCollection.Add(node1);
NodeCollection.Add(node2);

// Connector
Connector connector1 = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
Type = ConnectorSegmentType.Straight,
Style = new ShapeStyle()
{
StrokeWidth = 2
}
};

ConnectorCollection.Add(connector1);
}

// Context menu items
private List<ContextMenuItem> contextMenuItemModels = new List<ContextMenuItem>()
{
//Action to be performed
new ContextMenuItem()
{
Text = "Node Color",
ID = "Node",
Items = new List<ContextMenuItem>()
{
new ContextMenuItem(){ Text = "Red", ID = "Red" },
new ContextMenuItem(){ Text = "Yellow", ID = "Yellow" }
}
},
new ContextMenuItem()
{
Text = "Connector Color",
ID = "Connector",
Items = new List<ContextMenuItem>()
{
new ContextMenuItem(){ Text = "Black", ID = "Black" },
new ContextMenuItem(){ Text = "Pink", ID = "Pink" }
}
}
};

private void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
{
if (diagram.SelectionSettings.Nodes.Count > 0)
{
Node node = diagram.SelectionSettings.Nodes[0];
if (node.ID == "node1" || node.ID == "node2")
{
foreach (ContextMenuItem item in arg.Items)
{
if (item.ID == "Connector")
{
arg.HiddenItems.Add(item.ID); // Hide connector menu when a node is selected
}
}
}
}

if (diagram.SelectionSettings.Connectors.Count > 0)
{
Connector connector = diagram.SelectionSettings.Connectors[0];
if (connector.ID == "connector1")
{
foreach (ContextMenuItem item in arg.Items)
{
if (item.ID == "Node")
{
arg.HiddenItems.Add(item.ID); // Hide node menu when a connector is selected
}
}
}
}
}

private void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg)
{
switch (arg.Item.Text)
{
case "Red":
diagram.SelectionSettings.Nodes[0].Style.Fill = "Red";
break;

case "Yellow":
diagram.SelectionSettings.Nodes[0].Style.Fill = "Yellow";
break;

case "Black":
diagram.SelectionSettings.Connectors[0].Style.StrokeColor = "Black";
break;

case "Pink":
diagram.SelectionSettings.Connectors[0].Style.StrokeColor = "Pink";
break;
}
}
}
}
131 changes: 124 additions & 7 deletions ...Menu/ContextMenuEvent/ContextMenuOpenningEvent/ContextMenuOpenningEvent/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,133 @@
@page "/"

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px">
<ContextMenuSettings Show="true" ShowCustomMenuOnly="false" ContextMenuOpening="@OnContextMenuOpen">
<SfDiagramComponent @ref="diagram"
Height="600px"
Nodes="NodeCollection"
Connectors="ConnectorCollection">
<ContextMenuSettings Show="true"
Items="contextMenuItemModels"
ShowCustomMenuOnly="true"
ContextMenuOpening="OnContextMenuOpen">
</ContextMenuSettings>
</SfDiagramComponent>

@code
{
// Defines context menu and ContextMenuOpening event
public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
@code {
// Reference to diagram
private SfDiagramComponent diagram;

// Diagram collections
private DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
private DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
//Action to be performed
// Nodes
Node node1 = new Node()
{
ID = "node1",
Height = 100,
Width = 100,
OffsetX = 100,
OffsetY = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white",
StrokeWidth = 1
}
};

Node node2 = new Node()
{
ID = "node2",
Height = 100,
Width = 100,
OffsetX = 300,
OffsetY = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white",
StrokeWidth = 1
}
};

NodeCollection.Add(node1);
NodeCollection.Add(node2);

// Connector
Connector connector1 = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
Type = ConnectorSegmentType.Straight,
Style = new ShapeStyle()
{
StrokeWidth = 2
}
};

ConnectorCollection.Add(connector1);
}

// Context menu items
private List<ContextMenuItem> contextMenuItemModels = new List<ContextMenuItem>()
{
new ContextMenuItem()
{
Text = "Node Color",
ID = "Node",
Items = new List<ContextMenuItem>()
{
new ContextMenuItem(){ Text = "Red", ID = "Red" },
new ContextMenuItem(){ Text = "Yellow", ID = "Yellow" }
}
},
new ContextMenuItem()
{
Text = "Connector Color",
ID = "Connector",
Items = new List<ContextMenuItem>()
{
new ContextMenuItem(){ Text = "Black", ID = "Black" },
new ContextMenuItem(){ Text = "Pink", ID = "Pink" }
}
}
};

private void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
{
if (diagram.SelectionSettings.Nodes.Count > 0)
{
Node node = diagram.SelectionSettings.Nodes[0];
if (node.ID == "node1" || node.ID == "node2")
{
foreach (ContextMenuItem item in arg.Items)
{
if (item.ID == "Connector")
{
arg.HiddenItems.Add(item.ID); // Hide connector menu when a node is selected
}
}
}
}

if (diagram.SelectionSettings.Connectors.Count > 0)
{
Connector connector = diagram.SelectionSettings.Connectors[0];
if (connector.ID == "connector1")
{
foreach (ContextMenuItem item in arg.Items)
{
if (item.ID == "Node")
{
arg.HiddenItems.Add(item.ID); // Hide node menu when a connector is selected
}
}
}
}
}
}