Kinetic JS - how do you hide all the anchors for a given group ID

Question

Please take a look at the following Link

I have the following code:

// hide all anchors
            var children = group.getChildren();
            for(var k=1; k < children.length; k++)
                children[k].hide(); // .remove() would also work, or .destroy()            

            group.on("click", function() {

                var id = this.getId();

                if(imageSelected !== false)
                {
                    // hide all anchors
                    var children = this.getChildren();
                    for(var k=1; k < children.length; k++)
                        children[k].hide(); // .remove() would also work, or .destroy()
                    layer.draw();

                    imageSelected = false;
                }
                else
                {
                    var children = this.getChildren();
                    for(var k=1; k < children.length; k++)
                        children[k].show(); 
                    layer.draw();                    
                    imageSelected = id;                                        
                }            
            });

            group.on("dragend", function() {
                    var children = this.getChildren();
                    for(var k=1; k < children.length; k++)
                        children[k].show(); 
                    layer.draw();     
                    var id = this.getId();               
                    imageSelected = id;                                        
            });    

(Note: imageSelected should only contain the current group ID) I think my code has gone a bit pear-shaped.

Basically, if the user clicks the darth vader image - then the anchors must appear on darth vader only. When they click the darth vader image again - then the anchors must disappear (ie no anchors on the screen)

If darth vader is selected and the user clicks yoda, then the anchors around darth vader must disappear. They should then appear around yoda.

So far I can only hide anchors of the current group - which isn't very good!

Can anyone see where I have gone wrong?

Thanks for any help!

Answer 1

This is why I wish KineticJS supported multiple names. This method would be much cleaner if we were able to use something like:

get('.anchor')

But since we need to name the anchors because there will be multiple instances of each anchor, we cannot assign them each an ID.

So this is how I did it:

I had to add a background rectangle with id bg so that the layer was clickable:

var bg = new Kinetic.Rect({
    width: stage.getWidth(),
    height: stage.getHeight(),
    x: 0,
    y: 0,
    id: 'bg'
});

layer.add(bg);

Now the layer can be clicked and we can select the targetNode:

layer.on('mousedown', function (e) {
    var node = e.targetNode;
    select(node);
});

function select(node) {
    deselect();

    if (node.parent.nodeType = 'Kinetic.Group') {
        var children = node.parent.children;
        for (i = 1; i < children.length; i++) {
            if (children[i].getName() == 'topLeft' ||
                children[i].getName() == 'topRight' ||
                children[i].getName() == 'bottomRight' ||
                children[i].getName() == 'bottomLeft') {
                children[i].show();

            }
        }
    }
}

function deselect() {
    var children = layer.children;

    for (i = 1; i < children.length; i++) {
        var grandChildren = children[i].children;

        if (grandChildren) {
            for (j = 1; j < grandChildren.length; j++) {
                if (grandChildren[j].getName() == 'topLeft' ||
                    grandChildren[j].getName() == 'topRight' ||
                    grandChildren[j].getName() == 'bottomRight' ||
                    grandChildren[j].getName() == 'bottomLeft') {
                    grandChildren[j].hide();
                    layer.draw();
                }
            }
        }
    }
}

On select, we deselect everything and then we find the anchors IF the node we clicked on is a group (containing a shape and the anchors). We don't want to select any anchors if we click on the bg

Here's the jsFiddle

Also note: I hid the anchors once they were added to the group, that's why no anchors are shown on init.

Edit: i=1 and j=1 because the image is the first child inside the group, and the anchors follow.