3.3.1 - System Layers

Introduction
Available System Layers

Introduction

System Layers are used in the background and foreground of each row. System Layers gets drawn in a specific order to allow full customisation of the viewport. Concerning activities, they are drawn between the BackgroundSystemLayers and the ForegroundSystemLayers while all the TransversalSystemLayers gets drawn below or above other layers. Each layer is specialised on drawing one type of information: current time, selected time intervals, grid lines, and so on. The graphics manages the layers in six lists and provides convenience methods to easily look them up.

Method	Description
getBackgroundSystemLayers(): RowSystemLayer[]	Returns the list of system layers drawn right below the Activities.
getForegroundSystemLayers(): RowSystemLayer[]	Returns the list of system layers drawn right above the Activities.
getBelowViewTransversalSystemLayers(): ViewTransversalSystemLayer[]	Returns the list of system layers drawn below all the other layers.
getAboveViewTransversalSystemLayers(): ViewTransversalSystemLayer[]	Returns the list of system layers drawn above all the other layers.
getBelowRowTransversalSystemLayers(): ViewTransversalSystemLayer[]	Returns the list of system layers drawn right below the BackgroundSystemLayers.
getAboveRowTransversalSystemLayers(): ViewTransversalSystemLayer[]	Returns the list of system layers drawn right above the ForegroundSystemLayers.

Layers can be added / removed from the graphics view by adding / removing them from the corresponding system layers array.

Once you have looked up a layer you can set its properties to customise its appearance. The most common properties are used for line colors and widths.

System Layer Example

const graphics = this.gantt.getGraphics();
const nowLayer = graphics.getAboveViewTransversalSystemLayers().find(it => it instanceof NowLineViewTransversalSystemLayer) as NowLineViewTransversalSystemLayer<Aircraft>;
nowLayer.setStroke(Color.ORANGE);  // Orange line.
nowLayer.setLineWidth(3);          // Thick line.

System Layers vs. Model Layers

Please note that System Layers are not related in any way to Model Layers. A System Layer is basically a renderer for some graphical feedback while a model layer is used for grouping activities.

Available System Layers

The following table lists all system layers that are shipping with ScheduleJS. The last columns (Above View, Above Rows, ForeGround, BackGround, Below Rows, Below View) are used to indicate on which system layer the drawing occurs.

Layer	Description	AV	AR	FG	BG	BR	BV
CalendarLayer	Draws the entries returned by the calendars attached to a row or attached to the entire graphics view. The calendar layer uses pluggable renderers that are mapped to the entry types. Applications can register their own renderers by calling CalendarLayer.setCalendarActivityRenderer().
ChartLinesLayer	Draws the horizontal grid lines for a row if the row or any of its inner lines are using the chart layout.
GridLinesLayer	Draws the vertical grid lines based on the scale resolutions currently present in the dateline. The layer can be configured to display 0 to 3 grid line levels. If the dateline is, for example, showing days and weeks then a level of 2 would cause the layer to draw grid lines for days and weeks, while a grid line level of 1 would only render grid lines for days.
HoverTimeIntervalViewTransversalSystemLayer	Draws the hover time interval specified by the dateline. If the mouse cursor hovers over a week in the dateline then the layer will fill the time interval defined by this week with a highlighting color. Optimised as it doesn't use the drawing engine (carrying row data and more) and so uses less memory.
HoverTimeIntervalLayer	Draws the hover time interval specified by the dateline. If the mouse cursor hovers over a week in the dateline then the layer will fill the time interval defined by this week with a highlighting color. (Allows different timezones for each Row)
InnerLinesLayer	Draws separator lines between inner lines. By default the line width property of this layer is set to 0 and the lines will not be drawn at all. To change this simply set a line width greater than 0.
LayoutLayer	Draws the layout padding areas. Each layout may have some padding added to its top and bottom. This layer fills the padding area with a solid color.
LassoViewTransversalSystemLayer	Draws the lasso selection area.
LinksRowsTransversalSystemLayer	Draws links between activities.
NowLineViewTransversalSystemLayer	Draws a vertical line at the location of the current time / now time. The current time is defined in the timeline model. Optimised as it doesn't use the drawing engine (carrying row data and more) and so uses less memory.
NowLineLayer	Draws a vertical line at the location of the current time / now time. The current time is defined in the timeline model. (Allows different timelines for each Row)
MarkedLineViewTransversalSystemLayer	Draws the marks showing the time interval when dragging an activity.
SelectedTimeIntervalsLayer	Draws the time intervals that were selected by the user (or the application) in the dateline.
ZoomTimeIntervalViewTransversalSystemLayer	Draws the zoom interval as defined by the timeline. The zoom interval gets created by the user via the help of the timeline lasso. Optimised as it doesn't use the drawing engine (carrying row data and more) and so uses less memory.
ZoomTimeIntervalLayer	Draws the zoom interval as defined by the timeline. The zoom interval gets created by the user via the help of the timeline lasso. (Allows different timelines for each Row)

«

3.3.1 - System Layers

Introduction

Available System Layers