Skip to content

[Feat]: Draggable components in the Active Components view #663

@mdpung

Description

@mdpung

Is your feature request related to a problem? Please describe.
There can be a more intuitive way of moving components around other than manually moving components and cutting/pasting components around, which has a few drawbacks:

Manually moving components drawbacks:

  1. Clunky UX since everything instantly reacts to components being dragged, making the process not very precise.

Cutting Pasting drawbacks:

  1. Naming of components are not preserved and default to the automatic naming schema (e.g. input32), thus, a form that has 20 inputs and referenced in a SQL query all have to renamed from the auto-generated names.
  2. The positioning of the components by pasting them can be tricky and do not always go where intended.

Describe the solution you'd like
Within the Active Components section of the left side-bar, one can use the mouse to click and drag components that alter the positioning of the components relative to the components below/above the selected component. Also, all metadata and nested components within that component are preserved. This feature should also support the ability to drag a component outside a container so it is no longer nested, or inside a container so it is now nested.

It's worth noting that the width of components may need to be change (if allowed) if it wants to fit inside a container with less columns of room than currently using.

Describe alternatives you've considered

  1. Manually moving the components within the page, but because everything reacts to the dragging components, it can be difficult to place them where you want them to.
  2. Cutting/pasting components, but it adds a lot of overhead when doing so.

Additional context
Add any other context or screenshots about the feature request here.

Metadata

Metadata

Labels

EnhancementNew feature or request

Projects

Status

📋 Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions