Search
What's New in this Release

The list below describes recent changes and additions to JsDiagram:

New in version 4.7.1

Grid layout

The GridLayout algorithm arranges diagram nodes in a grid, keeping connected nodes close to each other. The algorithm strives to achieve a small number of link crossings. It is based on an iterative process whose initial steps shuffle the grid nodes randomly. That can lead to very different results each time the algorithm is run.

Miscellaneous

  • startNode and endNode properties added to LayeredLayout. They let you specify which nodes to place on first and last layer, instead of relying on the algorithm selecting them automatically.
  • The crossingCost property of GridRouter implements penalty cost for link crossings. It's applied only when routing multiple links at once, e.g. when running routeAllLinks.
  • The bringIntoView method scrolls the diagram view to make the specified item visible.
  • The allowLinksRepeat property of Diagram specified whether more than one links can connect the same origin and destination diagram nodes.
  • controlUnloading and controlUnloaded events let you handle the control being unloaded from page DOM, or disposed by wrapper components for supported frameworks (e.g. by ngDestroy hook in angular).

New in version 4.7

ItemListView component

ItemListView supersedes NodeListView and lets you show both nodes and links in the list. Items can be added by calling addItem method, and removed by calling removeItemdefaultNodeSize property from NodeListView is called newInstanceSize in the new class. The autoConnectLinks and autoConnectDistance properties control whether links created via drag-and-drop should connect to nearby nodes in the target diagram. ItemListView also provides more properties for customizing the list layout, such as columns and labelPosition. For compatibility with legacy code, NodeListView won't be removed from the library, bit it won't be getting any new improvements.

Palette component

The Palette control represents a tool palette that displays DiagramItem objects grouped into categories. It implements Accordion user interface that displays ItemListView components as its child panels, and category icon, title and collapse/expand button in pane headers. Each child ItemListView displays the items added to its corresponding category. Call the addCategory method to define a category and create its respective accordion pane. Call addItem to add an item to specified category. Palette provides same layout and appearance properties as the ItemListView class.

ItemLabel image

New image and imageLocation properties added to ItemLabel let you display icons along a link's geometry, or add more images to a ShapeNode. If a label contains both text and image, their relative position is specified by imageAlign property (by default the image is placed on left side of text), and distance by contentPadding. The image is rendered using bitmap's intrinsic size, unless you override it by setting imageSize property. You can treat label images as clickable icons by handling linkClicked or nodeClicked events and checking label argument passed to their handlers.

Miscellaneous

  • locked property added to ItemLabel. It lets you prevent users from editing label's text, and moving it when behavior is set to MoveLabels.
  • label argument now provided with item click and double click events.
  • Improved repaint speed of Overview component.