plotboilerplate 1.21.0 → 1.23.0

package/src/ts/utils/datastructures/Color.ts

@@ -17,7 +17,8 @@
  * @modified 2022-05-11 Modified the `clone` function by just copying the numeric calues, not re-calculating the whole color.
  * @modified 2022-05-11 Fixed the `interpolate` function.
  * @modified 2023-01-23 Added `Color.set(Color)` function to set all values (r,g,b,h,s,l,a) simultanoeusly.
- * @version 0.0.12
+ * @modified 2024-03-10 Fixed some NaN type check for Typescript 5 compatibility.
+ * @version 0.0.13
  **/
 
 /**
@@ -331,7 +332,8 @@ export class Color {
   //     return this;
   //   }
   saturate(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
       this.s += (1 - this.s) * (v / 100);
     } else if ("number" == typeof v) {
       if (v >= -0.0 && v <= 1.0) {
@@ -350,7 +352,8 @@ export class Color {
     return this;
   }
   desaturate(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
       this.s -= v / 100;
     } else if ("number" == typeof v) {
       if (v >= 0.0 && v <= 1.0) {
@@ -388,7 +391,9 @@ export class Color {
   //     return this;
   //   }
   lighten(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
+
       this.l += (1 - this.l) * (v / 100);
     } else if ("number" == typeof v) {
       if (v >= 0.0 && v <= 1.0) {
@@ -407,7 +412,8 @@ export class Color {
     return this;
   }
   darken(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
       this.l -= this.l * (v / 100);
     } else if ("number" == typeof v) {
       if (v >= 0.0 && v <= 1.0) {
@@ -426,7 +432,8 @@ export class Color {
     return this;
   }
   fadein(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
       this.a += (1 - this.a) * (v / 100);
     } else if ("number" == typeof v) {
       if (v >= 0.0 && v <= 1.0) {
@@ -446,7 +453,8 @@ export class Color {
     return this;
   }
   fadeout(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) {
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
       this.a -= v / 100;
     } else if ("number" == typeof v) {
       if (v >= 0.0 && v <= 1.0) {
@@ -465,11 +473,13 @@ export class Color {
     return this;
   }
   spin(v: string | number): Color {
-    if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) this.h += v / 100;
-    else if ("number" == typeof v)
+    // if ("string" == typeof v && v.indexOf("%") > -1 && (v = parseInt(v)) != NaN) this.h += v / 100;
+    if ("string" == typeof v && v.indexOf("%") > -1 && !Number.isNaN(v = parseInt(v))) {
+      this.h += v / 100;
+    } else if ("number" == typeof v) {
       // range 360
       this.h += v / 360;
-    else throw new Error("error: bad modifier format (percent or number)");
+    } else throw new Error("error: bad modifier format (percent or number)");
     if (this.h > 1) this.h = 1;
     else if (this.h < 0) this.h = 0;
     Color.Converter.HSLToRGB(this);
@@ -579,11 +589,16 @@ export class Color {
       for (var i = 0; i < arguments.length; i++) {
         var c = arguments[i];
         if ("string" == typeof c && c.indexOf("%") > -1) {
-          if ((c = parseInt(c)) == NaN) throw new Error("Bad format");
+          // if ((c = parseInt(c)) == NaN) throw new Error("Bad format");
+          if (Number.isNaN(c = parseInt(c))) { 
+            throw new Error("Bad format");
+          }
           if (c < 0 || c > 100) throw new Error("Bad format");
           o[i] = c / 100;
         } else {
-          if ("string" == typeof c && (c = parseInt(c)) == NaN) {
+          // if ("string" == typeof c && (c = parseInt(c)) == NaN) {
+          if ("string" == typeof c && Number.isNaN(c = parseInt(c))) {
+
             throw new Error("Bad format");
           }
           if (c < 0) {
@@ -610,16 +625,25 @@ export class Color {
       var h = arguments[0],
         s = arguments[1],
         l = arguments[2];
-      if ("string" == typeof h && (h = parseFloat(h)) == NaN) throw new Error("Bad format for hue");
+      // if ("string" == typeof h && (h = parseFloat(h)) == NaN) throw new Error("Bad format for hue");
+      if ("string" == typeof h && Number.isNaN(h = parseFloat(h))) { 
+        throw new Error("Bad format for hue"); 
+      }
       if (h < 0 || h > 360) throw new Error("Hue out of range (0..360)");
       else if ((("" + h).indexOf(".") > -1 && h > 1) || ("" + h).indexOf(".") == -1) h /= 360;
       if ("string" == typeof s && s.indexOf("%") > -1) {
-        if ((s = parseInt(s)) == NaN) throw new Error("Bad format for saturation");
+        // if ((s = parseInt(s)) == NaN) throw new Error("Bad format for saturation");
+        if (Number.isNaN(s = parseInt(s))) {
+          throw new Error("Bad format for saturation");
+        }
         if (s < 0 || s > 100) throw new Error("Bad format for saturation");
         s /= 100;
       } else if (s < 0 || s > 1) throw new Error("Bad format for saturation");
       if ("string" == typeof l && l.indexOf("%") > -1) {
-        if ((l = parseInt(l)) == NaN) throw new Error("Bad format for lightness");
+        // if ((l = parseInt(l)) == NaN) throw new Error("Bad format for lightness");
+        if (Number.isNaN(l = parseInt(l))) {
+          throw new Error("Bad format for lightness");
+        }
         if (l < 0 || l > 100) throw new Error("Bad format for lightness");
         l /= 100;
       } else if (l < 0 || l > 1) throw new Error("Bad format for lightness");

package/src/ts/utils/datastructures/DataGrid2d.ts

@@ -0,0 +1,54 @@
+/**
+ * A 2D datagrid interface for getting/storing data in some 2 dimensional array style types.
+ *
+ *  _|---- xIndex --->
+ *  |       d[0][0], d[1][0], d[2][0], ..., d[xSegmentCount-1][0]
+ *  yIndex
+ *  |       d[0][1], d[1][1], d[2][1], ..., d[xSegmentCount-1][1]
+ *  |
+ *  v       ...
+ *
+ *          d[0][ySegmentCount-1], ..., ..., d[xSegmentCount-1][ySegmentCount-1]
+ *
+ *
+ * @date    2023-11-04
+ * @author  Ikaros Kappler
+ * @version 1.0.0
+ */
+
+export type DataGridFace4<T> = [[T | null, T | null], [T | null, T | null]];
+
+export interface IDataGrid2d<T> {
+  readonly xSegmentCount: number;
+
+  readonly ySegmentCount: number;
+
+  getMinDataValue(): T;
+
+  getMaxDataValue(): T;
+
+  getDataValueAt(xIndex: number, yIndex: number): T | null;
+
+  /**
+   * Extract a 2x2 matrix (a "face4") from the underlyting data.
+   *
+   * Imagine a face4 element like this
+   *     (x,y)       (x+1,y)
+   *          A-----B
+   *          |     |
+   *          |     |
+   *          D-----C
+   *   (x,y+1)        (x+1,y+1)
+   *
+   * then result in the buffer will be
+   *   [ [A,B],
+   *     [D,C] ]
+   *
+   * If any index is invalid then the resulting buffer element will be null.
+   *
+   * @param {number} xIndex - The x index in `0 <= xIndex < xSegmentCount`.
+   * @param {number} yIndex - The y index in `0 <= yIndex < ySegmentCount`.
+   * @param {[[T,T],[T,T]]} buffer - The result buffer for four elements.
+   */
+  getDataFace4At(xIndex: number, yIndex: number, buffer: DataGridFace4<T>): void;
+}

package/src/ts/utils/datastructures/DataGrid2dListAdapter.ts

@@ -0,0 +1,121 @@
+/**
+ * A DataGrid2d implementation on a linear array of triplets/Vector3.
+ *
+ * @author   Ikaros Kappler
+ * @date     2023-10-28
+ * @modified 2023-11-04 Converted to a Typescript class.
+ * @version  1.0.0
+ **/
+
+import { DataGridFace4, IDataGrid2d } from "./DataGrid2d";
+
+type Triplet<T> = {
+  x: T;
+  y: T;
+  z: T;
+};
+
+type RasterPosition = {
+  xIndex: number;
+  yIndex: number;
+  xRel?: number;
+  yRel?: number;
+};
+
+export class DataGrid2dListAdapter<T> implements IDataGrid2d<T> {
+  /**
+   * @override
+   */
+  readonly xSegmentCount: number;
+
+  /**
+   * @override
+   */
+  readonly ySegmentCount: number;
+
+  minDataValue: T;
+  maxDataValue: T;
+  minXValue: T;
+  maxXValue: T;
+  minYValue: T;
+  maxYValue: T;
+  private _dataList: Array<Triplet<T>>;
+
+  /**
+   * Create a new DataGrid2d from the given
+   * @throws Error if xSegmentCount*ySegmentCount is larger than the capacity of the array/list.
+   * @param list
+   * @param xSegmentCount
+   * @param ySegmentCount
+   */
+  constructor(list: Array<Triplet<T>>, xSegmentCount: number, ySegmentCount: number) {
+    if (xSegmentCount * ySegmentCount > list.length) {
+      throw `Cannot create DataGrid2dListAdapter, the list (length ${list.length}) does not provide enough items for ${xSegmentCount}x${ySegmentCount} required entries.`;
+    }
+
+    // this.canvas = document.getElementById(canvasId);
+    this.xSegmentCount = xSegmentCount;
+    this.ySegmentCount = ySegmentCount;
+
+    this._dataList = list;
+  }
+
+  getIndicesFromBufferIndex(bufferIndex: number): RasterPosition {
+    return { xIndex: Math.floor(bufferIndex % this.xSegmentCount), yIndex: Math.floor(bufferIndex / this.xSegmentCount) };
+  }
+
+  getCoordsFromBufferIndex(bufferIndex: number): RasterPosition {
+    var index = this.getIndicesFromBufferIndex(bufferIndex);
+    // Note that the xSegmentCount and ySegmentCount counts plane squares, each consisting of four vertices
+    index.xRel = index.xIndex / (this.xSegmentCount - 1);
+    index.yRel = index.yIndex / (this.ySegmentCount - 1);
+    return index;
+  }
+
+  coordinateIndicesToBufferIndex(xIndex: number, yIndex: number): number {
+    return yIndex * this.xSegmentCount + xIndex;
+  }
+
+  /**
+   * @override
+   */
+  getMinDataValue(): T {
+    return this.minDataValue;
+  }
+
+  /**
+   * @override
+   */
+  getMaxDataValue(): T {
+    return this.maxDataValue;
+  }
+
+  /**
+   * @override
+   */
+  getDataValueAt(xIndex: number, yIndex: number, isDebug?: boolean): T | null {
+    // var bufferIndex = yIndex * this.xSegmentCount + xIndex;
+    var bufferIndex = this.coordinateIndicesToBufferIndex(xIndex, yIndex);
+    if (isDebug) {
+      console.log("xIndex", xIndex, "yIndex", yIndex, "bufferIndex", bufferIndex);
+    }
+    if (bufferIndex > this._dataList.length) {
+      console.error("ERR buffer index is out of bounds! xIndex", xIndex, "yIndex", yIndex, "bufferIndex", bufferIndex);
+    }
+    if (!this._dataList[bufferIndex]) {
+      console.error("ERR buffer element is null! xIndex", xIndex, "yIndex", yIndex, "bufferIndex", bufferIndex);
+    }
+    return this._dataList && bufferIndex < this._dataList.length ? this._dataList[bufferIndex].z : null;
+  }
+
+  /**
+   * @override
+   */
+  getDataFace4At(xIndex: number, yIndex: number, buffer: DataGridFace4<T>) {
+    // buffer: array[2][2]
+    buffer[0][0] = this.getDataValueAt(xIndex, yIndex);
+    buffer[1][0] = this.getDataValueAt(xIndex + 1, yIndex);
+    buffer[1][1] = this.getDataValueAt(xIndex + 1, yIndex + 1);
+    buffer[0][1] = this.getDataValueAt(xIndex, yIndex + 1);
+  }
+}

package/src/ts/utils/datastructures/GenericPath.ts

@@ -1,7 +1,8 @@
 /**
- * @author  Ikaros Kappler
- * @version 1.0.0
- * @date    2022-10-17
+ * @author   Ikaros Kappler
+ * @version  1.1.0
+ * @date     2022-10-17
+ * @modified 2023-11-27 Added the `GenericPath.getAllStartEndPoints()` function.
  */
 
 import { Path, PathSegment } from "../../interfaces/additionals";
@@ -110,4 +111,21 @@ export class GenericPath implements Path {
   getEndTangent(): Vertex {
     return this.segments[this.segments.length - 1].getEndTangent();
   }
+
+  /**
+   * Get the sequence of all start/end points of this path.
+   * Assumption is: each path segment's end point is located on the next segment's start point
+   * to shape a full connected path.
+   *
+   * No arcs are considered here, just plain linear segments.
+   *
+   * @returns {Array<Vertex>}
+   */
+  getAllStartEndPoints(): Array<Vertex> {
+    const verts: Array<Vertex> = [this.segments[0].getStartPoint()];
+    this.segments.forEach((segment: PathSegment) => {
+      verts.push(segment.getEndPoint());
+    });
+    return verts;
+  }
 }

package/src/ts/utils/datastructures/Girih.ts

@@ -2,7 +2,8 @@
  * @author   Ikaros Kappler
  * @date     2020-11-24
  * @modified 2020-11-25 Ported to TypeScript from vanilla JS.
- * @version  1.0.1
+ * @modified 2024-03-10 Fixed some types for Typescript 5 compatibility.
+ * @version  1.0.2
  * @file     Girih
  **/
 
@@ -100,11 +101,11 @@ export class Girih {
 
     // Add tiles to array and put them in the correct adjacency position.
     this.TILE_TEMPLATES.push(decagon);
-    this.TILE_TEMPLATES.push(decagon.transformTilePositionToAdjacency(2, pentagon));
-    this.TILE_TEMPLATES.push(pentagon.transformTilePositionToAdjacency(1, penrose));
-    this.TILE_TEMPLATES.push(penrose.transformTilePositionToAdjacency(3, hexagon));
-    this.TILE_TEMPLATES.push(decagon.transformTilePositionToAdjacency(5, bowtie));
-    this.TILE_TEMPLATES.push(pentagon.transformTilePositionToAdjacency(4, rhombus));
+    this.TILE_TEMPLATES.push(decagon.transformTilePositionToAdjacency(2, pentagon) as any as GirihTile);
+    this.TILE_TEMPLATES.push(pentagon.transformTilePositionToAdjacency(1, penrose) as any as GirihTile);
+    this.TILE_TEMPLATES.push(penrose.transformTilePositionToAdjacency(3, hexagon) as any as GirihTile);
+    this.TILE_TEMPLATES.push(decagon.transformTilePositionToAdjacency(5, bowtie) as any as GirihTile);
+    this.TILE_TEMPLATES.push(pentagon.transformTilePositionToAdjacency(4, rhombus) as any as GirihTile);
   }
 
   /**
@@ -137,7 +138,7 @@ export class Girih {
    *
    * @param tiles
    */
-  replaceTiles(tiles: GirihTile): void {
+  replaceTiles(tiles: GirihTile[]): void {
     this.tiles.splice(0, this.tiles.length);
     for (var i in tiles) {
       this.addTile(tiles[i]);
@@ -218,7 +219,7 @@ export class Girih {
       // TODO: still required?
       return [];
 
-    let template: GirihTile = null;
+    let template: GirihTile | null = null;
     for (var i in this.TILE_TEMPLATES) {
       template = this.TILE_TEMPLATES[i].clone();
       // Find all rotations and positions for that tile to match

package/src/ts/utils/gup.ts

@@ -1,6 +1,14 @@
 /**
+ * `gup` = "Get URL/URI Params".
+ *
+ * This function simply taktes the location string from the broser bar and retrieves all GET params
+ * as a record of string mappings.
+ *
+ * You can pass that result into the `Params` class to get proper type conversion for numbers and booleans.
+ *
  * Ported to typescript.
  * @date 2021-05-21
+ * @modified 2024-03-10 Fixed some type for Typescript 5 compatibility.
  */
 
 // Get the URI GET params as an assoc.
@@ -9,9 +17,9 @@
 // Found at
 //    https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
 export const gup = (): Record<string, string> => {
-  const vars = {};
+  const vars: Record<string, string> = {};
   globalThis.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (_m: string, key: string, value: string): string => {
-    return (vars[key] = value);
+    return (vars[key as keyof Object] = value);
   });
   return vars;
 };

package/src/ts/utils/helpers/BezierPathInteractionHelper.ts

@@ -21,7 +21,8 @@
  * @modified 2021-01-03 Added following new functions: `addPathVertexDragStartListeners`, `removePathVertexDragStartListeners`, `addPathVertexDragEndListeners` and `removePathVertexDragEndListeners`.
  * @modified 2021-03-31 Fixed the issue with the new AlloyFinger (Typescript).
  * @modified 2022-02-03 Changing the element to catch events (eventCatcher instead of canvas).
- * @version  1.1.2
+ * @modified 2024-03-10 Fixing some types for Typescript 5 compatibility.
+ * @version  1.1.3
  *
  * @file BezierPathInteractionHelper
  * @public
@@ -44,7 +45,7 @@ import { XYCoords } from "../../interfaces";
 /**
  * Handler type for mouse-pointer-moved listeners.
  */
-type OnPointerMoved = (pathIndex: number, pathPoint: Vertex, pointerPos: Vertex, t: number) => void;
+type OnPointerMoved = (pathIndex: number, pathPoint: Vertex | null, pointerPos: Vertex | null, t: number) => void;
 /**
  * Handler type for vertex-inserted listeners.
  */
@@ -152,7 +153,7 @@ export class BezierPathInteractionHelper {
     this.pb = pb;
     this.paths = [];
     this.onPointerMoved =
-      typeof options.onPointerMoved === "function" ? options.onPointerMoved : (i: number, a: Vertex, b: Vertex, t: number) => {};
+      typeof options.onPointerMoved === "function" ? options.onPointerMoved : (i: number, a: Vertex | null, b: Vertex | null, t: number) => {};
     this.onVertexInserted =
       typeof options.onVertexInserted === "function"
         ? options.onVertexInserted
@@ -451,8 +452,8 @@ export class BezierPathInteractionHelper {
         _self._clearMoveEvent();
       }
     };
-    if (window["createAlloyFinger"]) {
-      return window["createAlloyFinger"](this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher, afProps);
+    if (window["createAlloyFinger" as keyof Object]) {
+      return (window["createAlloyFinger" as keyof Object] as any)(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher, afProps);
     } else {
       return new AlloyFinger(this.pb.eventCatcher ? this.pb.eventCatcher : this.pb.eventCatcher, afProps);
     }
@@ -469,11 +470,11 @@ export class BezierPathInteractionHelper {
         if (_self._keyHandler.isDown("shift")) return;
         if (_self.currentDistance > _self.maxDetectDistance || !_self.mouseIsOver) return;
         const path: BezierPath = _self.paths[_self.currentPathIndex];
-        const vertex: Vertex = _self.pb.getVertexNear(e.params.pos, PlotBoilerplate.DEFAULT_CLICK_TOLERANCE);
+        const vertex: Vertex | undefined = _self.pb.getVertexNear(e.params.pos, PlotBoilerplate.DEFAULT_CLICK_TOLERANCE);
         if (vertex) return;
         // Check if there is already a path point at the given split position
         const pathPoint: Vertex = path.getPointAt(_self.currentT);
-        const pointNear: Vertex = _self.pb.getVertexNear(_self.pb.revertMousePosition(pathPoint.x, pathPoint.y), 6.0);
+        const pointNear: Vertex | undefined = _self.pb.getVertexNear(_self.pb.revertMousePosition(pathPoint.x, pathPoint.y), 6.0);
         if (pointNear) {
           for (var i = 0; i < path.bezierCurves.length; i++) {
             if (
@@ -556,7 +557,7 @@ export class BezierPathInteractionHelper {
     this.currentT = closestT;
     this.currentPathIndex = pathIndex;
     this.currentDistance = minDist;
-    this.currentA.set(closestPoint);
+    closestPoint && this.currentA.set(closestPoint);
   }
 
   // +---------------------------------------------------------------------------------

package/src/ts/utils/helpers/CircleHelper.ts

@@ -7,37 +7,85 @@
  * @date     2020-09-07
  * @modified 2020-10-18 Ported to Typescript from vanilla JS.
  * @modified 2021-01-22 Removed `pb.redraw()` call from update handlers (changed vertices already triggered redraw).
- * @version  1.0.1
+ * @modified 2024-02-26 Removed the constructor param `pb` (unused).
+ * @modified 2024-02-25 Added `circle` and `radiusPoint` attributes.
+ * @modified 2024-03-10 Fixed some issues in the `destroy` method; listeners were not properly removed.
+ * @version  1.2.1
  **/
 
 import { Circle } from "../../Circle";
-import { PlotBoilerplate } from "../../PlotBoilerplate";
-import { VertEvent } from "../../VertexListeners";
+import { VertEvent, VertListener } from "../../VertexListeners";
 import { Vertex } from "../../Vertex";
 
-
 /**
  * @classdesc A helper for handling circles with an additional radius-control-point.
  */
 export class CircleHelper {
+  circle: Circle;
+  radiusPoint: Vertex;
+
+  private centerHandler: VertListener;
+  private radiusHandler: VertListener;
+
+  /**
+   * The constructor.
+   *
+   * @constructor
+   * @name CircleHelper
+   * @param {Circle} circle - The circle to handle.
+   * @param {Vertex} radiusPoint - A point to define the radius (distance from center).
+   * @param {PlotBoilerplate} pb - The PlotBoilerplate which contains the circle and point.
+   **/
+  constructor(circle: Circle, radiusPoint: Vertex) {
+    this.circle = circle;
+    this.radiusPoint = radiusPoint;
+
+    circle.center.listeners.addDragListener( this.centerHandler = this._handleDragCenter());
+    radiusPoint.listeners.addDragListener(this.radiusHandler = this._handleDragRadiusPoint());
+  }
+
+  /**
+   * Destroy this circle helper.
+   * The listeners will be removed from the circle points.
+   *
+   * @method destroy
+   * @instance
+   * @memberof CircleHelper
+   */
+  destroy() {
+    this.circle.center.listeners.removeDragListener(this.centerHandler);
+    this.radiusPoint.listeners.removeDragListener(this.radiusHandler);
+  }
+
+  /**
+   * Creates a new drag handler for the circle's center point.
+   *
+   * @private
+   * @method _handleDragCenter
+   * @instance
+   * @memberof CircleHelper
+   * @returns A new event handler.
+   */
+  private _handleDragCenter(): VertListener {
+    const _self = this;
+    return (evt: VertEvent) => {
+      _self.radiusPoint.add(evt.params.dragAmount);
+    };
+  }
 
-    /**
-     * The constructor.
-     *
-     * @constructor
-     * @name CircleHelper
-     * @param {Circle} circle - The circle to handle.
-     * @param {Vertex} radiusPoint - A point to define the radius (distance from center).
-     * @param {PlotBoilerplate} pb - The PlotBoilerplate which contains the circle and point.
-     **/
-    constructor( circle:Circle, radiusPoint:Vertex, pb:PlotBoilerplate ) {
-	circle.center.listeners.addDragListener( (e:VertEvent) => { 
-	    radiusPoint.add( e.params.dragAmount );
-	    // pb.redraw();
-	} );
-	radiusPoint.listeners.addDragListener( (e:VertEvent) => {
-	    circle.radius = circle.center.distance( radiusPoint );
-	    // pb.redraw();
-	} );
+  /**
+   * Creates a new drag handler for the circle's radius control point.
+   *
+   * @private
+   * @method _handleDragCenter
+   * @instance
+   * @memberof CircleHelper
+   * @returns A new event handler.
+   */
+  private _handleDragRadiusPoint(): VertListener {
+    const _self = this;
+    return (_evt: VertEvent) => {
+      _self.circle.radius = _self.circle.center.distance(_self.radiusPoint);
     };
+  }
 }