diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..78f1e87
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+dist
+.nyc-output
+/*.js
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
index 94539a5..d81a114 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,22 +1,21 @@
 {
   "root": true,
-  "rules": {},
-  "env": {
-    "es6": true,
-    "browser": true,
-    "jasmine": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "plugins": ["jasmine"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:jasmine/recommended"
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
-  "globals": {
-    "createjs": true
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/camelcase": "off",
+    "no-sparse-arrays": "off",
+    "no-prototype-builtins": "off"
   }
 }
diff --git a/.gitignore b/.gitignore
index 688baed..50c968b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
 node_modules
 package-lock.json
-research
\ No newline at end of file
+research
+/dist
+/tmp
+/coverage
+/docs
\ No newline at end of file
diff --git a/.nycrc.json b/.nycrc.json
new file mode 100644
index 0000000..31dd491
--- /dev/null
+++ b/.nycrc.json
@@ -0,0 +1,8 @@
+{
+  "cache": false,
+  "compact": false,
+  "reporter": ["text", "lcov"],
+  "excludeAfterRemap": false,
+  "all": true,
+  "temp-dir": "tmp"
+}
diff --git a/.travis.yml b/.travis.yml
index 470c8f3..10c4f0d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,9 +1,11 @@
 language: node_js
-# TODO: break out browsers into matrix
+
 addons:
   chrome: stable
 node_js:
   - 10
+before_script:
+  - "npm run build"
 deploy:
   provider: npm
   email: jeremy@burnbright.net
diff --git a/TODO.md b/TODO.md
index 60d503f..435e02b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,48 @@
 # TODO
 
+Convert to Typescript?
+
 Update border, and constrain elements
 
+## Transforming a transformed Container's child DisplayObjects
+
+It is useful to support transforming elements within a container that might also have some transformations applied.
+
+Use case: design area has been resized/zoomed.
+
+Currently the coordinate systems are out, and the boundary mechanism fails too.
+
+Come up with a design / plan...
+
+We might need to introduce functions for transforming through parent layers.
+
+## Decomposing tools into classes
+
+Conceptually tool sequence is:
+
+- Provides a handle that can be dragged
+- Take the handle's start and current events, the registration point
+- Produces a potential transformation (of various types)
+- Transformation gets limited by new bounds
+- DisplayObject gets updated with final transform
+
+Tools therefore need to know:
+
+- Orientation point
+- How to limit a transformation? Surely this is deterministic, but in some cases the math is hard, such as scaling
+
+Tools don't need to know
+
+## Types of bounds
+
+Oriented Bounds - bounds that have been positioned, rotated, scaled with the target
+Simple Boundary Bounds - bounds that wrap the transformed oriented bounds
+Complex Boundary Bounds - bounds that wrap the complexities of a shape: eg vector graphics, various primitive shapes, or images with some pixel analysis.
+
+We'll settle for a simple bounds approach, since reorienting isn't common.
+
+Current issue: we rely on un-oriented bounds to collide with boundary, resulting in the objects crossing over the boundary. Perhaps this is ok.
+
 ## Build test infrastructure
 
 - Build out test suite
@@ -72,3 +113,17 @@ Features
 - Allow moving the registration point with a handle
 
 - Prevent or warn when scaling above best print resolution
+
+Generalising cursor update logic
+
+```js
+const ANGLE_STEP = 45;
+const DIRECTIONS = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+
+export function angleToOrdinalDirection(angle: number): string {
+  const index =
+    Math.floor((angle + 360) / ANGLE_STEP + 0.5) % DIRECTIONS.length;
+  console.log(angle, DIRECTIONS[index], index);
+  return DIRECTIONS[index];
+}
+```
diff --git a/createjs.util.FreeTransformTool.js b/createjs.util.FreeTransformTool.js
deleted file mode 100644
index fde675c..0000000
--- a/createjs.util.FreeTransformTool.js
+++ /dev/null
@@ -1,569 +0,0 @@
-// namespace:
-var createjs = this.createjs;
-
-// package
-this.createjs.util = this.createjs.util || {};
-
-// helpers
-
-function calcAngleDegrees(x, y) {
-  return (Math.atan2(y, x) * 180) / Math.PI;
-}
-this.createjs.util.calcAngleDegrees = calcAngleDegrees;
-
-function calcDistance(x1, y1, x2, y2) {
-  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-}
-this.createjs.util.calcDistance = calcDistance;
-
-/**
- * Force a rectangle to always be inside another by
- * updating location and size.
- * @param {createjs.Rectangle} rect
- * @param {createjs.Rectangle} container
- */
-function constrainRectTo(rect, container) {
-  if (rect.width >= container.width) {
-    rect.width = container.width;
-  }
-  if (rect.height >= container.height) {
-    rect.height = container.height;
-  }
-  if (rect.x <= container.x) {
-    rect.x = container.x;
-  }
-  if (rect.x + rect.width > container.x + container.width) {
-    rect.x = container.x + container.width - rect.width;
-  }
-  if (rect.y <= container.y) {
-    rect.y = container.y;
-  }
-  if (rect.y + rect.height > container.y + container.height) {
-    rect.y = container.y + container.height - rect.height;
-  }
-  return rect;
-}
-this.createjs.util.constrainRectTo = constrainRectTo;
-
-// constrains a display object to a given rect
-function constrainObjectTo(obj, rect) {
-  var bounds = obj.getBounds();
-  bounds.x = obj.x - obj.regX * obj.scaleX;
-  bounds.y = obj.y - obj.regY * obj.scaleY;
-  var constrained = new createjs.Rectangle(
-    bounds.x,
-    bounds.y,
-    bounds.width,
-    bounds.height
-  );
-  constrainRectTo(constrained, rect);
-  obj.x = constrained.x + obj.regX * obj.scaleX;
-  obj.y = constrained.y + obj.regY * obj.scaleY;
-  // TODO: work out new scale to apply, rather than overlapping
-  var newScale = {
-    x: constrained.width / bounds.width,
-    y: constrained.height / bounds.height
-  };
-  obj.scaleX *= newScale.x;
-  obj.scaleY *= newScale.y;
-}
-this.createjs.util.constrainObjectTo = constrainObjectTo;
-
-// class
-(function() {
-  var FreeTransformTool = function(
-    lineColor,
-    dashed,
-    color,
-    controlsSize,
-    boundary
-  ) {
-    this.initialize(lineColor, dashed, color, controlsSize, boundary);
-  };
-  var p = (FreeTransformTool.prototype = new createjs.Container());
-
-  // public properties:
-  p.moveTool = null;
-  p.moveHitArea = null;
-  p.scaleTool = null;
-  p.hScaleTool = null;
-  p.vScaleTool = null;
-  p.rotateTool = null;
-  p.target = null;
-  p.border = null;
-  p.dashed = null;
-  p.boundary = null;
-
-  // constructor:
-  // copy before override
-  p.Container_initialize = p.initialize;
-  p.initialize = function(lineColor, dashed, color, controlsSize, boundary) {
-    this.Container_initialize();
-
-    // default values
-    lineColor = lineColor || "#4285F4";
-    color = color || "rgba(255,255,255,0.8)";
-    controlsSize = controlsSize || 10;
-
-    this.controlsDim = 0.15;
-    this.controlStrokeThickness = 1;
-    this.dashed = dashed === undefined ? true : dashed;
-
-    this.boundary = boundary === undefined ? null : boundary;
-
-    var that = this;
-
-    // create border
-    this.border = new createjs.Shape();
-    this.border.color = lineColor;
-    this.addChild(this.border);
-
-    function addToolTip(shape, name, cursor) {
-      shape.on("mouseover", function() {
-        that.setTitle(name);
-        that.setCursor(cursor);
-      });
-      shape.on("mouseout", function() {
-        that.setTitle();
-        that.setCursor("default");
-      });
-    }
-
-    // create a transform control handle
-    var handleStrokeWidth = this.controlStrokeThickness;
-    function createHandle(name, cursor) {
-      var shape = new createjs.Shape();
-      addToolTip(shape, name, cursor);
-      shape.graphics
-        .beginStroke(lineColor)
-        .setStrokeStyle(handleStrokeWidth)
-        .beginFill(color);
-      shape.x = shape.regX = controlsSize / 2;
-      shape.y = shape.regY = controlsSize / 2;
-      return shape;
-    }
-
-    /**
-     * Move tool
-     * Drag anywhere within the object bounds to move.
-     * Click to deselect.
-     */
-    this.moveTool = new createjs.Shape();
-    addToolTip(this.moveTool, "Move", "move");
-    this.moveTool.on("mousedown", function(downEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone();
-        var scaledReg = {
-          x: that.target.regX * that.target.scaleX,
-          y: that.target.regY * that.target.scaleY
-        };
-        tool.on("pressmove", function(moveEvent) {
-          that.alpha = that.controlsDim;
-          var newLocation = {
-            x: targetStart.x + moveEvent.stageX - downEvent.stageX,
-            y: targetStart.y + moveEvent.stageY - downEvent.stageY
-          };
-          // constrain new location, if there is a boundary
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
-              newLocation.x - scaledReg.x,
-              newLocation.y - scaledReg.y,
-              tBounds.width * that.target.scaleX,
-              tBounds.height * that.target.scaleY
-            );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
-            newLocation.x = constrainedBounds.x + scaledReg.x;
-            newLocation.y = constrainedBounds.y + scaledReg.y;
-          }
-          that.target.set(newLocation);
-          tool.dragDistance = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            moveEvent.stageX,
-            moveEvent.stageY
-          );
-          that.stage.update();
-        });
-        tool.on("pressup", function(upEvent) {
-          that.alpha = 1;
-          tool.removeAllEventListeners("pressmove");
-          upEvent.stopPropagation();
-          tool.dragDistance = 0;
-          that.stage.update();
-        });
-      }
-    });
-    // click to deselect
-    this.moveTool.on("click", function(clickEvent) {
-      // only deselect if there was very little movement on click
-      // which helps on mobile devices, where it's difficult to
-      // tap without dragging slightly
-      var movedThreshold = 10;
-      if (clickEvent.currentTarget.dragDistance < movedThreshold) {
-        that.unselect();
-        that.stage.update();
-      }
-    });
-    this.moveHitArea = new createjs.Shape();
-    this.moveTool.hitArea = this.moveHitArea;
-    this.addChild(this.moveTool);
-
-    // init hScale tool
-    this.hScaleTool = createHandle("Stretch", "e-resize");
-    this.hScaleTool.graphics.drawRect(0, 0, controlsSize, controlsSize);
-    this.hScaleTool.on("mousedown", function(downEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone().set({
-          width: tBounds.width,
-          height: tBounds.height
-        });
-        tool.on("pressmove", function(moveEvent) {
-          that.alpha = that.controlsDim;
-          var distStart = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            that.target.x,
-            that.target.y
-          );
-          var distEnd = calcDistance(
-            moveEvent.stageX,
-            moveEvent.stageY,
-            that.target.x,
-            that.target.y
-          );
-          var rescaleFactor = distEnd / distStart;
-          var updates = {
-            scaleX: targetStart.scaleX * rescaleFactor
-          };
-          // constrain to bounds
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
-              targetStart.x - targetStart.regX * updates.scaleX,
-              targetStart.y - targetStart.regY * targetStart.scaleY,
-              targetStart.width * updates.scaleX,
-              targetStart.height
-            );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
-            updates.scaleX = constrainedBounds.width / targetStart.width;
-            updates.x = constrainedBounds.x + targetStart.regX * updates.scaleX;
-          }
-          that.target.set(updates);
-          that.stage.update();
-        });
-        tool.on("pressup", function() {
-          tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
-        });
-      }
-    });
-    this.addChild(this.hScaleTool);
-
-    // init vScale tool
-    this.vScaleTool = createHandle("Stretch", "s-resize");
-    this.vScaleTool.graphics.drawRect(0, 0, controlsSize, controlsSize);
-    this.vScaleTool.on("mousedown", function(downEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone().set({
-          width: tBounds.width,
-          height: tBounds.height
-        });
-        tool.on("pressmove", function(moveEvent) {
-          that.alpha = that.controlsDim;
-          var distStart = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            that.target.x,
-            that.target.y
-          );
-          var distEnd = calcDistance(
-            moveEvent.stageX,
-            moveEvent.stageY,
-            that.target.x,
-            that.target.y
-          );
-          var rescaleFactor = distEnd / distStart;
-          var updates = {
-            scaleY: targetStart.scaleY * rescaleFactor
-          };
-          // constrain to bounds
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
-              targetStart.x - targetStart.regX * updates.scaleX,
-              targetStart.y - targetStart.regY * targetStart.scaleY,
-              targetStart.width,
-              targetStart.height * updates.scaleY
-            );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
-            updates.scaleY = constrainedBounds.height / targetStart.height;
-            updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
-          }
-          that.target.set(updates);
-          that.stage.update();
-        });
-        tool.on("pressup", function() {
-          tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
-        });
-      }
-    });
-    this.addChild(this.vScaleTool);
-
-    /**
-     * Scale tool:
-     * Changes display object's scale based on
-     * the difference in position away/near the
-     * registration point
-     */
-    this.scaleTool = createHandle("Resize", "se-resize");
-    this.scaleTool.graphics.drawRect(0, 0, controlsSize, controlsSize);
-    this.scaleTool.on("mousedown", function(downEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone().set({
-          width: tBounds.width,
-          height: tBounds.height
-        });
-        tool.on("pressmove", function(moveEvent) {
-          that.alpha = that.controlsDim;
-          var distStart = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            that.target.x,
-            that.target.y
-          );
-          var distEnd = calcDistance(
-            moveEvent.stageX,
-            moveEvent.stageY,
-            that.target.x,
-            that.target.y
-          );
-          var rescaleFactor = distEnd / distStart;
-          var updates = {
-            scaleX: targetStart.scaleX * rescaleFactor,
-            scaleY: targetStart.scaleY * rescaleFactor
-          };
-          // constrain to bounds
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
-              targetStart.x - targetStart.regX * updates.scaleX,
-              targetStart.y - targetStart.regY * updates.scaleY,
-              targetStart.width * updates.scaleX,
-              targetStart.height * updates.scaleY
-            );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
-            updates.scaleX = constrainedBounds.width / targetStart.width;
-            updates.scaleY = constrainedBounds.height / targetStart.height;
-            updates.x = constrainedBounds.x + targetStart.regX * updates.scaleX;
-            updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
-          }
-          that.target.set(updates);
-          that.stage.update();
-        });
-        tool.on("pressup", function() {
-          tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
-        });
-      }
-    });
-    this.addChild(this.scaleTool);
-
-    /**
-     * Rotate Tool:
-     * Rotates around registration point
-     * Work out delta angle between three points:
-     *  1. drag start point
-     *  2. registration point
-     *  3. drag end/current point
-     * Add that angle to the object's start rotation
-     */
-    this.rotateTool = createHandle("Rotate", "pointer");
-    this.rotateTool.graphics.drawEllipse(0, 0, controlsSize, controlsSize);
-    this.rotateTool.on("mousedown", function(downEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var startRotation = that.target.rotation;
-        tool.on("pressmove", function(moveEvent) {
-          that.alpha = 0.1;
-          // the drag point is relative to the display object x,y position on the stage (it's registration point)
-          var relativeStartPoint = {
-            x: downEvent.stageX - that.target.x,
-            y: downEvent.stageY - that.target.y
-          };
-          var relativeEndPoint = {
-            x: moveEvent.stageX - that.target.x,
-            y: moveEvent.stageY - that.target.y
-          };
-          var endAngle = calcAngleDegrees(
-            relativeEndPoint.x,
-            relativeEndPoint.y
-          );
-          var startAngle = calcAngleDegrees(
-            relativeStartPoint.x,
-            relativeStartPoint.y
-          );
-          var deltaAngle = endAngle - startAngle;
-          // TTODO: constrain to bounds
-          that.target.rotation = startRotation + deltaAngle;
-          that.stage.update();
-        });
-        tool.on("pressup", function() {
-          tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
-        });
-      }
-    });
-    this.addChild(this.rotateTool);
-
-    // update
-    this.on("tick", function() {
-      that.update();
-    });
-
-    this.visible = false;
-  };
-
-  // public methods:
-  p.select = function(target) {
-    if (target) {
-      // copy object translation/transformation
-      this.target = target;
-      var bounds = target.getBounds();
-      this.width = bounds.width;
-      this.height = bounds.height;
-      this.scaleX = target.scaleX;
-      this.scaleY = target.scaleY;
-      this.x = target.x;
-      this.y = target.y;
-      this.rotation = target.rotation;
-
-      // respect registration point of target
-      this.regX = -this.width / 2 + target.regX;
-      this.regY = -this.height / 2 + target.regY;
-
-      // borders
-      this.border.graphics.clear();
-      if (this.dashed) {
-        this.border.graphics.setStrokeDash([5, 5], 0);
-      }
-      this.border.graphics
-        .beginStroke(this.border.color)
-        .setStrokeStyle(this.controlStrokeThickness, 0, 0, 10, true)
-        .moveTo(-this.width / 2, -this.height / 2)
-        .lineTo(this.width / 2, -this.height / 2)
-        .moveTo(this.width / 2, this.height / 2)
-        .lineTo(-this.width / 2, this.height / 2);
-      if (this.dashed) {
-        this.border.graphics.setStrokeDash([5, 5], 0);
-      }
-      this.border.graphics
-        .setStrokeStyle(this.controlStrokeThickness, 0, 0, 10, true)
-        .moveTo(-this.width / 2, -this.height / 2)
-        .lineTo(-this.width / 2, this.height / 2)
-        .moveTo(this.width / 2, this.height / 2)
-        .lineTo(this.width / 2, -this.height / 2);
-
-      // tools size should stay consistent
-      var toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
-      var toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
-
-      // draw move hit area
-      this.moveHitArea.graphics
-        .clear()
-        .beginFill("#000")
-        .rect(-this.width / 2, -this.height / 2, this.width, this.height);
-
-      // scale tool (bottom right)
-      this.scaleTool.x = bounds.width / 2;
-      this.scaleTool.y = bounds.height / 2;
-      this.scaleTool.scaleX = toolScaleX;
-      this.scaleTool.scaleY = toolScaleY;
-
-      // hScale tool (right edge)
-      this.hScaleTool.x = bounds.width / 2;
-      this.hScaleTool.y = 0;
-      this.hScaleTool.scaleX = toolScaleX;
-      this.hScaleTool.scaleY = toolScaleY;
-
-      // vScale tool (bottom edge)
-      this.vScaleTool.x = 0;
-      this.vScaleTool.y = bounds.height / 2;
-      this.vScaleTool.scaleX = toolScaleX;
-      this.vScaleTool.scaleY = toolScaleY;
-
-      // rotate tool
-      this.rotateTool.x = bounds.width / 2;
-      this.rotateTool.y = -bounds.height / 2;
-      this.rotateTool.scaleX = toolScaleX;
-      this.rotateTool.scaleY = toolScaleY;
-
-      this.visible = true;
-    } else {
-      this.unselect();
-    }
-    return;
-  };
-
-  p.unselect = function() {
-    this.target = null;
-    this.visible = false;
-  };
-
-  p.update = function() {
-    if (this.target) {
-      this.select(this.target);
-    }
-  };
-
-  p.setTitle = function(title) {
-    title = title || "";
-    this.stage.canvas.title = title;
-  };
-
-  p.setCursor = function(cursor) {
-    var cursors = [
-      "e-resize",
-      "se-resize",
-      "s-resize",
-      "sw-resize",
-      "w-resize",
-      "nw-resize",
-      "n-resize",
-      "ne-resize"
-    ];
-    var index = cursors.indexOf(cursor);
-    if (index >= 0) {
-      var angle = 45;
-      var rotation = this.target.rotation;
-      rotation = rotation + angle / 2;
-      var newIndex = index + Math.floor(rotation / angle);
-      newIndex = newIndex % cursors.length;
-      document.body.style.cursor = cursors[newIndex];
-    } else {
-      document.body.style.cursor = cursor;
-    }
-  };
-
-  // override methods
-  // copy before override
-  p.Container_draw = p.draw;
-  p.draw = function(ctx, ignoreCache) {
-    if (this.DisplayObject_draw(ctx, ignoreCache)) {
-      return true;
-    }
-    this.Container_draw(ctx, ignoreCache);
-    return true;
-  };
-
-  createjs.util.FreeTransformTool = FreeTransformTool;
-})();
diff --git a/demo/demo.js b/demo/demo.js
deleted file mode 100644
index 56c0921..0000000
--- a/demo/demo.js
+++ /dev/null
@@ -1,172 +0,0 @@
-var canvas, stage;
-var update = true;
-
-var boundary;
-var boundaryLine;
-
-var selectTool;
-
-var container;
-
-function init() {
-  // create stage and point it to the canvas:
-  canvas = document.getElementById("Designer");
-  stage = new createjs.Stage(canvas);
-
-  // enable touch interactions if supported on the current device:
-  createjs.Touch.enable(stage);
-
-  // enabled mouse over / out events
-  stage.enableMouseOver(10);
-  stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
-
-  // set up free transform tool
-  var top = new createjs.Container();
-  top.name = "top";
-  stage.addChild(top);
-
-  // define boundary
-  boundary = new createjs.Rectangle();
-  updateBoundary(boundary);
-  boundaryLine = new createjs.Shape();
-  top.addChild(boundaryLine);
-
-  let controlsSize = 10 * window.devicePixelRatio;
-  selectTool = new createjs.util.FreeTransformTool(
-    "#057",
-    true,
-    "rgba(255,255,255,0.8)",
-    controlsSize,
-    boundary
-  );
-  selectTool.name = "transform";
-
-  top.addChild(selectTool);
-
-  // load the source image:
-  var image = new Image();
-  image.src = "demo/daisy.png";
-  image.onload = handleImageLoad;
-}
-
-function stop() {
-  createjs.Ticker.removeEventListener("tick", tick);
-}
-
-function updateBoundary(boundary) {
-  var top = canvas.height * 0.1;
-  var left = canvas.width * 0.1;
-  var padding = Math.min(top, left);
-  boundary.setValues(
-    padding,
-    padding,
-    canvas.width - padding * 2,
-    canvas.height - padding * 2
-  );
-}
-
-function drawBoundary() {
-  boundaryLine.graphics
-    .clear()
-    .beginStroke("rgba(100, 100, 100, 0.5)")
-    .setStrokeDash([20, 4])
-    .drawRect(boundary.x, boundary.y, boundary.width, boundary.height);
-}
-
-function constrainStageObjects(objects) {
-  objects.forEach(function(obj) {
-    createjs.util.constrainObjectTo(obj, boundary);
-  });
-}
-
-function handleImageLoad(event) {
-  var image = event.target;
-  var bitmap;
-  container = new createjs.Container();
-  stage.addChildAt(container, 0);
-
-  // Shape
-  var ellipse = new createjs.Shape();
-  ellipse.x = canvas.width / 2;
-  ellipse.y = canvas.height / 4;
-  ellipse.setBounds(0, 0, 200, 300);
-  ellipse.regX = (ellipse.getBounds().width / 2) | 0;
-  ellipse.regY = (ellipse.getBounds().height / 6) | 0;
-  ellipse.graphics
-    .setStrokeStyle(4)
-    .beginRadialGradientFill(["#FFF", "#35E"], [1, 0], 0, 0, 200, 30, -50, 40)
-    .drawEllipse(0, 0, 200, 300);
-  clickToSelect(ellipse);
-  container.addChild(ellipse);
-
-  // Bitmap
-  bitmap = new createjs.Bitmap(image);
-  bitmap.x = canvas.width / 2;
-  bitmap.y = canvas.height / 6;
-  bitmap.rotation = -25 | 0;
-  bitmap.regX = (bitmap.image.width / 2) | 0;
-  bitmap.regY = (bitmap.image.height / 2) | 0;
-  bitmap.name = "flower";
-  bitmap.cursor = "pointer";
-  clickToSelect(bitmap);
-  container.addChild(bitmap);
-
-  // Text
-  var text = new createjs.Text("Hello\nWorld", "70px Arial", "#052865");
-  var textBounds = text.getBounds();
-  text.regX = textBounds.width / 2;
-  text.regY = textBounds.height / 2;
-  text.outline = 5;
-  text.x = canvas.width / 2;
-  text.y = canvas.height / 2.3;
-  text.rotation = 5 | 0;
-  text.cursor = "pointer";
-
-  var hit = new createjs.Shape();
-  hit.graphics
-    .beginFill("#000")
-    .drawRect(0, 0, text.getBounds().width, text.getBounds().height);
-  text.hitArea = hit;
-  clickToSelect(text);
-  container.addChild(text);
-
-  createjs.Ticker.addEventListener("tick", tick);
-
-  handleResize();
-}
-
-function clickToSelect(displayObject) {
-  displayObject.on("click", function(evt) {
-    evt.stopPropagation();
-    selectTool.select(evt.currentTarget, stage);
-    update = true;
-  });
-}
-
-function tick(event) {
-  // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
-  if (update) {
-    update = false; // only update once
-    stage.update(event);
-  }
-}
-
-var containerElement = document.getElementById("CanvasContainer");
-window.addEventListener("resize", handleResize);
-function handleResize() {
-  selectTool.unselect();
-  var w = containerElement.clientWidth; // -2 accounts for the border
-  //var h = window.innerHeight-2;
-
-  stage.canvas.width = w;
-  //stage.canvas.height = h;
-
-  updateBoundary(boundary);
-  // TODO: constrain all elements
-  constrainStageObjects(container.children);
-
-  drawBoundary();
-  stage.update();
-}
-
-init();
diff --git a/karma.conf.js b/karma.conf.js
deleted file mode 100644
index 2bbd2bd..0000000
--- a/karma.conf.js
+++ /dev/null
@@ -1,94 +0,0 @@
-// eslint env node
-
-// Karma configuration
-// Generated on Wed Dec 11 2019 07:30:25 GMT+1300 (NZDT)
-
-module.exports = function(config) {
-  config.set({
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: "",
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ["jasmine"],
-
-    // list of files / patterns to load in the browser
-    files: [
-      {
-        pattern: "tests/images/*.*",
-        watched: false,
-        included: false,
-        served: true,
-        nocache: false
-      },
-      "module-shim.js",
-      "node_modules/pixelmatch/index.js",
-      "demo/easeljs.js",
-      "createjs.text-fix.js",
-      "node_modules/txtjs/dist/txt.js",
-      "createjs.util.FreeTransformTool.js",
-      "tests/*.js"
-    ],
-
-    proxies: {
-      "/img/": "/base/tests/images/"
-    },
-
-    // list of files / patterns to exclude
-    exclude: [],
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {},
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ["progress"],
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
-    browsers: ["ChromeWithoutGPU", "FirefoxWithoutGPU"],
-
-    // disable gpu to stay consistent with headless renders
-    customLaunchers: {
-      ChromeWithoutGPU: {
-        base: "Chrome",
-        flags: ["--disable-gpu"]
-      },
-      ChromeHeadlessWithoutGPU: {
-        base: "ChromeHeadless",
-        flags: ["--disable-gpu"]
-      },
-      FirefoxWithoutGPU: {
-        base: "Firefox",
-        prefs: {
-          "webgl.disabled": true
-        }
-      }
-    },
-
-    client: {
-      clearContext: false
-    },
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity
-  });
-};
diff --git a/package.json b/package.json
index 297e60c..a307889 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "createjs-free-transform-tool",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Provides ability to free transform CreateJS Display Objects",
   "keywords": [
     "canvas",
@@ -20,31 +20,55 @@
   "license": "MIT",
   "author": "Jeremy Shipman",
   "files": [
-    "createjs.util.FreeTransformTool.js"
+    "dist/createjs.util.FreeTransformTool.js"
   ],
-  "browser": "createjs.util.FreeTransformTool.js",
+  "browser": "dist/createjs.util.FreeTransformTool.js",
   "scripts": {
-    "start": "http-server .",
-    "lint": "eslint ./*FreeTransformTool.js",
-    "test": "npm run lint && npm run test:ci",
-    "test:ci": "karma start --browsers=ChromeHeadlessWithoutGPU,FirefoxHeadless --single-run",
-    "test:server": "karma start --reporters=kjhtml"
+    "start": "run-p server watch",
+    "build": "mkdir -p tmp && run-s build:compile bundle copy",
+    "copy": "copyfiles -f public/* dist/",
+    "build:compile": "tsc --project .",
+    "bundle": "run-s bundle:lib bundle:demo bundle:tests",
+    "bundle:lib": "rollup -c -f umd dist/esnext/src/freetransform/index.js --name=createjs.util.FreeTransformTool --file=dist/createjs.util.FreeTransformTool.js --sourcemap",
+    "bundle:lib:cov": "rollup -c -f umd dist/instrumented/index.js --name=createjs.util.FreeTransformTool --file=dist/createjs.util.FreeTransformTool.instrumented.js --sourcemap",
+    "bundle:demo": "rollup -c -f umd dist/esnext/src/demo/index.js --globals freetransform:createjs.util.FreeTransformTool --file=dist/demo.umd.js --sourcemap",
+    "bundle:tests": "rollup -c -f umd dist/esnext/tests/index.js --globals freetransform:createjs.util.FreeTransformTool --file=dist/tests.umd.js --sourcemap",
+    "cov:instrument": "mkdir -p tmp && nyc instrument dist/esnext/src/freetransform dist/instrumented",
+    "cov:view": "nyc report && live-server coverage/lcov-report",
+    "test": "run-s lint cov:instrument bundle:lib:cov test:ci",
+    "test:ci": "HEADLESS=true testem ci .",
+    "test:server": "testem server .",
+    "watch": "run-p \"build:compile -- --watch\" \"bundle:lib -- --watch\" \"bundle:demo -- --watch\"",
+    "lint": "eslint . --ext .ts && prettier --check **/*.ts",
+    "lint:fix": "eslint . --ext .ts --fix && prettier --write **/*.ts",
+    "docs:build": "typedoc --tsconfig src",
+    "docs:view": "live-server docs",
+    "clean": "rm -Rf dist docs coverage tmp",
+    "server": "live-server dist"
   },
   "devDependencies": {
-    "@types/createjs": "0.0.29",
-    "@types/pixelmatch": "^5.0.0",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-jasmine": "^4.1.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "http-server": "^0.11.1",
+    "@recreatejs/jasmine-pixelmatch": "^0.1.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@types/easeljs": "^1.0.0",
+    "@types/jasmine": "^3.5.11",
+    "@typescript-eslint/eslint-plugin": "^3.5.0",
+    "@typescript-eslint/parser": "^3.5.0",
+    "copyfiles": "^2.3.0",
+    "eslint": "^7.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
     "jasmine-core": "^3.5.0",
-    "karma": "^4.4.1",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^1.2.0",
-    "karma-jasmine": "^2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
+    "live-server": "^1.2.1",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^15.1.0",
+    "onchange": "^7.0.2",
     "pixelmatch": "^5.1.0",
-    "prettier": "^1.19.1"
+    "prettier": "^2.0.5",
+    "rollup": "^2.18.1",
+    "rollup-plugin-sourcemaps": "^0.6.2",
+    "testem": "^3.2.0",
+    "tslib": "^2.0.0",
+    "typedoc": "^0.17.8",
+    "typescript": "^3.9.5"
   }
 }
diff --git a/demo/daisy.png b/public/daisy.png
similarity index 100%
rename from demo/daisy.png
rename to public/daisy.png
diff --git a/demo/easeljs.js b/public/easeljs.js
similarity index 100%
rename from demo/easeljs.js
rename to public/easeljs.js
diff --git a/demo/flower.svg b/public/flower.svg
similarity index 100%
rename from demo/flower.svg
rename to public/flower.svg
diff --git a/index.html b/public/index.html
similarity index 87%
rename from index.html
rename to public/index.html
index 070c3eb..67b4afd 100644
--- a/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
         <title>Create.js Free Transform Tool</title>
         <meta name="viewport" content="width=device-width, user-scalable=no" />
         <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-        <link rel="stylesheet" href="demo/spectre.min.css">
+        <link rel="stylesheet" href="spectre.min.css">
         <style>
             body {
                 background: -webkit-linear-gradient(to bottom, #fffcdc, #d9a7c7);
@@ -24,8 +24,8 @@ <h2>Create.js Free Transform Tool</h2>
                 <canvas id="Designer" width="500" height="400"></canvas>
             </div>
         </div>
-        <script src="demo/easeljs.js"></script>
+        <script src="easeljs.js"></script>
         <script src="createjs.util.FreeTransformTool.js"></script>
-        <script src="demo/demo.js"></script>
+        <script src="demo.umd.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/demo/spectre.min.css b/public/spectre.min.css
similarity index 100%
rename from demo/spectre.min.css
rename to public/spectre.min.css
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..5b3a264
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,7 @@
+import sourcemaps from "rollup-plugin-sourcemaps";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+
+export default {
+  plugins: [sourcemaps(), resolve(), commonjs()],
+};
diff --git a/src/demo/index.ts b/src/demo/index.ts
new file mode 100644
index 0000000..0f2c595
--- /dev/null
+++ b/src/demo/index.ts
@@ -0,0 +1,100 @@
+import createEllipse from "./shapes/ellipse";
+import createText from './shapes/text';
+import createBitmap from './shapes/bitmap';
+import TransformLayer from './transform-layer';
+import { constrainObjectTo } from "../freetransform/helpers";
+
+let canvas
+let stage;
+
+let container;
+let transformLayer;
+let boundary;
+
+function init() {
+  canvas = document.getElementById("Designer");
+  stage = new createjs.Stage(canvas);
+
+  // enable touch interactions if supported on the current device:
+  createjs.Touch.enable(stage);
+
+  // enabled mouse over / out events
+  stage.enableMouseOver(10);
+  stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
+
+  // set up free transform tool
+  transformLayer = new TransformLayer();
+  stage.addChild(transformLayer);
+
+  // define boundary
+  boundary = new createjs.Rectangle();
+
+  // container for display objects being transformed
+  container = new createjs.Container();
+  stage.addChildAt(container, 0);
+
+  // load the source image:
+  const image = new Image();
+  image.src = "daisy.png";
+  image.onload = handleImageLoad;
+}
+
+function addSelectableObject(displayObject) {
+  transformLayer.makeSelectable(displayObject);
+  container.addChild(displayObject);
+}
+
+function handleImageLoad(event) {
+
+  const ellipse = createEllipse();
+  ellipse.x = canvas.width / 2;
+  ellipse.y = canvas.height / 4;
+  addSelectableObject(ellipse);
+
+  const image = event.target;
+  const bitmap = createBitmap(image);
+  bitmap.x = canvas.width / 2;
+  bitmap.y = canvas.height / 6;
+  addSelectableObject(bitmap);
+
+  const text = createText();
+  text.x = canvas.width / 2;
+  text.y = canvas.height / 2.3;
+  addSelectableObject(text);
+
+  handleResize();
+}
+
+const containerElement = document.getElementById("CanvasContainer");
+window.addEventListener("resize", handleResize);
+
+function handleResize() {
+  transformLayer.unselect();
+  const w = containerElement.clientWidth; // -2 accounts for the border
+  stage.canvas.width = w;
+  updateBoundary(boundary);
+  transformLayer.updateBoundary(boundary);
+  constrainStageObjects(container.children);
+  stage.update();
+}
+
+// update boundary, based on canvas size
+function updateBoundary(boundary) {
+  const top = canvas.height * 0.1;
+  const left = canvas.width * 0.1;
+  const padding = Math.min(top, left);
+  boundary.setValues(
+    padding,
+    padding,
+    canvas.width - padding * 2,
+    canvas.height - padding * 2
+  );
+}
+
+function constrainStageObjects(objects) {
+  objects.forEach(function (obj) {
+    constrainObjectTo(obj, boundary);
+  });
+}
+
+init();
diff --git a/src/demo/shapes/bitmap.ts b/src/demo/shapes/bitmap.ts
new file mode 100644
index 0000000..01e9b69
--- /dev/null
+++ b/src/demo/shapes/bitmap.ts
@@ -0,0 +1,9 @@
+export default function createBitmap(image) : createjs.Bitmap {
+    const bitmap = new createjs.Bitmap(image);
+    bitmap.rotation = -25 | 0;
+    bitmap.regX = (bitmap.image.width / 2) | 0;
+    bitmap.regY = (bitmap.image.height / 2) | 0;
+    bitmap.name = "flower";
+    bitmap.cursor = "pointer";
+    return bitmap;
+}
\ No newline at end of file
diff --git a/src/demo/shapes/ellipse.ts b/src/demo/shapes/ellipse.ts
new file mode 100644
index 0000000..1b090d3
--- /dev/null
+++ b/src/demo/shapes/ellipse.ts
@@ -0,0 +1,11 @@
+export default function createEllipse() : createjs.Shape {
+  const ellipse = new createjs.Shape();
+  ellipse.setBounds(0, 0, 200, 300);
+  ellipse.regX = (ellipse.getBounds().width / 2) | 0;
+  ellipse.regY = (ellipse.getBounds().height / 6) | 0;
+  ellipse.graphics
+    .setStrokeStyle(4)
+    .beginRadialGradientFill(["#FFF", "#35E"], [1, 0], 0, 0, 200, 30, -50, 40)
+    .drawEllipse(0, 0, 200, 300);
+  return ellipse;
+}
diff --git a/src/demo/shapes/text.ts b/src/demo/shapes/text.ts
new file mode 100644
index 0000000..8315deb
--- /dev/null
+++ b/src/demo/shapes/text.ts
@@ -0,0 +1,16 @@
+export default function createText() : createjs.Text {
+    const text = new createjs.Text("Hello\nWorld", "70px Arial", "#052865");
+    const textBounds = text.getBounds();
+    text.regX = textBounds.width / 2;
+    text.regY = textBounds.height / 2;
+    text.outline = 5;
+    text.rotation = 5 | 0;
+    text.cursor = "pointer";
+  
+    const hit = new createjs.Shape();
+    hit.graphics
+      .beginFill("#000")
+      .drawRect(0, 0, text.getBounds().width, text.getBounds().height);
+    text.hitArea = hit;
+    return text;
+}
\ No newline at end of file
diff --git a/src/demo/transform-layer.ts b/src/demo/transform-layer.ts
new file mode 100644
index 0000000..7f14509
--- /dev/null
+++ b/src/demo/transform-layer.ts
@@ -0,0 +1,55 @@
+import FreeTransformTool from "freetransform";
+
+export default class TransformLayer extends createjs.Container {
+  transformTool = null;
+  controlsSize = 10 * window.devicePixelRatio;
+  boundaryLine;
+
+  constructor() {
+    super();
+    this.transformTool = this.initFreeTransformTool();
+    this.addChild(this.transformTool);
+
+    this.boundaryLine = new createjs.Shape();
+    this.addChild(this.boundaryLine);
+  }
+
+  protected initFreeTransformTool(): FreeTransformTool {
+    const tool = new FreeTransformTool(
+      "#057",
+      true,
+      "rgba(255,255,255,0.8)",
+      this.controlsSize
+    );
+    tool.name = "transform";
+    return tool;
+  }
+
+  updateBoundary(boundary: createjs.Rectangle): void {
+    this.transformTool.boundary = boundary;
+    drawBoundaryLine(this.boundaryLine, boundary);
+  }
+
+  makeSelectable(displayObject: createjs.DisplayObject): void {
+    displayObject.on("click", (evt: createjs.Event) => {
+      evt.stopPropagation();
+      this.transformTool.select(evt.currentTarget);
+      this.stage.update();
+    });
+  }
+
+  unselect(): void {
+    this.transformTool.unselect();
+  }
+}
+
+function drawBoundaryLine(
+  boundaryLine: createjs.Shape,
+  boundary: createjs.Rectangle
+) {
+  boundaryLine.graphics
+    .clear()
+    .beginStroke("rgba(100, 100, 100, 0.5)")
+    .setStrokeDash([20, 4])
+    .drawRect(boundary.x, boundary.y, boundary.width, boundary.height);
+}
diff --git a/src/freetransform/HandlePosition.ts b/src/freetransform/HandlePosition.ts
new file mode 100644
index 0000000..33ddf1d
--- /dev/null
+++ b/src/freetransform/HandlePosition.ts
@@ -0,0 +1,53 @@
+export enum HandlePosition {
+  TOP_LEFT,
+  TOP_CENTER,
+  TOP_RIGHT,
+  MIDDLE_LEFT,
+  MIDDLE_CENTER,
+  MIDDLE_RIGHT,
+  BOTTOM_LEFT,
+  BOTTOM_CENTER,
+  BOTTOM_RIGHT,
+}
+
+export function handlePositionToRectPoint(
+  position: HandlePosition,
+  rectangle: createjs.Rectangle
+): createjs.Point {
+  const point = new createjs.Point();
+  switch (position) {
+    case HandlePosition.TOP_LEFT:
+    case HandlePosition.MIDDLE_LEFT:
+    case HandlePosition.BOTTOM_LEFT:
+      point.x = rectangle.x;
+      break;
+    case HandlePosition.MIDDLE_CENTER:
+    case HandlePosition.TOP_CENTER:
+    case HandlePosition.BOTTOM_CENTER:
+      point.x = rectangle.x + rectangle.width / 2;
+      break;
+    case HandlePosition.TOP_RIGHT:
+    case HandlePosition.MIDDLE_RIGHT:
+    case HandlePosition.BOTTOM_RIGHT:
+      point.x = rectangle.x + rectangle.width;
+      break;
+  }
+  switch (position) {
+    case HandlePosition.TOP_LEFT:
+    case HandlePosition.TOP_CENTER:
+    case HandlePosition.TOP_RIGHT:
+      point.y = rectangle.y;
+      break;
+    case HandlePosition.MIDDLE_LEFT:
+    case HandlePosition.MIDDLE_CENTER:
+    case HandlePosition.MIDDLE_RIGHT:
+      point.y = rectangle.y + rectangle.height / 2;
+      break;
+    case HandlePosition.BOTTOM_LEFT:
+    case HandlePosition.BOTTOM_CENTER:
+    case HandlePosition.BOTTOM_RIGHT:
+      point.y = rectangle.y + rectangle.height;
+      break;
+  }
+  return point;
+}
diff --git a/src/freetransform/helpers.ts b/src/freetransform/helpers.ts
new file mode 100644
index 0000000..cebab37
--- /dev/null
+++ b/src/freetransform/helpers.ts
@@ -0,0 +1,80 @@
+export function calcAngleDegrees(x, y) {
+  return (Math.atan2(y, x) * 180) / Math.PI;
+}
+
+export function calcDistance(x1, y1, x2, y2) {
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+}
+
+/**
+ * Force a rectangle to always be inside another by
+ * updating location and size.
+ * @param {createjs.Rectangle} rect
+ * @param {createjs.Rectangle} container
+ */
+export function constrainRectTo(rect, container) {
+  if (rect.width >= container.width) {
+    rect.width = container.width;
+  }
+  if (rect.height >= container.height) {
+    rect.height = container.height;
+  }
+  if (rect.x <= container.x) {
+    rect.x = container.x;
+  }
+  if (rect.x + rect.width > container.x + container.width) {
+    rect.x = container.x + container.width - rect.width;
+  }
+  if (rect.y <= container.y) {
+    rect.y = container.y;
+  }
+  if (rect.y + rect.height > container.y + container.height) {
+    rect.y = container.y + container.height - rect.height;
+  }
+  return rect;
+}
+
+// constrains a display object to a given rect
+export function constrainObjectTo(obj, rect) {
+  const bounds = obj.getBounds();
+  bounds.x = obj.x - obj.regX * obj.scaleX;
+  bounds.y = obj.y - obj.regY * obj.scaleY;
+  const constrained = new createjs.Rectangle(
+    bounds.x,
+    bounds.y,
+    bounds.width,
+    bounds.height
+  );
+  constrainRectTo(constrained, rect);
+  obj.x = constrained.x + obj.regX * obj.scaleX;
+  obj.y = constrained.y + obj.regY * obj.scaleY;
+  // TODO: work out new scale to apply, rather than overlapping
+  const newScale = {
+    x: constrained.width / bounds.width,
+    y: constrained.height / bounds.height,
+  };
+  obj.scaleX *= newScale.x;
+  obj.scaleY *= newScale.y;
+}
+
+export function reorientResizeCursor(cursor: string, rotation: number): string {
+  const resizeCursors = [
+    "e-resize",
+    "se-resize",
+    "s-resize",
+    "sw-resize",
+    "w-resize",
+    "nw-resize",
+    "n-resize",
+    "ne-resize",
+  ];
+  const index = resizeCursors.indexOf(cursor);
+  if (index >= 0) {
+    const angle = 45;
+    rotation = rotation + angle / 2;
+    let newIndex = index + Math.floor(rotation / angle);
+    newIndex = newIndex % resizeCursors.length;
+    return resizeCursors[newIndex];
+  }
+  return cursor;
+}
diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
new file mode 100644
index 0000000..f8efd9e
--- /dev/null
+++ b/src/freetransform/index.ts
@@ -0,0 +1,528 @@
+import {
+  constrainRectTo,
+  calcDistance,
+  calcAngleDegrees,
+  reorientResizeCursor,
+} from "./helpers";
+import { HandlePosition, handlePositionToRectPoint } from "./HandlePosition";
+
+declare interface DisplayObjectWithSize extends createjs.DisplayObject {
+  width: number;
+  height: number;
+}
+
+export default class FreeTransformTool extends createjs.Container {
+  width: number;
+  height: number;
+
+  target: DisplayObjectWithSize = null;
+
+  moveTool: createjs.Shape = null;
+  moveHitArea: createjs.Shape = null;
+  scaleTool: createjs.Shape = null;
+  hScaleTool: createjs.Shape = null;
+  vScaleTool: createjs.Shape = null;
+  rotateTool: createjs.Shape = null;
+
+  dashed: boolean;
+  boundary: createjs.Rectangle = null;
+
+  color: string;
+  lineColor: string;
+
+  controlsDim = 0.15;
+  controlsSize: number;
+  controlStrokeThickness = 1;
+
+  visible = false;
+
+  private border = null;
+
+  handles = [];
+
+  constructor(
+    lineColor = "#4285F4",
+    dashed = true,
+    color = "rgba(255,255,255,0.8)",
+    controlsSize = 10,
+    boundary = null
+  ) {
+    super();
+
+    this.lineColor = lineColor;
+    this.dashed = dashed;
+    this.color = color;
+    this.controlsSize = controlsSize;
+    this.boundary = boundary;
+
+    this.border = new createjs.Shape();
+    this.border.color = lineColor;
+    this.addChild(this.border);
+
+    this.moveTool = this.createMoveTool();
+    this.addTool(this.moveTool);
+    this.addHandle(this.createScaleTool(), HandlePosition.BOTTOM_RIGHT);
+    this.addHandle(
+      this.createHorizontalScaleTool(),
+      HandlePosition.MIDDLE_RIGHT
+    );
+    this.addHandle(
+      this.createVerticalScaleTool(),
+      HandlePosition.BOTTOM_CENTER
+    );
+    this.addHandle(this.createRotateTool(), HandlePosition.TOP_RIGHT);
+
+    this.on("tick", () => {
+      this.update();
+    });
+  }
+
+  private addHandle(handle, position: HandlePosition) {
+    handle.position = position;
+    this.handles.push(handle);
+    this.addTool(handle);
+  }
+
+  private addTool(tool) {
+    this.addChild(tool);
+    tool.on("mousedown", () => this.dimHandles());
+    tool.on("pressmove", () => this.stage.update());
+    tool.on("pressup", () => {
+      this.resetHandles();
+      this.stage.update();
+    });
+  }
+
+  select(target: DisplayObjectWithSize): void {
+    if (!target) {
+      this.unselect();
+      return;
+    }
+    this.target = target;
+    this.updateTools();
+    this.visible = true;
+  }
+
+  unselect(): void {
+    this.target = null;
+    this.visible = false;
+  }
+
+  update(): void {
+    if (this.target) {
+      this.updateTools();
+    }
+  }
+
+  private dimHandles() {
+    this.alpha = this.controlsDim;
+  }
+
+  private resetHandles() {
+    this.alpha = 1;
+  }
+
+  private addToolTip(shape, name, cursor): void {
+    shape.on("mouseover", () => {
+      this.setTitle(name);
+      let newCursor = cursor;
+      if (this.target) {
+        newCursor = reorientResizeCursor(cursor, this.target.rotation);
+      }
+      this.setCursor(newCursor);
+    });
+    shape.on("mouseout", () => {
+      this.setTitle();
+      this.setCursor("default");
+    });
+  }
+
+  private setTitle(title = ""): void {
+    if (this.stage.canvas instanceof HTMLCanvasElement) {
+      this.stage.canvas.title = title;
+    }
+  }
+
+  private setCursor(cursor: string): void {
+    document.body.style.cursor = cursor;
+  }
+
+  private createHandle(name, cursor): createjs.Shape {
+    const shape = new createjs.Shape();
+    this.addToolTip(shape, name, cursor);
+    shape.graphics
+      .beginStroke(this.lineColor)
+      .setStrokeStyle(this.controlStrokeThickness)
+      .beginFill(this.color);
+    shape.x = shape.regX = this.controlsSize / 2;
+    shape.y = shape.regY = this.controlsSize / 2;
+    return shape;
+  }
+
+  // Position the transform controls according to the target bounds
+  private reorientToTarget(target: createjs.DisplayObject): void {
+    const bounds = target.getBounds();
+    this.width = bounds.width;
+    this.height = bounds.height;
+    this.scaleX = target.scaleX;
+    this.scaleY = target.scaleY;
+    this.x = target.x;
+    this.y = target.y;
+    this.rotation = target.rotation;
+
+    // respect registration point of target
+    this.regX = -bounds.width / 2 + target.regX;
+    this.regY = -bounds.height / 2 + target.regY;
+  }
+
+  private redrawBorder(
+    graphics,
+    top: number,
+    right: number,
+    bottom: number,
+    left: number
+  ): void {
+    graphics.clear();
+    graphics.setStrokeStyle(this.controlStrokeThickness, 0, 0, 10, true);
+    if (this.dashed) {
+      graphics.setStrokeDash([5, 5], 0);
+    }
+    graphics
+      .beginStroke(this.border.color)
+      .moveTo(left, top)
+      .lineTo(right, top)
+      .moveTo(right, bottom)
+      .lineTo(left, bottom)
+      .moveTo(left, top)
+      .lineTo(left, bottom)
+      .moveTo(right, bottom)
+      .lineTo(right, top);
+  }
+
+  private updateTools() {
+    this.reorientToTarget(this.target);
+
+    // horizontal and vertical edges
+    const leftEdge = -this.width / 2;
+    const rightEdge = this.width / 2;
+    const topEdge = -this.height / 2;
+    const bottomEdge = this.height / 2;
+    this.redrawBorder(
+      this.border.graphics,
+      topEdge,
+      rightEdge,
+      bottomEdge,
+      leftEdge
+    );
+    // tools size should stay consistent
+    // draw move hit area
+    this.moveHitArea.graphics
+      .clear()
+      .beginFill("#000")
+      .rect(leftEdge, topEdge, this.width, this.height);
+
+    const boundsRect = new createjs.Rectangle(
+      leftEdge,
+      topEdge,
+      this.width,
+      this.height
+    );
+
+    this.repositionHandles(boundsRect);
+    this.resizeHandles();
+  }
+
+  private resizeHandles() {
+    const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
+    const toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
+    this.handles.forEach((handle) => {
+      handle.scaleX = toolScaleX;
+      handle.scaleY = toolScaleY;
+    });
+  }
+
+  private repositionHandles(boundsRect) {
+    // TODO: reduce memory consumption here
+    this.handles.forEach((handle) => {
+      const point = handlePositionToRectPoint(handle.position, boundsRect);
+      handle.x = point.x;
+      handle.y = point.y;
+    });
+  }
+
+  /**
+   * Move tool
+   * Drag anywhere within the object bounds to move.
+   * Click to deselect.
+   */
+  private createMoveTool() {
+    let dragDistance = 0;
+    const moveTool = new createjs.Shape();
+    this.addToolTip(moveTool, "Move", "move");
+
+    let tBounds;
+    let targetStart;
+    let startX;
+    let startY;
+    let scaledReg;
+
+    moveTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      tBounds = this.target.getBounds();
+      targetStart = this.target.clone();
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+      scaledReg = {
+        x: this.target.regX * this.scaleX,
+        y: this.target.regY * this.scaleY,
+      };
+    });
+
+    moveTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      const newLocation = {
+        x: targetStart.x + moveEvent.stageX - startX,
+        y: targetStart.y + moveEvent.stageY - startY,
+      };
+      // constrain new location, if there is a boundary
+      if (this.boundary) {
+        const newBounds = new createjs.Rectangle(
+          newLocation.x - scaledReg.x,
+          newLocation.y - scaledReg.y,
+          tBounds.width * this.scaleX,
+          tBounds.height * this.scaleY
+        );
+        const constrainedBounds = constrainRectTo(newBounds, this.boundary);
+        newLocation.x = constrainedBounds.x + scaledReg.x;
+        newLocation.y = constrainedBounds.y + scaledReg.y;
+      }
+      this.target.set(newLocation);
+      dragDistance = calcDistance(
+        startX,
+        startY,
+        moveEvent.stageX,
+        moveEvent.stageY
+      );
+    });
+
+    moveTool.on("pressup", (upEvent: createjs.MouseEvent) => {
+      upEvent.stopPropagation();
+      dragDistance = 0;
+    });
+
+    // click to deselect
+    moveTool.on("click", () => {
+      // only deselect if there was very little movement on click
+      // which helps on mobile devices, where it's difficult to
+      // tap without dragging slightly
+      const MOVED_THRESHOLD = 10;
+      if (dragDistance < MOVED_THRESHOLD) {
+        this.unselect();
+        this.stage.update();
+      }
+    });
+    this.moveHitArea = new createjs.Shape();
+    moveTool.hitArea = this.moveHitArea;
+    return moveTool;
+  }
+
+  // init hScale tool
+  private createHorizontalScaleTool() {
+    const hScaleTool = this.createHandle("Stretch", "e-resize");
+    hScaleTool.graphics.drawRect(0, 0, this.controlsSize, this.controlsSize);
+
+    let tBounds;
+    let targetStart;
+    let startX;
+    let startY;
+
+    hScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      tBounds = this.target.getBounds();
+      targetStart = <DisplayObjectWithSize>this.target.clone().set({
+        width: tBounds.width,
+        height: tBounds.height,
+      });
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+    });
+    hScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      const distStart = calcDistance(startX, startY, this.x, this.y);
+      const distEnd = calcDistance(
+        moveEvent.stageX,
+        moveEvent.stageY,
+        this.x,
+        this.y
+      );
+      const rescaleFactor = distEnd / distStart;
+      const updates: any = {
+        scaleX: targetStart.scaleX * rescaleFactor,
+      };
+      // constrain to bounds
+      if (this.boundary) {
+        const newBounds = new createjs.Rectangle(
+          targetStart.x - targetStart.regX * updates.scaleX,
+          targetStart.y - targetStart.regY * targetStart.scaleY,
+          targetStart.width * updates.scaleX,
+          targetStart.height
+        );
+        const constrainedBounds = constrainRectTo(newBounds, this.boundary);
+        updates.scaleX = constrainedBounds.width / targetStart.width;
+        updates.x = constrainedBounds.x + targetStart.regX * updates.scaleX;
+      }
+      this.target.set(updates);
+    });
+
+    return hScaleTool;
+  }
+
+  // init vScale tool
+  private createVerticalScaleTool() {
+    const vScaleTool = this.createHandle("Stretch", "s-resize");
+    vScaleTool.graphics.drawRect(0, 0, this.controlsSize, this.controlsSize);
+
+    let tBounds;
+    let targetStart;
+    let startX;
+    let startY;
+
+    vScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      tBounds = this.target.getBounds();
+      targetStart = <DisplayObjectWithSize>this.target.clone().set({
+        width: tBounds.width,
+        height: tBounds.height,
+      });
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+    });
+    vScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      const distStart = calcDistance(startX, startY, this.x, this.y);
+      const distEnd = calcDistance(
+        moveEvent.stageX,
+        moveEvent.stageY,
+        this.x,
+        this.y
+      );
+      const rescaleFactor = distEnd / distStart;
+      const updates: any = {
+        scaleY: targetStart.scaleY * rescaleFactor,
+      };
+      // constrain to bounds
+      if (this.boundary) {
+        const newBounds = new createjs.Rectangle(
+          targetStart.x - targetStart.regX * targetStart.scaleX,
+          targetStart.y - targetStart.regY * updates.scaleY,
+          targetStart.width,
+          targetStart.height * updates.scaleY
+        );
+        const constrainedBounds = constrainRectTo(newBounds, this.boundary);
+        updates.scaleY = constrainedBounds.height / targetStart.height;
+        updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
+      }
+      this.target.set(updates);
+    });
+
+    return vScaleTool;
+  }
+
+  /**
+   * Scale tool:
+   * Changes display object's scale based on
+   * the difference in position away/near the
+   * registration point
+   */
+  private createScaleTool() {
+    const scaleTool = this.createHandle("Resize", "se-resize");
+    scaleTool.graphics.drawRect(0, 0, this.controlsSize, this.controlsSize);
+
+    let tBounds;
+    let targetStart;
+    let startX;
+    let startY;
+
+    scaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      tBounds = this.target.getBounds();
+      targetStart = <DisplayObjectWithSize>this.target.clone().set({
+        width: tBounds.width,
+        height: tBounds.height,
+      });
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+    });
+
+    scaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      const distStart = calcDistance(startX, startY, this.x, this.y);
+      const distEnd = calcDistance(
+        moveEvent.stageX,
+        moveEvent.stageY,
+        this.x,
+        this.y
+      );
+      const rescaleFactor = distEnd / distStart;
+      const updates: any = {
+        scaleX: targetStart.scaleX * rescaleFactor,
+        scaleY: targetStart.scaleY * rescaleFactor,
+      };
+      // constrain to bounds
+      if (this.boundary) {
+        const newBounds = new createjs.Rectangle(
+          targetStart.x - targetStart.regX * updates.scaleX,
+          targetStart.y - targetStart.regY * updates.scaleY,
+          targetStart.width * updates.scaleX,
+          targetStart.height * updates.scaleY
+        );
+        const constrainedBounds = constrainRectTo(newBounds, this.boundary);
+        updates.scaleX = constrainedBounds.width / targetStart.width;
+        updates.scaleY = constrainedBounds.height / targetStart.height;
+        updates.x = constrainedBounds.x + targetStart.regX * updates.scaleX;
+        updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
+      }
+      this.target.set(updates);
+    });
+
+    return scaleTool;
+  }
+
+  /**
+   * Rotate Tool:
+   * Rotates around registration point
+   * Work out delta angle between three points:
+   *  1. drag start point
+   *  2. registration point
+   *  3. drag end/current point
+   * Add that angle to the object's start rotation
+   */
+  private createRotateTool() {
+    const rotateTool = this.createHandle("Rotate", "pointer");
+    rotateTool.graphics.drawEllipse(0, 0, this.controlsSize, this.controlsSize);
+
+    let startRotation;
+    let startX;
+    let startY;
+
+    rotateTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      startRotation = this.rotation;
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+    });
+
+    rotateTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      // the drag point is relative to the display object x,y position on the stage (it's registration point)
+      const relativeStartPoint = {
+        x: startX - this.x,
+        y: startY - this.y,
+      };
+      const relativeEndPoint = {
+        x: moveEvent.stageX - this.x,
+        y: moveEvent.stageY - this.y,
+      };
+      const endAngle = calcAngleDegrees(relativeEndPoint.x, relativeEndPoint.y);
+      const startAngle = calcAngleDegrees(
+        relativeStartPoint.x,
+        relativeStartPoint.y
+      );
+      const deltaAngle = endAngle - startAngle;
+      // TODO: constrain to bounds
+      this.target.rotation = startRotation + deltaAngle;
+    });
+
+    return rotateTool;
+  }
+}
diff --git a/testem-client-hook.js b/testem-client-hook.js
new file mode 100644
index 0000000..43d3bc0
--- /dev/null
+++ b/testem-client-hook.js
@@ -0,0 +1,12 @@
+Testem.afterTests(function(config, data, callback) {
+  console.log("sending coverage results from client...");
+  var coverage = JSON.stringify(window.__coverage__);
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      callback();
+    }
+  };
+  xhr.open("POST", "/coverage", true);
+  xhr.send(coverage);
+});
diff --git a/testem-coverage-server.js b/testem-coverage-server.js
new file mode 100644
index 0000000..db10e76
--- /dev/null
+++ b/testem-coverage-server.js
@@ -0,0 +1,84 @@
+/** eslint-env node */
+const path = require("path");
+const http = require("http");
+const fs = require("fs");
+const shell = require("shelljs");
+
+const COVERAGE_SERVER_PORT = 7358;
+let server;
+
+function startCoverageServer(callback) {
+  const command = "npm run build";
+  shell.exec(command, function(code, output) {
+    if (code) {
+      callback(code, output);
+      return;
+    }
+
+    // if instrumented successfully
+    // start the server
+    server = http
+      .createServer(function(req, res) {
+        console.error(
+          "... Received coverage of",
+          req.headers["content-length"],
+          "length"
+        );
+        // need separate files per browser/client
+        let outputFile = ".nyc_output.json";
+        req.pipe(fs.createWriteStream(path.join(__dirname, "tmp", outputFile)));
+        // make sure we've got it all
+        req.on("end", res.end.bind(res));
+      })
+      .listen(COVERAGE_SERVER_PORT, function(serverErr) {
+        console.error(
+          "------ Listening for coverage on " + COVERAGE_SERVER_PORT
+        );
+        // when server is ready
+        // pass control back to testem
+        callback(serverErr);
+      });
+  });
+}
+
+function shutdownCoverageServer(callback) {
+  // shutdown teh server
+  server.close();
+
+  // generate report
+  shell.exec("npx nyc report", function(code, output) {
+    if (code) return callback(code, output);
+
+    // check on generated report
+    const lcov = shell.grep(
+      "end_of_record",
+      path.join(__dirname, "coverage/lcov.info")
+    );
+    const report = shell.grep(
+      "src/index.html",
+      path.join(__dirname, "coverage/lcov-report/index.html")
+    );
+
+    if (!lcov || !report) {
+      callback(new Error("Unable to generate report"));
+      return;
+    }
+
+    // everything is good
+    callback(null);
+  });
+}
+
+module.exports = {
+  proxies: {
+    "/coverage": {
+      target: "http://localhost:" + COVERAGE_SERVER_PORT
+    }
+  },
+
+  startCoverageServer,
+
+  shutdownCoverageServer,
+
+  clientFile: "testem-client-hook.js"
+};
diff --git a/testem.js b/testem.js
new file mode 100644
index 0000000..5e23670
--- /dev/null
+++ b/testem.js
@@ -0,0 +1,47 @@
+const coverageServer = require("./testem-coverage-server");
+
+const chromeArgs = ["--disable-gpu", "--remote-debugging-port=9222"];
+const firefoxArgs = [];
+
+if (process.env.HEADLESS) {
+  chromeArgs.unshift("--headless");
+  firefoxArgs.unshift("--headless");
+}
+
+let serve_files = [
+  { src: coverageServer.clientFile },
+  {
+    src:
+      "node_modules/@recreatejs/jasmine-pixelmatch/dist/jasmine-pixelmatch.js",
+  },
+  { src: "dist/easeljs.js" },
+  { src: "dist/createjs.util.FreeTransformTool.instrumented.js" },
+  { src: "dist/tests.umd.js" }
+];
+
+if (process.env.HEADLESS) {
+  serve_files.push({ src: "dist/esnext/tests/_headless.js" });
+}
+
+module.exports = {
+  launch_in_dev: ["Chrome"],
+  launch_in_ci: ["Chrome"],
+  browser_args: {
+    Chrome: chromeArgs,
+    Firefox: firefoxArgs
+  },
+  test_page: "testem.mustache",
+  src_files: ["src/**/*.ts", "tests/**/*.ts"],
+  serve_files,
+  css_files: [],
+  routes: {
+    "/img": "tests/images"
+  },
+  proxies: coverageServer.proxies,
+  before_tests: function(config, data, callback) {
+    coverageServer.startCoverageServer(callback);
+  },
+  after_tests: function(config, data, callback) {
+    coverageServer.shutdownCoverageServer(callback);
+  }
+};
diff --git a/testem.mustache b/testem.mustache
new file mode 100644
index 0000000..812c8db
--- /dev/null
+++ b/testem.mustache
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Tests</title>
+  <script src="/node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
+  <script src="/node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="/node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
+  <script src="/testem.js"></script>
+
+  {{#serve_files}}
+  <script src="{{{src}}}" {{#attrs}} {{&.}}{{/attrs}}></script>
+  {{/serve_files}}
+
+  <link rel="stylesheet" href="/node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
+
+  {{#css_files}}
+  <link rel="stylesheet" href="{{src}}" {{#attrs}} {{&.}}{{/attrs}}>
+  {{/css_files}}
+</head>
+
+<body>
+  <div id="jasmine_content"></div>
+</body>
+{{#footer_scripts}}
+<script src="{{{src}}}" {{#attrs}} {{&.}}{{/attrs}}></script>
+{{/footer_scripts}}
+
+</html>
\ No newline at end of file
diff --git a/tests/_headless.ts b/tests/_headless.ts
new file mode 100644
index 0000000..9ebb92f
--- /dev/null
+++ b/tests/_headless.ts
@@ -0,0 +1,2 @@
+// force html false for jasmine-pixelmatch
+jasmineRequire.html = false;
diff --git a/createjs.text-fix.js b/tests/createjs.text-fix.ts
similarity index 74%
rename from createjs.text-fix.js
rename to tests/createjs.text-fix.ts
index bf59a8c..ed680a4 100644
--- a/createjs.text-fix.js
+++ b/tests/createjs.text-fix.ts
@@ -6,14 +6,15 @@
  * @see https://stackoverflow.com/a/54256368/918605
  * @see https://github.com/CreateJS/EaselJS/issues/235
  */
-var cache = {};
-createjs.Text.prototype._drawTextLine = function(ctx, text, y) {
+const cache = {};
+//@ts-ignore private method hack
+createjs.Text.prototype._drawTextLine = function (ctx, text, y) {
   this.textBaseline = ctx.textBaseline = "alphabetic";
   if (!(this.font in cache)) {
-    var metrics = this.getMetrics();
+    const metrics = this.getMetrics();
     cache[this.font] = metrics.vOffset;
   }
-  var offset = cache[this.font] + 1;
+  const offset = cache[this.font] + 1;
   if (this.outline) {
     ctx.strokeText(text, 0, y - offset, this.maxWidth || 0xffff);
   } else {
diff --git a/tests/create.js.util.FreeTransformTool-test.js b/tests/freetransform-tests.ts
similarity index 65%
rename from tests/create.js.util.FreeTransformTool-test.js
rename to tests/freetransform-tests.ts
index 5768b70..5051e95 100644
--- a/tests/create.js.util.FreeTransformTool-test.js
+++ b/tests/freetransform-tests.ts
@@ -1,16 +1,20 @@
-describe("Smoke checks", function() {
-  it("is can access createjs and free transform tool", function() {
+import { getCanvas } from "@recreatejs/jasmine-pixelmatch/src/canvas-helpers";
+import FreeTransformTool from "freetransform";
+import { imgToImageData, loadImage } from "@recreatejs/jasmine-pixelmatch";
+
+describe("Smoke checks", function () {
+  it("is can access createjs and free transform tool", function () {
     expect(createjs).toBeTruthy();
-    expect(createjs.util.FreeTransformTool).toBeTruthy();
+    expect(FreeTransformTool).toBeTruthy();
   });
 });
 
-describe("Free transform tool", function() {
-  beforeEach(function() {
+describe("Free transform tool", function () {
+  beforeEach(function () {
     this.canvas = getCanvas(200, 200);
 
     // Disable anti-aliasing during testing to get around browser inconsistencies
-    let context = this.canvas.getContext("2d");
+    const context = this.canvas.getContext("2d");
     context.imageSmoothingEnabled = false;
 
     this.stage = new createjs.Stage(this.canvas);
@@ -20,7 +24,7 @@ describe("Free transform tool", function() {
     this.top = new createjs.Container();
     this.stage.addChild(this.top);
 
-    this.selectTool = new createjs.util.FreeTransformTool();
+    this.selectTool = new FreeTransformTool();
     this.top.addChild(this.selectTool);
 
     this.getImageData = () => {
@@ -30,8 +34,8 @@ describe("Free transform tool", function() {
     };
   });
 
-  it("can select an ellipse shape", async function() {
-    var ellipse = new createjs.Shape();
+  it("can select an ellipse shape", async function () {
+    const ellipse = new createjs.Shape();
     ellipse.x = this.canvas.width / 2;
     ellipse.y = this.canvas.height / 2;
     ellipse.setBounds(0, 0, 80, 120);
@@ -42,13 +46,13 @@ describe("Free transform tool", function() {
     this.selectTool.select(ellipse);
     this.stage.update();
 
-    let imgData = imgToImageData(await loadImage("img/selected-ellipse.png"));
+    const imgData = imgToImageData(await loadImage("img/selected-ellipse.png"));
 
     expect(this.getImageData()).toVisuallyEqual(imgData);
   });
 
-  it("can select a rotated rectangle", async function() {
-    var rectangle = new createjs.Shape();
+  it("can select a rotated rectangle", async function () {
+    const rectangle = new createjs.Shape();
     rectangle.x = this.canvas.width / 2;
     rectangle.y = this.canvas.height / 2;
     rectangle.setBounds(0, 0, 100, 130);
@@ -60,7 +64,7 @@ describe("Free transform tool", function() {
     this.selectTool.select(rectangle);
     this.stage.update();
 
-    let imgData = imgToImageData(
+    const imgData = imgToImageData(
       await loadImage("img/selected-rotated-rectangle.png")
     );
 
@@ -68,9 +72,9 @@ describe("Free transform tool", function() {
   });
 
   // TODO: this fails on different operating systems that render fonts differently
-  xit("can select text", async function() {
-    var text = new createjs.Text("Hello\nWorld", "40px Arial", "#052865");
-    var textBounds = text.getBounds();
+  xit("can select text", async function () {
+    const text = new createjs.Text("Hello\nWorld", "40px Arial", "#052865");
+    const textBounds = text.getBounds();
     text.regX = textBounds.width / 2;
     text.regY = textBounds.height / 2;
     text.x = this.canvas.width / 2;
@@ -81,7 +85,7 @@ describe("Free transform tool", function() {
     this.selectTool.select(text);
     this.stage.update();
 
-    let imgData = imgToImageData(await loadImage("img/selected-text.png"));
+    const imgData = imgToImageData(await loadImage("img/selected-text.png"));
 
     expect(this.getImageData()).toVisuallyEqual(imgData);
   });
diff --git a/tests/index.ts b/tests/index.ts
new file mode 100644
index 0000000..6c3914e
--- /dev/null
+++ b/tests/index.ts
@@ -0,0 +1,2 @@
+import "./freetransform-tests";
+import "./text-tests";
diff --git a/tests/jasmine-pixelmatch.d.ts b/tests/jasmine-pixelmatch.d.ts
new file mode 100644
index 0000000..1298198
--- /dev/null
+++ b/tests/jasmine-pixelmatch.d.ts
@@ -0,0 +1,15 @@
+// TODO: move these to the jasmine-pixelmatch project type definitions
+declare namespace jasmine {
+  interface Matchers<T> {
+    toVisuallyEqual(imagedata: ImageData): boolean;
+  }
+}
+
+declare const jasmineRequire: {
+  html: boolean;
+};
+
+declare const jasminePixelmatch: {
+  imgToImageData(img: HTMLImageElement): ImageData;
+  loadImage(url: string): Promise<HTMLImageElement>;
+};
diff --git a/tests/pixelmatch-helpers-test.js b/tests/pixelmatch-helpers-test.js
deleted file mode 100644
index 4a2f83a..0000000
--- a/tests/pixelmatch-helpers-test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-describe("Pixelmatch integration with jasmine", function() {
-  it("notices different images", async () => {
-    let refData = imgToImageData(await loadImage("img/first.png"));
-    let changedData = imgToImageData(await loadImage("img/second.png"));
-
-    expect(refData).not.toEqual(changedData);
-    expect(refData).not.toVisuallyEqual(changedData);
-  });
-
-  it("notices the same images", async () => {
-    let imgData = imgToImageData(await loadImage("img/first.png"));
-
-    expect(imgData).toEqual(imgData);
-    expect(imgData).toVisuallyEqual(imgData);
-  });
-});
diff --git a/tests/pixelmatch-helpers.js b/tests/pixelmatch-helpers.js
deleted file mode 100644
index 964efb1..0000000
--- a/tests/pixelmatch-helpers.js
+++ /dev/null
@@ -1,154 +0,0 @@
-function buildEl(element, content) {
-  element = document.createElement(element);
-  if (element && content) {
-    element.innerHTML = content;
-  }
-  return element;
-}
-
-function getCanvas(width, height) {
-  var canvas = document.createElement("canvas");
-  // TODO: support node canvas' also
-  if (width) canvas.width = width;
-  if (height) canvas.height = height;
-  return canvas;
-}
-
-function createCanvasFromImageData(imageData) {
-  let canvas = getCanvas(imageData.width, imageData.height);
-  let context = canvas.getContext("2d");
-  context.putImageData(imageData, 0, 0);
-  return canvas;
-}
-
-function isHTMLReport() {
-  return !!jasmineRequire.html;
-}
-
-function styleCanvas(canvas) {
-  canvas.style.border = "1px solid #ddd";
-  canvas.style.background = "white";
-}
-
-function buildError(
-  message,
-  actualCanvas,
-  expectedCanvas = null,
-  diffCanvas = null
-) {
-  if (!isHTMLReport()) {
-    let output = message;
-    if (actualCanvas) {
-      output += "\nActual: \n" + actualCanvas.toDataURL();
-    }
-    if (expectedCanvas) {
-      output += "\nExpected: \n" + expectedCanvas.toDataURL();
-    }
-    if (diffCanvas) {
-      output += "\nDiff: \n" + diffCanvas.toDataURL();
-    }
-    return output;
-  }
-  let html = buildEl("div", message);
-
-  styleCanvas(actualCanvas);
-  let actualDiv = buildEl("div", "Actual:<br/> ");
-  actualDiv.appendChild(actualCanvas);
-  html.appendChild(actualDiv);
-  if (expectedCanvas) {
-    styleCanvas(expectedCanvas);
-    let expectedDiv = buildEl("div", "Expected:<br/> ");
-    expectedDiv.appendChild(expectedCanvas);
-    html.appendChild(expectedDiv);
-  }
-  if (diffCanvas) {
-    styleCanvas(diffCanvas);
-    let diffDiv = buildEl("div", "Diff:<br/> ");
-    diffDiv.appendChild(diffCanvas);
-    html.appendChild(diffDiv);
-  }
-  return html;
-}
-
-let imageMatchers = {
-  toVisuallyEqual(util, customEqualityTesters) {
-    return {
-      compare(actual, expected) {
-        var result = {};
-
-        if (!expected) {
-          let actualCanvas = createCanvasFromImageData(actual);
-          result.message = buildError(
-            "No expected image defined",
-            actualCanvas
-          );
-          result.pass = false;
-          return result;
-        }
-
-        let width = expected.width;
-        let height = expected.height;
-
-        let diffCanvas = getCanvas(width, height);
-        let diffContext = diffCanvas.getContext("2d");
-        const diff = diffContext.createImageData(width, height);
-
-        try {
-          let differingPixels = pixelmatch(
-            expected.data,
-            actual.data,
-            diff.data,
-            width,
-            height,
-            { threshold: 0.6, diffMask: true, alpha: 1, includeAA: false }
-          );
-          diffContext.putImageData(diff, 0, 0);
-          result.pass = differingPixels === 0;
-
-          if (!result.pass) {
-            let actualCanvas = createCanvasFromImageData(actual);
-            let expectedCanvas = createCanvasFromImageData(expected);
-            let totalPixels = width * height;
-            let percentDifference = (
-              (differingPixels / totalPixels) *
-              100
-            ).toFixed(2);
-            let message = `Images have ${differingPixels}/${totalPixels} (${percentDifference}%) differing pixels`;
-
-            result.message = buildError(
-              message,
-              actualCanvas,
-              expectedCanvas,
-              diffCanvas
-            );
-          }
-        } catch (error) {
-          let actualCanvas = createCanvasFromImageData(actual);
-          let expectedCanvas = createCanvasFromImageData(expected);
-          result.pass = false;
-          result.message = buildError(
-            error.message,
-            actualCanvas,
-            expectedCanvas
-          );
-        }
-        return result;
-      }
-    };
-  }
-};
-
-let imageDataEquality = function(first, second) {
-  if (first instanceof ImageData && second instanceof ImageData) {
-    return (
-      first.width === second.width &&
-      first.height === second.height &&
-      pixelmatch(first.data, second.data, null, first.width, first.height) === 0
-    );
-  }
-};
-
-beforeEach(function() {
-  jasmine.addMatchers(imageMatchers);
-  jasmine.addCustomEqualityTester(imageDataEquality);
-});
diff --git a/tests/setup-helpers.js b/tests/setup-helpers.js
deleted file mode 100644
index 0f62578..0000000
--- a/tests/setup-helpers.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @param {HTMLImageElement} img
- * @returns {ImageData}
- */
-function imgToImageData(img) {
-  var canvas = document.createElement("canvas");
-  var context = canvas.getContext("2d");
-  canvas.width = img.naturalWidth;
-  canvas.height = img.naturalHeight;
-  context.drawImage(img, 0, 0);
-  return context.getImageData(0, 0, canvas.width, canvas.height);
-}
-
-/**
- * @param {String} url
- * @returns {Promise}
- */
-function loadImage(url) {
-  var img = new Image();
-  img.src = url;
-  return new Promise(resolve => {
-    img.onload = () => resolve(img);
-  });
-}
diff --git a/tests/easel-text-test.js b/tests/text-tests.ts
similarity index 59%
rename from tests/easel-text-test.js
rename to tests/text-tests.ts
index 7e3d343..b561b24 100644
--- a/tests/easel-text-test.js
+++ b/tests/text-tests.ts
@@ -1,9 +1,13 @@
-describe("Text in EaselJS", function() {
-  beforeEach(function() {
+import "./createjs.text-fix";
+import { getCanvas } from "@recreatejs/jasmine-pixelmatch/src/canvas-helpers";
+import { imgToImageData, loadImage } from "@recreatejs/jasmine-pixelmatch";
+
+describe("Text in EaselJS", function () {
+  beforeEach(function () {
     this.canvas = getCanvas(200, 200);
 
     // Disable anti-aliasing during testing to get around browser inconsistencies
-    let context = this.canvas.getContext("2d");
+    const context = this.canvas.getContext("2d");
     context.imageSmoothingEnabled = false;
 
     this.stage = new createjs.Stage(this.canvas);
@@ -17,8 +21,8 @@ describe("Text in EaselJS", function() {
     };
 
     this.createText = () => {
-      var text = new createjs.Text("Hello\nWorld", "40px Arial", "#052865");
-      var textBounds = text.getBounds();
+      const text = new createjs.Text("Hello\nWorld", "40px Arial", "#052865");
+      const textBounds = text.getBounds();
       text.regX = textBounds.width / 2;
       text.regY = textBounds.height / 2;
       text.x = this.canvas.width / 2;
@@ -28,45 +32,49 @@ describe("Text in EaselJS", function() {
   });
 
   // TODO: this fails on different operating systems that render fonts differently
-  xit("renders text baseline default", async function() {
-    var text = this.createText();
+  xit("renders text baseline default", async function () {
+    const text = this.createText();
     this.container.addChild(text);
     this.stage.update();
-    let imgData = imgToImageData(await loadImage("img/text-baseline-top.png"));
+    const imgData = imgToImageData(
+      await loadImage("img/text-baseline-top.png")
+    );
 
     expect(this.getImageData()).toVisuallyEqual(imgData);
   });
 
   // These methods are inconsistent across browsers
 
-  xit("renders text baseline top", async function() {
-    var text = this.createText();
+  xit("renders text baseline top", async function () {
+    const text = this.createText();
     text.textBaseline = "top";
     this.container.addChild(text);
     this.stage.update();
-    let imgData = imgToImageData(await loadImage("img/text-baseline-top.png"));
+    const imgData = imgToImageData(
+      await loadImage("img/text-baseline-top.png")
+    );
 
     expect(this.getImageData()).toVisuallyEqual(imgData);
   });
 
-  xit("renders text baseline bottom", async function() {
-    var text = this.createText();
+  xit("renders text baseline bottom", async function () {
+    const text = this.createText();
     text.textBaseline = "bottom";
     this.container.addChild(text);
     this.stage.update();
-    let imgData = imgToImageData(
+    const imgData = imgToImageData(
       await loadImage("img/text-baseline-bottom.png")
     );
 
     expect(this.getImageData()).toVisuallyEqual(imgData);
   });
 
-  xit("renders text baseline middle", async function() {
-    var text = this.createText();
+  xit("renders text baseline middle", async function () {
+    const text = this.createText();
     text.textBaseline = "middle";
     this.container.addChild(text);
     this.stage.update();
-    let imgData = imgToImageData(
+    const imgData = imgToImageData(
       await loadImage("img/text-baseline-middle.png")
     );
 
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e0d0438
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "lib": ["es2017", "dom"],
+    "target": "ES5",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "dist/esnext",
+    "baseUrl": "./",
+    "paths": {
+      "freetransform": ["src/freetransform"]
+    },
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "importHelpers": true,
+    "noEmitHelpers": true
+  },
+  "typedocOptions": {
+    "inputFiles": "src",
+    "mode": "file",
+    "out": "docs/",
+    "name": "freetransformtool",
+    "theme": "minimal"
+  }
+}