drauu

To use drauu in your project, install it using npm:

npm i drauu

To set up a drawing instance, provide an SVG element as the target and configure the initial brush settings. You can target the element using a CSS selector via the el option.

Key brush options include:

• mode: The drawing mode. Supported values are 'line', 'rectangle', and 'ellipse'. Note that 'stylus' is also mentioned as a feature for stylus/touch pressure support.
• color: The color of the brush.
• size: The thickness of the brush.

import { createDrauu } from 'drauu'

// Ensure you have an SVG in your HTML
// <svg id="svg"></svg>

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

The EraserModel is a specialized model in @drauu/core used for erasing elements from an SVG canvas. It works by detecting intersections between the user's movement path and the segments of SVG elements.

When an erasure operation is completed via onEnd(), it returns an Operation object. This object provides undo and redo methods that allow you to revert or re-apply the erasure of the specific elements affected during that interaction.

• undo(): Restores the elements that were removed from the SVG.
• redo(): Removes the elements again.

To use the project's ESLint configuration, import the antfu default export from @antfu/eslint-config and export it as the default configuration in your eslint.config.js file. You can pass an options object to the antfu() function to customize the configuration.

import antfu from '@antfu/eslint-config'

export default antfu({})

You can modify the brush configuration at runtime by accessing the drauu.options.brush object.

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

The Drauu playground uses Windi CSS for styling. You can configure Windi CSS behavior using defineConfig from windicss/helpers. Key options include:

• darkMode: Set to 'class' to enable dark mode via a CSS class.
• attributify: Set to true to enable Attributify mode, allowing you to use utility classes as attributes on HTML elements.

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  darkMode: 'class',
  // https://windicss.org/posts/v30.html#attributify-mode
  attributify: true,
})

The mount(el, eventEl, listenWindow) method attaches the drawing tool to a target SVG element.

• el: A CSS selector string or an SVGSVGElement. This is the canvas where drawings will appear. It must be an <svg> element created via document.createElementNS('http://www.w3.org/2000/svg', 'svg').
• eventEl (optional): A CSS selector string or an Element that will receive pointer events. If not provided, it defaults to the target el.
• listenWindow (optional): The Window object to listen for global events like pointermove and pointerup. Defaults to window.

Note: You cannot mount to an element if the instance is already mounted. Call unmount() first.

Drauu maintains an operation stack that allows you to revert or re-apply recent drawing actions.

• undo(): Reverts the last operation. Returns true if successful, false if there is nothing to undo or if a drawing is currently in progress.
• redo(): Re-applies the last undone operation. Returns true if successful, false if there is nothing to redo or if a drawing is currently in progress.
• canUndo(): Returns true if there are operations in the stack that can be undone.
• canRedo(): Returns true if there are undone operations that can be redone.

Drauu provides methods to manage the raw SVG content of the target element:

• clear(): Removes all drawn elements from the SVG, clears the undo/redo history, and cancels any active drawing.
• load(svg: string): Replaces the current canvas content with the provided SVG string. This also clears the existing history.
• dump(): Returns the current innerHTML of the target SVG element, which can be used to save the drawing state.

The simplify function reduces the number of points in a polyline while preserving its shape. It uses a two-stage approach for performance: first applying a radial distance simplification, then the Ramer-Douglas-Peucker algorithm.

Parameters:

• points: An array of Point objects (expected to have .x and .y properties).
• tolerance: The maximum allowable distance between the original and simplified line. The function uses the square of this value internally.
• highestQuality (optional): A boolean. If false (default), it uses a fast radial distance pre-pass. If true, it skips the pre-pass and only uses the Douglas-Peucker algorithm.

Note on Point Format: The algorithm expects points to follow the { x: number, y: number } format. If your data uses different keys, you must map them to .x and .y before calling this function.