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.


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 =;
        // override the standard "show" method to apply the shadow filter to the raphael element 
        // 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

Draw2D touch version 5.1.1 supports AngularJS


Version 5.1.1 provides a boilerplate example for the famous AngularJS lib.

This isn't designed to be completely general purpose, but it will be a good basis if you need a diagramming
solution and you are willing to work with AngularJS.

What is in:
  • two way data binding
  • FileOpen dialog made with AngluarUI
  • drag&drop of elements from an DIV into the canvas
  • property pane of selected figure

Draw2D touch version 5.1.0 released

The main focus of this release is the support for 2-way data binding.

The idea behind 2-way databinding is managing model-view updates in two directions. First, views are updated when a model changes, which is the default case for 1-way databinding. Additionally, views can directly update models, which is a second update “direction”, hence the name “2-way databinding”.


Draw2D touch version 5.0.6 released

+ bugfixes for IE8
+ new event "routed" is fired when connection is recalculated.
+ adding polyfill method for Array.reduce to support IE8.
+ new method Figure.getRoot to get the top most parent of a figure

Draw2D touch version 5.0.5 released

+ fixing IE10 error if more than one port is used for a Node. missing var declaration
+ simple new example of a complex shape with some labels and circle.
+ fire a Canvas event if a connection is created or connected to a port.
+ refactor the ArrayList and replace all functions with native JS's high time.

Draw2D touch version 5.0.4 released

+ don't propagate the keydown/keyup event to the canvas if the target was an textarea or input field
+ new example "policy_drag_copy" to show how to copy a shape during a drag&drop operation
+ restore "ports" from the JSON file into a node. It is now possible to create ports for a shape with JSON
+ new method draw2d.shape.node.Node#setPersistPorts to handle port serialization
+ fixing the PERT demo example
+ adding padding to the "sparkline" diagram.
+ new example how to use the port read/write: "port_serialize". Reading port configuration from JSON.
+ don't propagate onKeyUp/onKeyDown to the canvas if the target was an textarea ("input" was already checked)

Copy during Drag&Drop operation

New example in the next release 5.0.4 for Drag&Copy of figures


Draw2D touch version 5.0.3 released

+ additional performance improvements in the repaint method. Only changed properties posted to the raphaelJS update.
+ bug fix in the SetFigure update. children not moved
+ bug fix in the SVGWriter. Wrong test of callback method.
+ js doc improvements
+ new example for keyboard handling. ConfirmKeyboardPolicy which forces that the user must confirm a delete operation. ....better you provide an undo/redo instead to show a confirm dialog. But just to show how it works.
+ bug fix in the position calculation in some locator if the shape has some move constraints.

Draw2D touch version 5.0.2 released

+ remarkable performance improvements during drag&drop of multiple shapes at once.

Draw2D touch version 5.0.1 released

+ fade ports softly in/out if they are out of reach in the draw2d.policy.canvas.CoronaDecorationPolicy instead a simple show/hide
+ fixing broken delete of a connection via keyboard
+ refactor the CommandDelete class and support now the delete operation of child figures with connections and ports (see example with DBTable.js)
+ refactor example DBTable and simplify the structure of the shape and cleanup the API
+ fix Figure.clone method with child shapes
+ extend the DBTable example with new UI and the possibility to remove/add entities
+ new policy draw2d.policy.canvas.ConnectionInterceptorPolicy which is responsible to all connection stuff. connect/unconnect/reconnect/drop,...
+ fixing "alpha/opacity" bug if a shape is dragged outside the window.
+ better calculation of the line break in the Text.js shape
+ move the "alpha" handling out of the Figure into a DragDropPolicy.
+ adapt the "connection_drop" example to the new interceptor policy pattern
+ delegate all Figure.onDragStart" methods to the new InterceptorPolicy
+ adjust the ResizeHandles correct if a figures has a width/height constraint.
+ a lot of js-doc fixes
+ some minor code refactoring
+ change the internal build system/server.....but still using "ant"
+ move the "radius" attribute from "Polygon" to the more generic figure "VectorFigure"
+ save the "dasharray" attribute of the Rectangle.js to the persistent attributes
+ save the "dasharray" attribute of the Line.js to the persistent attributes
+ new canvas policy for "lazy" drag&drop operation. draw2d.policy.canvas.GhostMoveSelectionPolicy
+ add new method Canvas.add/Canvas.remove and deprecate Canvas.addFigure/Canvas.removeFigure
+ add new method Figure.add/Figure.remove and deprecate Figure.addFigure/Figure.removeFigure
+ fixing bug in the gap/bridge calculation for the router if a shape is moved
+ new methods Figure.on/ for event registration like "move", "select", "resize", "click",...
+ new methods Canvas.on/
+ remove methods Canvas.addSelectionListener/Canvas.removeSelectionListener. replaced with Canvas.on("select", function(emitter, figure){...});
+ remove methods Figure.addMoveListener/Figure.removeMoveListener . Replaced with Figure.on("move", function( emitter){...});
+ fixing bug in SetFigure.toFront / SetFigure.toBack
+ enhance the JS Documentation with a lot more inline examples
+ performance improvements during drag&drop related to the changed event handling
+ better connection handling in ports. Don't determine connections for every call.
+ cleanup internal and unused shape variables
+ fixing clash between Circle.radius and VectorFigure.radius during read/write from JSON.
+ improve performance for GridEditPolicy. Use inmemory generated GIF instead hundreds of SVG lines
+ fixing Label boundigBox calculation if a property changed. The ports are not relocated in the past.
+ performance improvements in the "Layout" shape.
+ fixing broken import of special formated "text" in the SVGFigure

Version 5.0.0 notes and API changes

In the planned version 5.0.0 I want to take the major step of the attribute and event handling of shapes.

The new hero in draw2d is the .attr() method that isn't so chatty like the „setBackgroundColor“ or all the other attribute methods with regards to how often attributes were handled. It is more like the famous jQuery interface. I did this in a new release because I thing this is a major step.

Example of draw2d < 5.0.0

    // you can use only the "text" attribute in the constructor.
    textFigure = new draw2d.shape.basic.Text("The quick brown fox jumps over the lazy dog");

    // all other attributes must be set by calling the related setter method


New draw2d API

    // it is now possible to add all required attributes of the shape in the constructor
    textFigure = new draw2d.shape.basic.Text({
          text:"The quick brown fox jumps over the lazy dog", 

Additional it is possible to call the attribute method after shape creation

    // it is now possible to addrequired attributes of the shape in the constructor
    textFigure = new draw2d.shape.basic.Text({x:150, y:300});

    // or by the attar method 
          text:"The quick brown fox jumps over the lazy dog", 

Please note that the constructor of the shape has changed and calls like new draw2d.shape.basic.Rectangle(300,150) didn’t work anymore! You must call new draw2d.shape.basic.Rectangle({width:300, height:150}). All getter/setter method are still there - but the construct has changed dramatic in this release. Reading shapes from JSON is working fine as well.


This part is still in draft but the direction is clear

Old API (still working)

	          //...more  inspection code here about the executed command---


	// register a listener if a shape has move by the user or API call
	figure.on(„move", function(figure){ console.log(„figure moved)});

	// register some listener to the canvas
	canvas.on(„move“, function(figure){ console.log(„figure „moved);});
	canvas.on(„delete“, function(figure){ console.log(„figure“ deleted)});
	canvas.on(„add“, function(figure){ console.log(„figure“ added)});