diagramo-editor

0.0.74 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i diagramo-editor

Weekly Downloads

19

Version

0.0.74

License

ISC

Unpacked Size

517 kB

Total Files

107

Last publish

Collaborators

  • znewsham