@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
126 lines (125 loc) • 4.57 kB
TypeScript
import * as PIXI from 'pixi.js';
/**
* @description Utility class that draws a grid on the screen.
* @extends PIXI.Graphics
*/
export declare class GridHelper extends PIXI.Graphics {
private _cellSize;
private _correctedWidth;
private _gridWidth;
private _useCorrectedWidth;
private _drawBoundaries;
private _amtLines?;
/**
* @param {number} cellSize number. Optional. default: the square root of the grid's side length
*/
set cellSize(cellSize: number);
get cellSize(): number;
/**
* The amount of equally spaced lines along the grid's side.
*/
get amtLines(): number;
/**
* The coordinates for each corner of the grid.
* The leftmost (**x1**), topmost (**y1**), rightmost (**x2**), and bottommost (**y2**) coordinates.
*/
get bounds(): {
x1: number;
y1: number;
x2: number;
y2: number;
};
set drawBoundaries(drawBoundaries: boolean);
get drawBoundaries(): boolean;
/**
* The requested width of the grid given by the `width` constructor parameter.
*/
get originalWidth(): number;
/**
* The corrected width of the grid, which is the smallest square root number larger than
* the corrected width.
*/
get correctedWidth(): number;
get useCorrectedWidth(): boolean;
/**
* The actual width of the grid.
* When the `cellSize` is not the default, the width of the grid will be the
* width given in the `width` constructor. Otherwise, it is the corrected width.
*/
get gridWidth(): number;
/**
*
* @param {number} width number. Required.
*
* The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If
* not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width,
* which is the smallest perfect square greater than `width`.
*
* @param {number} cellSize number, null. Optional, default: square root of corrected width
*
* The size of each cell in the grid.
* If the value is **null**, the grid will use the default value.
*
* @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional.
*
* default:
* **{
* width: 1,
* color: 0xffffff,
* alpha: 1,
* alignment: 0.5,
* native: true
* }**
*
* Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class.
*
* @param {boolean} useCorrectedWidth boolean. Optional. default: **true**
* If **true**, the grid will use the smallest perfect square greater than `width`.
* Otherwise, the grid will use the exact value given by `width`.
*
* @param {boolean} drawBoundaries boolean. Optional. default: **true**
* If **true**, the grid will draw its boundaries.
* Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected.
*/
constructor(width?: number, cellSize?: number, lineConfig?: null, useCorrectedWidth?: boolean, drawBoundaries?: boolean);
/**
* Draws the grid to the containing PIXI stage
*/
drawGrid(): this;
/**
* Clears the grid from the containing PIXI stage.
*
* @param {boolean} retainLineStyle Optional, default: **true**
*
* When **true**, the configuration for the line style object is preserved.
* Otherwise, the object's line style will revert to the defaults specified by the `PIXI.Graphics` object.
*/
clearGrid(retainLineStyle?: boolean): this | undefined;
/**
* Transforms global coordinates to grid coordinates.
* @param {number} x
* The global X coordinate.
*
* @param {number} y
* The global Y coordinate.
*/
getCellCoordinates(x: any, y: any): {
x: number;
y: number;
};
/**
* Callback fired after detecting a mousemove event.
*
* @param {PIXI.InteractionData} evt
* The `PIXI.InteractionData` captured by the event.
*
* @param {{x: number, y: number}} gridCoords
* The grid-level coordinates captured by the event.
*/
onMousemove(evt: any, gridCoords: any): void;
/**
* Calculates the corrected width. If the `useCorrectedWidth` constructor parameter is set to **false**,
* then it simply keeps the given value for `width` as the corrected width.
*/
_correctWidth(): void;
}