Best practice for nested, modifyable 2d rectangles in an editor
Overview
Summary
- User can resize, move and add boxes at will
- A box may have endless amount of sub-boxes
- Editing sub-boxes is currently done by opening another window
- Sub-boxes usually fill the entire "space" in the parent box
Questions
- How to visualize sub-boxes without overwhelming the user with information?
- How to allow the user to modify sub-boxes in the same window without getting ton of input errors?
Details
"Story"
I am currently creating a basic layout editor, that allows me to create an endless amount of boxes with endless amount of sub-boxes.
The user is supposed to manipulate (move & resize) all of these boxes at will. All of that works fairly well so far but to actually modify a "sub-box" I currently have to open another editor instance, that only caters for that specific box.
The Task
I want the user to be able to edit sub-boxes in the same window as the parent boxes, without overwhelming him with either information or hinder him with invalid input actions (e.g. modifying the size of a sub-box when actually the parent box was supposed to be moved).
The actual problem gets more clear, when one looks at what those nested hierarchies actually could mean:
