Last 12 weeks · 5 commits
5 of 6 standards met
Clear and concise description of the problem !Image There is no keyboard shortcut to select the "Eraser" tool. This would be very helpful when working with a stylus, as one can configure the pen buttons to toggle between "Stylus" and "Eraser". Suggested solution Implement a keyboard shortcut to select the "Eraser" tool. Alternative _No response_ Additional context _No response_ Validations [x] Follow our Code of Conduct [x] Read the Contributing Guide. [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Description On an iPad, if you have "Scribble" enabled, you have to cancel the touchmove event. Otherwise, only around every second stroke gets registered. Scribble is an Apple Pencil feature, where you can enter text in any input field via human handwriting. More context: https://mikepk.com/2020/10/iOS-safari-scribble-bug/ Linked Issues No linked issue. Additional context Here is a quick before and after video: https://github.com/user-attachments/assets/106c0e7b-c1fa-4357-85df-8c8c5929031c
Repository: antfu/drauu. Description: Headless SVG-based drawboard in browser. Stars: 1486, Forks: 79. Primary language: TypeScript. Languages: TypeScript (91.1%), HTML (8.4%), CSS (0.3%), JavaScript (0.2%). License: MIT. Homepage: https://drauu.netlify.app/ Topics: drawboard. Latest release: v1.0.0 (1mo ago). Open PRs: 0, open issues: 12. Last activity: 1mo ago. Community health: 85%. Top contributors: antfu, haykkh, tonai, benjinus, btea, azaleta, kermanx, mzaini30, TheNoim, JuanM04 and others.
TypeScript
Description Expect redo and undo actions to affect the clear action. Steps to Reproduce 1. Draw something on the drawboard. 2. Use the clear action to clear the drawboard. 3. Try to use the undo action. 4. Try to use the redo action. Expected Behavior The undo action should revert the clear action and restore the previous drawing. The redo action should reapply the clear action after an undo. Suggestion Consider updating the redo and undo logic to include the clear action as part of the history stack.
Clear and concise description of the problem Often it is desirable to highlight certain sections of a drawing (or in the context of slidev highlight some text). Currently there seems to be no highlighter tool for this job. Suggested solution Add a highlighter tool Alternative _No response_ Additional context _No response_ Validations [x] Follow our Code of Conduct [x] Read the Contributing Guide. [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
I think as an SVG-based drawing tool in the browser, it should support adding text.
Description fix a bug where touch and mouse events return incorrect coordinates when the zoom property is applied to the parent element. This issue affects Chrome versions before 96, where event coordinates (clientX, clientY) are not scaled properly according to the zoom factor. For newer versions of Chrome (96+), no adjustment is needed since the browser handles zoom scaling correctly. This fix ensures consistent behavior by manually adjusting event coordinates based on the zoom factor in older versions. Steps to Reproduce 1. Use any Chrome version prior to 96. 2. Apply a zoom property to the drauu svg parent node 3. Observing the result of the drawing, we can see that there is a clear deviation from the actual mouse/touch position. 4. Set the correct cssZoom value in drauu option and draw again, and you can see that the situation has returned to normal. Why This is Needed • Touch and mouse event coordinates are incorrect on older versions of Chrome when zoom is applied, causing misaligned interactions. • This fix makes sure users have a consistent experience regardless of their browser version. Browser Version Coverage • Chrome 81 && 88: Verified the issue exists and is fixed with this patch. • Chrome 96+: Already handles zoom properly; this fix remains compatible. Additional Notes This patch doesn’t interfere with newer Chrome versions and gracefully handles legacy versions. It helps users who still use older browsers without impacting performance or modern browser handling. Let’s make zoomed elements behave nicely! 👋