patternomaly - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

.eslintrc.json

 {
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
+        "node": true
     },
@@ -6,0 +7,0 @@ "globals": {

index.js

@@ -1,1 +0,4 @@
-export { default as draw } from './src/patterns';
+export {
+  default as draw,
+  generate
+} from './src/patterns';

package.json

 {
   "name": "patternomaly",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Easily generate patterns for use in data graphics",
@@ -29,3 +29,3 @@ "main": "dist/patterns.js",
     "build:watch": "watch 'npm run build' src/ test/",
-    "test": "babel-tape-runner test/unit/**/*.js | faucet",
+    "test": "npm run build && tape test/unit/**/*.js | faucet",
     "test:watch": "watch 'npm test' src/ test/",
@@ -32,0 +32,0 @@ "lint": "eslint src/ test/"

src/patterns.js

@@ -1,16 +0,4 @@
-import {
-  square,
-  circle,
-  diamond,
-  triangle,
-  triangleInverted,
-  lineHorizontal,
-  lineVertical,
-  lineDiagonalLeftToRight,
-  lineDiagonalRightToLeft,
-  zigzagHorizontal,
-  zigzagVertical
-} from './shapes';
+import { default as shapes } from './shapes';
 
-function draw (
+export default function draw (
   shapeType = 'square',
@@ -21,44 +9,8 @@ backgroundColor = 'rgba(100, 100, 100, 0.7)',
 ) {
-  let shape;
-  let pattern;
+  let outerSize = size * 2;
   let patternCanvas = document.createElement('canvas');
   let patternContext = patternCanvas.getContext('2d');
+  let shape = shapes[shapeType];
+  let pattern, patternFill;
 
-  switch (shapeType) {
-    case 'circle':
-      shape = circle;
-      break;
-    case 'diamond':
-      shape = diamond;
-      break;
-    case 'triangle':
-      shape = triangle;
-      break;
-    case 'triangle-inverted':
-      shape = triangleInverted;
-      break;
-    case 'line-horizontal':
-      shape = lineHorizontal;
-      break;
-    case 'line-vertical':
-      shape = lineVertical;
-      break;
-    case 'line-diagonal-lr':
-      shape = lineDiagonalLeftToRight;
-      break;
-    case 'line-diagonal-rl':
-      shape = lineDiagonalRightToLeft;
-      break;
-    case 'zigzag-horizontal':
-      shape = zigzagHorizontal;
-      break;
-    case 'zigzag-vertical':
-      shape = zigzagVertical;
-      break;
-    default:
-      shape = square;
-  }
-
-  let outerSize = size * 2;
-
   patternCanvas.width = outerSize;
@@ -70,9 +22,33 @@ patternCanvas.height = outerSize;
 
-  pattern = patternContext.createPattern(shape.call(this, size), 'repeat');
+  pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
   patternContext.fillStyle = pattern;
   patternContext.fillRect(0, 0, outerSize, outerSize);
 
-  return patternContext.createPattern(patternCanvas, 'repeat');
+  patternFill = patternContext.createPattern(patternCanvas, 'repeat');
+  patternFill.shapeType = shapeType;
+
+  return patternFill;
 }
 
-export default draw;
+export function generate(colorList) {
+  let previousShapeType = null;
+
+  return colorList.map((color) => {
+    const shapeType = getRandomShape(previousShapeType);
+    previousShapeType = shapeType;
+
+    return draw(shapeType, color);
+  });
+}
+
+function getRandomShape(excludedShapeType) {
+  const shapesList = Object.keys(shapes);
+
+  if (excludedShapeType !== null) {
+    shapesList.splice(shapesList.indexOf(excludedShapeType), 1);
+  }
+
+  const randomIndex = Math.floor(Math.random() * shapesList.length);
+
+  return shapesList[randomIndex];
+}

src/shapes.js

@@ -27,3 +27,2 @@ function generateShape (size) {
   let shape = generateShape(diameter);
-
   let radius = diameter / 2;
@@ -252,1 +251,15 @@
 }
+
+export default {
+  'square': square,
+  'circle': circle,
+  'diamond': diamond,
+  'triangle': triangle,
+  'triangle-inverted': triangleInverted,
+  'line-horizontal': lineHorizontal,
+  'line-vertical': lineVertical,
+  'line-diagonal-lr': lineDiagonalLeftToRight,
+  'line-diagonal-rl': lineDiagonalRightToLeft,
+  'zigzag-vertical': zigzagHorizontal,
+  'zigzag-horizontal': zigzagVertical
+};

test/unit/patterns.js

@@ -1,11 +0,58 @@
-import test from 'tape';
+var test = require('tape');
+var pattern = require('../../');
+var jsdom = require('jsdom');
 
-import pattern from '../../src/patterns';
+global.document = jsdom.jsdom('<html></html>');
 
-test('pattern returns a canvas pattern', (t) => {
+test('pattern returns a canvas pattern', function (t) {
   t.plan(1);
 
-  let testPattern = pattern();
+  var testPattern = pattern.draw();
 
   t.equal(testPattern.toString(), '[object CanvasPattern]');
 });
+
+test('generate returns a list of canvas patterns', function (t) {
+  t.plan(4);
+
+  var colorList = [
+    '#ff6384',
+    '#36a2eb'
+  ];
+  var testPatterns;
+
+  testPatterns = pattern.generate(colorList);
+
+  t.ok(Array.isArray(testPatterns));
+  t.equal(testPatterns.length, 2);
+  t.equal(testPatterns[0].toString(), '[object CanvasPattern]');
+  t.equal(testPatterns[1].toString(), '[object CanvasPattern]');
+});
+
+test('a pattern type should not be contiguous', function(t) {
+  t.plan(1);
+
+  var colorList = [
+    '#1f77b4',
+    '#e377c2',
+    '#ff7f0e',
+    '#2ca02c',
+    '#bcbd22',
+    '#d62728',
+    '#17becf',
+    '#9467bd',
+    '#7f7f7f',
+    '#8c564b',
+    '#3366cc'
+  ];
+  var testPatterns = pattern.generate(colorList);
+  var notContiguous = true;
+
+  testPatterns.forEach(function (pattern, index) {
+    if (index !== 0) {
+      notContiguous = testPatterns[index-1].shapeType !== pattern.shapeType;
+    }
+  });
+
+  t.ok(notContiguous);
+});

No alert changes

Improved metrics

Total package byte prevSize

354955

increased by0.63%

Number of package files

18

increased by5.88%

Lines of code

9202

increased by0.27%

No dependency changes