@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
196 lines (195 loc) • 8.88 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Signature = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _taro = _interopRequireDefault(require("@tarojs/taro"));
var _components = require("@tarojs/components");
var _utils = require("../common/utils");
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["canvasId", "lineWidth", "strokeStyle", "className"];
/* eslint-disable react-hooks/exhaustive-deps */
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 defaultProps = {
canvasId: 'spcanvas',
type: 'png',
lineWidth: 2,
strokeStyle: '#000',
className: ''
};
var componentIndex = 0;
var Signature = /*#__PURE__*/(0, _react.forwardRef)(function Signature(props, ref) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Signature),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _defaultProps$d$props = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), d), props),
canvasId = _defaultProps$d$props.canvasId,
lineWidth = _defaultProps$d$props.lineWidth,
strokeStyle = _defaultProps$d$props.strokeStyle,
className = _defaultProps$d$props.className,
rest = (0, _objectWithoutProperties2.default)(_defaultProps$d$props, _excluded);
var canvasRef = (0, _react.useRef)(null);
var wrapRef = (0, _react.useRef)(null);
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
canvasHeight = _useState4[0],
setCanvasHeight = _useState4[1];
var _useState5 = (0, _react.useState)(0),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
canvasWidth = _useState6[0],
setCanvasWidth = _useState6[1];
var ctx = (0, _react.useRef)(null);
var _useState7 = (0, _react.useState)(componentIndex++),
_useState8 = (0, _slicedToArray2.default)(_useState7, 1),
compIndex = _useState8[0];
var startEventHandler = function startEventHandler() {
if (ctx.current) {
ctx.current.beginPath();
ctx.current.lineWidth = lineWidth;
ctx.current.strokeStyle = strokeStyle;
}
};
var moveEventHandler = function moveEventHandler(event) {
event.preventDefault();
event.stopPropagation();
if (ctx.current) {
(0, _utils.requestAnimationFrame)(function () {
var _ctx$current, _ctx$current2;
var evt = event.changedTouches[0];
var mouseX = evt.x || evt.clientX;
var mouseY = evt.y || evt.clientY;
if (_taro.default.getEnv() === 'WEB' && canvasRef.current) {
var coverPos = canvasRef.current.getBoundingClientRect();
mouseX = evt.clientX - coverPos.left;
mouseY = evt.clientY - coverPos.top;
}
(_ctx$current = ctx.current) === null || _ctx$current === void 0 ? void 0 : _ctx$current.lineTo(mouseX, mouseY);
(_ctx$current2 = ctx.current) === null || _ctx$current2 === void 0 ? void 0 : _ctx$current2.stroke();
});
}
};
var endEventHandler = function endEventHandler() {};
var handleClear = function handleClear() {
if (ctx.current) {
ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.current.closePath();
}
};
var getImage = function getImage() {
return new Promise(function (resolve, reject) {
var _ctx$current3, _ctx$current3$canvas;
var base64 = (_ctx$current3 = ctx.current) === null || _ctx$current3 === void 0 ? void 0 : (_ctx$current3$canvas = _ctx$current3.canvas) === null || _ctx$current3$canvas === void 0 ? void 0 : _ctx$current3$canvas.toDataURL("image/".concat(props.type), 0.8);
base64ToFile(base64).then(function (filePath) {
var _ctx$current4;
resolve({
tempFilePath: filePath,
base64: base64,
canvas: (_ctx$current4 = ctx.current) === null || _ctx$current4 === void 0 ? void 0 : _ctx$current4.canvas
});
}).catch(function (err) {
console.error("@anmjs/vantui: signature \u8F6C\u6362\u56FE\u7247\u5931\u8D25:", err);
reject(err);
});
});
};
var base64ToFile = function base64ToFile(base64) {
return new Promise(function (resolve, reject) {
var data = base64.replace(/^data:image\/\w+;base64,/, '');
var buffer = _taro.default.base64ToArrayBuffer(data);
var randomFileName = "".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2), ".png");
var filePath = "".concat(_taro.default.env.USER_DATA_PATH, "/").concat(randomFileName);
_taro.default.getFileSystemManager().writeFile({
filePath: filePath,
data: buffer,
encoding: 'binary',
success: function success() {
resolve(filePath);
},
fail: function fail(err) {
console.error('@anmjs/vantui: signature failed to save file: ', err);
reject(err);
}
});
});
};
var canvasSetting = function canvasSetting(canvasDom, width, height) {
if (canvasDom) {
var canvas = canvasDom;
canvas.current = canvas;
ctx.current = canvas.getContext('2d');
setCanvasWidth(width);
setCanvasHeight(height);
canvas.width = width;
canvas.height = height;
if (ctx.current) {
ctx.current.clearRect(0, 0, width, height);
ctx.current.beginPath();
ctx.current.lineWidth = lineWidth;
ctx.current.strokeStyle = strokeStyle;
}
}
};
var initCanvas = function initCanvas() {
_taro.default.nextTick(function () {
setTimeout(function () {
if (process.env.TARO_ENV !== 'h5') {
_taro.default.createSelectorQuery().select("#".concat(canvasId).concat(compIndex)).fields({
node: true,
size: true
}, function (res) {
var node = res.node,
width = res.width,
height = res.height;
canvasSetting(node, width, height);
}).exec();
} else {
var canvasDom = document.getElementById("".concat(canvasId).concat(compIndex));
var canvas = canvasDom;
if ((canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.tagName) !== 'CANVAS') {
canvas = canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.getElementsByTagName('canvas')[0];
}
canvasSetting(canvas, canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.offsetWidth, canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.offsetHeight);
}
}, 1000);
});
};
(0, _react.useEffect)(function () {
initCanvas();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _react.useImperativeHandle)(ref, function () {
return {
getImage: getImage,
clear: handleClear
};
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, _objectSpread(_objectSpread({
className: "van-signature ".concat(className)
}, rest), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-signature__inner spcanvas_WEAPP",
ref: wrapRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Canvas, {
className: "van-signature-canvas",
id: "".concat(canvasId).concat(compIndex),
ref: canvasRef,
canvasId: "".concat(canvasId).concat(compIndex),
disableScroll: true,
type: "2d",
onTouchStart: startEventHandler,
onTouchMove: moveEventHandler,
onTouchEnd: endEventHandler
})
})
}));
});
exports.Signature = Signature;
var _default = Signature;
exports.default = _default;