I am using Mindfusion Typescript diagram-library.
I would like to know if there is an Event for drag and drop with regards to container nodes? I would like to drag the container node into an external tree, and likewise drop into container nodes.

It is a separate tree component on the page. It is not a part of a diagram.

See if approach from attached sample will work for you for dragging from containers to external controls using HTML5 API. It has a Toggle Drag check box that sets the Draggable property of Canvas element to true and Enabled property of diagram to false so it won't respond to mouse messages. If you want to start drawing in the diagram again, disable the checkbox to toggle those properties. Instead of checkbox, you could probably toggle the mode in response to key-down events raised for some modifier key.

Regards,
Slavcho

It should be available in JavaScript code, but I can see it's missing from d.ts file. You can add this to Diagram definition there for time being -

getEnabled(): boolean;
setEnabled(value: boolean): void; 

We'll post updated d.ts with a new version of the diagramming.js in next few days.

You could check from mouse-down handler whether the mouse points to a manipulator object (what we call things like container fold icons and tree collapse icons), and set Enabled to true when it does so the diagram still processes mouse click message, and back to false when it does not so the drag-and-drop API works. Attached sample shows that, and includes some new Typescript definitions you might need for the code.

function getLocalPoint(e)
{
	// Get the relative coordinates
	var offset = $('#diagram').offset();
	var x = (e.pageX - offset.left) + $(window).scrollLeft();
	var y = (e.pageY - offset.top) + $(window).scrollTop();

	return diagram.clientToDoc(new Point(x, y));
}

function getNodeUnderCursor(e)
{
	var localPoint = getLocalPoint(e);
	return diagram.getNodeAt(localPoint, true, true);
}

function onDiagramMouseDown(e)
{
	if ($('#chbDragMode')[0].checked == false)
		return;
	var node = getNodeUnderCursor(e);
	if (node)
	{
		var localPoint = getLocalPoint(e);
		var manipulator = node.hitTestManipulators(localPoint);
		if (manipulator != null)
		{
			diagram.setEnabled(true);
			$('#chbDragMode')[0].checked = false;
		}
	}
} 

Regards,
Slavcho

It's not a method of the Diagram class but of its backing Canvas element -

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
http://typescript.codeplex.com/sourcecontrol/latest#typings/lib.d.ts

You should be able to call it like -

var canvas = <HTMLCanvasElement> document.getElementById("diagramCanvas");
var dataUrl = canvas.toDataURL();