Drag & Drop Grid Design Doc

Drag and drop grid

Requirements

• Uses Angular Material drag and drop cdk
• Component agnostic
• Flexible but able to limit flexibility
• Shows outline when moving
• Be able to resize items

Things to think about.

• How config is saved to backend.
• Schema of config
• How to go from a config object to a dashboard.
• Accessibility

Options:

1. N items in N separate columns

{
  "layout": [[1, 2], [3, 4], [5, 5]]
}

• Responsiveness: Can override columns or just 1 column. If override columns this will not match how it looks on desktop. Maybe it's ideal to mess with columns then.
• Resizing: Cannot increase width, just height.

2. N items that span N columns

{
  "layout": [1, 2, 3, 4, 5, 6],
  "columns": 3
}

• Responsiveness: Just reduce the amount of columns. :not-bad-emoji:
• Resizing: Cannot increase width, just height.

3. N items, each have a row, rowSpan, column, columnSpan

{
  "layout": [
    {
      "row": 1,
      "rowSpan": 4,
      "column": 1,
      "columnSpan": 2
    },
    {
      "row": 1,
      "rowSpan": 4,
      "column": 3,
      "columnSpan": 3
    },
    {
      "row": 5,
      "rowSpan": 4,
      "column": 1,
      "columnSpan": 5
    }
  ]
}

• Responsiveness: Get's very messy?
• Resizing: Can increase width & height.
• Cons: Might allow for empty spaces?

Example

 -- ---
|  |   |
|  |   |
|  |   |
|  |   |
 -- ---
|      |
|      |
|      |
|      |
 ------

wow that was more work than I expected ._.