From aa596576c9d82d2efa535ccd3f6f4b92c8d0b21f Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 21:49:01 +1200
Subject: [PATCH 01/24] Converted code to typescript, test runner to testem

---
 .gitignore                                    |   6 +-
 .nycrc.json                                   |   8 +
 TODO.md                                       |  13 +
 karma.conf.js                                 |  94 ---
 package.json                                  |  64 +-
 {demo => public}/daisy.png                    | Bin
 {demo => public}/easeljs.js                   |   0
 {demo => public}/flower.svg                   |   0
 index.html => public/index.html               |   6 +-
 {demo => public}/spectre.min.css              |   0
 rollup.config.js                              |   7 +
 demo/demo.js => src/demo/index.ts             |  18 +-
 src/freetransform/helpers.ts                  |  58 ++
 .../freetransform/index.ts                    | 635 ++++++++----------
 src/types/createjs.d.ts                       |  12 +
 testem-client-hook.js                         |  12 +
 testem-coverage-server.js                     |  84 +++
 testem.js                                     |  43 ++
 testem.mustache                               |  29 +
 .../createjs.text-fix.ts                      |   1 +
 ...ormTool-test.js => freetransform-tests.ts} |   8 +-
 tests/index.ts                                |   2 +
 tests/jasmine-pixelmatch.d.ts                 |  15 +
 tests/pixelmatch-helpers-test.js              |  16 -
 tests/pixelmatch-helpers.js                   | 154 -----
 tests/setup-helpers.js                        |  24 -
 tests/{easel-text-test.js => text-tests.ts}   |   4 +
 tsconfig.json                                 |  24 +
 28 files changed, 676 insertions(+), 661 deletions(-)
 create mode 100644 .nycrc.json
 delete mode 100644 karma.conf.js
 rename {demo => public}/daisy.png (100%)
 rename {demo => public}/easeljs.js (100%)
 rename {demo => public}/flower.svg (100%)
 rename index.html => public/index.html (87%)
 rename {demo => public}/spectre.min.css (100%)
 create mode 100644 rollup.config.js
 rename demo/demo.js => src/demo/index.ts (93%)
 create mode 100644 src/freetransform/helpers.ts
 rename createjs.util.FreeTransformTool.js => src/freetransform/index.ts (60%)
 create mode 100644 src/types/createjs.d.ts
 create mode 100644 testem-client-hook.js
 create mode 100644 testem-coverage-server.js
 create mode 100644 testem.js
 create mode 100644 testem.mustache
 rename createjs.text-fix.js => tests/createjs.text-fix.ts (95%)
 rename tests/{create.js.util.FreeTransformTool-test.js => freetransform-tests.ts} (90%)
 create mode 100644 tests/index.ts
 create mode 100644 tests/jasmine-pixelmatch.d.ts
 delete mode 100644 tests/pixelmatch-helpers-test.js
 delete mode 100644 tests/pixelmatch-helpers.js
 delete mode 100644 tests/setup-helpers.js
 rename tests/{easel-text-test.js => text-tests.ts} (92%)
 create mode 100644 tsconfig.json

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/TODO.md b/TODO.md
index 60d503f..7ecb2a0 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,20 @@
 # TODO
 
+Convert to Typescript?
+
 Update border, and constrain elements
 
+## Transforming withing a container
+
+It is useful to support transforming elements within a container.
+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.
+
 ## Build test infrastructure
 
 - Build out test suite
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..baaccab 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,53 @@
   "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-s dev",
+    "dev": "run-p dev:server dev:watch",
+    "dev:server": "live-server --ignore=node_modules dist",
+    "dev:watch": "onchange src/* -- npm run build",
+    "build": "mkdir -p tmp && run-s build:compile bundle:umd copy",
+    "copy": "copyfiles -f public/* dist/",
+    "build:compile": "tsc --project .",
+    "bundle:umd": "run-s bundle:lib:umd bundle:demo:umd bundle:tests:umd",
+    "bundle:lib:umd": "rollup -c -f umd dist/esnext/src/freetransform/index.js --name=createjs.util.FreeTransformTool --file=dist/createjs.util.FreeTransformTool.js --sourcemap",
+    "bundle:lib:cov:umd": "rollup -c -f umd dist/instrumented/index.js --name=createjs.util.FreeTransformTool --file=dist/createjs.util.FreeTransformTool.instrumented.js --sourcemap",
+    "bundle:demo:umd": "rollup -c -f umd dist/esnext/src/demo/index.js --globals freetransform:createjs.util.FreeTransformTool --file=dist/demo.umd.js --sourcemap",
+    "bundle:tests:umd": "rollup -c -f umd dist/esnext/tests/index.js --globals freetransform:createjs.util.FreeTransformTool --file=dist/tests.umd.js --sourcemap",
+    "test": "run-s cov:instrument bundle:lib:cov:umd test:ci",
+    "test:ci": "testem ci .",
+    "test:server": "testem server .",
+    "cov:instrument": "mkdir -p tmp && nyc instrument dist/esnext/src/freetransform dist/instrumented",
+    "cov:view": "nyc report && live-server coverage/lcov-report",
+    "docs:build": "typedoc --tsconfig src",
+    "docs:view": "live-server docs",
+    "clean": "rm -Rf dist docs coverage tmp"
   },
   "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",
     "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/demo/demo.js b/src/demo/index.ts
similarity index 93%
rename from demo/demo.js
rename to src/demo/index.ts
index 56c0921..21279bf 100644
--- a/demo/demo.js
+++ b/src/demo/index.ts
@@ -1,3 +1,6 @@
+import FreeTransformTool from "freetransform";
+import { constrainObjectTo } from "../freetransform/helpers";
+
 var canvas, stage;
 var update = true;
 
@@ -32,7 +35,7 @@ function init() {
   top.addChild(boundaryLine);
 
   let controlsSize = 10 * window.devicePixelRatio;
-  selectTool = new createjs.util.FreeTransformTool(
+  selectTool = new FreeTransformTool(
     "#057",
     true,
     "rgba(255,255,255,0.8)",
@@ -45,13 +48,13 @@ function init() {
 
   // load the source image:
   var image = new Image();
-  image.src = "demo/daisy.png";
+  image.src = "daisy.png";
   image.onload = handleImageLoad;
 }
 
-function stop() {
-  createjs.Ticker.removeEventListener("tick", tick);
-}
+// function stop() {
+//   createjs.Ticker.removeEventListener("tick", tick);
+// }
 
 function updateBoundary(boundary) {
   var top = canvas.height * 0.1;
@@ -75,7 +78,7 @@ function drawBoundary() {
 
 function constrainStageObjects(objects) {
   objects.forEach(function(obj) {
-    createjs.util.constrainObjectTo(obj, boundary);
+    constrainObjectTo(obj, boundary);
   });
 }
 
@@ -156,10 +159,7 @@ 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
diff --git a/src/freetransform/helpers.ts b/src/freetransform/helpers.ts
new file mode 100644
index 0000000..8f4b6e9
--- /dev/null
+++ b/src/freetransform/helpers.ts
@@ -0,0 +1,58 @@
+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) {
+  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;
+}
diff --git a/createjs.util.FreeTransformTool.js b/src/freetransform/index.ts
similarity index 60%
rename from createjs.util.FreeTransformTool.js
rename to src/freetransform/index.ts
index fde675c..736a35f 100644
--- a/createjs.util.FreeTransformTool.js
+++ b/src/freetransform/index.ts
@@ -1,169 +1,235 @@
-// namespace:
-var createjs = this.createjs;
+import { constrainRectTo, calcDistance, calcAngleDegrees } from "./helpers";
 
-// package
-this.createjs.util = this.createjs.util || {};
+declare interface DisplayObjectWithSize extends createjs.DisplayObject {
+  width: number;
+  height: number;
+}
 
-// helpers
+export default class FreeTransformTool extends createjs.Container {
+  width: number;
+  height: number;
 
-function calcAngleDegrees(x, y) {
-  return (Math.atan2(y, x) * 180) / Math.PI;
-}
-this.createjs.util.calcAngleDegrees = calcAngleDegrees;
+  target: DisplayObjectWithSize = null;
 
-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;
+  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: number = 0.15;
+  controlsSize: number;
+  controlStrokeThickness: number = 1;
+
+  visible = false;
+
+  private border = null;
+
+  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.createMoveTool();
+    this.createHorizontalScaleTool();
+    this.createVerticalScaleTool();
+    this.createScaleTool();
+    this.createRotateTool();
+
+    this.on("tick", () => {
+      this.update();
+    });
   }
-  if (rect.x <= container.x) {
-    rect.x = container.x;
+
+  addToolTip(shape, name, cursor) {
+    shape.on("mouseover", () => {
+      this.setTitle(name);
+      this.setCursor(cursor);
+    });
+    shape.on("mouseout", () => {
+      this.setTitle();
+      this.setCursor("default");
+    });
   }
-  if (rect.x + rect.width > container.x + container.width) {
-    rect.x = container.x + container.width - rect.width;
+
+  setTitle(title = "") {
+    if (this.stage.canvas instanceof HTMLCanvasElement) {
+     this.stage.canvas.title = title;
+    }
   }
-  if (rect.y <= container.y) {
-    rect.y = container.y;
+
+  setCursor(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;
+    }
   }
-  if (rect.y + rect.height > container.y + container.height) {
-    rect.y = container.y + container.height - rect.height;
+
+  createHandle(name, cursor) {
+    var 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;
   }
-  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");
-      });
+  // public methods:
+  select(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;
+  }
 
-    // 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;
+  unselect() {
+    this.target = null;
+    this.visible = false;
+  }
+
+  update() {
+    if (this.target) {
+      this.select(this.target);
     }
+  }
 
-    /**
-     * Move tool
-     * Drag anywhere within the object bounds to move.
-     * Click to deselect.
-     */
+  /**
+   * Move tool
+   * Drag anywhere within the object bounds to move.
+   * Click to deselect.
+   */
+  private createMoveTool() {
     this.moveTool = new createjs.Shape();
-    addToolTip(this.moveTool, "Move", "move");
-    this.moveTool.on("mousedown", function(downEvent) {
+    this.addToolTip(this.moveTool, "Move", "move");
+    let that = this;
+    this.moveTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
       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
+          y: that.target.regY * that.target.scaleY,
         };
-        tool.on("pressmove", function(moveEvent) {
+        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
           that.alpha = that.controlsDim;
           var newLocation = {
             x: targetStart.x + moveEvent.stageX - downEvent.stageX,
-            y: targetStart.y + moveEvent.stageY - downEvent.stageY
+            y: targetStart.y + moveEvent.stageY - downEvent.stageY,
           };
           // constrain new location, if there is a boundary
           if (that.boundary) {
@@ -186,7 +252,7 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           );
           that.stage.update();
         });
-        tool.on("pressup", function(upEvent) {
+        tool.on("pressup", function (upEvent) {
           that.alpha = 1;
           tool.removeAllEventListeners("pressmove");
           upEvent.stopPropagation();
@@ -196,7 +262,7 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
       }
     });
     // click to deselect
-    this.moveTool.on("click", function(clickEvent) {
+    this.moveTool.on("click", function (clickEvent: createjs.MouseEvent) {
       // only deselect if there was very little movement on click
       // which helps on mobile devices, where it's difficult to
       // tap without dragging slightly
@@ -209,19 +275,27 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
     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) {
+  // init hScale tool
+  private createHorizontalScaleTool() {
+    let that = this;
+    this.hScaleTool = this.createHandle("Stretch", "e-resize");
+    this.hScaleTool.graphics.drawRect(
+      0,
+      0,
+      this.controlsSize,
+      this.controlsSize
+    );
+    this.hScaleTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
       if (that.target) {
         var tool = downEvent.currentTarget;
         var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone().set({
+        var targetStart = <DisplayObjectWithSize>that.target.clone().set({
           width: tBounds.width,
-          height: tBounds.height
+          height: tBounds.height,
         });
-        tool.on("pressmove", function(moveEvent) {
+        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
           that.alpha = that.controlsDim;
           var distStart = calcDistance(
             downEvent.stageX,
@@ -237,7 +311,8 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           );
           var rescaleFactor = distEnd / distStart;
           var updates = {
-            scaleX: targetStart.scaleX * rescaleFactor
+            scaleX: targetStart.scaleX * rescaleFactor,
+            x: null,
           };
           // constrain to bounds
           if (that.boundary) {
@@ -254,7 +329,7 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           that.target.set(updates);
           that.stage.update();
         });
-        tool.on("pressup", function() {
+        tool.on("pressup", function () {
           tool.removeAllEventListeners("pressmove");
           that.alpha = 1;
           that.stage.update();
@@ -262,19 +337,27 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
       }
     });
     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) {
+  // init vScale tool
+  private createVerticalScaleTool() {
+    let that = this;
+    this.vScaleTool = this.createHandle("Stretch", "s-resize");
+    this.vScaleTool.graphics.drawRect(
+      0,
+      0,
+      this.controlsSize,
+      this.controlsSize
+    );
+    this.vScaleTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
       if (that.target) {
         var tool = downEvent.currentTarget;
         var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone().set({
+        var targetStart = <DisplayObjectWithSize>that.target.clone().set({
           width: tBounds.width,
-          height: tBounds.height
+          height: tBounds.height,
         });
-        tool.on("pressmove", function(moveEvent) {
+        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
           that.alpha = that.controlsDim;
           var distStart = calcDistance(
             downEvent.stageX,
@@ -290,13 +373,14 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           );
           var rescaleFactor = distEnd / distStart;
           var updates = {
-            scaleY: targetStart.scaleY * rescaleFactor
+            scaleY: targetStart.scaleY * rescaleFactor,
+            y: null,
           };
           // constrain to bounds
           if (that.boundary) {
             var newBounds = new createjs.Rectangle(
-              targetStart.x - targetStart.regX * updates.scaleX,
-              targetStart.y - targetStart.regY * targetStart.scaleY,
+              targetStart.x - targetStart.regX * targetStart.scaleX,
+              targetStart.y - targetStart.regY * updates.scaleY,
               targetStart.width,
               targetStart.height * updates.scaleY
             );
@@ -307,7 +391,7 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           that.target.set(updates);
           that.stage.update();
         });
-        tool.on("pressup", function() {
+        tool.on("pressup", function () {
           tool.removeAllEventListeners("pressmove");
           that.alpha = 1;
           that.stage.update();
@@ -315,24 +399,32 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
       }
     });
     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) {
+  /**
+   * Scale tool:
+   * Changes display object's scale based on
+   * the difference in position away/near the
+   * registration point
+   */
+  createScaleTool() {
+    let that = this;
+    this.scaleTool = this.createHandle("Resize", "se-resize");
+    this.scaleTool.graphics.drawRect(
+      0,
+      0,
+      this.controlsSize,
+      this.controlsSize
+    );
+    this.scaleTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
       if (that.target) {
         var tool = downEvent.currentTarget;
         var tBounds = that.target.getBounds();
-        var targetStart = that.target.clone().set({
+        var targetStart = <DisplayObjectWithSize>that.target.clone().set({
           width: tBounds.width,
-          height: tBounds.height
+          height: tBounds.height,
         });
-        tool.on("pressmove", function(moveEvent) {
+        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
           that.alpha = that.controlsDim;
           var distStart = calcDistance(
             downEvent.stageX,
@@ -349,7 +441,9 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           var rescaleFactor = distEnd / distStart;
           var updates = {
             scaleX: targetStart.scaleX * rescaleFactor,
-            scaleY: targetStart.scaleY * rescaleFactor
+            scaleY: targetStart.scaleY * rescaleFactor,
+            x: null,
+            y: null,
           };
           // constrain to bounds
           if (that.boundary) {
@@ -368,7 +462,7 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
           that.target.set(updates);
           that.stage.update();
         });
-        tool.on("pressup", function() {
+        tool.on("pressup", function () {
           tool.removeAllEventListeners("pressmove");
           that.alpha = 1;
           that.stage.update();
@@ -376,32 +470,40 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
       }
     });
     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) {
+  /**
+   * 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
+   */
+  createRotateTool() {
+    let that = this;
+    this.rotateTool = this.createHandle("Rotate", "pointer");
+    this.rotateTool.graphics.drawEllipse(
+      0,
+      0,
+      this.controlsSize,
+      this.controlsSize
+    );
+    this.rotateTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
       if (that.target) {
         var tool = downEvent.currentTarget;
         var startRotation = that.target.rotation;
-        tool.on("pressmove", function(moveEvent) {
+        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
           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
+            y: downEvent.stageY - that.target.y,
           };
           var relativeEndPoint = {
             x: moveEvent.stageX - that.target.x,
-            y: moveEvent.stageY - that.target.y
+            y: moveEvent.stageY - that.target.y,
           };
           var endAngle = calcAngleDegrees(
             relativeEndPoint.x,
@@ -412,11 +514,11 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
             relativeStartPoint.y
           );
           var deltaAngle = endAngle - startAngle;
-          // TTODO: constrain to bounds
+          // TODO: constrain to bounds
           that.target.rotation = startRotation + deltaAngle;
           that.stage.update();
         });
-        tool.on("pressup", function() {
+        tool.on("pressup", function () {
           tool.removeAllEventListeners("pressmove");
           that.alpha = 1;
           that.stage.update();
@@ -424,146 +526,5 @@ this.createjs.util.constrainObjectTo = constrainObjectTo;
       }
     });
     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/src/types/createjs.d.ts b/src/types/createjs.d.ts
new file mode 100644
index 0000000..2e0cd02
--- /dev/null
+++ b/src/types/createjs.d.ts
@@ -0,0 +1,12 @@
+
+declare namespace createjs {
+    namespace util {
+        
+    }
+    namespace Graphics {
+      class StrokeDash {
+        constructor(segments: Array<number>, offset?: number);
+      }
+    }
+  }
+  
\ No newline at end of file
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..86172e8
--- /dev/null
+++ b/testem.js
@@ -0,0 +1,43 @@
+const coverageServer = require("./testem-coverage-server");
+
+let chromeArgs = ["--disable-gpu", "--remote-debugging-port=9222"];
+let firefoxArgs = [];
+
+if (process.env.HEADLESS) {
+  chromeArgs.unshift("--headless");
+  firefoxArgs.unshift("--headless");
+}
+
+let serve_files = [
+  { src: coverageServer.clientFile },
+  { src: "dist/easeljs.js" },
+  { src: "dist/createjs.util.FreeTransformTool.instrumented.js" },
+  { src: "dist/tests.umd.js" }
+];
+
+if (!process.env.HEADLESS) {
+  serve_files.push({ src: "!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/createjs.text-fix.js b/tests/createjs.text-fix.ts
similarity index 95%
rename from createjs.text-fix.js
rename to tests/createjs.text-fix.ts
index bf59a8c..91919eb 100644
--- a/createjs.text-fix.js
+++ b/tests/createjs.text-fix.ts
@@ -7,6 +7,7 @@
  * @see https://github.com/CreateJS/EaselJS/issues/235
  */
 var cache = {};
+//@ts-ignore private method hack
 createjs.Text.prototype._drawTextLine = function(ctx, text, y) {
   this.textBaseline = ctx.textBaseline = "alphabetic";
   if (!(this.font in cache)) {
diff --git a/tests/create.js.util.FreeTransformTool-test.js b/tests/freetransform-tests.ts
similarity index 90%
rename from tests/create.js.util.FreeTransformTool-test.js
rename to tests/freetransform-tests.ts
index 5768b70..775b0c6 100644
--- a/tests/create.js.util.FreeTransformTool-test.js
+++ b/tests/freetransform-tests.ts
@@ -1,7 +1,11 @@
+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();
   });
 });
 
@@ -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 = () => {
diff --git a/tests/index.ts b/tests/index.ts
new file mode 100644
index 0000000..561d703
--- /dev/null
+++ b/tests/index.ts
@@ -0,0 +1,2 @@
+import "./freetransform-tests";
+import "./text-tests";
\ No newline at end of file
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 92%
rename from tests/easel-text-test.js
rename to tests/text-tests.ts
index 7e3d343..5fc7f9c 100644
--- a/tests/easel-text-test.js
+++ b/tests/text-tests.ts
@@ -1,3 +1,7 @@
+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);
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"
+  }
+}

From 58a02c0d09cd0f731bcfeffcfdb0319520c3d8d2 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 21:54:13 +1200
Subject: [PATCH 02/24] Fix travis config to perform build prior to running
 tests

---
 .travis.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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

From f8c9b62d21990f1a0c7f091d128b3f30453c4a2e Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 22:06:04 +1200
Subject: [PATCH 03/24] Improve watch server configuration

---
 package.json | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index baaccab..170547c 100644
--- a/package.json
+++ b/package.json
@@ -24,26 +24,27 @@
   ],
   "browser": "dist/createjs.util.FreeTransformTool.js",
   "scripts": {
-    "start": "run-s dev",
-    "dev": "run-p dev:server dev:watch",
-    "dev:server": "live-server --ignore=node_modules dist",
-    "dev:watch": "onchange src/* -- npm run build",
-    "build": "mkdir -p tmp && run-s build:compile bundle:umd copy",
+    "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:umd": "run-s bundle:lib:umd bundle:demo:umd bundle:tests:umd",
-    "bundle:lib:umd": "rollup -c -f umd dist/esnext/src/freetransform/index.js --name=createjs.util.FreeTransformTool --file=dist/createjs.util.FreeTransformTool.js --sourcemap",
-    "bundle:lib:cov:umd": "rollup -c -f umd dist/instrumented/index.js --name=createjs.util.FreeTransformTool --file=dist/createjs.util.FreeTransformTool.instrumented.js --sourcemap",
-    "bundle:demo:umd": "rollup -c -f umd dist/esnext/src/demo/index.js --globals freetransform:createjs.util.FreeTransformTool --file=dist/demo.umd.js --sourcemap",
-    "bundle:tests:umd": "rollup -c -f umd dist/esnext/tests/index.js --globals freetransform:createjs.util.FreeTransformTool --file=dist/tests.umd.js --sourcemap",
-    "test": "run-s cov:instrument bundle:lib:cov:umd test:ci",
-    "test:ci": "testem ci .",
-    "test:server": "testem server .",
+    "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 cov:instrument bundle:lib:cov test:ci",
+    "test:ci": "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"
+    "clean": "rm -Rf dist docs coverage tmp",
+    "server": "live-server dist"
   },
   "devDependencies": {
     "@recreatejs/jasmine-pixelmatch": "^0.1.0",

From 8cccc68ec2ab5dc94f462120208849b31f10ce2f Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 22:23:34 +1200
Subject: [PATCH 04/24] Introduce eslint for typescript, and fix issues

---
 .eslintignore                |   3 +
 .eslintrc.json               |  29 ++--
 package.json                 |   3 +-
 src/demo/index.ts            |  41 +++---
 src/freetransform/helpers.ts |   6 +-
 src/freetransform/index.ts   | 261 +++++++++++++++++------------------
 src/types/createjs.d.ts      |  12 --
 tests/createjs.text-fix.ts   |   8 +-
 tests/freetransform-tests.ts |  30 ++--
 tests/index.ts               |   2 +-
 tests/text-tests.ts          |  38 ++---
 11 files changed, 211 insertions(+), 222 deletions(-)
 create mode 100644 .eslintignore
 delete mode 100644 src/types/createjs.d.ts

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/package.json b/package.json
index 170547c..60723ed 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "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 cov:instrument bundle:lib:cov test:ci",
+    "test": "run-s lint cov:instrument bundle:lib:cov test:ci",
     "test:ci": "testem ci .",
     "test:server": "testem server .",
     "watch": "run-p \"build:compile -- --watch\" \"bundle:lib -- --watch\" \"bundle:demo -- --watch\"",
@@ -56,6 +56,7 @@
     "@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",
     "live-server": "^1.2.1",
     "npm-run-all": "^4.1.5",
diff --git a/src/demo/index.ts b/src/demo/index.ts
index 21279bf..47bd8f8 100644
--- a/src/demo/index.ts
+++ b/src/demo/index.ts
@@ -1,15 +1,15 @@
 import FreeTransformTool from "freetransform";
 import { constrainObjectTo } from "../freetransform/helpers";
 
-var canvas, stage;
-var update = true;
+let canvas, stage;
+let update = true;
 
-var boundary;
-var boundaryLine;
+let boundary;
+let boundaryLine;
 
-var selectTool;
+let selectTool;
 
-var container;
+let container;
 
 function init() {
   // create stage and point it to the canvas:
@@ -24,7 +24,7 @@ function init() {
   stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
 
   // set up free transform tool
-  var top = new createjs.Container();
+  const top = new createjs.Container();
   top.name = "top";
   stage.addChild(top);
 
@@ -34,7 +34,7 @@ function init() {
   boundaryLine = new createjs.Shape();
   top.addChild(boundaryLine);
 
-  let controlsSize = 10 * window.devicePixelRatio;
+  const controlsSize = 10 * window.devicePixelRatio;
   selectTool = new FreeTransformTool(
     "#057",
     true,
@@ -47,7 +47,7 @@ function init() {
   top.addChild(selectTool);
 
   // load the source image:
-  var image = new Image();
+  const image = new Image();
   image.src = "daisy.png";
   image.onload = handleImageLoad;
 }
@@ -57,9 +57,9 @@ function init() {
 // }
 
 function updateBoundary(boundary) {
-  var top = canvas.height * 0.1;
-  var left = canvas.width * 0.1;
-  var padding = Math.min(top, left);
+  const top = canvas.height * 0.1;
+  const left = canvas.width * 0.1;
+  const padding = Math.min(top, left);
   boundary.setValues(
     padding,
     padding,
@@ -83,13 +83,12 @@ function constrainStageObjects(objects) {
 }
 
 function handleImageLoad(event) {
-  var image = event.target;
-  var bitmap;
+  const image = event.target;
   container = new createjs.Container();
   stage.addChildAt(container, 0);
 
   // Shape
-  var ellipse = new createjs.Shape();
+  const ellipse = new createjs.Shape();
   ellipse.x = canvas.width / 2;
   ellipse.y = canvas.height / 4;
   ellipse.setBounds(0, 0, 200, 300);
@@ -103,7 +102,7 @@ function handleImageLoad(event) {
   container.addChild(ellipse);
 
   // Bitmap
-  bitmap = new createjs.Bitmap(image);
+  const bitmap = new createjs.Bitmap(image);
   bitmap.x = canvas.width / 2;
   bitmap.y = canvas.height / 6;
   bitmap.rotation = -25 | 0;
@@ -115,8 +114,8 @@ function handleImageLoad(event) {
   container.addChild(bitmap);
 
   // Text
-  var text = new createjs.Text("Hello\nWorld", "70px Arial", "#052865");
-  var textBounds = text.getBounds();
+  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;
@@ -125,7 +124,7 @@ function handleImageLoad(event) {
   text.rotation = 5 | 0;
   text.cursor = "pointer";
 
-  var hit = new createjs.Shape();
+  const hit = new createjs.Shape();
   hit.graphics
     .beginFill("#000")
     .drawRect(0, 0, text.getBounds().width, text.getBounds().height);
@@ -154,11 +153,11 @@ function tick(event) {
   }
 }
 
-var containerElement = document.getElementById("CanvasContainer");
+const containerElement = document.getElementById("CanvasContainer");
 window.addEventListener("resize", handleResize);
 function handleResize() {
   selectTool.unselect();
-  var w = containerElement.clientWidth; // -2 accounts for the border
+  const w = containerElement.clientWidth; // -2 accounts for the border
   stage.canvas.width = w;
 
   updateBoundary(boundary);
diff --git a/src/freetransform/helpers.ts b/src/freetransform/helpers.ts
index 8f4b6e9..e16c7d6 100644
--- a/src/freetransform/helpers.ts
+++ b/src/freetransform/helpers.ts
@@ -36,10 +36,10 @@ export function constrainRectTo(rect, container) {
 
 // constrains a display object to a given rect
 export function constrainObjectTo(obj, rect) {
-  var bounds = obj.getBounds();
+  const bounds = obj.getBounds();
   bounds.x = obj.x - obj.regX * obj.scaleX;
   bounds.y = obj.y - obj.regY * obj.scaleY;
-  var constrained = new createjs.Rectangle(
+  const constrained = new createjs.Rectangle(
     bounds.x,
     bounds.y,
     bounds.width,
@@ -49,7 +49,7 @@ export function constrainObjectTo(obj, 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 = {
+  const newScale = {
     x: constrained.width / bounds.width,
     y: constrained.height / bounds.height,
   };
diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 736a35f..6852219 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -24,9 +24,9 @@ export default class FreeTransformTool extends createjs.Container {
   color: string;
   lineColor: string;
 
-  controlsDim: number = 0.15;
+  controlsDim = 0.15;
   controlsSize: number;
-  controlStrokeThickness: number = 1;
+  controlStrokeThickness = 1;
 
   visible = false;
 
@@ -80,7 +80,7 @@ export default class FreeTransformTool extends createjs.Container {
   }
 
   setCursor(cursor) {
-    var cursors = [
+    const cursors = [
       "e-resize",
       "se-resize",
       "s-resize",
@@ -90,12 +90,12 @@ export default class FreeTransformTool extends createjs.Container {
       "n-resize",
       "ne-resize",
     ];
-    var index = cursors.indexOf(cursor);
+    const index = cursors.indexOf(cursor);
     if (index >= 0) {
-      var angle = 45;
-      var rotation = this.target.rotation;
+      const angle = 45;
+      let rotation = this.target.rotation;
       rotation = rotation + angle / 2;
-      var newIndex = index + Math.floor(rotation / angle);
+      let newIndex = index + Math.floor(rotation / angle);
       newIndex = newIndex % cursors.length;
       document.body.style.cursor = cursors[newIndex];
     } else {
@@ -104,7 +104,7 @@ export default class FreeTransformTool extends createjs.Container {
   }
 
   createHandle(name, cursor) {
-    var shape = new createjs.Shape();
+    const shape = new createjs.Shape();
     this.addToolTip(shape, name, cursor);
     shape.graphics
       .beginStroke(this.lineColor)
@@ -120,7 +120,7 @@ export default class FreeTransformTool extends createjs.Container {
     if (target) {
       // copy object translation/transformation
       this.target = target;
-      var bounds = target.getBounds();
+      const bounds = target.getBounds();
       this.width = bounds.width;
       this.height = bounds.height;
       this.scaleX = target.scaleX;
@@ -156,8 +156,8 @@ export default class FreeTransformTool extends createjs.Container {
         .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);
+      const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
+      const toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
 
       // draw move hit area
       this.moveHitArea.graphics
@@ -196,12 +196,12 @@ export default class FreeTransformTool extends createjs.Container {
     return;
   }
 
-  unselect() {
+  unselect() : void {
     this.target = null;
     this.visible = false;
   }
 
-  update() {
+  update() : void {
     if (this.target) {
       this.select(this.target);
     }
@@ -215,49 +215,48 @@ export default class FreeTransformTool extends createjs.Container {
   private createMoveTool() {
     this.moveTool = new createjs.Shape();
     this.addToolTip(this.moveTool, "Move", "move");
-    let that = this;
-    this.moveTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
-      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,
+    this.moveTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      if (this.target) {
+        const tool = downEvent.currentTarget;
+        const tBounds = this.target.getBounds();
+        const targetStart = this.target.clone();
+        const scaledReg = {
+          x: this.target.regX * this.target.scaleX,
+          y: this.target.regY * this.target.scaleY,
         };
-        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
-          that.alpha = that.controlsDim;
-          var newLocation = {
+        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+          this.alpha = this.controlsDim;
+          const 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(
+          if (this.boundary) {
+            const newBounds = new createjs.Rectangle(
               newLocation.x - scaledReg.x,
               newLocation.y - scaledReg.y,
-              tBounds.width * that.target.scaleX,
-              tBounds.height * that.target.scaleY
+              tBounds.width * this.target.scaleX,
+              tBounds.height * this.target.scaleY
             );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
+            const constrainedBounds = constrainRectTo(newBounds, this.boundary);
             newLocation.x = constrainedBounds.x + scaledReg.x;
             newLocation.y = constrainedBounds.y + scaledReg.y;
           }
-          that.target.set(newLocation);
+          this.target.set(newLocation);
           tool.dragDistance = calcDistance(
             downEvent.stageX,
             downEvent.stageY,
             moveEvent.stageX,
             moveEvent.stageY
           );
-          that.stage.update();
+          this.stage.update();
         });
-        tool.on("pressup", function (upEvent) {
-          that.alpha = 1;
+        tool.on("pressup", (upEvent) => {
+          this.alpha = 1;
           tool.removeAllEventListeners("pressmove");
           upEvent.stopPropagation();
           tool.dragDistance = 0;
-          that.stage.update();
+          this.stage.update();
         });
       }
     });
@@ -266,10 +265,10 @@ export default class FreeTransformTool extends createjs.Container {
       // 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;
+      const movedThreshold = 10;
       if (clickEvent.currentTarget.dragDistance < movedThreshold) {
-        that.unselect();
-        that.stage.update();
+        this.unselect();
+        this.stage.update();
       }
     });
     this.moveHitArea = new createjs.Shape();
@@ -279,7 +278,6 @@ export default class FreeTransformTool extends createjs.Container {
 
   // init hScale tool
   private createHorizontalScaleTool() {
-    let that = this;
     this.hScaleTool = this.createHandle("Stretch", "e-resize");
     this.hScaleTool.graphics.drawRect(
       0,
@@ -287,52 +285,52 @@ export default class FreeTransformTool extends createjs.Container {
       this.controlsSize,
       this.controlsSize
     );
-    this.hScaleTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = <DisplayObjectWithSize>that.target.clone().set({
+    this.hScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      if (this.target) {
+        const tool = downEvent.currentTarget;
+        const tBounds = this.target.getBounds();
+        const targetStart = <DisplayObjectWithSize>this.target.clone().set({
           width: tBounds.width,
           height: tBounds.height,
         });
-        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
-          that.alpha = that.controlsDim;
-          var distStart = calcDistance(
+        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+          this.alpha = this.controlsDim;
+          const distStart = calcDistance(
             downEvent.stageX,
             downEvent.stageY,
-            that.target.x,
-            that.target.y
+            this.target.x,
+            this.target.y
           );
-          var distEnd = calcDistance(
+          const distEnd = calcDistance(
             moveEvent.stageX,
             moveEvent.stageY,
-            that.target.x,
-            that.target.y
+            this.target.x,
+            this.target.y
           );
-          var rescaleFactor = distEnd / distStart;
-          var updates = {
+          const rescaleFactor = distEnd / distStart;
+          const updates = {
             scaleX: targetStart.scaleX * rescaleFactor,
             x: null,
           };
           // constrain to bounds
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
+          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
             );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
+            const constrainedBounds = constrainRectTo(newBounds, this.boundary);
             updates.scaleX = constrainedBounds.width / targetStart.width;
             updates.x = constrainedBounds.x + targetStart.regX * updates.scaleX;
           }
-          that.target.set(updates);
-          that.stage.update();
+          this.target.set(updates);
+          this.stage.update();
         });
-        tool.on("pressup", function () {
+        tool.on("pressup", () => {
           tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
+          this.alpha = 1;
+          this.stage.update();
         });
       }
     });
@@ -341,7 +339,6 @@ export default class FreeTransformTool extends createjs.Container {
 
   // init vScale tool
   private createVerticalScaleTool() {
-    let that = this;
     this.vScaleTool = this.createHandle("Stretch", "s-resize");
     this.vScaleTool.graphics.drawRect(
       0,
@@ -349,52 +346,52 @@ export default class FreeTransformTool extends createjs.Container {
       this.controlsSize,
       this.controlsSize
     );
-    this.vScaleTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = <DisplayObjectWithSize>that.target.clone().set({
+    this.vScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      if (this.target) {
+        const tool = downEvent.currentTarget;
+        const tBounds = this.target.getBounds();
+        const targetStart = <DisplayObjectWithSize>this.target.clone().set({
           width: tBounds.width,
           height: tBounds.height,
         });
-        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
-          that.alpha = that.controlsDim;
-          var distStart = calcDistance(
+        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+          this.alpha = this.controlsDim;
+          const distStart = calcDistance(
             downEvent.stageX,
             downEvent.stageY,
-            that.target.x,
-            that.target.y
+            this.target.x,
+            this.target.y
           );
-          var distEnd = calcDistance(
+          const distEnd = calcDistance(
             moveEvent.stageX,
             moveEvent.stageY,
-            that.target.x,
-            that.target.y
+            this.target.x,
+            this.target.y
           );
-          var rescaleFactor = distEnd / distStart;
-          var updates = {
+          const rescaleFactor = distEnd / distStart;
+          const updates = {
             scaleY: targetStart.scaleY * rescaleFactor,
             y: null,
           };
           // constrain to bounds
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
+          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
             );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
+            const constrainedBounds = constrainRectTo(newBounds, this.boundary);
             updates.scaleY = constrainedBounds.height / targetStart.height;
             updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
           }
-          that.target.set(updates);
-          that.stage.update();
+          this.target.set(updates);
+          this.stage.update();
         });
-        tool.on("pressup", function () {
+        tool.on("pressup", () => {
           tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
+          this.alpha = 1;
+          this.stage.update();
         });
       }
     });
@@ -407,8 +404,7 @@ export default class FreeTransformTool extends createjs.Container {
    * the difference in position away/near the
    * registration point
    */
-  createScaleTool() {
-    let that = this;
+  private createScaleTool() {
     this.scaleTool = this.createHandle("Resize", "se-resize");
     this.scaleTool.graphics.drawRect(
       0,
@@ -416,56 +412,56 @@ export default class FreeTransformTool extends createjs.Container {
       this.controlsSize,
       this.controlsSize
     );
-    this.scaleTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var tBounds = that.target.getBounds();
-        var targetStart = <DisplayObjectWithSize>that.target.clone().set({
+    this.scaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      if (this.target) {
+        const tool = downEvent.currentTarget;
+        const tBounds = this.target.getBounds();
+        const targetStart = <DisplayObjectWithSize>this.target.clone().set({
           width: tBounds.width,
           height: tBounds.height,
         });
-        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
-          that.alpha = that.controlsDim;
-          var distStart = calcDistance(
+        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+          this.alpha = this.controlsDim;
+          const distStart = calcDistance(
             downEvent.stageX,
             downEvent.stageY,
-            that.target.x,
-            that.target.y
+            this.target.x,
+            this.target.y
           );
-          var distEnd = calcDistance(
+          const distEnd = calcDistance(
             moveEvent.stageX,
             moveEvent.stageY,
-            that.target.x,
-            that.target.y
+            this.target.x,
+            this.target.y
           );
-          var rescaleFactor = distEnd / distStart;
-          var updates = {
+          const rescaleFactor = distEnd / distStart;
+          const updates = {
             scaleX: targetStart.scaleX * rescaleFactor,
             scaleY: targetStart.scaleY * rescaleFactor,
             x: null,
             y: null,
           };
           // constrain to bounds
-          if (that.boundary) {
-            var newBounds = new createjs.Rectangle(
+          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
             );
-            var constrainedBounds = constrainRectTo(newBounds, that.boundary);
+            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;
           }
-          that.target.set(updates);
-          that.stage.update();
+          this.target.set(updates);
+          this.stage.update();
         });
-        tool.on("pressup", function () {
+        tool.on("pressup", () => {
           tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
+          this.alpha = 1;
+          this.stage.update();
         });
       }
     });
@@ -481,8 +477,7 @@ export default class FreeTransformTool extends createjs.Container {
    *  3. drag end/current point
    * Add that angle to the object's start rotation
    */
-  createRotateTool() {
-    let that = this;
+  private createRotateTool() {
     this.rotateTool = this.createHandle("Rotate", "pointer");
     this.rotateTool.graphics.drawEllipse(
       0,
@@ -490,38 +485,38 @@ export default class FreeTransformTool extends createjs.Container {
       this.controlsSize,
       this.controlsSize
     );
-    this.rotateTool.on("mousedown", function (downEvent: createjs.MouseEvent) {
-      if (that.target) {
-        var tool = downEvent.currentTarget;
-        var startRotation = that.target.rotation;
-        tool.on("pressmove", function (moveEvent: createjs.MouseEvent) {
-          that.alpha = 0.1;
+    this.rotateTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+      if (this.target) {
+        const tool = downEvent.currentTarget;
+        const startRotation = this.target.rotation;
+        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+          this.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,
+          const relativeStartPoint = {
+            x: downEvent.stageX - this.target.x,
+            y: downEvent.stageY - this.target.y,
           };
-          var relativeEndPoint = {
-            x: moveEvent.stageX - that.target.x,
-            y: moveEvent.stageY - that.target.y,
+          const relativeEndPoint = {
+            x: moveEvent.stageX - this.target.x,
+            y: moveEvent.stageY - this.target.y,
           };
-          var endAngle = calcAngleDegrees(
+          const endAngle = calcAngleDegrees(
             relativeEndPoint.x,
             relativeEndPoint.y
           );
-          var startAngle = calcAngleDegrees(
+          const startAngle = calcAngleDegrees(
             relativeStartPoint.x,
             relativeStartPoint.y
           );
-          var deltaAngle = endAngle - startAngle;
+          const deltaAngle = endAngle - startAngle;
           // TODO: constrain to bounds
-          that.target.rotation = startRotation + deltaAngle;
-          that.stage.update();
+          this.target.rotation = startRotation + deltaAngle;
+          this.stage.update();
         });
-        tool.on("pressup", function () {
+        tool.on("pressup", () => {
           tool.removeAllEventListeners("pressmove");
-          that.alpha = 1;
-          that.stage.update();
+          this.alpha = 1;
+          this.stage.update();
         });
       }
     });
diff --git a/src/types/createjs.d.ts b/src/types/createjs.d.ts
deleted file mode 100644
index 2e0cd02..0000000
--- a/src/types/createjs.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-
-declare namespace createjs {
-    namespace util {
-        
-    }
-    namespace Graphics {
-      class StrokeDash {
-        constructor(segments: Array<number>, offset?: number);
-      }
-    }
-  }
-  
\ No newline at end of file
diff --git a/tests/createjs.text-fix.ts b/tests/createjs.text-fix.ts
index 91919eb..ed680a4 100644
--- a/tests/createjs.text-fix.ts
+++ b/tests/createjs.text-fix.ts
@@ -6,15 +6,15 @@
  * @see https://stackoverflow.com/a/54256368/918605
  * @see https://github.com/CreateJS/EaselJS/issues/235
  */
-var cache = {};
+const cache = {};
 //@ts-ignore private method hack
-createjs.Text.prototype._drawTextLine = function(ctx, text, y) {
+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/freetransform-tests.ts b/tests/freetransform-tests.ts
index 775b0c6..5051e95 100644
--- a/tests/freetransform-tests.ts
+++ b/tests/freetransform-tests.ts
@@ -2,19 +2,19 @@ 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() {
+describe("Smoke checks", function () {
+  it("is can access createjs and free transform tool", function () {
     expect(createjs).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);
@@ -34,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);
@@ -46,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);
@@ -64,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")
     );
 
@@ -72,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;
@@ -85,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
index 561d703..6c3914e 100644
--- a/tests/index.ts
+++ b/tests/index.ts
@@ -1,2 +1,2 @@
 import "./freetransform-tests";
-import "./text-tests";
\ No newline at end of file
+import "./text-tests";
diff --git a/tests/text-tests.ts b/tests/text-tests.ts
index 5fc7f9c..b561b24 100644
--- a/tests/text-tests.ts
+++ b/tests/text-tests.ts
@@ -2,12 +2,12 @@ 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() {
+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);
@@ -21,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;
@@ -32,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")
     );
 

From 5784231b11598ab18ead15bb3df4c4b407f0b602 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 22:28:42 +1200
Subject: [PATCH 05/24] Attempt to fix headless tests

---
 testem.js          | 6 +++---
 tests/_headless.ts | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 tests/_headless.ts

diff --git a/testem.js b/testem.js
index 86172e8..18286c8 100644
--- a/testem.js
+++ b/testem.js
@@ -15,8 +15,8 @@ let serve_files = [
   { src: "dist/tests.umd.js" }
 ];
 
-if (!process.env.HEADLESS) {
-  serve_files.push({ src: "!tests/_headless.js" });
+if (process.env.HEADLESS) {
+  serve_files.push({ src: "dist/esnext/tests/_headless.js" });
 }
 
 module.exports = {
@@ -27,7 +27,7 @@ module.exports = {
     Firefox: firefoxArgs
   },
   test_page: "testem.mustache",
-  src_files: ["src/*.ts", "tests/*.ts"],
+  src_files: ["src/**/*.ts", "tests/**/*.ts"],
   serve_files,
   css_files: [],
   routes: {
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;

From 88c4626fb45bd5ee86eee9837e84bc5745d0b73f Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 22:36:59 +1200
Subject: [PATCH 06/24] =?UTF-8?q?Try=20that=20=F0=9F=A4=B7=E2=80=8D?=
 =?UTF-8?q?=E2=99=82=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 testem.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/testem.js b/testem.js
index 18286c8..5e23670 100644
--- a/testem.js
+++ b/testem.js
@@ -1,7 +1,7 @@
 const coverageServer = require("./testem-coverage-server");
 
-let chromeArgs = ["--disable-gpu", "--remote-debugging-port=9222"];
-let firefoxArgs = [];
+const chromeArgs = ["--disable-gpu", "--remote-debugging-port=9222"];
+const firefoxArgs = [];
 
 if (process.env.HEADLESS) {
   chromeArgs.unshift("--headless");
@@ -10,6 +10,10 @@ if (process.env.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" }

From fbb530566d8498f558b8bb6ceb7786a985ada4d7 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Fri, 24 Jul 2020 22:38:32 +1200
Subject: [PATCH 07/24] Added missing HEADLESS env var

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 60723ed..a307889 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "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": "testem 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",

From 514b0d4bd8d0b9765f91abab50aacdc9f53c73fe Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Mon, 27 Jul 2020 21:09:06 +1200
Subject: [PATCH 08/24] Fix click event

---
 src/freetransform/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 6852219..4e2d247 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -261,7 +261,7 @@ export default class FreeTransformTool extends createjs.Container {
       }
     });
     // click to deselect
-    this.moveTool.on("click", function (clickEvent: createjs.MouseEvent) {
+    this.moveTool.on("click", (clickEvent: createjs.MouseEvent) => {
       // only deselect if there was very little movement on click
       // which helps on mobile devices, where it's difficult to
       // tap without dragging slightly

From 5dd8897f95df5b915c5367efc52a773857f5f266 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 07:35:15 +1200
Subject: [PATCH 09/24] Revert typing fix, and resolve using type information

---
 src/freetransform/index.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 4e2d247..ae96177 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -308,9 +308,8 @@ export default class FreeTransformTool extends createjs.Container {
             this.target.y
           );
           const rescaleFactor = distEnd / distStart;
-          const updates = {
-            scaleX: targetStart.scaleX * rescaleFactor,
-            x: null,
+          const updates : any = {
+            scaleX: targetStart.scaleX * rescaleFactor
           };
           // constrain to bounds
           if (this.boundary) {
@@ -369,9 +368,8 @@ export default class FreeTransformTool extends createjs.Container {
             this.target.y
           );
           const rescaleFactor = distEnd / distStart;
-          const updates = {
-            scaleY: targetStart.scaleY * rescaleFactor,
-            y: null,
+          const updates : any = {
+            scaleY: targetStart.scaleY * rescaleFactor
           };
           // constrain to bounds
           if (this.boundary) {
@@ -435,11 +433,9 @@ export default class FreeTransformTool extends createjs.Container {
             this.target.y
           );
           const rescaleFactor = distEnd / distStart;
-          const updates = {
+          const updates : any = {
             scaleX: targetStart.scaleX * rescaleFactor,
             scaleY: targetStart.scaleY * rescaleFactor,
-            x: null,
-            y: null,
           };
           // constrain to bounds
           if (this.boundary) {

From 78db9dd58f79bd7cb2ada8e6df7cfdcdd7f5164e Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 07:36:44 +1200
Subject: [PATCH 10/24] Added some missing return types

---
 src/freetransform/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index ae96177..c453775 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -62,7 +62,7 @@ export default class FreeTransformTool extends createjs.Container {
     });
   }
 
-  addToolTip(shape, name, cursor) {
+  addToolTip(shape, name, cursor) : void {
     shape.on("mouseover", () => {
       this.setTitle(name);
       this.setCursor(cursor);
@@ -73,13 +73,13 @@ export default class FreeTransformTool extends createjs.Container {
     });
   }
 
-  setTitle(title = "") {
+  setTitle(title = "") : void {
     if (this.stage.canvas instanceof HTMLCanvasElement) {
      this.stage.canvas.title = title;
     }
   }
 
-  setCursor(cursor) {
+  setCursor(cursor) : void {
     const cursors = [
       "e-resize",
       "se-resize",
@@ -103,7 +103,7 @@ export default class FreeTransformTool extends createjs.Container {
     }
   }
 
-  createHandle(name, cursor) {
+  createHandle(name, cursor) : createjs.Shape {
     const shape = new createjs.Shape();
     this.addToolTip(shape, name, cursor);
     shape.graphics
@@ -116,7 +116,7 @@ export default class FreeTransformTool extends createjs.Container {
   }
 
   // public methods:
-  select(target) {
+  select(target) : void {
     if (target) {
       // copy object translation/transformation
       this.target = target;

From 5a5557374bf4cbad5022761b90e129da0dd3f31b Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 07:37:20 +1200
Subject: [PATCH 11/24] Refactored demo code into multiple files

---
 src/demo/index.ts           | 149 +++++++++---------------------------
 src/demo/shapes/bitmap.ts   |   9 +++
 src/demo/shapes/ellipse.ts  |  11 +++
 src/demo/shapes/text.ts     |  16 ++++
 src/demo/transform-layer.ts |  57 ++++++++++++++
 5 files changed, 131 insertions(+), 111 deletions(-)
 create mode 100644 src/demo/shapes/bitmap.ts
 create mode 100644 src/demo/shapes/ellipse.ts
 create mode 100644 src/demo/shapes/text.ts
 create mode 100644 src/demo/transform-layer.ts

diff --git a/src/demo/index.ts b/src/demo/index.ts
index 47bd8f8..0de931c 100644
--- a/src/demo/index.ts
+++ b/src/demo/index.ts
@@ -1,18 +1,16 @@
-import FreeTransformTool from "freetransform";
+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, stage;
-let update = true;
-
-let boundary;
-let boundaryLine;
-
-let selectTool;
 
 let container;
+let transformLayer;
+let boundary;
 
 function init() {
-  // create stage and point it to the canvas:
   canvas = document.getElementById("Designer");
   stage = new createjs.Stage(canvas);
 
@@ -24,27 +22,11 @@ function init() {
   stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
 
   // set up free transform tool
-  const top = new createjs.Container();
-  top.name = "top";
-  stage.addChild(top);
+  transformLayer = new TransformLayer();
+  stage.addChild(transformLayer);
 
   // define boundary
   boundary = new createjs.Rectangle();
-  updateBoundary(boundary);
-  boundaryLine = new createjs.Shape();
-  top.addChild(boundaryLine);
-
-  const controlsSize = 10 * window.devicePixelRatio;
-  selectTool = new FreeTransformTool(
-    "#057",
-    true,
-    "rgba(255,255,255,0.8)",
-    controlsSize,
-    boundary
-  );
-  selectTool.name = "transform";
-
-  top.addChild(selectTool);
 
   // load the source image:
   const image = new Image();
@@ -52,34 +34,9 @@ function init() {
   image.onload = handleImageLoad;
 }
 
-// function stop() {
-//   createjs.Ticker.removeEventListener("tick", tick);
-// }
-
-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 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) {
-    constrainObjectTo(obj, boundary);
-  });
+function addSelectableObject(displayObject) {
+  transformLayer.makeSelectable(displayObject);
+  container.addChild(displayObject);
 }
 
 function handleImageLoad(event) {
@@ -87,85 +44,55 @@ function handleImageLoad(event) {
   container = new createjs.Container();
   stage.addChildAt(container, 0);
 
-  // Shape
-  const ellipse = new createjs.Shape();
+  const ellipse = createEllipse();
   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
-  const bitmap = new createjs.Bitmap(image);
+  addSelectableObject(ellipse);
+
+  const bitmap = createBitmap(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
-  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;
+  addSelectableObject(bitmap);
+
+  const text = createText();
   text.x = canvas.width / 2;
   text.y = canvas.height / 2.3;
-  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;
-  clickToSelect(text);
-  container.addChild(text);
-
-  createjs.Ticker.addEventListener("tick", tick);
+  addSelectableObject(text);
 
   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);
-  }
+// 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
+  );
 }
 
 const containerElement = document.getElementById("CanvasContainer");
 window.addEventListener("resize", handleResize);
 function handleResize() {
-  selectTool.unselect();
+  transformLayer.unselect();
   const w = containerElement.clientWidth; // -2 accounts for the border
   stage.canvas.width = w;
 
   updateBoundary(boundary);
-  // TODO: constrain all elements
+  transformLayer.updateBoundary(boundary);
   constrainStageObjects(container.children);
 
-  drawBoundary();
   stage.update();
 }
 
+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..3be9ead
--- /dev/null
+++ b/src/demo/transform-layer.ts
@@ -0,0 +1,57 @@
+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) {
+  console.log("drawing boundary...");
+  boundaryLine.graphics
+    .clear()
+    .beginStroke("rgba(100, 100, 100, 0.5)")
+    .setStrokeDash([20, 4])
+    .drawRect(boundary.x, boundary.y, boundary.width, boundary.height);
+}
+

From 046d624029a1cf65a19070b80eda258cebb3bde5 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 07:45:17 +1200
Subject: [PATCH 12/24] Minor demo tidy

---
 src/demo/index.ts | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/demo/index.ts b/src/demo/index.ts
index 0de931c..0f2c595 100644
--- a/src/demo/index.ts
+++ b/src/demo/index.ts
@@ -4,7 +4,8 @@ import createBitmap from './shapes/bitmap';
 import TransformLayer from './transform-layer';
 import { constrainObjectTo } from "../freetransform/helpers";
 
-let canvas, stage;
+let canvas
+let stage;
 
 let container;
 let transformLayer;
@@ -28,6 +29,10 @@ function init() {
   // 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";
@@ -40,15 +45,13 @@ function addSelectableObject(displayObject) {
 }
 
 function handleImageLoad(event) {
-  const image = event.target;
-  container = new createjs.Container();
-  stage.addChildAt(container, 0);
 
   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;
@@ -62,6 +65,19 @@ function handleImageLoad(event) {
   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;
@@ -75,20 +91,6 @@ function updateBoundary(boundary) {
   );
 }
 
-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();
-}
-
 function constrainStageObjects(objects) {
   objects.forEach(function (obj) {
     constrainObjectTo(obj, boundary);

From c4c18fe15169d349156a76b97fd98e7e4233cfcb Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 07:58:51 +1200
Subject: [PATCH 13/24] Add missing type information

---
 src/freetransform/index.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index c453775..704e755 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -62,7 +62,7 @@ export default class FreeTransformTool extends createjs.Container {
     });
   }
 
-  addToolTip(shape, name, cursor) : void {
+  addToolTip(shape, name, cursor): void {
     shape.on("mouseover", () => {
       this.setTitle(name);
       this.setCursor(cursor);
@@ -73,9 +73,9 @@ export default class FreeTransformTool extends createjs.Container {
     });
   }
 
-  setTitle(title = "") : void {
+  setTitle(title = ""): void {
     if (this.stage.canvas instanceof HTMLCanvasElement) {
-     this.stage.canvas.title = title;
+      this.stage.canvas.title = title;
     }
   }
 
@@ -103,7 +103,7 @@ export default class FreeTransformTool extends createjs.Container {
     }
   }
 
-  createHandle(name, cursor) : createjs.Shape {
+  createHandle(name, cursor): createjs.Shape {
     const shape = new createjs.Shape();
     this.addToolTip(shape, name, cursor);
     shape.graphics
@@ -116,7 +116,7 @@ export default class FreeTransformTool extends createjs.Container {
   }
 
   // public methods:
-  select(target) : void {
+  select(target): void {
     if (target) {
       // copy object translation/transformation
       this.target = target;
@@ -196,12 +196,12 @@ export default class FreeTransformTool extends createjs.Container {
     return;
   }
 
-  unselect() : void {
+  unselect(): void {
     this.target = null;
     this.visible = false;
   }
 
-  update() : void {
+  update(): void {
     if (this.target) {
       this.select(this.target);
     }
@@ -308,8 +308,8 @@ export default class FreeTransformTool extends createjs.Container {
             this.target.y
           );
           const rescaleFactor = distEnd / distStart;
-          const updates : any = {
-            scaleX: targetStart.scaleX * rescaleFactor
+          const updates: any = {
+            scaleX: targetStart.scaleX * rescaleFactor,
           };
           // constrain to bounds
           if (this.boundary) {
@@ -368,8 +368,8 @@ export default class FreeTransformTool extends createjs.Container {
             this.target.y
           );
           const rescaleFactor = distEnd / distStart;
-          const updates : any = {
-            scaleY: targetStart.scaleY * rescaleFactor
+          const updates: any = {
+            scaleY: targetStart.scaleY * rescaleFactor,
           };
           // constrain to bounds
           if (this.boundary) {
@@ -433,7 +433,7 @@ export default class FreeTransformTool extends createjs.Container {
             this.target.y
           );
           const rescaleFactor = distEnd / distStart;
-          const updates : any = {
+          const updates: any = {
             scaleX: targetStart.scaleX * rescaleFactor,
             scaleY: targetStart.scaleY * rescaleFactor,
           };

From 7b12819bdcda3df0d46fad44ca208ec8118d5de7 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 07:59:24 +1200
Subject: [PATCH 14/24] Separated reorientResizeCursor out to helper file

---
 src/freetransform/helpers.ts | 22 ++++++++++++++++++++++
 src/freetransform/index.ts   | 34 +++++++++++-----------------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/freetransform/helpers.ts b/src/freetransform/helpers.ts
index e16c7d6..cebab37 100644
--- a/src/freetransform/helpers.ts
+++ b/src/freetransform/helpers.ts
@@ -56,3 +56,25 @@ export function constrainObjectTo(obj, rect) {
   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
index 704e755..ebcd5ee 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -1,4 +1,9 @@
-import { constrainRectTo, calcDistance, calcAngleDegrees } from "./helpers";
+import {
+  constrainRectTo,
+  calcDistance,
+  calcAngleDegrees,
+  reorientResizeCursor,
+} from "./helpers";
 
 declare interface DisplayObjectWithSize extends createjs.DisplayObject {
   width: number;
@@ -79,28 +84,11 @@ export default class FreeTransformTool extends createjs.Container {
     }
   }
 
-  setCursor(cursor) : void {
-    const cursors = [
-      "e-resize",
-      "se-resize",
-      "s-resize",
-      "sw-resize",
-      "w-resize",
-      "nw-resize",
-      "n-resize",
-      "ne-resize",
-    ];
-    const index = cursors.indexOf(cursor);
-    if (index >= 0) {
-      const angle = 45;
-      let rotation = this.target.rotation;
-      rotation = rotation + angle / 2;
-      let newIndex = index + Math.floor(rotation / angle);
-      newIndex = newIndex % cursors.length;
-      document.body.style.cursor = cursors[newIndex];
-    } else {
-      document.body.style.cursor = cursor;
-    }
+  setCursor(cursor: string): void {
+    document.body.style.cursor = reorientResizeCursor(
+      cursor,
+      this.target.rotation
+    );
   }
 
   createHandle(name, cursor): createjs.Shape {

From a004aad20ca2e59a3d9b6e16a62f895c6465645d Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Tue, 28 Jul 2020 17:01:35 +1200
Subject: [PATCH 15/24] Unindent + simplify seelct method

---
 src/freetransform/index.ts | 149 ++++++++++++++++++-------------------
 1 file changed, 74 insertions(+), 75 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index ebcd5ee..47a31d6 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -105,83 +105,82 @@ export default class FreeTransformTool extends createjs.Container {
 
   // public methods:
   select(target): void {
-    if (target) {
-      // copy object translation/transformation
-      this.target = target;
-      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 = -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
-      const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
-      const 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 {
+    if (!target) {
       this.unselect();
     }
-    return;
+
+    // copy object translation/transformation
+    this.target = target;
+    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 = -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
+    const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
+    const 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;
   }
 
   unselect(): void {

From 6160173f87215643b8e6cbb44ae42c1eb56ca9db Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 11:54:53 +1200
Subject: [PATCH 16/24] Refactored select method into multiple methods

---
 src/freetransform/index.ts | 109 +++++++++++++++++++++++--------------
 1 file changed, 69 insertions(+), 40 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 47a31d6..5c5d6f2 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -103,14 +103,8 @@ export default class FreeTransformTool extends createjs.Container {
     return shape;
   }
 
-  // public methods:
-  select(target): void {
-    if (!target) {
-      this.unselect();
-    }
-
-    // copy object translation/transformation
-    this.target = target;
+  // 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;
@@ -121,32 +115,69 @@ export default class FreeTransformTool extends createjs.Container {
     this.rotation = target.rotation;
 
     // respect registration point of target
-    this.regX = -this.width / 2 + target.regX;
-    this.regY = -this.height / 2 + target.regY;
+    this.regX = -bounds.width / 2 + target.regX;
+    this.regY = -bounds.height / 2 + target.regY;
+  }
 
-    // borders
-    this.border.graphics.clear();
+  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) {
-      this.border.graphics.setStrokeDash([5, 5], 0);
+      graphics.setStrokeDash([5, 5], 0);
     }
-    this.border.graphics
+    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);
+      .moveTo(left, top)
+      .lineTo(right, top)
+      .moveTo(right, bottom)
+      .lineTo(left, bottom)
+      .moveTo(left, top)
+      .lineTo(left, bottom)
+      .moveTo(right, bottom)
+      .lineTo(right, top);
+  }
+
+  // public methods:
+  select(target: DisplayObjectWithSize): void {
+    if (!target) {
+      this.unselect();
+      return;
     }
-    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);
+    this.target = target;
+
+    this.reorientToTarget(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
+    this.updateTools(leftEdge, topEdge, rightEdge, bottomEdge);
+
+    this.visible = true;
+  }
+
+  private updateTools(
+    leftEdge: number,
+    topEdge: number,
+    rightEdge: number,
+    bottomEdge: number
+  ) {
     const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
     const toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
 
@@ -154,33 +185,31 @@ export default class FreeTransformTool extends createjs.Container {
     this.moveHitArea.graphics
       .clear()
       .beginFill("#000")
-      .rect(-this.width / 2, -this.height / 2, this.width, this.height);
+      .rect(leftEdge, topEdge, this.width, this.height);
 
-    // scale tool (bottom right)
-    this.scaleTool.x = bounds.width / 2;
-    this.scaleTool.y = bounds.height / 2;
+    // update scale tool (bottom right)
+    this.scaleTool.x = rightEdge;
+    this.scaleTool.y = bottomEdge;
     this.scaleTool.scaleX = toolScaleX;
     this.scaleTool.scaleY = toolScaleY;
 
-    // hScale tool (right edge)
-    this.hScaleTool.x = bounds.width / 2;
+    // update hScale tool (right middle)
+    this.hScaleTool.x = rightEdge;
     this.hScaleTool.y = 0;
     this.hScaleTool.scaleX = toolScaleX;
     this.hScaleTool.scaleY = toolScaleY;
 
-    // vScale tool (bottom edge)
+    // update vScale tool (bottom middle)
     this.vScaleTool.x = 0;
-    this.vScaleTool.y = bounds.height / 2;
+    this.vScaleTool.y = bottomEdge;
     this.vScaleTool.scaleX = toolScaleX;
     this.vScaleTool.scaleY = toolScaleY;
 
-    // rotate tool
-    this.rotateTool.x = bounds.width / 2;
-    this.rotateTool.y = -bounds.height / 2;
+    // update rotate tool
+    this.rotateTool.x = rightEdge;
+    this.rotateTool.y = topEdge;
     this.rotateTool.scaleX = toolScaleX;
     this.rotateTool.scaleY = toolScaleY;
-
-    this.visible = true;
   }
 
   unselect(): void {

From 5b8d890c6760f0ad13fb9a43d6064b9a0955c196 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 17:20:43 +1200
Subject: [PATCH 17/24] General decoupling refactor

---
 src/freetransform/index.ts | 212 +++++++++++++++++--------------------
 1 file changed, 99 insertions(+), 113 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 5c5d6f2..13769fb 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -56,21 +56,51 @@ export default class FreeTransformTool extends createjs.Container {
     this.border.color = lineColor;
     this.addChild(this.border);
 
-    this.createMoveTool();
-    this.createHorizontalScaleTool();
-    this.createVerticalScaleTool();
-    this.createScaleTool();
-    this.createRotateTool();
+    this.moveTool = this.createMoveTool();
+    this.addChild(this.moveTool);
+    this.scaleTool = this.createScaleTool();
+    this.addChild(this.scaleTool);
+    this.hScaleTool = this.createHorizontalScaleTool();
+    this.addChild(this.hScaleTool);
+    this.vScaleTool = this.createVerticalScaleTool();
+    this.addChild(this.vScaleTool);
+    this.rotateTool = this.createRotateTool();
+    this.addChild(this.rotateTool);
 
     this.on("tick", () => {
       this.update();
     });
   }
 
-  addToolTip(shape, name, cursor): void {
+  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 addToolTip(shape, name, cursor): void {
     shape.on("mouseover", () => {
       this.setTitle(name);
-      this.setCursor(cursor);
+      let newCursor = cursor;
+      if (this.target) {
+        newCursor = reorientResizeCursor(cursor, this.target.rotation);
+      }
+      this.setCursor(newCursor);
     });
     shape.on("mouseout", () => {
       this.setTitle();
@@ -78,20 +108,17 @@ export default class FreeTransformTool extends createjs.Container {
     });
   }
 
-  setTitle(title = ""): void {
+  private setTitle(title = ""): void {
     if (this.stage.canvas instanceof HTMLCanvasElement) {
       this.stage.canvas.title = title;
     }
   }
 
-  setCursor(cursor: string): void {
-    document.body.style.cursor = reorientResizeCursor(
-      cursor,
-      this.target.rotation
-    );
+  private setCursor(cursor: string): void {
+    document.body.style.cursor = cursor;
   }
 
-  createHandle(name, cursor): createjs.Shape {
+  private createHandle(name, cursor): createjs.Shape {
     const shape = new createjs.Shape();
     this.addToolTip(shape, name, cursor);
     shape.graphics
@@ -143,15 +170,8 @@ export default class FreeTransformTool extends createjs.Container {
       .lineTo(right, top);
   }
 
-  // public methods:
-  select(target: DisplayObjectWithSize): void {
-    if (!target) {
-      this.unselect();
-      return;
-    }
-    this.target = target;
-
-    this.reorientToTarget(target);
+  private updateTools() {
+    this.reorientToTarget(this.target);
 
     // horizontal and vertical edges
     const leftEdge = -this.width / 2;
@@ -167,20 +187,29 @@ export default class FreeTransformTool extends createjs.Container {
     );
 
     // tools size should stay consistent
-    this.updateTools(leftEdge, topEdge, rightEdge, bottomEdge);
+    this.repositionTools(leftEdge, topEdge, rightEdge, bottomEdge);
+    this.resizeTools();
+  }
 
-    this.visible = true;
+  private resizeTools() {
+    const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
+    const toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
+    this.scaleTool.scaleX = toolScaleX;
+    this.scaleTool.scaleY = toolScaleY;
+    this.hScaleTool.scaleX = toolScaleX;
+    this.hScaleTool.scaleY = toolScaleY;
+    this.vScaleTool.scaleX = toolScaleX;
+    this.vScaleTool.scaleY = toolScaleY;
+    this.rotateTool.scaleX = toolScaleX;
+    this.rotateTool.scaleY = toolScaleY;
   }
 
-  private updateTools(
+  private repositionTools(
     leftEdge: number,
     topEdge: number,
     rightEdge: number,
     bottomEdge: number
   ) {
-    const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
-    const toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
-
     // draw move hit area
     this.moveHitArea.graphics
       .clear()
@@ -190,37 +219,18 @@ export default class FreeTransformTool extends createjs.Container {
     // update scale tool (bottom right)
     this.scaleTool.x = rightEdge;
     this.scaleTool.y = bottomEdge;
-    this.scaleTool.scaleX = toolScaleX;
-    this.scaleTool.scaleY = toolScaleY;
 
     // update hScale tool (right middle)
     this.hScaleTool.x = rightEdge;
     this.hScaleTool.y = 0;
-    this.hScaleTool.scaleX = toolScaleX;
-    this.hScaleTool.scaleY = toolScaleY;
 
     // update vScale tool (bottom middle)
     this.vScaleTool.x = 0;
     this.vScaleTool.y = bottomEdge;
-    this.vScaleTool.scaleX = toolScaleX;
-    this.vScaleTool.scaleY = toolScaleY;
 
     // update rotate tool
     this.rotateTool.x = rightEdge;
     this.rotateTool.y = topEdge;
-    this.rotateTool.scaleX = toolScaleX;
-    this.rotateTool.scaleY = toolScaleY;
-  }
-
-  unselect(): void {
-    this.target = null;
-    this.visible = false;
-  }
-
-  update(): void {
-    if (this.target) {
-      this.select(this.target);
-    }
   }
 
   /**
@@ -229,18 +239,18 @@ export default class FreeTransformTool extends createjs.Container {
    * Click to deselect.
    */
   private createMoveTool() {
-    this.moveTool = new createjs.Shape();
-    this.addToolTip(this.moveTool, "Move", "move");
-    this.moveTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+    let dragDistance = 0;
+    const moveTool = new createjs.Shape();
+    this.addToolTip(moveTool, "Move", "move");
+    moveTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
       if (this.target) {
-        const tool = downEvent.currentTarget;
         const tBounds = this.target.getBounds();
         const targetStart = this.target.clone();
         const scaledReg = {
           x: this.target.regX * this.target.scaleX,
           y: this.target.regY * this.target.scaleY,
         };
-        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+        moveTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
           this.alpha = this.controlsDim;
           const newLocation = {
             x: targetStart.x + moveEvent.stageX - downEvent.stageX,
@@ -259,7 +269,7 @@ export default class FreeTransformTool extends createjs.Container {
             newLocation.y = constrainedBounds.y + scaledReg.y;
           }
           this.target.set(newLocation);
-          tool.dragDistance = calcDistance(
+          dragDistance = calcDistance(
             downEvent.stageX,
             downEvent.stageY,
             moveEvent.stageX,
@@ -267,49 +277,43 @@ export default class FreeTransformTool extends createjs.Container {
           );
           this.stage.update();
         });
-        tool.on("pressup", (upEvent) => {
+        moveTool.on("pressup", (upEvent: createjs.MouseEvent) => {
           this.alpha = 1;
-          tool.removeAllEventListeners("pressmove");
+          moveTool.removeAllEventListeners("pressmove");
           upEvent.stopPropagation();
-          tool.dragDistance = 0;
+          dragDistance = 0;
           this.stage.update();
         });
       }
     });
     // click to deselect
-    this.moveTool.on("click", (clickEvent: createjs.MouseEvent) => {
+    moveTool.on("click", (clickEvent: createjs.MouseEvent) => {
       // 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 movedThreshold = 10;
-      if (clickEvent.currentTarget.dragDistance < movedThreshold) {
+      if (dragDistance < movedThreshold) {
         this.unselect();
         this.stage.update();
       }
     });
     this.moveHitArea = new createjs.Shape();
-    this.moveTool.hitArea = this.moveHitArea;
-    this.addChild(this.moveTool);
+    moveTool.hitArea = this.moveHitArea;
+    return moveTool;
   }
 
   // init hScale tool
   private createHorizontalScaleTool() {
-    this.hScaleTool = this.createHandle("Stretch", "e-resize");
-    this.hScaleTool.graphics.drawRect(
-      0,
-      0,
-      this.controlsSize,
-      this.controlsSize
-    );
-    this.hScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+    const hScaleTool = this.createHandle("Stretch", "e-resize");
+    hScaleTool.graphics.drawRect(0, 0, this.controlsSize, this.controlsSize);
+    hScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
       if (this.target) {
-        const tool = downEvent.currentTarget;
         const tBounds = this.target.getBounds();
         const targetStart = <DisplayObjectWithSize>this.target.clone().set({
           width: tBounds.width,
           height: tBounds.height,
         });
-        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+        hScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
           this.alpha = this.controlsDim;
           const distStart = calcDistance(
             downEvent.stageX,
@@ -342,34 +346,28 @@ export default class FreeTransformTool extends createjs.Container {
           this.target.set(updates);
           this.stage.update();
         });
-        tool.on("pressup", () => {
-          tool.removeAllEventListeners("pressmove");
+        hScaleTool.on("pressup", () => {
+          hScaleTool.removeAllEventListeners("pressmove");
           this.alpha = 1;
           this.stage.update();
         });
       }
     });
-    this.addChild(this.hScaleTool);
+    return hScaleTool;
   }
 
   // init vScale tool
   private createVerticalScaleTool() {
-    this.vScaleTool = this.createHandle("Stretch", "s-resize");
-    this.vScaleTool.graphics.drawRect(
-      0,
-      0,
-      this.controlsSize,
-      this.controlsSize
-    );
-    this.vScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+    const vScaleTool = this.createHandle("Stretch", "s-resize");
+    vScaleTool.graphics.drawRect(0, 0, this.controlsSize, this.controlsSize);
+    vScaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
       if (this.target) {
-        const tool = downEvent.currentTarget;
         const tBounds = this.target.getBounds();
         const targetStart = <DisplayObjectWithSize>this.target.clone().set({
           width: tBounds.width,
           height: tBounds.height,
         });
-        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+        vScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
           this.alpha = this.controlsDim;
           const distStart = calcDistance(
             downEvent.stageX,
@@ -402,14 +400,14 @@ export default class FreeTransformTool extends createjs.Container {
           this.target.set(updates);
           this.stage.update();
         });
-        tool.on("pressup", () => {
-          tool.removeAllEventListeners("pressmove");
+        vScaleTool.on("pressup", () => {
+          vScaleTool.removeAllEventListeners("pressmove");
           this.alpha = 1;
           this.stage.update();
         });
       }
     });
-    this.addChild(this.vScaleTool);
+    return vScaleTool;
   }
 
   /**
@@ -419,22 +417,16 @@ export default class FreeTransformTool extends createjs.Container {
    * registration point
    */
   private createScaleTool() {
-    this.scaleTool = this.createHandle("Resize", "se-resize");
-    this.scaleTool.graphics.drawRect(
-      0,
-      0,
-      this.controlsSize,
-      this.controlsSize
-    );
-    this.scaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+    const scaleTool = this.createHandle("Resize", "se-resize");
+    scaleTool.graphics.drawRect(0, 0, this.controlsSize, this.controlsSize);
+    scaleTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
       if (this.target) {
-        const tool = downEvent.currentTarget;
         const tBounds = this.target.getBounds();
         const targetStart = <DisplayObjectWithSize>this.target.clone().set({
           width: tBounds.width,
           height: tBounds.height,
         });
-        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+        scaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
           this.alpha = this.controlsDim;
           const distStart = calcDistance(
             downEvent.stageX,
@@ -470,14 +462,14 @@ export default class FreeTransformTool extends createjs.Container {
           this.target.set(updates);
           this.stage.update();
         });
-        tool.on("pressup", () => {
-          tool.removeAllEventListeners("pressmove");
+        scaleTool.on("pressup", () => {
+          scaleTool.removeAllEventListeners("pressmove");
           this.alpha = 1;
           this.stage.update();
         });
       }
     });
-    this.addChild(this.scaleTool);
+    return scaleTool;
   }
 
   /**
@@ -490,18 +482,12 @@ export default class FreeTransformTool extends createjs.Container {
    * Add that angle to the object's start rotation
    */
   private createRotateTool() {
-    this.rotateTool = this.createHandle("Rotate", "pointer");
-    this.rotateTool.graphics.drawEllipse(
-      0,
-      0,
-      this.controlsSize,
-      this.controlsSize
-    );
-    this.rotateTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
+    const rotateTool = this.createHandle("Rotate", "pointer");
+    rotateTool.graphics.drawEllipse(0, 0, this.controlsSize, this.controlsSize);
+    rotateTool.on("mousedown", (downEvent: createjs.MouseEvent) => {
       if (this.target) {
-        const tool = downEvent.currentTarget;
         const startRotation = this.target.rotation;
-        tool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+        rotateTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
           this.alpha = 0.1;
           // the drag point is relative to the display object x,y position on the stage (it's registration point)
           const relativeStartPoint = {
@@ -525,13 +511,13 @@ export default class FreeTransformTool extends createjs.Container {
           this.target.rotation = startRotation + deltaAngle;
           this.stage.update();
         });
-        tool.on("pressup", () => {
-          tool.removeAllEventListeners("pressmove");
+        rotateTool.on("pressup", () => {
+          rotateTool.removeAllEventListeners("pressmove");
           this.alpha = 1;
           this.stage.update();
         });
       }
     });
-    this.addChild(this.rotateTool);
+    return rotateTool;
   }
 }

From d4a73effd19c979e862df88ad0e083c6bb3f8a93 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 19:24:55 +1200
Subject: [PATCH 18/24] Removed console log, and reformat file

---
 src/demo/transform-layer.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/demo/transform-layer.ts b/src/demo/transform-layer.ts
index 3be9ead..7f14509 100644
--- a/src/demo/transform-layer.ts
+++ b/src/demo/transform-layer.ts
@@ -1,8 +1,6 @@
 import FreeTransformTool from "freetransform";
 
-
 export default class TransformLayer extends createjs.Container {
-
   transformTool = null;
   controlsSize = 10 * window.devicePixelRatio;
   boundaryLine;
@@ -32,7 +30,7 @@ export default class TransformLayer extends createjs.Container {
     drawBoundaryLine(this.boundaryLine, boundary);
   }
 
-  makeSelectable(displayObject: createjs.DisplayObject) : void {
+  makeSelectable(displayObject: createjs.DisplayObject): void {
     displayObject.on("click", (evt: createjs.Event) => {
       evt.stopPropagation();
       this.transformTool.select(evt.currentTarget);
@@ -40,18 +38,18 @@ export default class TransformLayer extends createjs.Container {
     });
   }
 
-  unselect() : void {
+  unselect(): void {
     this.transformTool.unselect();
   }
-
 }
 
-function drawBoundaryLine(boundaryLine: createjs.Shape, boundary: createjs.Rectangle) {
-  console.log("drawing boundary...");
+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);
 }
-

From 347ee39bdfdad09a0c8ef187b114cce2ca26dfb2 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 20:23:21 +1200
Subject: [PATCH 19/24] Flattened tool event binding

---
 src/freetransform/index.ts | 451 ++++++++++++++++++++-----------------
 1 file changed, 240 insertions(+), 211 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 13769fb..35e1817 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -93,6 +93,14 @@ export default class FreeTransformTool extends createjs.Container {
     }
   }
 
+  private dimHandles() {
+    this.alpha = this.controlsDim;
+  }
+
+  private showHandles() {
+    this.alpha = 1;
+  }
+
   private addToolTip(shape, name, cursor): void {
     shape.on("mouseover", () => {
       this.setTitle(name);
@@ -242,57 +250,66 @@ export default class FreeTransformTool extends createjs.Container {
     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) => {
-      if (this.target) {
-        const tBounds = this.target.getBounds();
-        const targetStart = this.target.clone();
-        const scaledReg = {
-          x: this.target.regX * this.target.scaleX,
-          y: this.target.regY * this.target.scaleY,
-        };
-        moveTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-          this.alpha = this.controlsDim;
-          const newLocation = {
-            x: targetStart.x + moveEvent.stageX - downEvent.stageX,
-            y: targetStart.y + moveEvent.stageY - downEvent.stageY,
-          };
-          // 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.target.scaleX,
-              tBounds.height * this.target.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(
-            downEvent.stageX,
-            downEvent.stageY,
-            moveEvent.stageX,
-            moveEvent.stageY
-          );
-          this.stage.update();
-        });
-        moveTool.on("pressup", (upEvent: createjs.MouseEvent) => {
-          this.alpha = 1;
-          moveTool.removeAllEventListeners("pressmove");
-          upEvent.stopPropagation();
-          dragDistance = 0;
-          this.stage.update();
-        });
+      tBounds = this.target.getBounds();
+      targetStart = this.target.clone();
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+      scaledReg = {
+        x: this.target.regX * this.target.scaleX,
+        y: this.target.regY * this.target.scaleY,
+      };
+    });
+
+    moveTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      this.dimHandles();
+      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.target.scaleX,
+          tBounds.height * this.target.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
+      );
+      this.stage.update();
+    });
+
+    moveTool.on("pressup", (upEvent: createjs.MouseEvent) => {
+      this.showHandles();
+      upEvent.stopPropagation();
+      dragDistance = 0;
+      this.stage.update();
     });
+
     // click to deselect
-    moveTool.on("click", (clickEvent: createjs.MouseEvent) => {
+    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 movedThreshold = 10;
-      if (dragDistance < movedThreshold) {
+      const MOVED_THRESHOLD = 10;
+      if (dragDistance < MOVED_THRESHOLD) {
         this.unselect();
         this.stage.update();
       }
@@ -306,53 +323,54 @@ export default class FreeTransformTool extends createjs.Container {
   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) => {
-      if (this.target) {
-        const tBounds = this.target.getBounds();
-        const targetStart = <DisplayObjectWithSize>this.target.clone().set({
-          width: tBounds.width,
-          height: tBounds.height,
-        });
-        hScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-          this.alpha = this.controlsDim;
-          const distStart = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            this.target.x,
-            this.target.y
-          );
-          const distEnd = calcDistance(
-            moveEvent.stageX,
-            moveEvent.stageY,
-            this.target.x,
-            this.target.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);
-          this.stage.update();
-        });
-        hScaleTool.on("pressup", () => {
-          hScaleTool.removeAllEventListeners("pressmove");
-          this.alpha = 1;
-          this.stage.update();
-        });
+      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) => {
+      this.dimHandles();
+      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);
+      this.stage.update();
+    });
+    hScaleTool.on("pressup", () => {
+      this.showHandles();
+      this.stage.update();
     });
+
     return hScaleTool;
   }
 
@@ -360,52 +378,58 @@ export default class FreeTransformTool extends createjs.Container {
   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) => {
-      if (this.target) {
-        const tBounds = this.target.getBounds();
-        const targetStart = <DisplayObjectWithSize>this.target.clone().set({
-          width: tBounds.width,
-          height: tBounds.height,
-        });
-        vScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-          this.alpha = this.controlsDim;
-          const distStart = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            this.target.x,
-            this.target.y
-          );
-          const distEnd = calcDistance(
-            moveEvent.stageX,
-            moveEvent.stageY,
-            this.target.x,
-            this.target.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);
-          this.stage.update();
-        });
-        vScaleTool.on("pressup", () => {
-          vScaleTool.removeAllEventListeners("pressmove");
-          this.alpha = 1;
-          this.stage.update();
-        });
+      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) => {
+      this.dimHandles();
+      const distStart = calcDistance(
+        startX,
+        startY,
+        this.target.x,
+        this.target.y
+      );
+      const distEnd = calcDistance(
+        moveEvent.stageX,
+        moveEvent.stageY,
+        this.target.x,
+        this.target.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);
+      this.stage.update();
+    });
+
+    vScaleTool.on("pressup", () => {
+      this.dimHandles();
+      this.stage.update();
     });
     return vScaleTool;
   }
@@ -419,55 +443,57 @@ export default class FreeTransformTool extends createjs.Container {
   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) => {
-      if (this.target) {
-        const tBounds = this.target.getBounds();
-        const targetStart = <DisplayObjectWithSize>this.target.clone().set({
-          width: tBounds.width,
-          height: tBounds.height,
-        });
-        scaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-          this.alpha = this.controlsDim;
-          const distStart = calcDistance(
-            downEvent.stageX,
-            downEvent.stageY,
-            this.target.x,
-            this.target.y
-          );
-          const distEnd = calcDistance(
-            moveEvent.stageX,
-            moveEvent.stageY,
-            this.target.x,
-            this.target.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);
-          this.stage.update();
-        });
-        scaleTool.on("pressup", () => {
-          scaleTool.removeAllEventListeners("pressmove");
-          this.alpha = 1;
-          this.stage.update();
-        });
+      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) => {
+      this.dimHandles();
+      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);
+      this.stage.update();
+    });
+
+    scaleTool.on("pressup", () => {
+      this.showHandles();
+      this.stage.update();
     });
     return scaleTool;
   }
@@ -484,39 +510,42 @@ export default class FreeTransformTool extends createjs.Container {
   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) => {
-      if (this.target) {
-        const startRotation = this.target.rotation;
-        rotateTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-          this.alpha = 0.1;
-          // the drag point is relative to the display object x,y position on the stage (it's registration point)
-          const relativeStartPoint = {
-            x: downEvent.stageX - this.target.x,
-            y: downEvent.stageY - this.target.y,
-          };
-          const relativeEndPoint = {
-            x: moveEvent.stageX - this.target.x,
-            y: moveEvent.stageY - this.target.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;
-          this.stage.update();
-        });
-        rotateTool.on("pressup", () => {
-          rotateTool.removeAllEventListeners("pressmove");
-          this.alpha = 1;
-          this.stage.update();
-        });
-      }
+      startRotation = this.rotation;
+      startX = downEvent.stageX;
+      startY = downEvent.stageY;
+    });
+
+    rotateTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
+      this.dimHandles();
+      // 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;
+      this.stage.update();
+    });
+
+    rotateTool.on("pressup", () => {
+      this.showHandles();
+      this.stage.update();
     });
     return rotateTool;
   }

From 7b9d3d21c3f041593874f533191bcfffac1a9935 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 20:41:14 +1200
Subject: [PATCH 20/24] Moved common handles dimming / stage updating into
 shared event handler

---
 src/freetransform/index.ts | 44 +++++++++++++-------------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index 35e1817..62c0dfe 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -57,21 +57,30 @@ export default class FreeTransformTool extends createjs.Container {
     this.addChild(this.border);
 
     this.moveTool = this.createMoveTool();
-    this.addChild(this.moveTool);
+    this.addTool(this.moveTool);
     this.scaleTool = this.createScaleTool();
-    this.addChild(this.scaleTool);
+    this.addTool(this.scaleTool);
     this.hScaleTool = this.createHorizontalScaleTool();
-    this.addChild(this.hScaleTool);
+    this.addTool(this.hScaleTool);
     this.vScaleTool = this.createVerticalScaleTool();
-    this.addChild(this.vScaleTool);
+    this.addTool(this.vScaleTool);
     this.rotateTool = this.createRotateTool();
-    this.addChild(this.rotateTool);
+    this.addTool(this.rotateTool);
 
     this.on("tick", () => {
       this.update();
     });
   }
 
+  private addTool(tool) {
+    this.addChild(tool);
+    tool.on("mousedown", () => this.dimHandles());
+    tool.on("pressup", () => {
+      this.resetHandles();
+      this.stage.update();
+    });
+  }
+
   select(target: DisplayObjectWithSize): void {
     if (!target) {
       this.unselect();
@@ -97,7 +106,7 @@ export default class FreeTransformTool extends createjs.Container {
     this.alpha = this.controlsDim;
   }
 
-  private showHandles() {
+  private resetHandles() {
     this.alpha = 1;
   }
 
@@ -269,7 +278,6 @@ export default class FreeTransformTool extends createjs.Container {
     });
 
     moveTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-      this.dimHandles();
       const newLocation = {
         x: targetStart.x + moveEvent.stageX - startX,
         y: targetStart.y + moveEvent.stageY - startY,
@@ -297,10 +305,8 @@ export default class FreeTransformTool extends createjs.Container {
     });
 
     moveTool.on("pressup", (upEvent: createjs.MouseEvent) => {
-      this.showHandles();
       upEvent.stopPropagation();
       dragDistance = 0;
-      this.stage.update();
     });
 
     // click to deselect
@@ -339,7 +345,6 @@ export default class FreeTransformTool extends createjs.Container {
       startY = downEvent.stageY;
     });
     hScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-      this.dimHandles();
       const distStart = calcDistance(startX, startY, this.x, this.y);
       const distEnd = calcDistance(
         moveEvent.stageX,
@@ -366,10 +371,6 @@ export default class FreeTransformTool extends createjs.Container {
       this.target.set(updates);
       this.stage.update();
     });
-    hScaleTool.on("pressup", () => {
-      this.showHandles();
-      this.stage.update();
-    });
 
     return hScaleTool;
   }
@@ -394,7 +395,6 @@ export default class FreeTransformTool extends createjs.Container {
       startY = downEvent.stageY;
     });
     vScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-      this.dimHandles();
       const distStart = calcDistance(
         startX,
         startY,
@@ -427,10 +427,6 @@ export default class FreeTransformTool extends createjs.Container {
       this.stage.update();
     });
 
-    vScaleTool.on("pressup", () => {
-      this.dimHandles();
-      this.stage.update();
-    });
     return vScaleTool;
   }
 
@@ -460,7 +456,6 @@ export default class FreeTransformTool extends createjs.Container {
     });
 
     scaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-      this.dimHandles();
       const distStart = calcDistance(startX, startY, this.x, this.y);
       const distEnd = calcDistance(
         moveEvent.stageX,
@@ -491,10 +486,6 @@ export default class FreeTransformTool extends createjs.Container {
       this.stage.update();
     });
 
-    scaleTool.on("pressup", () => {
-      this.showHandles();
-      this.stage.update();
-    });
     return scaleTool;
   }
 
@@ -522,7 +513,6 @@ export default class FreeTransformTool extends createjs.Container {
     });
 
     rotateTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-      this.dimHandles();
       // 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,
@@ -543,10 +533,6 @@ export default class FreeTransformTool extends createjs.Container {
       this.stage.update();
     });
 
-    rotateTool.on("pressup", () => {
-      this.showHandles();
-      this.stage.update();
-    });
     return rotateTool;
   }
 }

From 15e1dee66b9838132ea8834a6e549a4e6746cf01 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 21:28:51 +1200
Subject: [PATCH 21/24] Generalised the positioning and resizing of handles

---
 src/freetransform/HandlePosition.ts | 53 ++++++++++++++++++
 src/freetransform/index.ts          | 87 ++++++++++++++---------------
 2 files changed, 96 insertions(+), 44 deletions(-)
 create mode 100644 src/freetransform/HandlePosition.ts

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/index.ts b/src/freetransform/index.ts
index 62c0dfe..fbe0345 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -4,6 +4,7 @@ import {
   calcAngleDegrees,
   reorientResizeCursor,
 } from "./helpers";
+import { HandlePosition, handlePositionToRectPoint } from "./HandlePosition";
 
 declare interface DisplayObjectWithSize extends createjs.DisplayObject {
   width: number;
@@ -37,6 +38,8 @@ export default class FreeTransformTool extends createjs.Container {
 
   private border = null;
 
+  handles = [];
+
   constructor(
     lineColor = "#4285F4",
     dashed = true,
@@ -58,20 +61,28 @@ export default class FreeTransformTool extends createjs.Container {
 
     this.moveTool = this.createMoveTool();
     this.addTool(this.moveTool);
-    this.scaleTool = this.createScaleTool();
-    this.addTool(this.scaleTool);
-    this.hScaleTool = this.createHorizontalScaleTool();
-    this.addTool(this.hScaleTool);
-    this.vScaleTool = this.createVerticalScaleTool();
-    this.addTool(this.vScaleTool);
-    this.rotateTool = this.createRotateTool();
-    this.addTool(this.rotateTool);
+    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());
@@ -202,52 +213,40 @@ export default class FreeTransformTool extends createjs.Container {
       bottomEdge,
       leftEdge
     );
-
     // tools size should stay consistent
-    this.repositionTools(leftEdge, topEdge, rightEdge, bottomEdge);
-    this.resizeTools();
-  }
-
-  private resizeTools() {
-    const toolScaleX = 1 / (this.scaleX * this.stage.scaleX);
-    const toolScaleY = 1 / (this.scaleY * this.stage.scaleY);
-    this.scaleTool.scaleX = toolScaleX;
-    this.scaleTool.scaleY = toolScaleY;
-    this.hScaleTool.scaleX = toolScaleX;
-    this.hScaleTool.scaleY = toolScaleY;
-    this.vScaleTool.scaleX = toolScaleX;
-    this.vScaleTool.scaleY = toolScaleY;
-    this.rotateTool.scaleX = toolScaleX;
-    this.rotateTool.scaleY = toolScaleY;
-  }
-
-  private repositionTools(
-    leftEdge: number,
-    topEdge: number,
-    rightEdge: number,
-    bottomEdge: number
-  ) {
     // draw move hit area
     this.moveHitArea.graphics
       .clear()
       .beginFill("#000")
       .rect(leftEdge, topEdge, this.width, this.height);
 
-    // update scale tool (bottom right)
-    this.scaleTool.x = rightEdge;
-    this.scaleTool.y = bottomEdge;
+    const boundsRect = new createjs.Rectangle(
+      leftEdge,
+      topEdge,
+      this.width,
+      this.height
+    );
 
-    // update hScale tool (right middle)
-    this.hScaleTool.x = rightEdge;
-    this.hScaleTool.y = 0;
+    this.repositionHandles(boundsRect);
+    this.resizeHandles();
+  }
 
-    // update vScale tool (bottom middle)
-    this.vScaleTool.x = 0;
-    this.vScaleTool.y = bottomEdge;
+  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;
+    });
+  }
 
-    // update rotate tool
-    this.rotateTool.x = rightEdge;
-    this.rotateTool.y = topEdge;
+  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;
+    });
   }
 
   /**

From 098c5f28f6f3db0a763fdd783df9e5e997530ca8 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 21:53:26 +1200
Subject: [PATCH 22/24] Separated out common stage update call when dragging

---
 src/freetransform/index.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index fbe0345..ec5b980 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -86,6 +86,7 @@ export default class FreeTransformTool extends createjs.Container {
   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();
@@ -300,7 +301,6 @@ export default class FreeTransformTool extends createjs.Container {
         moveEvent.stageX,
         moveEvent.stageY
       );
-      this.stage.update();
     });
 
     moveTool.on("pressup", (upEvent: createjs.MouseEvent) => {
@@ -368,7 +368,6 @@ export default class FreeTransformTool extends createjs.Container {
         updates.x = constrainedBounds.x + targetStart.regX * updates.scaleX;
       }
       this.target.set(updates);
-      this.stage.update();
     });
 
     return hScaleTool;
@@ -423,7 +422,6 @@ export default class FreeTransformTool extends createjs.Container {
         updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
       }
       this.target.set(updates);
-      this.stage.update();
     });
 
     return vScaleTool;
@@ -482,7 +480,6 @@ export default class FreeTransformTool extends createjs.Container {
         updates.y = constrainedBounds.y + targetStart.regY * updates.scaleY;
       }
       this.target.set(updates);
-      this.stage.update();
     });
 
     return scaleTool;
@@ -529,7 +526,6 @@ export default class FreeTransformTool extends createjs.Container {
       const deltaAngle = endAngle - startAngle;
       // TODO: constrain to bounds
       this.target.rotation = startRotation + deltaAngle;
-      this.stage.update();
     });
 
     return rotateTool;

From df5f53eb610ed0c1d13a9c16aea1db9dd23bea57 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 22:15:37 +1200
Subject: [PATCH 23/24] Rely on copied state in freetransform tool to do
 calculations

---
 src/freetransform/index.ts | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/freetransform/index.ts b/src/freetransform/index.ts
index ec5b980..f8efd9e 100644
--- a/src/freetransform/index.ts
+++ b/src/freetransform/index.ts
@@ -272,8 +272,8 @@ export default class FreeTransformTool extends createjs.Container {
       startX = downEvent.stageX;
       startY = downEvent.stageY;
       scaledReg = {
-        x: this.target.regX * this.target.scaleX,
-        y: this.target.regY * this.target.scaleY,
+        x: this.target.regX * this.scaleX,
+        y: this.target.regY * this.scaleY,
       };
     });
 
@@ -287,8 +287,8 @@ export default class FreeTransformTool extends createjs.Container {
         const newBounds = new createjs.Rectangle(
           newLocation.x - scaledReg.x,
           newLocation.y - scaledReg.y,
-          tBounds.width * this.target.scaleX,
-          tBounds.height * this.target.scaleY
+          tBounds.width * this.scaleX,
+          tBounds.height * this.scaleY
         );
         const constrainedBounds = constrainRectTo(newBounds, this.boundary);
         newLocation.x = constrainedBounds.x + scaledReg.x;
@@ -393,17 +393,12 @@ export default class FreeTransformTool extends createjs.Container {
       startY = downEvent.stageY;
     });
     vScaleTool.on("pressmove", (moveEvent: createjs.MouseEvent) => {
-      const distStart = calcDistance(
-        startX,
-        startY,
-        this.target.x,
-        this.target.y
-      );
+      const distStart = calcDistance(startX, startY, this.x, this.y);
       const distEnd = calcDistance(
         moveEvent.stageX,
         moveEvent.stageY,
-        this.target.x,
-        this.target.y
+        this.x,
+        this.y
       );
       const rescaleFactor = distEnd / distStart;
       const updates: any = {

From 64606c2093770616320b771349aec1185cd8dc65 Mon Sep 17 00:00:00 2001
From: Jeremy Shipman <jeremy@burnbright.net>
Date: Sat, 1 Aug 2020 22:15:49 +1200
Subject: [PATCH 24/24] TODO updates

---
 TODO.md | 46 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index 7ecb2a0..435e02b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,9 +4,10 @@ Convert to Typescript?
 
 Update border, and constrain elements
 
-## Transforming withing a container
+## Transforming a transformed Container's child DisplayObjects
+
+It is useful to support transforming elements within a container that might also have some transformations applied.
 
-It is useful to support transforming elements within a container.
 Use case: design area has been resized/zoomed.
 
 Currently the coordinate systems are out, and the boundary mechanism fails too.
@@ -15,6 +16,33 @@ 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
@@ -85,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];
+}
+```