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)

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

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.

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

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 "" 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,
+ 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 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 touch version 3.0.4 released

Release the final version after test and fixing some minor bugs in the „test“ versions.
integrate the toFront example in the documentation

Draw2D touch version 3.0.3 (test) released

+ change the prio. from the width/height reading order from JSON,SVG to SVG,JSON. You can now add the width/height to the imported JSON document for SVGFigures as well.
+ don't recalculate the stroke width if the user resize/transform/rotation a SVG or SetFigure. Obscure stroke-width calculation in raphaelJS in context with the usage of Draw2D. Fixed in the raphaelJS lib itself.

Draw2D touch version 3.0.2 (test) released

+ fixing UTF-8 encoding problems in some js source file.

Draw2D touch version 3.0.1 (test) released

+ first draft method for "Figure.toFront"

Draw2D touch version 3.0.0 (test) released

Please notice: this Version is API incompatible to 2.10!! changed upgrade to jQuery 1.10.x

+ upgrade jQuery from 1.9.x to 1.10.
+ remove example related js lib from the common directory to the examples folder.
+ changing the interface to use async callback method to provide marshal result. This API change is incompatible to all 2.x and 1.x version. existing apps must migrate the Writer.marshal method.
+ bugfix for canvas to PNG export if an image part of the canvas.
+ upgrade to new jsDuck version 5.3.3.

Draw2D touch version 2.10.1 released

+ finalize the draw2d.layout.connection.JunctionRouter
+ add SnapToJunctionPoint for the router edit policy.
+ remove junction point if the angle in the junction point less than 178 degree.
+ new example code for junction point router

Draw2D touch version 2.10.0 released

+ draw2d.layout.connection.JunctionRouter for manual modification of connections.
+ add asynchron callback for connection creation
+ move "setAlpha" during the drag&drop operation into a edit policy instead in the Figure.js base class.
+ fixing bug for connection decoration. width/height as constructor param are ignored.
+ fixing bug for font fallback calculation in Label.setFontFamily
+ inherit the CSS class name of a Connection the the source and target decoration
+ fixing bug if the user release the mouse button outside the window during a drag&drop operation, The port location is broken at this moment.
+ move the serialization of the connection junction points into the router. In this case the router can decide which is important for deserialization.

Draw2D touch version 2.9.0 released

+ new method to set the CSS style class for shapes. good for FF Chrome Safari and IE>=10 styling of SVG elements setCssClass, hasCssClass, getCssClass, addCssClass, removeCssClass, toggleCssClass
+ implement the method CommandCollection.canExecute. Just to avoid events if nothing has been changed.
+ Connection decoration inherits the color and opacity of the connection. Now the arrows or any other decoration has the same color as the connection itself
+ ports not layouted if they are added after the parent figure has been added to the canvas.

Draw2D touch version 2.8.0 released

+ serialize "path" attribute if draw2d.shape.basic.Image
+ adding getter/setter for Image path attribute

Draw2D touch version 2.7.4 released

+ fixing bug for JSON read/write of draw2d.layout.connection.FanConnectionRouter within a Connection
+ add missing this._super() call in all ConnectionRouter inherit classes.
+ call of non existing method "onDeinstall" instead of "onUninstall" in Connection implementation during canvas reset

Draw2D touch version 2.7.3 released

+ missing package declaration "state" in "PROD" build

Draw2D touch version 2.7.2 released

+ fixing reconnect error if the port did use a ConnectionAnchor. The CommandReconnect didn't restore the correct start/end position.
+ new calback method onInstall/onDeinstall for ConnectionRouter for resource cleanup.
+ remove hangover of the CircuitConnectionRouter if the canvas has been reset or the router of the connection has been changed
+ Enhance the ShortestPathConnectionAnchor to support draw2d.shape.basic.Circle instead of a simple BoundingBox calculation.
+ First demo App with (isn't final yet but worth a look)
+ first GUIDE for documentation. how to implement my first custom shape based on SetFigure or SVGFigure
+ fixing ConnectionDecoration position calculation if the connection use a ConnectionAnchor
+ fixing BottomLocator to handle Ports in the correct way. Anchor point of a port is in the center and not TopLeft
+ fixing TopLocator to handle Ports in the correct way. Anchor point of a port is in the center and not TopLeft
+ new locator for connection annotations. PolylineMidpointLocator. (look at state_diagramm demo app)
+ New figures draw2d.shape.state.End, draw2d.shape.state.Start, draw2d.shape.state.State, draw2d.shape.state.Connection to implement a state diagram.
+ fixing error in LineResizeHandle in combination with ConnectionAnchor. 'isMoving' isn't reset.

Draw2D touch version 2.7.1 released

+ fixing SVGFigure for IE8. IE8 expose the namespace of the SVG nodes to the tagName. In this case my code breaks.
+ ArrayList contains bug in the clone method which is visible in IE8 enviroment.
+ add css style body{margin:0} to all examples to ensure that these examples work well in IE8. The box model of IE8 and other browser differ in some points and the offset calculation didn't work.

Draw2D touch version 2.7.0 released

+ enable Label and Note for font settings via API and JSON serialization
+ new kind of router with junction nodes on connections with shared ports CircuitRouter

Draw2D touch version 2.6.1 released

+ bugfix corrupt opacity setting in FadeOutPolicy and broken PNG export

Draw2D touch version 2.6.0 released

+ extended callback listener for LabelEditor and LabelInplaceEditor. See the documentation for an example
+ new method Port.onConnect / Port.onDisconnect which can be overwritten to handle connection activities.
+ fix a bug in the SlimSelectionFeedbackPolicy
+ performance shortcut for draw2d.policy.port.IntrusivePortsFeedbackPolicy and avoid Connection reroute if we
Drag&Drop a related port. Broken painting.
+ first draft of a horizontal and vertical Layoutmanager which can hold different kind of children shapes
+ enable method chaining for ConnectionDecorator.setColor, setBackgroundColor and setDimension.
+ fixing error in ConnectionDecorator. "Color" isn't used at all.
+ add CSS like color string as valid parameter type for ConnectionDecorator.setColor and ConnectionDecorator.setBackgroundColor
+ enable all setter methods for Colors to accept CSS #rrggbb strings as well.
+ fixing selection handling bug in BoundingBoxSelectionPolicy if a draw2d.shape.basic.Line is part of the canvas

Draw2D touch version 2.5.0 released

+ fixing SVG text import on Chrome, FF19 and IE9
+ support font-family in SVG text import
+ new method to force a routing direction for a Hub/fulcrum shape.
+ remove fixed coded background color of the ports with the correct color which has
been set via Figure.setBackgroundColor(..)
+ change the cursor for the resize handles related to the resize behaviour.
+ Automatic add add a Connection to the current selection if source and target are part
of the new selection. (only in the selection handling of the BoundingboxSelectionPolicy)
+ apply the font-size to all text element inherit from SVGFigure
- parse the "tspan" node and children of "text" node within the SVG import of SVGFigure
+ new Canvas decoration/policy. draw2d.policy.canvas.ShowGridEditPolicy
Just to paint a nice looking grid on the background of the canvas
+ new method Label.setBold(flag) to set the font-weight of a label.
+ new Router MazeRouter and SketchRouter
+ respect the z-oder of the shapes during the hit test. Return always the top most element
if shapes are stack at the hit test position.

Draw2D touch version 2.4.0 released

+ Figure.onMouseEnter / Figure.onMouseLeave event. It is now possible to implement
hover events.
+ fixing some rendering problems with rotated shapes
+ new example how to implement a tooltip figure without any third party lib.

Draw2D touch version 2.3.4 released

+ remove hard coded maxFanOut=1 from the port.
+ hide the selection feedback and ports on the first load of the canvas.
+ more stable SVG import parser. Switch from "Regular Expression" parsing to native DOM.
This is a major change - please inspect your application of compatibility!
+ wrong label chaining in some Commands.
+ change the order of the event receiver detection. First of all all children of a shape are check, after
the the figure itself can receive the event. This is major changes. please check your application of compatibility.
+ Fix IE9 PNG export issue.
+ new demo for LabelEditor of a child shape of a normal rectangle. ( examples/interaction_labeledit_inplace )
+ new node Type draw2d.shape.node.Fulcrum for a hidden single port base point
+ delete the connection direction calculation from the connection to the port
+ fixing direction calculation and implement smarter routing behavior for ManhattanRouter
+ fixing broken Rectangel.determineOctant calculation with forces sometimes a bad routing behavior.
+ paint connections/lines in a way to avoid subpixel calculation if the line stroke y2 pixel
(cleaner render of the connection with out any blur/transparent effect)
+ avoid VML/text selection during drag&drop of an VML element on IE8
+ reduce routing calculation. noticeable performance improvement on IE8.
+ fixing bug during drag&drop of a connected port. Avoid connection following or already
connected lines.
+ fixing broken backgroundColor on IE8 for the draw2d.shape.analog.OpAmp element
+ change layout event for ports. Add this to the repaint method instead of a seperate logic.
Avoid sometimes port layout errors after loading JSON model into the canvas.
+ fixing broken connection decoration. Decorations are misplaced (always at [0,0] )

Draw2D touch version 2.2.0 released

One common ways to visualize state transition sequences is by using graphs. With this release we provide smooth Graphs for Visual Exploration of Higher-Order State Transitions.

Draw2D touch version 2.1.2 released

We’re proud to announce the latest release of the Draw2D touch framework. The Christmas edition :-)

+ Different selection policies like MultipleSelection, SingleSelection, ReadOnly or panning of the canvas
+ Plugable selection feedback implementations for figures
+ Canvas decorations for hiding ports, growing responsive ports during drag&connect..