# Diagramo-editor
A canvas backed vector-graphic diagram editing tool, with event listeners. Based on (Diagramo by Scriptoid)[http://diagramo.com/].

A Fully extendable library, define your own figures, primitives, events, etc.

## Install
`npm install diagramo-editor`

## Usage
Diagramo is a (primarily) client side library for diagram-editing. It can be used on the server with third-party canvas support.

### Basic usage/setup
```javascript
var DIAGRAMO = require("diagramo-core");
var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas);
var diagramo = DIAGRAMO.getDiagramo(canvas);
var circle = new DIAGRAMO.SETS.basic.Circle(10,10);
var con = new DIAGRAMO.CONNECTORS.StraightConnector(new DIAGRAMO.Point(0,0), new DIAGRAMO.Point(10,10));
diagramo.addFigure(circle);
diagramo.addConnector(con);
diagramo.repaint();
```

Clicking on a figure/connector will select it and display a property editor with extendable properties.
Dragging a connectionPoint will allow connecting figures to connectors.

### Events
In addition to the basic events provided by diagramo-core, connection points expose:
 - beforeConnect
 - afterConnect

```javascript
text.mouseDown(function(event){
    this.style.fillStyle = "#ff0000";
});
```

## Figures
Provides one set of basic figures under `DIAGRAMO.SETS.basic`
 - Circle
 - Diamond
 - Ellipse
 - Hexagon
 - Image (requires dropzone)
 - Octogon
 - Parallelogram
 - Pentagon
 - Rectangle
 - RightTriangle
 - RoundedRectangle
 - Square
 - Text
 - Triangle

## Connectors
Provides 4 types of Connectors under `DIAGRAMO.CONNECTORS`
 - StraightConnector (point-to-point)
 - MultiPointConnector (point-to-point)
 - RightAngleConnector (best-path)
 - OrganicConnector (best-path)

### Each connector by default exposes several properties to the editor
line style:
 - Solid
 - Dotted
 - Dashed
 - Squiggly (via a line-delegate)

end shape (`DIAGRAMO.SETS.connectors`):
 - Arrow
 - Triangle

## ConnectionPoint
Figures and connectors both provide ConnectionPoints which can be used to connect a figure to a connector. A figures connection points are visible whenever a

## Property Editor
Placeholder - will improve property editor support in the near future.

Currently the property editor is hard coded to expect a `<div id="editor"></div>`
Styling can be achieved via CSS