MindFusion.Diagramming for JavaScript V4.0

階層データを表示できるノードを作成するためのツリービューノードクラスを追加
11月 4, 2021
新バージョン

機能

  • ECMAScript 6 (ES6) modules, classes and properties - The source code has been refactored following ES6 standards, including modules, classes, properties and native collections.
    • ArrayList, Dictionary and Set classes from MindFusion.Collections namespace have been removed and replaced by respective JavaScript native Array, Map and Set.
    • Get/set functions have been replaced by getter/setter properties, which should help using the diagram API with binding expressions of various JavaScript frameworks.
    • You can enable propFunctions in CompatConfig in order to continue using legacy get/set functions during migration.
    • The distribution still includes ES5-compatible scripts located in Scripts/umd folder, which are transpiled from current ES6 code, and whose classes are exposed as members of global MindFusion namespace object as in previous versions.
    • The Scripts/esm folder contains ES6 code that lets you import JsDiagram classes from respective modules.
  • Diagram view - The Diagram control has been refactored into two classes.
    • Diagram is now just a model class that defines diagram structure and implements serialization. The new DiagramView class deals with rendering and user interaction.
    • You can show the same diagram in several views, each one rendering at different scroll positions and zoom levels.
    • The separation also makes it easier to use the diagramming API in node.js server code, avoiding the need to load DOM shim/polyfill packages.
  • TreeView nodes - Added TreeViewNode class for creating nodes that can display hierarchical data.
  • Print pagination - Added printPreview and print methods to DiagramView which let you export the diagram as a list of smaller images in an HTML page.
    • Supported options include printArea (defaults to the diagram's content bounds) and pageSize (defaults to the DiagramView's viewport).
  • Orthogonal layout - Added OrthogonalLayout class which implements an orthogonal graph layout algorithm.
    • Each link is drawn as a chain of alternating horizontal and vertical segments.
    • Nodes are placed in a way that facilitates few link bends and crossings.
  • Added new events
    • nodeSelecting, linkSelecting and selectionChanged events allow handling of selection interactions.
    • dataLoaded is raised when the diagram data is loaded from JSON or XML.
    • mouseWheel is raised when the user rotates the mouse wheel while the cursor is positioned over the diagram surface.
    • treeItemTextEditing and treeItemTextEdited allow handling of inplace-edit operations in TreeViewNode.
  • Miscellaneous
    • Clipboard methods now use modern Navigator.clipboard API when their systemClipboard argument is enabled.
    • Added the ability to rotate FreeFormNode instances.
    • ImageAlign now supports new FitLeft, FitTop, FitRight and FitBottom alignment styles, which resize image to fit node's boundaries and align it to respective border.
    • Added the mouseWheelAction property of DiagramView which lets you choose between Scroll (default) and Zoom as the default behavior of the control in response of a wheel event.
  • API changes
    • The Diagram class is now purely a model class and no longer represents a DOM control. To display and allow interactions with a Diagram instance, you will need to create a DiagramView control and pass the Diagram instance to its diagram property.
    • Auxilliary controls, such as Overview, Ruler and ZoomControl, must now be attached to a DiagramView instance instead of Diagram via the diagramView / target properties.
    • Most getProperty/setProperty function pairs have been replaced by ES6 getters/setters. Set CompatConfig.propFunctions to true in order to continue using legacy get/set functions (for properties added to the library before v.4.0) in your code.
    • The following scroll and zoom properties have been moved from Diagram to DiagramView: autoScroll, scrollZoneSize, autoScrollAmount, scrollX, scrollY, viewport, virtualScroll and zoomFactor.
    • The following input related properties have been moved from Diagram to DiagramView: allowInplaceEdit, delKeyAction, behavior, tooltipDelay, modificationStart, modifierKeyActions, leftButtonActions, middleButtonActions and rightButtonActions.
    • The following magnifier properties have been moved from Diagram to DiagramView: magnifierEnabled, magnifierFactor, magnifierWidth, magnifierHeight, magnifierFrameThickness, magnifierShading, magnifierShape,magnifierFrameColor and magnifierSecondaryFrameColor.
    • The following properties have been moved from Diagram to DiagramView: defaultControlTemplate, licenseKey and licenseLocation.
    • The following methods have been moved from Diagram class to DiagramView class: create, find, record, stopRecording, replay, clearTooltip, beginEdit, copyToClipboard, pasteFromClipboard, cutToClipboard, scrollTo, zoomToRect, zoomToFit and setZoomFactorPivot.
    • MindFusion.AbstractionLayer class has been removed.
    • EventArgs and CancelEventArgs classes have been moved to the MindFusion.Controls namespace.
    • ArrayList, Dictionary, ObservableCollection, Set classes have been removed from MindFusion.Collections namespace.
    • Due to Navigator.clipboard API being asynchronous, pasted items are not available immediately after calling pasteFromClipboard with systemClipboard enabled. You will be able to access them only after nodePasted and linkPasted events are raised.
MindFusion.Diagramming for JavaScript V4.0
MindFusion.Diagramming for JavaScript

MindFusion.Diagramming for JavaScript（英語版）

プラットフォームに依存しない作図機能をアプリケーションに追加

見積もりの依頼 購入

MindFusion.Diagramming for JavaScript（英語版）は、次の製品にも含まれています。

ご質問がありますか？

今すぐ MindFusion Group ライセンススペシャリストとライブ チャット。