Custom Toolbar on component:selected fires unwanted component:styleUpdate event

[glaprida]

Hi there, I have the following code to render a Toolbar for each element.
I have it on component:selected because the toolbar may vary depending on the context of the component (for example, it may not have traits when first dragged onto canvas, but if it's then moved inside a certain component, it may "win" certain traits)

editor.value.on('component:selected', (c) => {
        renderToolbar(c)
});

let renderToolbar = (c) => {
        let toolbar=[]
        if(c.attributes.attributes.dataGlobal){
            toolbar.push({
                attributes: {class: 'fa fa-pencil'},
                command: 'tlb-edit'
            })
        }
        if(c.getTraits().length > 0){
            toolbar.push({
                attributes: {class: 'fa fa-cog'},
                command: 'tlb-settings'
            })
        }
        if(!c?.parent()?.is('wrapper')){
            toolbar.push({
                attributes: {class: 'fa fa-arrow-up'},
                command: 'select-parent'
            })
        }
        if(c.get('draggable') != false){
            toolbar.push({
                attributes: {class: 'fa fa-arrows'},
                command: 'tlb-move'
            })
        }
        if(c.get('copyable') == true){
            toolbar.push({
                attributes: {class: 'fa fa-clone'},
                command: 'tlb-clone',
            })
        }
        if(c.get('removable') == true){
            toolbar.push({
                attributes: {class: 'fa fa-trash'},
                command: 'tlb-delete'
            })
        }
        c.set({toolbar})
}

but I also have some code under component:styleUpdate (to sync styles between linked components [a custom feature of my own editor]), but it triggers everytime I select an element, because of the Toolbar.

editor.value.on('component:styleUpdate',(c)=>{
        console.log(c)
});

this logs the following object:

{
   attributes:  {tagName: 'div', type: 'div', …}
   ccid: "ix9ef"
   changed: {toolbar: Array(5)} // <-- THIS LINE
   cid: "c9612"
   ...
}

• Is this the intended behavior? or is it a bug?

• Should I do the toolbar differently??

• is there a way to to check if what changed is actually a style?
  as of my testing, I can't seem to get a changed: {someStyle} when I do actual style changes.

[artf]

Hey @glaprida I think it might be related to your custom feature of my own editor, update to the toolbar shouldn't trigger component:styleUpdate. Please provide a reproducible live demo in case you're able to create it.

[glaprida]

In the end it didn't really have much to do with the toolbar... it was just that the event component:styleUpdate fires a lot more than I expected.

For what I could understand, it fires once per css property that is set or unset to styleable on selection toggle.

What I mean is:

I have a lot of custom components, each one with its own stylable properties. When I toggle the selected component between them, it fires a lot of styleUpdate events (once for each css property that is now shown or hidden according to the current selected component compared to the previous one).

If I toggle the selected component between 2 components of the same type (thus having the same styleable properties) it wont fire at all (unless – i think – they have different values on those properties).

In the end, I had to use a different approach, using stylable:change based on @lexoyo work on Symbols. #4317 (reply in thread)

[lexoyo]

Glad it helped