Installation

npm install --save color-replace-app-core

Table of Contents

• BoardController
  • TOOL_BRUSH
  • TOOL_MAGIC_WAND
  • TOOL_POLYGON
  • TOOLS
• loadImage
  • Parameters
  • Examples
• getToolsValues
  • Examples
• setBrushSize
  • Parameters
  • Examples
• setBrushHardness
  • Parameters
  • Examples
• setBrushToAdd
• setBrushToRemove
• setMagicWandTolerance
  • Parameters
• fillMagicWand
• setMagicWandToAdd
• setMagicWandToRemove
• applyMagicWandToSelectedLayer
• setTool
  • Parameters
• addLayer
• selectLayer
  • Parameters
• setBlackLevelToSelectedLayer
  • Parameters
• setWhiteLevelToSelectedLayer
  • Parameters
• showGlass
• hideGlass
• switchGlass
• setColorToSelectedLayer
  • Parameters
• setHueToSelectedLayer
  • Parameters
• setSaturationToSelectedLayer
  • Parameters
• setBrightnessToSelectedLayer
  • Parameters
• clearSelection

BoardController

Class representing a controller for board. "new BoardController()"

TOOL_BRUSH

The BoardController.TOOL_BRUSH is a identifier for a brush tool

TOOL_MAGIC_WAND

The BoardController.TOOL_MAGIC_WAND is a identifier for a magic wand tool

TOOL_POLYGON

The BoardController.TOOL_POLYGON is a identifier for a polygon tool

TOOLS

The BoardController.TOOLS is array with all tools

loadImage

load the base image and start all the context of the boardController.

Parameters

• containerHTMLElement (Window | HTMLElement) the container element for the board canvas
• url string The URL to download the base image.
• maxSize Int OPTIONAL maximum size for the base image

Examples

boardControllerInstance.loadImage(htmlElement,imageURL,900).then((canvas)=>{
   htmlElement.appendChild(canvas)
})

Returns Promise<Canvas> the html canvas instance of the board.

getToolsValues

return tools values

Examples

// return [
//             BoardController.TOOL_BRUSH : {size:0,hardness:0,type:1 ( 1 = paint,0 = erease )},
//             BoardController.TOOL_MAGIC_WAND : {tolerance:0,type:1 ( 1 = paint,0 = erease )},
//             ]
boardControllerInstance.loadImage(htmlElement,imageURL,900).then((canvas)=>{
  htmlElement.appendChild(canvas)
})

Returns Array Associative Array

setBrushSize

Set the size of the brush tool

Parameters

• val Int the new size of the brush

Examples

boardControllerInstance.setBrushSize(20) // the brush size now is 20px

setBrushHardness

Set the hardness of the brush tool

Parameters

• val Int the new hardness value of the brush (0-100)

Examples

boardControllerInstance.setBrushHardness(20) // the brush size now is 20

setBrushToAdd

Configure the brush tool to paint on the selected layer

setBrushToRemove

Configure the brush tool to erease on the selected layer

setMagicWandTolerance

Configure the magic wand tool with new tolerance

Parameters

• val Int the new tolerance value (1-200)

fillMagicWand

Allows you to see the result of the magic wand tool without even applying the changes

setMagicWandToAdd

Configure the magic wand tool to paint on the selected layer

setMagicWandToRemove

Configure the magic wand tool to erease on the selected layer

applyMagicWandToSelectedLayer

Apply the results of the magic wand tool in the selected layer

setTool

Set the active tool

Parameters

• tool String can be BoardController.TOOL_BRUSH, BoardController.TOOL_MAGIC_WAND or BoardController.TOOL_POLYGON

addLayer

Add a new layer and select it

Returns Object object with info of the created layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

selectLayer

Select a layer based on the id

Parameters

• id {Int} - Id

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

setBlackLevelToSelectedLayer

Set a black level in the selected layer

Parameters

• val {Int} - new value 0-100

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

setWhiteLevelToSelectedLayer

Set a white level in the selected layer

Parameters

• val {Int} - new value 0-100

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

showGlass

Show a magnifying glass

hideGlass

Hide magnifying glass

switchGlass

Show/Hide magnifying glass

setColorToSelectedLayer

Set a color in the selected layer

Parameters

• colorNumber {Int} - A color number like this 0xff0000

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

setHueToSelectedLayer

Set a Hue in the selected layer

Parameters

• hue {Int} - hue value (0-359)

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

setSaturationToSelectedLayer

Set a Saturation in the selected layer

Parameters

• sat {Number} - saturation value (0.0-1.0)

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

setBrightnessToSelectedLayer

Set a Brightness in the selected layer

Parameters

• brightness {Number} - brightness value (0.0-1.0)

Returns Object object with info of the selected layer {id,name,color,hexColor,rgbColor,hsvColor,whiteLevel,blackLevel}

clearSelection

Clear selection "for polygon tool"