28 posts tagged with "snaplines"

NEW FUNCTIONALITY​

• The ImageExporter class now supports an optional width or height for the exported image. Width takes precedence; the aspect ratio of the underlying content is always maintained.

• Added optional onShow and onDimensionsChanged callbacks to ImageExporterUI.

• Added the ability to ImageExporterUI to specify a list of sizes from which the user should be able to choose for their exported image.

NEW FUNCTIONALITY​

• Shape libraries now support defs - snippets of SVG that you can declare in the header of a shape set and reference in the individual templates. This reduces bloat and increases readability. See below for more detail.

UPDATES​

• Improvements to the hierarchy layout's crossing stage to reduce the chance of overlapping edges
• Improvements to SVG/PNG/JPG export UI
• Improvements to SVG export output: edges are drawn first in the SVG so that nodes will be placed on top in non-browser settings.

JsPlumb has support for layouts baked in, shipping with a Force Directed layout, Hierarchy layout, Balloon layout and Circular layout, as well as supporting Absolute positioned nodes and groups and a powerful and simple api for creating custom layouts.

Sometimes, though, you just want to make small adjustments to the elements in your UI to neaten things up a bit, and the JsPlumb offers a very handy utility for doing so - the magnetizer. It's a collection of tools you can use to nudge elements around.

Snaplines plugin​

In version 6.7.0 we released a new plugin - Snaplines - which you can see in action in our Flowchart builder demonstration. In this post we're going to look at a couple of methods offered by the surface component which allowed us to implement snaplines in a matter of hours.

This is a picture of the snaplines plugin in action:

The internal workings of this plugin are quite simple:

UPDATES​

• Fixed an issue writing attributes to the xlink namespace in the vanilla template engine
• Updated template parsing code to better handle extraneous whitespace.
• Improvements to the preview view of the svg/png/jpg export code
• Updated jsdocs for Vue 2 and Vue 3 integration packages
• Added the ability to register a Surface on Vue 2 and Vue 3 manually - allowing you to use vanilla templating inside of a Vue app.

BREAKING​

• The order of arguments in the fixElement method has been switched from (el:Element, constraints:FixedElementConstraints, pos:PointXY) to (el:Element, pos:PointXY, constraints?:FixedElementConstraints). This better reflects the fact that constraints is an optional argument whereas pos is not.

Hello World starter app​

We've already got a bunch of great starter apps you can use as a basis for your own, but sometimes you want to start from something a little more bare-bones. So we've added a Hello World starter app - just enough to get you started.

One question we hear a lot from prospective licensees is how does JsPlumb compare as an alternative to JointJS? The people at JointJS have taken several stabs at summarizing this but the results can at best be described as an exercise in creative writing.

In today's post I'm going to jot down a few thoughts of our own, plus those of the many developers who come to us once they've reached the limit of JointJS's capabilities.

What's new?​

Snaplines plugin​

We've added a brand new plugin in this release - Snaplines:

When the edge or center of any two elements is in proximity a snapline appears, in green (by default - but you can change that with CSS). When they are exactly in line, the snapline goes red. The related element for an active snapline is also assigned a CSS class, for maximum flexibility for your design team.

You can see this plugin in action in the Flowchart builder. We're looking forward to seeing what you build with it!