Dynamically set the width of node according to the length of annotation(text inside node)

[Rohit Swarup]

We need to dynamically set the width of node as per text size(annotation).

We tried by setting the maxWidth and minWidth (please refer below code snippet) but it didn't help.

obj.shape = { type: 'Basic', shape: 'Rectangle' };

     obj.style = {

        fill: '#0f8fe4',

        strokeWidth: 0

      };

      // node text css object

      obj.minWidth = 100;

      obj.maxWidth = 250;

      obj.height = 2;

      obj.annotations = [

        {

          content: nodeData.name,

          offset: { x: 0.5, y: 0 },

          verticalAlignment: 'Bottom',

          style: {

            textOverflow: 'Ellipsis',

            textWrapping: 'NoWrap'

          },

          minWidth: 110,

          maxWidth: 235

        }

      ];

Also please refer attached screenshot where the size of 1st node is fine but in 2nd node as length of text is less in that case we want to decrease size of that node as per inner text.

It would be great help if there is any other solution for this requirement.

[Balasubramanian Manikandan]

We have achieved your requirement using textEdit event. This event triggers on completion of text editing. We have set the annotation width to the node width in this event.  Refer to the below code snippet and sample.

Code Snippet :

  public textEdit(args: ITextEditEventArgs) {

    this.node = this.diagram.selectedItems.nodes[0];

    setTimeout(() => {

      let id: string = this.node.id;

      let node: NodeModel = this.node;

      let annotation: string = node.annotations[0].id;

      let bounds: any = document

        .getElementById(node.id + '_' + annotation)

        .getBoundingClientRect();

      if (bounds.width > node.width) {

        node.width = bounds.width + 15;

        this.diagram.dataBind();

      } else if (bounds.width < 50) {

        node.width = 50;

        this.diagram.dataBind();

      } else {

        node.width = bounds.width + 15;

        this.diagram.dataBind();

      }

    }, 50);

  }

 

Sample:

https://stackblitz.com/edit/angular-9uc3wb-vzkdzr?file=app.component.ts,app.component.html,diagram.ts,package.json