Layout introduction:

The UI layout has three parts:

1. Designer Wall
2. Toolbox
3. Tab menu

Technologies to use:
React JS
Redux Saga
D3js & KonvaJs (Please suggest if you have any other way)

Designer Wall:
Wall Canvas: Grid
1. This the grid layout area with 15 equal sized columns (Fixed number) that occupied
the entire width of the section. Rows should be dynamic. Initial rows should be 15
and they will be dynamically increase upon adding the items to the wall. There
should always be maintained 15 unused rows. (Explained in detail in below points)
2. The grid cells are squares (use same height as the width of the column).
3. User can drag items from the instances section to the any of the grid cell.

Grid Rules:
4. When an item is added to any of the grid cell on the Designer Wall, the grid rows will
be appended to the wall to maintain 15 unused rows. Please find the calculation of
adding grid rows below
 a. If an icon/item is added to the row-1 (can be any column in that row), 1 more
row will be added to maintain 15 available rows. That means 21 st row will be
added.
b. If the icon/item is added to the row-10 then 10 rows to be added at the
bottom of the grid.
c. If a new Item is added to the row that is not unused row then no rows will be
added.
d. It always look at the last occupied row and maintain 15 more rows
underneath the last occupied row.
e. Similarly, it should remove the rows if all the items from last occupied row
are removed. And check with the next last occupied row.
Gestures:
5. The items are also draggable and droppable within the wall.
6. The items can be deleted by selecting the item.
7. The above 2 points are applicable on Multiple items. Multiple items can be selected,
and they can be moved across the wall also they can be deleted.
8. While dropping the items on any cell that is already occupied should not be allowed
to drop.
9. If an item is added to a grid cell on the wall, then the adjacent cells should become
disabled for dropping.

Nodes:

There are 3 types of nodes available.

1. Source Node: Which will have only out connector
2. Join Node: 2 In Connector and one out connector

3. Output node: Only have one in connector

Items:
1. When an item is added to the wall it looks as in the picture.
 2. All the icons used in the application are SVG icons. Which may change their
attributes dynamically.
3. The circle icons are connecters. Connecting the items as shown in the picture.

There are 2 types of connecters.

a. In Connecter: It accepts the connection only from one parent at a time.
b. Out Connecter: These are placed at the bottom of every item. This allows to
connect to other items. These are allowed to connect to multiple Items.
4. Three more options/icons surrounded this item (One or Two Items) On Click and

OnHover As 
a. Join:
i. Once click on this icon this icon will stick to the mouse pointer (follow
the mouse pointer) and follows until left-click on the desired item to
join the data.

ii. Once clicked on the desired item, a new Join item will stick to the
mouse (follow the mouse pointer) allowing user to place the new item
at the empty grid cell on the wall.
iii. This item contains two input connectors and an output connectors.
Each input connector is connected to one parent item with a

link/Curve as shown in this picture

iv. The item that is stick to the mouse pointer(follow the mouse pointer)
releases or cancels on Esc Keyboard button or right click.
b. Union: This exactly similar to the Join option. Instead of the Join Item it
creates the Union item.
c. Copy: This is just duplicate of the selected item and is stick to the
mouse(follow the mouse pointer) and allow user to place it at the empty
place in the wall.
5. If more than 2 items are selected then only copy icon will be displayed on-Hover on
any selected item.
Unselect/Cancel the Gesture
6. Esc/Right Click will unselect the selected items.
Links/Connections:
1. The connection links can be detached from only input connecters by just one click
and pull out the mouse then it can be assigned to any other input connecter from
other Items.
2. From the output connecter we can connect to unlimited number of items.
3. Input connecter only allows one link at a time.
Preview and Summary:
From the output connecter of any item we can connect to Preview or Summary
tables to see the data of that particular item. (Create a call back function onLink)

Colours:
1. All the icons/connecters/links are SVGs.
2. We are using HSL colour values to assign the colour value to any icon.
a. Hue: This is the actual colour value. Hue is a degree on the colour wheel from
00 to 3600. 0 is red, 120 is green, 240 is blue.
b. Saturation: Saturation is a percentage value; 0% means a shade of grey and
100% is the full colour.
c. Lightness: Lightness is also a percentage. 0% means black and 100% is white.
3. By considering this information, we need to assign a random angle for H value, a
random percentage value for S and a fixed calculated percentage value for L (Last 2
digits of [L value of background colour + 50] )
a. H: A random angle
b. S: A random percentage
c. L: Last 2 digits of [L value of background colour + 50]
4. All these colour values are applicable to the source items.
5. Colour for the derived/child items are inherited from their immediate parents as the
below calculation
a. H: H value of Parent item1 + H value of Parent item2 + a random number 0 –
360.
b. S: S value of Parent item1 + S value of Parent item2 + a random number 0 –
100.
c. L: no change (L value of any one of the parent items)
6. These colours are applicable to the Item Icon, output connecter, Link and the input
connecter of its child item (If any)