question about diagram node using HTML type

Hi,

I am using the diagram with HTML node type,

  1. when call loadDiagram method, it will error.






2. The below image I am using in html type is a font awesome, how to make the font size follow the parent size when resizing?




1 Reply

AR Aravind Ravi Syncfusion Team June 3, 2022 11:46 AM UTC

Hi Lorryl,


Please find the response for queries in below table


when call loadDiagram method, it will error.

We are unable to reproduce the reported issue at our end. When we tried to save the diagram and call loadDiagram method, the diagram has been loaded properly. For more information about how to use save and load diagram, please refer to below UG link

 

UG Link: https://ej2.syncfusion.com/angular/documentation/diagram/serialization/

The below image I am using in html type is a font awesome, how to make the font size follow the parent size when resizing?

Whenever we resize any node in the diagram, sizeChange event gets triggered. In that event get the text element from DOM and change its fontSize as per your requirement. We have created a simple sample to change the fontsize of text element. Please refer to below code snippet and sample

 

public sizeChange(args: ISizeChangeEventArgs) {

    if (args.state === 'Completed') {

      var node = args.source.nodes[0];

      var element = document.getElementById(node.id + '_text');

      element.style.fontSize = node.width / 6 + 'px';

    }

  }

 

Sample: https://stackblitz.com/edit/angular-j8lscz?file=app.component.ts

 


Regards

Aravind Ravi


Loader.
Up arrow icon