dotting
Version:
Dotting is a pixel art editor component library for react
79 lines (78 loc) • 3.1 kB
TypeScript
import { BaseLayer } from "./BaseLayer";
import { ButtonDirection } from "./config";
import { ButtonDimensions, Coord } from "./types";
export default class GridLayer extends BaseLayer {
private columnCount;
private rowCount;
private isGridVisible;
private isGridFixed;
private gridStrokeColor;
private gridStrokeWidth;
private gridSquareLength;
private buttonHeight;
private buttonMargin;
private extendArrowPadding;
private hoveredButton;
private topButtonDimensions;
private bottomButtonDimensions;
private leftButtonDimensions;
private rightButtonDimensions;
private topLeftButtonDimensions;
private topRightButtonDimensions;
private bottomLeftButtonDimensions;
private bottomRightButtonDimensions;
constructor({ columnCount, rowCount, canvas, }: {
columnCount: number;
rowCount: number;
canvas: HTMLCanvasElement;
});
setColumnCount(columnCount: number): void;
setRowCount(rowCount: number): void;
setIsGridVisible(isGridVisible: boolean): void;
getIsGridVisible(): any;
setIsGridFixed(isGridFixed: boolean): void;
getIsGridFixed(): boolean;
getHoveredButton(): ButtonDirection;
setGridStrokeColor(gridStrokeColor: string): void;
setGridSquareLength(gridSquareLength: number): void;
getGridStrokeColor(): string;
setGridStrokeWidth(gridStrokeWidth: number): void;
getGridStrokeWidth(): number;
setHoveredButton(hoveredButton: ButtonDirection | null): void;
getButtonsDimensions(): {
top: ButtonDimensions;
bottom: ButtonDimensions;
left: ButtonDimensions;
right: ButtonDimensions;
topLeft: ButtonDimensions;
topRight: ButtonDimensions;
bottomLeft: ButtonDimensions;
bottomRight: ButtonDimensions;
};
findLeftTopPosForButton(direction: ButtonDirection, buttonWidth: number, buttonHeight: number, gridLeftTopWorldPos: Coord): {
worldPos: Coord;
screenPos: import("../../utils/types").Coord;
};
drawRightButton(color: string, gridTopLeftCornerPos: Coord): void;
drawLeftButton(color: string, gridTopLeftCornerPos: Coord): void;
drawTopButton(color: string, gridTopLeftCornerPos: Coord): void;
drawBottomButton(color: string, gridTopLeftCornerPos: Coord): void;
drawDiagonalButtons(color: string, direction: ButtonDirection, gridTopLeftCornerPos: Coord): void;
drawSurroundingDashedLines(correctedLefTopScreenPoint: Coord): void;
drawCircleButtonAlongDashedLine(correctedLefTopScreenPoint: Coord): void;
drawButtons(gridTopLeftCornerPos: Coord): void;
renderSelection(area: {
startWorldPos: Coord;
endWorldPos: Coord;
}): void;
/**
* Grid Layer render will be called when:
* 1. isGridFixed is changed
* 2. isGridVisible is changed
* 3. gridStrokeColor is changed
* 4. gridStrokeWidth is changed
* 5. panZoom is changed
* @returns {void}
*/
render(): void;
}