Drawing tools

Provides the tools to assist in resizing nodes/groups.

The plugin automatically attaches resizing tools to any vertex that is added to JsPlumb's current selection, and removes the resizing tools when the vertex is removed from the selection. This behaviour can be changed by setting onDemand:true in the plugin options.

The default settings for the drawing tools plugin attach a handle at each corner that your users can drag to resize. As of version 7, you can now instruct the plugin to allow users to resize by dragging an element's borders

Setup

Vanilla JS

React

Angular

Vue

Svelte

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

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

We show the plugin here without any constructor options as it "just works" for the most part, but there are a few configurable options.

In this canvas we've selected one of the vertices after loading the dataset. You can click on other vertices to select them:

Resizing by border

Instead of attaching a handle at each corner to enable resize, you can setup the drawing tools to allow resize by dragging the borders of the element:

Vanilla JS

React

Angular

Vue

Svelte

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

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": DrawingToolsPlugin.type,
      "options": {
        "resizeMethod": DRAWING_TOOLS_RESIZE_METHOD_BORDERS
      }
    }
  ]
});

Grids

When the associated surface has a grid, this plugin will constrain node/group resizing so that the dimensions of the vertex are a multiple of the grid in each axis. This is controlled by the ignoreGrid option, which is set to false by default. You can change that:

Vanilla JS

React

Angular

Vue

Svelte

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

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

Constraining size

There are 3 options you can use to constrain the size when resizing elements:

• minimumWidth The minimum width the user can drag any element to
• minimumHeight The minimum height the user can drag any element to
• constrainGroups When true, the minimum size for groups when resizing will be calculated as the bounds of their child elements.

note

The drawing tools plugin will not resize collapsed groups.

Attaching tools on demand

By default the drawing tools will attach themselves to any element that is in JsPlumb's current selection, but you can switch to "on demand" mode like this:

Vanilla JS

React

Angular

Vue

Svelte

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

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

Constraining resize axes

By default, the drawing tools plugin will allow users to resize an element's width and height. This behaviour can be changed, in one of two ways:

• By setting the attribute jtk-y-resize or jtk-x-resize to "false" on some node/group template:

<div jtk-x-resize="false">{{name}}</div>

• By setting resizeX or resizeY to "false" in the plugin options.

Vanilla JS

React

Angular

Vue

Svelte

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

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": DrawingToolsPlugin.type,
      "options": {
        "resizeX": false
      }
    }
  ]
});

Excluding elements

You can exclude specific elements from being resizable by writing a jtk-resizable attribute on them:

<div jtk-resizable="false">{{name}}</div>

Custom attributes

The drawing tools use left, top, width and height as the default values to write into the underlying data for an element that is being resized. You can override these:

Vanilla JS

React

Angular

Vue

Svelte

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

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": DrawingToolsPlugin.type,
      "options": {
        "widthAttribute": "w",
        "heightAttribute": "h",
        "leftAttribute": "x",
        "topAttribute": "y"
      }
    }
  ]
});

Custom payloads

You can provide a payloadGenerator to the drawing tools which will be invoked before the drawing tools commits a change to a model object. This method allows you to customize the changes that will be made to the model object (or it can be used as a hook to make other changes in your model of course):

payloadGenerator?:(v:Node, p:ObjectData) => ObjectData

Vanilla JS

React

Angular

Vue

Svelte

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

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": DrawingToolsPlugin.type,
      "options": {
        "payloadGenerator": (vertex, data) => {
                   return {
                       someDynamicValue:data.w * something etc
                   } 
               }
      }
    }
  ]
});

In this example the model object's data will be updated with the someDynamicValue we calculated.

note

A payload generator function cannot override the value of any attributes the drawing tools needs to set, ie. the position or size of the object. The drawing tools will merge its attributes on top of any you return from a payload generator.

CSS

Classes used by the DrawingTools plugin

Default values specified in the jsplumbtoolkit.css stylesheet

Class	Description
jtk-draw-skeleton	Assigned to the outline of the drawing tools attached to some element
jtk-draw-handle	Assigned to the individual resize handles
jtk-draw-handle-tl	Assigned to the top left resize handle
jtk-draw-handle-tr	Assigned to the top right resize handle
jtk-draw-handle-br	Assigned to the bottom right resize handle
jtk-draw-handle-bl	Assigned to the bottom left resize handle

Options

Interface DrawingToolsPluginOptions

Name	Type	Description
bordersVisible?	boolean	When resizeMethod is "borders", set this to make the borders visible. Internally this just sets a CSS class on the draw skeleton's parent DOM element, and the appearance of the borders is then controlled via CSS.
constrainGroups?	boolean	Defaults to true, meaning groups will not be shrunk to the point that one or more of their child vertices is no longer visible.
heightAttribute?	string	Attribute to use for vertex height - defaults to 'height'
ignoreGrid?	boolean	Defaults to false, meaning size changes conform to an underlying grid, if present
leftAttribute?	string	Attribute to use for vertex left position - defaults to 'left'
minimumHeight?	number	Minimum height the user can shrink a vertex to. Defaults to 30.
minimumWidth?	number	Minimum width the user can shrink a vertex to. Defaults to 30.
onDemand?	boolean	Defaults to false, meaning the drawing tool plugin switches on whenever a new vertex is selected.
onEdit?		Optional callback invoked after an edit has occurred
payloadGenerator?		Optional helper method you can supply which will augment the changes being made by an update in the drawing tools.
resizeMethod?	DrawingToolsResizeMethod	Method to use for resize - handles on the corners, or borders. Defaults to handles.
topAttribute?	string	Attribute to use for vertex top position - defaults to 'top'
widthAttribute?	string	Attribute to use for vertex width - defaults to 'width'