@signosoft/signpad-js 0.4.5 → 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -6
- package/dist/index.d.ts +43 -28
- package/dist/signosoft-signpad.js +226 -194
- package/dist/signosoft-signpad.umd.cjs +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,13 +18,12 @@
|
|
|
18
18
|
`signosoft-signpad` is a powerful and flexible web component built with LitElement, designed for seamless digital signature capture integration into modern web applications. It provides a **unified interface** for working with various signature devices like **Wacom or Ugee**, supporting both stylus and mouse-based signing.
|
|
19
19
|
|
|
20
20
|
This component **works effortlessly** with any modern stack:
|
|
21
|
+
| **JavaScript** | **React** | **Angular** | **Vue** |
|
|
22
|
+
|:-:|:-:|:-:|:-:|
|
|
23
|
+
| <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JS" width="35" height="35"> | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" width="35" height="35"> | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" alt="Angular" width="35" height="35"> | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue" width="35" height="35"> ||
|
|
24
|
+
|
|
25
|
+
|
|
21
26
|
|
|
22
|
-
<p align="center">
|
|
23
|
-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JS" width="35" height="35">
|
|
24
|
-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" width="35" height="35">
|
|
25
|
-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" alt="Angular" width="35" height="35">
|
|
26
|
-
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue" width="35" height="35">
|
|
27
|
-
</p>
|
|
28
27
|
|
|
29
28
|
It expertly handles the complexities of **WebHID device connections**, signature session lifecycles, and high-fidelity stroke rendering.
|
|
30
29
|
<br/>
|
package/dist/index.d.ts
CHANGED
|
@@ -482,11 +482,12 @@ declare class LocalizationManager {
|
|
|
482
482
|
}
|
|
483
483
|
|
|
484
484
|
/**
|
|
485
|
-
* `
|
|
485
|
+
* `PointerManager` handles pointer interactions on a canvas element and converts them
|
|
486
486
|
* into standardized `IPenData`. This serves as a fallback mechanism for
|
|
487
487
|
* signature capture when a physical signature tablet is not available.
|
|
488
|
+
* Uses the Pointer Events API to support mouse, touch, and Apple Pencil uniformly.
|
|
488
489
|
*/
|
|
489
|
-
declare class
|
|
490
|
+
declare class PointerManager {
|
|
490
491
|
/** @private */
|
|
491
492
|
private canvas;
|
|
492
493
|
/** @private */
|
|
@@ -501,13 +502,14 @@ declare class MouseManager {
|
|
|
501
502
|
private debugListenerRegistrationCount;
|
|
502
503
|
/** @private */
|
|
503
504
|
private listenersAttached;
|
|
504
|
-
private
|
|
505
|
-
private
|
|
506
|
-
private
|
|
507
|
-
private
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
*
|
|
505
|
+
private boundHandlePointerDown;
|
|
506
|
+
private boundHandlePointerMove;
|
|
507
|
+
private boundHandlePointerUp;
|
|
508
|
+
private boundHandlePointerLeave;
|
|
509
|
+
private boundHandlePointerCancel;
|
|
510
|
+
/**
|
|
511
|
+
* Creates an instance of PointerManager.
|
|
512
|
+
* @param canvas - The HTMLCanvasElement to attach pointer listeners to.
|
|
511
513
|
* @param onPenDataCallback - The callback function that receives generated IPenData.
|
|
512
514
|
*/
|
|
513
515
|
constructor(canvas: HTMLCanvasElement, onPenDataCallback: IPenDataCallback);
|
|
@@ -516,15 +518,15 @@ declare class MouseManager {
|
|
|
516
518
|
*/
|
|
517
519
|
get isCurrentlyDrawing(): boolean;
|
|
518
520
|
/**
|
|
519
|
-
* Attaches
|
|
521
|
+
* Attaches pointer event listeners to the canvas to enable signature capture.
|
|
520
522
|
*/
|
|
521
523
|
addListeners(): void;
|
|
522
524
|
/**
|
|
523
|
-
* Removes
|
|
525
|
+
* Removes pointer event listeners from the canvas and stops active drawing.
|
|
524
526
|
*/
|
|
525
527
|
removeListeners(): void;
|
|
526
528
|
/**
|
|
527
|
-
* Returns true if
|
|
529
|
+
* Returns true if pointer listeners are currently attached.
|
|
528
530
|
*/
|
|
529
531
|
areListenersAttached(): boolean;
|
|
530
532
|
/**
|
|
@@ -532,34 +534,47 @@ declare class MouseManager {
|
|
|
532
534
|
*/
|
|
533
535
|
resetSession(): void;
|
|
534
536
|
/**
|
|
535
|
-
* Handles the '
|
|
537
|
+
* Handles the 'pointerdown' event: starts a stroke and initializes the session time.
|
|
538
|
+
* @private
|
|
539
|
+
*/
|
|
540
|
+
private handlePointerDown;
|
|
541
|
+
/**
|
|
542
|
+
* Handles the 'pointermove' event: continues the stroke if pointer is down.
|
|
543
|
+
* @private
|
|
544
|
+
*/
|
|
545
|
+
private handlePointerMove;
|
|
546
|
+
/**
|
|
547
|
+
* Handles the 'pointerup' event: ends the stroke.
|
|
536
548
|
* @private
|
|
537
549
|
*/
|
|
538
|
-
private
|
|
550
|
+
private handlePointerUp;
|
|
539
551
|
/**
|
|
540
|
-
* Handles the '
|
|
552
|
+
* Handles the 'pointerleave' event: ends the stroke if the pointer leaves the canvas area.
|
|
541
553
|
* @private
|
|
542
554
|
*/
|
|
543
|
-
private
|
|
555
|
+
private handlePointerLeave;
|
|
544
556
|
/**
|
|
545
|
-
* Handles the '
|
|
557
|
+
* Handles the 'pointercancel' event: terminates a stroke interrupted by the browser
|
|
558
|
+
* (e.g. iOS scroll taking over, incoming call, screen lock).
|
|
546
559
|
* @private
|
|
547
560
|
*/
|
|
548
|
-
private
|
|
561
|
+
private handlePointerCancel;
|
|
549
562
|
/**
|
|
550
|
-
*
|
|
563
|
+
* Core logic to transform a PointerEvent into IPenData.
|
|
564
|
+
* @param event - The raw browser PointerEvent.
|
|
565
|
+
* @param inContact - Whether the pointer is actively drawing on the surface.
|
|
551
566
|
* @private
|
|
552
567
|
*/
|
|
553
|
-
private
|
|
568
|
+
private processPointerEvent;
|
|
554
569
|
/**
|
|
555
|
-
*
|
|
556
|
-
*
|
|
557
|
-
*
|
|
570
|
+
* Returns the pressure value for a pointer event.
|
|
571
|
+
* Pen devices (Apple Pencil, stylus) report real pressure in the 0–1 range.
|
|
572
|
+
* Mouse and touch devices fall back to 0.5 (in contact) / 0 (not in contact).
|
|
558
573
|
* @private
|
|
559
574
|
*/
|
|
560
|
-
private
|
|
575
|
+
private getPressure;
|
|
561
576
|
/**
|
|
562
|
-
* Converts absolute
|
|
577
|
+
* Converts absolute pointer coordinates into a normalized 0-1 range relative to canvas size.
|
|
563
578
|
* @private
|
|
564
579
|
*/
|
|
565
580
|
private getNormalizedCoordinates;
|
|
@@ -599,7 +614,7 @@ export declare class SignosoftSignpad extends LitElement {
|
|
|
599
614
|
setHasStartedDrawing(value: boolean): void;
|
|
600
615
|
setDeviceStatusText(value: string): void;
|
|
601
616
|
canvasManager: CanvasManager | null;
|
|
602
|
-
|
|
617
|
+
pointerManager: PointerManager | null;
|
|
603
618
|
connectionManager: ConnectionManager;
|
|
604
619
|
stateManager: StateManager;
|
|
605
620
|
buttonManager: ButtonManager;
|
|
@@ -723,11 +738,11 @@ export declare class SignosoftSignpad extends LitElement {
|
|
|
723
738
|
*/
|
|
724
739
|
private initializeCanvasManager;
|
|
725
740
|
/**
|
|
726
|
-
* Initializes the
|
|
741
|
+
* Initializes the PointerManager for pointer/touch fallback.
|
|
727
742
|
* @private
|
|
728
743
|
* @returns void
|
|
729
744
|
*/
|
|
730
|
-
private
|
|
745
|
+
private initializePointerManager;
|
|
731
746
|
/**
|
|
732
747
|
* Throttles pen event dispatch to avoid excessive callback pressure.
|
|
733
748
|
* Drawing is still processed for every sample; only event emission is throttled.
|