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

Home > @jsplumbtoolkit/browser-ui > DrawingToolsPluginOptions

DrawingToolsPluginOptions interface

Signature:

export interface DrawingToolsPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties

Property	Modifiers	Type	Description
constrainGroups?		boolean	(Optional)
heightAttribute?		string	(Optional)
ignoreGrid?		boolean	(Optional)
leftAttribute?		string	(Optional)
minimumHeight?		number	(Optional)
minimumWidth?		number	(Optional)
onDemand?		boolean	(Optional)
onEdit?		() => any	(Optional)
topAttribute?		string	(Optional)
widthAttribute?		string	(Optional)