react-pixi-plot/dist/InteractionManager.d.ts

A React component rendering a zoomable and draggable PIXI.js scene. Intended to render 2d plots

import React from 'react';
import { SelectEvent, HoverEvent } from './types';
import * as PIXI from 'pixi.js';
export interface Props {
    pixiInteractionManager?: PIXI.interaction.InteractionManager;
    children: JSX.Element;
    /**
     * This callback is invoked whenever the user clicks or brushes on the visualization.
     */
    onSelect: (e: SelectEvent) => void;
    /**
     * This callback is invoked whenever the user hovers on the visualization, or while brushing.
     */
    onHover: (e: HoverEvent) => void;
    onPan: (from: PIXI.Point, to: PIXI.Point) => void;
    onZoom: (factor: number, mousePosition: PIXI.Point) => void;
    plotSize: {
        width: number;
        height: number;
    };
}
export default class InteractionManager extends React.PureComponent<Props> {
    panAnchorPoint?: PIXI.Point;
    selectStart?: PIXI.Point;
    addToSelection?: boolean;
    removeFromSelection?: boolean;
    pinchDistance?: number;
    /**
     * A simple distance calculation between two cartesian objects with x and y parameters.
     * @method
     * @param {object} a The first cartesian point.
     * @param {object} b The second cartesian point.
     * @returns {number} The magnitude of the linear distance between a and b.
     */
    distance: (a: PIXI.Point, b: PIXI.Point) => number;
    /**
     * Sets DOM body style pointerEvents to 'none' to prevent global mouse events. Paired with {@link InteractionManager#restoreGlobalMouseEvents|restoreGlobalMouseEvents}.
     * @method
     * @returns {undefined}
     */
    preventGlobalMouseEvents: () => void;
    /**
     * Sets DOM body style pointerEvents to 'auto' to restore global mouse events. Paired with {@link InteractionManager#preventGlobalMouseEvents|preventGlobalMouseEvents}.
     * @method
     * @returns {undefined}
     */
    restoreGlobalMouseEvents: () => void;
    /**
     * Handles all mouse down events.
     * When using the left mouse button checks if shift or control keys (e.shiftKey, e.ctrlKey booleans) are pressed to know if a selection add or remove is occuring.
     * When using the right mouse button performs a pan of the visualization.
     * @method
     * @param {object} e The mouse down event.
     * @returns {undefined}
     */
    handleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
    /**
     * @todo stop the preventDefault for contextmenu event listener from preventing right clicking in the entire Lodestone application.
     * Isolates mouse events to the visualization by adding event listeners and preventing mouse defaults and event propagation. Handles cancelling the right mouse context menu.
     * @method
     * @param {object} e The mouse event.
     * @returns {undefined}
     */
    captureMouseEvents: (e: MouseEvent) => void;
    /**
     * Handles mouse button release. Restores event listeners that were removed during {@link PixiVisualization#captureMouseEvents|captureMouseEvents},
     * enables holding shift and selecting more points, and removing points from selections with the right mouse button.
     * @method
     * @param {object} e The mouse up event.
     * @returns {undefined}
     */
    mouseUpListener: (e: MouseEvent) => void;
    handleTouchStart: (e: React.TouchEvent<HTMLDivElement>) => void;
    handleTouchEnd: (e: React.TouchEvent<HTMLDivElement>) => void;
    handleTouchMove: (e: React.TouchEvent<HTMLDivElement>) => void;
    /**
     * Handles mouse movement events. If a selection has already been started this handles expanding the selection, and handles panning to the new position if a pan is occuring.
     * @method
     * @param {object} e The mouse move event.
     * @returns {undefined}
     */
    mouseMoveListener: (e: MouseEvent) => void;
    /**
     * Handles keeping the mouse within the canvas if a mouse-based interaction is occuring.
     * @method
     * @param {object} mousePosition Where the mouse is currently.
     * @returns {object} Where we have constrained the mouse to be.
     */
    constrainMousePosition: (mousePosition: PIXI.Point) => PIXI.Point;
    /**
     * Handles moving the mouse. Determines the mouse's position and if the ctrl key isn't pressed we hover the data under the mouse cursor.
     * @method
     * @param {object} e The mouse move event.
     * @returns {undefined}
     */
    handleMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
    /**
     * Handles whenever someone scrolls the mouse wheel. We generate the zoom factor, and prevent the website from reacting normally to a mouse scroll (scolling down the page).
     * @method
     * @param {object} e The mouse wheel event.
     * @returns {undefined}
     */
    handleWheel: (e: React.WheelEvent<HTMLDivElement>) => void;
    /**
     * Correlates clicks on the renderer that happen in screen space coordinates to renderer coordinates. Used to understand where the mouse event occurred inside the renderer.
     * @method
     * @param {MouseEvent} mouseEvent The mouse event.
     * @returns {PIXI.Point} The Point object containing the coordinates of the mouse, in the renderer's coordinates system.
     */
    eventRendererPosition(mouseEvent: MouseEvent | React.MouseEvent<HTMLDivElement> | React.Touch): PIXI.Point;
    render(): React.ReactElement<any>;
}