antfu / drauu

Headless SVG-based drawboard in browser.
https://drauu.netlify.app/
MIT License
1.2k stars 64 forks source link

Error when triggering some action while drawing #48

Open tonai opened 1 month ago

tonai commented 1 month ago

Describe the bug

You can raise errors when triggering some action while drawing.

To reproduce: 1.go to https://drauu.netlify.app/

  1. open the console
  2. draw something
  3. while drawing hit the "c" key
  4. on the console you should have TypeError: Cannot read properties of undefined (reading 'dataset')

On android it does not seem possible to hit some button while drawing but it is possible on ios so you may also trigger some errors (for example click on the eraser tool while drawing).

We might let the lib user handle this with something like:

const isDrawing = ref(false);
drauu.on("start", () =>  isDrawing.value = true);
drauu.on("end", () =>  isDrawing.value = false);

and use isDrawing to disable the buttons :disabled="isDrawing". This is the current workaround to avoid the issue, but this require extra work, especially with vanilla JS.

Maybe it can be handled inside the lib, to avoid the problematic cases.

Reproduction

https://drauu.netlify.app/

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 22.63 GB / 30.75 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: 8.15.3 - ~/.nvm/versions/node/v20.15.1/bin/pnpm
    bun: 1.0.22 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.182

Used Package Manager

npm

Validations

Contributions

tonai commented 1 week ago

After some testing I added the code part to disable the buttons while drawing but I still see this issue appearing in the log of my app. The problem is I don't really know how to reproduce it... Here is the stack trace I have:

TypeError: Cannot read property 'dataset' of undefined
at Yo._appendNode (/client.js:26:27830)
at Yo.eventEnd (/client.js:26:26597)

It is clearly happing in that file: https://github.com/antfu/drauu/blob/main/packages/core/src/drauu.ts#L256 So maybe we should not pretend that currentNode can't be null (const el = this._currentNode! on line 177) and avoid the error by adding a simple if (el) ?