@6thquake/react-material/esm/Watermark/Watermark.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _classnames = _interopRequireDefault(require("classnames"));

var styles = function styles(theme) {
  return {
    root: {
      pointerEvents: 'none',
      position: 'fixed',
      zIndex: theme.zIndex.tooltip + 1,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      width: '100%',
      height: '100%',
      background: 'transparent'
    },
    canvas: {
      display: 'none'
    },
    mark: {
      position: 'fixed',
      width: '100%',
      height: '100%',
      backgroundRepeat: 'no-repeat'
    },
    text: {
      fontFamily: theme.typography.fontFamily,
      visibility: 'hidden'
    },
    stretch: {
      backgroundRepeat: 'repeat'
    },
    'bottom-end': {
      backgroundPosition: 'bottom 0px right 0px'
    },
    'bottom-start': {
      backgroundPosition: 'bottom 0px left 0px'
    },
    bottom: {
      backgroundPosition: 'bottom'
    },
    'left-end': {
      backgroundPosition: 'bottom 0px left 0px'
    },
    'left-start': {
      backgroundPosition: 'top 0px left 0px'
    },
    left: {
      backgroundPosition: 'left'
    },
    'right-end': {
      backgroundPosition: 'bottom 0px right 0px'
    },
    'right-start': {
      backgroundPosition: 'top 0px right 0px'
    },
    right: {
      backgroundPosition: 'right'
    },
    'top-end': {
      backgroundPosition: 'top 0px right 0px'
    },
    'top-start': {
      backgroundPosition: 'top 0px left 0px'
    },
    top: {
      backgroundPosition: 'top'
    },
    center: {
      backgroundPosition: 'center'
    }
  };
};

var Watermark =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Watermark, _React$Component);

  function Watermark() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Watermark);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Watermark)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      mark: ''
    };
    _this.canvas = null;
    return _this;
  }

  (0, _createClass2.default)(Watermark, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.ctx = this.canvas.getContext('2d');
      this.draw();
    }
  }, {
    key: "draw",
    value: function draw() {
      var ctx = this.ctx;

      if (!ctx) {
        return;
      }

      var _this$props = this.props,
          placement = _this$props.placement,
          text = _this$props.text,
          fontSize = _this$props.fontSize,
          fontColor = _this$props.fontColor,
          spacing = _this$props.spacing,
          theme = _this$props.theme;
      var degree = this.props.degree;

      if (Math.abs(degree) >= 180) {
        degree %= 180;
      }

      if (placement !== 'stretch') {
        degree = 0;
      }

      var deg = degree * Math.PI / 180;

      var _this$textDom$getBoun = this.textDom.getBoundingClientRect(),
          width = _this$textDom$getBoun.width,
          height = _this$textDom$getBoun.height;

      var width2 = Math.cos(deg) * width + Math.sin(deg) * height + Math.sin(deg) * spacing;
      var height2 = Math.sin(deg) * width + Math.cos(deg) * height + Math.cos(deg) * spacing;
      this.canvas.width = width2;
      this.canvas.height = height2;
      ctx.rotate(deg);
      ctx.font = "".concat(fontSize, "px ").concat(theme.typography.fontFamily);
      ctx.fillStyle = fontColor;
      ctx.fillText(text, Math.sin(deg) * spacing, Math.cos(deg) * spacing);
      var mark = this.canvas.toDataURL('image/png', 1);
      this.setState({
        mark: mark
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var mark = this.state.mark;
      var _this$props2 = this.props,
          placement = _this$props2.placement,
          container = _this$props2.container,
          text = _this$props2.text,
          fontSize = _this$props2.fontSize,
          spacing = _this$props2.spacing,
          classes = _this$props2.classes;
      var position = container === 'window' ? 'fixed' : 'absolute';
      var positionStyle = {
        position: position
      };
      var style = (0, _extends2.default)({}, positionStyle);
      var canvasStyle = {// width: size,
        // height: size,
      };
      var imgStyle = (0, _extends2.default)({}, positionStyle, {
        'background-image': "url(".concat(mark, ")")
      });
      return _react.default.createElement("div", {
        className: classes.root,
        style: style
      }, mark && _react.default.createElement("div", {
        className: (0, _classnames.default)(classes.mark, classes[placement]),
        style: imgStyle
      }), _react.default.createElement("canvas", {
        ref: function ref(e) {
          _this2.canvas = e;
        },
        className: classes.canvas,
        style: canvasStyle
      }), _react.default.createElement("span", {
        ref: function ref(e) {
          _this2.textDom = e;
        },
        className: classes.text,
        style: {
          fontSize: fontSize,
          margin: spacing
        }
      }, text));
    }
  }]);
  return Watermark;
}(_react.default.Component);

Watermark.defaultProps = {
  text: '',
  placement: 'stretch',
  container: 'window',
  fontSize: 14,
  fontColor: 'rgba(0, 0, 0, 0.12)',
  degree: 45,
  spacing: 8
};
Watermark.propTypes = {
  /**
   * relative placement of text
   */
  container: _propTypes.default.oneOf(['parent', 'window']),

  /**
   * tilt angle of text
   */
  degree: _propTypes.default.number,

  /**
   * font color
   */
  fontColor: _propTypes.default.string,

  /**
   * font size
   */
  fontSize: _propTypes.default.number,

  /**
   * Where the text is placed
   */
  placement: _propTypes.default.oneOf(['stretch', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),

  /**
   * spacing among text
   */
  spacing: _propTypes.default.number,

  /**
   * the text
   */
  text: _propTypes.default.string
};

var _default = (0, _withStyles.default)(styles, {
  withTheme: true
})(Watermark);

exports.default = _default;