HTML inside connector of Diagram: Angular 7+ & TypeScript 3+

[Laurens Albers]

Hi,

Is there any way to generate HTML on a connector and preferably inside or just like the usage/location of annotation.

Im trying to add a progress bar(from Angular Material) so that it shows me the current realtime percentage of a call in progress.

Tried a progressbar component & image in each example:

  htmlcontent: string = '<mat-progress-bar mode="determinate" value=this.amount></mat-progress-bar>'></div>';

//1 doesnt do anything

  const connector: ConnectorModel = {

                    shape: { type: 'HTML', content: this.htmlcontent }, //??

                    annotations: [];

                    type: "Straight",

              //etc

  }

//2 just generates a string

  const connector: ConnectorModel = {

                      annotation: [{content: '<mat-progress-bar mode="determinate" value=this.amount></mat-progress-bar>'}],

                    type: "Straight",

              //etc

   }

Thanks in advance!

greetings,

Laurens Albers

[Ramya Thirugnanam]

Hi Laurens,    

Requirement : html element in node. 

We can host the html element in nodemodel alone not with the connector. We have created a simple sample to represent the requirement. Please refer to the sample from the following link.    

Sample link:  
Angular-EJ2-HTML_Shapes-Binding551191051
  

This sample explains the binding with properties using class.    

HTML Binding:  

We have provided binding using HTML also and please refer to the below code example. The “ngAfterViewInit” method will be only effective when Diagram is rendered.  

  

To create HTML element (button): The below div should be defined before diagram div.	<div id='button_div' style="height:100%;width:100%;border:none; background-color:white;"><img src="./app/diagram/diagram/Nodes_1.png" width="100%;height:50px"/></div>
Angular : To get the button and show as content of the Node	ngAfterViewInit(): void {    let node: NodeModel = this.diagram.nodes[6];    //  ‘button_div’ id of div which want to show as content of node.    node.shape = { type: 'HTML', content: document.getElementById('button_div') };    this.diagram.dataBind();    }

   

For more details about shape of Node, please refer to the below help documentation  link.  

  

Link: https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html  

  

Regards,   

Ramya T   

[Laurens Albers]

Hi,

thank you for your response!

Any idea if you will be implementing this feature in the near future?

It would be greatly appreciated.

greetings,

Laurens

[Ramya Thirugnanam]

Hi Laurens, 

 

The Shape can be applied to node and port kind of features alone.   

 

Could you please provide the scenarios/need to apply html elements as part of connector? This will help us to investigate on  the scenario and we will provide appropriate solution. 

 

Regards, 

Ramya T 

[Laurens Albers]

We are making a webapplication version of a existing application(wpf).

For the application I need to create a progressbar, which is being updated with data being passed every second or so. This is done ON the connector to show the user about the progress(from the SourceID) that is being done, It cannot be done on the node itself, because there could be multiple connection leading to each node.

That's why the connector would be preferred.

For now i have created a simple tryout function where i'm using another set of nodes is being pushed based on the center(x,y) of a connector.

For html, i have used the simple "bootstrap" progressbar to show the bar. But in the following example i will just use "the value"

 for (let item of this.diagram.connectors) {

      const obj1 = item['intermediatePoints'][0];

      const obj2 = item['intermediatePoints'][1];

      const sum1 = (obj1['y'] + obj2['y']) / 2;

      const sum2 = (obj1["x"] + obj2['x']) / 2;

      const randomId = Math.random().toString(36).slice(5, 10); //create 5 random characters/numbers

      const node: NodeModel = {

        id: "loading" + randomId,

        width: 200,

        data: { value: value },

        height: 100,

        offsetX: sum2,

        offsetY: sum1,

        shape: {

          type: 'HTML',

          content: `${value}`

        },

      }

      this.diagram.add(node);

    }

    this.updateTimer();

After adding the node, another tryout function which uses setInterval() until "100" is reached.

  updateTimer() {

    for (let item of this.diagram.nodes) {

      const name = item.id.slice(0, -5);

      if (name === 'loading') {

        var timer = setInterval(() => {

          if (item.data['value'] !== 100) {

            item.data['value'] += 10;

            console.log(item.data['value']);

this.diagram.dataBind()?? // update node/html is not working? Any idea?

          } else {

            clearInterval(timer);

          }

        }, 500);

      }

    }

[Ramya Thirugnanam]

Hi Laurens, 

 

Thanks for sharing the requirement details. 

 

Connector will not allow to define shape. But also, we can achieve the requirement by using Annotation of Connector. We have implemented template support for Annotation and it supports to add html elements also. This feature is included in our Volume 4 2018 release which is tentatively scheduled on mid of December 2018. 

 

Regards, 

Ramya T 

[Laurens Albers]

hi,

Ah, would be great! annotation of the connector is a great location to add html elements. 

Then I will wait for Volume 4. Thanks for your feedback!

greetings,

Laurens

[Ramya Thirugnanam]

Hi Laurens, 

 

Thanks for your update. 

 

Regards, 

Ramya T 

[Ramya Thirugnanam]

Hi Laurens,   

 

Requirement: Template support for annotation. 

 

 

We are glad to announce that our Essential Studio Volume 4 Beta, 2018 release (v16.4.0.40) has been rolled out and we have included the reported requirement with this Beta release. Please use the following link for download.   

https://www.syncfusion.com/forums/141399/essential-studio-2018-volume-4-beta-release-v16-4-0-40-is-available-for-download   

Feature information : 

Diagram provides template support for annotation. you should define a SVG/HTML content as string in the annotation’s template property. 

We have provided sample and code example to set template for the annotation. 

Sample link: https://ej2.syncfusion.com/beta/angular/demos/#/material/diagram/annotations 

Code example: 

// A connector is created and stored in connectors array. 

let connector: ConnectorModel = { 

    id: 'connector1', 

    sourcePoint: { 

        x: 300, 

        y: 100 

    }, 

    targetPoint: { 

        x: 400, 

        y: 300 

    }, 

    type: 'Orthogonal', 

    //Sets the annotation for the node 

    annotations: [{ 

        // Sets the template for a node 

        template: '<div><input type="button" value="Submit"></div>' 

    }] 

}; 

 

 

We thank and appreciate your patience for waiting for this release. Please get in touch with us if you would require any further assistance.   

 

Regards, 

Ramya T