Active Filtering

Active filtering provides a way to filter connection targets when a drag begins. Try dragging a connection from one node to another - when you start to drag, the available targets are filtered.

Active filtering is configured via a plugin for the Surface component. When an activeFiltering plugin is set on a Surface and a beforeConnect function is supplied to the Toolkit's constructor, that function is called before a new connection is dragged, for every possible target for the current source. Whenever the beforeConnect method returns false, the corresponding target object (a node, group or port) is disabled, and the user will not be able to drop the connection onto it.

In this demonstration, each node contains a set of entries which each contain the name of two types of animal. Entries are deemed connectable if one or more animals from the source entry are matched in a given target. Disabled vertices have a data-jtk-enabledattribute written onto them with a value of false, allowing you to easily control their appearance via CSS.

We use JsPlumb's ForceDirected layout in this demonstration. A Force directed layout is a layout in which the edges between vertices are thought of as springs, where the existence of an edge between two vertices has the effect of drawing them closer together.

When the user clicks 'Add a node', a new vertex is added and the layout is re-run. Note though that the position of vertices that have already been processed by the layout is unchanged. You can instruct the force directed layout to recompute every position but from a UX standpoint it's generally a better experience to only run the layout in an incremental fashion, so that is what the Toolkit does by default.

This demo uses a `Smooth` connector, which is an alias for a straight connector with smoothing switched on, that we added in 7.x.x.

Read more about active filtering in the docs on this page: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#active-filtering

Read more about JsPlumb's ForceDirected layout on this page: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layout-force-directed