Removing random raphael elements from canvas

80 Views Asked by At

I'm working with raphaeljs and socketIO for a realtime data presentation. I have circles representing nodes on my canvas and they're stored in nodeStatus object as nodeStatus[id].obj where "id" can be "101", "102", etc., I'm trying to implement a function to randomly remove previously-drawn circles(nodes) from the client-side-browser's canvas.

The server side script which is used to send the nodeID & obj is this: socket.emit("randomNode",randomNode,nodes[randomNode]);. randomNode contains the ID of the circle that I want to remove. nodes[randomNode] is the object that stores the information on that node.

Here's the relevant part in my client-side html. (nodeID is the id of the circle(node) that I want to remove(from my canvas/paper) and obj is the corresponding object)

socket.on("randomNode",function (nodeID, obj){
    nodes[nodeID] = obj;
    console.log(nodeID,obj);
    updateNodeStatus(nodeID);
    console.log(nodeStatus[nodeID]);
    nodeStatus[nodeID].obj.remove();
    nodeStatus[nodeID].idText.remove();
 });

The nodeStatus[nodeID].obj.remove(); producing "TypeError: nodeStatus[id].obj is undefined" error.

console.log(nodeID); prints the expected values like "101", "102", etc., And nodeStatus[102].obj.remove(); removes the "raphael object with id=101" from canvas. But nodeStatus[nodeID].obj.remove(); doesn't work as it should. Can someone point out where I'm doing it wrong?

1

There are 1 best solutions below

0
On BEST ANSWER
socket.on("randomNode",function (nodeID, obj){
    nodeStatus[nodeID].obj.remove();
    nodeStatus[nodeID].idText.remove();    
    nodes[nodeID] = obj;
    console.log(nodeID,obj);
    updateNodeStatus(nodeID);
    console.log(nodeStatus[nodeID]);
 });

It turns out that the raphael objects (saved in nodeStatus obj) have to be removed first. updateNodeStatus(nodeID) only updates the information on a certain node(node with id = nodeID) and thus nodeStatus[nodeID].obj or nodeStatus[nodeID].idText is undefined.