patternomaly - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

.eslintrc.json

@@ -37,4 +37,7 @@ {
         "error"
+      ],
+      "prefer-const": [
+        "error"
       ]
     }
 }

dist/patternomaly.js

@@ -7,387 +7,1018 @@ (function (global, factory) {
 
-var PATTERN_COLOR = 'rgba(255, 255, 255, 0.6)';
+var BACKGROUND_COLOR = 'rgba(100, 100, 100, 0.7)';
+var PATTERN_COLOR = 'rgba(255, 255, 255, 0.8)';
+var POINT_STYLE = 'round';
 
-function generateShape(size) {
-  var canvas = document.createElement('canvas');
-  var context = canvas.getContext('2d');
+var asyncGenerator = function () {
+  function AwaitValue(value) {
+    this.value = value;
+  }
 
-  canvas.width = size;
-  canvas.height = size;
+  function AsyncGenerator(gen) {
+    var front, back;
 
+    function send(key, arg) {
+      return new Promise(function (resolve, reject) {
+        var request = {
+          key: key,
+          arg: arg,
+          resolve: resolve,
+          reject: reject,
+          next: null
+        };
+
+        if (back) {
+          back = back.next = request;
+        } else {
+          front = back = request;
+          resume(key, arg);
+        }
+      });
+    }
+
+    function resume(key, arg) {
+      try {
+        var result = gen[key](arg);
+        var value = result.value;
+
+        if (value instanceof AwaitValue) {
+          Promise.resolve(value.value).then(function (arg) {
+            resume("next", arg);
+          }, function (arg) {
+            resume("throw", arg);
+          });
+        } else {
+          settle(result.done ? "return" : "normal", result.value);
+        }
+      } catch (err) {
+        settle("throw", err);
+      }
+    }
+
+    function settle(type, value) {
+      switch (type) {
+        case "return":
+          front.resolve({
+            value: value,
+            done: true
+          });
+          break;
+
+        case "throw":
+          front.reject(value);
+          break;
+
+        default:
+          front.resolve({
+            value: value,
+            done: false
+          });
+          break;
+      }
+
+      front = front.next;
+
+      if (front) {
+        resume(front.key, front.arg);
+      } else {
+        back = null;
+      }
+    }
+
+    this._invoke = send;
+
+    if (typeof gen.return !== "function") {
+      this.return = undefined;
+    }
+  }
+
+  if (typeof Symbol === "function" && Symbol.asyncIterator) {
+    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
+      return this;
+    };
+  }
+
+  AsyncGenerator.prototype.next = function (arg) {
+    return this._invoke("next", arg);
+  };
+
+  AsyncGenerator.prototype.throw = function (arg) {
+    return this._invoke("throw", arg);
+  };
+
+  AsyncGenerator.prototype.return = function (arg) {
+    return this._invoke("return", arg);
+  };
+
   return {
-    canvas: canvas,
-    context: context
+    wrap: function (fn) {
+      return function () {
+        return new AsyncGenerator(fn.apply(this, arguments));
+      };
+    },
+    await: function (value) {
+      return new AwaitValue(value);
+    }
   };
-}
+}();
 
-function plus() {
-  var shape = generateShape(20);
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
 
-  shape.context.moveTo(5, 0);
-  shape.context.lineTo(5, 10);
-  shape.context.moveTo(0, 5);
-  shape.context.lineTo(10, 5);
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
 
-  shape.context.moveTo(15, 10);
-  shape.context.lineTo(15, 20);
-  shape.context.moveTo(10, 15);
-  shape.context.lineTo(20, 15);
-  shape.context.stroke();
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
 
-  return shape.canvas;
-}
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
 
-function cross() {
-  var shape = generateShape(20);
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 9);
-  shape.context.moveTo(1, 9);
-  shape.context.lineTo(9, 1);
+var Shape = function () {
+  function Shape() {
+    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
+    var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BACKGROUND_COLOR;
+    var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : PATTERN_COLOR;
+    classCallCheck(this, Shape);
 
-  shape.context.moveTo(11, 11);
-  shape.context.lineTo(19, 19);
-  shape.context.moveTo(11, 19);
-  shape.context.lineTo(19, 11);
-  shape.context.stroke();
+    this._canvas = document.createElement('canvas');
+    this._context = this._canvas.getContext('2d');
 
-  return shape.canvas;
-}
+    this._canvas.width = size;
+    this._canvas.height = size;
 
-function crossDash() {
-  var shape = generateShape(20);
+    this._context.fillStyle = backgroundColor;
+    this._context.fillRect(0, 0, this._canvas.width, this._canvas.height);
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this._size = size;
+    this._patternColor = patternColor;
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 9);
-  shape.context.moveTo(1, 9);
-  shape.context.lineTo(9, 1);
+    return this;
+  }
 
-  shape.context.moveTo(11, 11);
-  shape.context.lineTo(19, 19);
-  shape.context.stroke();
+  createClass(Shape, [{
+    key: 'setStrokeProps',
+    value: function setStrokeProps() {
+      this._context.strokeStyle = this._patternColor;
+      this._context.lineWidth = this._size / 10;
+      this._context.lineJoin = POINT_STYLE;
+      this._context.lineCap = POINT_STYLE;
+    }
+  }, {
+    key: 'setFillProps',
+    value: function setFillProps() {
+      this._context.fillStyle = this._patternColor;
+    }
+  }]);
+  return Shape;
+}();
 
-  return shape.canvas;
-}
+var Plus = function (_Shape) {
+  inherits(Plus, _Shape);
 
-function dotDash() {
-  var shape = generateShape(20);
+  function Plus() {
+    classCallCheck(this, Plus);
+    return possibleConstructorReturn(this, (Plus.__proto__ || Object.getPrototypeOf(Plus)).apply(this, arguments));
+  }
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+  createClass(Plus, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
 
-  shape.context.arc(5, 5, 2, 0, 2 * Math.PI);
-  shape.context.fill();
+      this._context.beginPath();
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+      this.setStrokeProps();
 
-  shape.context.moveTo(11, 11);
-  shape.context.lineTo(19, 19);
-  shape.context.stroke();
+      this.drawPlus();
+      this.drawPlus(halfSize, halfSize);
 
-  return shape.canvas;
-}
+      this._context.stroke();
 
-function weave() {
-  var shape = generateShape(20);
+      return this._canvas;
+    }
+  }, {
+    key: 'drawPlus',
+    value: function drawPlus() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+      var size = this._size;
+      var halfSize = size / 2;
+      var quarterSize = size / 4;
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 9);
+      this._context.moveTo(quarterSize + offsetX, 0 + offsetY);
+      this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
+      this._context.moveTo(0 + offsetX, quarterSize + offsetY);
+      this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
 
-  shape.context.moveTo(11, 19);
-  shape.context.lineTo(19, 11);
-  shape.context.stroke();
+      this._context.closePath();
+    }
+  }]);
+  return Plus;
+}(Shape);
 
-  return shape.canvas;
-}
+var Cross = function (_Shape) {
+  inherits(Cross, _Shape);
 
-function line() {
-  var shape = generateShape(20);
+  function Cross() {
+    classCallCheck(this, Cross);
+    return possibleConstructorReturn(this, (Cross.__proto__ || Object.getPrototypeOf(Cross)).apply(this, arguments));
+  }
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+  createClass(Cross, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
 
-  shape.context.moveTo(0, 5);
-  shape.context.lineTo(20, 5);
-  shape.context.moveTo(0, 15);
-  shape.context.lineTo(20, 15);
-  shape.context.stroke();
+      this._context.beginPath();
 
-  return shape.canvas;
-}
+      this.setStrokeProps();
 
-function lineVertical() {
-  var shape = generateShape(20);
+      this.drawCross();
+      this.drawCross(halfSize, halfSize);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+      this._context.stroke();
 
-  shape.context.moveTo(5, 0);
-  shape.context.lineTo(5, 20);
-  shape.context.moveTo(15, 0);
-  shape.context.lineTo(15, 20);
-  shape.context.stroke();
+      return this._canvas;
+    }
+  }, {
+    key: 'drawCross',
+    value: function drawCross() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-  return shape.canvas;
-}
+      var size = this._size;
+      var halfSize = size / 2;
+      var gap = 2;
 
-function zigzag() {
-  var shape = generateShape(20);
+      this._context.moveTo(offsetX + gap, offsetY + gap);
+      this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY);
+      this._context.moveTo(offsetX + gap, halfSize - gap + offsetY);
+      this._context.lineTo(halfSize - gap + offsetX, offsetY + gap);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
-  shape.context.lineJoin = 'round';
+      this._context.closePath();
+    }
+  }]);
+  return Cross;
+}(Shape);
 
-  shape.context.moveTo(0, 2);
-  shape.context.lineTo(5, 7);
-  shape.context.lineTo(10, 2);
-  shape.context.lineTo(15, 7);
-  shape.context.lineTo(20, 2);
+var Dash = function (_Shape) {
+  inherits(Dash, _Shape);
 
-  shape.context.moveTo(0, 12);
-  shape.context.lineTo(5, 17);
-  shape.context.lineTo(10, 12);
-  shape.context.lineTo(15, 17);
-  shape.context.lineTo(20, 12);
+  function Dash() {
+    classCallCheck(this, Dash);
+    return possibleConstructorReturn(this, (Dash.__proto__ || Object.getPrototypeOf(Dash)).apply(this, arguments));
+  }
 
-  shape.context.stroke();
+  createClass(Dash, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
 
-  return shape.canvas;
-}
+      this._context.beginPath();
 
-function zigzagVertical() {
-  var shape = generateShape(20);
+      this.setStrokeProps();
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
-  shape.context.lineJoin = 'round';
+      this.drawDash();
+      this.drawDash(halfSize, halfSize);
 
-  shape.context.moveTo(2, 0);
-  shape.context.lineTo(7, 5);
-  shape.context.lineTo(2, 10);
-  shape.context.lineTo(7, 15);
-  shape.context.lineTo(2, 20);
+      this._context.stroke();
 
-  shape.context.moveTo(12, 0);
-  shape.context.lineTo(17, 5);
-  shape.context.lineTo(12, 10);
-  shape.context.lineTo(17, 15);
-  shape.context.lineTo(12, 20);
+      return this._canvas;
+    }
+  }, {
+    key: 'drawDash',
+    value: function drawDash() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-  shape.context.stroke();
+      var size = this._size;
+      var halfSize = size / 2;
+      var gap = 2;
 
-  return shape.canvas;
-}
+      this._context.moveTo(offsetX + gap, offsetY + gap);
+      this._context.lineTo(halfSize - gap + offsetX, halfSize - gap + offsetY);
 
-function diagonal() {
-  var shape = generateShape(20);
+      this._context.closePath();
+    }
+  }]);
+  return Dash;
+}(Shape);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+var CrossDash = function (_Shape) {
+  inherits(CrossDash, _Shape);
 
-  shape.context.moveTo(9, -1);
-  shape.context.lineTo(21, 11);
-  shape.context.moveTo(-1, 9);
-  shape.context.lineTo(11, 21);
+  function CrossDash() {
+    classCallCheck(this, CrossDash);
+    return possibleConstructorReturn(this, (CrossDash.__proto__ || Object.getPrototypeOf(CrossDash)).apply(this, arguments));
+  }
 
-  shape.context.stroke();
+  createClass(CrossDash, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+      this._context.beginPath();
 
-  return shape.canvas;
-}
+      this.setStrokeProps();
 
-function diagonalRightLeft() {
-  var shape = generateShape(20);
+      var cross = new Cross();
+      cross.drawCross.call(this);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+      var dash = new Dash();
+      dash.drawDash.call(this, halfSize, halfSize);
 
-  shape.context.moveTo(11, -1);
-  shape.context.lineTo(-1, 11);
-  shape.context.moveTo(21, 9);
-  shape.context.lineTo(9, 21);
+      this._context.stroke();
 
-  shape.context.stroke();
+      return this._canvas;
+    }
+  }]);
+  return CrossDash;
+}(Shape);
 
-  return shape.canvas;
-}
+var Dot = function (_Shape) {
+  inherits(Dot, _Shape);
 
-function square() {
-  var shape = generateShape(20);
+  function Dot() {
+    classCallCheck(this, Dot);
+    return possibleConstructorReturn(this, (Dot.__proto__ || Object.getPrototypeOf(Dot)).apply(this, arguments));
+  }
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+  createClass(Dot, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
 
-  shape.context.fillRect(0, 0, 10, 10);
-  shape.context.fillRect(10, 10, 10, 10);
+      this._context.beginPath();
 
-  return shape.canvas;
-}
+      this.setFillProps();
 
-function disc() {
-  var shape = generateShape(20);
+      this.drawDot();
+      this.drawDot(halfSize, halfSize);
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+      this._context.fill();
 
-  shape.context.arc(5, 5, 4, 0, 2 * Math.PI);
-  shape.context.moveTo(19, 15);
-  shape.context.arc(15, 15, 4, 0, 2 * Math.PI);
-  shape.context.fill();
+      return this._canvas;
+    }
+  }, {
+    key: 'drawDot',
+    value: function drawDot() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var diameter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this._size / 10;
 
-  return shape.canvas;
-}
+      var size = this._size;
+      var quarterSize = size / 4;
+      var x = quarterSize + offsetX;
+      var y = quarterSize + offsetY;
 
-function ring() {
-  var shape = generateShape(20);
+      this._context.moveTo(x + quarterSize, y);
+      this._context.arc(x, y, diameter, 0, 2 * Math.PI);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+      this._context.closePath();
+    }
+  }]);
+  return Dot;
+}(Shape);
 
-  shape.context.arc(5, 5, 4, 0, 2 * Math.PI);
-  shape.context.moveTo(19, 15);
-  shape.context.arc(15, 15, 4, 0, 2 * Math.PI);
-  shape.context.stroke();
+var DotDash = function (_Shape) {
+  inherits(DotDash, _Shape);
 
-  return shape.canvas;
-}
+  function DotDash() {
+    classCallCheck(this, DotDash);
+    return possibleConstructorReturn(this, (DotDash.__proto__ || Object.getPrototypeOf(DotDash)).apply(this, arguments));
+  }
 
-function triangle() {
-  var shape = generateShape(20);
+  createClass(DotDash, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 1.5;
-  shape.context.lineJoin = 'round';
+      this._context.beginPath();
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 1);
-  shape.context.lineTo(5, 8);
-  shape.context.closePath();
+      this.setStrokeProps();
 
-  shape.context.moveTo(11, 18);
-  shape.context.lineTo(19, 18);
-  shape.context.lineTo(15, 11);
-  shape.context.closePath();
+      var dash = new Dash();
+      dash.drawDash.call(this, halfSize, halfSize);
 
-  shape.context.stroke();
+      this._context.closePath();
+      this._context.stroke();
 
-  return shape.canvas;
-}
+      this.setFillProps();
 
-function triangleVertical() {
-  var shape = generateShape(20);
+      var dot = new Dot();
+      dot.drawDot.call(this);
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 1.5;
-  shape.context.lineJoin = 'round';
+      this._context.fill();
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(8, 5);
-  shape.context.lineTo(1, 9);
-  shape.context.closePath();
+      return this._canvas;
+    }
+  }]);
+  return DotDash;
+}(Shape);
 
-  shape.context.moveTo(18, 11);
-  shape.context.lineTo(18, 19);
-  shape.context.lineTo(11, 15);
-  shape.context.closePath();
+var Disc = function (_Dot) {
+  inherits(Disc, _Dot);
 
-  shape.context.stroke();
+  function Disc() {
+    classCallCheck(this, Disc);
+    return possibleConstructorReturn(this, (Disc.__proto__ || Object.getPrototypeOf(Disc)).apply(this, arguments));
+  }
 
-  return shape.canvas;
-}
+  createClass(Disc, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+      var diameter = this._size / 5;
 
-function diamond() {
-  var shape = generateShape(20);
+      this._context.beginPath();
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+      this.setFillProps();
 
-  shape.context.moveTo(5, 0);
-  shape.context.lineTo(10, 5);
-  shape.context.lineTo(5, 10);
-  shape.context.lineTo(0, 5);
-  shape.context.closePath();
+      this.drawDot(0, 0, diameter);
+      this.drawDot(halfSize, halfSize, diameter);
 
-  shape.context.moveTo(15, 10);
-  shape.context.lineTo(20, 15);
-  shape.context.lineTo(15, 20);
-  shape.context.lineTo(10, 15);
-  shape.context.closePath();
+      this._context.fill();
 
-  shape.context.fill();
+      return this._canvas;
+    }
+  }]);
+  return Disc;
+}(Dot);
 
-  return shape.canvas;
-}
+var Ring = function (_Dot) {
+  inherits(Ring, _Dot);
 
-function diamondOutline() {
-  var shape = generateShape(20);
+  function Ring() {
+    classCallCheck(this, Ring);
+    return possibleConstructorReturn(this, (Ring.__proto__ || Object.getPrototypeOf(Ring)).apply(this, arguments));
+  }
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 1.5;
+  createClass(Ring, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+      var diameter = this._size / 5;
 
-  shape.context.moveTo(5, 1);
-  shape.context.lineTo(9, 5);
-  shape.context.lineTo(5, 9);
-  shape.context.lineTo(1, 5);
-  shape.context.closePath();
+      this._context.beginPath();
 
-  shape.context.moveTo(15, 11);
-  shape.context.lineTo(19, 15);
-  shape.context.lineTo(15, 19);
-  shape.context.lineTo(11, 15);
-  shape.context.closePath();
+      this.setStrokeProps();
 
-  shape.context.stroke();
+      this.drawDot(0, 0, diameter);
+      this.drawDot(halfSize, halfSize, diameter);
 
-  return shape.canvas;
-}
+      this._context.stroke();
 
-var deprecatedShapes = ['circle', 'triangle-inverted', 'line-horizontal', 'line-diagonal-lr', 'line-diagonal-rl', 'zigzag-horizontal'];
+      return this._canvas;
+    }
+  }]);
+  return Ring;
+}(Dot);
 
+var Line = function (_Shape) {
+  inherits(Line, _Shape);
+
+  function Line() {
+    classCallCheck(this, Line);
+    return possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).apply(this, arguments));
+  }
+
+  createClass(Line, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setStrokeProps();
+
+      this.drawLine();
+      this.drawLine(halfSize, halfSize);
+
+      this._context.stroke();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawLine',
+    value: function drawLine() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var quarterSize = size / 4;
+
+      this._context.moveTo(0, quarterSize + offsetY);
+      this._context.lineTo(this._size, quarterSize + offsetY);
+
+      this._context.closePath();
+    }
+  }]);
+  return Line;
+}(Shape);
+
+var VerticalLine = function (_Line) {
+  inherits(VerticalLine, _Line);
+
+  function VerticalLine() {
+    classCallCheck(this, VerticalLine);
+    return possibleConstructorReturn(this, (VerticalLine.__proto__ || Object.getPrototypeOf(VerticalLine)).apply(this, arguments));
+  }
+
+  createClass(VerticalLine, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      this._context.translate(this._size, 0);
+      this._context.rotate(90 * Math.PI / 180);
+
+      Line.prototype.drawTile.call(this);
+
+      return this._canvas;
+    }
+  }]);
+  return VerticalLine;
+}(Line);
+
+var Weave = function (_Shape) {
+  inherits(Weave, _Shape);
+
+  function Weave() {
+    classCallCheck(this, Weave);
+    return possibleConstructorReturn(this, (Weave.__proto__ || Object.getPrototypeOf(Weave)).apply(this, arguments));
+  }
+
+  createClass(Weave, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      this._context.beginPath();
+
+      this.setStrokeProps();
+
+      this.drawWeave(0, 0);
+
+      this._context.stroke();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawWeave',
+    value: function drawWeave(offsetX, offsetY) {
+      var size = this._size;
+      var halfSize = size / 2;
+
+      this._context.moveTo(offsetX + 1, offsetY + 1);
+      this._context.lineTo(halfSize - 1, halfSize - 1);
+
+      this._context.moveTo(halfSize + 1, size - 1);
+      this._context.lineTo(size - 1, halfSize + 1);
+
+      this._context.closePath();
+    }
+  }]);
+  return Weave;
+}(Shape);
+
+var Zigzag = function (_Shape) {
+  inherits(Zigzag, _Shape);
+
+  function Zigzag() {
+    classCallCheck(this, Zigzag);
+    return possibleConstructorReturn(this, (Zigzag.__proto__ || Object.getPrototypeOf(Zigzag)).apply(this, arguments));
+  }
+
+  createClass(Zigzag, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      this._context.beginPath();
+
+      this.setStrokeProps();
+
+      this.drawZigzag();
+      this.drawZigzag(this._size / 2);
+
+      this._context.stroke();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawZigzag',
+    value: function drawZigzag() {
+      var offsetY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+      var size = this._size;
+      var quarterSize = size / 4;
+      var halfSize = size / 2;
+      var tenthSize = size / 10;
+
+      this._context.moveTo(0, tenthSize + offsetY);
+      this._context.lineTo(quarterSize, halfSize - tenthSize + offsetY);
+      this._context.lineTo(halfSize, tenthSize + offsetY);
+      this._context.lineTo(size - quarterSize, halfSize - tenthSize + offsetY);
+      this._context.lineTo(size, tenthSize + offsetY);
+    }
+  }]);
+  return Zigzag;
+}(Shape);
+
+var ZigzagVertical = function (_Zigzag) {
+  inherits(ZigzagVertical, _Zigzag);
+
+  function ZigzagVertical() {
+    classCallCheck(this, ZigzagVertical);
+    return possibleConstructorReturn(this, (ZigzagVertical.__proto__ || Object.getPrototypeOf(ZigzagVertical)).apply(this, arguments));
+  }
+
+  createClass(ZigzagVertical, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      this._context.translate(this._size, 0);
+      this._context.rotate(90 * Math.PI / 180);
+
+      Zigzag.prototype.drawTile.call(this);
+
+      return this._canvas;
+    }
+  }]);
+  return ZigzagVertical;
+}(Zigzag);
+
+var Diagonal = function (_Shape) {
+  inherits(Diagonal, _Shape);
+
+  function Diagonal() {
+    classCallCheck(this, Diagonal);
+    return possibleConstructorReturn(this, (Diagonal.__proto__ || Object.getPrototypeOf(Diagonal)).apply(this, arguments));
+  }
+
+  createClass(Diagonal, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setStrokeProps();
+
+      this.drawDiagonalLine();
+      this.drawDiagonalLine(halfSize, halfSize);
+
+      this._context.stroke();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawDiagonalLine',
+    value: function drawDiagonalLine() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var halfSize = size / 2;
+      var gap = 1;
+
+      this._context.moveTo(halfSize - gap - offsetX, gap * -1 + offsetY);
+      this._context.lineTo(size + 1 - offsetX, halfSize + 1 + offsetY);
+
+      this._context.closePath();
+    }
+  }]);
+  return Diagonal;
+}(Shape);
+
+var DiagonalRightLeft = function (_Diagonal) {
+  inherits(DiagonalRightLeft, _Diagonal);
+
+  function DiagonalRightLeft() {
+    classCallCheck(this, DiagonalRightLeft);
+    return possibleConstructorReturn(this, (DiagonalRightLeft.__proto__ || Object.getPrototypeOf(DiagonalRightLeft)).apply(this, arguments));
+  }
+
+  createClass(DiagonalRightLeft, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      this._context.translate(this._size, 0);
+      this._context.rotate(90 * Math.PI / 180);
+
+      Diagonal.prototype.drawTile.call(this);
+
+      return this._canvas;
+    }
+  }]);
+  return DiagonalRightLeft;
+}(Diagonal);
+
+var Square = function (_Shape) {
+  inherits(Square, _Shape);
+
+  function Square() {
+    classCallCheck(this, Square);
+    return possibleConstructorReturn(this, (Square.__proto__ || Object.getPrototypeOf(Square)).apply(this, arguments));
+  }
+
+  createClass(Square, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setFillProps();
+
+      this.drawSquare();
+      this.drawSquare(halfSize, halfSize);
+
+      this._context.fill();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawSquare',
+    value: function drawSquare() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var halfSize = size / 2;
+      var gap = size / 20;
+
+      this._context.fillRect(offsetX + gap, offsetY + gap, halfSize - gap * 2, halfSize - gap * 2);
+
+      this._context.closePath();
+    }
+  }]);
+  return Square;
+}(Shape);
+
+var Box = function (_Shape) {
+  inherits(Box, _Shape);
+
+  function Box() {
+    classCallCheck(this, Box);
+    return possibleConstructorReturn(this, (Box.__proto__ || Object.getPrototypeOf(Box)).apply(this, arguments));
+  }
+
+  createClass(Box, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setStrokeProps();
+
+      this.drawBox();
+      this.drawBox(halfSize, halfSize);
+
+      this._context.stroke();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawBox',
+    value: function drawBox() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var halfSize = size / 2;
+      var gap = size / 20;
+
+      this._context.strokeRect(offsetX + gap, offsetY + gap, halfSize - gap * 4, halfSize - gap * 4);
+
+      this._context.closePath();
+    }
+  }]);
+  return Box;
+}(Shape);
+
+var Triangle = function (_Shape) {
+  inherits(Triangle, _Shape);
+
+  function Triangle() {
+    classCallCheck(this, Triangle);
+    return possibleConstructorReturn(this, (Triangle.__proto__ || Object.getPrototypeOf(Triangle)).apply(this, arguments));
+  }
+
+  createClass(Triangle, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setFillProps();
+
+      this.drawTriangle();
+      this.drawTriangle(halfSize, halfSize);
+
+      this._context.fill();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawTriangle',
+    value: function drawTriangle() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var halfSize = size / 2;
+      var quarterSize = size / 4;
+
+      this._context.moveTo(quarterSize + offsetX, offsetY);
+      this._context.lineTo(halfSize + offsetX, halfSize + offsetY);
+      this._context.lineTo(offsetX, halfSize + offsetY);
+
+      this._context.closePath();
+    }
+  }]);
+  return Triangle;
+}(Shape);
+
+var TriangleVertical = function (_Triangle) {
+  inherits(TriangleVertical, _Triangle);
+
+  function TriangleVertical() {
+    classCallCheck(this, TriangleVertical);
+    return possibleConstructorReturn(this, (TriangleVertical.__proto__ || Object.getPrototypeOf(TriangleVertical)).apply(this, arguments));
+  }
+
+  createClass(TriangleVertical, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var size = this._size;
+
+      this._context.translate(size, size);
+      this._context.rotate(180 * Math.PI / 180);
+
+      Triangle.prototype.drawTile.call(this);
+
+      return this._canvas;
+    }
+  }]);
+  return TriangleVertical;
+}(Triangle);
+
+var Diamond = function (_Shape) {
+  inherits(Diamond, _Shape);
+
+  function Diamond() {
+    classCallCheck(this, Diamond);
+    return possibleConstructorReturn(this, (Diamond.__proto__ || Object.getPrototypeOf(Diamond)).apply(this, arguments));
+  }
+
+  createClass(Diamond, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setFillProps();
+
+      this.drawDiamond();
+      this.drawDiamond(halfSize, halfSize);
+
+      this._context.fill();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawDiamond',
+    value: function drawDiamond() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var halfSize = size / 2;
+      var quarterSize = size / 4;
+
+      this._context.moveTo(quarterSize + offsetX, offsetY);
+      this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
+      this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
+      this._context.lineTo(offsetX, quarterSize + offsetY);
+
+      this._context.closePath();
+    }
+  }]);
+  return Diamond;
+}(Shape);
+
+var DiamondBox = function (_Diamond) {
+  inherits(DiamondBox, _Diamond);
+
+  function DiamondBox() {
+    classCallCheck(this, DiamondBox);
+    return possibleConstructorReturn(this, (DiamondBox.__proto__ || Object.getPrototypeOf(DiamondBox)).apply(this, arguments));
+  }
+
+  createClass(DiamondBox, [{
+    key: 'drawTile',
+    value: function drawTile() {
+      var halfSize = this._size / 2;
+
+      this._context.beginPath();
+
+      this.setStrokeProps();
+
+      this.drawDiamond();
+      this.drawDiamond(halfSize, halfSize);
+
+      this._context.stroke();
+
+      return this._canvas;
+    }
+  }, {
+    key: 'drawDiamond',
+    value: function drawDiamond() {
+      var offsetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      var size = this._size;
+      var halfSize = size / 2 - 1;
+      var quarterSize = size / 4;
+
+      this._context.moveTo(quarterSize + offsetX, offsetY + 1);
+      this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
+      this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
+      this._context.lineTo(offsetX + 1, quarterSize + offsetY);
+
+      this._context.closePath();
+    }
+  }]);
+  return DiamondBox;
+}(Diamond);
+
 var shapes = {
-  'plus': plus,
-  'cross': cross,
-  'crossDash': crossDash,
-  'dotDash': dotDash,
-  'weave': weave,
-  'line': line,
-  'line-vertical': lineVertical,
-  'zigzag': zigzag,
-  'zigzag-vertical': zigzagVertical,
-  'diagonal': diagonal,
-  'diagnonal-right-left': diagonalRightLeft,
-  'square': square,
-  'disc': disc,
-  'ring': ring,
-  'triangle': triangle,
-  'triangle-vertical': triangleVertical,
-  'diamond': diamond,
-  'diamond-outline': diamondOutline,
-  // deprecated shape names
-  'circle': disc,
-  'triangle-inverted': triangleVertical,
-  'line-horizontal': line,
-  'line-diagonal-lr': diagonal,
-  'line-diagonal-rl': diagonalRightLeft,
-  'zigzag-horizontal': zigzag
+  'plus': Plus,
+  'cross': Cross,
+  'dash': Dash,
+  'cross-dash': CrossDash,
+  'dot': Dot,
+  'dot-dash': DotDash,
+  'disc': Disc,
+  'ring': Ring,
+  'line': Line,
+  'line-vertical': VerticalLine,
+  'weave': Weave,
+  'zigzag': Zigzag,
+  'zigzag-vertical': ZigzagVertical,
+  'diagonal': Diagonal,
+  'diagonal-right-left': DiagonalRightLeft,
+  'square': Square,
+  'box': Box,
+  'triangle': Triangle,
+  'triangle-inverted': TriangleVertical,
+  'diamond': Diamond,
+  'diamond-box': DiamondBox
 };
 
+var deprecatedShapes = {
+  'circle': shapes['disc'],
+  'triangle-vertical': shapes['triangle-inverted'],
+  'line-horizontal': shapes['line'],
+  'line-diagonal-lr': shapes['diagonal'],
+  'line-diagonal-rl': shapes['diagonal-right-left'],
+  'zigzag-horizontal': shapes['zigzag'],
+  'diamond-outline': shapes['diamond-box']
+};
+
+var completeShapesList = [];
+
 function getRandomShape() {
@@ -398,8 +1029,2 @@ var excludedShapeTypes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
-  shapesList = shapesList.filter(function (shape) {
-    if (deprecatedShapes.indexOf(shape) === -1) {
-      return shape;
-    }
-  });
-
   excludedShapeTypes.forEach(function (shapeType) {
@@ -414,29 +1039,25 @@ shapesList.splice(shapesList.indexOf(shapeType), 1);
 
+Object.assign(completeShapesList, shapes, deprecatedShapes);
+
 function draw() {
   var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square';
-  var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(100, 100, 100, 0.7)';
-  var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 0.7)';
-  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;
+  var backgroundColor = arguments[1];
+  var patternColor = arguments[2];
+  var size = arguments[3];
 
-  var outerSize = size * 2;
   var patternCanvas = document.createElement('canvas');
   var patternContext = patternCanvas.getContext('2d');
-  var shape = shapes[shapeType];
-  var pattern = void 0,
-      patternFill = void 0;
+  var outerSize = size * 2;
 
+  var Shape = completeShapesList[shapeType];
+  var shape = new Shape(size, backgroundColor, patternColor);
+
+  var pattern = patternContext.createPattern(shape.drawTile(), 'repeat');
+
   patternCanvas.width = outerSize;
   patternCanvas.height = outerSize;
 
-  patternContext.fillStyle = backgroundColor;
-  patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
+  pattern.shapeType = shapeType;
 
-  pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
-  patternContext.fillStyle = pattern;
-  patternContext.fillRect(0, 0, outerSize, outerSize);
-
-  patternFill = patternContext.createPattern(patternCanvas, 'repeat');
-  patternFill.shapeType = shapeType;
-
-  return patternFill;
+  return pattern;
 }
@@ -443,0 +1064,0 @@

package.json

 {
   "name": "patternomaly",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Easily generate patterns for use in data graphics",
@@ -16,3 +16,4 @@ "jsnext:main": "dist/patternomaly.mjs",
     "prepublish": "npm test",
-    "lint": "eslint src/ test/"
+    "lint": "eslint src/ test/",
+    "coverage": "babel-node ./node_modules/.bin/babel-istanbul cover _mocha"
   },
@@ -24,3 +25,5 @@ "directories": {
   "devDependencies": {
+    "babel-cli": "^6.18.0",
     "babel-eslint": "^6.1.2",
+    "babel-istanbul": "^0.12.1",
     "babel-plugin-external-helpers": "^6.8.0",
@@ -37,3 +40,2 @@ "babel-preset-es2015": "^6.13.2",
     "rollup-plugin-babel": "^2.6.1",
-    "rollup-plugin-istanbul": "^1.0.0",
     "rollup-watch": "^2.5.0"
@@ -40,0 +42,0 @@ },

rollup.config.js

 import babel from 'rollup-plugin-babel';
 import babelrc from 'babelrc-rollup';
 
-let pkg = require('./package.json');
+const pkg = require('./package.json');
 
@@ -6,0 +6,0 @@ export default {

src/patterns.js

@@ -5,26 +5,21 @@ import shapes, { getRandomShape } from './shapes/index';
   shapeType = 'square',
-  backgroundColor = 'rgba(100, 100, 100, 0.7)',
-  patternColor = 'rgba(255, 255, 255, 0.7)',
-  size = 20
+  backgroundColor,
+  patternColor,
+  size
 ) {
-  let outerSize = size * 2;
-  let patternCanvas = document.createElement('canvas');
-  let patternContext = patternCanvas.getContext('2d');
-  let shape = shapes[shapeType];
-  let pattern, patternFill;
+  const patternCanvas = document.createElement('canvas');
+  const patternContext = patternCanvas.getContext('2d');
+  const outerSize = size * 2;
 
+  const Shape = shapes[shapeType];
+  const shape = new Shape(size, backgroundColor, patternColor);
+
+  const pattern = patternContext.createPattern(shape.drawTile(), 'repeat');
+
   patternCanvas.width = outerSize;
   patternCanvas.height = outerSize;
 
-  patternContext.fillStyle = backgroundColor;
-  patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
+  pattern.shapeType = shapeType;
 
-  pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
-  patternContext.fillStyle = pattern;
-  patternContext.fillRect(0, 0, outerSize, outerSize);
-
-  patternFill = patternContext.createPattern(patternCanvas, 'repeat');
-  patternFill.shapeType = shapeType;
-
-  return patternFill;
+  return pattern;
 }
@@ -31,0 +26,0 @@

src/shapes/cross-dash.js

@@ -1,21 +0,22 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
+import Cross from './cross';
+import Dash from './dash';
 
-export default function crossDash () {
-  const shape = generateShape(20);
+export default class CrossDash extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
+    this._context.beginPath();
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this.setStrokeProps();
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 9);
-  shape.context.moveTo(1, 9);
-  shape.context.lineTo(9, 1);
+    const cross = new Cross();
+    cross.drawCross.call(this);
 
-  shape.context.moveTo(11, 11);
-  shape.context.lineTo(19, 19);
-  shape.context.stroke();
+    const dash = new Dash();
+    dash.drawDash.call(this, halfSize, halfSize);
 
-  return shape.canvas;
+    this._context.stroke();
+
+    return this._canvas;
+  }
 }

src/shapes/cross.js

@@ -1,23 +0,31 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function cross () {
-  const shape = generateShape(20);
+export default class Cross extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this._context.beginPath();
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 9);
-  shape.context.moveTo(1, 9);
-  shape.context.lineTo(9, 1);
+    this.setStrokeProps();
 
-  shape.context.moveTo(11, 11);
-  shape.context.lineTo(19, 19);
-  shape.context.moveTo(11, 19);
-  shape.context.lineTo(19, 11);
-  shape.context.stroke();
+    this.drawCross();
+    this.drawCross(halfSize, halfSize);
 
-  return shape.canvas;
+    this._context.stroke();
+
+    return this._canvas;
+  }
+
+  drawCross(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const halfSize = size / 2;
+    const gap = 2;
+
+    this._context.moveTo(offsetX + gap, offsetY + gap);
+    this._context.lineTo((halfSize - gap) + offsetX, (halfSize - gap) + offsetY);
+    this._context.moveTo(offsetX + gap, (halfSize - gap) + offsetY);
+    this._context.lineTo((halfSize - gap) + offsetX, offsetY + gap);
+
+    this._context.closePath();
+  }
 }

src/shapes/diagonal-right-left.js

@@ -1,18 +0,12 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Diagonal from './diagonal';
 
-export default function diagonalRightLeft () {
-  const shape = generateShape(20);
+export default class DiagonalRightLeft extends Diagonal {
+  drawTile() {
+    this._context.translate(this._size, 0);
+    this._context.rotate(90 * Math.PI / 180);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    Diagonal.prototype.drawTile.call(this);
 
-  shape.context.moveTo(11, -1);
-  shape.context.lineTo(-1, 11);
-  shape.context.moveTo(21, 9);
-  shape.context.lineTo(9, 21);
-
-  shape.context.stroke();
-
-  return shape.canvas;
+    return this._canvas;
+  }
 }

src/shapes/diagonal.js

@@ -1,18 +0,29 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function diagonal () {
-  const shape = generateShape(20);
+export default class Diagonal extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this._context.beginPath();
 
-  shape.context.moveTo(9, -1);
-  shape.context.lineTo(21, 11);
-  shape.context.moveTo(-1, 9);
-  shape.context.lineTo(11, 21);
+    this.setStrokeProps();
 
-  shape.context.stroke();
+    this.drawDiagonalLine();
+    this.drawDiagonalLine(halfSize, halfSize);
 
-  return shape.canvas;
+    this._context.stroke();
+
+    return this._canvas;
+  }
+
+  drawDiagonalLine(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const halfSize = size / 2;
+    const gap = 1;
+
+    this._context.moveTo((halfSize - gap) - offsetX, (gap * -1) + offsetY);
+    this._context.lineTo((size + 1) - offsetX, (halfSize + 1) + offsetY);
+
+    this._context.closePath();
+  }
 }

src/shapes/diamond.js

@@ -1,25 +0,31 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function diamond () {
-  const shape = generateShape(20);
+export default class Diamond extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+    this._context.beginPath();
 
-  shape.context.moveTo(5, 0);
-  shape.context.lineTo(10, 5);
-  shape.context.lineTo(5, 10);
-  shape.context.lineTo(0, 5);
-  shape.context.closePath();
+    this.setFillProps();
 
-  shape.context.moveTo(15, 10);
-  shape.context.lineTo(20, 15);
-  shape.context.lineTo(15, 20);
-  shape.context.lineTo(10, 15);
-  shape.context.closePath();
+    this.drawDiamond();
+    this.drawDiamond(halfSize, halfSize);
 
-  shape.context.fill();
+    this._context.fill();
 
-  return shape.canvas;
+    return this._canvas;
+  }
+
+  drawDiamond(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const halfSize = size / 2;
+    const quarterSize = size / 4;
+
+    this._context.moveTo(quarterSize + offsetX, offsetY);
+    this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
+    this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
+    this._context.lineTo(offsetX, quarterSize + offsetY);
+
+    this._context.closePath();
+  }
 }

src/shapes/disc.js

@@ -1,16 +0,19 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Dot from './dot';
 
-export default function disc () {
-  const shape = generateShape(20);
+export default class Disc extends Dot {
+  drawTile() {
+    const halfSize = this._size / 2;
+    const diameter = this._size / 5;
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+    this._context.beginPath();
 
-  shape.context.arc(5, 5, 4, 0, 2 * Math.PI);
-  shape.context.moveTo(19, 15);
-  shape.context.arc(15, 15, 4, 0, 2 * Math.PI);
-  shape.context.fill();
+    this.setFillProps();
 
-  return shape.canvas;
+    this.drawDot(0, 0, diameter);
+    this.drawDot(halfSize, halfSize, diameter);
+
+    this._context.fill();
+
+    return this._canvas;
+  }
 }

src/shapes/dot-dash.js

@@ -1,21 +0,28 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
+import Dot from './dot';
+import Dash from './dash';
 
-export default function dotDash () {
-  const shape = generateShape(20);
+export default class DotDash extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+    this._context.beginPath();
 
-  shape.context.arc(5, 5, 2, 0, 2 * Math.PI);
-  shape.context.fill();
+    this.setStrokeProps();
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    const dash = new Dash();
+    dash.drawDash.call(this, halfSize, halfSize);
 
-  shape.context.moveTo(11, 11);
-  shape.context.lineTo(19, 19);
-  shape.context.stroke();
+    this._context.closePath();
+    this._context.stroke();
 
-  return shape.canvas;
+    this.setFillProps();
+
+    const dot = new Dot();
+    dot.drawDot.call(this);
+
+    this._context.fill();
+
+    return this._canvas;
+  }
 }

src/shapes/index.js

@@ -1,66 +0,8 @@
-import plus from './plus';
-import cross from './cross';
-import crossDash from './cross-dash';
-import dotDash from './dot-dash';
-import weave from './weave';
-import line from './line';
-import lineVertical from './line-vertical';
-import zigzag from './zigzag';
-import zigzagVertical from './zigzag-vertical';
-import diagonal from './diagonal';
-import diagonalRightLeft from './diagonal-right-left';
-import square from './square';
-import disc from './disc';
-import ring from './ring';
-import triangle from './triangle';
-import triangleVertical from './triangle-vertical';
-import diamond from './diamond';
-import diamondOutline from './diamond-outline';
+import { shapes, deprecatedShapes } from './shapes-list';
 
-const deprecatedShapes = [
-  'circle',
-  'triangle-inverted',
-  'line-horizontal',
-  'line-diagonal-lr',
-  'line-diagonal-rl',
-  'zigzag-horizontal'
-];
+const completeShapesList = [];
 
-const shapes = {
-  'plus': plus,
-  'cross': cross,
-  'crossDash': crossDash,
-  'dotDash': dotDash,
-  'weave': weave,
-  'line': line,
-  'line-vertical': lineVertical,
-  'zigzag': zigzag,
-  'zigzag-vertical': zigzagVertical,
-  'diagonal': diagonal,
-  'diagnonal-right-left': diagonalRightLeft,
-  'square': square,
-  'disc': disc,
-  'ring': ring,
-  'triangle': triangle,
-  'triangle-vertical': triangleVertical,
-  'diamond': diamond,
-  'diamond-outline': diamondOutline,
-  // deprecated shape names
-  'circle': disc,
-  'triangle-inverted': triangleVertical,
-  'line-horizontal': line,
-  'line-diagonal-lr': diagonal,
-  'line-diagonal-rl': diagonalRightLeft,
-  'zigzag-horizontal': zigzag
-};
-
 export function getRandomShape(excludedShapeTypes = []) {
-  let shapesList = Object.keys(shapes);
+  const shapesList = Object.keys(shapes);
 
-  shapesList = shapesList.filter((shape) => {
-    if (deprecatedShapes.indexOf(shape) === -1) {
-      return shape;
-    }
-  });
-
   excludedShapeTypes.forEach(shapeType => {
@@ -75,2 +17,4 @@ shapesList.splice(shapesList.indexOf(shapeType), 1);
 
-export default shapes;
+Object.assign(completeShapesList, shapes, deprecatedShapes);
+
+export default completeShapesList;

src/shapes/line-vertical.js

@@ -1,17 +0,12 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Line from './line';
 
-export default function lineVertical () {
-  const shape = generateShape(20);
+export default class VerticalLine extends Line {
+  drawTile() {
+    this._context.translate(this._size, 0);
+    this._context.rotate(90 * Math.PI / 180);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    Line.prototype.drawTile.call(this);
 
-  shape.context.moveTo(5, 0);
-  shape.context.lineTo(5, 20);
-  shape.context.moveTo(15, 0);
-  shape.context.lineTo(15, 20);
-  shape.context.stroke();
-
-  return shape.canvas;
+    return this._canvas;
+  }
 }

src/shapes/line.js

@@ -1,17 +0,28 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function line () {
-  const shape = generateShape(20);
+export default class Line extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this._context.beginPath();
 
-  shape.context.moveTo(0, 5);
-  shape.context.lineTo(20, 5);
-  shape.context.moveTo(0, 15);
-  shape.context.lineTo(20, 15);
-  shape.context.stroke();
+    this.setStrokeProps();
 
-  return shape.canvas;
+    this.drawLine();
+    this.drawLine(halfSize, halfSize);
+
+    this._context.stroke();
+
+    return this._canvas;
+  }
+
+  drawLine(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const quarterSize = size / 4;
+
+    this._context.moveTo(0, quarterSize + offsetY);
+    this._context.lineTo(this._size, quarterSize + offsetY);
+
+    this._context.closePath();
+  }
 }

src/shapes/plus.js

@@ -1,23 +0,31 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function plus () {
-  const shape = generateShape(20);
+export default class Plus extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this._context.beginPath();
 
-  shape.context.moveTo(5, 0);
-  shape.context.lineTo(5, 10);
-  shape.context.moveTo(0, 5);
-  shape.context.lineTo(10, 5);
+    this.setStrokeProps();
 
-  shape.context.moveTo(15, 10);
-  shape.context.lineTo(15, 20);
-  shape.context.moveTo(10, 15);
-  shape.context.lineTo(20, 15);
-  shape.context.stroke();
+    this.drawPlus();
+    this.drawPlus(halfSize, halfSize);
 
-  return shape.canvas;
+    this._context.stroke();
+
+    return this._canvas;
+  }
+
+  drawPlus(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const halfSize = size / 2;
+    const quarterSize = size / 4;
+
+    this._context.moveTo(quarterSize + offsetX, 0 + offsetY);
+    this._context.lineTo(quarterSize + offsetX, halfSize + offsetY);
+    this._context.moveTo(0 + offsetX, quarterSize + offsetY);
+    this._context.lineTo(halfSize + offsetX, quarterSize + offsetY);
+
+    this._context.closePath();
+  }
 }

src/shapes/ring.js

@@ -1,16 +0,19 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Dot from './dot';
 
-export default function ring () {
-  const shape = generateShape(20);
+export default class Ring extends Dot {
+  drawTile() {
+    const halfSize = this._size / 2;
+    const diameter = this._size / 5;
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this._context.beginPath();
 
-  shape.context.arc(5, 5, 4, 0, 2 * Math.PI);
-  shape.context.moveTo(19, 15);
-  shape.context.arc(15, 15, 4, 0, 2 * Math.PI);
-  shape.context.stroke();
+    this.setStrokeProps();
 
-  return shape.canvas;
+    this.drawDot(0, 0, diameter);
+    this.drawDot(halfSize, halfSize, diameter);
+
+    this._context.stroke();
+
+    return this._canvas;
+  }
 }

src/shapes/square.js

@@ -1,14 +0,28 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function square () {
-  const shape = generateShape(20);
+export default class Square extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.fillStyle = PATTERN_COLOR;
+    this._context.beginPath();
 
-  shape.context.fillRect(0, 0, 10, 10);
-  shape.context.fillRect(10, 10, 10, 10);
+    this.setFillProps();
 
-  return shape.canvas;
+    this.drawSquare();
+    this.drawSquare(halfSize, halfSize);
+
+    this._context.fill();
+
+    return this._canvas;
+  }
+
+  drawSquare(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const halfSize = size / 2;
+    const gap = size / 20;
+
+    this._context.fillRect(offsetX + gap, offsetY + gap, halfSize - (gap * 2), halfSize - (gap * 2));
+
+    this._context.closePath();
+  }
 }

src/shapes/triangle.js

@@ -1,25 +0,30 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function triangle () {
-  const shape = generateShape(20);
+export default class Triangle extends Shape {
+  drawTile() {
+    const halfSize = this._size / 2;
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 1.5;
-  shape.context.lineJoin = 'round';
+    this._context.beginPath();
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 1);
-  shape.context.lineTo(5, 8);
-  shape.context.closePath();
+    this.setFillProps();
 
-  shape.context.moveTo(11, 18);
-  shape.context.lineTo(19, 18);
-  shape.context.lineTo(15, 11);
-  shape.context.closePath();
+    this.drawTriangle();
+    this.drawTriangle(halfSize, halfSize);
 
-  shape.context.stroke();
+    this._context.fill();
 
-  return shape.canvas;
+    return this._canvas;
+  }
+
+  drawTriangle(offsetX = 0, offsetY = 0) {
+    const size = this._size;
+    const halfSize = size / 2;
+    const quarterSize = size / 4;
+
+    this._context.moveTo(quarterSize + offsetX, offsetY);
+    this._context.lineTo(halfSize + offsetX, halfSize + offsetY);
+    this._context.lineTo(offsetX, halfSize + offsetY);
+
+    this._context.closePath();
+  }
 }

src/shapes/weave.js

@@ -1,19 +0,28 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function weave () {
-  const shape = generateShape(20);
+export default class Weave extends Shape {
+  drawTile() {
+    this._context.beginPath();
 
-  shape.context.beginPath();
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
+    this.setStrokeProps();
 
-  shape.context.moveTo(1, 1);
-  shape.context.lineTo(9, 9);
+    this.drawWeave(0, 0);
 
-  shape.context.moveTo(11, 19);
-  shape.context.lineTo(19, 11);
-  shape.context.stroke();
+    this._context.stroke();
 
-  return shape.canvas;
+    return this._canvas;
+  }
+
+  drawWeave(offsetX, offsetY) {
+    const size = this._size;
+    const halfSize = size / 2;
+
+    this._context.moveTo(offsetX + 1, offsetY + 1);
+    this._context.lineTo(halfSize - 1, halfSize - 1);
+
+    this._context.moveTo(halfSize + 1, size - 1);
+    this._context.lineTo(size - 1, halfSize + 1);
+
+    this._context.closePath();
+  }
 }

src/shapes/zigzag-vertical.js

@@ -1,26 +0,12 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Zigzag from './zigzag';
 
-export default function zigzagVertical () {
-  const shape = generateShape(20);
+export default class ZigzagVertical extends Zigzag {
+  drawTile() {
+    this._context.translate(this._size, 0);
+    this._context.rotate(90 * Math.PI / 180);
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
-  shape.context.lineJoin = 'round';
+    Zigzag.prototype.drawTile.call(this);
 
-  shape.context.moveTo(2, 0);
-  shape.context.lineTo(7, 5);
-  shape.context.lineTo(2, 10);
-  shape.context.lineTo(7, 15);
-  shape.context.lineTo(2, 20);
-
-  shape.context.moveTo(12, 0);
-  shape.context.lineTo(17, 5);
-  shape.context.lineTo(12, 10);
-  shape.context.lineTo(17, 15);
-  shape.context.lineTo(12, 20);
-
-  shape.context.stroke();
-
-  return shape.canvas;
+    return this._canvas;
+  }
 }

src/shapes/zigzag.js

@@ -1,26 +0,29 @@
-import PATTERN_COLOR from './config';
-import generateShape from './generate';
+import Shape from './shape';
 
-export default function zigzag () {
-  const shape = generateShape(20);
+export default class Zigzag extends Shape {
+  drawTile() {
+    this._context.beginPath();
 
-  shape.context.strokeStyle = PATTERN_COLOR;
-  shape.context.lineWidth = 2;
-  shape.context.lineJoin = 'round';
+    this.setStrokeProps();
 
-  shape.context.moveTo(0, 2);
-  shape.context.lineTo(5, 7);
-  shape.context.lineTo(10, 2);
-  shape.context.lineTo(15, 7);
-  shape.context.lineTo(20, 2);
+    this.drawZigzag();
+    this.drawZigzag(this._size / 2);
 
-  shape.context.moveTo(0, 12);
-  shape.context.lineTo(5, 17);
-  shape.context.lineTo(10, 12);
-  shape.context.lineTo(15, 17);
-  shape.context.lineTo(20, 12);
+    this._context.stroke();
 
-  shape.context.stroke();
+    return this._canvas;
+  }
 
-  return shape.canvas;
+  drawZigzag(offsetY = 0) {
+    const size = this._size;
+    const quarterSize = size / 4;
+    const halfSize = size / 2;
+    const tenthSize = size / 10;
+
+    this._context.moveTo(0, tenthSize + offsetY);
+    this._context.lineTo(quarterSize, (halfSize - tenthSize) + offsetY);
+    this._context.lineTo(halfSize, tenthSize + offsetY);
+    this._context.lineTo(size - quarterSize, (halfSize - tenthSize) + offsetY);
+    this._context.lineTo(size, tenthSize + offsetY);
+  }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174080

increased by32.5%

Lines of code

2595

increased by57.56%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes