endStroke event not firing in web component #778

fmg-pete · 2024-06-25T02:28:20Z

fmg-pete
Jun 25, 2024

Hi there, I've been using this library for a few years now, across numerous different projects... I love it!

This week I finally decided to roll it into a web component and while that is all working perfectly, I can never get the "endStroke" event to fire. The "beginStroke" event works as expected. I tried removing / re-binding them with .off() and .on(), but no joy.

Has anybody got it to work in a web component? Any tricks or tips? My next move is to pull apart the source of the React signature_pad, but i though I'd ask the question first. :)

UziTech · 2024-06-25T04:21:08Z

UziTech
Jun 25, 2024
Collaborator

Can you link to your code so we can help?

0 replies

fmg-pete · 2024-06-25T07:09:25Z

fmg-pete
Jun 25, 2024
Author

Hi, thanks for the quick reply. I finally got there using the "afterUpdateStroke" event, so maybe it's a case of me not quite understanding the meanings of those event names. This example works, and I can detect changes in the signature from the page the components are embedded in. If I change the handler to "endStroke" the event is never dispatched.

morf-signature.mjs:

import { MorfElement } from "./morf-element.mjs";

export class Signature extends MorfElement {
    static observedAttributes = ["options", "quality", "width", "height"];

    constructor() {
        super();     
        this.div = document.createElement('div');
        this.div.classList.add('morf-signature');
        this.canvas = document.createElement('canvas');
        this.clearButton = document.createElement('button');
        this.clearButton.innerText = "clear";  
        this.div.append(this.canvas);  
        this.div.append(this.clearButton);  
        this.timer = null;
    }


    _handleBeginStroke() {
        console.log('beginStroke');
    }

    _handleEndStroke () {   
        window.clearTimeout(this.timer);      
        this.timer = window.setTimeout(e => {        
            this.canvas.dispatchEvent(new CustomEvent('signatureUpdate', { 
                composed: true, 
                bubbles: true
            }));        
        }, 500);      
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if(name === "quality") {
            this.quality = newValue;          
        }

        if(name === "width") {
            this.canvas.width = newValue;
        }

        if(name === "height") {
            this.canvas.height = newValue;
        }

        if(name === "options") {
            this.options = JSON.parse(newValue);  
            this.sigCanvas = new SignaturePad(this.canvas, this.options);    
            this.shadow.append(this.div);
            this.clearButton.addEventListener("click", e => {
                e.preventDefault();
                this.sigCanvas.clear();
            });                    
        
            this.getValue = this.sigCanvas.toData();          
            this.setValue = (data) => {
                this.sigCanvas.fromData(data);
            }     
        }
    }

    connectedCallback(){
        this.sigCanvas.addEventListener("afterUpdateStroke", this._handleEndStroke );
        this.sigCanvas.addEventListener("beginStroke", this._handleBeginStroke ); 
    }
}

Test oage:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">   
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <morf-signature options='{"minWidth":1, "maxWidth":3, "penColor": "#ff3399", "dotSize": 2}' 
            quality="0.6" width="300" height="120">
        </morf-signature>    
        
        <morf-signature options='{"minWidth":1, "maxWidth":3, "penColor": "#ff3399", "dotSize": 2}' 
            quality="0.6" width="300" height="120">
        </morf-signature>        
        
        <script type="module">
            import { Signature } from './components/morf-signature.mjs';   
        </script>

        <script>
            const sigs = document.querySelectorAll('morf-signature');
            ([...sigs]).map(sig => {
                sig.addEventListener('signatureUpdate', e => {
                    console.log(e.target.getValue);
                })
            });
        
        </script>
    </body>
</html>

0 replies

fmg-pete · 2024-06-27T00:06:34Z

fmg-pete
Jun 27, 2024
Author

Figured it out. I used the "afterUpdateStroke" event to dispatch a Custom Event, 'signatureUpdate' which I can pick up the the parent page.

0 replies

UziTech · 2024-06-28T03:40:05Z

UziTech
Jun 28, 2024
Collaborator

This seems to work with endStroke

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>

    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      signature-canvas {
        width: 100vw;
        height: 100vh;
        display: block;
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
    <script>
      class SignatureCanvas extends HTMLElement {
        constructor() {
          super();
          this.canvas = document.createElement('canvas');
          this.canvas.style.width = "100vw";
          this.canvas.style.height = "100vh";
          this.attachShadow({ mode: "open" });
          this.shadowRoot.append(this.canvas);
        }

        _handleBeginStroke() {
          console.log('beginStroke');
        }

        _handleEndStroke () {
          console.log('endStroke');
        }

        connectedCallback(){
          console.log('connectedCallback');
          this.sigCanvas = new SignaturePad(this.canvas, this.options);
          this.sigCanvas.addEventListener("endStroke", this._handleEndStroke );
          this.sigCanvas.addEventListener("beginStroke", this._handleBeginStroke );

          const ratio =  Math.max(window.devicePixelRatio || 1, 1);
          this.canvas.width = this.canvas.offsetWidth * ratio;
          this.canvas.height = this.canvas.offsetHeight * ratio;
          this.canvas.getContext("2d").scale(ratio, ratio);
        }
      }

      customElements.define("signature-canvas", SignatureCanvas);
    </script>
  </head>
  <body>
    <signature-canvas></signature-canvas>
  </body>
</html>

0 replies

fmg-pete · 2024-06-28T05:15:45Z

fmg-pete
Jun 28, 2024
Author

Ahhh got it.... version. I was still running 4.00... as soon as I switched to 5.02 the endStroke worked. I then noticed that toDataURL() stopped working :(. I'll stick with 4.00 for now because it's stable, but thanks for the reply.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

endStroke event not firing in web component #778

{{title}}

Replies: 5 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

endStroke event not firing in web component #778

fmg-pete Jun 25, 2024

Replies: 5 comments

UziTech Jun 25, 2024 Collaborator

fmg-pete Jun 25, 2024 Author

fmg-pete Jun 27, 2024 Author

UziTech Jun 28, 2024 Collaborator

fmg-pete Jun 28, 2024 Author

fmg-pete
Jun 25, 2024

UziTech
Jun 25, 2024
Collaborator

fmg-pete
Jun 25, 2024
Author

fmg-pete
Jun 27, 2024
Author

UziTech
Jun 28, 2024
Collaborator

fmg-pete
Jun 28, 2024
Author