Kinetic Quirk (?)

Kinetic doesn't like it when you try to edit layers that have been added.

by acbabis

HTML

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<button onclick="stage.add(layer)">Add Layer</button>
<button onclick="layer.add(group1)">Add Group 1</button>
<button onclick="layer.add(group2)">Add Group 2</button>
<button onclick="debugger">Debugger</button>
<div id="container"></div>

JavaScript

var stage, layer, group1, group2;

$(function() {
    window.stage = new Kinetic.Stage({
        container: 'container',
        width: 800,
        height: 600
    });
    window.layer = new Kinetic.Layer();
    var points1 = [
        100, 100, 100, 200, 200, 200, 200, 100
    ];
    var points2 = [
        300, 100,
        300, 200,
        400, 200,
        400, 100
    ];
    //dot.move(cen.x, cen.y);
    console.log(Kinetic);    
    window.group1 = new Kinetic.Group({draggable: true});
    window.group2 = new Kinetic.Group({draggable: true});
    var poly1 = new Kinetic.Line({
        closed: true,
        points: points1,
        stroke: 'black',
        fill: 'blue',
        strokeWidth: 1
    });
    var poly2 = new Kinetic.Line({
        closed: true,
        points: points2,
        stroke: 'black',
        fill: 'blue',
        strokeWidth: 1
    });
    var dot1 = new Kinetic.Circle({
        x: 150,
        y: 150,
        radius: 5,
        fill: 'green',
        stroke: 'yellow',
        strokeWidth: 1,
    });
    var dot2 = new Kinetic.Circle({
        x: 350,
        y: 150,
        radius: 5,
        fill: 'green',
        stroke: 'yellow',
        strokeWidth: 1,
    });
    window.group1.add(poly1);
    window.group1.add(dot1);
    //layer.add(group1);
    //layer.add(group2);
    window.group2.add(poly2);
    window.group2.add(dot2);
    //stage.add(layer);
});