https://mindfusion.eu/_beta/netdiagram_v3.zip

This preview version shows the new ImageMap mode features in NetDiagram 3:

* Overview control *

Displays a small-scale overview image of the diagram, and allows scrolling the actual diagram view by dragging a tracking rectangle. To use it in ImageMap mode, add an Overview instance from the MindFusion.Diagramming.WebForms.dll assembly, and connect to it an OverviewExtender from MindFusion.Extenders.dll to implement client-side interaction.

* ShapeListBox control *

Displays a list of shapes, and allows creating new nodes in the diagram by drag-and-drop. To use it in ImageMap mode, add a ShapeListBox instance from the MindFusion.Diagramming.WebForms.dll assembly, and connect to it a ShapeListboxExtender from MindFusion.Extenders.dll to implement client-side interaction.

* Clipboard support *

Set DiagramView.EnableClipboard = true, and users will be able to copy, cut and paste items via the Ctrl+C, Ctrl+X and Ctrl+V shortcuts. Copied items are serialized in the viewstate and can be pasted after a postback.

* Delete items using the Del key *

Pressing Del deletes either the active item, or all selected items, as set through the DelKeyAction property. The default is None - pressing Del does not delete items.

* Support for custom item types *

Set DiagramView.Behavior = Custom, and the objects created after users draw on the client side will be instances of the classes specified via the CustomNodeType or CustomLinkType properties.

* Client-side Diagram DOM in ImageMap mode *

Now you can do some change to the properties of diagram items on the client side, using the API defined in these JS files:
https://mindfusion.eu/_beta/js_dom.zip

When posting back, changed items are sent via JSON to the server where the server side DOM is updated accordingly.

* OrthogonalLayout layout algorithm *

It creates layouts similar to this one:


Note that the OrthogonalLayout class from previous NetDiagram versions is now called OrthogonalRouter.

* CircularLayout layout algorithm *

It creates layouts similar to this one:


We hope you'll like the new features. Any suggestions and feedback for further improvements are welcome.

We are going to upload an updated .jar file for the version 3 JavaApplet mode next week.

Stoyan

Hi,

Seems it doesn't work that well from inside an UpdatePanel. We'll fix it as soon as possible.

Stoyan

Hi,

It turned out the problem happens because of the "position: absolute;" style. If you remove it, the tracking rectangle should work fine. We'll upload a fixed version in a few days.

Stoyan

There is a new ImageGen.aspx that is required by Netdiagram v3, but we haven't created the VB version yet. We'll try to port it to VB and upload it here tomorrow.

The Overview version here should also work with absolution positioning:

https://mindfusion.eu/_beta/netdiagram_v3.zip

It should also improve the quality of the generated Overview image.

Now the archive contains the latest ImageGen versions as well.

I hope that helps,
Stoyan

There are two ways to add custom shapes. You could either define custom Shape objects from code, or create a shape library file using the ShapeDesigner tool and load it into the application using ShapeLibrary.LoadFrom(). Associate some IDs to the custom Shape objects, and add these IDs to ShapeFilter. Note that custom shape definitions are not preserved between postbacks, so you might have to define or load them at every page_load.

I hope that helps,
Stoyan

Thanks, but I seem to be getting a script error with the new dlls:

Microsoft JScript runtime error: 'WebForms' is undefined

When I copy back in the old dlls it works fine.

Well, now it seems to be working. I keep toggling back and forth between the old dls and the new and now it works. I am not sure what fixed it as I did nothing other than copy the dlls. The line it was failing on was below and webforms was nothing yet sys.webforms was something:

Sys.Application.add_init(function() {
    $create(WebForms.DiagramView, {"clipboard":true,"delete":true,"diagramItems":[],"diagramNodes":[],"down":"/MindFusion/InteractivityBeta/WebResource.axd?d=MNneNdwDuwTu5MttCLODQWE
7PYudmAU5wIj1yHwntWpeORVnPNG3Cn5b-Zloc02_eJUsbBRMPznN4ZRd8V7QawIT_yRUpJ4V97R9OLM
LzZk1&t=633707222463750000","enableItemsDOM":false,"left":"/MindFusion/Interacti
vityBeta/WebResource.axd?d=MNneNdwDuwTu5MttCLODQWE7PYudmAU5wIj1yHwntWpeORVnPNG3C
n5b-Zloc02_SQEwEVDX_FPQCQvOQrlOR2dV8h8FeC_rj7Mgdn46AB81&t=633707222463750000","l
eftdown":"/MindFusion/InteractivityBeta/WebResource.axd?d=MNneNdwDuwTu5MttCLODQW
E7PYudmAU5wIj1yHwntWpeORVnPNG3Cn5b-Zloc02_SQEwEVDX_FPQCQvOQrlOR051KkO-UdN22va6C0
flTXY1&t=633707222463750000","leftup":"/MindFusion/InteractivityBeta/WebResource
.axd?d=MNneNdwDuwTu5MttCLODQWE7PYudmAU5wIj1yHwntWpeORVnPNG3Cn5b-Zloc02_SQEwEVDX_
FPQCQvOQrlOR8Wo_O5e9buEH1k9ZsT1Dvw1&t=633707222463750000","links":true,"nodes":f
alse,"right":"/MindFusion/InteractivityBeta/WebResource.axd?d=MNneNdwDuwTu5MttCL
ODQWE7PYudmAU5wIj1yHwntWpeORVnPNG3Cn5b-Zloc02_qJdaDU_WzBi7pnR7COFGNfj6_huJUkm0kb
gZarbHC2Q1&t=633707222463750000","rightdown":"/MindFusion/InteractivityBeta/WebR
esource.axd?d=MNneNdwDuwTu5MttCLODQWE7PYudmAU5wIj1yHwntWpeORVnPNG3Cn5b-Zloc02_qJ
daDU_WzBi7pnR7COFGNVphcahmVoUfMkGeiWw71Ts1&t=633707222463750000","rightup":"/Min
dFusion/InteractivityBeta/WebResource.axd?d=MNneNdwDuwTu5MttCLODQWE7PYudmAU5wIj1
yHwntWpeORVnPNG3Cn5b-Zloc02_qJdaDU_WzBi7pnR7COFGNdk6vUHQqKdj_RyFrfK73UM1&t=63370
7222463750000","select":true,"selectedArray":[],"selectedLinksArray":[],"up":"/MindFusion/InteractivityBeta/WebResource.axd?d=MNneNdwDuwTu5MttCLODQWE7P
YudmAU5wIj1yHwntWpeORVnPNG3Cn5b-Zloc02_OGrI5v0U0dNnyckm017AH6ysftEnutYpvIkw_405t
bw1&t=633707222463750000"}, null, null, $get("diagView"));