documentationfor yFiles for HTML 3.0.0.3

LassoSelectionInputMode

An IInputMode implementation that provides support for lasso selections through mouse or touch gestures.

Inheritance Hierarchy
LassoSelectionInputMode
Implemented Interfaces

Remarks

This implementation will request the mutex as soon as it recognizes a mouse or touch drag.

By default, the lasso is a single freehand gesture. However, both a polyline path and mixed freehand/polyline paths are possible with different configuration.

Per default the visualization of the lasso selection region uses the secondary color of the set theme of CanvasComponent and uses the yfiles-lasso-template CSS class.

This mode is exclusive by default.

Examples

The LassoSelectionInputMode can easily be configured for different gestures, e.g. for a polyline path instead of the default freehand configuration:
const lassoSelectionInputMode =
  graphEditorInputMode.lassoSelectionInputMode
lassoSelectionInputMode.enabled = true
lassoSelectionInputMode.startSegmentRecognizer = EventRecognizers.ALWAYS
lassoSelectionInputMode.endSegmentRecognizer = (evt, sender) =>
  EventRecognizers.MOUSE_LEFT_DOWN(evt, sender) ||
  EventRecognizers.MOUSE_LEFT_UP(evt, sender)
lassoSelectionInputMode.dragSegmentRecognizer = (_, evt) =>
  evt instanceof PointerEventArgs &&
  (evt.pointerType == PointerType.MOUSE ||
    evt.pointerType == PointerType.PEN) &&
  (evt.eventType == PointerEventType.MOVE ||
    evt.eventType == PointerEventType.DRAG)
lassoSelectionInputMode.finishRecognizer =
  EventRecognizers.MOUSE_LEFT_DOUBLE_CLICK
lassoSelectionInputMode.finishRadius = 10

Related Reading in the Developer's Guide

An example of how to style the lasso selection region with CSS is given in CSS Styling of Lasso Selection .

Type Details

yFiles module
view

Constructors

Properties

Methods

Events