Paint tools toolbar panel.

Hierarchy

Implements

Properties

contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

See

https://react.dev/reference/react/Component#static-contexttype

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>

See

https://react.dev/reference/react/Component#context

refs: { [key: string]: ReactInstance }

Type declaration

  • [key: string]: ReactInstance

Methods

  • Called to determine whether the change in props and state should trigger a re-render.

    Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.

    If false is returned, Component#render, componentWillUpdate and componentDidUpdate will not be called.

    Parameters

    Returns boolean

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    Returns any

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    Returns void

  • Removes an object designer by its ID and disposes of it.

    Returns

    True if the object was found and removed, false otherwise.

    Parameters

    • id: string

      The ID of the object to remove.

    Returns boolean

  • Finds a paint object designer by its unique identifier.

    Returns

    The matching designer if found, otherwise undefined.

    Parameters

    • id: string

      The unique identifier of the paint object designer.

    Returns undefined | IPaintObjectDesigner

  • Crop x position.

    Returns number

  • Crop y position.

    Returns number

  • Crop width.

    Returns number

  • Crop height.

    Returns number

  • Call this method to create paint layer.

    Returns Promise<IImageLayer>

  • Toggle active paint tool.

    Parameters

    • Optional toolKey: PaintToolType

      Optional. Tool type.

    • Optional checked: boolean

      Optional. Checked state.

    Returns Promise<void>

  • Called when paint object property changed.

    Parameters

    Returns void

  • Show toolbar.

    Returns void

  • Hide toolbar.

    Returns void

  • Parameters

    • Optional endIndex: number

      Optional. End undo index (excluding).

    Returns Promise<void>

  • Serializes and downloads the current command stack as a JSON file. If the browser supports the File System Access API, a native "Save as..." dialog will be used (user can edit the filename). Otherwise the method falls back to creating a Blob and triggering a download via an anchor element (with an optional prompt).

    Returns

    Resolves when the download/save operation is initiated or completed.

    Throws

    When serialization or file writing fails.

    Parameters

    • args: { objectsOnly: boolean } = ...

      Options for export. objectsOnly: true will attempt to export only object-related commands.

      • objectsOnly: boolean

    Returns Promise<void>

  • Opens a file dialog to load commands from a JSON file

    Returns

    Promise resolving with loaded commands

    Returns Promise<IPaintCommand[]>

  • Serializes an array of paint commands to a JSON string

    Returns

    JSON string representing the command stack

    Throws

    When invalid commands are provided

    Parameters

    Returns string

  • Deserializes a JSON string to an array of paint commands

    Returns

    Array of reconstructed paint commands

    Throws

    When the data cannot be deserialized

    Parameters

    • serializedData: string

      JSON string containing serialized commands

    Returns Promise<IPaintCommand[]>

Accessors

  • get paintLayer(): IImageLayer
  • Gets the paint layer containing the HTML canvas for drawing the image.

    Returns IImageLayer

  • get foreColor(): Color
  • Pencil color.

    Returns Color

  • get penSize(): number
  • Pencil size.

    Returns number

  • get brushSize(): number
  • Brush size.

    Returns number

  • get eraserSize(): number
  • Eraser size.

    Returns number

  • get cloneStampSize(): number
  • Clone Stamp size.

    Returns number

  • get fontSize(): number
  • Font size.

    Returns number

  • get pencilOpacity(): number
  • Pencil opacity.

    Returns number

  • get brushOpacity(): number
  • Brush opacity.

    Returns number

  • get eraserOpacity(): number
  • Eraser opacity.

    Returns number

  • get cloneStampOpacity(): number
  • Clone Stamp opacity.

    Returns number

  • get fontOpacity(): number
  • Font opacity.

    Returns number

  • get brushHardness(): number
  • Brush hardness.

    Returns number

  • get eraserHardness(): number
  • Eraser hardness.

    Returns number

  • get cloneStampHardness(): number
  • Clone Stamp hardness.

    Returns number

  • get fontName(): string
  • Font name.

    Returns string

  • get fontItalic(): boolean
  • Italic font style.

    Returns boolean

  • get fontBold(): boolean
  • Bold font style.

    Returns boolean

  • get maxWidth(): number
  • Max possible crop width.

    Returns number

  • get maxHeight(): number
  • Max possible crop height.

    Returns number

  • get naturalRatio(): number
  • Natural aspect ratio.

    Returns number

  • get useOriginalImage(): boolean
  • Use the original image as source while applying edits.

    Returns boolean

  • set useOriginalImage(value: boolean): void
  • Use the original image as source while applying edits.

    Parameters

    • value: boolean

    Returns void

  • get toolSize(): number
  • Tool size.

    Returns number

  • get toolHardness(): number
  • Tool hardness.

    Returns number

  • get toolOpacity(): number
  • Tool opacity.

    Returns number