react-mapping
Version:
A react library for projection mapping
47 lines (46 loc) • 1.58 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
export interface Props {
style?: React.CSSProperties;
className?: string;
isEditMode?: boolean;
x?: number;
y?: number;
anchorStyle?: React.CSSProperties;
anchorClassName?: string;
}
export interface Context {
isEditMode: boolean;
}
export interface State {
matrix: Matrix3d;
translateDelta: {
[key: string]: Vector;
};
sourcePoints?: RectPoints;
transformOrigin: Vector;
containerTranslate: Vector;
}
export declare type Anchor = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
export declare type Matrix3d = [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number];
export declare type RectPoints = [Vector, Vector, Vector, Vector];
export declare type Vector = [number, number];
export declare class Layer extends React.Component<Props, State> {
container: HTMLElement | null;
layerTranslateDelta: Vector | undefined;
anchorTranslateDelta: Vector | undefined;
isAnchorDragging: boolean;
targetPoints: RectPoints;
anchorMoving: Anchor | undefined;
state: State;
componentWillMount(): void;
componentDidMount(): void;
componentWillUnmount(): void;
onAnchorMouseDown: (evt: any, position: any) => void;
onAnchorMouseMove: (evt: any) => void;
onAnchorMouseUp: (position: any) => void;
onMouseUp: () => void;
onMouseMove: (evt: any) => void;
onMouseDown: (evt: any) => void;
render(): JSX.Element;
}