Drag&Drop between two different canvas

Example implementation available in the latest release.


Github as JSON backend

When writing a simple web app or prototyping something, you may want a quick and simple way to store, edit and retrieve data.
Let's say you write a simple editor for blog entries or a diagram editor done with a graph lib like draw2d and don't want to build a backend to write, edit and store your data - but you want to conveniently consume this data as JSON - then the Github API helps you with that.


clone on GitHub

Using github + npm + bower + grunt...

Grunt and Bower are great command line tools for automating tedious front-end workflow tasks, and quickly adding libraries to a project. With Grunt we can define a series of tasks such as concatenating files, compressing images, running scripts, and so on. Bower is self-described as a “package manager for the web”. It provides an easy way to install a wide variety of libraries into a project, from twitter bootstrap, jQuery, font-awesome, and even your own personal repositories.

Draw2D released a first boilerplate project to automatic download draw2D, dependencies and build the project.


Clone the boilerplate project on Github

Draw2D touch version 5.3.5 released

+ fixing missing implementation for group delete and undo of this operation. Implementing CommandDeleteGroup.
+ remove console.log statement which breaks IE.

Draw2D touch version 5.3.4 released

+ take care about already delete figures. Ignore multiple calls if canvas.remove for a figure
+ fixing broke Layout.js. Child figures are always hidden.

Just a click away...

The example shows how to implement a custom port to provide a fast configuration option.
It is not always necessary to implement full blown dialogs or property panes. Sometimes the tiny smart
way ist the best way. Just a mouse click away.

  • hidden if a connection is present
  • the user can stick the label to provide a default value for the port
  • the default value can be changed with a context menu
  • mouse over for quick access the label

Draw2D touch version 5.3.3 released

+ attributes not applied/set to a label figure if it has been removed and added again to the canvas - fixed.
+ new events fired for "dragstart", "dragend", "mouseenter" and "mouseleave" for figures, resize handles and ports
+ "growing" ports during connecting two ports is solved.
+ fire events "connect" and "disconnect" on ports if a connection is deleted
+ add "padding" to the horizontal and vertical layout shape
+ fixing "gap" calculation in horizontal layout
+ invoke missing layout recalculation if a child->child element has changed the dimension.
+ add "margin" as attr property to the LeftLocator/RightLocator constructor to drive the distance between child and parent.
+ move Connection.insetPoint method to new draw2d.geo.Util scope
+ fixing rendering problem in the "Polygon" element. The rendering is always "one behind" the mouse movement.
+ new example. Show how to implement a port decoration which can be toggled off/on by the user.

Draw2D touch version 5.3.2 released

+ enable the canvas to uninstall editPolicy by string instead of pure class instance reference.
+ fixing wrong "panning" direction in the canvas edit policy.
+ fixing rotation bug for nodes

Draw2D touch version 5.3.1 released

+ enhanced documentation for the FlexGridLAyout
+ custom router "RubberbandRouter" with corresponding example

Custom router rendering example for version 5.3.1

The version 5.3.1 contains a custom router example with a not so serious rendering. It is a rubber band.

Draw2D touch version 5.3.0 released

+ new Layout figure TableLayout
+ new Layout figure FlexGridLayout
+ performance improvement for the Layout figure rendering
+ much, much bug fixes and improvements for the shape designer
+ new example implementation of a flowchart shape draw2d.shape.flowchart.Document
+ new code snippet playground for the TableLayout: galerie_layout
+ endless code improvements and bug fixes.

FlexGridLayout for version 5.3.0

The HorizontalLayout and VerticalLayout gets reinforcement with the new FlexGridLayout in the upcoming version 5.3.0.
More Examples and Documentations comes with the upcoming release.


var PredefinedProcess = draw2d.shape.layout.FlexGridLayout.extend({

     *     10px       grow         10px
     *    -----+------------------+-----
     *    |    |  [LABEL]         |    |
     *    |    |                  |    |
     *    |    |                  |    |    grow
     *    |    |                  |    |
     *    |    |                  |    |
     *    -----+------------------+-----
     * @param attr
    init : function(attr, setter, getter)
            columns:"10px, grow, 10px",
            rows:   "grow",
        this.label = new draw2d.shape.basic.Label({text:"Process Name", resizeable:true, stroke:2});
        this.label.installEditor(new draw2d.ui.LabelInplaceEditor());

        // add the label to the row:0, col:1 
        this.add(this.label, {row:0, col:1});

Collapsible Shapes in version 5.2.0

one additional feature for the upcoming version 5.2.0 is a demo of an CollapsibleShape. blogEntryTopper

Custome ResizeHandles

with the upcoming version 5.2.0 Draw2D allows to replace or override the default appearance and behavior or the ResizeHandles

    // Override the standard ResizeHandle and add some fancy filter to the SVG element
    // We need the fraphael.js lib to apply the filter 
    var filter = null;
    draw2d.Configuration.factory.createResizeHandle= function(forShape, type){
        var handle= new draw2d.ResizeHandle(forShape, type);

        handle._origShow = handle.show;
        // override the standard "show" method to apply the shadow filter to the raphael element 
        handle.show= function(canvas){
                filter = canvas.paper.createFilter();
                filter.element.setAttribute("x", "-55%");
                filter.element.setAttribute("y", "-55%");
                filter.element.setAttribute("width", "400%");
                filter.element.setAttribute("height", "400%");
        return handle;


Draw2D touch version 5.1.2 released

+ fixing major bug in getter/setter handling for attr-calls.
+ add missing function Label.getFontFamily
+ check recursive for click event on children of line
+ change order of click event check. lines now the last candidate for a click event