@playcanvas/pcui/types/components/GradientPicker/index.d.ts

User interface component library for the web

import { Canvas } from '../Canvas';
import { Element, ElementArgs } from '../Element';
import { NumericInput } from '../NumericInput';
import { Panel } from '../Panel';
import { TextInput } from '../TextInput';
/**
 * The arguments for the {@link GradientPicker} constructor.
 */
interface GradientPickerArgs extends ElementArgs {
    /**
     * If `true`, the picker will render changes to the gradient as they happen. Defaults to `true`.
     */
    renderChanges?: boolean;
    /**
     * An array of 4 integers containing the RGBA values the picker should be initialized to.
     */
    value?: number[];
    /**
     * Number of color channels. Defaults to 3. Changing to 4 adds the option to change the alpha value.
     */
    channels?: number;
}
/**
 * Represents a gradient picker.
 */
declare class GradientPicker extends Element {
    protected _canvas: Canvas;
    protected _checkerboardPattern: CanvasPattern;
    protected _resizeInterval: number;
    protected _panel: Panel;
    protected _colorRect: Canvas;
    protected _colorHandle: HTMLDivElement;
    protected _hueRect: Canvas;
    protected _hueHandle: HTMLDivElement;
    protected _alphaRect: Canvas;
    protected _alphaHandle: HTMLDivElement;
    protected _fields: HTMLDivElement;
    protected _rField: NumericInput;
    protected _gField: NumericInput;
    protected _bField: NumericInput;
    protected _aField: NumericInput;
    protected _hexField: TextInput;
    protected _hsva: number[];
    protected _storeHsva: number[];
    protected _dragMode: number;
    protected _changing: boolean;
    protected _copiedData: any;
    protected _channels: number;
    protected _value: {
        type: number;
        keys: any[];
        betweenCurves: boolean;
    };
    protected _evtPickerChanged: any;
    protected _evtRefreshPicker: any;
    protected renderChanges: boolean;
    protected Helpers: any;
    protected CONSTANTS: any;
    protected UI: any;
    protected STATE: any;
    protected fieldChangeHandler: (evt: any) => void;
    protected hexChangeHandler: (evt: any) => void;
    protected downHandler: (evt: any) => void;
    protected moveHandler: (evt: any) => void;
    protected upHandler: (evt: any) => void;
    /**
     * Creates a new GradientPicker.
     *
     * @param args - The arguments. Extends the Element arguments. Any settable property can also
     * be set through the constructor.
     */
    constructor(args?: Readonly<GradientPickerArgs>);
    destroy(): void;
    protected _createCheckerboardPattern(context: CanvasRenderingContext2D): CanvasPattern;
    protected _onKeyDown: (evt: KeyboardEvent) => void;
    protected _onFocus: (evt: FocusEvent) => void;
    protected _onBlur: (evt: FocusEvent) => void;
    protected _getDefaultValue(): {
        type: number;
        keys: any[];
        betweenCurves: boolean;
    };
    protected _openGradientPicker(): void;
    protected _onPickerChange(paths: string[], values: any[]): void;
    protected _renderGradient(): void;
    focus(): void;
    blur(): void;
    set channels(value: number);
    get channels(): number;
    set value(value: {
        type: number;
        keys: any[];
        betweenCurves: boolean;
    });
    get value(): {
        type: number;
        keys: any[];
        betweenCurves: boolean;
    };
    set values(values: any);
    protected _generateHue(canvas: Canvas): void;
    protected _generateAlpha(canvas: Canvas): void;
    protected _generateGradient(canvas: Canvas, clr: number[]): void;
    protected _onFieldChanged(): void;
    protected _onHexChanged(): void;
    protected _onMouseDown(evt: MouseEvent): void;
    protected _onMouseMove(evt: MouseEvent): void;
    protected _onMouseUp(evt: MouseEvent): void;
    set hsva(hsva: number[]);
    get hsva(): number[];
    set color(clr: any);
    get color(): any;
    set editAlpha(editAlpha: any);
    get editAlpha(): any;
    open(): void;
    close(): void;
    onOpen(): void;
    onClose(): void;
    onDeleteKey(): void;
    protected _onTypeChanged(value: number): void;
    render(): void;
    renderGradient(): void;
    renderAnchors(): void;
    renderAnchor(ctx: CanvasRenderingContext2D, time: number, type?: string): void;
    evaluateGradient(time: number, alphaOverride?: number): any;
    calcAnchorTimes(): any;
    calcNormalizedCoord(x: number, y: number, rect: DOMRect): number[];
    getClientRect(element: any): DOMRect;
    protected _onAnchorsMouseDown: (e: MouseEvent) => void;
    protected _onAnchorsMouseMove: (e: MouseEvent) => void;
    protected _onAnchorsMouseUp: (evt: MouseEvent) => void;
    selectHovered(index: number): void;
    selectAnchor(index: number): void;
    dragStart(): void;
    dragUpdate(time: any): void;
    dragEnd(): void;
    insertAnchor(time: number, color: any[]): void;
    deleteAnchor(time: any): void;
    moveSelectedAnchor(time: any): void;
    colorSelectedAnchor(clr: any[], dragging?: any): void;
    emitCurveChange(): void;
    doCopy(): void;
    doPaste(): void;
    doDelete(): void;
    createCheckerPattern(): CanvasPattern;
    setValue(value: any, args?: any): void;
    callOpenGradientPicker(value: any, args?: any): void;
    getGradientPickerRect(): any;
    positionGradientPicker(x: number, y: number): void;
    setGradientPicker(value: any, args?: any): void;
}
export { GradientPicker, GradientPickerArgs };