Drawing Tools

This plugin provides the tools to assist in resizing nodes/groups.

The plugin automatically attaches resizing tools to any vertex that is added to a Toolkit'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.

Instantiation

Drawing tools can be specified in the plugins section of the render options for some Surface:

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

const toolkit = newInstance()
const surface = toolkit.render(document.getElementById("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.

TOP

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:

const surface = toolkit.render(document.getElementById("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 the Toolkit's current selection, but you can switch to "on demand" mode like this:

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

Custom attributes

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

const surface = toolkit.render(document.getElementById("someElement"), {
    ...,
    plugins:[
        {
            type:DrawingToolsPlugin.type,
            options:{
                widthAttribute:"width",
                heightAttribute:"height",
                leftAttribute:"x",
                topAttribute:"y"
            }
        }
    ]
 
})

CSS

These are the classes you can use to style the drawing tools. There are defaults for these in the Toolkit's default 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

Options for the drawing tools plugin

Members

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

topAttribute?: string

Attribute to use for vertex top position - defaults to 'top'

widthAttribute?: string

Attribute to use for vertex width - defaults to 'width'