cdejs
Version:
CanvasDotEffect is a lightweight JS library that helps create customizable and interactive dot-based effects using the Canvas API
1,279 lines • 239 kB
TypeScript
export class CDEUtils {
static DEFAULT_ACCEPTABLE_DIFFERENCE: number;
static CIRC: number;
static TO_DEGREES: number;
/**
* Returns the element at the specified index, starting from the end of the array
* @param {Array} arr: the array
* @param {Number?} index: the index
* @returns the element at index
*/
static getLast(arr: any[], index?: number | null): any;
/**
* Adds an element to the specified index of the array
* @param {Array} arr: the array
* @param {*} el: the element to add
* @param {Number?} index: the index
* @returns the updated array
*/
static addAt(arr: any[], el: any, index?: number | null): any[];
/**
* Returns a random number within the min and max range
* @param {Number} min: the minimal possible value (included)
* @param {Number} max: the maximal possible value (included)
* @param {Number?} decimals: the decimal point. (Defaults to integers)
* @returns the generated number
*/
static random(min: number, max: number, decimals?: number | null): number;
/**
* Clamps a number between the min and max
* @param {Number} num: the number to clamp
* @param {Number?} min: the minimal value
* @param {Number?} max: the maximal value
* @returns
*/
static clamp(num: number, min?: number | null, max?: number | null): number;
/**
* Returns the average of an array of numbers
* @param {Number[]} arr: an array of numbers
* @returns the average
*/
static avg(arr: number[]): number;
/**
* Returns whether a value is defined
* @param {*} value: the value to check
* @returns whether the value is defined
*/
static isDefined(value: any): boolean;
/**
* Returns whether a value is a function
* @param {*} value: the value to check
* @returns whether the value is a function
*/
static isFunction(value: any): boolean;
/**
* Rounds a number to a specific decimal point
* @param {Number} num: the number to round
* @param {Number?} decimals: the decimal rounding point
* @returns
*/
static round(num: number, decimals?: number | null): number;
/**
* Fades a numeric value according to Anim progress and playCount
* @param {Number} prog: an Anim instance's progress
* @param {Number?} i: an Anin instance's play count. (Controls the direction of the fading animation)
* @param {Number?} minValue: the minimal value to reach
* @param {Number?} maxValue: the maximal value to reach
* @returns the calculated number
*/
static fade(prog: number, i?: number | null, minValue?: number | null, maxValue?: number | null): number;
/**
* Calculates a 0..1 ratio based on the distance between two object and a limit/threshold
* @param {[x,y] | _BaseObj} pos1: a pos or _BaseObj inheritor instance
* @param {[x,y] | _BaseObj} pos2: another pos or _BaseObj inheritor instance
* @param {Number?} limit: the distance threshold use to calculate the ratio
* @returns a number between 0 and 1
*/
static getRatio(pos1: [x, y] | _BaseObj, pos2: [x, y] | _BaseObj, limit?: number | null): number;
/**
* Returns an array of a shape's dots ordered by the distance between them and the specified dot
* @param {Dot} dot: a Dot instance
* @param {Shape?} shape: a Shape instance. (Defaults to the shape containing "dot")
* @returns an ordered list of all dots [[dot, distance], ...]
*/
static getNearestDots(dot: Dot, shape?: Shape | null): any;
/**
* Makes a callback only called after a certain amount of time without 'interaction'.
* This function returns a 'regulation callback' that will call the provided "callback" only after the provided amount of time has passed without it getting called.
* For example, calling the 'regulation callback', with a timeout of 1000ms, everytime a key is pressed will make it so the provided "callback" will be called only after no keys were pressed for 1 seconds.
* @param {Function} callback: a function to be called after "timeout" amount of time has passed with no 'interaction'
* @param {Number?} timeout: the minimal time window, in miliseconds, before calling callback after an 'interaction'
* @returns the 'regulation callback'
*/
static getRegulationCB(callback: Function, timeout?: number | null): (...params: any[]) => void;
/**
* Basically regular setInterval, but without the initial timeout on the first call
* @param {Function} callback: a function to be called
* @param {Number?} timeout: the timeout value in miliseconds
* @returns the setInteraval id
*/
static noTimeoutInterval(callback: Function, timeout?: number | null): number;
/**
* Creates a copy of the provided array. (only length 2)
* @param {*} arr
* @returns the array copy
*/
static unlinkArr2(arr: any): any[];
/**
* Creates a copy of the provided array. (only length 3)
* @param {*} arr
* @returns the array copy
*/
static unlinkArr3(arr: any): any[];
/**
* Creates a copy of the provided array.
* @param {[ [x, y], [x2, y2] ] | [x,y]} arr
* @returns the array copy
*/
static unlinkPositions(arr: [[x, y], [x2, y2]] | [x, y]): any[];
/**
* Rotates the provided pos around a point
* @param {[x,y]?} pos: the pos to rotate
* @param {Number?} deg: the degrees to rotate
* @param {[x,y]?} centerPos: the center pos of the rotation
* @returns the rotated pos
*/
static rotatePos(pos?: [x, y] | null, deg?: number | null, centerPos?: [x, y] | null): any[];
/**
* Scales the provided pos from a center point
* @param {[x,y]?} pos: the pos to scale
* @param {[scaleX, scaleY]?} scale: the x/y scale factors
* @param {[x,y]?} centerPos: the center pos of the scaling
* @returns the scaled pos
*/
static scalePos(pos?: [x, y] | null, scale?: [scaleX, scaleY] | null, centerPos?: [x, y] | null): any[];
/**
* Returns the center pos of the provided positions
* @param {[[x1,y1], [x2,y2]]} positions: a rectangular area defined by two corners
* @returns the center pos pos
*/
static getPositionsCenter(positions: [[x1, y1], [x2, y2]]): number[];
/**
* Returns the pythagorian distance between 2 points
* @param {Number} x1: the x value of the first point
* @param {Number} y1: the y value of the first point
* @param {Number} x2: the x value of the second point
* @param {Number} y2: the y value of the second point
* @returns the distance
*/
static getDist(x1: number, y1: number, x2: number, y2: number): number;
/**
* Returns the pythagorian distance between 2 points
* @param {Number} x1: the x value of the first point
* @param {Number} y1: the y value of the first point
* @param {Number} x2: the x value of the second point
* @param {Number} y2: the y value of the second point
* @returns the distance
*/
static getDist_pos(pos1: any, pos2: any): number;
/**
* Returns the "a", "b" and "function" values formed by a line between 2 positions
* @param {[x,y]} pos1: a point
* @param {[x,y]} pos2: another point
*/
static getLinearFn(pos1: [x, y], pos2: [x, y]): any[];
/**
* Returns the "a", "b" and "function" values formed by a line between 2 positions
* @param {Number} x1: the x value of a point
* @param {Number} y1: the y value of a point
* @param {Number} x2: the x value of another point
* @param {Number} y2: the y value of another point
*/
static getLinearFn_coords(x1: number, y1: number, x2: number, y2: number): (number | number[] | ((x: any) => number))[];
/**
* Returns the "a", "b" and "function" values of the perpendicular line
* @param {Array} linearFnResult: the results of getLinearFn()
*/
static getPerpendicularLinearFn(linearFnResult: any[]): any[];
/**
* Returns a random value in a range
* @param {[min, max]} minMax
* @returns the random clamped value
*/
static getValueFromRange(minMax: [min, max]): number;
/**
* Shallow array equals
* @param {Array} arr1
* @param {Array} arr2
* @returns whether both array are equal
*/
static arrayEquals(arr1: any[], arr2: any[]): boolean;
/**
* Adds a pos to another
* @param {[x,y]} arr1: a pos array
* @param {[x,y]} arr2: another pos array
* @returns the resulting pos array
*/
static addPos(pos1: any, pos2: any): any[];
/**
* Substracts a pos to another
* @param {[x,y]} arr1: a pos array
* @param {[x,y]} arr2: another pos array
* @returns the resulting pos array
*/
static subPos(pos1: any, pos2: any): number[];
/**
* Multiplies a pos to another
* @param {[x,y]} arr1: a pos array
* @param {[x,y]} arr2: another pos array
* @returns the resulting pos array
*/
static mulPos(pos1: any, pos2: any): number[];
/**
* Divides a pos to another
* @param {[x,y]} arr1: a pos array
* @param {[x,y]} arr2: another pos array
* @returns the resulting pos array
*/
static divPos(pos1: any, pos2: any): number[];
/**
* Pos array equals (or arr[2])
* @param {[x,y]} arr1: a pos array
* @param {[x,y]} arr2: another pos array
* @returns whether both pos array are equal
*/
static posEquals(arr1: [x, y], arr2: [x, y]): boolean;
/**
* Positions array equals
* @param {[[x1,y1], [x2,y2]]} positions1: a rectangular area defined by two corners
* @param {[[x1,y1], [x2,y2]]} positions2: another rectangular area defined by two corners
* @returns whether both positions array are equal
*/
static positionsEquals(positions1: [[x1, y1], [x2, y2]], positions2: [[x1, y1], [x2, y2]]): boolean;
/**
* Returns the interpolated number between (max) and (max - range)
* @param {Number} max: the max value to return
* @param {Number} ratio: the linear interpolation progress (0 to 1)
* @param {Number} range: defines the range of the max value to be used, inverts direction when negated
[if range=max, then (0 to max) will be used] or
[if range=max/2, only (max/2 to max) will be used] or
[if range=0, only (max to max) will be used]
*/
static mod(max: number, ratio: number, range?: number): number;
/**
* Returns converted given degrees into radians
* @param {Number} deg: the degrees
* @returns the equivalent radians
*/
static toRad(deg: number): number;
/**
* Returns converted given radians into degrees
* @param {Number} rad: the radians
* @returns the equivalent degrees
*/
static toDeg(rad: number): number;
/**
* Rounds the specied decimal number if it's close enough to its rounded value
* @param {Number} num: a decimal number
* @param {Number} acceptableDiff: the minimal difference between the given decimal number and it's rounded conterpart, for them be considered the same
* @returns The potentially adjusted number
*/
static getAcceptableDiff(num: number, acceptableDiff?: number): number;
/**
* @param {[Number|Object]} arr: array containing numbers or objects a numberic property
* @param {String?} propPath: the path of the compared value if the array is containing objects
* @returns the [min, max] values of the array
*/
static getMinMax(arr: [number | any], propPath?: string | null): number[];
/**
* Calls a function repeatedly with a delay between calls
* @param {Number} iterationCount: the number of time the callback is called
* @param {Function} callback: the function to call (i)=>
* @param {Number} delay: delay between each calls
*/
static repeatedTimeout(iterationCount: number, callback: Function, delay?: number): void;
static stackTraceLog(...logs: any[]): void;
}
export class FPSCounter {
static COMMON_REFRESH_RATES: number[];
static ABNORMAL_FLUCTUATION_THRESHOLD: number;
/**
* Allows to get the current frames per second.
* To use: either getFpsRaw for raw fps, AND/OR getFps for a smoother fps display
* @param {Number?} averageSampleSize: the sample size used to calculate the current fps average
*/
constructor(averageSampleSize: number | null);
_averageSampleSize: number;
_times: any[];
_averageSample: any[];
_maxFps: number;
/**
* Run in a loop to get how many times per seconds it runs
* @returns the current amount of times ran in a second
*/
getFpsRaw(): number;
/**
* Run in a loop to get how many times per seconds it runs
* @returns the current averaged amount of times ran in a second
*/
getFps(): number;
/**
* Compares the max acheive fps and a chart of common refresh rates. (This function only works while either 'getFpsRaw()' or 'getFps' is running in a loop)
* @param {Number?} forceFPS: if defined, returns the probable refresh rate for this fps value. Defaults to the user's max fps.
* @returns the probable refresh rate of the user or null if not enough time has passed
*/
getApproximatedUserRefreshRate(forceFPS?: number | null): number;
/**
* Tries to calculate the most stable fps based on the current amount of lag, device performance / capabilities. Results will fluctuate over time. (This function only works while 'getFps()' is running in a loop)
* @param {Boolean?} prioritizeStability: whether the recommended value prioritizes a lower but, more stable fps value over a higher, but less stable fps value
* @param {Number?} stabilityThreshold: the stability threshold used when prioritizeStability is enabled. The higher this is, the more inclined it is to return a higher fps value when close to the next fps threshold
* @returns the recommended fps value
*/
getRecommendedFPS(prioritizeStability?: boolean | null, stabilityThreshold?: number | null): number;
/**
* Runs getRecommendedFPS multiple times over a period of time to figure out what is the recommended fps value in a specific environment.
* @param {Function} resultCB: a function called once the evaluation ends, containing the recommended value and statistics. (results)=>
* @param {Number?} duration: the evalution duration in miliseconds. (The evaluation will last exactly 1 second longer than this value)
* @param {Number?} sampleCount: how many getRecommendedFPS samples to take in order to recommend a fps value
* @param {Boolean?} prioritizeStability: whether the recommended value prioritizes a lower but, more stable fps value over a higher, but less stable fps value
* @param {Number?} stabilityThreshold: the stability threshold used when prioritizeStability is enabled. The higher this is, the more inclined it is to return a higher fps value when close to the next fps threshold
*/
runRecommendedFPSEvaluation(resultCB: Function, duration?: number | null, sampleCount?: number | null, prioritizeStability?: boolean | null, stabilityThreshold?: number | null): void;
get instanceOf(): string;
get maxFps(): number;
set averageSampleSize(averageSampleSize: number);
get averageSampleSize(): number;
get fpsRaw(): number;
}
export class CanvasUtils {
static SHOW_CENTERS_DOT_ID: {};
static toggleCenter(canvas: any, shape: any, radius?: number, color?: number[]): void;
static showIntersectionPoints(canvas: any, res: any): void;
/**
* Returns true if the provided dot is the first one of the shape
* @param {Dot} dot: a Dot in a Shape
*/
static firstDotOnly(dot: Dot): boolean;
/**
* Generic function to draw an outer ring around a dot
* @param {Dot} dot: a Dot instance
* @param {RenderStyles | [r,g,b,a]} renderStyles: the style profile or color of the ring
* @param {Number?} radiusMultiplier: the ring radius is based on the dot's radius times the radius multiplier
* @param {Boolean?} forceBatching: allows to force batching even if a URL filter is defined
*/
static drawOuterRing(dot: Dot, renderStyles: RenderStyles | [r, g, b, a], radiusMultiplier?: number | null, forceBatching?: boolean | null): void;
/**
* Generic function to draw connection line between the specified dot and a sourcePos
* @param {Dot} dot: a Dot instance
* @param {Dot | [x,y]} target: a Dot instance or a pos array
* @param {RenderStyles | [r,g,b,a]} renderStyles: the style profile or color of the line
* @param {Number} radiusPaddingMultiplier: the padding around the dot based on the multiplication of its radius
* @param {Render.LINE_TYPES} lineType: the line type to use
* @param {Number?} spread: a modifier value for the default control pos generation (for bezier and quadratic curves)
* @param {Boolean?} forceBatching: allows to force batching even if a URL filter is defined
*/
static drawLine(dot: Dot, target: Dot | [x, y], renderStyles: RenderStyles | [r, g, b, a], radiusPaddingMultiplier: number, lineType: {
LINEAR: typeof Render.getLine;
QUADRATIC: typeof Render.getQuadCurve;
CUBIC_BEZIER: typeof Render.getBezierCurve;
}, spread: number | null, forceBatching: boolean | null): void;
/**
* Generic function to draw connection lines between the specified dot and all the dots in its connections property
* @param {Dot} dot: a Dot instance
* @param {RenderStyles | [r,g,b,a]} renderStyles: the style profile or color of the line
* @param {Number} radiusPaddingMultiplier: the padding around the dot based on the multiplication of its radius
* @param {Render.LINE_TYPES} lineType: the line type to use
* @param {Number?} spread: a modifier value for the default control pos generation (for bezier and quadratic curves)
* @param {Boolean?} forceBatching: allows to force batching even if a URL filter is defined
*/
static drawDotConnections(dot: Dot, renderStyles: RenderStyles | [r, g, b, a], radiusPaddingMultiplier: number, lineType: {
LINEAR: typeof Render.getLine;
QUADRATIC: typeof Render.getQuadCurve;
CUBIC_BEZIER: typeof Render.getBezierCurve;
}, spread: number | null, forceBatching: boolean | null): void;
/**
* Generic function to get a callback that can make a dot draggable and throwable. This function should only be called once, but the returned callback, every frame.
* @param {Boolean?} disableMultipleDrag: if true, disables dragging multiple objects at once
* @returns a callback to be called in the drawEffectCB of the shape containing the dot, only for the dot, and giving the following parameters: (dot, mouse, dist, ratio, pickableRadius?)=>{...}
*/
static getDraggableDotCB(disableMultipleDrag?: boolean | null): (dot: any, mouse: any, dist: any, ratio: any, pickableRadius?: number) => void;
/**
* Returns a callback allowing a dot to have a custom trail effect. This function should only be called once, but the returned callback, every frame.
* @param {Canvas} canvas: canvas instance
* @param {Dot} dot: a Dot instance
* @param {Number} length: the number of the trail elements (fake dots)
* @param {Function?} moveEffectCB: called on each movement for each trail element. (trailElement, ratio, isMoving, mouse, trailElementPos, trailElementIndex)=>
* @param {Boolean?} disableDefaultMovements: if true, disables default movements of trail elements. Useful if custom movements are defined in the "moveEffectCB"
* @returns a callback to be called in the drawEffectCB of the shape containing the dot, only for the target dot, and giving the following parameter: (mouse)=>{...}
*/
static getTrailEffectCB(canvas: Canvas, dot: Dot, length?: number, moveEffectCB?: Function | null, disableDefaultMovements?: boolean | null): (mouse: any) => void;
/**
* Returns a callback allowing an object to move between it's current pos and a pos at a specific distance. This function should only be called once, but the returned callback, every frame inside a animation callback.
* @param {_BaseObj} obj: a _BaseObj inheritor instance
* @param {[distanceX, distanceY]?} distances: the X/Y distances to move the object to
* @param {Boolean?} isAdditive: whether the pos of the object is set in a relative or absolute manner
* @returns a callback to be called by an animation
*/
static getMovementOscillatorCB(obj: _BaseObj, distances?: any, isAdditive?: boolean | null): (prog: any, i: any) => void;
/**
* Generic function to rotate the gradient of an object
* @param {_BaseObj} obj: a _BaseObj inheritor instance
* @param {Number?} duration: the duration of a full animation cycle
* @param {Number?} speed: the speed modifier of the spin
* @param {Boolean} isFillColor: whether the fillColor or the color is to spin
* @returns the created Anim instace
*/
static rotateGradient(obj: _BaseObj, duration?: number | null, speed?: number | null, isFillColor?: boolean): Anim;
/**
* Rotates the provided obj for it to face the target.
* @param {_BaseObj} obj: a _BaseObj inheritor instance
* @param {[x,y] | _BaseObj} obtargetj: a pos array or a _BaseObj inheritor instance to rotate towards
* @param {Number?} offset: the rotation offset in degrees. (facing: top=90, right=0, bottom=270, left=180)
*/
static lookAt(obj: _BaseObj, target: any, offset?: number | null): void;
/**
* Draws the minimal rectangular area fitting the provided object
* @param {Render} render: a Render instance to draw with
* @param {_BaseObj} obj: a _BaseObj inheritor instance
* @param {Color | [r,g,b,a] ?} color: the color of the outline
*/
static drawOutline(render: Render, obj: _BaseObj, color?: Color | ([r, g, b, a] | null)): void;
/**
* Draws the accurate area fitting the provided object
* @param {Render} render: a Render instance to draw with
* @param {_BaseObj} obj: a _BaseObj inheritor instance
* @param {Color | [r,g,b,a] ?} color: the color of the outline
*/
static drawOutlineAccurate(render: Render, obj: _BaseObj, color?: Color | ([r, g, b, a] | null)): void;
/**
* Draws a dot at the provided pos
* @param {Render} render: a Render instance to draw with
* @param {[x,y]} pos: the pos
* @param {Color | [r,g,b,a] ?} color: the color of the dot
* @param {Number?} radius: the radius of the dot
*/
static drawPos(render: Render, pos: [x, y], color: Color | ([r, g, b, a] | null), radius: number | null): void;
static SHAPES: {
DEBUG_SHAPE: (pos: any, dots: any) => Shape;
THROWABLE_DOT: (pos: any, radius: any, color: any) => Shape;
};
/**
* Creates a simple drawable area with mouse control, as a canvas object
* @param {Canvas} CVS: The Canvas instance to use
* @param {[[x1, y1], [x2, y2]]?} borderPositions: The two corners delimiting the draw area
* @param {RenderStyles | [r,g,b,a]?} renderStyles: The style profile / color of the drawings
* @param {Number?} newLineMoveThreshold: The number of mouse events to wait before drawing a line
* @param {Color | [r,g,b,a]?} borderColor: The color of the border
* @returns the created object and the mouse listeners ids
*/
static createDrawingBoard(CVS: Canvas, borderPositions?: [[x1, y1], [x2, y2]] | null, renderStyles?: RenderStyles | ([r, g, b, a] | null), newLineMoveThreshold?: number | null, borderColor?: Color | ([r, g, b, a] | null)): {
obj: Shape;
mouseListeners: {
click: any;
enter: any;
move: any;
};
};
/**
* Creates a blank, setup/loop only, object. Can be used to draw non objects.
* @param {Canvas} CVS: The Canvas instance to use
* @param {Function} setupCB: Function called on object's initialization. (this, this.parent)=>
* @param {Function} loopCB Function called each frame for this object (this)=>
* @returns The created empty Shape object
*/
static createEmptyObj(CVS: Canvas, setupCB: Function, loopCB: Function): Shape;
/**
* Creates a simple button
* @param {Canvas} CVS: the canvas instance to use
* @param {String?} text: the button's text
* @param {[x,y]?} pos: the center pos of the button
* @param {Function?} onClickCB: function called on button click
* @param {String | [r,g,b,a] | Color?} fillColor: the fill color of the button
* @param {String | [r,g,b,a] | Color?} textColor: the text color of the button
* @param {[paddingX, paddingY]?} padding: the vertical and horizontal padding of the button
* @param {Function?} onHoverCB: function called on button enter/leave
* @param {Boolean?} disableDefaultEffects: if true, disable all default visual effects
* @returns the button as a FilledShape and a TextDisplay: [FilledShape, TextDisplay]
*/
static createButton(CVS: Canvas, text?: string | null, pos?: [x, y] | null, onClickCB?: Function | null, fillColor?: string | [r, g, b, a] | (Color | null), textColor?: string | [r, g, b, a] | (Color | null), padding?: [paddingX, paddingY] | null, onHoverCB?: Function | null, disableDefaultEffects?: boolean | null): any[];
/**
* Provides generic follow paths
*/
static FOLLOW_PATHS: {
INFINITY_SIGN: (width: any, height: any, progressOffset: any) => (number | ((prog: any) => number[]))[][];
CIRCLE: (width: any, height: any, progressOffset: any) => (number | ((prog: any) => number[]))[][];
RECTANGLE: (width: any, height: any, progressOffset: any) => (number | ((prog: any) => any[]))[][];
QUADRATIC: (width: any, height: any, isFliped: any) => (number | ((prog: any) => number[]))[][];
LINEAR: (width: any, a: any) => (number | ((prog: any) => number[]))[][];
SINE_WAVE: (width: any, height: any) => (number | ((prog: any) => number[]))[][];
COSINE_WAVE: (width: any, height: any) => (number | ((prog: any) => number[]))[][];
RELATIVE: (forceX: any, forceY: any) => (number | ((prog: any) => any[]))[][];
};
}
export class Color {
static DEFAULT_COLOR: string;
static DEFAULT_RGBA: number[];
static DEFAULT_COLOR_VALUE: string;
static CSS_COLOR_TO_RGBA_CONVERTIONS: {
transparent: number[];
aliceblue: number[];
antiquewhite: number[];
aqua: number[];
aquamarine: number[];
azure: number[];
beige: number[];
bisque: number[];
black: number[];
blanchedalmond: number[];
blue: number[];
blueviolet: number[];
brown: number[];
burlywood: number[];
cadetblue: number[];
chartreuse: number[];
chocolate: number[];
coral: number[];
cornflowerblue: number[];
cornsilk: number[];
crimson: number[];
cyan: number[];
darkblue: number[];
darkcyan: number[];
darkgoldenrod: number[];
darkgray: number[];
darkgreen: number[];
darkkhaki: number[];
darkmagenta: number[];
darkolivegreen: number[];
darkorange: number[];
darkorchid: number[];
darkred: number[];
darksalmon: number[];
darkseagreen: number[];
darkslateblue: number[];
darkslategray: number[];
darkturquoise: number[];
darkviolet: number[];
deeppink: number[];
deepskyblue: number[];
dimgray: number[];
dodgerblue: number[];
firebrick: number[];
floralwhite: number[];
forestgreen: number[];
fuchsia: number[];
gainsboro: number[];
ghostwhite: number[];
gold: number[];
goldenrod: number[];
gray: number[];
grey: number[];
green: number[];
greenyellow: number[];
honeydew: number[];
hotpink: number[];
indianred: number[];
indigo: number[];
ivory: number[];
khaki: number[];
lavender: number[];
lavenderblush: number[];
lawngreen: number[];
lemonchiffon: number[];
lightblue: number[];
lightcoral: number[];
lightcyan: number[];
lightgoldenrodyellow: number[];
lightgray: number[];
lightgreen: number[];
lightpink: number[];
lightsalmon: number[];
lightseagreen: number[];
lightskyblue: number[];
lightslategray: number[];
lightsteelblue: number[];
lightyellow: number[];
lime: number[];
limegreen: number[];
linen: number[];
magenta: number[];
maroon: number[];
mediumaquamarine: number[];
mediumblue: number[];
mediumorchid: number[];
mediumpurple: number[];
mediumseagreen: number[];
mediumslateblue: number[];
mediumspringgreen: number[];
mediumturquoise: number[];
mediumvioletred: number[];
midnightblue: number[];
mintcream: number[];
mistyrose: number[];
moccasin: number[];
navajowhite: number[];
navy: number[];
oldlace: number[];
olive: number[];
olivedrab: number[];
orange: number[];
orangered: number[];
orchid: number[];
palegoldenrod: number[];
palegreen: number[];
paleturquoise: number[];
palevioletred: number[];
papayawhip: number[];
peachpuff: number[];
peru: number[];
pink: number[];
plum: number[];
powderblue: number[];
purple: number[];
rebeccapurple: number[];
red: number[];
rosybrown: number[];
royalblue: number[];
saddlebrown: number[];
salmon: number[];
sandybrown: number[];
seagreen: number[];
seashell: number[];
sienna: number[];
silver: number[];
skyblue: number[];
slateblue: number[];
slategray: number[];
snow: number[];
springgreen: number[];
steelblue: number[];
tan: number[];
teal: number[];
thistle: number[];
tomato: number[];
turquoise: number[];
violet: number[];
wheat: number[];
white: number[];
whitesmoke: number[];
yellow: number[];
yellowgreen: number[];
};
static RGBA_TO_CSS_COLOR_CONVERTIONS: {
"0,0,0,0": string;
"240,248,255,1": string;
"250,235,215,1": string;
"0,255,255,1": string;
"127,255,212,1": string;
"240,255,255,1": string;
"245,245,220,1": string;
"255,228,196,1": string;
"0,0,0,1": string;
"255,235,205,1": string;
"0,0,255,1": string;
"138,43,226,1": string;
"165,42,42,1": string;
"222,184,135,1": string;
"95,158,160,1": string;
"127,255,0,1": string;
"210,105,30,1": string;
"255,127,80,1": string;
"100,149,237,1": string;
"255,248,220,1": string;
"220,20,60,1": string;
"0,0,139,1": string;
"0,139,139,1": string;
"184,134,11,1": string;
"169,169,169,1": string;
"0,100,0,1": string;
"189,183,107,1": string;
"139,0,139,1": string;
"85,107,47,1": string;
"255,140,0,1": string;
"153,50,204,1": string;
"139,0,0,1": string;
"233,150,122,1": string;
"143,188,143,1": string;
"72,61,139,1": string;
"47,79,79,1": string;
"0,206,209,1": string;
"148,0,211,1": string;
"255,20,147,1": string;
"0,191,255,1": string;
"105,105,105,1": string;
"30,144,255,1": string;
"178,34,34,1": string;
"255,250,240,1": string;
"34,139,34,1": string;
"220,220,220,1": string;
"248,248,255,1": string;
"255,215,0,1": string;
"218,165,32,1": string;
"128,128,128,1": string;
"0,128,0,1": string;
"173,255,47,1": string;
"240,255,240,1": string;
"255,105,180,1": string;
"205,92,92,1": string;
"75,0,130,1": string;
"255,255,240,1": string;
"240,230,140,1": string;
"230,230,250,1": string;
"255,240,245,1": string;
"124,252,0,1": string;
"255,250,205,1": string;
"173,216,230,1": string;
"240,128,128,1": string;
"224,255,255,1": string;
"250,250,210,1": string;
"211,211,211,1": string;
"144,238,144,1": string;
"255,182,193,1": string;
"255,160,122,1": string;
"32,178,170,1": string;
"135,206,250,1": string;
"119,136,153,1": string;
"176,224,230,1": string;
"255,255,224,1": string;
"0,255,0,1": string;
"50,205,50,1": string;
"250,240,230,1": string;
"255,0,255,1": string;
"128,0,0,1": string;
"102,205,170,1": string;
"0,0,205,1": string;
"186,85,211,1": string;
"147,112,219,1": string;
"60,179,113,1": string;
"123,104,238,1": string;
"0,250,154,1": string;
"72,209,204,1": string;
"199,21,133,1": string;
"25,25,112,1": string;
"245,255,250,1": string;
"255,228,225,1": string;
"255,228,181,1": string;
"255,222,173,1": string;
"0,0,128,1": string;
"253,245,230,1": string;
"128,128,0,1": string;
"107,142,35,1": string;
"255,165,0,1": string;
"255,69,0,1": string;
"218,112,214,1": string;
"238,232,170,1": string;
"152,251,152,1": string;
"175,238,238,1": string;
"219,112,147,1": string;
"255,239,213,1": string;
"255,218,185,1": string;
"205,133,63,1": string;
"255,192,203,1": string;
"221,160,221,1": string;
"128,0,128,1": string;
"102,51,153,1": string;
"255,0,0,1": string;
"188,143,143,1": string;
"65,105,225,1": string;
"139,69,19,1": string;
"250,128,114,1": string;
"244,164,96,1": string;
"46,139,87,1": string;
"255,245,238,1": string;
"160,82,45,1": string;
"192,192,192,1": string;
"135,206,235,1": string;
"106,90,205,1": string;
"112,128,144,1": string;
"255,250,250,1": string;
"0,255,127,1": string;
"70,130,180,1": string;
"210,180,140,1": string;
"0,128,128,1": string;
"216,191,216,1": string;
"255,99,71,1": string;
"64,224,208,1": string;
"238,130,238,1": string;
"245,222,179,1": string;
"255,255,255,1": string;
"245,245,245,1": string;
"255,255,0,1": string;
"154,205,50,1": string;
};
static FORMATS: {
RGBA: string;
TEXT: string;
HEX: string;
GRADIENT: string;
PATTERN: string;
COLOR: string;
HSV: string;
};
static CONVERTABLE_FORMATS: {
RGBA: string;
TEXT: string;
HEX: string;
HSV: string;
};
static STRICT_FORMATS: {
RGBA: string;
COLOR: string;
};
static DEFAULT_TEMPERANCE: number;
static SEARCH_STARTS: {
TOP_LEFT: string;
BOTTOM_RIGHT: string;
};
static DEFAULT_SEARCH_START: string;
static DEFAULT_DECIMAL_ROUNDING_POINT: number;
static OPACITY_VISIBILITY_THRESHOLD: number;
/**
* Converts a color to another color format
* @param {String | [r,g,b,a] | Color} color: the color to convert
* @param {Color.CONVERTABLE_FORMATS} format
* @returns the color in the provided format
*/
static convertTo(color: string | [r, g, b, a] | Color, format?: {
RGBA: string;
TEXT: string;
HEX: string;
HSV: string;
}): string | [r, g, b, a] | Color;
/**
* Returns a random color value
* @param {Color.CONVERTABLE_FORMATS} outputFormat: the result's ouput format, one of CONVERTABLE_FORMATS
* @param {Boolean} randomizeAlpha: whether the alpha is also randomized, if false, alpha defaults to 1
* @param {Array} rRange: if defined, defines the min/max range to chose the r value from
* @param {Array} gRange: if defined, defines the min/max range to chose the g value from
* @param {Array} bRange: if defined, defines the min/max range to chose the b value from
* @param {Array} aRange: if defined, defines the min/max range to chose the a value from
*/
static random(outputFormat?: {
RGBA: string;
TEXT: string;
HEX: string;
HSV: string;
}, randomizeAlpha?: boolean, rRange?: any[], gRange?: any[], bRange?: any[], aRange?: any[]): string | number[] | [r, g, b, a] | Color;
static #unlinkRGBA(rgba: any): any[];
static #rgbaToHsv(rgba: any): number[];
static #hsvToRgba(hsv: any): number[];
static #rgbaToHex(rgba: any): string;
static #hexToRgba(hex: any): number[];
/**
* Returns the format of the provided color
* @param {String | [r,g,b,a] | Color} color: the color definition
*/
static getFormat(color: string | [r, g, b, a] | Color): string;
/**
* Uniquifies a color to a unique Color instance
* @param {String | [r,g,b,a] | Color} color: a color definition
* @returns a unique Color instance
*/
static uniquify(color: string | [r, g, b, a] | Color): Color;
/**
* Adds specific values to a rgba array
* @param {[r,g,b,a]} rgba: the rgba array to modify
* @param {Number?} rValue: the red value to add
* @param {Number?} gValue: the green value to add
* @param {Number?} bValue: the blue value to add
* @param {Number?} aValue: the alpha value to add
* @returns an updated rgba array
*/
static rgbaAdd(rgba: [r, g, b, a], rValue?: number | null, gValue?: number | null, bValue?: number | null, aValue?: number | null): number[];
/**
* Adds a value to a each value of a rgba array (except alpha)
* @param {[r,g,b,a]} rgba: the rgba array to modify
* @param {Number?} value: the value to add
* @returns an updated rgba array
*/
static rgbaAddAll(rgba: [r, g, b, a], value?: number | null): any[];
/**
* Sets specific values of a rgba array
* @param {[r,g,b,a]} rgba: the rgba array to modify
* @param {Number?} rValue: the new red value
* @param {Number?} gValue: the new green value
* @param {Number?} bValue: the new blue value
* @param {Number?} aValue: the new alpha value
* @returns an updated rgba array
*/
static rgbaSet(rgba: [r, g, b, a], rValue: number | null, gValue: number | null, bValue: number | null, aValue: number | null): number[];
/**
* Updates a rgba array by hsv modifications
* @param {[r,g,b,a]} rgba: the rgba array to modify
* @param {Number?} hueValue: the hue value to add
* @param {Number?} saturationValue: the saturation value to add
* @param {Number?} brightnessValue: the brightness value to add
* @returns an updated rgba array
*/
static rgbaHsvAdd(rgba: [r, g, b, a], hueValue: number | null, saturationValue: number | null, brightnessValue: number | null): number[];
/**
* Formats a rgba array to a usable rgba value
* @param {[r,g,b,a]} rgba: the rgba array to format
* @returns a string containing the color as rgba format
*/
static formatRgba(rgba: [r, g, b, a]): string;
/**
* Creates an rgba array
* @param {Number?} r: a number between 0 and 255 that represents the red value
* @param {Number?} g: a number between 0 and 255 that represents the green value
* @param {Number?} b: a number between 0 and 255 that represents the blue value
* @param {Number?} a: a number between 0 and 1 that represents the opacity
* @returns the created rgba array
*/
static rgba(r?: number | null, g?: number | null, b?: number | null, a?: number | null): number[];
/**
* Returns the usable value of a color from any supported format
* @param {String | [r,g,b,a] | Color} color: the color definition
*/
static getColorValue(color: string | [r, g, b, a] | Color): any;
/**
* Returns the first pos where the provided color is found in the canvas
* @param {Canvas} canvas: Canvas instance
* @param {Color} color: Color instance
* @param {Boolean} useAlpha: Whether the search considers opacity
* @param {Number} temperance: The validity margin for the r,g,b,a values
* @param {SEARCH_STARTS} searchStart: Direction from which the search starts
* @param {[width, height]} areaSize: The search area. (Defaults to the canvas size)
* @returns The found pos [x,y] or null if nothing was found
*/
static findFirstPos(canvas: Canvas, color: Color, useAlpha?: boolean, temperance?: number, searchStart?: SEARCH_STARTS, areaSize?: any): number[];
/**
* Represents a color value
* @param {String | [r,g,b,a] | Color} color: the color definition
* @param {Boolean?} isChannel: if true, this Color will be used as a channel and will not duplicate
*/
constructor(color: string | [r, g, b, a] | Color, isChannel?: boolean | null);
_color: string | [r, g, b, a];
_format: string;
_isChannel: boolean;
/**
* Converts a color to another color format
* @param {String | [r,g,b,a] | Color} color: the color to convert
* @param {Color.CONVERTABLE_FORMATS} format
* @returns the color in the provided format
*/
convertTo(color?: string | [r, g, b, a] | Color, format?: {
RGBA: string;
TEXT: string;
HEX: string;
HSV: string;
}): string | [r, g, b, a] | Color;
/**
* Returns a new instance of the same color
* @param {[pos1, pos2]} dynamicColorPositions: the positions if the color is a _DynamicColor instance
*/
duplicate(dynamicColorPositions: [pos1, pos2]): Color;
toString(): any;
get instanceOf(): string;
set color(color: any);
get color(): any;
get colorRaw(): string | [r, g, b, a];
get isChannel(): boolean;
set rgba(rgba: any);
get rgba(): any;
get hsv(): any;
set r(r: any);
get r(): any;
set g(g: any);
get g(): any;
set b(b: any);
get b(): any;
set a(a: any);
get a(): any;
set hue(hue: any);
get hue(): any;
set saturation(saturation: any);
get saturation(): any;
set brightness(brightness: any);
get brightness(): any;
#private;
}
export class _HasColor {
/**
* Abstract class, provides color attributes to other classes
* @param {String | [r,g,b,a] | Color | Function} color: the color definition
*/
constructor(color: string | [r, g, b, a] | Color | Function);
_initColor: string | Function | [r, g, b, a] | Color;
_color: string | Function | [r, g, b, a] | Color;
getInitColor(): any;
get instanceOf(): string;
get colorObject(): string | Function | [r, g, b, a] | Color;
get colorRaw(): any;
set color(color: any);
get color(): any;
set initColor(initColor: string | Function | [r, g, b, a] | Color);
get initColor(): string | Function | [r, g, b, a] | Color;
get rgba(): any;
set r(r: any);
get r(): any;
set g(g: any);
get g(): any;
set b(b: any);
get b(): any;
set a(a: any);
get a(): any;
get hsv(): any;
set hue(hue: any);
get hue(): any;
set saturation(saturation: any);
get saturation(): any;
set brightness(brightness: any);
get brightness(): any;
}
export class GridAssets {
static D: {
places: any[];
};
static DEFAULT_SOURCE: {
width: number;
height: number;
A: any[][];
B: any[][];
C: any[][];
D: any[][];
E: any[][];
F: any[][];
G: any[][];
H: any[][];
I: any[][];
J: any[][];
K: any[][];
L: any[][];
M: any[][];
N: any[][];
O: any[][];
P: any[][];
Q: any[][];
R: any[][];
S: any[][];
T: any[][];
U: any[][];
V: any[][];
W: any[][];
X: any[][];
Y: any[][];
Z: any[][];
a: any[][];
b: any[][];
c: any[][];
d: any[][];
e: any[][];
f: any[][];
g: any[][];
h: any[][];
i: any[][];
j: any[][];
k: any[][];
l: any[][];
m: any[][];
n: any[][];
o: any[][];
p: any[][];
q: any[][];
r: any[][];
s: any[][];
t: any[][];
u: any[][];
v: any[][];
w: any[][];
x: any[][];
y: any[][];
z: any[][];
"!": any[][];
"?": any[][];
"@": any[][];
"#": any[][];
$: any[][];
"%": any[][];
"^": any[][];
"&": any[][];
"*": any[][];
"(": any[][];
")": any[][];
"{": any[][];
"}": any[][];
",": any[][];
".": any[][];
"+": any[][];
_: any[][];
"-": any[][];
"=": any[][];
";": any[][];
":": any[][];
"[": any[][];
"]": any[][];
"'": any[][];
"|": any[][];
"/": any[][];
"\\": any[][];
"0": any[][];
"1": any[][];
"2": any[][];
"3": any[][];
"4": any[][];
"5": any[][];
"6": any[][];
"7": any[][];
"8": any[][];
"9": any[][];
};
static get fontSource5x5(): {
width: number;
height: number;
A: any[][];
B: any[][];
C: any[][];
D: any[][];
E: any[][];
F: any[][];
G: any[][];
H: any[][];
I: any[][];
J: any[][];
K: any[][];
L: any[][];
M: any[][];
N: any[][];
O: any[][];
P: any[][];
Q: any[][];
R: any[][];
S: any[][];
T: any[][];
U: any[][];
V: any[][];
W: any[][];
X: any[][];
Y: any[][];
Z: any[][];
a: any[][];
b: any[][];
c: any[][];
d: any[][];
e: any[][];
f: any[][];
g: any[][];
h: any[][];
i: any[][];
j: any[][];
k: any[][];
l: any[][];
m: any[][];
n: any[][];
o: any[][];
p: any[][];
q: any[][];
r: any[][];
s: any[][];
t: any[][];
u: any[][];
v: any[][];
w: any[][];
x: any[][];
y: any[][];
z: any[][];
"!": any[][];
"?": any[][];
"@": any[][];
"#": any[][];
$: any[][];
"%": any[][];
"^": any[][];
"&": any[][];
"*": any[][];
"(": any[][];
")": any[][];
"{": any[][];
"}": any[][];
",": any[][];
".": any[][];
"+": any[][];
_: any[][];
"-": any[][];
"=": any[][];
";": any[][];
":": any[][];
"[": any[][];
"]": any[][];
"'": any[][];
"|": any[][];
"/": any[][];
"\\": any[][];
"0": any[][];
"1": any[][];
"2": any[][];
"3": any[][];
"4": any[][];
"5": any[][];
"6": any[][];
"7": any[][];
"8": any[][];
"9": any[][];
};
}
export class TypingDevice {
static KEYS: {
A: string;
B: string;
C: string;
D: string;
E: string;
F: string;
G: string;
H: string;
I: string;
J: string;
K: string;
L: string;
M: string;
N: string;
O: string;
P: string;
Q: string;
R: string;
S: string;
T: string;
U: string;
V: string;
W: string;
X: string;
Y: string;
Z: string;
DIGIT_0: string;
DIGIT_1: string;
DIGIT_2: string;
DIGIT_3: string;
DIGIT_4: string;
DIGIT_5: string;
DIGIT_6: string;
DIGIT_7: string;
DIGIT_8: string;
DIGIT_9: string;
SPACE: string;
ENTER: string;
TAB: string;
BACKSPACE: string;
ESCAPE: string;
SHIFT: string;
CONTROL: string;
ALT: string;
ALT_GRAPH: string;
META: string;
CAPS_LOCK: string;
CONTEXT_MENU: string;
ARROW_UP: string;
ARROW_DOWN: string;
ARROW_LEFT: string;
ARROW_RIGHT: string;
HOME: string;
END: string;
PAGE_UP: string;
PAGE_DOWN: string;
INSERT: string;
DELETE: string;
F1: string;
F2: string;
F3: string;
F4: string;
F5: string;
F6: string;
F7: string;
F8: string;
F9: string;
F10: string;
F11: string;
F12: string;
F13: string;
F14: string;
F15: string;
F16: string;
F17: string;
F18: string;
F19: string;
F20: string;
F21: string;
F22: string;
F23: string;
F24: string;
NUMP