antfu / drauu

Headless SVG-based drawboard in browser.

drauu

SVG-based drawing tool in browser. Built for Slidev.

Live Demo (built with Vanilla JavaScript!)

Features

• Vanilla JavaScript - integrate into any framework you like
• SVG-based - scalable, transparent, and serializable
• Stylus / Touch pressure support
• Headless (unstyled) - style it as you want
• Undo / Redo stacks

Install

npm i drauu

<svg id="svg"></svg>

import { createDrauu } from 'drauu'

const drauu = createDrauu({
  el: '#svg',
  brush: {
    mode: 'stylus', // 'line', 'rectangle', 'ellipse'
    color: 'skyblue',
    size: 5,
  }
})

// change brush color
drauu.options.brush.color = 'red'

Credits

Inspired by

• scribby by naknomum
• excalidraw
• draw by amoshydra
• live-draw by antfu

Thanks!

Sponsors

License

MIT

drauu's Issues

Inconsistent sizing between brush types

For the stylus tool we double our brush size when generating the path data, resulting in a line twice the thickness of other tools

drauu/packages/core/src/models/stylus.ts

Lines 40 to 51 in a93fdf0

	const stroke = pf.getStroke(points, {
	size: this.brush.size * 2,
	thinning: 0.9,
	simulatePressure: false,
	start: {
	taper: 5,
	},
	end: {
	taper: 5,
	},
	...this.brush.stylusOptions,
	})

I want to know how to use this

Why can't I load these two methods?

Import Error with Nuxt 3

Describe the bug

I am trying to use it in my Nuxt 3 project. I get this error:

import { getStroke } from "perfect-freehand";
         ^^^^^^^^^
SyntaxError: Named export 'getStroke' not found. The requested module 'perfect-freehand' is a CommonJS module, which may not support all module.exports as named exports.       
CommonJS modules can always be imported via the default export, for example using:      

import pkg from 'perfect-freehand';
const { getStroke } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async __instantiateModule__ (file:///C:/Users/talha/code/kodesis-nuxt/.nuxt/dist/server/server.mjs:31957:3)

Reproduction

Codesandbox

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11300H @ 3.10GHz
    Memory: 3.82 GB / 15.79 GB
  Binaries:
    Node: 16.16.0 - ~\.nvm\versions\node\v16.16.0\bin\node.EXE
    Yarn: 1.22.19 - ~\.yarn\bin\yarn.CMD
    npm: 8.11.0 - ~\.nvm\versions\node\v16.16.0\bin\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.22000.120

Used Package Manager

yarn

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.

No eraser 😔

Hey, I found this epic project though Changelog Daily Newsletter and it's wow! The speed and the agility of this is on another level.

But it doesn't have an eraser. Any plans to support that? Or can you give some tips on how someone would go around adding such a support? 😱

Import Issue

Firstly, The project and the demo are amazing. I was trying to import this package in angular and got the following error (attached screenshot). Could you help me out with this?

Thanks in advance!
Error:

Multitouch events draw incorrectly

Describe the bug

When drawing with multiple touch points the events fail to distinguish the original touch finger/device from additional ones, causing buggy drawings. See video below where we start a drawing on the left side of the screen, then also start dragging on the right side before we lift the left finger

RPReplay_Final1694428554.mov

Reproduction

N/A

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.82 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.8.0/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 96.0
    Firefox Developer Edition: 118.0
    Safari: 16.5.2

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.

alternative keyboard layouts don't work properly in the playground

hey, this seems fantastic and i'll definitely use it in a project at some point, but the demo doesn't seem to work with alternative keyboard layouts.

i have a german keyboard which means my Z and Y keys are switched among other things, making the undo combination ctrl+y

i'd be down to dig into the example and create a PR if you want, just let me know.

[Feature] Listen canRedo / canUndo with Vue

I want listen canUndo / canRedo status in vue, but the _undoStack is not reactive in drauu.

This is simple:

Playground: https://stackblitz.com/edit/vitejs-vite-fqw3a1?file=src%2FApp.vue

I think has two solutions:

1. change internal variable _undoStack to reactive
2. export an event API for listen to mouse draw end, and for me to update the canUndo / canRedo status

Or if you have any other best solution?

Can you add this feature?

Expose stylus' points and getSvgData publicly

Clear and concise description of the problem

We have a use case in our app where we'd like to change the thickness of drawings after they are made. These are easy for most of the models as they use strokes, but the stylus uses pf to create a path outline which is nontrivial to edit post creation.

Suggested solution

Publicly expose StylusModel.points

drauu/packages/core/src/models/stylus.ts

Line 6 in f449054

private points: Point[] = []

and getSvgData

drauu/packages/core/src/models/stylus.ts

Line 39 in f449054

getSvgData(points: Point[]) {

so that we can store the points and redraw the outlines when required

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

what is 'nr' ?

I know it's a silly question, but what is nr used in package.json? The scripts that exists in dev and build scripts

I tried to run pnpm run dev but there's an error
'nr' is not recognized as an internal or external command

Better support for esm

Describe the bug

The original issue is here(vueuse/vueuse#2058)

I think export should be added to package.json as something like

  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.js",
      "import": "./dist/index.mjs"
    }
  },

What do you think?

Reproduction

https://stackblitz.com/edit/github-r9jhdg?file=app.vue

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 2.59 GB / 15.71 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.54)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

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.

don't work on touch screen with vue3

Describe the bug

when I clone and run this project, it works well on phone browsers.
BUT doesn't work when in vue3. useDrauu also won't work.
I swipe screen and it just go like this:

Reproduction

.

System Info

.

Used Package Manager

pnpm

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

On Playground: Bug when mousing away, then mousing back over

To reproduce: Mousedown and hold in canvas, drag your mouse into the UI menu at the top (outside the container), mouseup and then move your mouse back into the canvas. Now observe how you are drawing without any mousedown input at the thinnest stroke size.

I may be able to fix via PR if I have the time. Thanks! Love this project.

CDN version?

Is there CDN version (iife) for this tools? Thanks...

Dynamically created svg element not recognized due to case-sensitivity.

When trying to mount to a dynamically created svg element (using document.createElement('svg'))`, I see the error:

index.mjs:576 Uncaught Error: [drauu] can only mount to a SVG element

It looks like the test for svg element only allows for lowercase tagName = 'svg', whereas a dynamically created svg element has upppercase tagName = 'SVG'.

Both uppercase and lowercase values for tagName do occur under different circumstances: (https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) so the check to see if the element is in fact an svg element might need to be refined.

It doesn't seem to be an issue for svg elements that are already defined in the html (i.e tagname is lowercase in that case).

UI Issue

Great work!

There is an issue with the color icons,

• Below screenshot is taken on Brave -

• on Firefox -
  

Brush size

The brush size could be a negative number，maybe add a tip or limit the size

Be able to draw dots.

Clear and concise description of the problem

I'm using drauu to make a whiteboard for my classroom.
Writing goes very well with drauu on a touchscreen except for one thing.
It's hard to draw dots (like on the i, or a colon, ...).
A simple touch doesn't trigger the drawing somehow. You have to touch, hold and move, but then it results in a line.

Suggested solution

Make a touch trigger the drawing. So a simple dot can be registered and shown in the screen.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

How to create filled rectangle/ellipse

The Brush documentation hints that a rentagle can be filled:

"Color filled, only works in rectangle and ellipse mode."

But how is it activated on the ui?

[Bug] When press Cmd + Shift + C to inspect element, toggle `clear` feature

Tada, I just want to see how SVG generates 🤣.