Simple Graph Editor

My Background

1. Full-Stack Developer - 11 years
2. Software Architect of Makigami at JT Weston
3. Scala - 4 years | Java - 7 years
4. TypeScript - 2 years | JavaScript - 9 years
5. CQRS - 3 years
6. UX Design, DevOps, customer support and a few more...

Agenda

1. Graph Editor Requirements
2. Technologies used
3. Project Structure and Build Process
4. Drawing Graph
5. Drag & Drop support

Graph Editor Requirements

1. User can add node using "double click"
2. User can remove selected node using "delete" keyboard button
3. User can move node around the screen using a mouse
4. User can add edge by dragging it out from a node
5. User can remove selected edge using "delete" keyboard button

Try it out!

Technologies used

1. To build the project: Gulp.js on Node.js
2. To load dependencies: npm (Package Manager for JavaScript)
3. To write the code: TypeScript
4. To interact with an User: HTML + SVG + Sass
5. To display nice icons: Font Awesome
6. To generate HTML based on data: Data-Driven Documents (D3)
7. To manipulate data: Lodash

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

1. Classes and Interfaces
2. Types annotation
3. Support for constants and variables
4. Compile time errors
5. Compatibility with JavaScript
6. ... and many more

Data-Driven Documents (D3)

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

Project Dependencies with npm

1. Build-time dependencies (devDependencies)
2. Runtime dependencies (dependencies)

package.json

Project Build with Gulp

1. Concatenate JavaScript libraries into single JS file
2. Compile TypeScript files into single JS file
3. Compile Sass files into single CSS file
4. Copy static files
5. Rename files and references to prevent browser cache

gulpfile.js

Building Graph Editor

1. Components
   • Graph Model
   • Graph Controller
   • Graph Command Bus
2. HTML + SVG Generation
3. Drag & Drop
4. Other user input

Graph Model

            
                class GraphModel {
                    nodes: Array<GraphNode>;
                    edges: Array<GraphEdge>;
                }
                class GraphNode {
                    id: number;
                    position: PositionXY;
                }
                class GraphEdge {
                    id: number;
                    fromNodeId: number;
                    toNodeId: number;
                }
            
        

HTML + SVG Generation, Styles Sheets

1. Sass files
2. Canvas preparation
3. Drawing graph nodes with D3
4. Drawing graph edges with D3

Drag & Drop phases

• Mouse pointer is placed over an object
• Left mouse button is pressed
• Mouse pointer is being moved to new location
• Left mouse button is released

Drag & Drop API

• Origin
• On drag started
• On dragged
• On drag ended

Handling other user input

1. Keyboard events
2. On screen button

Real World Example: Makigami

1. Source Code https://github.com/marpiec/GraphEditor
2. Graph Editor http://marpiec.github.io/GraphEditor/
3. This presentation https://marpiec.github.io/grapheditor-warsawjs/
4. Contact marcin.pieciukiewicz@jtweston.pl

Thank you

and see you at next WarsawJS.