Class RubberBandHandler

Event handler that selects rectangular regions.

IMPORTANT: This is not built-into maxGraph i.e. this plugin is not in the maxGraph default plugins, see getDefaultPlugins.

To enable rubberband selection in a graph, use the following code.

const plugins = [
  ...getDefaultPlugins(), // or any other plugins you want
  RubberBandHandler,
];

// Creates the graph with the custom plugins
const graph = new Graph(container, undefined, plugins);

IMPORTANT: the RubberBandHandler requires CSS styles in order to work properly. See the CSS rules in the css/common.css file provided within the npm package. They relate to the .mxRubberband class.

Implements

GraphPlugin

Constructors

constructor

new RubberBandHandler(graph): RubberBandHandler
Parameters
- graph: Graph
Returns RubberBandHandler
- Defined in view/handler/RubberBandHandler.ts:63

Properties

currentX

currentX: number = 0

Holds the value of the x argument in the last call to .

currentY

currentY: number = 0

Holds the value of the y argument in the last call to .

defaultOpacity

defaultOpacity: number = 20

Specifies the default opacity to be used for the rubberband div. Default is 20.

destroyed

destroyed: boolean = false

div

div: null | HTMLElement = null

Holds the DIV element which is currently visible.

dragHandler

dragHandler: null | ((evt: MouseEvent) => void) = null

dropHandler

dropHandler: null | ((evt: MouseEvent) => void) = null

enabled

enabled: boolean = true

Specifies if events are handled. Default is true.

fadeOut

fadeOut: boolean = false

Optional fade out effect. Default is false.

first

first: null | Point = null

forceRubberbandHandler

forceRubberbandHandler: Function

gestureHandler

gestureHandler: Function

graph

graph: Graph

height

height: number = 0

panHandler

panHandler: Function

sharedDiv

sharedDiv: null | HTMLElement = null

Holds the DIV element which is used to display the rubberband.

width

width: number = 0

x

x: number = 0

y

y: number = 0

`Static`pluginId

pluginId: string = 'RubberBandHandler'

Methods

createShape

createShape(): HTMLElement
Creates the rubberband selection shape.

Returns HTMLElement
- Defined in view/handler/RubberBandHandler.ts:271

execute

execute(evt): void
Resets the state of this handler and selects the current region for the given event.
Parameters
- evt: MouseEvent
Returns void
- Defined in view/handler/RubberBandHandler.ts:313

isActive

isActive(sender?, me?): null | boolean
Returns true if this handler is active.
Parameters
- Optionalsender: EventSource
- Optionalme: InternalMouseEvent
Returns null | boolean
- Defined in view/handler/RubberBandHandler.ts:291

isEnabled

isEnabled(): boolean
Creates the rubberband selection shape.

Returns boolean
- Defined in view/handler/RubberBandHandler.ts:153

isForceRubberbandEvent

isForceRubberbandEvent(me): boolean
Returns true if the given MouseEvent should start rubberband selection. This implementation returns true if the alt key is pressed.
Parameters
- me: InternalMouseEvent
Returns boolean
- Defined in view/handler/RubberBandHandler.ts:169

mouseDown

mouseDown(sender, me): void
Handles the event by initiating a rubberband selection. By consuming the event all subsequent events of the gesture are redirected to this handler.
Parameters
- sender: EventSource
- me: InternalMouseEvent
Returns void
- Defined in view/handler/RubberBandHandler.ts:178

mouseMove

mouseMove(sender, me): void
Handles the event by updating therubberband selection.
Parameters
- sender: EventSource
- me: InternalMouseEvent
Returns void
- Defined in view/handler/RubberBandHandler.ts:241

mouseUp

mouseUp(sender, me): void
Handles the event by selecting the region of the rubberband using Graph#selectRegion.
Parameters
- sender: EventSource
- me: InternalMouseEvent
Returns void
- Defined in view/handler/RubberBandHandler.ts:299

onDestroy

onDestroy(): void
Destroys the handler and all its resources and DOM nodes. This does normally not need to be called, it is called automatically when the window unloads.

Returns void
Implementation of GraphPlugin.onDestroy
- Defined in view/handler/RubberBandHandler.ts:390

repaint

repaint(): void
Computes the bounding box and updates the style of the
.

Returns void
- Defined in view/handler/RubberBandHandler.ts:365

reset

reset(): void
Resets the state of the rubberband selection.

Returns void
- Defined in view/handler/RubberBandHandler.ts:321

setEnabled

setEnabled(enabled): void
Enables or disables event handling. This implementation updates .
Parameters
- enabled: boolean
Returns void
- Defined in view/handler/RubberBandHandler.ts:161

start

start(x, y): void
Creates the rubberband selection shape.
Parameters
- x: number
- y: number
Returns void
- Defined in view/handler/RubberBandHandler.ts:204

update

update(x, y): void
Sets and and calls .
Parameters
- x: number
- y: number
Returns void
- Defined in view/handler/RubberBandHandler.ts:355

Class RubberBandHandler

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns RubberBandHandler

Properties

currentX

currentY

defaultOpacity

destroyed

div

dragHandler

dropHandler

enabled

fadeOut

first

forceRubberbandHandler

gestureHandler

graph

height

panHandler

sharedDiv

width

x

y

StaticpluginId

Methods

createShape

Returns HTMLElement

execute

Parameters

Returns void

isActive

Parameters

Returns null | boolean

isEnabled

Returns boolean

isForceRubberbandEvent

Parameters

Returns boolean

mouseDown

Parameters

Returns void

mouseMove

Parameters

Returns void

mouseUp

Parameters

Returns void

onDestroy

Returns void

repaint

Returns void

reset

Returns void

setEnabled

Parameters

Returns void

start

Parameters

Returns void

update

Parameters

Returns void

Settings

On This Page

`Static`pluginId