## Processing Design Spec
> by Processing team

* This is an object based design i.e. whatever a user draws from mousedown to mouseUp event will be considered as one object.
* Only after a user completely draws an object i.e. do a mousedown, it will be passed to server and then be visible to other users.

#### Initial Setup: A client logins and create a new board or ask for an already existing on server

* Each client will maintain two stacks which will initially be empty.
* Stack1 - for storing actions performed by that user which will be used for undo.Actions will contain the object on which that operation is performed. So there will be four actions - Create an object, Delete an object, Change colour of an object, Rotate an object.
* Stack2 - for storing actions deleted by user which will be used for redo.
* Each user will maintain a map of pixel to list of objectID, contains all the objects from all the users.
* And a map of objectID to object, contains all the objects from all the users.
* Server will maintain a map of object to objectId.
* When a client ask for a new board or an already existing one, map containing all the objects and map of pixel to list of objectID is sent from server to the client.
* Using this map proccessing module on client side only passes the vector of pixels changed to UI for display.

### Feature Handling

#### 1. Draw using brush / shapes

* Client#1 draws something using brush or draw any shape
* UI will pass all the pixels along with the intensity values to us. We will create an object and will create an action for this object. This action is pushed in one of the stack going to be used for undo on client side.
* We will pass this action to server.
* Server will extract the object from action and add the new object to the map of objectID to object.
* Pass the changes to the UI(2D array) of the server.
* In map of pixel to objectID server will add the objectID for all pixels of this object.
* On any operation to an object(draw, del, erase, rotate) server will create another temporary object which will contain minimum information(contains only the pixel and intensity values that are to be changed) needed by the other clients.
* Processing module on client side extract pixels and their intensity from temp object and pass it to the UI. Hence whatever the client#1 had drawn will now be visible to all other clients.

#### 2. Erase
* Using an eraser is equivalent to creating a new white object.

#### 3. Select and Delete
* UI will pass the pixel selected by user. These pixels will then be sent to the server.
* Case 1: If the selected object was created by the same user
* On client side the selected object will be removed from undo stack and will be pushed on redo stack.
* Server will check if there is any object at that pixel position, if so then delete it from map of objectID to object.
* Also update the map of pixel to list of objectId.
* The map of pixel to list of objetId will be used to know at a particular pixel which object was present below the selected object using the timestamp, so that the prev pixel values can be updated in board state (2D array).
* Again the server will create a temp object to be passed to all other clients containing mini info for the update.
* Case 2: If the selected object was created by some other user
* Server will check if there is any object at selected pixel position, if so then delete that object from map.
* Server will notify the user which created that object, to delete it from its local stack.
* Also update the map of pixel to list of objectId, by removing that objectId from the list.
* Again the map of pixel to list of objetId will be used to know at a particular pixel which object was present below the selected object using the timestamp, so that the prev pixel values can be updated in 2D array.
* Server will return the selected object to the user who selected the object. Now client will create an object action, containing the action number and the object and push it in the redo stack.

#### 4. Undo-Redo
* Every operation on the board can be considered as an action. So there will be four actions - create an object, Delete an object, Change colour of an object, Rotate an object.
* Create an object action will contain the action number and the object that was created, Delete an object will also conatin the action number and the object that was deleted, change colour of an object will contain the action number, object, previous colour and the new colour, rotate action will contain the action number, object and the rotated angle.
* Each client will have two stacks in their local machine, which will store the actions performed by that client.
* When any client will press the undo button the top action which is present on the first stack will be popped out and will be transferred to the second stack and also the reversed action will be transfered to the server.
* When any client will press the redo button the top action on the redo stack will move to the undo stack on top and the appropriate action will be send to the server.
* Server will listen to the actions and will perform the same steps as it was doing for operations like create, delete, change colour, rotate.


#### 5. Select and Rotate
* First, client has to select the object for which it wants to rotate, UI will provide the position of mouse click and angle of rotation, and we will pass it to the server and server returns the object at that position if present by referring to the map.
* After identifying the pixels in the object(from a separate call to the central server), we will calculate standard deviation along both the axis(x and y), calculate the centre of rotation and create a suitable rotation matrix. For representation of 'selection' operation we can send the object pixels to UI.
* We apply rotation operation on each of the pixel of object, using the rotation matrix and receive a new set of pixel positions.
* Store rotate action in undo-redo stacks with client and send updated pixel values to the UI. Also, parallely, send the updated object(keeping objectID same) to the central server.
* The central server than updates its ObjectID -> object map and the pixelPosition -> list(ObjectID) map. Then the update is sent to all the rest of the clients in the form of temporary object.


#### 6. Color change
* First, client has to select the object which it wants to change the colour, UI will provide the position of mouse click and we will pass it to the server and server returns the object at that position if present by referring to the map.
* Now client will choose the new colour for that object.
* We will create an action colour change which will contain the previous colour, new colour and the object.
* We will store this action in the undo stack, and pass this action to the server.
* Server will extract the object and the new colour for that object from that action.
* Server will update the colour of that object in the common list of object and again will create a temporary object with changes and will pass this temp object to the other clients who can update their UI.

### Tasks
We have divided the task into following versions:

#### v0:
* Draw using brush
* Erase
* Draw shapes(line segment, circle, triangle, rectangle)

#### v1:
* undo and redo(will be user specific)
* select and delete(this is not user specific)

#### v2:
* rotate
* color-change