Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic MindFusion.JavaScript Pack, 2020.R2 (Read 159 times)
Forum Admin
YaBB Administrator

Rock and Roll

Posts: 564
Joined: Apr 6th, 2003
MindFusion.JavaScript Pack, 2020.R2
Nov 13th, 2020 at 11:40am
Print Post  
We have released MindFusion JavaScript Pack 2020.R2. It adds following new 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"

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.

Electron compatibility
Serialization and clipboard operations should now work under Electron.js. In previous versions they would throw exceptions due to restricted use of eval.

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

API changes
For compatibility with MindFusion diagramming API for other platforms, StrokeThickness is now specified in diagram's MeasureUnit instead of pixels. You can set CompatConfig.pixelThickness = true in order to revert to using pixel values.


Axis origin
The origin property of the Axis class lets you specify the origin of an axis. If set to a non-null value, the component renders an axis line inside the plot. Bars are drawn below that axis line if their values are smaller than the origin. For stacked bar charts, each bar length corresponds to the difference between bar's value and origin.

The Plot.drawOrigins and Plot2D.drawOrigins methods allow you to draw the axis origin lines when rendering the chart plot by yourself.

  • A new SimpleSeries constructor override allows you to specify a list with tooltips for the newly created Series.
  • The new drawLeftFromPoint method allows you to render text, which is left-aligned compared to a given Point.
  • The new methods fromObject and toObject of the Font class allow you to deserialize and serialize Font instances from/to Json objects.

MindFusion Virtual Keyboard

API changes
  • The VirtualKeyboard control now inherits from MindFusion.Common.Control.
  • VirtualKeyboard.addEventListener method removed; use the EventDispatcher API to subscribe to events. e.g. keyboard.keyPressed.addEventListener(handler).
  • Get / set methods have been refactored to properties and can be accessed directly.
  • Important: A reference to the mindfusion-common/jsmodules package or to the MindFusion.Common.Full.js should be added to projects that use the virtual keyboard.

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

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