[Archived] Paint Brush

Draw freehand overlays on a Dnalogel content area with PaintBrush.

PaintBrush

Minimum supported library version: @realsee/dnalogel@2.0.0-alpha.34

Overview

The PaintBrush component provides the ability to draw freehand over the content area.

External Demo

Open the Paint Brush demo. In the external demo, use Enable Paint Brush to start drawing.

Installation

Choose either yarn or npm to install, as needed:

npm install @realsee/dnalogel

Import via ES modules:

import { PaintBrush } from '@realsee/dnalogel'

Development Guide

Initialization

Create a paint brush instance as needed.

const paintBrushInstance = new PaintBrush({
  // container?: HTMLDivElement
  // currentColor: string // '#ff0000',  // brush color
  // DPR?: number,
  // onClickClose?: () => void, // exit callback
  // onClickUndo?: () => void, // undo callback
  // onUndoText?: string, // undo button text, defaults to "Undo"
  // onExitText?: string // exit button text, defaults to "Exit"
})

Enabling the Paint Brush

Call the show() method to enable the paint brush.

paintBrushInstance.show()

Event Listening

ready event readyChange: (ready: boolean) => void

paintBrushInstance.on('readyChange', (ready) => {
  // true || false
})

state event stateChange: (state: PaintBrushAction, userAction: boolean) => void

import type { PaintBrushAction } from '@realsee/dnalogel'

paintBrushInstance.on('stateChange', (state: PaintBrushAction, userAction: boolean) => {
  /**
   * state.type enum values:
   * export enum PaintBrushTypeEnum {
   * Drawline='Drawline',
   * Undo='Undo',
   * Exit='Exit',
   * }
   * */
})

Core Methods

setCurrentColor(color: string) changes the brush color

Source Reference

PaintBrush example source