Major Revision
After assessing my current situation, it appears to be another puzzle or scenario, specifically related to saving to json in a broader context.
To illustrate, I include a new Shapegroup to a layer on the stage by utilizing the following code snippet:
...
var selectedShape, json = null;
...
function addNode(xPos, yPos) {
//create the new node
var node = new Kinetic.Circle({
id: 'myRect',
x: xPos,
y: yPos,
radius: 30,
fill: '#FFFFFF',
stroke: '#000000',
strokeWidth: 4,
// test: "testattr"
});
// create the label
var label = new Kinetic.Text({
x: node.getX() - node.getRadius() + 10,
y: node.getY() + node.getRadius() + 4,
text: 'node',
fontSize: 12,
fontFamily: 'Arial',
fill: 'black',
});
// create group
var nodeGroup = new Kinetic.Group({
draggable: true
});
// add shapes to group
nodeGroup.add(node);
nodeGroup.add(label);
// add group to the layer
layer.add(nodeGroup);
// add layer to the stage
stage.add(layer);
/*
* Event Handlers for Nodes
*/
// Additional events ...
}
Introducing a button labeled 'add new State' which essentially appends a new group. Here is the associated code:
$('#createNode').click(function(e){
addNode(125, 125);
});
Furthermore, there's a button called "remove State" that deletes a chosen nodegroup when clicked. The corresponding code is as follows:
$('#removeNode').click(function(e){
if(selectedShape){
var selectedGroup = selectedShape.getParent();
selectedGroup.removeChildren();
selectedGroup.remove();
layer.draw();
} else {
writeMessage(messageLayer, 'No Object chosen');
}
});
Additionally, there's a 'save to json' button intended to store all remaining Shapes on the Stage:
$('#saveJSON').click(function(e){
json = null;
json = stage.toJSON();
console.log(json);
});
Testing various scenarios including saving an empty stage, adding nodes and saving again reveal discrepancies with doubled objects.
Conclusion: Issues seem to stem from the addNode function where different layers are involved. Seeking guidance on better practices for working with shapegroups within a single layer in KineticJS.