## Processing Design Spec
> by Processing team

<!-- Each drawing on the board will be considered as an object which contains the information related to it. -->

#### Step 1: To store the current state of board for client 1
* Client #1 starts to draw using brush on the board (some random curve)
* UI will listen for mousedown event and pass us the event action.
* Each client and server has a global 2D array of current state of board which will store the value(intensity) of each pixel and it can be used by UI to present the current state of the board.
* As any mouse click event will happen for a board, UI will pass us the postion of the pixel along with the new intensity(rgb values) for that pixel.
* We will change those values in the current state of the board.
<!-- NOTE: Concept of fragmented objects is only for drawing using brush
-->

#### Step 2: How to send the current state to server

* From mousedown to mouseup event whatever user has drawn has to considered as one full object, which will be stored in one of the stack of the user.
* In a fixed interval of time, we will pass pixels changed from last object creation.
<!-- * So for one full object we have its fragmented objects.(each fragment will be a separate object), each fragmented object will have an objectID and a jointId. -->
<!-- * jointId will be the same for all the fragments of a same object. -->
<!-- * objectId will be unique for all the objects as well as object fragments. -->
* we will keep on sending these pixel positions and their intensity values through the networking module to server.

#### Step 3: To present the current state of board for other clients
* The server will pass the changed pixels to other clients, and other clients update their global board state, so the UI of client #2 can reflect the updated board state.
<!--
#### Step 4: How to get the complete object now from the fragements at server side?
* Now server will receive the object fragment and will store it in a temporary list which will be initialised according to the jointId.
* As fragments of each object will have same jointID, using this it will be easy to identify which object this fragment belongs to and store that fragment into the temporary list of this object.
* Now when mouse up event will happen for client #1, then it will notify the server by sending the last fragment for this object.
* How will this notification happen - we can keep a flag in object (which can be 1 for last obj and 0 for all other) to notify that it is the last fragement for the object.
* When server will receive the last fragment object, it will merge all the fragments which were there in the temporary list of this object into a single object and will store it in the common object list.
* While combining we will merge all the fragments of the object into a single object with objectID same as the last fragment's objectID.
-->
### Feature Handling

#### 1. Erase
* It will be same as drawing a curve on the board, the only difference will be that the color of the pixel will be white, so same steps 1-3 will follow.

#### 2. Draw Shapes
* It will also be same as drawing a curve on the board, will follow the same steps from 1-3.

<!-- We will not divide the shapes in to the fragment objects, instead only after one shape has been drawn it will be stored as an object and will send to different nodes as a whole object.
-->
#### 3. Undo & Redo
* Each client can undo or redo for his/her objects only.
* On undo, we should get buttonClickEvent from the UI for undo.
* Each user will matain one stack for storing the objects created by him/her and a stack for mainting objects which are deleted.
* Each object will contain information of position where pixels have changed along with the previous value that pixel had.
* On undo, we will pop the recent object from stack and push it to other stack.
* And on redo, we will pop the object from the stack to the top of the stack.

<!--
#### 3. Select and Delete
* For each board, we will maintain a map from postion to objectId.
* Whenever a mouse click event will happend UI will notify us and send the position where this event happened.
* We will use the map to find the object corresponding to that position.
* Two cases could be there -
* **If the object is created by the same user who wants to del it**
To delete that object, we will delete it from our common list of objects and from our stack1 and move it to stack2 and send the delete inforamtion to the networking team which will broadcast it to all the other nodes and all the nodes will do the same.
* **If that object is created by some other client**
We will delete it from our common list of objects and send the delete information to all the other nodes and all the nodes will perform the same.
-->

### Tasks
We have broadly divided the task into following versions:
#### v0:
* Draw using brush
* Erase
* Draw shapes(circle, triangle, rectangle)

#### v1:
* undo and redo (will be user specific)
<!-- * select and delete -->

<!-- #### v2: -->
<!-- * display user name corresponding to each object -->
<!-- * stitching the fragments -->