Error when triggering some action while drawing

[tonai]

Describe the bug

You can raise errors when triggering some action while drawing.

To reproduce:
1.go to https://drauu.netlify.app/
2. open the console
3. draw something
4. while drawing hit the "c" key
5. 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

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)

[tonai]

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) ?

[tonai]

I also have other errors that I am not able to reproduce:

Failed to execute 'getTotalLength' on 'SVGGeometryElement': This element is non-rendered element.

It comes from the onEnd function for rect, line and ellipse models.

Or:

undefined is not an object (evaluating 'this.svgPointPrevious.x')

From the checkAndEraseElement function of the eraser.

I'll try to propose a fix.