vantui-edit/lib/water-mark/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

var _components = require("@tarojs/components");

var _taro = require("@tarojs/taro");

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

var _react = require("react");

var _utils = require("./utils");

var _jsxRuntime = require("react/jsx-runtime");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var classPrefix = "van-water-mark";
var cIndex = 0;

var WaterMark = function WaterMark(props) {
  var _props$zIndex = props.zIndex,
      zIndex = _props$zIndex === void 0 ? 2000 : _props$zIndex,
      _props$gapX = props.gapX,
      gapX = _props$gapX === void 0 ? 24 : _props$gapX,
      _props$gapY = props.gapY,
      gapY = _props$gapY === void 0 ? 48 : _props$gapY,
      _props$width = props.width,
      width = _props$width === void 0 ? 120 : _props$width,
      _props$height = props.height,
      height = _props$height === void 0 ? 64 : _props$height,
      _props$rotate = props.rotate,
      rotate = _props$rotate === void 0 ? -22 : _props$rotate,
      image = props.image,
      _props$imageWidth = props.imageWidth,
      imageWidth = _props$imageWidth === void 0 ? 120 : _props$imageWidth,
      _props$imageHeight = props.imageHeight,
      imageHeight = _props$imageHeight === void 0 ? 64 : _props$imageHeight,
      content = props.content,
      _props$fontStyle = props.fontStyle,
      fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
      _props$fontWeight = props.fontWeight,
      fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
      _props$fontColor = props.fontColor,
      fontColor = _props$fontColor === void 0 ? 'rgba(0,0,0,.15)' : _props$fontColor,
      _props$fontSize = props.fontSize,
      fontSize = _props$fontSize === void 0 ? 14 : _props$fontSize,
      _props$fontFamily = props.fontFamily,
      fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
      _props$fullPage = props.fullPage,
      fullPage = _props$fullPage === void 0 ? true : _props$fullPage;

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      base64Url = _useState2[0],
      setBase64Url = _useState2[1];

  var _useState3 = (0, _react.useState)(),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      canvasRect = _useState4[0],
      setCanvasRect = _useState4[1];

  var _useState5 = (0, _react.useState)(cIndex++),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
      compIndex = _useState6[0];

  var work = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var canvas, base64Url_;
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return (0, _utils.getCanvas)(compIndex);

          case 2:
            canvas = _context.sent;
            _context.next = 5;
            return (0, _utils.getWaterData)({
              gapX: gapX,
              gapY: gapY,
              rotate: rotate,
              fontStyle: fontStyle,
              fontWeight: fontWeight,
              width: width,
              height: height,
              fontFamily: fontFamily,
              fontColor: fontColor,
              image: image,
              content: content,
              fontSize: fontSize,
              imageWidth: imageWidth,
              imageHeight: imageHeight,
              canvas: canvas,
              setCanvasRect: setCanvasRect
            });

          case 5:
            base64Url_ = _context.sent;
            setBase64Url(base64Url_);

          case 7:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })), [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize, imageWidth, imageHeight]);
  (0, _react.useEffect)(function () {
    (0, _taro.nextTick)(function () {
      work();
    });
  }, [work]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
    className: (0, _classnames.default)(classPrefix, (0, _defineProperty2.default)({}, "".concat(classPrefix, "-full-page"), fullPage)),
    style: {
      zIndex: zIndex,
      backgroundSize: "".concat(gapX + width, "px"),
      backgroundImage: "url('".concat(base64Url, "')")
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Canvas, {
      style: _objectSpread(_objectSpread({}, canvasRect), {}, {
        position: 'absolute',
        left: -500
      }),
      id: "van-water-mark".concat(compIndex),
      type: "2d"
    })
  });
};

exports.WaterMark = WaterMark;
var _default = WaterMark;
exports.default = _default;