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

New Shape

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
loading
Tags: Diagram
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

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>' 
        }, 
    
   ] 
 
 
 

Please let us know if any concerns. 

Regards, 
Shyam G 


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

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


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

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


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

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