Class Pikaso<Shapes>

This is the main class and entry point that creates a new editor instance

See

[[constructor]]

Type Parameters

Constructors

Properties

board: Board

Represents the [[Board]]

cropper: Cropper

Represents [[Cropper]] component

events: Events

Represents the [[Events | event manager]]

This is also possible to Subscribe and Unsubscribe events with [[on | on method]] and [[off | off method]] of the main class

See

  • [[Events]]
  • list of listeneres: [[EventListenerNames]]
export: Export

Represents the [[Export]]

filters: Filter

Represents the [[Filter]]

flip: Flip

Represents [[Flip]] component

history: History

Represents the [[History | actions history]]

import: Import

Represents the [[Import]]

rotation: Rotation

Represents the [[Rotation]] component

selection: Selection

Represents the [[Selection]] component

shapes: Shapes

Represents the [[ShapeModel | Shapes]] creators

snapGrid: SnapGrid

Represents the [[SnapGrid]]

Methods

  • Reloads the workspace with the given data

    Parameters

    • data: string

      The JSON object

    Returns Promise<void>

  • Loads the background image from url This method is a shortcut to [[Background.setImageFromFile]]

    Parameters

    • file: File

      The image file

    • Optional options: Partial<BackgroundOptions>

      The background options

    Returns Promise<void>

  • Loads the background image from url This method is a shortcut to [[Background.setImageFromUrl]]

    Parameters

    • url: string

      The image url

    • Optional options: Partial<BackgroundOptions>

      The background options

    Returns Promise<void>

  • Reverses the last [[undo]]

    Returns void

  • Resizes the board based on the new container size

    This method is a shortcut to [[Board.rescale]]

    Returns void

    Remarks

    This method can be used with resize event of window to rescale the board

    Example

    const editor = new Pikaso({
    container: document.getElementById('myDiv') as HTMLDivElement
    })

    window.addEventListener('resize', () => {
    editor.board.rescale()
    })
  • Resets everything and reinitializes the editor

    Returns void

  • Reverses the last action

    Returns void