image symbol

[Teknologica]

Hi,
I'm newbie with this package, I'm currently playing with the demos.
In particular, how can I add an image as a symbol in a specific palette in the example http://js.syncfusion.com/demos/web/dashboard/diagrambuilder/default.html?

Thanx

[Shyam G]

Hi Teknologica, 

 

We have created a sample in which we have rendered an image node in palette and in the diagram. please refer to the code example in which we have shown how to add image node in palette. Also, please refer to the help documentation and sample for further reference. 

 

Code example: 

var palettes = [ 

             { 

                 items: [ 

                          //add the image node to the symbol palette 

                         { 

                             name: "imageNode", offsetX: 100, offsetY: 100,width: 50, height: 50,type:"image",source:"https://cdn.pixabay.com/photo/2018/04/16/00/34/lotus-3323309_960_720.jpg",scale:"stretch" 

                         },                       

                 ] 

             },     

        ]; 

  

            $("#symbolpalette").ejSymbolPalette({                

                palettes: palettes, height: "100%", width: "100%",                 

            }); 

 

Playground link: https://jsplayground.syncfusion.com/x0wxgezi 

 

Help documentation: https://help.syncfusion.com/js/diagram/shapes#image 

 

Regards, 

Shyam G 

[Teknologica]

Perfect, yes thank you, I saw that it was well represented in the documentation.

I would like to associate 4 ports (as in the example https://help.syncfusion.com/js/diagram/port) to each instance of imageNode but it works only for the first instance.

How can I solve?

Thanks so much

[Shyam G]

Hi Teknologica, 

 

You can define ports collection in the defaultSettings node property for diagram and symbol palette, so that ports will be applied for all nodes in the diagram and palette. We have modified the playground link and provided below. 

 

Code example: 

 

$("#symbolpalette").ejSymbolPalette({ 

            // defaultsettings for palette items 

            defaultSettings: { 

                node: { 

                    ports: [ 

                      { name: "port1", offset: { x: 0, y: 0.5 }, }, 

                    ] 

                } 

            }, 

            showPaletteItemText: false, 

        }); 

 

        $("#diagram").ejDiagram({ 

             // defaultsettings for diagram 

            defaultSettings: { 

                node: { 

                    ports: [ 

                       { name: "port1", offset: { x: 0, y: 0.5 }, }, 

                         

                    ] 

                } 

            }, 

             

        }); 

 

Jsplayground link: https://jsplayground.syncfusion.com/flsnyyug 

 

Help documentation: https://help.syncfusion.com/api/js/ejdiagram#members:defaultsettings 

 

Regards, 

Shyam G