How does the board work in real time?

Posts

Post Creation

(i) User creates a post and sends to group

• addObjectListener() listens for new posts added to canvas
• Uses sendObjectToGroup() to store the post in Firebase

(ii) User receives a post created by another user

• In ngOnInit(), canvas gets attached to an observable which listens for newly-created posts from Firebase
• When new posts are added, handleAddFromGroup() is invoked which parses the post and uses syncBoard() to add the parsed post to the canvas

---

Post Movement / Modification

(iii) User moves a post from one location to another

• movingObjectListener() listens for moving posts on canvas
• Sends updated post to Firebase

(iv) User receives a moved post from other users

• In ngOnInit(), canvas gets attached to an observable which listens for modified posts from Firebase
• When posts are moved, handleModificationFromGroup() is invoked which parses the post and uses syncBoard() to update the parsed post on the canvas

---

Post Deletion

(v) User deletes a post on the canvas

• removeObjectListener() listens for deleted posts on canvas
• Once a post is deleted, it updates the post with a removed flag and sends it to Firebase

(vi) Users receives a message that a post was deleted

• In ngOnInit(), canvas gets attached to an observable which listens for modified posts from Firebase
• When posts are deleted, handleModificationFromGroup() is invoked which parses the post and uses syncBoard() to delete the post from the canvas
• syncBoard() looks for the removed flag to be true and if so, it removes the post from the user's canvas