Shape with a text

[SaiSravya]

Can we have a text inside the shapes which will be in the symbol palette. So that the user can directly drag the shape along with the text

If this is possible please share the sample code

[Shyam G]

Hi SaiSravya, 

 

To display text to shapes in symbol palette, please use the description property in the getSymbolInfo function as shown in the below code example. 

 

Code example: 

      <ejs-symbolpalette id="symbolpalette" [palettes]='palettes' width="100%" height="200px" [getSymbolInfo]="getSymbolInfo" [symbolHeight]=80 [symbolWidth]=120> 

            </ejs-symbolpalette> 

 

public getSymbolInfo(symbol: NodeModel): SymbolInfo {   

  // display text for palette item 

    return { description: { text: symbol.id }, fit: true }; 

} 

 

Sample: https://stackblitz.com/edit/angular-ny2zkc-ufupj6?file=app.component.ts 

 

Regards, 

Shyam G 

[SaiSravya]

Thank you so much for your help.

I have used your code but the shapes are not getting displayed properly. I just changed the content and id of the shapes

PFA screenshot of the diagram. Please do help me on this

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 };
  }
}

Attachment: Sample_bca4550.rar

[Shyam G]

Hi SaiSravya, 

We have applied your code example in our sample and the shapes are working fine. Could you please check in the below sample?. Still if you face issues, please share us more details such as modify the below sample. 

Sample: https://stackblitz.com/edit/angular-ny2zkc-ufupj6?file=app.component.ts 

Regards, 

Shyam G 

[SaiSravya]

I have few errors in my console. Please do check the attachment. I have this issue from starting. The code sample which you are providing is working in stackblitz but when i work the same in my local its not working

Can you please help me on this

Attachment: Error_1d8619b7.rar

[Shyam G]

Hi SaiSravya, 

By analyzing your screenshot, we found that OpenNew.css file is not referred properly. Please remove that file from your sample which is not necessary for our diagram control. However, we have created an angular sample locally with your code example and it is available at the below link for download. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagramannotationsample1938043801 

Regards, 

Shyam G