How to detach a shape from a group? - konvajs

Question

Is there any way on KonvaJS to detach a shape from a group?
I create a group with 3 shapes. Then I add a mouseover event to the group.
Then, if I want to destroy the group I don't know how to do it and the group mouseover event still remains on all shapes.
Any ideas?
Thanks in advance.

Answer 1

Here is a snippet to learn from. Some notes:
When a group is created, it is at position(0,0) and has width and
height both set to 0, unless of course you set these params. But the
group does not have to conceptually surround the child objects.
Any shapes added to the group belong to it but do not effect the position
or size of the group.
When a group is removed, the child objects are
also removed. Note that shape.remove() is described as 'remove self
from parent, but don't destroy. You can reuse node later'. So group
still exists.
Correct way to un-group is as per the snippet which also accounts for group positioning.
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 600, height: 300});
// Add a layer for line
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
var rect1 = new Konva.Rect({x: 20, y: 60, width: 60, height: 30, fill: 'cyan'});
layer.add(rect1);
var rect2 = new Konva.Rect({x: 100, y: 80, width: 30, height: 60, fill: 'magenta'});
layer.add(rect2);
stage.draw();
var group;
$('#make-group').on('click', function(){
group = new Konva.Group({draggable: true, x: 20, y: 30, width: 400, height: 300});
group.add(rect1);
group.add(rect2);
layer.add(group);
$('#info').html('Rects are now in the group - see how they jump because group has (x,y). Click or mouseover one !');
group.on('click mouseover', function(){
$('#info').html('group event');
setTimeout(function(){ $('#info').html(''); }, 250)
})
$('button').show();
layer.draw();
})
$('#remove-group').on('click', function(){
$('#un-group').hide();
$('#info').html('group.remove() is the wrong solution - it removes the group AND children. Click group button.');
group.remove()
layer.draw()
})
$('#un-group').on('click', function(){
$('#remove-group').hide();
// If grouping shapes for draggability or event admin there is no need to set size or position,
// but if you did and you want to retain the position of the shapes without the group then
// use the getAbsolutePosition() function to get and set the positions.
var pos = rect1.getAbsolutePosition(); // get abs position
rect1.moveTo(layer) // move off the group and onto the layer
rect1.position({x: pos.x, y: pos.y}); // set the position.
pos = rect2.getAbsolutePosition();
rect2.moveTo(layer)
rect2.position({x: pos.x, y: pos.y});
group.removeChildren(); // remove children from the layer but don't destroy
group.destroy() // erase the layer and kill it.
layer.draw() // refresh the layer
$('#info').html('Rects are now back on the layer - click now and there is no group event.');
})
$('#info').html('Click the group button.');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div style='position: absolute; z-index: 10;' >
<button id='make-group'>Group</button>
<button id='remove-group'>Remove-Group</button>
<button id='un-group'>Un-Group</button>
<p id='info' style='padding-left: 10px;'></p>
</div>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>