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

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