Skip to content

cobaltinc/atelier

Repository files navigation

Atelier 🎨

Expandable drawing component for React built by Cobalt, Inc.

Latest npm version PRs welcome

🚀 Getting started

npm install @cobaltinc/atelier # or yarn add @cobaltinc/atelier
import React from 'react'
import { Atelier } from '@cobaltinc/atelier'

<Atelier />

Demo page: https://cobaltinc.github.io/atelier

Props

Prop Description Default
command Set the name of registered plugin pen
color Set the color of the line #000000
lineWidth Set the width of the line 2
width Set the width of the DOM 800
height Set the height of the DOM 600
canvasWidth Set the width of the canvas
canvasHeight Set the height of the canvas
enableDraw Set to true or false to enable or disable draw the canvas true
enablePressure Set to true or false to enable or disable pressure the canvas false
plugins Register the plugins to use [PenPlugin]
style Add inline styles to the root element
className Add className to the root element
onChange(e: AtelierChangeEvent) Fired when an alteration to canvas is commited

Instance Methods

Use ref to call instance methods. See the demo page for an example of this.

Prop Description
draw(e: DrawingInterface) Draw programmatically on the canvas
clear() Erase everything on the canvas

🖋️ Default Plugins

PenPluginBrushPlugin
(Support pressure)
ErasePlugin
PenPlugin gif BrushPlugin gif ErasePlugin gif
HighlighterPluginLaserPlugin
HighlighterPlugin gif LaserPlugin gif
import React from 'react'
import {
  Atelier,
  PenPlugin,
  BrushPlugin,
  ErasePlugin,
  HighlighterPlugin,
  LaserPlugin
} from '@cobaltinc/atelier'

<Atelier plugins={[PenPlugin, BrushPlugin, ErasePlugin, HighlighterPlugin, LaserPlugin]} />

🖌️ Custom Plugin

If you want new plugin, you can make easily.

class DashPlugin extends Plugin {
  name: string = 'dash';
  prevX: number;
  prevY: number;

  draw(data: DrawingInterface) {
    super.draw(data);

    const { x, y, state } = data;
    const context = this.canvas?.getContext('2d');
    context.setLineDash([5, 30]);

    const prevX = this.prevX || x;
    const prevY = this.prevY || y;

    if (state === 'draw-started' || state === 'drawing') {
      context.beginPath();
      context.moveTo(prevX, prevY);
      context.lineTo(x, y);
      context.stroke();
      context.closePath();

      Object.assign(this, {
        lastX: x,
        lastY: y,
      });
    }
  }
}

<Atelier command="dash" plugins={[DashPlugin]} />

And the result:

DashPlugin gif

📄 License

Atelier is made available under the MIT License.