Lasso

The lasso plugin allows users to select nodes, group and edges with the mouse.

Setup

Vanilla JS

React

Angular

Vue

Svelte

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

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": LassoPlugin.type,
      "options": {
        "invert": true
      }
    }
  ]
});

Options

Interface LassoPluginOptions

Name	Type	Description
cssClass?	string	Extra class(es) to add to the lasso's DOM element
filter?	string	Optional CSS3 filter identifying elements you do not want to lasso.
generateLassoContent?		Optional function that generates the DOM element for the lasso to use. This is for advanced usage scenarios and most users will not need to supply this.
includeEdges?	boolean	Defaults to false. If true, edges are included in the lasso selection.
invert?	boolean	Defaults to false, meaning the lasso is drawn as a rectangle. If true, the lasso is drawn as a set of masks, with the lasso area drawn as a "hole" in the masks.
onEnd?	Function	Optional function to call when lasso selection ends.
onSelect?		Optional function to call when one or more objects has been selected by the lasso.
onStart?	Function	Optional function to call when lasso selection starts.
selectionFilter?		Optional filter that is passed every vertex/edge that the lasso would ordinarily select, and if this function returns false then the vertex/edge is not added to the selection