LivelyKernel / LivelyKernel/lively.next
Tangible Component Modules (visual representation)
- Dominant language
- JavaScript
- Stars
- 90
- Forks
- 20
- PR merge metrics
- No merged PRs in 30d
Description
In order to make the visual component workflow *complete* it is essential to also provide a visual interface to the component modules. While component modules are already visually accessible through the component browser it is not enough in the sense that it does not really provide a good enough interface to *edit* component modules, like for instance the system browser allows.
In order to provide a visual way of editing component modules, I would propose rendering component modules on the world, via box interface, where each component inside the modules is rendered and the derivation relationships between them is visualized.
Further the editing of each component inside the box will be reconciled while grab and drop between component modules will lead to a moving of a component definition between modules (accompanied by the auto reconciliation).
**Implementation Details**
The drag and drop interface will prevent the user from creating cyclical imports, by rejecting those kinds of drops.
The boxes representing component modules can be opened via a custom top bar menu, that will be similar to the shape creation menu from now, except that the user can create custom boxes, similar to the *frames* in Figma.
A new component module can also be created via this interface by creating a blank box from scratch and assigning a name for it.
Further, existing component modules can also be renamed, which will in the background initiate all necessary updates and reconciliations.
Contributor guide
Research direction
Start by locating the existing component browser and system browser interfaces, then trace how component modules and their derivation relationships are represented. The work is done when modules can be opened and edited visually, components can be moved without cyclical imports, and modules can be created or renamed with reconciliation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100