core-graphics/lib/renderer/grid-defs.js

A core library for creating shape-based graphic editors

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GRID_DEFS_ID = undefined;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _math = require('../utils/math');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var GRID_DEFS_ID = exports.GRID_DEFS_ID = 'grid-defs';

exports.default = function (props) {
  var size = props.size;
  var vx = props.vx;
  var vy = props.vy;

  var base = size * 5;
  var dx = Math.round((0, _math.modulus)(vx, base)) || 0;
  var dy = Math.round((0, _math.modulus)(vy, base)) || 0;
  return React.createElement('defs', { key: vx + '_' + vy + '_' + size, dangerouslySetInnerHTML: { __html: '\n      <pattern id="smallGrid"\n               width="' + size + '"\n               height="' + size + '"\n               patternUnits="userSpaceOnUse"\n      >\n        <path d="M ' + size + ' 0 L 0 0 0 ' + size + '" fill="none" stroke="#eee" stroke-width="0.5"/>\n      </pattern>\n      <pattern\n        id="' + GRID_DEFS_ID + '" width="' + base + '" height="' + base + '"\n        patternUnits="userSpaceOnUse" patternTransform="translate(' + dx + ' ' + dy + ')"\n      >\n        <rect\n          width="' + size * 5 + '"\n          height="' + size * 5 + '"\n          fill="url(#smallGrid)"\n        />\n        <path d="M ' + size * 5 + ' 0 L 0 0 0 ' + size * 5 + '" fill="none" stroke="#ddd" stroke-width="1"/>\n      </pattern>\n    ' } });
};