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