Show or hide annotations on size of shape

Question

Is it possible to adjust annotations on the condition?

For ex. If the plotted shape has dimensions:

1. above 100x100 then everything will be visible (like order id & on next line dimensions as 100x100).

2. 20x20 then everything will be hidden

3. 30x30 then only height or width will be visible(like 30)

4. 50x50 then only dimensions will be visible (like 30x30)

Right now annotations are getting out of the shape when the shape is small and annotations are big.

Below is my code

// shapes
  GetRectangle() {
    this.diagramConstraints=~(DiagramConstraints.UserInteraction);
    var _me = this;
    var num = 1;
    _me.nodes=[];
    this.dimensions.map(function (shapes) {
      if (shapes.shape_type == "input") {
        _me.bgcolor = 'yellow';
        _me.bordercolor = 'green';
      }
      _me.nodes.push({
        id: 'shape' + num,
        offsetX: shapes.xaxis,
        offsetY: shapes.yaxis,
        width: shapes.length,
        height: shapes.width,
        style: {
          fill: _me.bgcolor,
          strokeColor: _me.bordercolor
        },
        pivot: {x:0,y:0}
      });
      num++;
    })  
    this.orders.map(function (shapes) {
      if (shapes.shape_type == "parts") {
        _me.bgcolor = '#c0c0c0';
      }
      else if (shapes.shape_type == "remnant") {
        _me.bgcolor = '#ffffff';
      }
      else if(shapes.shape_type=="scrap") {
        _me.bgcolor = 'red';
      }    
      _me.nodes.push({
        id: 'shape' + num,
        offsetX: shapes.xaxis,
        offsetY: shapes.yaxis,
        width: shapes.length,
        height: shapes.width,
        style: {
          fill: _me.bgcolor
        },
         // Here you can store your JSON order Id 
         addInfo: [
           {customer:shapes.customer},
          {orderid: shapes.orderid},
          {requested_delivery_date:shapes.requested_delivery_date},
          {priority:shapes.priority}
        ], 
        annotations: [
          { 
            content: (shapes.orderid).toString(),
            margin:
            {
              bottom:20
            },
            style:
            {
              textWrapping:"Wrap",
              textOverflow:"Ellipsis"
            }
          },
          { 
            content: (shapes.length).toString() + '*' + (shapes.width).toString()
          }
        ],
        pivot: {x:0,y:0}
      });
      num++;
    })    
  }

Aravind Ravi · Accepted Answer

Hi Monika, 
 
We have created a simple sample to show annotations based on the node size. By using the annotation visibility property we have achieved your requirement. After the diagram has been created , diagram created event has been trigger. In that event we can able to get all the nodes in the diagram. Through nodes we can able to get the annotation. In the created event check if the node width and height is less than 100 or not . Based on the node width and height change the annotation visibility property. If annotation visibility is set as false means then annotation do not gets visible. Please find the below code snippet for how to change visibility of annotation. 
 




public created(): void { 
    for (let i: number = 0; i < this.diagram.nodes.length; i++) { 
      let node: NodeModel = this.diagram.nodes[i]; 
      if (node.width !== 100 && node.height !== 100) { 
        if (node.width == 20 && node.height == 20) { 
          node.annotations[0].visibility = false; 
          node.annotations[1].visibility = false; 
        } else { 
          node.annotations[0].visibility = false; 
        } 
      } 
    } 
    this.diagram.dataBind(); 
  } 
 
Please refer below screen shot that how annotation gets visible based on node height and width. 
 
  
 
Sample: https://stackblitz.com/edit/angular-c6dmfq-p8za93 
 
Regards 
Aravind R

Monika Suresh Gujar · Answer

ThanksWorked properly for me

Aravind Ravi · Answer

Hi Monika, 

Thanks for the update. 

Regards 
Aravind Ravi