Draw2D touch version 6.1.66 released

+ add example for flyout menu for figures. Shown when shape is selected (example/../.policy_selectionmenu)
+ change inheritance for SelectionFeedbackPolicy. Adding new base class SelectionPolicy.
+ remove duplicates events if a shape is deleted. "unselect" is fired even if the elements isn't selected
+ fix broken SingleSelection strategie. Drag&Drop of an port of an selected shape isn'T possible.
+ add missing attribute "NAME"
+ fix missing function reference in canvg.js file
+ build minified version "core" of draw2d
+ add new line to the JS comment template for correct JS minifierer bug
+ add label to connection to show more decorations in JSON loading
+ fix broken JSON for state diagram
+ consider the visible flag during shape creation
+ uninstall EditPolicy in the figure by name
+ fire en change event if the user set some "userData" by path annotation instead of update the complete userData object. partial changes should fire the event too
+ force an userData object if the "attire" method is called as getter with a userData JSON path

Draw2D touch version 6.1.52 released

+ fixing zoom in/out by working with SVG resize instead of viewBox resize, Better scroll behaviour
+ add missing getter for stroke pattern for the line
+ fix wrong delete order of shape and connection. Delete connections first
+ adjust the beeline for the label selection and make them different for figure and/or Line as parent shape
+ working on percentageLineLocator for labels
+ remove orphan shapes if the user ends of the connection create.
+ new event "unselect" for the figure
+ fixing broken method chaining
+ a lot of minor bug fixes.

New Demo Application with NodeJS backend

Understand the connections in your data.


Understanding what your users are doing doesn’t have to be a complicated setup process. Once you install the Sankey NodeJS server, you can pick and choose which actions to track in your app.
Have you ever wanted to know if people used the comment feature or tapped that button in your app? Just point and click to choose the interactions you want to measure. Now you can spend more time learning how to make your app better.

Uses cases:

  • Phone registration failures over specific period

  • Tracking transaction payment processing platform

  • Tracking a renewal or new signup transaction

  • E-Commerce: typical user session, anomalous checkout transactions, catching drop off in checkout

  • Tracking users on-boarding process

  • Attribution modeling - Determining the origin of a user action

Learn something surprising about your users

Github: https://github.com/freegroup/draw2d_js.app.sankey_report

Draw2D touch version 6.1.43 released

+ fixing orphan flash animation if the ClickConnectionCreatePolicy is used.
+ fixing broken interactive router. Not possible to set vertices via API
+ fix broken segment drag&drop in interactive router
+ enable the figure to uninstall editPolicy by string instead of pure class instance reference.
+ fire event if the userData has changed via API call
+ force "userData" root object if any child object is modified via "attr" method call
+ remove deprecated method for IE8 support
+ fix tooltip position problem during zoomIn/zoomOut
+ fix broken dash pattern for lines
+ fix wrong delete order of connections and figures in one DeleteCommand operation

Draw2D touch version 6.1.42 released

+ new event canvas.on("unselect",...) to track the selection handling cleaner
+ provide getter for color of the Line in the attr method
+ patch wrong event handling in state diagram example
+ avoid override of already set values for line-cap in PolyLine
+ check that a canvas is available before access the shape element to avoid exception during complex delete operation
+ provide factory method that inherit JSON reader can patch the figure creation process
+ adapt class name to provide a valid CSS name for styling via less/css
+ add shiftKey/ctrlKey to the dragging method of the policy
+ add flag to ignore children movement for a raft
+ disable snapToGrid if more than on element is selected
+ provide headless canvas for browser less JSON data read/write
+ remove duplicate event notifications if a connection is deleted
+ implement SmartDraggableLocator
+ provide mouse move, mounter, mouse leave events for the canvas as well.

Draw2D touch version 6.1.36 released

+ provide valid name for CSS styling of the orthogonal resize handle

Draw2D touch version 6.1.34 released

+ don't translate aboard shapes of a RAFT if the user pressed the SHIFT key during drag&drop operation.

Draw2D touch version 6.1.32 released

+ translate connections as well if a Raft object moves connected shapes

Draw2D with Node.js backend

Binding the front- and back-end together with node.js and socket.io.


It is just about 40 lines of server side code to connect draw2d with node.js and load/save JSON files or have access to the RaspberryPI GIO ports. Just checkkout the sample application on GitHub: https://github.com/freegroup/draw2d_js.app.brainbox or install this application with npm if you have already installed node.js

bash: npm install -g brainbox

you can now start the server with brainbox. This works well even on you RaspberryPi. You have full access to your GPIO pins fro the circuit simulator in your browser!

New feature in Draw2D 6.1.27 - SmartDraggable decoration


With the release of 6.1.27 a new implementation of an draw2d.layout.locator.Locator is part of Draw2d. You can now add smart draggable decorations to any kind of shapes. This feature is seen in several desktop apps and is now part of Draw2D as well.


Digital Training Studio

Teach logic gates + digital circuits effectively - done with Draw2D
show case available on Github


  • Design circuits quickly and easily with a modern and intuitive user interface with drag-and-drop, copy/paste, zoom & more

  • Take control of debugging by pausing the simulation and watching the signal propagate as you advance step-by-step.

  • Don't worry about multiple platforms on student computers. DigitalTrainingStudio runs within Draw2D

Draw2D touch version 6.1.5 released

Designing shapes across different zoom levels

Figures have optimal legibility ranges—just like typefaces. Meaning a shape designed for 32 pixels will often be illegible at 50% and appear chunky at 300%. That’s why Iconic is being designed at three sizes for desktop applications.


You can now design your own shapes in Draw2D optimized for different zoom level. Either you use different SVG code or you can implement it as draw2d.StackFigure. Below you see a vey simple example how the figure behaves during zoomIn / zoomOut.


New feature Draggable decoration


With the release of 6.0.0 a new implementation of an draw2d.layout.locator.Locator is part of Draw2d. You can now add draggable decorations to any kind of shapes. This feature is seen in several desktop apps and is now part of Draw2D as well.


Draw2D touch version 6.0.0 (Beta) released

Be aware that the version changed from 5.x.x to 6.x.x. This means that some incompatible changes are part of this release. May you must adapt your code if you are want to use this release.

changing the "on("select",function)" event signature. "figure" is now part of an event parameter instead of a single callback argument. Incompatible changes to version 5.x.x
+ all "changes:" contains now the value in the event object
+ new DraggableLocator and sample for. You can now Drag&Drop labels as well
+ fixing typo in "InteractiveManhattanConnectionRouter". "undefinied" -> "undefined"
+ fixing "jitter" zoom in/out with mouse wheel
+ fixing several JSDoc issues
+ new demo for changing figure representation during zoom in/out
+ fixing broken InteractiveManhattanRouter. Broken start/end if shape is moved
+ new method required callback method Locator.bind/Locator.unbind
+ changing "zoom" and "zoomed" event parameter from factor -> value
+ new Layout figure "StackLayout".
+ fadeOut/fadeIN option in the "setVisible" method of all shapes
+ fixing broken toBack method for sets in the raphael implementation
+ new sample for StackLayout. Click and show the next fixure within the stack
+ add getter/setter for SVGFigure. Now you can change the SVG during figure live time
+ canvas fires new events: zoom, zoomed, removed

Draw2D touch version 5.8.0 released

+ implement zoom as new CanvasEditPolicy
+ new zoom implementation with MouseWheel support
+ fixing background gradient error if transparency is set to <1 for ports
+ fix broken MySlider implementation in the samples
+ don't force redraw or call of "attr" if the attributes are empty
+ remove deprecated currentHoverElement variable in ports

Mouse Wheel Zoom: New for this release is a mouse wheel zoom. This tool requires you to press the [Shift] key to activate the mouse wheel zoom function. Holding [Shift] and rolling the mouse wheel forward zooms in, while rolling it backwards zooms out. Draw2D will shift the center of the zoom focus to where your cursor is on the screen, allowing you to zoom in and out from one area of a presentation to another smoothly.