image symbol

Question

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 · Answer

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 · Answer

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 · Answer

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