react-random-shapes/dist/index.js

Create a random, wavy svg image.

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var randomShapes = require('random-shapes');

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}

function getPointAttribute(pt, pattern) {
  var tmp = {};
  tmp[pattern.replace("?", "x")] = pt.x.toFixed(2);
  tmp[pattern.replace("?", "y")] = pt.y.toFixed(2);
  return tmp;
}
function renderControlPoints(data) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(function (x, i) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: "group " + i
    }, /*#__PURE__*/React.createElement("line", _extends({}, getPointAttribute(x.ctrl, "?1"), getPointAttribute(x.ctrl_alt, "?2"), {
      key: "line " + i,
      stroke: "blue"
    })), /*#__PURE__*/React.createElement("circle", _extends({}, getPointAttribute(x.point, "c?"), {
      r: 4,
      key: "center " + i
    })), /*#__PURE__*/React.createElement("circle", _extends({}, getPointAttribute(x.ctrl, "c?"), {
      r: 2,
      key: "control " + i
    })), /*#__PURE__*/React.createElement("circle", _extends({}, getPointAttribute(x.ctrl_alt, "c?"), {
      r: 2,
      key: "control_alt " + i
    })));
  }));
}
function RandomHLine(_ref) {
  var width = _ref.width,
    height = _ref.height,
    options = _ref.options,
    override = _ref.override,
    className = _ref.className;
  var opt = _extends({
    numLines: 1,
    styleMid: {
      fill: "transparent",
      stroke: "black"
    },
    styleTop: "none",
    styleBottom: "none",
    classNameTop: "",
    classNameBottom: "",
    classNameMid: "",
    seed: '',
    debug: false
  }, options);
  if (opt.styleTop !== "none" && !Array.isArray(opt.styleTop)) opt.styleTop = [opt.styleTop];
  if (opt.styleBottom !== "none" && !Array.isArray(opt.styleBottom)) opt.styleBottom = [opt.styleBottom];
  if (opt.styleMid !== "none" && !Array.isArray(opt.styleMid)) opt.styleMid = [opt.styleMid];
  if (opt.debug) {
    console.log(opt.styleMid[0 % opt.styleMid.length]);
  }
  var r = randomShapes.genHLines(width, height, opt, override);
  return /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 " + width + " " + height,
    width: width,
    height: height,
    version: "1.1",
    baseProfile: "full",
    xmlns: "http://www.w3.org/2000/svg",
    className: className
  }, r.map(function (_ref2, i) {
    var data = _ref2.data,
      curve = _ref2.curve;
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: "line" + i
    }, (opt.styleTop !== "none" || opt.classNameTop) && /*#__PURE__*/React.createElement("path", {
      d: curve + " V 0 H 0 Z",
      style: opt.styleTop !== "none" ? opt.styleTop[i % opt.styleTop.length] : {},
      className: opt.classNameTop
    }), (opt.styleBottom !== "none" || opt.classNameBottom) && /*#__PURE__*/React.createElement("path", {
      d: curve + (" V " + height + " H 0 Z"),
      style: opt.styleBottom !== "none" ? opt.styleBottom[i % opt.styleBottom.length] : {},
      className: opt.classNameBottom
    }), (opt.styleMid !== "none" || opt.classNameMid) && /*#__PURE__*/React.createElement("path", {
      d: curve,
      style: opt.styleMid !== "none" ? opt.styleMid[i % opt.styleMid.length] : {},
      className: opt.classNameMid
    }), opt.debug && renderControlPoints(data));
  }));
}
function RandomBlob(_ref3) {
  var size = _ref3.size,
    options = _ref3.options,
    className = _ref3.className;
  var opt = _extends({
    numBlobs: 1,
    style: {
      fill: "red"
    },
    className: "",
    seed: '',
    debug: false
  }, options);
  var blobs = randomShapes.genHBlobs(size, opt);
  var rendered = [];
  for (var i = 0; i < blobs.length; i += 1) {
    rendered.push( /*#__PURE__*/React.createElement("path", {
      d: blobs[i].path,
      style: opt.style,
      className: opt.className
    }));
    if (opt.debug) {
      rendered.push(renderControlPoints(blobs[i].data));
    }
  }
  return /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 " + size + " " + size,
    width: size,
    height: size,
    version: "1.1",
    baseProfile: "full",
    xmlns: "http://www.w3.org/2000/svg",
    className: className
  }, rendered);
}

exports.RandomBlob = RandomBlob;
exports.RandomHLine = RandomHLine;
//# sourceMappingURL=index.js.map