UNPKG

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
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