LivelyKernel / LivelyKernel/lively.next

Tangible Component Modules (visual representation)

Open
#1,573 0 comments 0 reactions 0 assignees View on GitHub
✨ enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.