Angular 2 and Typescript Math Toolkit – Interactive Graph Marker
The red circular sprites are draggable and may be placed at user or graph coordinates. These are called graph markers. As a marker is moved, a low-degree interpolating polynomial is fit to the four points represented by each marker and the graph is updated.
The GraphMarker has been ported to the Typescript Math Toolkit and a new demo is available that shows how the marker may be used in a standalone context outside of a function graph. The TSMT$Axis class is a computational helper that represents an axis range. This class handles canvas to user-space conversions, updates axis extents on zoom/pan, and computes tic-mark locations/values.
The TSMT$GraphMarker class is written on top of EaselJS, which is used as the Canvas engine for the TSMT function graphing engine. A factory method accepts a Stage reference and axis information for the horizontal and vertical extents of the Canvas boundary in graph coordinates.
The TSMT$Axis class accepts a low-level callback function that is executed whenever an axis min or max value is altered. The TSMT$GraphMarker assigns a handler that allows the graph marker (sprite) to be quickly repositioned in the event of graph zoom and pan operations, for example.
An Angular 2 demo provides an interactive testbed for the graph marker in addition to illustrating how to use the marker in a standalone context, outside of the function graphing engine. Axis instances are still used to set horizontal and vertical boundaries of the Canvas in user coordinates, i.e. (-5,5) horizontally and (-4,4) vertically.
In this case, the top-left corner of the 400×400 Canvas is assigned the point (-5,4) and the bottom-right corresponds to (5,-4). The graph marker may be dragged and the marker-x and marker-y coordinates are automatically updated in the demo. The axis-change handler can be illustrated by clicking the ‘Zoom’ button, which toggles between (-5,5)/(-4,4) and (-10,10)/(-8,8) for the horizontal/vertical axis extents.
This may, of course, cause the marker to become invisible when moving it too close to a boundary at the (-10,10)/(-8,8) zoom level and then zooming in to (-5,5)/(-4,4).
A custom Canvas-selector Directive is used to select the Canvas in the main component Template. The Directive also provides methods to query Canvas width and height as well as create a Stage reference. These are common operations involving EaselJS, so offloading them to a reusable Directive keeps Template markup cleaner and reduces code in the main component.
The demo also illustrates how to incorporate third-party packages such as Bootstrap 4 and EaselJS into the latest (beta 16 – Webpack) Angular 2 CLI.
Here is the Github repo – deconstruct the code at your convenience and have fun!