Shape with a text

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent } from '@syncfusion/ej2-angular-diagrams';
import {
  Diagram, NodeModel, UndoRedo, ConnectorModel, GradientModel, LinearGradientModel, PaletteModel, SymbolInfo
} from '@syncfusion/ej2-diagrams';

Diagram.Inject(UndoRedo);

@Component({
  selector: 'app-customshape',
  templateUrl: './customshape.component.html',
  styleUrls: ['./customshape.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CustomshapeComponent {
  @ViewChild('diagram')
  public diagram: DiagramComponent;


  // define nodes
  public nodes: NodeModel[] = [
    {
      // id: 'ProcessOverview',
      id: 'WhatisJAVA',
      width: 150,
      height: 60,
      offsetX: 300,
      offsetY: 100,
      annotations: [
        {
          content: 'What is JAVA'
        }
      ],
      shape: {
        type: 'Path',
        data: 'M70 689 c0 -5 25 -76 55 -157 l56 -147 -56 -145 c-30 -79 -55 -150 -55 -157 0 -11 118 ' +
            '-13 612 -11 l612 3 59 155 58 155 -58 155 -59 155 -612 3 c-430 1 -612 -1 -612 -9z'
      }
    },
    {
      id: 'ExplainOOPS',
      width: 150,
      height: 60,
      offsetX: 300,
      offsetY: 200,
      annotations: [
        {
          content: 'Explain OOPS'
        }
      ],
      shape: {
        type: 'Path',
        data: 'M157 653 c-3 -5 -23 -70 -45 -146 l-40 -139 38 -133 c21 -74 41 -139 45 -145' +
            ' 4 -7 179 -10 529 -10 l523 0 41 144 41 143 -38 136 c-22 75 -42 141 -46 147 -7 12 -1041 15 -1048 3z'
      }
    },
    {
      id: 'Constructor',
      width: 150,
      height: 80,
      offsetX: 300,
      offsetY: 300,
      annotations: [
        {
          content: 'What is Constructor'
        }
      ],
      shape: {
        type: 'Path',
        data: 'M67 653 c-4 -3 -7 -116 -7 -250 l0 -243 70 0 69 0 12 -40 12 -40 488 0 487 0' +
              ' 41 123 41 123 -42 124 -43 125 -37 3 c-35 3 -37 5 -40 40 l-3 37 -521 3 c-286 1 -524 -1 ' +
            '-527 -5z m1033 -243 l0 -230 -510 0 -510 0 0 230 0 230 510 0 510 0 0 -230z m123 35 l38 -115 -38 -115' +
            ' -37 -115 -478 0 c-263 0 -478 3 -478 8 0 4 -3 17 -6 30 l-6 22 451 0 451 0 0 200 0 200 33 0 33 0 37 -115z'
      }
    },

  ];

  public connectors: ConnectorModel[] = [
    {
      id: 'connector',
      sourceID: 'WhatisJAVA',
      targetID: 'ExplainOOPS'
    }
  ];

  // Initialize the flowshapes for the symbol palatte
  private flowshapes: NodeModel[] = [
    {
      id: 'WhatisJAVA',
      annotations: [
        {
          content: 'What is JAVA'
        }
      ],
      shape: {
        type: 'Path',
        data: 'M70 689 c0 -5 25 -76 55 -157 l56 -147 -56 -145 c-30 -79 -55 -150 -55 -157 0 ' +
            '-11 118 -13 612 -11 l612 3 59 155 58 155 -58 155 -59 155 -612 3 c-430 1 -612 -1 -612 -9z'
      }
    },
    {
      id: 'ExplainOOPS',
      annotations: [
        {
          content: 'Explain OOPS'
        }
      ],
      shape: {
        type: 'Path',
        data: 'M157 653 c-3 -5 -23 -70 -45 -146 l-40 -139 38 -133 c21 -74 41 -139 45 -145 4 -7 179' +
            ' -10 529 -10 l523 0 41 144 41 143 -38 136 c-22 75 -42 141 -46 147 -7 12 -1041 15 -1048 3z'
      }
    },
    {
      id: 'Constructor',
      annotations: [
        {
          content: 'What is Constructor'
        }
      ],
      shape: {
        type: 'Path',
        data: 'M67 653 c-4 -3 -7 -116 -7 -250 l0 -243 70 0 69 0 12 -40 12 -40 488 0 487 0 41 123' +
            ' 41 123 -42 124 -43 125 -37 3 c-35 3 -37 5 -40 40 l-3 37 -521 3 c-286 1 -524 -1 -527 ' +
            '-5z m1033 -243 l0 -230 -510 0 -510 0 0 230 0 230 510 0 510 0 0 -230z m123 35 l38 -115 -38 -115 -37 -115' +
            ' -478 0 c-263 0 -478 3 -478 8 0 4 -3 17 -6 30 l-6 22 451 0 451 0 0 200 0 200 33 0 33 0 37 -115z'
      }
    },
  ];

  public palettes: PaletteModel[] = [
    {
      id: 'flow',
      expanded: true,
      symbols: this.flowshapes,
      iconCss: 'shapes',
      title: 'Flow Shapes'
    },
  ];

  public dragEnter(args: any): void {
    args.element.width = 150;
    args.element.height = 60;
  }

  public getSymbolInfo(symbol: NodeModel): SymbolInfo {
    // display text for palette item
    return { description: { text: symbol.id }, fit: true };
  }
}