3.3.5 - Activity Rendering

const graphics = this.gantt.getGraphics();
const activityRenderer = new ActivityBarRenderer(graphics, "FlightRenderer");

// Change the Activity bar height.
activityRenderer.setBarHeight(5);

// Register the ActivityRenderer.
graphics.setActivityRenderer(Flight, GanttLayout, activityRenderer);

activityRef: ActivityRef<Activity>     The reference Activity for current drawing.
ctx: CanvasRenderingContext2D 		   The canvas context into which to draw.
x: number 			        		   The location of the start time of the activity.
y: number                     		   The y coordinate (0 when drawn on row or line location).
w: number 					           End time location minus start time location.
h: number 					           Row or line height.
selected: boolean 	       		       Is activity currently selected?
hover: boolean 				           Is mouse cursor currently hovering over it?
highlighted: boolean 		           Is activity currently blinking?
pressed: boolean  		               Is user currently pressing on it?

import {ActivityBarRenderer, ActivityBarRendererTextPosition, ActivityBounds, ActivityRef, Color, ViewPosition} from "schedule";

import {Flight, Aircraft} from "./aircraft.model";

export class FlightRenderer extends ActivityBarRenderer<Flight, Aircraft> {

  constructor(graphics) {
    super(graphics, "Flight activity renderer");
  }

  // Override the drawActivity method.
  protected drawActivity(activityRef: ActivityRef<Flight>, position: ViewPosition, ctx: CanvasRenderingContext2D,x: number, y: number, w: number, h: number, selected: boolean, hover: boolean, highlighted: boolean, pressed: boolean): ActivityBounds {
    const layerName = activityRef.getLayer().getName(); // Get rendered Activity layer name.

    // Use ActivityBarRenderer properties to style the Activity.
    this.setBarHeight(h * 0.75);
    this.setCornersRounded(true);
    this.setStroke(Color.BLACK);

    // Conditional box and text color depending on the Layer.
    if (layerName === "Cargo") {
      this.setFill(Color.CORNFLOWERBLUE);
      this.setTextFill(Color.WHITE);
    }
    else if (layerName === "Training") {
      this.setFill(Color.ALICEBLUE);
      this.setTextFill(Color.BLACK);
    }
    else if (layerName === "Charter") {
      this.setFill(Color.ANTIQUEWHITE);
      this.setTextFill(Color.BLACK);
    }

    // Draw the rectangle and store ActivityBounds.
    const bounds = super.drawActivity(activityRef, position, ctx, x, y, w, h, selected, hover, highlighted, pressed);

    // Then draw the text.
    ctx.font = "italic 11px Verdana";
    this.drawText(activityRef, layerName, ActivityBarRendererTextPosition.CENTER, ctx, x, y, w, h, selected, hover, highlighted, pressed);

    // This method has to return the ActivityBounds.
    return bounds;
  }

}