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