native nodes , bug in pallet and diagram when collapse pallete

[alireza]

hi

i had use syncfusion diagram with pallet and this is the scenario :

1- im dragging a native node from the pallet into diagram

2- collapsing pallet category

3- now my shape will lose fill attribute

please check pictures :

and now please check the second picture :

i have checked the reason and i found out why this is happening

when there is some linearGradient in the svg and it used with url like below :

fill:url('#gradientId')

it will add to the pallet which is come before diagram in DOM tree

it means when im dragging a shape into diagram all url(#gradientId) are looking to the same shape in tha pallet becuase its declared upper

and after collapsing a category in pallet , the related div tag gives this class :

.e-accordion .e-acrdn-item .e-content-hide {

display: none; }

when display is none and other shapes url are looking for linearGradient tag which is in the hidden div they will lost fill attribute

i hope i explained good

regards Alireza

[Sivaranjith Jeyabalan]

Hi Alireza,

To resolve your issue, we should set different id for svg gradient in the symbol palette and the diagram. We have created a sample in which we have bound the id of the shape as gradientId. Please find the sample and code example below.

Sample: https://stackblitz.com/edit/angular-cyk2wt-wxvrgr?file=app.component.html,app.component.ts

Code example:

 {

        id: 'native', width: 50, height: 60, previewSize:{height:100,width:100},dragSize:{height:100,width:100} ,

        shape: {

            type: 'Native',

            content: '<svg height="150" width="500"><defs><radialGradient id="${id}1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /><stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /></radialGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#${id}1)" /></svg>'

        }

    },

 

Regards,

Sivaranjith