Question

This question is related with one I asked before here. I’m currently using KineticJS 4.0.5 and I’m using multiple layers to display some shapes with different properties. Since I need to change the layers contents frequently I’m using removeChildren to remove a layer content, but it seems that removeChildren also removes the events associated to childrens. I would like to remove the layer childrens without removing their events because I may have to add them to the layer again.

I tried to set the layer.childrens attribute equal to an empty Array instead of using the removeChildren function. At first it seemed to work but on some cases, some weird things happen :/ Some shapes disappear and the only way to get them back is by setting their Z index. I think the main problem with this approach is related with some properties that must be reseted when contents are removed from the layer, but I don’t know which are they.

I also tried to set the events again on each shape before drawing them but it doesn’t work… They remain static on the screen… I event tried to use the setDraggable(true) on all shapes before drawing them but no luck… Do I need to create the objects again and apply the events to them again each time I want to redraw a layer with shapes I used before? Or would it be a good approach to store layers for each screen on my application? (I can have a lot of different screens, which would result in a lot of layers and only one would be displayed at a time…)

If you know a solution for this problem please tell me. I really need to solve this problem because it is very important for my project to be able to draw and redraw :/

Thank you!

Answer 1

Sounds to me that what you need is a way to visually remove objects from layers, but not actually delete them. Instead of using remove, try creating a new layer specifically for storage, where your main group within that layer is hidden. You’ll want this group, and its layer, to be globals for easy access. Then, when you need to remove an object from view, use moveTo to move it into storage, and moveTo again to restore it to view.

var gObj = {storage : '', storageGroup : ''};
gObj.storage = new Kinetic.Layer();
gObj.storageGroup = new Kinetic.Group({name:'storage', x:0, y:0});
gObj.storage.add(gObj.storageGroup);
// assumes stage is already built
stage.add(gObj.storage);
gObj.storageGroup.hide();
function wareHouse(obj, group, store) {
    // obj is an object to store when store === true, otherwise it's a name or id when retreiving, group is the group where object either is or needs to be, store is a boolean value
    if (store) {
        obj.moveTo(gObj.storageGroup);
    } else {
        // change the dot to pound ('.' = '#') if using id's
        var box = gObj.storageGroup.get('.' + obj)[0];
        box.moveTo(group);
    }
    var parent = group.getLayer();
    parent.draw();
}