https://github.com/jhrcek/graph-editor

Simple editor for creating graphs implemented purely in Elm.
https://github.com/jhrcek/graph-editor

Last synced: 10 days ago
JSON representation

Simple editor for creating graphs implemented purely in Elm.

• Host: GitHub
• URL: https://github.com/jhrcek/graph-editor
• Owner: jhrcek
• Created: 2017-07-15T07:42:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-07-31T14:32:51.000Z (over 2 years ago)
• Last Synced: 2024-08-01T12:22:05.234Z (3 months ago)
• Language: Elm
• Homepage: http://janhrcek.cz/graph-editor/
• Size: 927 KB
• Stars: 35
• Watchers: 5
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - jhrcek/graph-editor - Simple editor for creating graphs implemented purely in Elm. (others)

README

        
# Elm graph editor

Simple editor for creating graphs implemented purely in Elm.

See it [in action](http://janhrcek.cz/graph-editor/)!

# Current features

- [x] The editor has 3 modes, which determine what user interactions are doing with the graph

    - [x] In *Create/Edit* mode you can

        - [x] Create new nodes by clicking on the canvas (double click to immediately start editing node text).

        - [x] Edit node text by double clicking node. Enter confirms the edit.

        - [x] Create new edges by click & holding mouse button on initial node and dropping on target node.

        - [x] Edit edge text by double clicking edges. Enter confirms the edit.

    - [x] In *Layout* mode you can

        - [x] move nodes on the canvas using drag and drop.

        - [ ] reattach edges to different nodes by dragging node arrowheads

        - [x] get nodes arranged automatically using one of the supported [GraphViz](https://graphviz.gitlab.io/)'s layout engines

        - [x] bring nodes closer/further from each other in their current arrangement

    - [x] In *Delete* mode you can remove nodes and edges by clicking them.

- [x] Help button that shows/hides info about how users can create/edit graphs

- [x] Export graph in different formats

    - [x] [TGF](https://en.wikipedia.org/wiki/Trivial_Graph_Format)

    - [x] [DOT](https://en.wikipedia.org/wiki/DOT_(graph_description_language))

# Upcoming Features

- [ ] Ability to save / load multiple graphs in local storage

# TODOs

- [ ] Add mode dependent SVG cursors to make semantics of mouse actions clearer

## Start development server server

You can start the app in development mode using [elm-live](https://github.com/wking-io/elm-live) command:

``bash

elm-live --open --dir=dist -- src/Main.elm --output=dist/js/app.js

```