svg-patterns/helpers.js

SVG patterns for Data Visualization.

'use strict';

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

var shortid = function shortid(l) {
  return Math.floor(Math.random() * 26 + 10).toString(36) + new Array(l - 1).fill(null).map(function () {
    return Math.floor(Math.random() * 36).toString(36);
  }).join('');
};

var command = function command(name) {
  return function () {
    for (var _len = arguments.length, vs = new Array(_len), _key = 0; _key < _len; _key++) {
      vs[_key] = arguments[_key];
    }

    return name + vs.map(Math.round).join(',');
  };
};

var M = command('M');
var l = command('l');
var c = command('c');
var v = command('v');
var a = command('a');

var pattern = function pattern(_) {
  var width = _.width,
      height = _.height,
      bg = _.bg;
  var children = _.children;
  var id = _.id || shortid(6);
  if (bg) children = [dom('rect', {
    width: width + '',
    height: height + '',
    fill: bg
  })].concat(children || []);
  var pattern = dom('pattern', {
    id: id,
    width: width,
    height: height,
    patternUnits: 'userSpaceOnUse'
  }, children);

  pattern.url = function () {
    return "url(#".concat(id, ")");
  };

  return pattern;
};

var pathPattern = function pathPattern(_) {
  var _ref = _,
      d = _ref.d,
      stroke = _ref.stroke,
      strokeWidth = _ref.strokeWidth,
      children = _ref.children;
  var path = dom('path', {
    d: d,
    stroke: stroke,
    'stroke-width': strokeWidth + '',
    'stroke-linecap': 'square'
  });
  _ = Object.assign({}, _, {
    children: [path].concat(children || [])
  });
  return pattern(_);
};

module.exports = {
  M: M,
  l: l,
  c: c,
  v: v,
  pattern: pattern,
  pathPattern: pathPattern
};