1.1.2 • Published 6 years ago

@potch/pixeleditor v1.1.2

Weekly downloads
6
License
ISC
Repository
-
Last release
6 years ago

PixelEditor

a portable pixel editor widget

npm install @potch/pixeleditor

Touch support is quite lacking right now, but mouse and keyboard support is available!

PixelEditor Class

new PixelEditor(options)

creates new PixelEditor object.

options is an object with the following properties:

namerequired?typedefaultdescription
widthyesNumbern/awidth of the drawing
heightnoNumbervalue of widthheight of the drawing
zoomnoNumber8amount to scale drawing canvas
colorsnoArraysee "Default Colors" belowthe colors to display in the widget's palette
currentColornoNumber1index in colors of the initial drawing color
bgnoNumber0index in colors of the color to use to fill the initial drawing and the drawing after calling clear()
containernoElementn/aelement to append the widget to. Optional as you can also call mount()
onUpdatenoFunctionn/acallback to call when the drawing changes

Colors

colors are provided as an Array of red, green, blue Arrays, where the color components go from 0 to 255.

The default colors are:

[
  [255, 255, 255], // white
  [0, 0, 0],       // black
  [255, 0, 0],     // red
  [255, 255, 0],   // yellow
  [0, 255, 0],     // green
  [0, 255, 255],   // cyan
  [0, 0, 255],     // blue
  [255, 0, 255]    // magenta
];

onUpdate

If a Function is provided to the constructor, it will be called when the drawing is updated. this will refer to the PixelEditor instance.

Methods

These are the intended public methods of the class. Other methods are available, but are subject to change.

mount(container)

Appends the widget to a container element. Called automatically if container is passed to the constructor.

  • container - an existing element on the page

clear([color])

Resets the drawing to a single color.

  • color (optional) - the index in colors of the color every pixel should be set to. Defaults to bg.

resize({ [width], [height], [zoom] })

Resize the drawing canvas to the provided dimensions and zoom. At least one of width, height, and zoom must be provided.

undo()

Restore to the previous drawing state.

toImageData({ [zoom] })

Returns an ImageData object containing the drawing scaled to the provided zoom.

  • zoom (optional) - scaling factor to apply to the drawing when exported. Defaults to 1.

toBlob({ [zoom] }).then(blob => ...)

Returns a Promise that resolves with a Blob of type image/png containing the drawing scaled to the provided zoom.

  • zoom (optional) - scaling factor to apply to the drawing when exported. Defaults to 1.

Keyboard Support

When focused, the following key controls are available:

  • up, down, left, right: move cursor
  • D, L, F: select Draw, Line, Fill tools
  • Z: undo
  • space: activate current tool
  • [ and ]: cycle through colors
  • Alt(Option) + X: clear canvas
1.1.1

6 years ago

1.1.2

6 years ago

1.1.0

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago