New Shape

[Víctor Manuel Calle Sánchez]

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]

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 

[Víctor Manuel Calle Sánchez]

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]

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 

[Víctor Manuel Calle Sánchez]

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]

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 

[Víctor Manuel Calle Sánchez]

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]

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