@ibiz-template/vue3-util 0.7.41-alpha.2 → 0.7.41-alpha.20

package/lib/common/signature-pad/signature-pad.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+var vue = require('vue');
+var lodashEs = require('lodash-es');
+require('../../use/index.cjs');
+var signature_pad = require('./util/signature_pad.cjs');
+require('./signature-pad.css');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+const IBizSignaturePad = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSignaturePad",
+  props: {
+    options: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const ns = namespace.useNamespace("signature-pad");
+    const signaturePadRef = vue.ref();
+    const canvasRef = vue.ref();
+    const signaturePad = vue.ref();
+    const getSignatureOptions = () => {
+      const _options = {};
+      if (props.options) {
+        const {
+          dotsize,
+          minwidth,
+          maxwidth,
+          pencolor,
+          velocityfilterweight,
+          compositeoperation,
+          mindistance,
+          backgroundcolor,
+          throttle,
+          canvascontextoptions
+        } = props.options;
+        if (dotsize) {
+          Object.assign(_options, {
+            dotSize: Number(dotsize)
+          });
+        }
+        if (minwidth) {
+          Object.assign(_options, {
+            minWidth: Number(minwidth)
+          });
+        }
+        if (maxwidth) {
+          Object.assign(_options, {
+            maxWidth: Number(maxwidth)
+          });
+        }
+        if (velocityfilterweight) {
+          Object.assign(_options, {
+            velocityFilterWeight: Number(velocityfilterweight)
+          });
+        }
+        if (mindistance) {
+          Object.assign(_options, {
+            minDistance: Number(mindistance)
+          });
+        }
+        if (throttle) {
+          Object.assign(_options, {
+            throttle: Number(throttle)
+          });
+        }
+        if (pencolor) {
+          Object.assign(_options, {
+            penColor: String(pencolor)
+          });
+        }
+        if (compositeoperation) {
+          Object.assign(_options, {
+            compositeOperation: String(compositeoperation)
+          });
+        }
+        if (backgroundcolor) {
+          Object.assign(_options, {
+            backgroundColor: String(backgroundcolor)
+          });
+        }
+        if (canvascontextoptions) {
+          let canvasContextOptions = canvascontextoptions;
+          if (lodashEs.isString(canvascontextoptions)) {
+            try {
+              canvasContextOptions = JSON.parse(canvascontextoptions);
+            } catch (error) {
+              ibiz.log.error(error);
+              canvasContextOptions = void 0;
+            }
+          }
+          Object.assign(_options, {
+            canvasContextOptions: {
+              ...canvasContextOptions
+            }
+          });
+        }
+      }
+      return _options;
+    };
+    const preventScroll = (_e) => {
+      _e.preventDefault();
+    };
+    const initSignaturePad = (_callback) => {
+      vue.nextTick(() => {
+        const canvas = canvasRef.value;
+        const signatures = signaturePadRef.value;
+        if (!canvas)
+          return;
+        const dpr = window.devicePixelRatio || 1;
+        const rect = signatures.getBoundingClientRect();
+        const canvasWidth = rect.width < 300 ? 300 : rect.width;
+        const canvasHeight = rect.height < 150 ? 150 : rect.height;
+        canvas.width = canvasWidth * dpr;
+        canvas.height = canvasHeight * dpr;
+        canvas.style.width = "".concat(canvasWidth, "px");
+        canvas.style.height = "".concat(canvasHeight, "px");
+        signaturePad.value = new signature_pad.default(canvas, {
+          ...getSignatureOptions()
+        });
+        const ctx = canvas.getContext("2d");
+        ctx.scale(dpr, dpr);
+        canvas.addEventListener("touchstart", preventScroll, {
+          passive: false
+        });
+        canvas.addEventListener("touchmove", preventScroll, {
+          passive: false
+        });
+        _callback == null ? void 0 : _callback();
+      });
+    };
+    const updateSignaturePad = (_callback) => initSignaturePad(_callback);
+    const handleResize = () => {
+      if (signaturePad.value) {
+        signaturePad.value.off();
+        updateSignaturePad();
+      }
+    };
+    vue.onMounted(() => {
+      initSignaturePad();
+      window.addEventListener("resize", handleResize);
+    });
+    vue.onUnmounted(() => {
+      window.removeEventListener("resize", handleResize);
+    });
+    return {
+      ns,
+      canvasRef,
+      signaturePadRef,
+      signaturePad,
+      updateSignaturePad
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b(),
+      "ref": "signaturePadRef"
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("container")
+    }, [vue.createVNode("canvas", {
+      "ref": "canvasRef"
+    }, null)])]);
+  }
+});
+
+exports.IBizSignaturePad = IBizSignaturePad;

package/lib/common/signature-pad/signature-pad.css

@@ -0,0 +1 @@
+.ibiz-signature-pad{width:100%;height:100%}.ibiz-signature-pad__container{width:100%;height:100%;background-color:var(--ibiz-color-bg-1)}

package/lib/common/signature-pad/util/bezier.cjs

@@ -0,0 +1,111 @@
+'use strict';
+
+var point = require('./point.cjs');
+
+"use strict";
+class Bezier {
+  /**
+   * 贝塞尔曲线构造函数
+   * @param startPoint 起始点
+   * @param control2 第二个控制点
+   * @param control1 第一个控制点
+   * @param endPoint 结束点
+   * @param startWidth 起始点宽度
+   * @param endWidth 结束点宽度
+   */
+  constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
+    this.startPoint = startPoint;
+    this.control2 = control2;
+    this.control1 = control1;
+    this.endPoint = endPoint;
+    this.startWidth = startWidth;
+    this.endWidth = endWidth;
+  }
+  /**
+   * 从点数组创建贝塞尔曲线
+   * @param points 点数组，至少需要4个点来计算曲线
+   * @param widths 包含起点和终点宽度的对象
+   * @returns 新创建的贝塞尔曲线实例
+   */
+  static fromPoints(points, widths) {
+    const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+    const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+    return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+  }
+  /**
+   * 计算贝塞尔曲线的控制点
+   * @param s1 第一个点
+   * @param s2 第二个点（中间点）
+   * @param s3 第三个点
+   * @returns 包含两个控制点的对象
+   */
+  static calculateControlPoints(s1, s2, s3) {
+    const dx1 = s1.x - s2.x;
+    const dy1 = s1.y - s2.y;
+    const dx2 = s2.x - s3.x;
+    const dy2 = s2.y - s3.y;
+    const m1 = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 };
+    const m2 = { x: (s2.x + s3.x) / 2, y: (s2.y + s3.y) / 2 };
+    const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+    const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+    const dxm = m1.x - m2.x;
+    const dym = m1.y - m2.y;
+    const k = l1 + l2 === 0 ? 0 : l2 / (l1 + l2);
+    const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+    const tx = s2.x - cm.x;
+    const ty = s2.y - cm.y;
+    return {
+      c1: new point.Point(m1.x + tx, m1.y + ty),
+      c2: new point.Point(m2.x + tx, m2.y + ty)
+    };
+  }
+  /**
+   * 计算贝塞尔曲线的近似长度
+   * @returns 曲线的近似长度
+   */
+  length() {
+    const steps = 10;
+    let length = 0;
+    let px;
+    let py;
+    for (let i = 0; i <= steps; i += 1) {
+      const t = i / steps;
+      const cx = this.point(
+        t,
+        this.startPoint.x,
+        this.control1.x,
+        this.control2.x,
+        this.endPoint.x
+      );
+      const cy = this.point(
+        t,
+        this.startPoint.y,
+        this.control1.y,
+        this.control2.y,
+        this.endPoint.y
+      );
+      if (i > 0) {
+        const xdiff = cx - px;
+        const ydiff = cy - py;
+        length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+      }
+      px = cx;
+      py = cy;
+    }
+    return length;
+  }
+  /**
+   * 计算三次贝塞尔曲线在参数t处的x或y坐标值
+   * @param t 参数t，范围0到1
+   * @param start 起始点的坐标值（x或y）
+   * @param c1 第一个控制点的坐标值（x或y）
+   * @param c2 第二个控制点的坐标值（x或y）
+   * @param end 结束点的坐标值（x或y）
+   * @returns 计算得到的坐标值
+   */
+  point(t, start, c1, c2, end) {
+    return start * (1 - t) * (1 - t) * (1 - t) + 3 * c1 * (1 - t) * (1 - t) * t + 3 * c2 * (1 - t) * t * t + end * t * t * t;
+  }
+}
+
+exports.Bezier = Bezier;

package/lib/common/signature-pad/util/point.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+"use strict";
+class Point {
+  /**
+   * 构造函数，创建一个Point实例
+   * @param x X坐标
+   * @param y Y坐标
+   * @param pressure 压力值，可选，默认为0
+   * @param time 时间戳，可选，默认为当前时间
+   * @throws 如果x或y是NaN，抛出错误
+   */
+  constructor(x, y, pressure, time) {
+    if (Number.isNaN(x) || Number.isNaN(y)) {
+      throw new Error(
+        ibiz.i18n.t("vue3Util.common.invalidPointCoordinates", {
+          x,
+          y
+        })
+      );
+    }
+    this.x = +x;
+    this.y = +y;
+    this.pressure = pressure || 0;
+    this.time = time || Date.now();
+  }
+  /**
+   * 计算当前点到另一个点的直线距离
+   * @param start 起始点（另一个点）
+   * @returns 两点之间的距离
+   */
+  distanceTo(start) {
+    return Math.sqrt((this.x - start.x) ** 2 + (this.y - start.y) ** 2);
+  }
+  /**
+   * 判断当前点是否与另一个点相等
+   * @param other 要比较的另一个点
+   * @returns 如果所有属性都相等则返回true，否则返回false
+   */
+  equals(other) {
+    return this.x === other.x && this.y === other.y && this.pressure === other.pressure && this.time === other.time;
+  }
+  /**
+   * 计算从起始点到当前点的移动速度
+   * @param start 起始点
+   * @returns 速度值（距离/时间），如果时间相同则返回0
+   */
+  velocityFrom(start) {
+    return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 0;
+  }
+}
+
+exports.Point = Point;