@coopenomics/sdk 2.2.3 → 2.2.4

package/dist/index.cjs

@@ -61,80 +61,105 @@ var __publicField$1 = (obj, key, value) => {
   return value;
 };
 class Canvas {
-  /**
-   * Создаёт элемент `<canvas>` внутри указанного контейнера.
-   * @param container - HTML-элемент, внутри которого создаётся canvas.
-   * @param width - Ширина canvas (по умолчанию 300).
-   * @param height - Высота canvas (по умолчанию 150).
-   */
-  constructor(container, width = 300, height = 150) {
+  constructor(container, opts = {}) {
+    this.container = container;
+    this.opts = opts;
     __publicField$1(this, "canvas");
     __publicField$1(this, "ctx");
-    __publicField$1(this, "state", {
-      drawing: false,
-      lastX: 0,
-      lastY: 0
+    __publicField$1(this, "drawing", false);
+    __publicField$1(this, "lastX", 0);
+    __publicField$1(this, "lastY", 0);
+    __publicField$1(this, "onMouseDown", (e) => {
+      e.preventDefault();
+      this.drawing = true;
+      const rect = this.canvas.getBoundingClientRect();
+      this.lastX = e.clientX - rect.left;
+      this.lastY = e.clientY - rect.top;
+    });
+    __publicField$1(this, "onMouseMove", (e) => {
+      if (!this.drawing)
+        return;
+      e.preventDefault();
+      this.drawLine(e.clientX, e.clientY);
+    });
+    __publicField$1(this, "onMouseUp", () => {
+      this.drawing = false;
+    });
+    __publicField$1(this, "onTouchStart", (e) => {
+      e.preventDefault();
+      this.drawing = true;
+      const rect = this.canvas.getBoundingClientRect();
+      this.lastX = e.touches[0].clientX - rect.left;
+      this.lastY = e.touches[0].clientY - rect.top;
+    });
+    __publicField$1(this, "onTouchMove", (e) => {
+      if (!this.drawing)
+        return;
+      e.preventDefault();
+      const t = e.touches[0];
+      this.drawLine(t.clientX, t.clientY);
+    });
+    __publicField$1(this, "onTouchEnd", () => {
+      this.drawing = false;
     });
     this.canvas = document.createElement("canvas");
-    this.canvas.width = width;
-    this.canvas.height = height;
+    this.canvas.width = container.offsetWidth;
+    this.canvas.height = container.offsetHeight;
+    this.canvas.style.touchAction = "none";
     container.appendChild(this.canvas);
-    this.ctx = this.canvas.getContext("2d");
-    this.ctx.lineWidth = 5;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Canvas not supported");
+    }
+    this.ctx = ctx;
+    this.ctx.lineWidth = this.opts.lineWidth ?? 5;
     this.ctx.lineJoin = "round";
     this.ctx.lineCap = "round";
-    this.ctx.strokeStyle = "#000";
+    this.ctx.strokeStyle = this.opts.strokeStyle ?? "#000";
+    this.initEvents();
   }
   /**
-   * Полностью очищает canvas.
+   * Очистка холста.
    */
   clearCanvas() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
   /**
-   * Запускает процесс рисования (фиксирует начальные координаты).
-   * @param e - Событие мыши или касания.
+   * Получение подписи в формате base64.
    */
-  startDrawing(e) {
-    e.preventDefault();
-    this.state.drawing = true;
-    const rect = this.canvas.getBoundingClientRect();
-    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
-    this.state.lastX = clientX - rect.left;
-    this.state.lastY = clientY - rect.top;
+  getSignature() {
+    return this.canvas.toDataURL("image/png");
   }
   /**
-   * Выполняет рисование линии от предыдущей точки к текущей.
-   * @param e - Событие мыши или касания.
+   * Снятие всех слушателей.
    */
-  draw(e) {
-    if (!this.state.drawing)
-      return;
-    e.preventDefault();
+  destroy() {
+    this.canvas.removeEventListener("mousedown", this.onMouseDown);
+    this.canvas.removeEventListener("mousemove", this.onMouseMove);
+    this.canvas.removeEventListener("mouseup", this.onMouseUp);
+    this.canvas.removeEventListener("touchstart", this.onTouchStart);
+    this.canvas.removeEventListener("touchmove", this.onTouchMove);
+    this.canvas.removeEventListener("touchend", this.onTouchEnd);
+  }
+  // Внутренние методы
+  initEvents() {
+    this.canvas.addEventListener("mousedown", this.onMouseDown);
+    this.canvas.addEventListener("mousemove", this.onMouseMove);
+    this.canvas.addEventListener("mouseup", this.onMouseUp);
+    this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: false });
+    this.canvas.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    this.canvas.addEventListener("touchend", this.onTouchEnd, { passive: false });
+  }
+  drawLine(clientX, clientY) {
     this.ctx.beginPath();
-    this.ctx.moveTo(this.state.lastX, this.state.lastY);
+    this.ctx.moveTo(this.lastX, this.lastY);
     const rect = this.canvas.getBoundingClientRect();
-    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
     const x = clientX - rect.left;
     const y = clientY - rect.top;
     this.ctx.lineTo(x, y);
     this.ctx.stroke();
-    this.state.lastX = x;
-    this.state.lastY = y;
-  }
-  /**
-   * Завершает процесс рисования (drawing = false).
-   */
-  endDrawing() {
-    this.state.drawing = false;
-  }
-  /**
-   * Возвращает текущее содержимое canvas в формате base64 (PNG).
-   */
-  getSignature() {
-    return this.canvas.toDataURL("image/png");
+    this.lastX = x;
+    this.lastY = y;
   }
 }
 

package/dist/index.d.cts

@@ -9117,71 +9117,38 @@ declare class Account {
     private static generateKeys;
 }
 
-/**
- * Класс `Canvas` инкапсулирует работу с HTML5 `<canvas>`:
- * - создание и инициализация canvas внутри переданного контейнера;
- * - очистка canvas;
- * - управление процессом рисования (начало, рисование, завершение);
- * - получение содержимого (подписи) в формате base64.
- *
- * @remarks
- * Все методы и состояние рисования (координаты, флаг `drawing`) хранятся внутри класса.
- *
- * @example
- * ```ts
- * const container = document.getElementById('canvas-container') as HTMLElement
- * const myCanvas = new Canvas(container, 500, 300)
- *
- * // События мыши
- * myCanvas.canvas.addEventListener('mousedown', (e) => myCanvas.startDrawing(e))
- * myCanvas.canvas.addEventListener('mousemove', (e) => myCanvas.draw(e))
- * myCanvas.canvas.addEventListener('mouseup', () => myCanvas.endDrawing())
- *
- * // Очистка холста
- * document.getElementById('clear-btn')?.addEventListener('click', () => {
- *   myCanvas.clearCanvas()
- * })
- *
- * // Получение подписи (base64)
- * document.getElementById('get-sign-btn')?.addEventListener('click', () => {
- *   const signature = myCanvas.getSignature()
- *   console.log('Подпись (base64):', signature)
- * })
- * ```
- */
 declare class Canvas {
+    private container;
+    private opts;
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
-    private state;
-    /**
-     * Создаёт элемент `<canvas>` внутри указанного контейнера.
-     * @param container - HTML-элемент, внутри которого создаётся canvas.
-     * @param width - Ширина canvas (по умолчанию 300).
-     * @param height - Высота canvas (по умолчанию 150).
-     */
-    constructor(container: HTMLElement, width?: number, height?: number);
+    private drawing;
+    private lastX;
+    private lastY;
+    constructor(container: HTMLElement, opts?: {
+        lineWidth?: number;
+        strokeStyle?: string;
+    });
     /**
-     * Полностью очищает canvas.
+     * Очистка холста.
      */
     clearCanvas(): void;
     /**
-     * Запускает процесс рисования (фиксирует начальные координаты).
-     * @param e - Событие мыши или касания.
-     */
-    startDrawing(e: MouseEvent | TouchEvent): void;
-    /**
-     * Выполняет рисование линии от предыдущей точки к текущей.
-     * @param e - Событие мыши или касания.
+     * Получение подписи в формате base64.
      */
-    draw(e: MouseEvent | TouchEvent): void;
-    /**
-     * Завершает процесс рисования (drawing = false).
-     */
-    endDrawing(): void;
+    getSignature(): string;
     /**
-     * Возвращает текущее содержимое canvas в формате base64 (PNG).
+     * Снятие всех слушателей.
      */
-    getSignature(): string;
+    destroy(): void;
+    private initEvents;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private drawLine;
 }
 
 /**

package/dist/index.d.mts

@@ -9117,71 +9117,38 @@ declare class Account {
     private static generateKeys;
 }
 
-/**
- * Класс `Canvas` инкапсулирует работу с HTML5 `<canvas>`:
- * - создание и инициализация canvas внутри переданного контейнера;
- * - очистка canvas;
- * - управление процессом рисования (начало, рисование, завершение);
- * - получение содержимого (подписи) в формате base64.
- *
- * @remarks
- * Все методы и состояние рисования (координаты, флаг `drawing`) хранятся внутри класса.
- *
- * @example
- * ```ts
- * const container = document.getElementById('canvas-container') as HTMLElement
- * const myCanvas = new Canvas(container, 500, 300)
- *
- * // События мыши
- * myCanvas.canvas.addEventListener('mousedown', (e) => myCanvas.startDrawing(e))
- * myCanvas.canvas.addEventListener('mousemove', (e) => myCanvas.draw(e))
- * myCanvas.canvas.addEventListener('mouseup', () => myCanvas.endDrawing())
- *
- * // Очистка холста
- * document.getElementById('clear-btn')?.addEventListener('click', () => {
- *   myCanvas.clearCanvas()
- * })
- *
- * // Получение подписи (base64)
- * document.getElementById('get-sign-btn')?.addEventListener('click', () => {
- *   const signature = myCanvas.getSignature()
- *   console.log('Подпись (base64):', signature)
- * })
- * ```
- */
 declare class Canvas {
+    private container;
+    private opts;
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
-    private state;
-    /**
-     * Создаёт элемент `<canvas>` внутри указанного контейнера.
-     * @param container - HTML-элемент, внутри которого создаётся canvas.
-     * @param width - Ширина canvas (по умолчанию 300).
-     * @param height - Высота canvas (по умолчанию 150).
-     */
-    constructor(container: HTMLElement, width?: number, height?: number);
+    private drawing;
+    private lastX;
+    private lastY;
+    constructor(container: HTMLElement, opts?: {
+        lineWidth?: number;
+        strokeStyle?: string;
+    });
     /**
-     * Полностью очищает canvas.
+     * Очистка холста.
      */
     clearCanvas(): void;
     /**
-     * Запускает процесс рисования (фиксирует начальные координаты).
-     * @param e - Событие мыши или касания.
-     */
-    startDrawing(e: MouseEvent | TouchEvent): void;
-    /**
-     * Выполняет рисование линии от предыдущей точки к текущей.
-     * @param e - Событие мыши или касания.
+     * Получение подписи в формате base64.
      */
-    draw(e: MouseEvent | TouchEvent): void;
-    /**
-     * Завершает процесс рисования (drawing = false).
-     */
-    endDrawing(): void;
+    getSignature(): string;
     /**
-     * Возвращает текущее содержимое canvas в формате base64 (PNG).
+     * Снятие всех слушателей.
      */
-    getSignature(): string;
+    destroy(): void;
+    private initEvents;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private drawLine;
 }
 
 /**

package/dist/index.d.ts

@@ -9117,71 +9117,38 @@ declare class Account {
     private static generateKeys;
 }
 
-/**
- * Класс `Canvas` инкапсулирует работу с HTML5 `<canvas>`:
- * - создание и инициализация canvas внутри переданного контейнера;
- * - очистка canvas;
- * - управление процессом рисования (начало, рисование, завершение);
- * - получение содержимого (подписи) в формате base64.
- *
- * @remarks
- * Все методы и состояние рисования (координаты, флаг `drawing`) хранятся внутри класса.
- *
- * @example
- * ```ts
- * const container = document.getElementById('canvas-container') as HTMLElement
- * const myCanvas = new Canvas(container, 500, 300)
- *
- * // События мыши
- * myCanvas.canvas.addEventListener('mousedown', (e) => myCanvas.startDrawing(e))
- * myCanvas.canvas.addEventListener('mousemove', (e) => myCanvas.draw(e))
- * myCanvas.canvas.addEventListener('mouseup', () => myCanvas.endDrawing())
- *
- * // Очистка холста
- * document.getElementById('clear-btn')?.addEventListener('click', () => {
- *   myCanvas.clearCanvas()
- * })
- *
- * // Получение подписи (base64)
- * document.getElementById('get-sign-btn')?.addEventListener('click', () => {
- *   const signature = myCanvas.getSignature()
- *   console.log('Подпись (base64):', signature)
- * })
- * ```
- */
 declare class Canvas {
+    private container;
+    private opts;
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
-    private state;
-    /**
-     * Создаёт элемент `<canvas>` внутри указанного контейнера.
-     * @param container - HTML-элемент, внутри которого создаётся canvas.
-     * @param width - Ширина canvas (по умолчанию 300).
-     * @param height - Высота canvas (по умолчанию 150).
-     */
-    constructor(container: HTMLElement, width?: number, height?: number);
+    private drawing;
+    private lastX;
+    private lastY;
+    constructor(container: HTMLElement, opts?: {
+        lineWidth?: number;
+        strokeStyle?: string;
+    });
     /**
-     * Полностью очищает canvas.
+     * Очистка холста.
      */
     clearCanvas(): void;
     /**
-     * Запускает процесс рисования (фиксирует начальные координаты).
-     * @param e - Событие мыши или касания.
-     */
-    startDrawing(e: MouseEvent | TouchEvent): void;
-    /**
-     * Выполняет рисование линии от предыдущей точки к текущей.
-     * @param e - Событие мыши или касания.
+     * Получение подписи в формате base64.
      */
-    draw(e: MouseEvent | TouchEvent): void;
-    /**
-     * Завершает процесс рисования (drawing = false).
-     */
-    endDrawing(): void;
+    getSignature(): string;
     /**
-     * Возвращает текущее содержимое canvas в формате base64 (PNG).
+     * Снятие всех слушателей.
      */
-    getSignature(): string;
+    destroy(): void;
+    private initEvents;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private drawLine;
 }
 
 /**

package/dist/index.mjs

@@ -55,80 +55,105 @@ var __publicField$1 = (obj, key, value) => {
   return value;
 };
 class Canvas {
-  /**
-   * Создаёт элемент `<canvas>` внутри указанного контейнера.
-   * @param container - HTML-элемент, внутри которого создаётся canvas.
-   * @param width - Ширина canvas (по умолчанию 300).
-   * @param height - Высота canvas (по умолчанию 150).
-   */
-  constructor(container, width = 300, height = 150) {
+  constructor(container, opts = {}) {
+    this.container = container;
+    this.opts = opts;
     __publicField$1(this, "canvas");
     __publicField$1(this, "ctx");
-    __publicField$1(this, "state", {
-      drawing: false,
-      lastX: 0,
-      lastY: 0
+    __publicField$1(this, "drawing", false);
+    __publicField$1(this, "lastX", 0);
+    __publicField$1(this, "lastY", 0);
+    __publicField$1(this, "onMouseDown", (e) => {
+      e.preventDefault();
+      this.drawing = true;
+      const rect = this.canvas.getBoundingClientRect();
+      this.lastX = e.clientX - rect.left;
+      this.lastY = e.clientY - rect.top;
+    });
+    __publicField$1(this, "onMouseMove", (e) => {
+      if (!this.drawing)
+        return;
+      e.preventDefault();
+      this.drawLine(e.clientX, e.clientY);
+    });
+    __publicField$1(this, "onMouseUp", () => {
+      this.drawing = false;
+    });
+    __publicField$1(this, "onTouchStart", (e) => {
+      e.preventDefault();
+      this.drawing = true;
+      const rect = this.canvas.getBoundingClientRect();
+      this.lastX = e.touches[0].clientX - rect.left;
+      this.lastY = e.touches[0].clientY - rect.top;
+    });
+    __publicField$1(this, "onTouchMove", (e) => {
+      if (!this.drawing)
+        return;
+      e.preventDefault();
+      const t = e.touches[0];
+      this.drawLine(t.clientX, t.clientY);
+    });
+    __publicField$1(this, "onTouchEnd", () => {
+      this.drawing = false;
     });
     this.canvas = document.createElement("canvas");
-    this.canvas.width = width;
-    this.canvas.height = height;
+    this.canvas.width = container.offsetWidth;
+    this.canvas.height = container.offsetHeight;
+    this.canvas.style.touchAction = "none";
     container.appendChild(this.canvas);
-    this.ctx = this.canvas.getContext("2d");
-    this.ctx.lineWidth = 5;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Canvas not supported");
+    }
+    this.ctx = ctx;
+    this.ctx.lineWidth = this.opts.lineWidth ?? 5;
     this.ctx.lineJoin = "round";
     this.ctx.lineCap = "round";
-    this.ctx.strokeStyle = "#000";
+    this.ctx.strokeStyle = this.opts.strokeStyle ?? "#000";
+    this.initEvents();
   }
   /**
-   * Полностью очищает canvas.
+   * Очистка холста.
    */
   clearCanvas() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
   /**
-   * Запускает процесс рисования (фиксирует начальные координаты).
-   * @param e - Событие мыши или касания.
+   * Получение подписи в формате base64.
    */
-  startDrawing(e) {
-    e.preventDefault();
-    this.state.drawing = true;
-    const rect = this.canvas.getBoundingClientRect();
-    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
-    this.state.lastX = clientX - rect.left;
-    this.state.lastY = clientY - rect.top;
+  getSignature() {
+    return this.canvas.toDataURL("image/png");
   }
   /**
-   * Выполняет рисование линии от предыдущей точки к текущей.
-   * @param e - Событие мыши или касания.
+   * Снятие всех слушателей.
    */
-  draw(e) {
-    if (!this.state.drawing)
-      return;
-    e.preventDefault();
+  destroy() {
+    this.canvas.removeEventListener("mousedown", this.onMouseDown);
+    this.canvas.removeEventListener("mousemove", this.onMouseMove);
+    this.canvas.removeEventListener("mouseup", this.onMouseUp);
+    this.canvas.removeEventListener("touchstart", this.onTouchStart);
+    this.canvas.removeEventListener("touchmove", this.onTouchMove);
+    this.canvas.removeEventListener("touchend", this.onTouchEnd);
+  }
+  // Внутренние методы
+  initEvents() {
+    this.canvas.addEventListener("mousedown", this.onMouseDown);
+    this.canvas.addEventListener("mousemove", this.onMouseMove);
+    this.canvas.addEventListener("mouseup", this.onMouseUp);
+    this.canvas.addEventListener("touchstart", this.onTouchStart, { passive: false });
+    this.canvas.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    this.canvas.addEventListener("touchend", this.onTouchEnd, { passive: false });
+  }
+  drawLine(clientX, clientY) {
     this.ctx.beginPath();
-    this.ctx.moveTo(this.state.lastX, this.state.lastY);
+    this.ctx.moveTo(this.lastX, this.lastY);
     const rect = this.canvas.getBoundingClientRect();
-    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
     const x = clientX - rect.left;
     const y = clientY - rect.top;
     this.ctx.lineTo(x, y);
     this.ctx.stroke();
-    this.state.lastX = x;
-    this.state.lastY = y;
-  }
-  /**
-   * Завершает процесс рисования (drawing = false).
-   */
-  endDrawing() {
-    this.state.drawing = false;
-  }
-  /**
-   * Возвращает текущее содержимое canvas в формате base64 (PNG).
-   */
-  getSignature() {
-    return this.canvas.toDataURL("image/png");
+    this.lastX = x;
+    this.lastY = y;
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopenomics/sdk",
   "type": "module",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "private": false,
   "packageManager": "pnpm@9.9.0",
   "description": "",
@@ -74,5 +74,5 @@
     "vite": "^5.4.3",
     "vitest": "^2.0.5"
   },
-  "gitHead": "40fb5c80eb4136e82813fd553703f4a7926166a0"
+  "gitHead": "cbfe37dbba00574ec4f1ca354ecf5a4438d72bc1"
 }