From 13d14fdb461cd489b2f7735c0f673d3a63cf3052 Mon Sep 17 00:00:00 2001 From: "AzureAD\\SumathiUthayakumar" Date: Wed, 12 Jun 2024 17:12:18 +0530 Subject: [PATCH] 878811: sample added --- .../SearchOption/Pages/Index.razor | 492 +++++++++++++++--- 1 file changed, 413 insertions(+), 79 deletions(-) diff --git a/UG-Samples/SymbolPalette/SearchOption/Pages/Index.razor b/UG-Samples/SymbolPalette/SearchOption/Pages/Index.razor index fb94bf38..efb0d555 100644 --- a/UG-Samples/SymbolPalette/SearchOption/Pages/Index.razor +++ b/UG-Samples/SymbolPalette/SearchOption/Pages/Index.razor @@ -1,110 +1,444 @@ @page "/" + @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette +@*Hidden:Lines*@ +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@*End:Hidden*@ +@using shapes = Syncfusion.Blazor.Diagram.NodeShapes +@using SymbolExpandMode = Syncfusion.Blazor.Navigations.ExpandMode +@using ButtonChangeArgs = Syncfusion.Blazor.Buttons.ChangeEventArgs +@*Hidden:Lines*@ +@inject NavigationManager NavigationManager -
-
-
- - -
+ +@*End:Hidden*@ + + +
+ @*Hidden:Lines*@ +
+ +
+ @*Hidden:Lines*@ + @*End:Hidden*@ + @*End:Hidden*@ +
+ + +
+
+ + + + + + + + +
+ @*Hidden:Lines*@
+
+ @*End:Hidden*@
-@code -{ - SymbolMargin SymbolMargin = new SymbolMargin - { - Left = 15, - Right = 15, - Top = 15, - Bottom = 15 - }; - SfSymbolPaletteComponent SymbolPalette; - //Define palettes collection. - DiagramObjectCollection Palettes = new DiagramObjectCollection(); - // Defines palette's flow-shape collection. - DiagramObjectCollection FlowShapes = new DiagramObjectCollection(); - // Defines palette's basic-shape collection. - DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); - - // Defines palette's connector collection. - DiagramObjectCollection Connectors = new DiagramObjectCollection(); +@code{ + @*Hidden:Lines*@ + + private int? index { get; set; } = 1; + public int? sizeChangeValue { get; set; } = 75; + bool icon = true; + bool text = true; + bool animation = true; + bool animationCheckbox = true; + @*End:Hidden*@ + DiagramSize symbolDragPreviewSize; + SymbolExpandMode paletteExpandMode = SymbolExpandMode.Multiple; + SymbolInfo SymbolInfo = new SymbolInfo(); + public SfDiagramComponent Diagram; + SfSymbolPaletteComponent palette; + public DiagramObjectCollection palettes; + double symbolHeight = 75; + double symbolWidth = 75; + public DiagramObjectCollection basicShapes { get; set; } + public DiagramObjectCollection connectors { get; set; } + public DiagramObjectCollection flowShapes { get; set; } + // Defines interval values for GridLines + public double[] GridLineIntervals { get; set; } + //Defines Diagram's Nodes collection + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Defines Diagram's Connectors collection + private DiagramObjectCollection diagramConnectors = new DiagramObjectCollection(); + [Inject] + protected IJSRuntime jsRuntime { get; set; } + @*Hidden:Lines*@ + @*End:Hidden*@ + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + palette.Targets = new DiagramObjectCollection + { + Diagram + }; + } protected override void OnInitialized() { - InitPaletteModel(); + + symbolDragPreviewSize = new DiagramSize(); + symbolDragPreviewSize.Width = 80; + symbolDragPreviewSize.Height = 80; + GridLineIntervals = new double[] { 1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75 }; + InitializePalatte(); } - private void InitPaletteModel() + private void InitializePalatte() { - CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); - CreatePaletteNode(NodeBasicShapes.Ellipse, "Ellipse"); - CreatePaletteNode(NodeBasicShapes.Star, "Star"); - CreatePaletteNode(NodeBasicShapes.Hexagon, "Hexagon"); - CreatePaletteNode(NodeBasicShapes.Plus, "Plus"); - CreatePaletteNode(NodeBasicShapes.Diamond, "Diamond"); - - CreateFlowShape(NodeFlowShapes.Terminator, "Terminator"); - CreateFlowShape(NodeFlowShapes.Process, "Process"); - CreateFlowShape(NodeFlowShapes.PreDefinedProcess, "PreDefinedProcess"); - CreateFlowShape(NodeFlowShapes.Annotation, "Annotation"); - CreateFlowShape(NodeFlowShapes.Card, "Card"); - - CreateConnector("ortho", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); - CreateConnector("link2", ConnectorSegmentType.Orthogonal, DecoratorShape.None); - CreateConnector("link3", ConnectorSegmentType.Straight, DecoratorShape.Arrow); - CreateConnector("straight", ConnectorSegmentType.Straight, DecoratorShape.None); - CreateConnector("link5", ConnectorSegmentType.Bezier, DecoratorShape.None); - CreateConnector("link6", ConnectorSegmentType.Bezier, DecoratorShape.Arrow); - Palettes = new DiagramObjectCollection() + palettes = new DiagramObjectCollection(); + + // palette which contains basic shape nodes + basicShapes = new DiagramObjectCollection + { + CreateBasicNode("Rectangle",NodeBasicShapes.Rectangle), + CreateBasicNode("Ellipse",NodeBasicShapes.Ellipse), + CreateBasicNode("Diamond",NodeBasicShapes.Diamond), + CreateBasicNode("Triangle",NodeBasicShapes.Triangle), + CreateBasicNode("Hexagon",NodeBasicShapes.Hexagon), + CreateBasicNode("Pentagon",NodeBasicShapes.Pentagon), + CreateBasicNode("Cylinder",NodeBasicShapes.Cylinder), + CreateBasicNode("Star",NodeBasicShapes.Star), + CreateBasicNode("Octagon",NodeBasicShapes.Octagon), + CreateBasicNode("Plus",NodeBasicShapes.Plus), + CreateBasicNode("Heptagon",NodeBasicShapes.Heptagon), + }; + + // palette which contains connectors + connectors = new DiagramObjectCollection() { - new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, - new Palette(){Symbols = FlowShapes,Title = "Flow Shapes", ID = "Flow Shapes" }, - new Palette(){Symbols = Connectors,Title = "Connector", ID = "Connector" }, + CreateConnector("link1",ConnectorSegmentType.Orthogonal,DecoratorShape.Arrow), + CreateConnector("link2",ConnectorSegmentType.Orthogonal,DecoratorShape.None), + CreateConnector("link3",ConnectorSegmentType.Straight,DecoratorShape.Arrow), + CreateConnector("link4",ConnectorSegmentType.Straight,DecoratorShape.None), + CreateConnector("link5",ConnectorSegmentType.Bezier,DecoratorShape.None), + CreateConnector("link6",ConnectorSegmentType.Bezier, DecoratorShape.Arrow) + }; + + // palette which contains flow shape nodes + flowShapes = new DiagramObjectCollection() + { + CreateFlowNode("Terminator",NodeFlowShapes.Terminator), + CreateFlowNode("Process",NodeFlowShapes.Process), + CreateFlowNode("Sort",NodeFlowShapes.Sort), + CreateFlowNode("Document",NodeFlowShapes.Document), + CreateFlowNode("Display",NodeFlowShapes.Display), + CreateFlowNode("PaperTap",NodeFlowShapes.PaperTap), + CreateFlowNode("Delay",NodeFlowShapes.Delay), + CreateFlowNode("Data",NodeFlowShapes.Data), + CreateFlowNode("Card",NodeFlowShapes.Card), + CreateFlowNode("Collate",NodeFlowShapes.Collate), + CreateFlowNode("Decision",NodeFlowShapes.Decision), + }; + + #pragma warning disable BL0005 + palettes.Add( + new Palette() + { + ID = "BasicShape", + IsExpanded = true, + Symbols = basicShapes, + Title = "Basic Shapes", + IconCss = "e-ddb-icons e-basic" + } + ); + palettes.Add( + new Palette() + { + ID = "FlowShape", + IsExpanded = true, + Symbols = flowShapes, + Title = "Flow Shapes", + IconCss = "e-ddb-icons e-flow" + } + ); + palettes.Add( + new Palette() + { + ID = "Connectors", + IsExpanded = true, + Symbols = connectors, + Title = "Connectors", + IconCss = "e-ddb-icons e-connector" + } + ); + #pragma warning restore BL0005 } - private void CreateConnector(string id, ConnectorSegmentType type, DecoratorShape shape) + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) { - Connector connector = new Connector() - { - ID = id, - Type = type, - SearchTags = new List() { "connector" }, - SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, - TargetPoint = new DiagramPoint() { X = 40, Y = 40 }, - TargetDecorator = new DecoratorSettings() - { - Shape = shape, - Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } - }, - Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } - }; - Connectors.Add(connector); + string description = symbol is Node ? (symbol as Node).ID : (symbol as Connector).ID; + if (text) + { + SymbolInfo.Description = new SymbolDescription() { Text = description, TextOverflow = TextOverflow.Wrap }; + } + else + { + SymbolInfo.Description = new SymbolDescription() { Text = "", TextOverflow = TextOverflow.Wrap }; + } + return SymbolInfo; } - private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + + // Method to create basic shape node + private Node CreateBasicNode(string id, NodeBasicShapes type) { Node node = new Node() { ID = id, - SearchTags = new List() { "Basic" }, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Shape = new BasicShape() + { + Type = shapes.Basic, + Shape = type + }, + SearchTags = new List() {"Basic" }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } }; - PaletteNodes.Add(node); + return node; } - private void CreateFlowShape(NodeFlowShapes flowShape, string id) + + // Method to create flow shape node + private Node CreateFlowNode(string id, NodeFlowShapes type) { Node node = new Node() + { + ID = id, + Shape = new FlowShape() { - ID = id, - SearchTags = new List() { "Flow" }, - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - }; - FlowShapes.Add(node); + Type = shapes.Flow, + Shape = type + }, + SearchTags = new List() {"flow" }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } + }; + return node; + } + + // Method to create connector + private Connector CreateConnector(string id, ConnectorSegmentType type, DecoratorShape shape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SearchTags = new List() {"connector" }, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 40, Y = 40 }, + TargetDecorator = new DecoratorSettings() + { + Shape = shape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } + }; + return connector; } } \ No newline at end of file