@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.130

package/es/common/signature-pad/signature-pad.mjs

@@ -0,0 +1,165 @@
+import { defineComponent, createVNode, ref, nextTick, onMounted, onUnmounted } from 'vue';
+import { isString } from 'lodash-es';
+import '../../use/index.mjs';
+import SignaturePad from './util/signature_pad.mjs';
+import './signature-pad.css';
+import { useNamespace } from '../../use/namespace/namespace.mjs';
+
+"use strict";
+const IBizSignaturePad = /* @__PURE__ */ defineComponent({
+  name: "IBizSignaturePad",
+  props: {
+    options: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("signature-pad");
+    const signaturePadRef = ref();
+    const canvasRef = ref();
+    const signaturePad = 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 (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) => {
+      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 SignaturePad(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();
+      }
+    };
+    onMounted(() => {
+      initSignaturePad();
+      window.addEventListener("resize", handleResize);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", handleResize);
+    });
+    return {
+      ns,
+      canvasRef,
+      signaturePadRef,
+      signaturePad,
+      updateSignaturePad
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b(),
+      "ref": "signaturePadRef"
+    }, [createVNode("div", {
+      "class": this.ns.e("container")
+    }, [createVNode("canvas", {
+      "ref": "canvasRef"
+    }, null)])]);
+  }
+});
+
+export { IBizSignaturePad };

package/es/common/signature-pad/util/bezier.d.ts

@@ -0,0 +1,58 @@
+import { IBasicPoint, Point } from './point';
+/**
+ * @description 用于创建和计算三次贝塞尔曲线，支持从点数组生成曲线实例
+ * @export
+ * @class Bezier
+ */
+export declare class Bezier {
+    startPoint: Point;
+    control2: IBasicPoint;
+    control1: IBasicPoint;
+    endPoint: Point;
+    startWidth: number;
+    endWidth: number;
+    /**
+     * 从点数组创建贝塞尔曲线
+     * @param points 点数组，至少需要4个点来计算曲线
+     * @param widths 包含起点和终点宽度的对象
+     * @returns 新创建的贝塞尔曲线实例
+     */
+    static fromPoints(points: Point[], widths: {
+        start: number;
+        end: number;
+    }): Bezier;
+    /**
+     * 计算贝塞尔曲线的控制点
+     * @param s1 第一个点
+     * @param s2 第二个点（中间点）
+     * @param s3 第三个点
+     * @returns 包含两个控制点的对象
+     */
+    private static calculateControlPoints;
+    /**
+     * 贝塞尔曲线构造函数
+     * @param startPoint 起始点
+     * @param control2 第二个控制点
+     * @param control1 第一个控制点
+     * @param endPoint 结束点
+     * @param startWidth 起始点宽度
+     * @param endWidth 结束点宽度
+     */
+    constructor(startPoint: Point, control2: IBasicPoint, control1: IBasicPoint, endPoint: Point, startWidth: number, endWidth: number);
+    /**
+     * 计算贝塞尔曲线的近似长度
+     * @returns 曲线的近似长度
+     */
+    length(): number;
+    /**
+     * 计算三次贝塞尔曲线在参数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 计算得到的坐标值
+     */
+    private point;
+}
+//# sourceMappingURL=bezier.d.ts.map

package/es/common/signature-pad/util/bezier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bezier.d.ts","sourceRoot":"","sources":["../../../../src/common/signature-pad/util/bezier.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,qBAAa,MAAM;IA6ER,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAjFzB;;;;;OAKG;WACW,UAAU,CACtB,MAAM,EAAE,KAAK,EAAE,EACf,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GACrC,MAAM;IAST;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,sBAAsB;IAyCrC;;;;;;;;OAQG;gBAEM,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM;IAGzB;;;OAGG;IACI,MAAM,IAAI,MAAM;IA0CvB;;;;;;;;OAQG;IACH,OAAO,CAAC,KAAK;CAcd"}

package/es/common/signature-pad/util/bezier.mjs

@@ -0,0 +1,109 @@
+import { Point } from './point.mjs';
+
+"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(m1.x + tx, m1.y + ty),
+      c2: new 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;
+  }
+}
+
+export { Bezier };

package/es/common/signature-pad/util/point.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @description 基础点接口，定义了点的基本属性
+ * @export
+ * @interface IBasicPoint
+ */
+export interface IBasicPoint {
+    /** X坐标 */
+    x: number;
+    /** Y坐标 */
+    y: number;
+    /** 压力值（例如绘画时的笔触压力） */
+    pressure: number;
+    /** 时间戳（记录点创建的时间） */
+    time: number;
+}
+/**
+ * @description 点类，实现了BasicPoint接口，提供了点的常用操作方法
+ * @export
+ * @class Point
+ * @implements {IBasicPoint}
+ */
+export declare class Point implements IBasicPoint {
+    x: number;
+    y: number;
+    pressure: number;
+    time: number;
+    /**
+     * 构造函数，创建一个Point实例
+     * @param x X坐标
+     * @param y Y坐标
+     * @param pressure 压力值，可选，默认为0
+     * @param time 时间戳，可选，默认为当前时间
+     * @throws 如果x或y是NaN，抛出错误
+     */
+    constructor(x: number, y: number, pressure?: number, time?: number);
+    /**
+     * 计算当前点到另一个点的直线距离
+     * @param start 起始点（另一个点）
+     * @returns 两点之间的距离
+     */
+    distanceTo(start: IBasicPoint): number;
+    /**
+     * 判断当前点是否与另一个点相等
+     * @param other 要比较的另一个点
+     * @returns 如果所有属性都相等则返回true，否则返回false
+     */
+    equals(other: IBasicPoint): boolean;
+    /**
+     * 计算从起始点到当前点的移动速度
+     * @param start 起始点
+     * @returns 速度值（距离/时间），如果时间相同则返回0
+     */
+    velocityFrom(start: IBasicPoint): number;
+}
+//# sourceMappingURL=point.d.ts.map

package/es/common/signature-pad/util/point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/common/signature-pad/util/point.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,UAAU;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU;IACV,CAAC,EAAE,MAAM,CAAC;IACV,sBAAsB;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;GAKG;AACH,qBAAa,KAAM,YAAW,WAAW;IAEhC,CAAC,EAAE,MAAM,CAAC;IAGV,CAAC,EAAE,MAAM,CAAC;IAGV,QAAQ,EAAE,MAAM,CAAC;IAGjB,IAAI,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;gBACS,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IAiBlE;;;;OAIG;IACI,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;IAK7C;;;;OAIG;IACI,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAS1C;;;;OAIG;IACI,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;CAMhD"}

package/es/common/signature-pad/util/point.mjs

@@ -0,0 +1,51 @@
+"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;
+  }
+}
+
+export { Point };