ASCII Editor

       _    ____   ____ ___ ___   _____    _ _ _             
      / \  / ___| / ___|_ _|_ _| | ____|__| (_) |_ ___  _ __
     / _ \ \___ \| |    | | | |  |  _| / _` | | __/ _ \| '__|
    / ___ \ ___) | |___ | | | |  | |__| (_| | | || (_) | |   
   /_/   \_\____/ \____|___|___| |_____\__,_|_|\__\___/|_|

The basic idea of this project is to have an editor to design schemas, tables, drawings, etc. for making technical documentation that can be used into the ubiquitous README files with import and export functionality.

There is already some tools in internet like the awesome asciiflow, but I need something more professional and the asciiflow tool is not open source; so I have decided to cook my own stuff and share it with the world :)

Try it!

http://www.andresoviedo.org/ascii-editor

Example

This is an example of what you can draw with the app

+------------------------+                                              
|                        |                                              
|                        |      connector                               
|    BOX STYLE 1         |──────────┐         ┌──────────────────────┐  
|                        |          │         │                      │  
|                        |          │         │                      │  
+------------------------+          └─────────┤    BOX STYLE 2       │  
                                              │                      │
                                              │                      │
                                              └──────────────────────┘

News (01/08/2018)

Refactored project structure
Removed gradle combineJs plugin

Next release

Working on connectors...
Working on moving source code to TypeScript

Design

HTML canvas technology
JavaScript ECMAScript6 technology (Classes + Inheritance)
Object oriented design. Classes, Inheritance,
Patters design: Layers Pattern, Decorator Pattern
JQuery framework (just for manipulating DOM)

Features implemented

Canvas controller (mouse click, mouse wheel, mouse drag, key down, key press, key up)
Canvas grid (100 x 200)
Scrollable canvas (mouse wheel)
Zoomable canvas (shift + mouse wheel)
Movable canvas (shift + mouse drag)
Resizable canvas (on windows resize)
Canvas cursor & pointer (arrow keys can control the cursor)
Write chars
Draw with different line styles
HTML Storage support to resume work
Tools:
- Add / Edit text
- Draw / Resize boxes (move lines also)
- Select Area / Clear / Move it
- Select Box / Move it
- Clear canvas
- Export to ASCII (so you can copy / paste)
- Draw lines

Still to be implement

improve connectors (reposition connector when its crossing the box)
draw lines
import ASCII
cut / copy / paste
trim to export (remove unnecessary lines, columns)
export indented (so it can be copied then to README.md files - should start with 4 spaces)
make size of canvas configurable / resizable
undo / redo

Nice to have

text behaviour: resize shape if writing text inside
save / restore configuration (zoom for example)
implement tables (add columns, add rows)
select shape / move shape (not just boxes, but tables)
implement chars library (choose char from unicode list)
integrate ASCII library
improve / beautify UI
fix state machine for all tools (like I did in SelectTool)
handle keyboard functions: printing F2 / handle find F3 / handle full screen F11
many more...

Alternatives

ascii-flow: http://asciiflow.com/
textik: https://textik.com/
sixteencolors: http://draw.sixteencolors.net
ascii-tables: https://ozh.github.io/ascii-tables/

Build

gradle combineJs

Final Notes

You are free to use this program while you keep this file and the authoring comments in the code. Any comments, suggestions or contributions are welcome.

Contact

http://www.andresoviedo.org

ChangeLog

2018/08/01
- (f) Removed gradle combineJs plugin
- (f) Project structure refactored
2017/03/24
- (n) Refactored to file per Class
- (n) Project moved to gradle
2017/03/19
- (f) Fixed backspace for removing chars
- (n) Added support for handling carriage line return key when entering text

pbn-sfdc/ascii-editor