react_hsbc_teller 2.0.54 → 2.0.55

package/packages/common/index.esm.js

@@ -1,374 +1,374 @@
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-/**
- * canvas 画板
- */
-var BoardOperate = /*#__PURE__*/function () {
-  function BoardOperate(canvas, _ref) {
-    var _ref$drawType = _ref.drawType,
-        drawType = _ref$drawType === void 0 ? 'pen' : _ref$drawType,
-        _ref$drawColor = _ref.drawColor,
-        drawColor = _ref$drawColor === void 0 ? 'rgba(19, 206, 102, 1)' : _ref$drawColor,
-        _ref$lineWidth = _ref.lineWidth,
-        lineWidth = _ref$lineWidth === void 0 ? 5 : _ref$lineWidth,
-        _ref$sides = _ref.sides,
-        sides = _ref$sides === void 0 ? 3 : _ref$sides,
-        _ref$fillStyle = _ref.fillStyle,
-        fillStyle = _ref$fillStyle === void 0 ? null : _ref$fillStyle,
-        allowCallback = _ref.allowCallback,
-        moveCallback = _ref.moveCallback;
-
-    _classCallCheck(this, BoardOperate);
-
-    this.canvas = canvas; // 画板DOM
-
-    this.width = canvas.width; // 宽
-
-    this.height = canvas.height; // 高
-
-    this.ratio = canvas.width > canvas.clientWidth ? canvas.width / canvas.clientWidth : 1; // 比例(width和clientWidth不一致可调整比例)
-
-    this.ctx = canvas.getContext('2d');
-    this.isClickCanvas = false; // 是否点击canvas内部
-
-    this.isMoveCanvas = false; // 鼠标是否有移动
-
-    this.imgData = []; // 存储上一次的图像，用于撤回
-
-    this.index = 0; // 记录当前显示的是第几帧
-
-    this.x = 0; // 鼠标按下时的 x 坐标
-
-    this.y = 0; // 鼠标按下时的 y 坐标
-
-    this.last = [this.x, this.y]; // 鼠标按下及每次移动后的坐标
-
-    this.drawType = drawType; // 绘制形状
-
-    this.drawColor = drawColor; // 绘制颜色
-
-    this.lineWidth = lineWidth; // 线条宽度
-
-    this.sides = sides; // 多边形边数
-
-    this.fillStyle = fillStyle; // 初始填充颜色
-
-    this.allowCallback = allowCallback || function () {}; // 允许操作的回调
-
-
-    this.moveCallback = moveCallback || function () {}; // 鼠标移动的回调
-
-
-    this.bindMousemove = function () {}; // 解决 eventlistener 不能bind
-
-
-    this.bindMousedown = function () {}; // 解决 eventlistener 不能bind
-
-
-    this.bindMouseup = function () {}; // 解决 eventlistener 不能bind
-
-
-    this.init();
-  }
-
-  _createClass(BoardOperate, [{
-    key: "init",
-    value: function init() {
-      if (this.fillStyle) {
-        this.ctx.fillStyle = 'transparent';
-        this.ctx.fillRect(0, 0, this.width, this.height);
-      }
-
-      this.gatherImage();
-      this.bindMousemove = this.onmousemove.bind(this); // 解决 eventlistener 不能bind
-
-      this.bindMousedown = this.onmousedown.bind(this);
-      this.bindMouseup = this.onmouseup.bind(this);
-      var eventNameDown = 'mousedown',
-          eventNameUp = 'mouseup';
-
-      if ('ontouchstart' in this.canvas) {
-        // 移动端适配
-        this.isTouch = true;
-        eventNameDown = 'touchstart';
-        eventNameUp = 'touchend';
-      } else {
-        // PC 端鼠标事件
-        this.isTouch = false;
-      }
-
-      this.canvas.addEventListener(eventNameDown, this.bindMousedown);
-      this.canvas.addEventListener(eventNameUp, this.bindMouseup);
-    } // 获取当前位置
-
-  }, {
-    key: "getPoint",
-    value: function getPoint(e) {
-      // const { pageX, pageY, target } = e.changedTouches[0];
-      var _e$changedTouches$ = e.changedTouches[0],
-          clientX = _e$changedTouches$.clientX,
-          clientY = _e$changedTouches$.clientY,
-          target = _e$changedTouches$.target;
-
-      var _target$getBoundingCl = target.getBoundingClientRect(),
-          top = _target$getBoundingCl.top,
-          left = _target$getBoundingCl.left; // 获取当前节点到视口顶部和左边的距离
-
-
-      var x = (clientX - left) * this.ratio;
-      var y = (clientY - top) * this.ratio;
-      return {
-        x: x,
-        y: y
-      };
-    } // 鼠标按下
-
-  }, {
-    key: "onmousedown",
-    value: function onmousedown(e) {
-      e.preventDefault();
-      var eventName = 'mousemove';
-
-      if (this.isTouch) {
-        var _this$getPoint = this.getPoint(e),
-            x = _this$getPoint.x,
-            y = _this$getPoint.y;
-
-        e.offsetX = x;
-        e.offsetY = y;
-        eventName = 'touchmove';
-      }
-
-      this.canvas.addEventListener(eventName, this.bindMousemove);
-      this.isClickCanvas = true;
-      this.x = e.offsetX;
-      this.y = e.offsetY;
-      this.last = [this.x, this.y];
-    }
-  }, {
-    key: "gatherImage",
-    value: function gatherImage() {
-      // 采集图像
-      this.imgData = this.imgData.slice(0, this.index + 1); // 每次鼠标抬起时，将储存的imgdata截取至index处
-
-      var imgData = this.ctx.getImageData(0, 0, this.width, this.height);
-      this.imgData.push(imgData);
-      this.index = this.imgData.length - 1; // 储存完后将 index 重置为 imgData 最后一位
-
-      this.allowCallback(this.index > 0, this.index < this.imgData.length - 1);
-    }
-  }, {
-    key: "reSetImage",
-    value: function reSetImage() {
-      // 重置为上一帧
-      this.ctx.clearRect(0, 0, this.width, this.height);
-
-      if (this.imgData.length >= 1) {
-        this.ctx.putImageData(this.imgData[this.index], 0, 0);
-      }
-    } // 鼠标移动
-
-  }, {
-    key: "onmousemove",
-    value: function onmousemove(e) {
-      if (this.isTouch) {
-        e.preventDefault();
-
-        var _this$getPoint2 = this.getPoint(e),
-            x = _this$getPoint2.x,
-            y = _this$getPoint2.y;
-
-        e.offsetX = x;
-        e.offsetY = y;
-      }
-
-      this.isMoveCanvas = true;
-      var endx = e.offsetX;
-      var endy = e.offsetY;
-      var width = endx - this.x;
-      var height = endy - this.y;
-      var now = [endx, endy]; // 当前移动到的位置
-
-      switch (this.drawType) {
-        case 'pen':
-          {
-            var params = [this.last, now, this.lineWidth, this.drawColor, true];
-            this.moveCallback.apply(this, ['pen'].concat(params));
-            this.line.apply(this, params);
-          }
-          break;
-
-        case 'eraser':
-          {
-            var _params = [endx, endy, this.lineWidth];
-            this.moveCallback.apply(this, ['eraser'].concat(_params));
-            this.eraser.apply(this, _params);
-          }
-          break;
-      }
-    } // 鼠标抬起
-
-  }, {
-    key: "onmouseup",
-    value: function onmouseup(e) {
-      e.preventDefault();
-
-      if (this.isClickCanvas) {
-        this.isClickCanvas = false;
-
-        if (this.isTouch) {
-          this.canvas.removeEventListener('touchmove', this.bindMousemove);
-        } else {
-          this.canvas.removeEventListener('mousemove', this.bindMousemove);
-        }
-
-        if (this.isMoveCanvas) {
-          // 鼠标没有移动不保存
-          this.isMoveCanvas = false;
-          this.gatherImage();
-          this.moveCallback('gatherImage', this.index);
-        }
-      }
-    } // 绘制线性（直线和铅笔）
-
-  }, {
-    key: "line",
-    value: function line(last, now, lineWidth, drawColor, isPencil) {
-      if (!isPencil) {
-        this.reSetImage();
-      }
-
-      this.ctx.beginPath();
-      this.ctx.lineCap = 'round'; // 设定线条与线条间接合处的样式
-
-      this.ctx.lineJoin = 'round';
-      this.ctx.lineWidth = lineWidth;
-      this.ctx.strokeStyle = drawColor;
-      this.ctx.moveTo(last[0], last[1]);
-      this.ctx.lineTo(now[0], now[1]);
-      this.ctx.closePath();
-      this.ctx.stroke(); // 进行绘制
-
-      if (isPencil) {
-        // 铅笔需要保存最后一次记录
-        this.last = now;
-      }
-    } // 橡皮擦
-
-  }, {
-    key: "eraser",
-    value: function eraser(endx, endy, lineWidth) {
-      this.ctx.save();
-      this.line(this.last, [endx, endy], lineWidth * 2, '#fff', true);
-    } // 撤回
-
-  }, {
-    key: "undo",
-    value: function undo() {
-      if (--this.index < 0) {
-        this.index = 0;
-        return;
-      }
-
-      this.allowCallback(this.index > 0, this.index < this.imgData.length - 1);
-      this.ctx.putImageData(this.imgData[this.index], 0, 0);
-    } // 前进
-
-  }, {
-    key: "redo",
-    value: function redo() {
-      if (++this.index > this.imgData.length - 1) {
-        this.index = this.imgData.length - 1;
-        return;
-      }
-
-      this.allowCallback(this.index > 0, this.index < this.imgData.length - 1);
-      this.ctx.putImageData(this.imgData[this.index], 0, 0);
-    } // 清屏
-
-  }, {
-    key: "clear",
-    value: function clear() {
-      this.imgData = [];
-      this.ctx.clearRect(0, 0, this.width, this.height);
-      this.gatherImage();
-    } // 设置画板参数
-
-  }, {
-    key: "changeWay",
-    value: function changeWay(_ref2) {
-      var type = _ref2.type,
-          color = _ref2.color,
-          lineWidth = _ref2.lineWidth,
-          sides = _ref2.sides;
-
-      if (type === 'eraser') {
-        this.ctx.globalCompositeOperation = 'destination-out'; // 擦除
-      } else {
-        this.ctx.globalCompositeOperation = 'source-over'; // 画
-      } // 绘制条件
-
-
-      this.drawType = type !== 'color' && type || this.drawType; // 绘制形状
-
-      this.drawColor = color || this.drawColor; // 绘制颜色
-
-      this.lineWidth = lineWidth || this.lineWidth; // 线宽
-
-      this.sides = sides || this.sides; // 边数
-    } // 销毁画板
-
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.clear();
-      this.canvas.removeEventListener('mousedown', this.bindMousedown);
-      this.canvas.removeEventListener('mouseup', this.bindMouseup);
-      this.canvas = null;
-      this.ctx = null;
-    } // 保留笔画
-
-  }, {
-    key: "retain",
-    value: function retain() {
-      var base64 = this.canvas.toDataURL();
-      var img = document.createElement('img');
-      img.style.position = 'fixed';
-      img.style.width = '90vw';
-      img.style.height = '95vh';
-      img.style.top = '9vh';
-      img.style.left = '5vw';
-      img.src = base64;
-      document.body.appendChild(img);
-    }
-  }]);
-
-  return BoardOperate;
-}();
-
-export { BoardOperate };
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * canvas 画板
+ */
+var BoardOperate = /*#__PURE__*/function () {
+  function BoardOperate(canvas, _ref) {
+    var _ref$drawType = _ref.drawType,
+        drawType = _ref$drawType === void 0 ? 'pen' : _ref$drawType,
+        _ref$drawColor = _ref.drawColor,
+        drawColor = _ref$drawColor === void 0 ? 'rgba(19, 206, 102, 1)' : _ref$drawColor,
+        _ref$lineWidth = _ref.lineWidth,
+        lineWidth = _ref$lineWidth === void 0 ? 5 : _ref$lineWidth,
+        _ref$sides = _ref.sides,
+        sides = _ref$sides === void 0 ? 3 : _ref$sides,
+        _ref$fillStyle = _ref.fillStyle,
+        fillStyle = _ref$fillStyle === void 0 ? null : _ref$fillStyle,
+        allowCallback = _ref.allowCallback,
+        moveCallback = _ref.moveCallback;
+
+    _classCallCheck(this, BoardOperate);
+
+    this.canvas = canvas; // 画板DOM
+
+    this.width = canvas.width; // 宽
+
+    this.height = canvas.height; // 高
+
+    this.ratio = canvas.width > canvas.clientWidth ? canvas.width / canvas.clientWidth : 1; // 比例(width和clientWidth不一致可调整比例)
+
+    this.ctx = canvas.getContext('2d');
+    this.isClickCanvas = false; // 是否点击canvas内部
+
+    this.isMoveCanvas = false; // 鼠标是否有移动
+
+    this.imgData = []; // 存储上一次的图像，用于撤回
+
+    this.index = 0; // 记录当前显示的是第几帧
+
+    this.x = 0; // 鼠标按下时的 x 坐标
+
+    this.y = 0; // 鼠标按下时的 y 坐标
+
+    this.last = [this.x, this.y]; // 鼠标按下及每次移动后的坐标
+
+    this.drawType = drawType; // 绘制形状
+
+    this.drawColor = drawColor; // 绘制颜色
+
+    this.lineWidth = lineWidth; // 线条宽度
+
+    this.sides = sides; // 多边形边数
+
+    this.fillStyle = fillStyle; // 初始填充颜色
+
+    this.allowCallback = allowCallback || function () {}; // 允许操作的回调
+
+
+    this.moveCallback = moveCallback || function () {}; // 鼠标移动的回调
+
+
+    this.bindMousemove = function () {}; // 解决 eventlistener 不能bind
+
+
+    this.bindMousedown = function () {}; // 解决 eventlistener 不能bind
+
+
+    this.bindMouseup = function () {}; // 解决 eventlistener 不能bind
+
+
+    this.init();
+  }
+
+  _createClass(BoardOperate, [{
+    key: "init",
+    value: function init() {
+      if (this.fillStyle) {
+        this.ctx.fillStyle = 'transparent';
+        this.ctx.fillRect(0, 0, this.width, this.height);
+      }
+
+      this.gatherImage();
+      this.bindMousemove = this.onmousemove.bind(this); // 解决 eventlistener 不能bind
+
+      this.bindMousedown = this.onmousedown.bind(this);
+      this.bindMouseup = this.onmouseup.bind(this);
+      var eventNameDown = 'mousedown',
+          eventNameUp = 'mouseup';
+
+      if ('ontouchstart' in this.canvas) {
+        // 移动端适配
+        this.isTouch = true;
+        eventNameDown = 'touchstart';
+        eventNameUp = 'touchend';
+      } else {
+        // PC 端鼠标事件
+        this.isTouch = false;
+      }
+
+      this.canvas.addEventListener(eventNameDown, this.bindMousedown);
+      this.canvas.addEventListener(eventNameUp, this.bindMouseup);
+    } // 获取当前位置
+
+  }, {
+    key: "getPoint",
+    value: function getPoint(e) {
+      // const { pageX, pageY, target } = e.changedTouches[0];
+      var _e$changedTouches$ = e.changedTouches[0],
+          clientX = _e$changedTouches$.clientX,
+          clientY = _e$changedTouches$.clientY,
+          target = _e$changedTouches$.target;
+
+      var _target$getBoundingCl = target.getBoundingClientRect(),
+          top = _target$getBoundingCl.top,
+          left = _target$getBoundingCl.left; // 获取当前节点到视口顶部和左边的距离
+
+
+      var x = (clientX - left) * this.ratio;
+      var y = (clientY - top) * this.ratio;
+      return {
+        x: x,
+        y: y
+      };
+    } // 鼠标按下
+
+  }, {
+    key: "onmousedown",
+    value: function onmousedown(e) {
+      e.preventDefault();
+      var eventName = 'mousemove';
+
+      if (this.isTouch) {
+        var _this$getPoint = this.getPoint(e),
+            x = _this$getPoint.x,
+            y = _this$getPoint.y;
+
+        e.offsetX = x;
+        e.offsetY = y;
+        eventName = 'touchmove';
+      }
+
+      this.canvas.addEventListener(eventName, this.bindMousemove);
+      this.isClickCanvas = true;
+      this.x = e.offsetX;
+      this.y = e.offsetY;
+      this.last = [this.x, this.y];
+    }
+  }, {
+    key: "gatherImage",
+    value: function gatherImage() {
+      // 采集图像
+      this.imgData = this.imgData.slice(0, this.index + 1); // 每次鼠标抬起时，将储存的imgdata截取至index处
+
+      var imgData = this.ctx.getImageData(0, 0, this.width, this.height);
+      this.imgData.push(imgData);
+      this.index = this.imgData.length - 1; // 储存完后将 index 重置为 imgData 最后一位
+
+      this.allowCallback(this.index > 0, this.index < this.imgData.length - 1);
+    }
+  }, {
+    key: "reSetImage",
+    value: function reSetImage() {
+      // 重置为上一帧
+      this.ctx.clearRect(0, 0, this.width, this.height);
+
+      if (this.imgData.length >= 1) {
+        this.ctx.putImageData(this.imgData[this.index], 0, 0);
+      }
+    } // 鼠标移动
+
+  }, {
+    key: "onmousemove",
+    value: function onmousemove(e) {
+      if (this.isTouch) {
+        e.preventDefault();
+
+        var _this$getPoint2 = this.getPoint(e),
+            x = _this$getPoint2.x,
+            y = _this$getPoint2.y;
+
+        e.offsetX = x;
+        e.offsetY = y;
+      }
+
+      this.isMoveCanvas = true;
+      var endx = e.offsetX;
+      var endy = e.offsetY;
+      var width = endx - this.x;
+      var height = endy - this.y;
+      var now = [endx, endy]; // 当前移动到的位置
+
+      switch (this.drawType) {
+        case 'pen':
+          {
+            var params = [this.last, now, this.lineWidth, this.drawColor, true];
+            this.moveCallback.apply(this, ['pen'].concat(params));
+            this.line.apply(this, params);
+          }
+          break;
+
+        case 'eraser':
+          {
+            var _params = [endx, endy, this.lineWidth];
+            this.moveCallback.apply(this, ['eraser'].concat(_params));
+            this.eraser.apply(this, _params);
+          }
+          break;
+      }
+    } // 鼠标抬起
+
+  }, {
+    key: "onmouseup",
+    value: function onmouseup(e) {
+      e.preventDefault();
+
+      if (this.isClickCanvas) {
+        this.isClickCanvas = false;
+
+        if (this.isTouch) {
+          this.canvas.removeEventListener('touchmove', this.bindMousemove);
+        } else {
+          this.canvas.removeEventListener('mousemove', this.bindMousemove);
+        }
+
+        if (this.isMoveCanvas) {
+          // 鼠标没有移动不保存
+          this.isMoveCanvas = false;
+          this.gatherImage();
+          this.moveCallback('gatherImage', this.index);
+        }
+      }
+    } // 绘制线性（直线和铅笔）
+
+  }, {
+    key: "line",
+    value: function line(last, now, lineWidth, drawColor, isPencil) {
+      if (!isPencil) {
+        this.reSetImage();
+      }
+
+      this.ctx.beginPath();
+      this.ctx.lineCap = 'round'; // 设定线条与线条间接合处的样式
+
+      this.ctx.lineJoin = 'round';
+      this.ctx.lineWidth = lineWidth;
+      this.ctx.strokeStyle = drawColor;
+      this.ctx.moveTo(last[0], last[1]);
+      this.ctx.lineTo(now[0], now[1]);
+      this.ctx.closePath();
+      this.ctx.stroke(); // 进行绘制
+
+      if (isPencil) {
+        // 铅笔需要保存最后一次记录
+        this.last = now;
+      }
+    } // 橡皮擦
+
+  }, {
+    key: "eraser",
+    value: function eraser(endx, endy, lineWidth) {
+      this.ctx.save();
+      this.line(this.last, [endx, endy], lineWidth * 2, '#fff', true);
+    } // 撤回
+
+  }, {
+    key: "undo",
+    value: function undo() {
+      if (--this.index < 0) {
+        this.index = 0;
+        return;
+      }
+
+      this.allowCallback(this.index > 0, this.index < this.imgData.length - 1);
+      this.ctx.putImageData(this.imgData[this.index], 0, 0);
+    } // 前进
+
+  }, {
+    key: "redo",
+    value: function redo() {
+      if (++this.index > this.imgData.length - 1) {
+        this.index = this.imgData.length - 1;
+        return;
+      }
+
+      this.allowCallback(this.index > 0, this.index < this.imgData.length - 1);
+      this.ctx.putImageData(this.imgData[this.index], 0, 0);
+    } // 清屏
+
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.imgData = [];
+      this.ctx.clearRect(0, 0, this.width, this.height);
+      this.gatherImage();
+    } // 设置画板参数
+
+  }, {
+    key: "changeWay",
+    value: function changeWay(_ref2) {
+      var type = _ref2.type,
+          color = _ref2.color,
+          lineWidth = _ref2.lineWidth,
+          sides = _ref2.sides;
+
+      if (type === 'eraser') {
+        this.ctx.globalCompositeOperation = 'destination-out'; // 擦除
+      } else {
+        this.ctx.globalCompositeOperation = 'source-over'; // 画
+      } // 绘制条件
+
+
+      this.drawType = type !== 'color' && type || this.drawType; // 绘制形状
+
+      this.drawColor = color || this.drawColor; // 绘制颜色
+
+      this.lineWidth = lineWidth || this.lineWidth; // 线宽
+
+      this.sides = sides || this.sides; // 边数
+    } // 销毁画板
+
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.clear();
+      this.canvas.removeEventListener('mousedown', this.bindMousedown);
+      this.canvas.removeEventListener('mouseup', this.bindMouseup);
+      this.canvas = null;
+      this.ctx = null;
+    } // 保留笔画
+
+  }, {
+    key: "retain",
+    value: function retain() {
+      var base64 = this.canvas.toDataURL();
+      var img = document.createElement('img');
+      img.style.position = 'fixed';
+      img.style.width = '90vw';
+      img.style.height = '95vh';
+      img.style.top = '9vh';
+      img.style.left = '5vw';
+      img.src = base64;
+      document.body.appendChild(img);
+    }
+  }]);
+
+  return BoardOperate;
+}();
+
+export { BoardOperate };