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

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

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