bali182 / regef

A graphical editing tool for React.

regef

A graphical editing tool for React.It was mainly design with flowcharts/diagrams in mind. Many ideas were taken from GEF.

WARNING: this project is work in progress. It's not fully tested, progress of tests can be followed on: https://travis-ci.org/bali182/regef

core principles

• Render whatever you want.
• Model your data however you want.
• Handle customized events describing user intention, separate from your components.

examples

https://github.com/bali182/regef/tree/master/example

docs

In progress, the APIs are still not final.

regef's Issues

Images

Selection

Need some way to sync selection between framework and app code. Add SelectionManager of some sort.

Child component reordering example

Add insertion order detection to ChildNode

Palette

• Add a palette decorator/component
• Add a paletteEntry decorator
• Palette should share the Engine with the diagram
• Rethink how root is rendered
• Maybe layers for handling the dnd from the palette?

Resize

TODO not sure if it should be implemented initially

Zoom

• Implement ZoomManager class
• TODO figure out how to handle coordinates, and bounding boxes when zoom is not 100%

Testing

• UI tests with selenium on the sample
• Unit tests with mock data
• Clear path for testing for users

Vocabulary & semantics

Come up with consistent field names for requests

Scroll

Add a Scroll or Offset manager

DefaultTool: Parent dragged over child behaviour

Fire move child request for parent's parent

Change ChildNode insertion/reordering feedback

Current feedback displays the bounding box of the inserted node. This should be changed to a line or something that doesn't take up any space in the parent component.