Active filtering

Active filtering is the ability to disable drag targets programmatically when a new connection is dragged.

This plugin does not have any configurable options.

Usage

To use the active filtering plugin, you need to provide a beforeConnect method to the constructor parameters of the JsPlumb Toolkit instance, and you declare the ActiveFilteringPlugin in the render options:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	ActiveFilteringPlugin } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance({
  "beforeConnect": (source:Vertex, target:Vertex) => {
        // return true if the source and target are connectable,
        // false otherwise.
    }
})
    
const surface = toolkit.render(someElement, {
  "plugins": [
    ActiveFilteringPlugin.type
  ]
});

When a target is disabled by the ActiveFiltering plugin, a data-jtk-enabled attribute is written to its DOM element, with a value of "false":

<div data-jtk-enabled="false">{{id}}</div>

You can target this via css:

.jtk-node[data-jtk-enabled='false'] {
  opacity:0.4;
}