Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Diagramming for JavaScript, V3.5 (Read 677 times)
Forum Admin
YaBB Administrator

Rock and Roll

Posts: 577
Joined: Apr 6th, 2003
Diagramming for JavaScript, V3.5
Sep 3rd, 2020 at 12:03pm
Print Post  
We have released version 3.5 of MindFusion JavaScript Diagram library. It contains the following new features and improvements:

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.

New ControlNodes.html example included in distribution demonstrates the ControlNode API.

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"

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

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

Updated scripts are also available as diagram-library NPM package.

« Last Edit: Nov 30th, 2020 at 1:06pm by Forum Admin »  
Back to top
IP Logged
Page Index Toggle Pages: 1
Send TopicPrint