How to handle fill toggle with mouseover / mouseout events on group - konvajs

Question

In jquery we have toggles for this.
If I am doing it jquery DIY I would stash the 'on' and 'off' fill colors in a 'data' attribute of the element and retrieve each as needed.
What is an efficient method to effect a mouseover fill color toggle in Konva?
Example: Say I have a layer, and on this I have a group containing a rect. A mouseover and mouseout switcharoo to highlight the rect by changing its fill color on mouseover and back to normal on mouseexit might be
rect.on('mouseover', function(evt){
var shape = evt.target;
// Uh-oh, I need to stash the current fill color somewhere
shape.fill('lime');
})
rect.on('mouseexit', function(evt){
var shape = evt.target;
shape.fill('that_stashed_fill_color'); // < how to get the stashed val and from where ?
})
Any thoughts?
EDIT: My own attempt was to use
rect.on('mouseover', function(evt){
var shape = evt.target;
$(shape).data('bgColor', shape.fill()); // stash current in data
shape.fill('lime');
})
rect.on('mouseexit', function(evt){
var shape = evt.target;
shape.fill($(shape).data('bgColor')); // get the stashed val from jq data
})
which works but the use of the jq wrapper feels like an overhead I would prefer to avoid.

Answer 1

You can use almost any custom attribute in Konva nodes (make sure you don't overlap with existing properties, so you don't have an unexpected result). Set - shape.setAttr('anyAttibute', anyValue); get - shape.getAttr('anyAttibute');
You can do this:
rect.on('mouseenter', function(evt){
var shape = evt.target;
shape.setAttr('oldFill', shape.fill());
// set new fill
shape.fill('lime');
shape.getLayer().batchDraw();
})
rect.on('mouseleave', function(evt){
var shape = evt.target;
shape.fill(shape.getAttr('oldFill'));
shape.getLayer().batchDraw();
})
But personally I prefer to use this:
const FILL_COLOR = 'red';
const HIGHLIGHT_COLOR = 'lime';
shape.fill(FILL_COLOR);
shape.on('mouseenter', function(evt){
shape.fill(HIGHLIGHT_COLOR);
})
shape.on('mouseleave', function(evt){
shape.fill(FILL_COLOR);
})