dotting/build/src/components/Canvas/InteractionLayer.d.ts

Dotting is a pixel art editor component library for react

import { BaseLayer } from "./BaseLayer";
import { ButtonDirection, UserId } from "./config";
import { BRUSH_PATTERN_ELEMENT, ColorChangeItem, Coord, DottingData, GridIndices, PixelModifyItem, SelectAreaRange } from "./types";
import { PixelChangeRecords } from "../../helpers/PixelChangeRecords";
import { Index } from "../../utils/types";
export default class InteractionLayer extends BaseLayer {
    private strokedPixelRecords;
    private erasedPixelRecords;
    private tempStrokedPixels;
    private indicatorPixels;
    private dataLayerRowCount;
    private dataLayerColumnCount;
    private backgroundColor;
    private defaultPixelColor;
    private backgroundMode;
    private selectingArea;
    private brushPattern;
    private selectedArea;
    private directionToExtendSelectedArea;
    private movingSelectedArea;
    private movingSelectedPixels;
    private extendingSelectedArea;
    private extendingSelectedPixels;
    private capturedBaseExtendingSelectedArea;
    private capturedBaseExtendingSelectedAreaPixels;
    private selectedAreaPixels;
    private capturedData;
    private capturedDataOriginalIndices;
    private hoveredPixel;
    private previewPoints;
    private gridSquareLength;
    constructor({ columnCount, rowCount, canvas, }: {
        columnCount: number;
        rowCount: number;
        canvas: HTMLCanvasElement;
    });
    getCapturedData(): DottingData;
    getDirectionToExtendSelectedArea(): ButtonDirection;
    getCapturedDataOriginalIndices(): GridIndices;
    getBrushPattern(): BRUSH_PATTERN_ELEMENT[][];
    setPreviewPoints(points: Array<{
        rowIndex: number;
        columnIndex: number;
    }> | null): void;
    setBrushPattern(pattern: Array<Array<BRUSH_PATTERN_ELEMENT>>): void;
    setGridSquareLength(length: number): void;
    setDefaultPixelColor(color: string): void;
    setDataLayerColumnCount(columnCount: number): void;
    setDataLayerRowCount(rowCount: number): void;
    setDirectionToExtendSelectedArea(direction: ButtonDirection | null): void;
    setSelectedArea(area: SelectAreaRange | null): void;
    setSelectingArea(area: Omit<SelectAreaRange, "startPixelIndex" | "endPixelIndex"> | null): void;
    setMovingSelectedPixels(pixels: Array<ColorChangeItem> | null): void;
    setMovingSelectedArea(area: SelectAreaRange | null): void;
    setExtendingSelectedPixels(pixels: Array<ColorChangeItem | null> | null): void;
    setExtendingSelectedArea(area: SelectAreaRange | null): void;
    setSelectedAreaPixels(pixelArray: Array<ColorChangeItem>): void;
    setBackgroundColor(color: string): void;
    setCapturedData(gridChangeStartCapturedData: DottingData): void;
    setCapturedBaseExtendingSelectedArea(capturedBaseExtendingSelectedArea: SelectAreaRange | null): void;
    setCapturedBaseExtendingSelectedAreaPixels(capturedBaseExtendingSelectedAreaPixels: Array<ColorChangeItem> | null): void;
    resetCapturedData(): void;
    getPreviewPoints(): {
        rowIndex: number;
        columnIndex: number;
    }[];
    getHoveredPixel(): {
        rowIndex: number;
        columnIndex: number;
        color: string;
    };
    getMovingSelectedPixels(): ColorChangeItem[];
    getMovingSelectedArea(): SelectAreaRange;
    getExtendingSelectedArea(): SelectAreaRange;
    getExtendingSelectedPixels(): ColorChangeItem[];
    setHoveredPixel(hoveredPixel: {
        rowIndex: number;
        columnIndex: number;
        color: string;
    } | null): void;
    getSelectingArea(): Omit<SelectAreaRange, "startPixelIndex" | "endPixelIndex">;
    getSelectedArea(): SelectAreaRange;
    getSelectedAreaPixels(): ColorChangeItem[];
    getStrokedPixelRecords(): Map<string, PixelChangeRecords>;
    getEffectiveStrokePixelChanges(userId: UserId): ColorChangeItem[];
    getErasedPixelRecords(): Map<string, PixelChangeRecords>;
    getEffectiveEraserPixelChanges(userId: UserId): ColorChangeItem[];
    getIndicatorPixels(): PixelModifyItem[];
    detectSelectedAreaExtendDirection(coord: Coord): ButtonDirection | null;
    extendSelectedAreaSideWays(direction: ButtonDirection, extendToCoord: Coord, isAltPressed: boolean): void;
    extendSelectedAreaDiagonally(direction: ButtonDirection, extendToCoord: Coord, isAltPressed: boolean): void;
    extendSelectedArea(direction: ButtonDirection, extendToCoord: Coord, isAltPressed: boolean): void;
    extendCapturedData(direction: ButtonDirection): void;
    shortenCapturedData(direction: ButtonDirection): boolean;
    setIndicatorPixels(indicatorPixels: Array<PixelModifyItem>): void;
    /**
     * In the interaction layer,
     * This will only collect information of presence updating information
     * @param userId User id of the user who is changing the dimension
     * (the user of the current device will have id "current-device-user-id"
     * @param dimensionChangeRecord
     */
    addToStrokePixelRecords(userId: UserId, pixelItem: ColorChangeItem): void;
    getAllStrokePixels(): ColorChangeItem[];
    addToErasedPixelRecords(userId: UserId, pixelItem: ColorChangeItem): void;
    getAllErasedPixels(): ColorChangeItem[];
    deleteErasedPixelRecord(userId: UserId): void;
    deleteStrokePixelRecord(userId: UserId): void;
    colorPixels(data: Array<PixelModifyItem>): void;
    erasePixels(data: Array<{
        rowIndex: number;
        columnIndex: number;
    }>): void;
    renderStrokedPixels(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    renderErasedPixels(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    renderMovingSelectedPixels(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    renderExtendingSelectedPixels(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    /**
     * @description While user is extending the pixel canvas,
     *              this function hides the datalayer with background color when canvas is shrinked
     *              or notifies the extended area with DefaultPixelColor when canvas is extended
     * @param correctedLeftTopScreenPoint The left top point of the canvas
     * @param squareLength The length of the square
     * @returns void
     */
    renderCanvasMask(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    renderIndicatorPixels(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    renderHoveredPixel(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    getLinePoints(startPoint: Coord, endPoint: Coord, currentData: DottingData): Array<{
        rowIndex: number;
        columnIndex: number;
    }>;
    getRectanglePoints(startPoint: Coord, endPoint: Coord, currentData: DottingData, filled: boolean): Array<{
        rowIndex: number;
        columnIndex: number;
    }>;
    getEllipsePoints(startPoint: Coord, endPoint: Coord, currentData: DottingData, filled: boolean): Array<{
        rowIndex: number;
        columnIndex: number;
    }>;
    drawLine(startPoint: Coord, endPoint: Coord, color: string, currentData: DottingData): void;
    drawRectangle(startPoint: Coord, endPoint: Coord, color: string, currentData: DottingData, filled: boolean): void;
    drawEllipse(startPoint: Coord, endPoint: Coord, color: string, currentData: DottingData, filled: boolean): void;
    protected drawPoints(points: Index[], color: any, currentData: DottingData): void;
    renderPreviewPoints(correctedLeftTopScreenPoint: Coord, squareLength: number): void;
    /**
     * Interaction Layer render will be called when:
     * 1. The canvas is resized
     * 2. The canvas is panned or zoomed
     * 3. The canvas is mouse clicked or touched
     * 4. The pixel grid is hovered
     * 5. The indicator pixel changes
     */
    render(): void;
}