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

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 = 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

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 functions...it'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/Figure.off for event registration like "move", "select", "resize", "click",...
+ new methods Canvas.on/Canvas.off
+ 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