Create initial structure for es6

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "forOf": true,
+    "generators": true,
+    "templateStrings": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "defaultParams": true,
+    "blockBindings": true,
+    "arrowFunctions": true
+  },
+  "rules": {
+    "no-underscore-dangle": false,
+    "quotes": [2, "single", "avoid-escape"],
+    "valid-jsdoc":2,
+    "no-else-return":2,
+    "no-floating-decimal":2,
+    "no-self-compare":2,
+    "radix":2,
+    "wrap-iife":2,
+    "func-style": [2, "expression"],
+    "consistent-this": [2, "that"],
+    "no-lonely-if":2,
+    "no-comma-dangle": false,
+    "no-var": true,
+  "strict": "never",
+  }
+}
+

.jshintrc

@@ -3,7 +3,6 @@
   "eqeqeq": true,
   "freeze": true,
   "indent": 2,
-  "latedef": true,
   "newcap": true,
   "noempty": true,
   "undef": true,
@@ -12,5 +11,6 @@
   "node": true,
   "forin": true,
   "noarg": true,
-  "esnext": true
+  "esnext": true,
+  "laxcomma": true
 }

.npmignore

@@ -1,4 +1,6 @@
-/test
+/es6-src/test
+/es5-generated/test
 .editorconfig
 .jshintrc
+.eslintrc
 .travis.yml

es5-generated/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var general = require("./lib/canvas-utils.js");
+var createCanvasEventEmitter = require("./lib/canvasEventEmitter.js");
+
+module.exports.createCanvasEventEmitter = createCanvasEventEmitter;
+
+module.exports.convertEventCoords = general.convertEventCoords;
+module.exports.rotateContextAt = general.rotateContextAt;
+
+module.exports.radiansToDegrees = general.radiansToDegrees;
+module.exports.degreesToRadians = general.degreesToRadians;

es5-generated/lib/canvas-utils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+/**
+ * @param {MouseEvent} e - DOM event
+ * @param {HTMLCanvasElement} canvas - HTML canvas element
+ */
+var convertEventCoords = function convertEventCoords(e, canvas) {
+  var rect = canvas.getBoundingClientRect();
+  var x = e.pageX - rect.left - document.body.scrollLeft;
+  var y = e.pageY - rect.top - document.body.scrollTop;
+
+  x *= canvas.width / parseInt(window.getComputedStyle(canvas).width, 10);
+  y *= canvas.height / parseInt(window.getComputedStyle(canvas).height, 10);
+
+  return {
+    x: x,
+    y: y
+  };
+};
+
+/**
+ * @param {CanvasRenderingContext2D} ctx - The context that should be rotated
+ * @param {Number} x - coordinate
+ * @param {Number} y - coordinate
+ * @param {Number} r - Rotation in radians
+ */
+var rotateContextAt = function rotateContextAt(ctx, x, y, r) {
+  ctx.translate(x, y);
+  ctx.rotate(r);
+  ctx.translate(-1 * x, -1 * y);
+};
+
+/**
+ * Convert radians to degrees
+ *
+ * @param {Number} r - Angle in radians
+ */
+var radiansToDegrees = function radiansToDegrees(r) {
+  return r * 180 / Math.PI;
+};
+
+/**
+ * Convert degrees to radians
+ *
+ * @param {Number} d - Angle in degrees
+ */
+var degreesToRadians = function degreesToRadians(d) {
+  return d * Math.PI / 180;
+};
+
+module.exports.convertEventCoords = convertEventCoords;
+module.exports.rotateContextAt = rotateContextAt;
+module.exports.radiansToDegrees = radiansToDegrees;
+module.exports.degreesToRadians = degreesToRadians;

es5-generated/lib/canvasEventEmitter.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _require = require("events");
+
+var EventEmitter = _require.EventEmitter;
+
+var _require2 = require("./canvas-utils.js");
+
+var convertEventCoords = _require2.convertEventCoords;
+
+/**
+ * @constructor
+ * @param {Element} target - the canvas that should emit the events
+ * @param {Element} eventSource - defaults to window.document
+ */
+module.exports = function createCanvasEventEmitter(target) {
+  var eventSource = arguments[1] === undefined ? window.document : arguments[1];
+
+  var isIn = false;
+  var emitter = new EventEmitter();
+  initListeners();
+  return emitter;
+
+  /**
+   * Attaches the DOM listeners
+   * Should only be called once
+   */
+  function initListeners() {
+    //add the basic listeners to the dom
+    ["click", "mousedown", "mouseup"].forEach(function (eventType) {
+      eventSource.addEventListener(eventType, emitCanvasEventIfOnCanvas);
+    });
+
+    //Add listener for mousemove
+    //We calculate mouseover and mouseout from this
+    eventSource.addEventListener("mousemove", function (event) {
+
+      var xy = getCoords(event),
+          onCanvas = areCoordsOnCanvas(xy);
+
+      if (onCanvas) {
+        //Emit the standard mousemove event
+        emitCanvasEventRaw(event, xy);
+      }
+
+      //Emit mouseover and mouseout
+      if (onCanvas && !isIn) {
+        isIn = true;
+        emitCanvasEventRaw(event, xy, "mouseover");
+      }
+
+      if (!onCanvas && isIn) {
+        isIn = false;
+        emitCanvasEventRaw(event, xy, "mouseout");
+      }
+    });
+
+    //Listener for contextmenu. also trigers the click event
+    eventSource.addEventListener("contextmenu", function (event) {
+      emitCanvasEventIfOnCanvas(event);
+      emitCanvasEventIfOnCanvas(event, "click");
+    });
+  }
+
+  /**
+   * Get the coordinates of an event relative to
+   * the target element
+   */
+  function getCoords(event) {
+    return convertEventCoords(event, target);
+  }
+
+  /**
+   * Calculate if the coordinates (as given by getCoords)
+   * are on the canvas
+   */
+  function areCoordsOnCanvas(xy) {
+    var x = xy.x;
+    var y = xy.y;
+    var width = target.width;
+    var height = target.height;
+
+    if (x < 0 || y < 0) {
+      return false;
+    }
+
+    if (x > width || y > height) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /** 
+   * Wraps the DOM event into a CanvasEventEmitter event and emits it.
+   * @param {Event} event - the DOM event
+   * @param {Object} xy - the coordinate to emit
+   * @param {string} overrideType - optional defaults to event.type
+   */
+  function emitCanvasEventRaw(event, xy) {
+    var type = arguments[2] === undefined ? event.type : arguments[2];
+    return (function () {
+      var x = xy.x;
+      var y = xy.y;
+
+      emitter.emit(type, { x: x,
+        y: y,
+        target: target,
+        event: event,
+        button: event.button,
+        preventDefault: function () {
+          return event.preventDefault();
+        }
+      });
+    })();
+  }
+
+  /**
+   * Emits the given DOM Event if the coordinates are on the canvas
+   * @param {Event} event
+   */
+  function emitCanvasEventIfOnCanvas(event, overrideType) {
+    var xy = getCoords(event);
+
+    if (!areCoordsOnCanvas(xy)) {
+      return;
+    }
+
+    emitCanvasEventRaw(event, xy, overrideType);
+  }
+};

es5-generated/test/canvasEventEmitterTest.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var test = require("tape");
+var cutils = require("..");
+var createCanvasEventEmitter = cutils.createCanvasEventEmitter;
+var _require = require("events");
+
+var EventEmitter = _require.EventEmitter;
+
+test("CanvasEventEmitter constructor", function (t) {
+  t.plan(2);
+  var canvas = {
+    width: 400,
+    height: 200,
+    getBoundingClientRect: function getBoundingClientRect() {
+      return {
+        left: 200,
+        top: 300
+      };
+    }
+  };
+
+  var ee = new EventEmitter();
+  var source = {};
+
+  source.addEventListener = function (e, f) {
+    ee.on(e, f);
+  };
+
+  var cee = createCanvasEventEmitter(canvas, source);
+
+  cee.on("click", function (e) {
+    e.preventDefault();
+    t.equals(e.button, 55);
+  });
+
+  ee.emit("click", {
+    preventDefault: function () {
+      t.pass("preventDefault  called");
+    },
+    button: 55,
+    pageX: 300,
+    pageY: 500,
+    type: "click"
+  });
+});

es5-generated/test/test.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var test = require("tape");
+var cutils = require("..");var convertEventCoords = cutils.convertEventCoords;
+
+global.document = {};
+global.document.body = {};
+global.document.body.scrollLeft = 0;
+global.document.body.scrollTop = 0;
+
+global.window = {};
+global.window.getComputedStyle = function () {
+  return {
+    height: 400,
+    width: 200
+  };
+};
+
+test("convertEventCoords", function (t) {
+  t.plan(2);
+  var coords = convertEventCoords({
+    pageX: 500,
+    pageY: 500
+  }, {
+    width: 400,
+    height: 200,
+    getBoundingClientRect: function getBoundingClientRect() {
+      return {
+        left: 200,
+        top: 300
+      };
+    }
+  });
+
+  t.equal(coords.x, 600);
+  t.equal(coords.y, 100);
+});
+
+test("degreesToRadians / radiansToDegrees", function (t) {
+  t.plan(4);
+
+  t.equal(cutils.degreesToRadians(58), 1.0122909661567112);
+  t.equal(cutils.degreesToRadians(555), 9.68657734856853);
+  t.equal(cutils.degreesToRadians(8), 0.13962634015954636);
+  t.equal(cutils.radiansToDegrees(cutils.degreesToRadians(8)), 8);
+});
+
+require("./canvasEventEmitterTest.js");