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

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

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)});

Draw2D touch now supports group/ungroup of figures

A group is a figure that acts as a transparent container for other figures. A group is a StrongComposite node that controls a set of child figures. The bounding rectangle of a group is the union of the bounds of its children. Child nodes cannot be selected or manipulated individually.

The grouping of nodes can be performed using ready-made API.

Either by using an edit policy for the canvas and using Ctrl+G for group/ungrouping
canvas.installEditPolicy(new draw2d.policy.canvas.ExtendedKeyboardPolicy());

or binding an event to a button and call the API (with undo/redo support):
canvas.getCommandStack().execute(new draw2d.command.CommandGroup(canvas, canvas.getSelection()));

without undo/redo support:
new draw2d.command.CommandGroup(canvas, canvas.getSelection())).execute();


Draw2D touch version 4.8.0 released

+ new composite figure "draw2d.shape.composite.Group"
+ new command CommandGroup to group a list of figures
+ new command CommandUngroup to group a list of figures
+ enhance the JSON Reader/Write for group support
+ new example composite_group which demonstrates the group feature
+ new EditPolicy for the canvas with extended keyboard handling and group/ungroup support "draw2d.policy.canvas.ExtendedKeyboardPolicy"
+ new method Canvas.destroy to free all resources and unbind all event handler
+ fixing missing parameter shiftKey/ctrlKey in Figure.onDrop
+ new method Figure.onCatch. This event is fired if an figure is dropped onto another figure.
+ it is now possible to hand over a draw2d.util.ArrayList to the Canvas.setCurrentSelection method
for multiple figures selection
+ fixing bug in Canvas.setCurrentSelection if multiple objects are selected before. Not all figures are unselected.

First implementation of a composite figure: Raft

draw2d.shape.composite.Raft figures are shapes, which aggregate multiple figures. It works like a real raft. Aboard figures are moved if the raft figures moves. Draw2D differs between WeakComposite and StrongComposite. A raft figure is a weak composite and therefore the raft didn’t receive any notifications about drag&drop nor knowns the a boards figures anything about the parent composite figure.


Draw2D touch version 4.7.3 released

+ fixing broken toFront method
+ fixing export SVG example

Draw2D touch version 4.7.2 released

+ fixing Polygon.setPosition. The method didn't care about the generic parameter behaviour. "x" can be a number or a draw2d.geo.Point
+ new method draw2d.geo.Rectangle#contains. Return true if the this rectangle contains the hand over rectangle.
+ new parent class for Composite figures.
+ new method Figure.toBack
+ fixing the behavior of the Raft shape. Care about enveloping rafts and z-index of the figures.

Draw2D touch version 4.7.1 released

+ fixing broken build and upload

Draw2D touch version 4.7.0 released

+ new kind of figures: composite. The first implementation of these kind are "draw2d.shape.composite.Raft"
+ fixing IE10 png export issue
+ new example for the first composite shape: "composite_raft"
+ new method "Class.inject" for plugin and painless draw2d method overriding/replacement
+ delete the Canvas.onKeyUp method and replace them with a policy. Keep in mind that overriding the onKeyDown method didn't work anymore. You must install your new KeyboardPolicy or uninstall the existing with "canvas.uninstallEditPolicy( new draw2d.policy.canvas.DefaultKeyboardPolicy());"
+ new policy draw2d.policy.canvas.KeyboardPolicy and draw2d.policy.canvas.DefaultKeyboardPolicy

Draw2D touch version 4.6.1 released

+ fixing bug for multiple selection delete operation. Only the first element is deleted in the past - now the complete selection is deleted.

Draw2D touch version 4.6.0 released

+ some performance improvements in the FanConnectionRouter
+ consider the "radius" for the corner rendering in the FanConnectionRouter.
+ fixing wrong return value in CircleDecoration. "paint" must return a raphael.set instead of a simple shape.
+ fire missing event "disconnect" if a connection is deleted. This is required for "conflict" router like FanConnectionRouter of FanConnectionAnchor.
+ new method Canvas.addSelection for single shapes or draw2d.util.ArrayList
+ class draw2d.io.Reader returns now the added elements as result array.
+ new example "io_json_multi_document" shows how to load two or more JSON documents into the canvas without clear it before.
+ fixing documentation bugs regarding wrong inheritance declaration..
+ new example "io_png_crop". Export the canvas area that actually has objects in it to a PNG..cropping
+ fire routing update event if the anchor of an port has been changed.
+ new example connection_anchor_fan to demonstrate parallel connections with the combination of an FanConnectionAnchor an DirectRouter

Draw2D touch version 4.5.0 released

+ add new locator for connection labels. ParallelMidpointLocator and change the example "connection_locator" to demonstrate this feature. quite cool.
+ enhance the "connection_locator" example to demonstrate how to use a context menu during connection creation.
+ fixing blury lines. remove unwanted outline SVG element if the outlineStroke=0 or outlineColor=null
+ minor bug and performance fixes in line and connection handling.
+ fixing wrong port assignment in the DBFigure.js in the example "shape_db". Now the document can read/write correct via JSON.

New Locator for labels attached on Connections

Draw2D 4.4.4 also includes the ability to place text or labels along the connections between ports. This is down by the usage of the draw2d.layout.locator.ParallelMidpointLocator.

Sample code for usage

var LabelConnection= draw2d.Connection.extend({
      // Create any Draw2D figure as decoration for the connection
      this.label = new draw2d.shape.basic.Label("I'm a Label");
      // use no special router - direct connection

      // add the new decoration to the connection with a position locator.
      this.addFigure(this.label, new draw2d.layout.locator.ParallelMidpointLocator(this));



Dependency loading in Draw2D

Nowadays web applications are increasingly Javascript dependent and often load these files requires a waste of resources and a considerable slowdown of the system. For this reason it’s highly recommended to use a Javascript loader instead.

A Javascript loader consists of a set of tools that allows you to load Javascript scripts just when you need them. In this way you don’t need to include all files when the page is loaded but you will be able to call the scripts only when they need to be loaded.

But - and this is the bad news - Draw2D didn’t support this yet. Should I changes this?
This is an RFC and the discussion is open


IE8 kills me

I didn’t support IE8 active but if possible I avoid to break them. But sometimes it is hard. One big issue is the „extra“ comma at the end of an object list. I can find them via regex but I need a better tool support during the build to find all of them automatically.

The new version 4.3.2 fix all the issues and Draw2D its still running with IE8.


New figure in the draw2d family "draw2d.shape.basic.Text"

How do you get words to wrap inside a box in RaphaelJS? Or in browser-based SVG in general? Text-wrapping is not built into Raphael or the SVG spec. Period.

Coming from the HTML world, I found the absence of text wrapping pretty shocking. I implement a very first version of an word wrap element in draw2d.
Available in the new test version of draw2d 4.2.3.

code snippet from the implementation if anybody thinks this part is useful for a plain raphaelJS project.

    wrappedTextAttr: function(text, width) {
        if(this.canvas ===null){
            return {text:text, width:width, height:20};
            var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
            // generate a raphaelJS node and set font, font-size,...
            var svgText = this.canvas.paper.text(0, 0, "").attr($.extend({},this.calculateTextAttr(),{text:abc}));
            // get a good estimation of a letter width...not correct but this 
            // is working for the very first draft implementation
            var letterWidth = svgText.getBBox().width / abc.length;
            var words = this.text.split(" ");
            var x = 0, s = [];
            for ( var i = 0; i < words.length; i++) {
                var l = words[i].length;
                if (x + (l * letterWidth) > width) {
                    x = 0;
                x += l * letterWidth;
                s.push(words[i] + " ");
            var bbox = svgText.getBBox();
            this.cachedWrappedAttr= {text: s.join(""), width:bbox.width), height: bbox.height)};
        return this.cachedWrappedAttr;


New kind of router available

The new interactive routing tools have been added for better handling of crossings and routing conflict. You can install the router as default router for all new generated connections with the code snipped below.

// Override the default implementation of connection creation with your own method
draw2d.Connection.createConnection=function(sourcePort, targetPort, callback, dropTarget){
    var conn= new draw2d.Connection();
    conn.setRouter(new draw2d.layout.connection.InteractiveManhattanConnectionRouter());
    return conn;


Style your connection since version 4.3.0

Since the version 4.3.0 it is possible to style your connection with a outline color and stroke. Additional the ‚radius‘ attribute is applied to a connection as well. Looks very smooth..

The code below override the standard method of draw2d for connection creation for this.

// Override the default implementation of connection creation with your own method
draw2d.Connection.createConnection=function(sourcePort, targetPort, callback, dropTarget){
    var conn= new draw2d.Connection();
    conn.setRouter(new draw2d.layout.connection.InteractiveManhattanConnectionRouter());
    return conn;


Shape Designer 4.2.0 is online

For a long time I thought the lack of having a easy method to create objects was a big downside to Draw2D, but this is fixed with the new Shape Designer

- live preview of the shape
- simulate the shape in an overlay
- generate and export JS code for Draw2D
- save/load your design to google drive
- Desktop version for OSX available



Draw2D touch version 4.1.0 released

+ removed deprecated method Line.getStartX, getStartY, getEndX, getEndY
+ fixing bug. Call of Line.setGlow(true) ends with invisible line.
+ set ResizeHandles opacity to 0.2 during drag&drop operation to show the border of the shape or line of connection instead of the ResizeHandle. Better for precision alignment.
+ new method Figure.setKeepAspectRation and Figure.getKeepAspectRatio to guarantee, that the figure width/height will not be distorted.
+ undo of Line move operation didn't update resize handles of the line. fixed.
+ add Cut&Paste Operation to the "Shape Designer". This is the first step for a global cut&past in Draw2D. Use Ctrl+C and Ctrl+V
+ new method Figure.clone() to support cut&paste in the canvas. Not tested for Nodes at the moment.
+ new element in the "Designer" : PolyLine.
+ new "filter" for position modification in the ShapeDesigner
+ Hide decorations and ports during drag&drop if the FadeOutDecorationPolicy is installed.
+ set method "Figure.isStrechable" to deprecated and redirect the call to Figure.getKeepAspectRatio.
+ copy of a transparent draw2d.util.Color didn't work. Fixed
+ ResizeHandle use the BackgroundColor instead of the hard coded color gradient. Adapt the color is now possible.
+ update the cursor of a resize handle correct (cursor:default) if the corresponding shape isn't resizeable.
+ move the settings of the ResizeHandle colors into the Configuration.js file.

Draw2D touch version 4.0.3 released

This is a "spring-clean" release with a big new demo
app called „designer“. This app is a candidate
to be a Draw2D designer for new shapes. Currently it is complete new way how to use Draw2D.

+ fixing corrupt reading of InteractiveManhattenRouter serialized data. Manual routed connection restored correct.
+ Storage provider for the TideSDK HTML Desktop App framework. You can now load/save data with this StorageProvider from your local disc if you run in the TideSDK Window

First release of the Draw2D Designer as full desktop application for the Mac OSX. The job has been done with the TideSDK Framework. You can convert any Draw2D application into a desktop application with full filesystem access within minutes.

+ first implementation of an interactive MannhattanConnection router. see example connection_router.
+ apply the correct SelectionFeedbackPolicy if the router changed for a connection/polyline
+ new CommandMoveVertices to support undo/redo for dragDrop of a connection/polyline
+ apply the opacity of a SetFigure to all child nodes.
+ new method Label.getPadding
+ Rename all "Junction*" naming to "vertex".
+ add PolygonFigure with editable vertices.
+ new demo app "Painter" with bootstrapJS, jQueryUI, jQuery-Layout, mousetrap, jsts for polygon UNION, INTERSECTION and DIFFERENCE operations.
+ rename Line.basePoint to Line.vertices
+ return the label of the first command in a CommandCollection if only one command is in.
+ Check if the containing commands in a CommandCollection returns the same label and return them instead the all purpose label "Execute Commands".

+ new package "draw2d.storage" which will contains future implementations of backend bindings
+ GoogleDrive storage implementation. It is now possible to save/load a canvas to a GoogleDrive account
+ new method ArrayList.unique, ArrayList.map
+ new callback "Line.onClick" method
+ fixing wrong calculation in the Port#hitTest method. Ports can now be select much better for DragDrop operation
+ add setter and getter for the diameter or radius to the Circle figure
+ remove the reset of the stroke-width=1 of a child elements in the "SetFigure"
+ starting new example for dynamic shapes of an UML diagram
+ fixing the PNG export. Wrong calculation of Label offset, gradient lost,..May this is the first release which dropped the IE8 support for the PNG export.
+ new method Canvas.showDecoration and Canvas.hideDecoration called during the export of an PNG to have an hook to hide grind, ruler,...from the export.
+ new method ArrayList.map to translate all items in the array to a new array.
+ new method Figure.removeFigure to remove children shapes from a figure
+ remove duplicate registration of ports in the Canvas
+ fixing wrong numeric check in Raphael.fn.polygon. Now coordinates with 0/0 are not ignored anymore.

Draw2D Designer as OSX build

The first release of the Draw2D Shape Designer as desktop application has been released.
The job has been done with the great TideSDK HTML5 desktop framework. You can convert
any Draw2D touch application within minutes to a full desktop application.

Loading and Saving of local files is possible as well.

OSX Version Download

Draw2D Designer with Google Drive binding

FreeGroup is proud to announce the first preview release of the Draw2D Designer, a new vector drawing app that instantly generates JavaScript code for the draw2d lib.

While designers focus on drawing the figure or shapes, the Draw2D Designer automatically writes the code for them. Developed from the ground up and with Draw2D itself.


+ Real time preview of every adjustment
+ Prepared for the world of high resolution displays
+ Document format is 100% compatible with Draw2D
+ Storage connector for Google Drive

The source code of the app is part of the Draw2D download package