3 - Elements
4 - Model
The graphics element uses the HTML canvas API. This is due to the complex nature of a Gantt chart and due to the large data volumes often observed inside of them. Directly rendering large quantities of activities into a canvas is much faster than constantly updating the DOM and reapplying CSS styling. ScheduleJS implements a pluggable renderer architecture where renderer instances can be mapped to Activity types.
The following code is an example of how to register a custom renderer for a given "Flight" activity type. Please note that the graphics view is capable of displaying activities in different layouts, hence the layout type must also be passed to the method.
We usually also pass the graphics to the renderer at construction time.
The following methods on graphics are used for working with renderers:
graphics.setActivityRenderer(Activity, Layout, Renderer)
Registers a new renderer for the given activity and layout type.
|Returns a renderer for the given activity and layout type.|
Activity renderers have a single entry point for drawing, a method called draw(). This method should not be overridden. Once invoked it will call various protected methods to perform the actual drawing:
Derived classes are free to override any of the three protected methods to customize the activity appearance.
Most drawing methods have the same arguments:
The following table lists the various activity renderers that are provided by default.
The most basic renderer for activities. Draws a filled rectangle at the location of the activity. All default renderers are subclasses of this type.
Draws a bar instead of filling the entire area. The height of the bar can be specified.
Also supports text in several locations inside and outside the bar.
Draws a ChartActivity vertically depending on its chart value.
|Subclass of the bar renderer. Draws a CompletableActivity as a bar with a section of its background filled with another color. The size of the section depends on the percentage complete value of the activity.|
Here is a Flight renderer example:
The text has to be drawn after the rectangle because we are using HTML canvas API to stack things on one another.
Every activity renderer is responsible for returning an instance of ActivityBounds after drawing the activity. These bounds are an essential piece for the framework and many operations will only work properly if these bounds are valid. They are being used for editing activities, for hit point detection, for laying out links, for context menus, and so on. The following table lists the attributes of the ActivityBounds class.
The width of the Activity in pixels.
The height of the Activity in pixels.
The minimal x coordinate of the Activity in pixels based on Layout.
The maximal x coordinate of the Activity in pixels, based on Layout.
The minimal y coordinate of the Activity in pixels, based on Layout.
The maximal y coordinate of the Activity in pixels, based on Layout.
The Activity for which these are the bounds.
The ActivityReference referring to the activity.
The Model Layer on which the activity was drawn.
The Layout that was used when the activity was drawn.
The index of the line on which the activity is located (-1 if activity is on the row, not a line).
The Row where the activity was drawn.
Sets the Layout to use when the activity will be drawn.
All renderers define several properties that can be used to customize their appearance. Many of these properties are dependent on the "pseudo state" of the activity: hover, pressed, selected, highlighted. To make it easier to lookup the right Color at the right time several convenience methods are available:
this.getFill(selected, hover, highlighted, pressed)
Returns the Color to use for the activity background depending on pseudo states passed.
this.getStroke(selected, hover, highlighted, pressed)
Returns the Color to use for the activity border depending on pseudo states passed.
this.getTextFill(selected, hover, highlighted, pressed)
|Returns the Color to use for text depending on pseudo states passed.|