Created by Thomas Zimmermann, last modified on Nov 09, 2021

Introduction

Two different callbacks on the graphics are used to control the editing behaviour of Activities. The first maps a mouse event / mouse location to an editing mode. The second callback is used to determine whether a given editing mode or operation can be applied to an activity at all. Most applications will only need to work with the second callback and keep the defaults for the edit mode locations (for example: right edge used to change end time, left edge used to change start time). The enum EditModeEnum lists all available editing operations that can be performed on an Activity. 

ModeDescription
CHART_VALUE_CHANGE
Change the value of a ChartActivity.
CHART_VALUE_HIGH_CHANGE
Change the "high" value of a HighLowActivity.
CHART_VALUE_LOW_CHANGE
Change the "low" value of a HighLowActivity.
DRAGGING
Perform a drag and drop in all directions on an activity.
DRAGGING_HORIZONTAL
Move an activity horizontally within its own row (change start and end time).
DRAGGING_VERTICAL
Perform a drag and drop on an activity in vertical direction only.
END_TIME_CHANGE
Change the end time of an activity.
NONE
Do nothing.
PERCENTAGE_COMPLETE_CHANGE
Change the "percentage complete" value of a CompletableActivity.
START_TIME_CHANGE
Change the start time of an activity.

Edit Mode Callback

The edit mode callback is used to determine the edit mode at the given mouse location. Instances of this callback can be registered via the graphics.setEditModeCallback(Activity, Layout, event => EditModeEnum) method which maps the callback to a combination of Activity Class and Layout Class. The callback function has to return a EditModeEnum value.

Edit Mode Callback Registration
const graphics = this.gantt.getGraphics();
graphics.setEditModeCallback(Flight, GanttLayout, () => EditModeEnum.DRAGGING); // EditMode for all Flights on GanttLayout is DRAGGING.

Edit Mode Callback Parameter

The parameter object passed to the edit mode callback is of type EditModeCallbackParameter and supports the following methods:

FieldDescription
event.getActivityBounds()

The bounds of the activity over which the mouse cursor is hovering. The x and y coordinates are relative to the coordinate space of the row where the activity is displayed.

event.getPointerEvent()
The mouse event that triggered the lookup of the edit mode.

Edit Mode Callback Example

The following is a simple example of an editing mode callback.

model/myEditModeCallback.model.ts
import {EditModeCallbackParameter, EditModeEnum} from "schedule";

export function myEditModeCallback(event: EditModeCallbackParameter): EditModeEnum {

  const pointerEvent = event.getPointerEvent();
  const activityBounds = event.getActivityBounds();

  /*
  ** If the mouse cursor is touching the left edge of the activity
  ** then begin a start time change of the activity.
  */

  if (pointerEvent.offsetX - activityBounds.getMinX() < 5) {
    return EditModeEnum.START_TIME_CHANGE;
  }

  // Else, disallow Editing.
  return EditModeEnum.NONE;
}

This callback can now be registered like this:

import {myEditModeCallback} from "./model/myEditModeCallback.model";
// ...
const graphics = this.gantt.getGraphics();
graphics.setEditModeCallback(Flight, GanttLayout, myEditModeCallback); // Allow start time change for Flights on GanttLayout.

Activity Editing Callback

The editing callback is used to determine if a specific edit mode is currently usable for a given Activity. Instances of this callback can be registered via the GraphicsBase.setActivityEditingCallback(Activity, event => boolean) method which maps the callback to an Activity type. Returning false will disallow the Editing while true will allow it.

Edit Mode Callback Registration
const graphics = this.gantt.getGraphics();
graphics.setActivityEditingCallback(Flight, () => false); // Lock all Editing on Flights.

Activity Editing Callback Parameter

The parameter object passed to the editing callback is of type EditingCallbackParameter and contains the following information:

FieldDescription
event.getActivityRef()

The reference to the activity for which to perform the check.

event.getEditMode()
The edit mode that needs a check.

Activity Editing Callback Example

The following is a simple example of an editing callback.

model/myActivityEditingCallback.model.ts
import {EditingCallbackParameter, EditModeEnum, TimeUtil} from "schedule";

export function myActivityEditingCallback(event: EditingCallbackParameter): boolean {

  const activity = event.getActivityRef().getActivity();
  const editMode = event.getEditMode();

  // Apply to activities that that have not started yet.
  if (activity.getStartTime() > TimeUtil.now()) {
    // Allow changes to the start and end time of the activity.
    if (editMode === EditModeEnum.START_TIME_CHANGE
      || editMode === EditModeEnum.END_TIME_CHANGE) {
      return true;
    }
  }

  // Else, disallow editing.
  return false;
}

This callback can now be registered like this:

import {myActivityEditingCallback} from "./model/myActivityEditingCallback.model";
// ...
const graphics = this.gantt.getGraphics();
graphics.setActivityEditingCallback(Flight, myActivityEditingCallback); // Allow start time change for all future Flights.