Add brush feature

PaintBrush

Minimum support repository：@realsee/dnalogel@2.0.0-alpha.34

Function Description

Brush Component provides the ability to draw in the content area.

Effect Display

Tap to turn on brush: paintbrush_selector: button, to draw

Install reference

Please choose yarn or npm installation method：as needed

npm

npm install @realsee/dnalogel

Yarn

yarn add @realsee/dnalogel

pnpm

pnpm add @realsee/dnalogel

By es reference：

import { PaintBrush } from "@realsee/dnalogel/components"

Development Guides

Initialize

Initialize brush instances as needed.

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

Open brush

The brush can be enabled by calling show() method.

paintBrushInstance.show()

Event listener

• already listening events readyChange: (ready: boolean) => void

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

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

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

Core approach

• setCurrentColor(color: string) Change brush color

demo source reference

demo source reference