diff --git a/blazor/diagram/images/symboltooltipTemplate.gif b/blazor/diagram/images/symboltooltipTemplate.gif new file mode 100644 index 0000000000..20ad55fda0 Binary files /dev/null and b/blazor/diagram/images/symboltooltipTemplate.gif differ diff --git a/blazor/diagram/symbol-palette/symbol-palette.md b/blazor/diagram/symbol-palette/symbol-palette.md index 7c4f5659d2..32ac931c35 100644 --- a/blazor/diagram/symbol-palette/symbol-palette.md +++ b/blazor/diagram/symbol-palette/symbol-palette.md @@ -158,7 +158,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddNodeToPalette) -![Adding Node to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-to-palette.png) +![Adding Node to Symbol Palette in Blazor Diagram](images/blazor-diagram-add-node-to-palette.png) ### How to add connector to palette @@ -228,7 +228,7 @@ The following code example illustrates how to add connector to a palette. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddConnectorToSymbolPalette) -![Adding Connector to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-connector-to-palette.png) +![Adding Connector to Symbol Palette in Blazor Diagram](images/blazor-diagram-add-connector-to-palette.png) ### How to add nodegroup into palette @@ -317,9 +317,9 @@ The following code example illustrates how to add nodegroup to a palette. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddGroupToPalette) -![Adding NodeGroup to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-group-to-palette.png) +![Adding NodeGroup to Symbol Palette in Blazor Diagram](images/blazor-diagram-add-node-group-to-palette.png) -## How to add palette to SymbolPalette +## Add palette to SymbolPalette A palette allows to display a group of related symbols and it textually annotates the group with its header. A [Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html) can be added as a collection of symbol groups. @@ -473,7 +473,7 @@ Palettes = new DiagramObjectCollection() ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddPaletteToSymbolPalette) -![Adding Palette to SymbolPalette in Blazor Diagram](../images/blazor-diagram-add-palette-to-symbol-palette.png) +![Adding Palette to SymbolPalette in Blazor Diagram](images/blazor-diagram-add-palette-to-symbol-palette.png) ## How to drag and drop symbols from palette to diagram @@ -629,7 +629,277 @@ To initialize drag and drop, you must add the diagram to the [Targets](https://h ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DragAndDrop) -![Drag and Drop in Blazor Diagram](../images/blazor-diagram-drag-and-drop.gif) +![Drag and Drop in Blazor Diagram](images/blazor-diagram-drag-and-drop.gif) + +## Customize the palette header + +Palettes can be annotated with its header texts. + +The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Title) displayed as the header text of palette. + +The [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IsExpanded) property of palette allows to expand/collapse its palette items. + +The following code illustrates how to change the Title and IsExpanded properties at runtime. + +```csharp +SymbolPalette.Palettes[0].Title = "NewTitle"; +SymbolPalette.Palettes[0].IsExpanded = false; +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/PaletteHeader) + + +## How to provide tooltip for symbols in symbol palette + +Symbol palette provides supports to show tooltip when mouse hovers over any node or connector. The tooltip can be customized for each symbols in the symbol palette. + +### Default tooltip for symbols + +By default, the symbol's ID will be displayed as the tooltip for each symbol in the symbol palette when the tooltip property is not defined. The following image illustrate how the tooltip displays when mouse hovers over the symbols in symbol palette. + +![Default Tooltip in symbol palette](images/defaulttooltip.png) + +### Custom tooltip for symbols + +You can provide custom tooltip for symbols in the symbol palette by assigning custom tooltip to Tooltip property of nodes and connectors. Once custom tooltip is defined then enable the custom tooltip for symbols in the symbol palette by setting the Tooltip constraints for node and connector. This allows the custom tooltips to be displayed when hovering over symbols in the symbol palette. + +The following code example illustrates how to provide the custom tooltip for nodes. + +```csharp +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SfSymbolPaletteComponent SymbolPalette; + + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" }, + }; + } + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Tooltip = new DiagramTooltip() + { + Content = "This is Terminator", + Position = Position.BottomRight, + ShowTipPointer = true + }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip + }; + PaletteNodes.Add(node); + } +} + +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) + +![Tooltip in symbol palette](images/symboltooltip.png) + + +## How to provide different tooltip for Symbol palette and diagram elements. + +When you define custom tooltip to the symbol then same tooltip will be displayed for both symbol and dropped node in the diagram canvas. To provide different tooltip for symbols in the symbol palette and the dropped node in the diagram canvas, then DragDrop event can be utilized. The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, you can define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. + +```csharp +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfDiagramComponent diagram; + SfSymbolPaletteComponent SymbolPalette; + //Define nodes collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + SymbolPalette.Targets = new DiagramObjectCollection() { }; + SymbolPalette.Targets.Add(diagram); + } + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill= "#6495ED", StrokeColor = "#6495ED" }, + Tooltip = new DiagramTooltip() + { + Content = "This is Terminator", + Position = Position.RightCenter, + ShowTipPointer = true + }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip + }; + PaletteNodes.Add(node); + } + + private void DragDropEvent(DropEventArgs args) + { + if (args.Element is Node) + { + (args.Element as Node).Tooltip.Content = "This is diagram Tooltip"; + } + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) + +![Tooltip in symbol palette](images/differenttooltip.gif) + + +### Tooltip template for symbols + +You can provide custom template as tooltip for symbols in the symbol palette using [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of `SfDiagramComponent`. Once tooltip template is defined then enable the custom tooltip for symbols in the symbol palette by setting the Tooltip constraints for node and connector. This allows the tooltips template to be displayed when hovering over symbols in the symbol palette. + +The following code example illustrates how to provide the tooltip template for nodes. + +```csharp +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + + + @{ + if (context is Node node) + { +

Product Name : Diagram

Element: Node

Content: Node Tooltip

ID:@node.ID

+ + } + } + + + +
+
+
+ +@code +{ + SfSymbolPaletteComponent SymbolPalette; + + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes, Title="Flow Shapes", ID="Flow Shapes" }, + }; + } + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Tooltip = new DiagramTooltip() + { + Position = Position.BottomRight, + ShowTipPointer = true + }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip + }; + PaletteNodes.Add(node); + } +} + +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) + + +>**Note:** When the tooltip for the symbol is not initialized, the ID of the symbol will be rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will remain empty. ## How to add/remove symbols from palette at runtime @@ -708,43 +978,49 @@ Palettes can be removed from the symbol palette at runtime by using the public m ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddRemovePaletteAtRuntime) -## How to enable symbol search option in symbol palette -The diagram provides support for enabling the search option in the palette. The [ShowSearchTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ShowSearchTextBox) property of the palette is used to show or hide the search textbox in the palette. You can search for symbols in the palette by entering the symbol ID (e.g., "rectangle") and search keywords into the search text box and clicking the search button. The symbols are retrieved by matching the value of the ID property with the string entered in the search textbox. +## How to customize the size of symbols + +The size of the individual symbol can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of symbol palette enables you to define the size of the symbols. + +Also, you can update the size of the symbols at runtime. + +The following code example illustrates how to change the size of a symbol and how to update the size at runtime. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Buttons -
-
+
+
+ + +
+
- +
-
+
-@code -{ - SymbolMargin SymbolMargin = new SymbolMargin - { - Left = 15, - Right = 15, - Top = 15, - Bottom = 15 - }; - SfSymbolPaletteComponent SymbolPalette; - //Define palettes collection. +@code { + //Define symbolpreview + DiagramSize SymbolPreview; + //Define symbolmargin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + double symbolwidth = 60; + double symbolheight = 60; + //Reference the symbolpalette + SfSymbolPaletteComponent symbolpalette; + + //Define palattes 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(); + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -753,106 +1029,89 @@ The diagram provides support for enabling the search option in the palette. The private void InitPaletteModel() { - 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() - { - 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" }, - }; - } - private void CreateConnector(string id, ConnectorSegmentType type, DecoratorShape shape) - { - Connector connector = new Connector() + Node node1 = new Node() { - 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" } + ID = "Rectangle", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, }; - Connectors.Add(connector); - } - private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + Node node2 = new Node() + { + ID = "Ellipse", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node3 = new Node() + { + ID = "Diamond", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Diamond }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node1); + PaletteNodes.Add(node2); + PaletteNodes.Add(node3); + + Palettes = new DiagramObjectCollection() { - 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" }, + new Palette(){Symbols =PaletteNodes,Title="Basic Shapes",ID="Basic Shapes" }, }; - PaletteNodes.Add(node); } - private void CreateFlowShape(NodeFlowShapes flowShape, string id) + //Method to update symbol width and symbol height + private void UpdateSize() { - Node node = new Node() - { - ID = id, - SearchTags = new List() { "Flow" }, - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - }; - FlowShapes.Add(node); + symbolwidth = 80; + symbolheight = 80; } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchOption) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CustomSymbolSize) + -![Search Option in Blazor Diagram](../images/SymbolSearch.gif) +The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolMargin) property is used to create the space around the elements, outside of any defined borders. -## How to add search keywords for symbols +## SymbolDragPreviewSize -The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property allows you to specify keywords that enhance the search ability of symbols within the symbol palette. These keywords are associated with nodes, connectors, groups, swimlanes, and BPMN symbols, making it easier for users to find relevant symbols for their diagram. +The symbol preview size of the palette items can be customized using the [SymbolDragPreviewSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolDiagramPreviewSize) property. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties of SymbolDragPreviewSize enable you to define the preview size to all the symbol palette items. + +The following code example illustrates how to change the preview size of a palette item. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette -
-
-
- +
+
+
+
+
+
+
+
+
+ + +
+
@code { + DiagramSize symbolDragPreviewSize; SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, - Bottom = 15 - }; + Bottom = 15 + }; + SfDiagramComponent diagram; SfSymbolPaletteComponent SymbolPalette; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); //Define palettes collection. DiagramObjectCollection Palettes = new DiagramObjectCollection(); // Defines palette's flow-shape collection. @@ -862,24 +1121,30 @@ The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram { InitPaletteModel(); } - + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + SymbolPalette.Targets = new DiagramObjectCollection() { }; + SymbolPalette.Targets.Add(diagram); + } + private void InitPaletteModel() { + symbolDragPreviewSize = new DiagramSize(); + symbolDragPreviewSize.Width = 100; + symbolDragPreviewSize.Height = 100; CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); - CreatePaletteNode(NodeBasicShapes.Ellipse, "Ellipse"); - CreatePaletteNode(NodeBasicShapes.Star, "Star"); Palettes = new DiagramObjectCollection() { new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, }; } - + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) { 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" }, }; @@ -887,9 +1152,36 @@ The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchTag) +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPreview) + -## How to update common values for all nodes and connectors +![SymbolPreview in Blazor Diagram](images/blazor-diagram-symbol-preview.gif) + +## How to restrict symbol dragging in a palette + +The [AllowDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AllowDrag) property of `SfSymbolPaletteComponent` helps to decide whether the symbols can be dragged from the palette or not. + +## Expanding event + +The [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Expanding) event of the `SfSymbolPaletteComponent` will be triggered before the item gets collapsed/expanded. + +## How to expand single or multiple palette + +The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_PaletteExpandMode) property of `SfSymbolPaletteComponent` specifies the option to expand single or multiple palettes at a time. + +* If the ExpandMode is Multiple when clicking on the collapsed icon, the clicked palette will get expanded and at the same time, the other palettes will be maintained in their previous state. +* If the ExpandMode is Single when clicking on the collapsed icon, the clicked palette will get expanded and the rest of all the palettes will get collapsed. + +```cshtml + + +``` + +## Default settings While adding more symbols such as nodes and connectors to the palette, define the default settings for those objects through the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_NodeCreating) and the [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ConnectorCreating) properties of diagram that allow to define the default settings for nodes and connectors. @@ -923,7 +1215,7 @@ While adding more symbols such as nodes and connectors to the palette, define th DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); public void OnNodeCreating(IDiagramObject args) { - Node node = args as Node; + Node node = obj as Node; node.Style.Fill = "#357BD2"; node.Style.StrokeColor = "White"; node.Style.Opacity = 1; @@ -931,7 +1223,7 @@ While adding more symbols such as nodes and connectors to the palette, define th public void OnConnectorCreating(IDiagramObject args) { - Connector connector = args as Connector; + Connector connector = obj as Connector; connector.Style.Fill = "black"; connector.Style.StrokeColor = "black"; connector.Style.Opacity = 1; @@ -975,7 +1267,7 @@ While adding more symbols such as nodes and connectors to the palette, define th } ``` -![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) +![Symbol with Description in Blazor Diagram](images/blazor-diagram-symbol-description.png) ## How to refresh the symbols at runtime @@ -1055,6 +1347,195 @@ The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/RefereshPalette) +## How to add symbol descriptions to palette symbols + +The diagram provides support to add symbol description below each symbol of a palette. This descriptive representation of each symbol will enhance the details of the symbol visually. The height and width of the symbol description can also be set individually. The method [GetSymbolInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) can be used to add the symbol description at runtime. +The following code is an example to set a symbol description for symbols in the palette. + +```csharp +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@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 PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + string text = null; + text = (symbol as Node).ID; + SymbolInfo.Description = new SymbolDescription() { Text = text }; + return SymbolInfo; + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolDescription) + +![Symbol with Description in Blazor Diagram](images/blazor-diagram-symbol-description.png) + +## Appearance of symbol description + +Customize the appearance of a symbol description in the symbol palette by adjusting the following properties: + +[Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color): Sets the color of the symbol description text. + +[Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill): Defines the background color of the symbol description. + +[FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize): Specifies the font size of the symbol description text. + +[FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily): Sets the font family of the symbol description text. + +[Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold): Indicates whether the symbol description text is bold. + +[Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic): Indicates whether the symbol description text is italicized. + +[TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration): Specifies the decoration applied to the symbol description text. + +[TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping): Defines the text wrapping behavior of the symbol description text. + +[TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow): Specifies the behavior when the text overflows the available space in the symbol description. + +[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Margin): Sets the margin around the symbol description. + +By adjusting these properties, you can tailor the appearance of symbol descriptions in the symbol palette to suit your application's requirements. + +The following code is an example to change the style of a symbol description for symbols in the palette. + +```csharp +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's basic-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + CreatePaletteNode(NodeBasicShapes.Ellipse, "Ellipse"); + CreatePaletteNode(NodeBasicShapes.Hexagon, "Hexagon"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + string text = string.Empty; + text = (symbol as NodeBase).ID; + SymbolInfo.Width = 75; + SymbolInfo.Height = 40; + SymbolInfo.Description = new SymbolDescription() { + Text = text, + // Customize the style of the symbol description + Style = new TextStyle() + { + Bold = true, + Italic = true, + Color = "red", + Fill = "transparent", + FontFamily = "Arial", + FontSize = 15, + TextDecoration = TextDecoration.Underline, + TextOverflow = TextOverflow.Ellipsis, + TextWrapping = TextWrap.WrapWithOverflow + }, + Margin = new DiagramThickness(){ Top = 10, Bottom = 10 } + }; + return SymbolInfo; + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DescriptionStyle) + +![Style of the Symbol Description in Blazor Diagram](images/blazor-diagram-symbol-description-style.png) + +## Palette interaction + +Palette interaction notifies the element enter, leave, and dragging of the symbols into the diagram. + +## Escape key function + +The diagram provides support to cancel the node drop from symbol palette when the ESC key is pressed. ## See Also diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md index bab7950df2..c5ddcad994 100644 --- a/blazor/diagram/tool-tip.md +++ b/blazor/diagram/tool-tip.md @@ -358,18 +358,27 @@ The following code example is used to set tooltip tip pointer for connectors. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TipPointerForConnectorTooltip) ## Tooltip template content - -To customize the tooltip content or to create your own visualized element on the tooltip,the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Template) can be used. +To customize the tooltip content or create your own visualized element on the tooltip, you can use the [DiagramTooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Template) for the diagram and the [SymbolTooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Template) for the symbol palette. The following code example illustrates how to add the formatted template content to the tooltip for the nodes. ```cshtml @using Syncfusion.Blazor.Diagram -@using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Buttons - + + + + @{ + if (context is Node) + { +

Product Name : Diagram

Element: Node

Content: Node Tooltip

+ } + } + + + @code { //Define diagram's nodes collection @@ -391,26 +400,16 @@ The following code example illustrates how to add the formatted template content Fill = "#6495ED", StrokeColor = "white" }, - Tooltip = new DiagramTooltip() { Template = getContent() }, + Tooltip = new DiagramTooltip(), Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, }; nodes.Add(node); } - //Method to getcontent - private string getContent() - { - string content = "

Product Name : Diagram

Element: Node

Content: Node Tooltip

"; - return content; - } - //Change the Template at run time. - private void TemplateChange() - { - nodes[0].Tooltip.Template = "

TemplateUpdate

"; - } } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipTemplateForNode) + The following code example illustrates how to add the formatted template content to the tooltip for the connectors. ```cshtml @@ -419,7 +418,18 @@ The following code example illustrates how to add the formatted template content @using Syncfusion.Blazor.Buttons - + + + + @{ + if (context is Connector) + { +

Product Name : Diagram

Element: Node

Content: Node Tooltip

+ } + } + + + @code { //Define diagram's connectors collection @@ -435,26 +445,17 @@ The following code example illustrates how to add the formatted template content ID = "Connector1", SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, - Tooltip = new DiagramTooltip() { Content = "ConnectorTooltip", Template = getContent() }, + Tooltip = new DiagramTooltip(), Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, }; connector.Add(connectors); } - //Method to getcontent - private string getContent() - { - string content = "

Product Name : Diagram

Element: Connector

Content: Connector Tooltip

"; - return content; - } - //Change the Template at run time. - private void TemplateChange() - { - connector[0].Tooltip.Template = "

TemplateUpdate

"; - } } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipTemplateForConnector) +>**Note:** When the content propoerty of the tooltip is also defined with the template for either node , connector or diagram, only the content will get rendered. The template content will get rendered only when the content property is undefined. + ## Tooltip animation To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the animation property. The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_AnimationSettings) property also allows you to set delay, duration, and various other effects of your choice.