3.3.3 - Event Handling

Introduction
Activity Events
Activity Events Hierarchy
Activity Event Properties
Lasso Events

Introduction

The graphics fires standard events in order to let applications react to change. The concepts used for event handler support in ScheduleJS are the same as the ones found in standard Angular.

Activity Events

Activity events are fired whenever the user deletes or edits an activity. To receive an activity event simply subscribe to an observable with graphics via the subscribe method.

The subscribe method is inherited from base components like DefaultScheduleGanttComponentBase or TransactionalAbstractComponent

Single Activity Event Handler

const graphics = this.gantt.getGraphics();
this.subscribe(graphics.getActivityEventsObs(), (next) => console.log("An activity has changed. Logging event : ", next));

If you need to register more than one handler for a specific event type then use this approach:

Multiple Activity Event Handlers

this.subscribe(graphics.getActivityEventsObs(), () => console.log("Logging handler #1"));
this.subscribe(graphics.getActivityEventsObs(), () => console.log("Logging handler #2"));

The following table lists all supported activity event types and the convenience setter methods of the graphics. These methods are used to quickly register an event handler for the given event type.

Event Types	Methods	Description
ACTIVITY_DELETED	graphics.setOnActivityDeleted(callback)	Fired whenever the user deletes an activity via the backspace key.
ACTIVITY_CHANGE	graphics.setOnActivityChanged(callback)	The parent event type of all activity changes. Can be used to to receive a notification for any kind of activity change.
ACTIVITY_CHANGE_STARTED ACTIVITY_CHANGE_ONGOING ACTIVITY_CHANGE_FINISHED	graphics.setOnActivityChangeStarted(callback) graphics.setOnActivityChangeOngoing(callback) graphics.setOnActivityChangeFinished(callback)	Fired whenever an activity change has started, is ongoing, or has finished.
CHART_HIGH_VALUE_CHANGE_STARTED CHART_HIGH_VALUE_CHANGE_ONGOING CHART_HIGH_VALUE_CHANGE_FINISHED	graphics.setOnActivityChartHighValueChangeStarted(callback) graphics.setOnActivityChartHighValueChangeOngoing(callback) graphics.setOnActivityChartHighValueChangeFinished(callback)	Fired whenever the user has started editing, is in the process of editing, or has finished editing the "high" value of a high / low chart activity.
CHART_LOW_VALUE_CHANGE_STARTED CHART_LOW_VALUE_CHANGE_ONGOING CHART_LOW_VALUE_CHANGE_FINISHED	graphics.setOnActivityChartLowValueChangeStarted(callback) graphics.setOnActivityChartLowValueChangeOngoing(callback) graphics.setOnActivityChartLowValueChangeFinished(callback)	Fired whenever the user has started editing, is in the process of editing, or has finished editing the "low" value of a high / low chart activity.
CHART_VALUE_CHANGE_STARTED CHART_VALUE_CHANGE_ONGOING CHART_VALUE_CHANGE_FINISHED	graphics.setOnActivityChartValueChangeStarted(callback) graphics.setOnActivityChartValueChangeOngoing(callback) graphics.setOnActivityChartValueChangeFinished(callback)	Fired whenever the user has started editing, is in the process of editing, or has finished editing a chart value of a chart activity.
DRAG_STARTED DRAG_ONGOING DRAG_FINISHED	graphics.setOnActivityDragStarted(callback) graphics.setOnActivityDragOngoing(callback) graphics.setOnActivityDragFinished(callback)	Fired whenever the user has started dragging, is in the process of dragging, or has finished dragging an activity via drag & drop. This event type is used when the user can freely move the activity around, vertically and horizontally.
END_TIME_CHANGE_STARTED END_TIME_CHANGE_ONGOING END_TIME_CHANGE_FINISHED	graphics.setOnActivityEndTimeChangeStarted(callback) graphics.setOnActivityEndTimeChangeOngoing(callback) graphics.setOnActivityEndTimeChangeFinished(callback)	Fired whenever the user has started changing, is in the process of changing, or has finished changing the end time of an activity.
HORIZONTAL_DRAG_STARTED HORIZONTAL_DRAG_ONGOING HORIZONTAL_DRAG_FINISHED	graphics.setOnActivityHorizontalDragStarted(callback) graphics.setOnActivityHorizontalDragOngoing(callback) graphics.setOnActivityHorizontalDragFinished(callback)	Fired whenever the user has started changing, is in the process of changing, or has finished changing the time interval (start and end time) of an activity. Changing this time interval makes the activity move horizontally, either to the right (future) or the left (past).
PERCENTAGE_CHANGE_STARTED PERCENTAGE_CHANGE_ONGOING PERCENTAGE_CHANGE_FINISHED	graphics.setOnActivityPercentageChangeStarted(callback) graphics.setOnActivityPercentageChangeOngoing(callback) graphics.setOnActivityPercentageChangeFinished(callback)	Fired whenever the user has started changing, is in the process of changing, or has finished changing the "percentage complete" value of an activity.
START_TIME_CHANGE_STARTED START_TIME_CHANGE_ONGOING START_TIME_CHANGE_FINISHED	graphics.setOnActivityStartTimeChangeStarted(callback) graphics.setOnActivityStartTimeChangeOngoing(callback) graphics.setOnActivityStartTimeChangeFinished(callback)	Fired whenever the user has started changing, is in the process of changing, or has finished changing the start time of an activity.
VERTICAL_DRAG_STARTED VERTICAL_DRAG_ONGOING VERTICAL_DRAG_FINISHED	graphics.setOnActivityVerticalDragStarted(callback) graphics.setOnActivityVerticalDragOngoing(callback) graphics.setOnActivityVerticalDragFinished(callback)	Fired whenever the user has started dragging, is in the process of dragging, or has finished dragging an activity via platform-provided drag & drop. This event type is used when the user can only drag the activity vertically (reassign an activity to a different row).

Activity Events Hierarchy

The event types defined in the ActivityEvent class are defining an event hierarchy. All events are input events (InputEvent.ANY) and they change the activity. Some of them get fired when the user starts the change, some while the change is ongoing, and some when the change is finished.

ACTIVITY_CHANGE

```
ACTIVITY_DELETED
```

ACTIVITY_CHANGE_STARTED // All event types that signals "start"

CHART_VALUE_CHANGE_STARTED

```
CHART_HIGH_VALUE_CHANGE_STARTED
```
```
CHART_LOW_VALUE_CHANGE_STARTED
```

```
DRAG_STARTED
```
```
END_TIME_CHANGE_STARTED
```
```
HORIZONTAL_DRAG_STARTED
```
```
PERCENTAGE_CHANGE_STARTED
```
```
START_TIME_CHANGE_STARTED
```
```
VERTICAL_DRAG_STARTED
```

ACTIVITY_CHANGE_ONGOING // All event types that signals "ongoing"

CHART_VALUE_CHANGE_ONGOING

```
CHART_HIGH_VALUE_CHANGE_ONGOING
```
```
CHART_LOW_VALUE_CHANGE_ONGOING
```

```
DRAG_ONGOING
```
```
END_TIME_CHANGE_ONGOING
```
```
HORIZONTAL_DRAG_ONGOING
```
```
PERCENTAGE_CHANGE_ONGOING
```
```
START_TIME_CHANGE_ONGOING
```
```
VERTICAL_DRAG_ONGOING
```

ACTIVITY_CHANGE_FINISHED // All event types that signals "finished"

CHART_VALUE_CHANGE_FINISHED

```
CHART_HIGH_VALUE_CHANGE_FINISHED
```
```
CHART_LOW_VALUE_CHANGE_FINISHED
```

```
DRAG_FINISHED
```
```
END_TIME_CHANGE_FINISHED
```
```
HORIZONTAL_DRAG_FINISHED
```
```
PERCENTAGE_CHANGE_FINISHED
```
```
START_TIME_CHANGE_FINISHED
```
```
VERTICAL_DRAG_FINISHED
```

Activity Event Properties

Applications are obviously interested in the attributes of an Activity. Not only the new values of these attributes (for example the new start time) but also the old values (start time before the change). The new values are already available on the activity as they are being set while the user performs the change. The old values are stored on the event object. The following table lists the methods on ActivityEvent to retrieve these values.

const graphics = this.gantt.getGraphics();
this.subscribe(graphics.getActivityEventsObs(), (event) => console.log(event.getOldTimeInterval()));

The different old values are filled in according to the type of actions.

Method	Description	Event Types
event.getOldTime()	Returns the old start or end time of the activity.	END_TIME_CHANGE_ START_TIME_CHANGE_
event.getOldTimeInterval()	Returns the old start and end time of the activity.	DRAG_ HORIZONTAL_DRAG_ VERTICAL_DRAG_
event.getOldRow()	Returns the old row where the activity was located before.	DRAG_ VERTICAL_DRAG_
event.getOldValue()	Returns the old value of "percentage complete" or "chart value".	CHART_VALUE_CHANGE_ CHART_HIGH_VALUE_ CHART_LOW_VALUE_ PERCENTAGE_CHANGE_

Lasso Events

The user can use a lasso to select activities by pressing the ALT key. Events are fired when this happens. To receive a lasso event simply register an event handler on graphics via one of the convenience methods.

Singe Lasso Event Handler

const graphics = this.gantt.getGraphics();
graphics.setOnLassoSelectionFinished(event => console.log("The lasso was used. Event = ", event));

The following table lists the event types and the convenience setter methods of graphics.

Event Type	Method	Description
ALL	graphics.setOnLassoSelection()	Any lasso operation (start, ongoing, finished).
SELECTION_STARTED	graphics.setOnLassoSelectionStarted()	The user has pressed the mouse button and started a drag. The lasso has become visible.
SELECTION_ONGOING	graphics.setOnLassoSelectionOngoing()	The user is changing the size of the lasso.
SELECTION_FINISHED	graphics.setOnLassoSelectionFinished()	The user has finished the lasso selection. The lasso is no longer visible.

Lasso Info

The lasso automatically performs selections of activities but sometimes we might want to know more about the exact nature of this selection or we want to use the lasso for another use case (e.g. for creating new activities). For this reason instances of LassoEvent also provide an object of type LassoInfo, which carries many attributes that the application can use to react accordingly. The lasso information can be retrieved by calling event.getInfo(). The following table lists the attributes of LassoInfo.

Get LassoEvent info

const graphics = this.gantt.getGraphics();
graphics.setOnLassoSelection((event) => console.log(event.getInfo().getActivities()));

You can subscribe multiple callbacks to the lasso using the Angular Observable in any TrasactionalAbstractComponent (with DefaultScheduleGanttComponentBase for example) like this:

const graphics = this.gantt.getGraphics();
const callback = (event) => {console.log(event)};
this.subscribe(graphics.getLassoEventsObs(), callback);

Method	Description
event.getInfo().getActivities()	Returns all activities that were selected by the lasso.
event.getInfo().getStartTime() event.getInfo().getEndTime()	Returns the start and end time of the lasso according to the location of the left and right edge of the lasso.
event.getInfo().getRows() event.getInfo().getCurrentRow()	Returns the rows that were touched by the lasso. Returns the current row pointed by the mouse.
event.getInfo().getPointerEvent()	Returns the pointer event.