At KapLab, we highly take into consideration our customers needs, issues and requirements. New releases often answer these needs and enhance the product from the functional and technical points of views. The 2.4 version is particularly the result of support requirements combined to various experiences with Kalileo integration. It Includes several architectural and performance enhancements and a bunch of functional features dealing especially with the edition experience. We’ll particularly talk about new expand/collapse engine and the enhancements done on the layout engine. Then we’ll talk about several options added for easing the positioning of elements inside Diagrammer.

New Expand/Collapse Engine

The expand/collapse functionality on groups and nodes is a great feature in Kalileo. It is natively supported but when dealing with advanced constraints, integration becomes a bit more complicated. This leads to several backbones of hack sections in the functional implementation code. We have particularly focused our efforts on re-engineering the expand/collapse engine to make it more generic and to support high level integration constraints which we have been able to figure out from our customers requests. Enhancements that have been performed include:

  • Fast processing of hierarchies;
  • Programmatic access to the collapsed entities on the graph via nodesMap and linksMap properties on Visualizer or Diagrammer;
  • Direct access to information about the node context in an hierarchy or group (determine whether it is included in a collapsed hierarchy or collapsed container) via isVisibleInSubTree and isVisibleInContainer properties in any node instance;
  • Ability to add children nodes and link to a collapsed node or group without wondering about the visibility and layout context via addNodeElement and addLinkElement methods on Visualizer or Diagrammer;
  • Transparent and automatic handling of expand/collapse features on the layout engine and animation manager.

Enhancement on the layout engine

It’s common when using layouts to apply the algorithm on the whole graph. But in particular cases, some nodes or links should be ignored due to functional constraints. We have revamped the layout processing to handle such case.The links assigned to any non-included node are automatically routed to meet the aesthetics specifications. A single code line is needed to include a node (or a link) in the layouted graph:
myNode.includeInLayout = false;
Animated layouts such as the force directed or the circular packing layout have also been enhanced to leave the beta state. Add-ons for this type of layout are architectural and functional. In fact, starting from the 2.4 version, animated layouts natively support graphs containing nested graphs by applying the progressive layout computations recursively on the groups. Developing custom progressive layouts have also been much more simplified and fastened in this version by providing a basic Layout class -- ProgressiveLayout -- containing the basic directives for handling automatically nested graphs layout computation. The developer only needs to extend it and override two basic methods which reflect the progressive algorithm.

Grid and alignment support

As said before, we have focused on the edition tools in order to enhance the diagramming experience. Several tools have been added for this purpose:

  • Customizable Grid: A grid can be added to Visualizer using enableGrid property in Visualizer. The Grid can be customized via the gridStyle property and is responsive to scaling, panning and layout operations;
  • Grid Snapping: Nodes and groups can be automatically attached to grid bones using the parameters stored in the gridStyle property. The grid snapping can be enabled via the DisplaceActionData assigned to the default DisplaceAction;
  • Snapping Tool: this tool is useful when moving nodes and having them aligned with the extremity of other nodes. Using snapping techniques, nodes can be easily and automatically aligned thanks to visual helpers and magnetic snapping on aligned nodes.
  • Alignment methods: alignSelection and alignElements are two methods that have been added to enable developers to integrate several alignment options in their applications and thus give some nice options for the end-user at the edition step. Alignment directives include:
    • Horizontal centered alignment: aligning nodes at the horizontal center of the bounding box while maintaining the y coordinate unchanged;
    • Horizontal left alignment: aligning nodes at the left of the bounding box while maintaining the y coordinate unchanged;
    • Horizontal right alignment: aligning nodes at the right of the bounding box while maintaining the y coordinate unchanged;
    • Vertical centered alignment: aligning nodes at the vertical center of the bounding box while maintaining the x coordinate unchanged;
    • Vertical top alignment: aligning nodes at the top of the bounding box while maintaining the x coordinate unchanged;
    • Vertical bottom alignment: aligning nodes at the bottom of the bounding box while maintaining the x coordinate unchanged;
    • Vertical distribution: distributing nodes on the vertical center of the bounding box with equal gaps in a way that maintains the nodes in the same bounds;
    • Horizontal distribution: distributing nodes on the horizontal center of the bounding box with equal gaps in a way that maintain the nodes in the same bounds.

In this article, we have detailed the main features and enhancements provided in the new Kalileo version. This version includes also several other architectural enhancements dealing with link routing, memory leaks that haven’t been detailed. We invite you to read the release notes, give Kalileo 2.4 a try and give us your feedback as usual to learn from your experience and to make your satisfaction with our products bigger and bigger.


Mohamed Amami.
Technical Lead on Kalileo