Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Diagramming for ASP.NET MVC, V3.3 (Read 728 times)
Forum Admin
YaBB Administrator

Rock and Roll

Posts: 604
Joined: Apr 6th, 2003
Diagramming for ASP.NET MVC, V3.3
Dec 12th, 2020 at 1:43pm
Print Post  
We have released version 3.3 of MindFusion.Diagramming for ASP.NET MVC. It adds the following new features and improvements:

.NET 5 support
MindFusion.Diagramming for ASP.NET MVC distribution now includes assemblies for .NET 5. The programming interface is the same as the one of .NET Core Assemblies.

Control nodes
ControlNode objects display custom HTML content, specified via their Template property. A node's DOM structure is created inside the Content div element, which is then rendered on top of the diagram canvas. Note that this prevents ControlNodes drawing in diagram' usual Z order, and they will always appear on top of other diagram items.

By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true.

You can register event handlers for elements in the template by assigning function names to data-event attributes in the form data-event-'eventName'='handlerName'. Alternatively, you can attach event listeners using DOM API once nodeDomCreated is raised to signify that content is available. E.g. access child elements by calling args.getNode().getContent().querySelector(...) and attach handlers via elements' addEventListener method.

ControlNodes create DOM elements from their template only in the main diagram, and render images instead when shown in Overview or NodeListView. Note that in this case image elements in the template will render only if specified in base64 format. The Utils.toDataUrl method helps you convert an image URL to base64 data URL.

Video nodes
VideoNode objects display video streams, along with UI elements to play, pause, seek and change volume. Call node's setVideoLocation method to specify its video URL. Auto-playing is not supported at this time, and the video can be started only by users clicking the play button. VideoNode is built around Video component, which can also be used in CompositeNode templates.

Button components
Composite nodes can now contain buttons. Button components respond to user clicks by calling the JavaScript function whose name is assigned to their clickHandler attribute. A button can show a text label assigned to the text attribute, or an image whose URL is assigned to imageLocation. The following example adds a button to CompositeNode template:
Select All
    component: "Button",
    brush: "#ccc",
    text: "Delete",
    width: 30,
    cornerRadius: 3.5,
    clickHandler: "onDeleteClick"

Virtual scroll improvements
  • The control now handles mouse wheel events to scroll the diagram when virtual scrolling is enabled.
  • DOM elements that implement virtual scroll mode now use CSS grid layout. You might need to adjust page layout to apply size constraints on the diagram div or its parent. For compatibility with older browsers, you can set CompatConfig.gridLayout = false to fall back to the absolute positioning from previous versions.
  • VirtualScroll mode is now enabled by default.

  • Mouse pointer position is now provided as argument to nodeCreated and linkCreated events.
  • Visibility property added to CompositeNode components lets you keep invisible components in the template.
  • General performance improvements.
  • Collapse / expand icon is now drawn correctly for CompositeNode when Expandable is enabled.
  • Json deserialization no longer creates undo records.
  • Content of CompositeNodes is now clipped by default if Shape in the template is marked with isOutline attribute. To disable that, set ClipToOutline to false.
  • Set ExpandButtonAction to RaiseEvents and +/- buttons of Expandable nodes will only raise an expandButtonClicked event instead of expand or collapse the tree under that node. You can use this to implement custom logic for the +/- button.

Installer for the latest version can be downloaded here, or from the clients area on our site:

Updated assemblies and script files are also available as MindFusion.Diagramming.Mvc NuGet package.

Back to top
IP Logged
Page Index Toggle Pages: 1
Send TopicPrint