Angular 2 and Typescript Math Toolkit – Interactive Graph Marker

If you have followed blog posts on the Typescript Math Toolkit function graphing engine, then you may have seen this screen shot from the engine’s predecessor (the Javascript Math Toolkit).

interp

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.

graphmarker

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!

Comments are closed.