Icons in symbol pallete

[Alex B]

Hi syncfusion.

Is it possible to add custom icons to each item of symbol pallete where you drag from?

[Aravind Ravi]

Hi Alex, 

We have created a sample to show icons in the symbol palette. In the symbol palette we can able to add image, by using the image node. The shape property of node allows you to set the type of node and for image nodes, it should be set as image. In addition, the source property of shape enables you to set the image source. Please refer to the below code snippet and sample 

{ 

   id: 'red', height: 30, width: 80, shape: { type: 'Image', source: 'https://www.solidbackgrounds.com/images/1920x1080/1920x1080-red-solid-color-background.jpg'} 

}, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/159664/ze/Image-Palette-462497749 

For more information about how to add image node and type of nodes available in the diagram, please refer to the below UG documentation link 

Shapes: https://ej2.syncfusion.com/vue/documentation/diagram/shapes/ 

Regards 

Aravind Ravi 

[Alex B]

Hi Aravind
Thanks for response.

I tried to add both svg and image shapes.

But results are not satisfactory for me.

I expect to have icon alligned in right corner of shape keeping instant color of it. I've studied image allignment in your documentation, it does not work as I want.

Iused the next settings:

 shapes: NodeModel[] = [

{ id: "SVG", shape: { type: "Native", shape: "Process", scale: 'Meet', content: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>' }, 

width: this.defaultNodeWidth, height: this.defaultNodeHeight, style: { fill: '#00af50', strokeColor: 'white' }, constraints: this.defaultConstraints },

 { id: "Image", shape: { type: "Image", source: 'https://www.hotelieracademy.org/wp-content/uploads/2019/04/user-icon-human-person-sign-vector-10206693.png' }, 

width: this.defaultNodeWidth, height: this.defaultNodeHeight, style: { fill: '#00af50', strokeColor: 'white' }, constraints: this.defaultConstraints },

    ]

[Aravind Ravi]

Hi Alex, 

 

By using the image type node, we can able to add image in the diagram. So after add image in node set scale property as Meet and align as XminYmin, so that image get align on left side and you add annotations for node on right side. Please find below code snippet for how to add image and set align for node. 

 

Let node= { 

      id: 'node1', offsetX: 600, offsetY: 150, height: 100, width: 200, 

      annotations: [{ content: 'Elizabeth', offset: { x: 0.7, y: 0.3 }, style: { color: 'blue'}}, { content: 'Manager', offset: { x: 0.7, y: 0.7 } }], 

      shape: { 

        type: 'Image', source: 'https://ej2.syncfusion.com/angular/demos/src/diagram/employees/image51.png', 

        scale: 'Meet', align: 'XMinYMin' 

      } 

    }; 

 

 

Regards 

Aravind Ravi