1. Home
  2. Forum
  3. Blazor
  4. Annotation text within nodes is not visible

Annotation text within nodes is not visible

I have a problem with the Diagram component.


Annotation text within nodes is not visible within the node. It appears at the top - left:


I have the following code: 

@using GestionProyectos.Shared.Data



@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal


<SfDiagramComponent @ref="@Diagram" Height="315px" Width="100%" InteractionController="@InteractionController.ZoomPan" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating">
    <DataSourceSettings ID="Id" ParentID="Manager" DataSource="DataSource"></DataSourceSettings>
    <Layout @bind-Type="@type" @bind-Orientation="@orientation" GetLayoutInfo="GetLayoutInfo" >


    </Layout>
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>


@code
{
    SfDiagramComponent Diagram;
    LayoutOrientation orientation = LayoutOrientation.TopToBottom;
    LayoutType type = LayoutType.HierarchicalTree;




    // Create a model class for the data source
    public class JuntaProyectoGrafica
    {
        public string Id { get; set; }
        public string Role { get; set; }
        public string Nombre { get; set; }
        public string Color { get; set; }
        public string Manager { get; set; }
    }


    public int MyProperty { get; set; }
    //Defining the dataSource
    public List<JuntaProyectoGrafica> DataSource = new List<JuntaProyectoGrafica>()
    {
    new JuntaProyectoGrafica() { Id = "1", Role= "Junta Directiva", Color = "#71AF17", Manager = "" },
    new JuntaProyectoGrafica() { Id = "2", Role=  "Ejecutivo", Color = "#1859B7", Manager =  "1" },
    new JuntaProyectoGrafica() { Id = "3", Role= "Proveedor",Color =  "#1859B7", Manager =  "1" },
    new JuntaProyectoGrafica() { Id = "4", Role= "Usuario Principal", Color = "#1859B7", Manager =  "1" },
    new JuntaProyectoGrafica() { Id = "5", Role= "Pedro", Color = "#2E95D8", Manager =  "2", },
    new JuntaProyectoGrafica() { Id = "6", Role= "Juan", Color = "#2E95D8", Manager =  "2", },
    new JuntaProyectoGrafica() { Id = "7", Role= "Matías", Color = "#2E95D8", Manager =  "3", },
    new JuntaProyectoGrafica() { Id = "8", Role= "Pedro", Color = "#2E95D8", Manager =  "4", },
    new JuntaProyectoGrafica() { Id = "9", Role= "Laura", Color = "#2E95D8", Manager =  "4", },
    new JuntaProyectoGrafica() { Id = "10", Role= "Mónica", Color = "#2E95D8", Manager =  "4", }
    };


    private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
    {
        Node node = obj as Node;
        // Adding assistant to the root node
        if ((node.Data as JuntaProyectoGrafica).Role == "Ejecutivo")
        {
            options.Assistants.Add(options.Children[0]);
            options.Children.RemoveAt(0);
        }
         if ((node.Data as JuntaProyectoGrafica).Role == "Proveedor")
        {
            options.Assistants.Add(options.Children[0]);
            options.Children.RemoveAt(0);
        }
         if ((node.Data as JuntaProyectoGrafica).Role == "Usuario Principal")
        {
            options.Assistants.Add(options.Children[0]);
            options.Children.RemoveAt(0);
        }
        options.AlignmentType = SubTreeAlignmentType.Balanced;
        options.Orientation = Orientation.Horizontal;
        return options;
    }


    private void NodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        if (node.Data is System.Text.Json.JsonElement)
        {
            node.Data = System.Text.Json.JsonSerializer.Deserialize<JuntaProyectoGrafica>(node.Data.ToString());
        }
        JuntaProyectoGrafica organizationData = node.Data as JuntaProyectoGrafica;
        node.Width = 120;
        node.Height = 50;
        node.Style.Fill = organizationData.Color;
        ShapeAnnotation annotation = new ShapeAnnotation()
        {
            Content = organizationData.Role,
            Offset = new DiagramPoint(0.5, 0.5),
             Style =new TextStyle(){Color = "white"}
        };
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>() { annotation };
    }

    // Defines default values for Connector object
    private void ConnectorCreating(IDiagramObject DiagramObject)
    {
        Connector connector = (DiagramObject as Connector);
        connector.Type = ConnectorSegmentType.Orthogonal;
        connector.TargetDecorator.Shape = DecoratorShape.None;
    }
}

Thanks

5 Replies
AR Aravind Ravi Syncfusion Team December 13, 2021 01:14 PM UTC

Hi Manuel, 

We have created a sample in later version (19.3.57) and checked the diagram layout. We does not able to reproduce the reported issue at our end. We suspect that you have used older version, so that reported issue gets occurs. In later version we have checked, that annotations are rendered properly inside nodes. We have attached a video demonstration 


So please install the latest diagram packages (19.3.57) and check, the label gets rendered inside nodes.  

Regards 
Aravind Ravi 


MA Manuel December 13, 2021 01:30 PM UTC

i can´t access to the video.. could you check it ? 


Thanks, Manuel



AR Aravind Ravi Syncfusion Team December 13, 2021 03:29 PM UTC

Hi Manuel, 

Sorry for the inconvinence caused. Please find the video in the below link 


Regards 
Aravind Ravi 


MA Manuel December 14, 2021 07:48 AM UTC

Hi Aravind, 


I´m still have the problem with the later version 19.0.57




I have changed the color of the text to red, to be able to view it on the left / top




Could you check it again ? Thanks.



AR Aravind Ravi Syncfusion Team December 15, 2021 01:45 PM UTC

Hi Manuel, 

We have created a sample a layout sample in latest version(19.3.59). When we run a sample, that you provided in your last update, the sample gets run properly. Even after change the color of the annotation text, the text all get visible within the nodes. Please refer to below screenshot 

 



We have attached a sample in the below link 


Regards 
Aravind Ravi 


Loader.
Up arrow icon