We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Shape with a text

Thread ID:

Created:

Updated:

Platform:

Replies:

149193 Nov 18,2019 11:06 AM UTC Nov 21,2019 06:28 AM UTC Angular - EJ 2 5
loading
Tags: Diagram
SaiSravya
Asked On November 18, 2019 11:06 AM UTC

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 [Syncfusion]
Replied On November 19, 2019 07:25 AM UTC

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 }; 
} 
 
 
Regards, 
Shyam G 


SaiSravya
Replied On November 19, 2019 11:59 AM UTC

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 [Syncfusion]
Replied On November 20, 2019 07:22 AM UTC

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. 


Regards, 
Shyam G 


SaiSravya
Replied On November 20, 2019 11:08 AM UTC

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 [Syncfusion]
Replied On November 21, 2019 06:28 AM UTC

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. 


Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon