immutable-water-mark/lib/index.js

water-mark

"use strict";

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

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

var _reactDom = require("react-dom");

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

var _useForceUpdate = _interopRequireDefault(require("use-force-update"));

require("./style/WaterMark.css.json");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var WaterMarkView = function WaterMarkView(props) {
  var boxRef = (0, _react.useRef)(null);
  var markerRef = (0, _react.useRef)(null);
  var markersRef = (0, _react.useRef)(null);

  var renderCanvas = function renderCanvas(text) {
    if (!markerRef.current || !boxRef.current || !markersRef.current) {
      return;
    }

    var marker = markerRef.current;
    var markers = markersRef.current;
    var box = boxRef.current;
    var ctx = marker.getContext('2d');

    if (!ctx) {
      return;
    }

    ctx.clearRect(0, 0, marker.width, marker.height);
    ctx.font = '20px 黑体';
    ctx.rotate(-20 * Math.PI / 180);
    ctx.fillStyle = 'rgba(100,100,100,0.05)';
    ctx.fillText(text, -20, 80);
    ctx.rotate(20 * Math.PI / 180);
    var ctxr = markers.getContext('2d');

    if (!ctxr) {
      return;
    }

    ctxr.clearRect(0, 0, markers.width, markers.height);
    var pat = ctxr.createPattern(marker, 'repeat');

    if (!pat) {
      return;
    }

    ctxr.fillStyle = pat;
    ctxr.fillRect(0, 0, markers.width, markers.height);
    var backgroundImg = markers.toDataURL();
    var style = {
      display: 'block',
      backgroundImage: "url(".concat(backgroundImg, ")"),
      position: 'fixed',
      width: '100vw',
      height: '100vh',
      zIndex: 1001,
      pointerEvents: 'none',
      top: '0px',
      left: '0px'
    };
    Object.assign(box.style, style);
  };

  (0, _react.useEffect)(function () {
    renderCanvas(props.text);
  });
  return _react.default.createElement("div", {
    id: "WATERMARKER",
    className: (0, _classnames.default)(props.className),
    ref: boxRef
  }, _react.default.createElement("canvas", {
    style: {
      display: 'none'
    },
    width: "100px",
    height: "100px",
    ref: markerRef
  }), _react.default.createElement("canvas", {
    style: {
      display: 'none'
    },
    width: "1000px",
    height: "1000px",
    ref: markersRef
  }));
};

var $container = document.querySelector('body');
var observer;

var WaterMark = function WaterMark(props) {
  var forceUpdate = (0, _useForceUpdate.default)();
  (0, _react.useEffect)(function () {
    setTimeout(function () {
      var $watermarker = document.getElementById('WATERMARKER');
      observer = new MutationObserver(function (mutationsList) {
        var ele;
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = mutationsList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            ele = _step.value;

            if (ele.removedNodes[0] && ele.removedNodes[0].isEqualNode($watermarker)) {
              if (!$container || !$watermarker) {
                return;
              }

              $container.appendChild($watermarker);
              return true;
            }

            if (ele.target && ele.target.isEqualNode($watermarker)) {
              forceUpdate();
              return true;
            }

            return false;
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return != null) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }

        return false;
      });

      if (!$container) {
        return;
      }

      observer.observe($container, {
        attributes: true,
        childList: true,
        subtree: true
      });
    }, 1000);
    return function () {
      observer.disconnect();
    };
  }, []);
  return $container && (0, _reactDom.createPortal)(_react.default.createElement(WaterMarkView, {
    text: props.text,
    className: props.className
  }), $container);
};

var _default = WaterMark;
exports.default = _default;
//# sourceMappingURL=index.js.map