svg-patterns/p/lines.js

SVG patterns for Data Visualization.

'use strict';

var dom = require('virtual-dom/h');

var _require = require('../helpers'),
    M = _require.M,
    l = _require.l,
    pattern = _require.pattern;

var tile = function tile(o, s) {
  if (o % 180 === 0) return M(s / 2, 0) + l(0, s);
  if (o % 180 === 45) return M(0, s) + l(s, -s) + M(-s / 4, s / 4) + l(s / 2, -s / 2) + M(s * 3 / 4, s * 5 / 4) + l(s / 2, -s / 2);
  if (o % 180 === -45) return M(s, s) + l(-s, -s) + M(s * 5 / 4, s / 4) + l(-s / 2, -s / 2) + M(s / 4, s * 5 / 4) + l(-s / 2, -s / 2);
  if (o % 180 === 90) return M(0, s / 2) + l(s, 0);
  return '';
};

var defaults = {
  size: 8,
  // size of the pattern
  strokeWidth: .7,
  stroke: '#343434',
  // any SVG-compatible color
  background: null,
  // any SVG-compatible color
  orientations: [45] // can be any combination of 0, 45, -45, 90

};

var lines = function lines() {
  var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  opt = Object.assign({}, defaults, opt);
  var orientations = opt.orientations ? Array.isArray(opt.orientations) ? opt.orientations : [opt.orientations] : [0, 45];
  Object.assign(opt, {
    width: opt.size,
    height: opt.size,
    bg: opt.background,
    children: orientations.map(function (orientation) {
      return dom('path', {
        d: tile(orientation, opt.size),
        stroke: opt.stroke,
        'stroke-width': opt.strokeWidth + '',
        'stroke-linecap': 'square'
      });
    })
  });
  return pattern(opt);
};

module.exports = lines;