Not able to apply ellipsis in case in mind-map diagram

Question

Hi Team,We are using Mind-Map diagram in our application. However, when we try to implement ellipsis in the rectangular boxes, it is not coming as expected.Attached the screenshot of our diagram below. Also, below is the snippet we are using to create the rectangles. Can you please help us with the solution.  private nodeDefaults(obj): NodeModel {    obj.shape = { type: 'Basic', shape: 'Rectangle' };    obj.style = {      fill: '#0f8fe4',      strokeWidth: 0,      textOverflow: 'Ellipsis'    };    obj.width = 120;    obj.height = 2;    obj.annotations = [      {        content: nodeData.name,        offset: { x: 0.5, y: 0 },        verticalAlignment: 'Bottom'      }    ];    (obj.shape as TextModel).margin = {      left: 0,      right: 0,      top: 0,      bottom: 0    };  }Attachment: mindmap_b489fac3.7z

Gowtham Gunashekar · Accepted Answer

Hi Rohit, 
 
Please refer to the following sample for how to set the ellipsis for the overflow annotation of nodes in diagram. We must set the textOverflow as 'Ellipsis' and   textWrapping as 'NoWrap' for the annotation style in getNodeDefaults and we should set the width and heigh of the node to implement the ellipsis functionality in the annotation.  
 
Code snippet: 




  private nodeDefaults(obj: NodeModel): NodeModel { 
    obj.constraints = NodeConstraints.Default & ~NodeConstraints.Drag; 
    let empInfo: EmployeeInfo = obj.data as EmployeeInfo; 
    if ( 
      empInfo.branch === 'Root' || 
      empInfo.branch === 'Left' || 
      empInfo.branch === 'Right' 
    ) { 
      //… 
      //… 
      obj.width = 70; 
      obj.height = 40; 
      obj.annotations = [ 
        { 
          content: empInfo.Label, 
          margin: { left: 10, right: 10, top: 10, bottom: 10 }, 
          style: { 
            color: 'white', 
            textOverflow: 'Ellipsis', 
            textWrapping: 'NoWrap' 
          } 
        } 
      ]; 
    } else { 
      let color: string = empInfo.branch === 'subRight' ? '#8E44AD' : '#3498DB'; 
      obj.shape = { type: 'Basic', shape: 'Rectangle' }; 
      obj.style = { fill: color, strokeWidth: 0 }; 
      obj.width = 50; 
      obj.height = 4; 
      obj.annotations = [ 
        { 
          content: empInfo.Label, 
          offset: { x: 0.5, y: 0 }, 
          verticalAlignment: 'Bottom', 
          style: { 
            textOverflow: 'Ellipsis', 
            textWrapping: 'NoWrap' 
          } 
        } 
      ]; 
    return obj; 
  } 
 
Sample link: https://stackblitz.com/edit/angular-uft69s 
 
 
Thanks, 
Gowtham.

Gowtham Gunashekar · Answer

Hi Rohit , 
 
On the further analysis of the shared details we suspect you want to render a ellipse in the rectangular in the mind map tree and we found you have set the shape as rectangle and set ellipse in the textOverflow. If you set textOverflow as “ellipse” It truncates the overflown text and represents the clipping with an dots. We suggest you to set the border width and border color to achieve your requirement. Please refer to the following sample for how to render an ellipse in the rectangle. 
 
Code snippet: 
 




  private nodeDefaults(obj: NodeModel): NodeModel { 
    obj.constraints = NodeConstraints.Default & ~NodeConstraints.Drag; 
    let empInfo: EmployeeInfo = obj.data as EmployeeInfo; 
 
    let color: string = empInfo.branch === 'subRight' ? '#8E44AD' : '#3498DB'; 
    obj.shape = { type: 'Basic', shape: 'Ellipse' }; 
    obj.style = { fill: color, strokeWidth: 0 }; 
    obj.minWidth = 100; 
    obj.height = 50; 
    obj.borderColor = 'red'; 
    obj.borderWidth = 1; 
    obj.backgroundColor = 'red'; 
   //… 
   //… 
   //… 
} 
     
 
Sample link: https://stackblitz.com/edit/angular-ts8dwx-tfygvg  
 
 
Regards, 
Gowtham

Rohit Swarup · Answer

Hi Gowtham,I think there is some misunderstanding with the requirement.We do not want to render an ellipse in the rectangle. We need to add ellipsis in rectangle(text-overflow).