New Shape

Víctor Manuel Calle Sánchez

Asked On September 6, 2019 11:31 AM UTC

Hi,

I'm considering to buy this library for create a new application web with diagrams. But we need to know if it's possible create new shapes from png or svg files, and how we do this, if the support of Syncfusion will do that and incorporate our new shape or if there is an example for do this requirement.

Regards

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 9, 2019 04:47 AM UTC

Hi Victor,

Yes, we can create a native node in diagram to achieve your requirement. You can set SVG content as a string to node shape content property and set type as Native. Please refer to a code example and sample below.

Code example:

App.component.html

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [nodes]="nodes">

</ejs-diagram>

App.component.ts

//define nodes collection

public nodes: NodeModel[] = [

//create SVG node

{

id: 'SVGNode',

width: 100,

height: 100,

offsetX: 200,

offsetY: 200,

shape: {

//set type as native

type: 'Native',

// define SVG content as a tring

content: '<svg height="150" width="400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg>'

},

}

]

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

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/shapes/?no-cache=1#native

Please let us know if any concerns.

Regards,

Shyam G

Reply | Reply with quote

Víctor Manuel Calle Sánchez

Replied On September 10, 2019 07:24 AM UTC

Hi,

We had probed that example, but we have a problem yet. The connectors don't reach the edge of the shape from a SVG, like the example image that I attach.

We want that the connector to "stick" to the edge of the ellipse, and not to the square of dashed lines.

Regards

Attachment: image_68a34656.zip

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 11, 2019 09:11 AM UTC

Hi Victor,

The SVG content may vary for a native node so we couldn't locate a precise docking in it. So only rectangle boundaries are considered for native (SVG content) nodes and docking happens based on it. It's our diagram control's default behavior. You can use our Basic Shape ellipse node if we need a connector to dock to an ellipse edge. Please refer to the following sample.

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

Regards,

Shyam G

Reply | Reply with quote

Víctor Manuel Calle Sánchez

Replied On September 11, 2019 09:19 AM UTC

Hi,

Specifically, we need to incorporate this shapes to the palette and use them in the creation of diagrams, and we want that the connector edges to the shape.

Regards

Attachment: images_64295b0f.zip

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 12, 2019 06:08 AM UTC

Hi Victor,

We have rendered the shapes displayed in your image as a path node in the diagram. Please refer to a sample and help documentation below.

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

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/shapes/?no-cache=1#path

Regards,

Shyam G

Reply | Reply with quote

Víctor Manuel Calle Sánchez

Replied On September 12, 2019 06:52 AM UTC

Hi,

Thank you so much!

We need a last requirement. Is it possible to set a custom text to the shapes in the palette? For example, the text "Event" we want that appears in its symbol on the palette too.

Regards

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 12, 2019 08:53 AM UTC

Hi Victor,

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-xxv9ka?file=app.component.ts

Regards,

Shyam G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147342	Sep 6,2019 11:31 AM UTC	Sep 12,2019 08:53 AM UTC	Angular - EJ 2	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US