Transform and flip icon loop marker for refresh

Developers
1

Hi Guys,

I have extended default palette to have few more icons and like to add refresh icon also, so that when user clicks refresh icon, the graph will be refreshed.

For this, I thought to use loop marker icon with rotate and flip.
But when I use this code, it is not rotating as expected.

'refresh-workflow': {
	group: 'tools',
	className: 'bpmn-icon-loop-marker',
	transform: 'rotate(90deg)',
	title: translate('Refresh Workflow'),
	action: {
		click: function(event) {
			console.log("refresh clicked");
		}
	}			
}

Any suggestions please to fix above?

2

This property is not supported by the Palette. You have to build that on your own, e.g. by creating your custom palette implementation.

3

What do you refer to as refreshing the graph?

4

yes…that is to refresh the graph.

5

okay, I have got inspired from this link
https://iconify.design/icon-sets/bpmn/loop-marker.html

so I thought there is such feature

6

I did with the below code,

var refreshIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC6ElEQVRYR82XN4hVURCGvxUTZlCMzRqwMCAKFhZbiKigtZgKwVgriCsY1rCmQrFUwUIwo52CuVMRFBQTNkZEMC4mEAz8y5zlvOHed8+7+1Cnu/fMmfnPzJw5/zSQLn2BucAMYBIwEugPdAHagGfAHeAycA74kmC6pSFBaQywDlgE9ErQl4qcHwF2AS9z9mwBNlUD0BNoAdYA3RIde7XvwFZgD/ArWtS/jfrOAzAKOGuhLum7YpvSMg/4BGwDNoTVLAATgYvA0AzPyvMJ4CrwAHgH/AQGAxOAmZaqERl77wJXLKIdyx6ATn4dGOIMvLA6OOVCmRUdpWsp0AoMLApfDEA5v5kRdp14RWJVx/6GASeBpmogYgCqWFV7LPt8yIpO5NZ7APeAsXn7AgBdtYeu2nXyhTU69OoVBZdlKwA4BCyPFJTz8SXCHvsodB6uoTrcG9dkdHJFoKx03PMiA4rAAuB4pKirNjqh2vNst3e4IsdxH/DhVzGuTzXg9GpyHlJwC5gaGZoFXCoBQG17c637lIK3wKBoo7rY61oNldUXgB/u+unu6t9fkf8CwD9PQb2KsFTKlIKD9tgEA7uB5lLWSmwSgPmu6z23RqR3vp7Sz25X78hokwD0sVYcLywGjtXTu0V1Z2RTXLExPEYHgJXR4itgHPC5TiCGA48ARSGIaFlrACAmJIXukYLYj96J350E0dUo3vTIzgdAPttiQrIj4w3YD6zuBAg5Fz33vGKVFX8FK1YHvAFMdic+DSwrkQ7xwaPAbGfvvA047b89KW00Uio+F4tqQi+knu2i2yFSugTYnkFuHwPTjJ5nAtBP0WvRcg9Ca2JKIpqi5fftIdPAIRYtOq+xTeFW0Xl5AqgOKh66vMFEkTgDTOlkAYbt12wwee/tVRvNVBMan9a621ELpq823u3NY1gpw6mmYNF1NSc1rRTRtHzYZkLxzVxJARA2q1POicZz3eMBVsgfgafAbRvPLwDfUpD+AZBnh9JBjQJvAAAAAElFTkSuQmCC";

'refresh-workflow': {
            group: 'tools',            
            title: translate('Refresh Workflow'),
			imageUrl: refreshIcon,
            action: {
                click: function(event) {
                   refreshGraph();
                }
            }
        }
1 Like