Annotation's width is bigger than shape

[Minh Nguyen]

I'm trying to use textOverflow: 'Ellipsis', but it doesn't work

[Aravind Ravi]

Hi Minh, 

By default, in the node, text overflow gets work when text size gets exceeds than node size. To use text overflow , set annotation textOverflow as Ellipsis and textWrapping as Wrap. Please find the below snippet for how to set text overflow for annotation. 

let nodes = [{ 

    id: 'node1', 

    // Position of the node 

    offsetX: 100, 

    offsetY: 100, 

    // Size of the node 

    width: 100, 

    height: 100, 

    style: { 

        fill: '#6BA5D7', 

        strokeColor: 'white' 

    }, 

    annotations: [{ 

        content: 'Annotation Text', 

        style: { 

            textOverflow: 'Ellipsis', 

           textWrapping: ‘Wrap’ 

        } 

    }] 

}] 

We have attached a video demonstration , that how ellipsis worked after text exceeds node size. 

Video: https://www.syncfusion.com/downloads/support/forum/156458/ze/Text-Wrap1954359926 

Regards 

Aravind Ravi 

[Minh Nguyen]

Hi Aravind,

I'm trying all three option of textWrapping, but none of them working.

• Add to Phrasebook
  • No word lists for English -> Vietnamese...
  • Create a new word list...
• Copy

[Aravind Ravi]

Hi Minh, 

 

We are unable to reproduce the reported issue at our end. We have tried to edit the text for the BPMN task node and text wrapping Ellipsis has been properly worked for the BPMN task node.  We suspect that the issue occurs due to for symbol palette, symbol annotation you have set an textWrapping and in the diagram getNodeDefaults method you have set an annotation but does not set textWrapping for annotation. So that style for annotation does not gets applied when dropped the symbol in palette. So if you used annotation in getNodeDefaults means then set style for the annotation in getNodeDefaults method. Please refer below code snippet  

 

<div style="width: 75%; float: right"> 

      <ejs-diagram 

        id="diagram" 

        ref="diagram" 

        :width="width" 

        :height="height" 

        :connectors="connectors" 

        :nodes="nodes" 

        :getNodeDefaults='getNodeDefaults' 

      ></ejs-diagram> 

    </div> 

data() { 

    return { 

      width: "1000px", 

      height: "700px", 

      connectors: connectors, 

      nodes: nodes, 

      getNodeDefaults: (node) => { 

        node.width = 75; 

        node.height = 75; 

        node.annotations = [{ style: { textOverflow: 'Ellipsis', textWrapping: 'Wrap' } }]; 

      }, 

} 

  

We have attached a video demonstration that how text wrapping gets worked after dropped a symbol from palette. Please find the video in below link 

 

Video: https://www.syncfusion.com/downloads/support/forum/156458/ze/Text-Wrap713790981 

 

We have created a sample using the symbol palette with bpmn task node. Please find the sample in below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156458/ze/Text-Wrapping1548393385 

 

Incase if the issue still persists, please share us an simple sample illustrating issue or modify the above sample replicating issue. This would help us to serve you better. 

 

Regards 

Aravind Ravi