reacthub-pixitweenjs 0.2.109-alpha.5 → 0.3.0-alpha.3

package/dist/lib/pixi-essentials/transformer/Transformer.d.ts

@@ -0,0 +1,728 @@
+import { Container, Matrix, Point, Cursor, FederatedPointerEvent } from 'pixi.js';
+import { OrientedBounds } from '../bounds/index';
+import { TransformerHandle, ITransformerHandleStyle } from './TransformerHandle';
+import { TransformerWireframe } from './TransformerWireframe';
+/**
+ * The handles used for rotation.
+ *
+ * @public
+ * @ignore
+ */
+export type RotateHandle = 'rotator' | 'boxRotateTopLeft' | 'boxRotateTopRight' | 'boxRotateBottomLeft' | 'boxRotateBottomRight';
+/**
+ * The handles used for scaling.
+ *
+ * @public
+ * @ignore
+ */
+export type ScaleHandle = 'topLeft' | 'topCenter' | 'topRight' | 'middleLeft' | 'middleCenter' | 'middleRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+/**
+ * The handles used for skewing
+ *
+ * @public
+ * @ignore
+ */
+export type SkewHandle = 'skewHorizontal' | 'skewVertical';
+/**
+ * All the handles provided by {@link Transformer}.
+ *
+ * @public
+ * @ignore
+ */
+export type Handle = RotateHandle | ScaleHandle | SkewHandle;
+/**
+ * Specific cursors for each handle
+ *
+ * @ignore
+ */
+export declare const HANDLE_TO_CURSOR: {
+    [H in Handle]?: Cursor;
+};
+/**
+ * Per-element dimensions snapshot fired on `transformcommit`.
+ *
+ * @public
+ */
+export interface ITransformerElementDims {
+    /** Local x position of the element (relative to its parent). */
+    x: number;
+    /** Local y position. */
+    y: number;
+    /** Visible width (`displayObject.width`). 0 when not measurable. */
+    width: number;
+    /** Visible height (`displayObject.height`). 0 when not measurable. */
+    height: number;
+    /** Local rotation in radians. */
+    rotation: number;
+    /** Local scale on the x-axis. */
+    scaleX: number;
+    /** Local scale on the y-axis. */
+    scaleY: number;
+    /** Local x-skew in radians. */
+    skewX: number;
+    /** Local y-skew in radians. */
+    skewY: number;
+    /** Local x-pivot. */
+    pivotX: number;
+    /** Local y-pivot. */
+    pivotY: number;
+}
+/**
+ * Group-bounding-box snapshot. World space coordinates.
+ *
+ * @public
+ */
+export interface ITransformerGroupBoundsSnapshot {
+    /** Top-left corner x of the inner (unrotated) box. */
+    x: number;
+    /** Top-left corner y of the inner (unrotated) box. */
+    y: number;
+    /** Inner box width. */
+    width: number;
+    /** Inner box height. */
+    height: number;
+    /** Rotation of the box in radians. */
+    rotation: number;
+    /** Centre point x (also the rotation pivot). */
+    centerX: number;
+    /** Centre point y. */
+    centerY: number;
+}
+/**
+ * Payload fired with the `transformcommit` event.
+ *
+ * Consumers can read `elements[0]` for the single-select case, or iterate
+ * `elements` for multi-select. `groupBounds` is always present.
+ *
+ * @public
+ */
+export interface ITransformCommitPayload {
+    /** Bounding box of the whole group in world coordinates. */
+    groupBounds: ITransformerGroupBoundsSnapshot;
+    /** Per-element local dimensions, in `group` order. */
+    elements: ITransformerElementDims[];
+    /**
+     * The handle that initiated the interaction (`null` for translate/free
+     * drag of the bounding box). Mirrors the `transformstart` payload.
+     */
+    handle: Handle | null;
+    /** Kind of transformation that just committed. */
+    transformType: 'translate' | 'scale' | 'rotate' | 'skew' | 'none';
+}
+/**
+ * @ignore
+ */
+export interface ITransformerStyle {
+    color: number;
+    thickness: number;
+}
+/**
+ * Color theme configuration for the transformer
+ */
+export interface ITransformerColorTheme {
+    /** Primary color for handles and wireframe */
+    primary?: number;
+    /** Secondary color for accents */
+    secondary?: number;
+    /** Background color for handles */
+    background?: number;
+    /** Glow effect color */
+    glow?: number;
+    /** Glow intensity (0-1) */
+    glowIntensity?: number;
+    /** Background color for rotator handle (SVG circle) */
+    rotatorBackground?: string;
+    /** Arrow color for rotator handle (SVG paths) */
+    rotatorArrow?: string;
+}
+/**
+ * Configuration for the rotator anchor line
+ */
+export interface IRotatorAnchorConfig {
+    /** Whether the rotator anchor is enabled */
+    enabled?: boolean;
+    /** Start position as percentage from bounding box (0-1) */
+    startPosition?: number;
+    /** Length of the line segment as percentage of total distance (0-1) */
+    segmentLength?: number;
+    /** Thickness of the anchor line */
+    thickness?: number;
+    /** Color of the anchor line (overrides theme) */
+    color?: number;
+    /** Style of the anchor line */
+    style?: 'solid' | 'dashed' | 'dotted';
+    /** Dash pattern for dashed style [dashLength, gapLength] */
+    dashPattern?: [number, number];
+    /** Dot pattern for dotted style [dotSize, gapLength] */
+    dotPattern?: [number, number];
+}
+/**
+ * @public
+ */
+export interface ITransformerCursors {
+    default: string;
+    boxRotate?: string;
+    boxScaleLeft?: string;
+    boxScaleTop?: string;
+    boxScaleRight?: string;
+    boxScaleBottom?: string;
+    translate?: string;
+}
+/**
+ * @public
+ */
+export interface ITransformerOptions {
+    /** "all" or "groupOnly". "groupOnly" won't show individual bounding boxes. */
+    boundingBoxes?: 'all' | 'groupOnly' | 'none';
+    /** Enable box rotation by dragging outside of corners */
+    boxRotationEnabled?: boolean;
+    /** The radial tolerance for box rotation */
+    boxRotationTolerance?: number;
+    /** Enable box scaling by dragging at the edges */
+    boxScalingEnabled?: boolean;
+    /** The tolerance for scaling at the edges */
+    boxScalingTolerance: number;
+    /** Whether scaling should always be centered */
+    centeredScaling: boolean;
+    /** */
+    cursors?: ITransformerCursors;
+    /** Specifically define which handles are to be enabled */
+    enabledHandles?: Array<Handle>;
+    /** The group of display-objects being transformed */
+    group: Container[];
+    /** A custom transformer-handle class */
+    handleConstructor: typeof TransformerHandle;
+    /** Styling options for the handle. These cannot be modified afterwards! */
+    handleStyle: Partial<ITransformerHandleStyle>;
+    /** Lock aspect ratio when scaling using one of the corner handles. */
+    lockAspectRatio?: boolean;
+    /** Whether rotate handles are enabled */
+    rotateEnabled?: boolean;
+    /**
+     * The rotation snap angles, in radians. By default, transformer will
+     * snap for each 1/8th of a revolution.
+     */
+    rotationSnaps?: number[];
+    /** The snap tolerance for rotation in radians */
+    rotationSnapTolerance?: number;
+    /** Whether scale handles are enabled */
+    scaleEnabled?: boolean;
+    /** Whether skew handles are enabled */
+    skewEnabled?: boolean;
+    /**
+     * Distance of skew handles from center of transformer box
+     *      (`skewTransform` should be enabled)
+     */
+    skewRadius?: number;
+    /** The skew snap angles, in radians. */
+    skewSnaps?: number[];
+    /** The skew snap tolerance angle. */
+    skewSnapTolerance?: number;
+    /** The root object in your scene in which the transformed objects exist. */
+    stage: Container;
+    /** Whether dragging the transformer should move the group */
+    translateEnabled?: boolean;
+    /**
+     * Whether the transformer should reset the wireframe's rotation
+     * after a rotator handle is "defocused".
+     */
+    transientGroupTilt?: boolean;
+    /** Styling options for the wireframe. */
+    wireframeStyle: Partial<ITransformerStyle>;
+    /** Color theme configuration for the entire transformer */
+    colorTheme?: ITransformerColorTheme;
+    /** Configuration for the rotator anchor line */
+    rotatorAnchor?: IRotatorAnchorConfig;
+    /** Color for individual element borders when multiple elements are selected */
+    individualBorderColor?: number;
+    /** Thickness for individual borders (defaults to wireframeStyle.thickness) */
+    individualBorderThickness?: number;
+    /** Alpha/opacity for individual borders (0-1) */
+    individualBorderAlpha?: number;
+    /** Style for individual element borders: 'solid' | 'dashed' | 'dotted' */
+    individualBorderStyle?: 'solid' | 'dashed' | 'dotted';
+    /** Dash pattern for individual borders [dashLength, gapLength] */
+    individualBorderDashPattern?: [number, number];
+    /** Enable nested selection (click to select individual elements within group) */
+    nestedSelectionEnabled?: boolean;
+    /** Color for the focused/selected inner element border */
+    focusedElementBorderColor?: number;
+    /** Thickness for focused element border */
+    focusedElementBorderThickness?: number;
+    /** Style for focused element border: 'solid' | 'dashed' | 'dotted' */
+    focusedElementBorderStyle?: 'solid' | 'dashed' | 'dotted';
+    /** Dash pattern for focused element border [dashLength, gapLength] */
+    focusedElementBorderDashPattern?: [number, number];
+    /** Whether to show individual borders for non-focused elements */
+    showNonFocusedBorders?: boolean;
+    /** Threshold in pixels to distinguish click from drag (default: 5) */
+    clickThreshold?: number;
+}
+/**
+ * {@code Transformer} provides an interactive interface for editing the transforms in a group. It supports translating,
+ * scaling, rotating, and skewing display-objects both through interaction and code.
+ *
+ * A transformer operates in world-space, and it is best to not position, scale, rotate, or skew one. If you do so, the
+ * wireframe itself will not distort (i.e. will adapt _against_ your transforms). However, the wireframe may become
+ * thinner/thicker and the handles will scale & rotate. For example, setting `transformer.scale.set(2)` will make the handles
+ * twice as big, but will not scale the wireframe (assuming the display-object group itself has not been
+ * scaled up).
+ *
+ * To enable scaling via dragging the edges of the wireframe, set `boxScalingEnabled` to `true`.
+ *
+ * NOTE: The transformer needs to capture all interaction events that would otherwise go to the display-objects in the
+ * group. Hence, it must be placed after them in the scene graph.
+ *
+ * @extends PIXI.Container
+ */
+export declare class Transformer extends Container {
+    /** The group of display-objects under transformation. */
+    private _group;
+    /** Getter for the group property */
+    get group(): Container[];
+    /** Setter for the group property - handles React prop updates */
+    set group(value: Container[]);
+    /**
+     * Specify which bounding boxes should be drawn in the wireframe.
+     *
+     * "groupOnly" won't show individual bounding boxes. "none" will not render anything visible.
+     *
+     * @default "all"
+     */
+    boundingBoxes: 'all' | 'groupOnly' | 'none';
+    /** Set this to enable rotation at the four corners */
+    boxRotationEnabled: boolean;
+    /** The thickness of the box rotation area */
+    boxRotationTolerance: number;
+    /** Set this to enable scaling by dragging at the edges of the bounding box */
+    boxScalingEnabled: boolean;
+    /** The padding around the bounding-box to capture dragging on the edges. */
+    boxScalingTolerance: number;
+    /** This will prevent the wireframe's center from shifting on scaling. */
+    centeredScaling: boolean;
+    /** Cursors to use in the transformer */
+    cursors: ITransformerCursors;
+    /** Color for individual element borders */
+    individualBorderColor: number;
+    /** Thickness for individual element borders */
+    individualBorderThickness?: number;
+    /** Alpha for individual element borders */
+    individualBorderAlpha: number;
+    /** Style for individual element borders */
+    individualBorderStyle: 'solid' | 'dashed' | 'dotted';
+    /** Dash pattern for individual borders */
+    individualBorderDashPattern: [number, number];
+    /** Enable nested selection (click to select individual elements within group) */
+    nestedSelectionEnabled: boolean;
+    /** Color for focused element border */
+    focusedElementBorderColor: number;
+    /** Thickness for focused element border */
+    focusedElementBorderThickness?: number;
+    /** Style for focused element border */
+    focusedElementBorderStyle: 'solid' | 'dashed' | 'dotted';
+    /** Dash pattern for focused element border */
+    focusedElementBorderDashPattern: [number, number];
+    /** Show borders for non-focused elements */
+    showNonFocusedBorders: boolean;
+    /**
+     * Flags whether the transformer should **not** redraw each frame (good for performance)
+     *
+     * @default false
+     */
+    lazyMode: boolean;
+    /** Set this when you want the transformer to redraw when using {@link Transformer#lazyMode lazyMode}. */
+    lazyDirty: boolean;
+    /** Lock aspect ratio when using one of the corner handles. */
+    lockAspectRatio: boolean;
+    /**
+     * This is used when the display-object group are rendered through a projection transformation (i.e. are disconnected
+     * from the transformer in the scene graph). The transformer project itself into their frame-of-reference using this
+     * transform.
+     *
+     * Specifically, the projection-transform converts points from the group's world space to the transformer's world
+     * space. If you are not applying a projection on the transformer itself, this means it is the group's
+     * world-to-screen transformation.
+     */
+    projectionTransform: Matrix;
+    /** The angles at which rotation should snap. */
+    rotationSnaps: number[];
+    /** The maximum angular difference for snapping rotation. */
+    rotationSnapTolerance: number;
+    /** The distance of skewing handles from the group's center. */
+    skewRadius: number;
+    /** The angles at which both the horizontal & vertical skew handles should snap. */
+    skewSnaps: number[];
+    /**
+     * The maximum angular difference for snapping skew handles.
+     */
+    skewSnapTolerance: number;
+    /**
+     * The root object in your scene in which objects can move.
+     *
+     * {@code Transformer} will subscribe to this object for `pointermove` events, if provided. This
+     * should be used when:
+     *
+     * * {@link InteractionManager.moveWhenInside moveWhenInside} is enabled on the interaction plugin.
+     * * {@link EventBoundary.moveOnAll moveOnAll} is not turned off when using the new {@link EventSystem}.
+     *
+     * Otherwise, the transformer will receive **not** `pointermove` events when the user drags fast enough that
+     * the cursor leaves the transformer's bounds.
+     *
+     * The stage must be fully interactive in the area you want objects to move. Generally, this is the
+     * whole canvas:
+     *
+     * ```ts
+     * stage.interactive = true;
+     * stage.hitArea = renderer.screen;// or pass custom rect for the canvas dimensions
+     * ```
+     */
+    stage: Container | null;
+    /**
+     * This will enable translation on dragging the transformer. By default, it is turned on.
+     *
+     * @default true
+     */
+    translateEnabled: boolean;
+    /**
+     * This will reset the rotation angle after the user finishes rotating a group with more than one display-object.
+     *
+     * @default true
+     */
+    transientGroupTilt: boolean;
+    /** The last calculated bounds of the whole group being transformed */
+    protected groupBounds: OrientedBounds;
+    /** Object mapping handle-names to the handle display-objects. */
+    protected handles: {
+        [H in Handle]?: TransformerHandle;
+    };
+    /**
+     * Positions of the various handles
+     *
+     * @internal
+     * @ignore
+     */
+    handleAnchors: {
+        [H in Handle]: Point;
+    };
+    /** Draws the bounding boxes */
+    protected wireframe: TransformerWireframe;
+    /** @see Transformer#enabledHandles */
+    protected _enabledHandles: Handle[] | undefined;
+    /** @see Transformer#rotateEnabled */
+    protected _rotateEnabled: boolean;
+    /** @see Transformer#scaleEnabled */
+    protected _scaleEnabled: boolean;
+    /** @see Transformer#skewEnabled */
+    protected _skewEnabled: boolean;
+    /** The horizontal skew value. Rotating the group by 𝜽 will also change this value by 𝜽. */
+    protected _skewX: number;
+    /** The vertical skew value. Rotating the group by 𝜽 will also change this value by 𝜽. */
+    protected _skewY: number;
+    /** The currently grabbed handle. This can be used to get the type of transformation. */
+    protected _transformHandle: Handle | null;
+    /** The current type of transform being applied by the user. */
+    protected _transformType: 'translate' | 'scale' | 'rotate' | 'skew' | 'none';
+    /** The style applied on transformer handles */
+    protected _handleStyle: Partial<ITransformerHandleStyle>;
+    /** The wireframe style applied on the transformer */
+    protected _wireframeStyle: Partial<ITransformerStyle>;
+    /** The color theme applied on the transformer */
+    protected _colorTheme: ITransformerColorTheme;
+    /** The rotator anchor configuration */
+    protected _rotatorAnchorConfig: IRotatorAnchorConfig;
+    /** Index of currently focused element within the group (-1 = none focused) */
+    protected _focusedElementIndex: number;
+    /** Map to track which display object corresponds to which index */
+    protected _elementIndexMap: WeakMap<Container, number>;
+    private _pointerDown;
+    private _pointerDragging;
+    private _pointerPosition;
+    private _pointerMoveTarget;
+    private _transformStarted;
+    /** Threshold in pixels to distinguish click from drag */
+    private _clickThreshold;
+    /** Position where pointer was initially pressed */
+    private _clickStartPosition;
+    /** Index of element that was clicked (before drag threshold) */
+    private _elementClickCandidate;
+    /**
+     * | Handle                | Type                     | Notes |
+     * | --------------------- | ------------------------ | ----- |
+     * | rotator               | Rotate                   | |
+     * | boxRotateTopLeft      | Rotate                   | Invisible |
+     * | boxRotateTopRight     | Rotate                   | Invisible |
+     * | boxRotateBottomLeft   | Rotate                   | Invisible |
+     * | boxRotateBottomRight  | Rotate                   | Invisible |
+     * | topLeft               | Scale                    | |
+     * | topCenter             | Scale                    | |
+     * | topRight              | Scale                    | |
+     * | middleLeft            | Scale                    | |
+     * | middleCenter          | Scale                    | This cannot be enabled!                                             |
+     * | middleRight           | Scale                    | |
+     * | bottomLeft            | Scale                    | |
+     * | bottomCenter          | Scale                    | |
+     * | bottomRight           | Scale                    | |
+     * | skewHorizontal        | Skew                     | Applies vertical shear. Handle segment is horizontal at skew.y = 0! |
+     * | skewVertical          | Skew                     | Applied horizontal shear. Handle segment is vertical at skew.x = 0! |
+     */
+    constructor(options?: Partial<ITransformerOptions>);
+    /** The list of enabled handles, if applied manually. */
+    get enabledHandles(): Array<Handle> | undefined;
+    /** Click vs drag threshold in pixels. */
+    get clickThreshold(): number;
+    set clickThreshold(value: number);
+    set enabledHandles(value: Array<Handle> | undefined);
+    /** The currently applied handle style. If you have edited the transformer handles directly, this may be inaccurate. */
+    get handleStyle(): Partial<ITransformerHandleStyle>;
+    set handleStyle(value: Partial<ITransformerHandleStyle>);
+    /** This will enable the rotate handles. */
+    get rotateEnabled(): boolean;
+    set rotateEnabled(value: boolean);
+    /** This will enable the scale handles. */
+    get scaleEnabled(): boolean;
+    set scaleEnabled(value: boolean);
+    /** This will enable the skew handles. */
+    get skewEnabled(): boolean;
+    set skewEnabled(value: boolean);
+    /**
+     * This is the type of transformation being applied by the user on the group. It can be inaccurate if you call one of
+     * `translateGroup`, `scaleGroup`, `rotateGroup`, `skewGroup` without calling `commitGroup` afterwards.
+     *
+     * @readonly
+     */
+    get transformType(): 'translate' | 'scale' | 'rotate' | 'skew' | 'none';
+    /** The currently applied wireframe style. */
+    get wireframeStyle(): Partial<ITransformerStyle>;
+    set wireframeStyle(value: Partial<ITransformerStyle>);
+    /** The currently applied color theme. */
+    get colorTheme(): ITransformerColorTheme;
+    set colorTheme(value: ITransformerColorTheme);
+    /** The currently applied rotator anchor configuration. */
+    get rotatorAnchor(): IRotatorAnchorConfig;
+    set rotatorAnchor(value: IRotatorAnchorConfig);
+    /**
+     * Get the currently focused element within the group
+     */
+    get focusedElement(): Container | null;
+    /**
+     * Set the focused element by index
+     */
+    set focusedElementIndex(index: number);
+    get focusedElementIndex(): number;
+    /**
+     * Focus a specific element by reference
+     */
+    focusElement(element: Container): void;
+    /**
+     * Clear element focus (show all individual borders)
+     */
+    clearElementFocus(): void;
+    /**
+     * Cycle to next element in group
+     */
+    focusNextElement(): void;
+    /**
+     * Update the element index map when group changes
+     */
+    private updateElementIndexMap;
+    /**
+     * Set up or remove interaction for individual elements
+     */
+    private setupElementInteraction;
+    /**
+     * Redraws all handles with updated styles
+     */
+    private redrawAllHandles;
+    /**
+     * Draws a line for the rotator anchor, connecting the bounding box to the rotator handle
+     * @param x1 Start X coordinate (bounding box center)
+     * @param y1 Start Y coordinate (bounding box center)
+     * @param x2 End X coordinate (rotator handle position)
+     * @param y2 End Y coordinate (rotator handle position)
+     * @param lineWidth Width of the line
+     * @param color Color of the line
+     */
+    private drawRotatorAnchorDot;
+    /**
+     * Draws a dashed line between two points using the configured dash pattern
+     */
+    private drawDashedLine;
+    /**
+     * Draws a dotted line between two points using the configured dot pattern
+     */
+    private drawDottedLine;
+    /**
+     * Draws a dashed rectangle around the given bounds
+     */
+    private drawDashedBounds;
+    /**
+     * Draws a dotted rectangle around the given bounds
+     */
+    private drawDottedBounds;
+    /**
+     * Draws a dashed line segment between two points
+     */
+    private drawDashedLineSegment;
+    /**
+     * Draws a dotted line segment between two points
+     * Each dot is drawn as an independent shape to ensure proper rendering
+     */
+    private drawDottedLineSegment;
+    /**
+     * @param forceUpdate - forces a recalculation of the group bounds
+     * @returns the oriented bounding box of the wireframe
+     */
+    getGroupBounds(forceUpdate?: boolean): OrientedBounds;
+    /**
+     * This will translate the group by {@code delta} in their world-space.
+     *
+     * NOTE: There is no handle that provides translation. The user drags the transformer directly.
+     *
+     * @param delta
+     */
+    translateGroup: (delta: Point) => void;
+    /**
+     * This will rotate the group such that the handle will come to {@code pointerPosition}.
+     *
+     * @param handle - the rotator handle was dragged
+     * @param pointerPosition - the new pointer position, in screen space
+     */
+    rotateGroup: (handle: RotateHandle, pointerPosition: Point) => void;
+    /**
+     * This will scale the group such that the scale handle will come under {@code pointerPosition}.
+     *
+     * @param handle - the scaling handle that was dragged
+     * @param pointerPosition - the new pointer position, in screen space
+     */
+    scaleGroup: (handle: ScaleHandle, pointerPosition: Point) => void;
+    /**
+     * This will skew the group such that the skew handle would move to the {@code pointerPosition}.
+     *
+     * @param handle
+     * @param pointerPosition - pointer position, in screen space
+     */
+    skewGroup: (handle: SkewHandle, pointerPosition: Point) => void;
+    /**
+     * This is called after the user finishes dragging a handle. If {@link this.transientGroupTilt} is enabled, it will
+     * reset the rotation of this group (if more than one display-object is grouped).
+     */
+    commitGroup: () => void;
+    /**
+     * Build the payload emitted by `transformcommit`. Reads dimensions from the
+     * current group state (post-mutation) — `position`, `scale`, `rotation`,
+     * `skew`, `pivot`, plus the v8 `width`/`height` displayed accessors.
+     *
+     * Centralised so listeners get a stable shape regardless of which `*Group`
+     * method drove the commit (translate / scale / rotate / skew).
+     */
+    protected buildCommitPayload(handle: Handle | null, transformType: 'translate' | 'scale' | 'rotate' | 'skew' | 'none'): ITransformCommitPayload;
+    /** Recalculates the transformer's geometry. Called via the v8 `onRender` callback registered in the constructor. */
+    protected draw(): void;
+    /**
+     * Draw the handles and any remaining parts of the wireframe.
+     *
+     * @param groupBounds
+     */
+    protected drawHandles(groupBounds: OrientedBounds): void;
+    /** Called on the `pointerdown` event. You must call the super implementation. */
+    protected onPointerDown(e: FederatedPointerEvent): void;
+    /**
+     * Determine if display-object a is above display-object b in render order.
+     * This walks up the scene graph to the first diverging ancestor and
+     * compares their child indices (assuming parent's children array is in render order).
+     */
+    private static isAboveInDisplayOrder;
+    /** Called on the `pointermove` event. You must call the super implementation. */
+    protected onPointerMove(e: FederatedPointerEvent): void;
+    /**
+     * Emits the transformstart event once per interaction when a transformation begins.
+     */
+    private emitTransformStart;
+    /** Called on the `pointerup` and `pointerupoutside` events. You must call the super implementation. */
+    protected onPointerUp(e: FederatedPointerEvent): void;
+    /**
+     * Applies the given transformation matrix {@code delta} to all the display-objects in the group.
+     *
+     * @param delta - transformation matrix
+     * @param skipUpdate - whether to skip updating the group-bounds after applying the transform
+     */
+    protected prependTransform(delta: Matrix, skipUpdate?: boolean): void;
+    /**
+     * Recalculates {@code this.groupBounds} at the same angle.
+     *
+     * @param rotation - override the group's rotation
+     */
+    private updateGroupBounds;
+    /**
+     * Snaps the given {@code angle} to one of the snapping angles, if possible.
+     *
+     * @param angle - the input angle
+     * @param snapTolerance - the maximum difference b/w the given angle & a snapping angle
+     * @param snaps - the snapping angles
+     * @returns the snapped angle
+     */
+    private snapAngle;
+    /**
+     * Swap the handles represented by the two {@code TransformerHandle} instances.
+     *
+     * @param handle0
+     * @param handle1
+     */
+    private swapHandles;
+    /** Set cursor from {@code this.cursors} based on the handle hovered currently. */
+    private setCursorFromHoveredHandle;
+    /**
+     * Projects {@code input} from the group's world space into the transformer's local space, and puts the result
+     * into {@code output}.
+     *
+     * @param input
+     * @param output
+     * @returns the output
+     */
+    projectToLocal(input: Point, output?: Point): Point;
+    /**
+     * Calculates the positions of the four corners of the display-object. The quadrilateral formed by
+     * these points will be the tightest fit around it.
+     *
+     * @param displayObject - The display object whose corners are to be calculated
+     * @param transform - The transform applied on the display-object. By default, this is its world-transform
+     * @param corners - Optional array of four points to put the result into
+     * @param index - Optional index into "corners"
+     * @returns an array of four points holding the positions of the corners
+     */
+    static calculateTransformedCorners(displayObject: Container, transform?: Matrix, corners?: Point[], index?: number): Point[];
+    /**
+     * Calculates the oriented bounding box of the display-object. This would not bending with any skew
+     * applied on the display-object, i.e. it is guaranteed to be rectangular.
+     *
+     * @param displayObject
+     * @param bounds - the bounds instance to set
+     */
+    static calculateOrientedBounds(displayObject: Container, bounds?: OrientedBounds): OrientedBounds;
+    /**
+     * Calculates the oriented bounding box of a group of display-objects at a specific angle.
+     *
+     * @param group
+     * @param rotation
+     * @param bounds
+     * @param skipUpdate
+     */
+    static calculateGroupOrientedBounds(group: Container[], rotation: number, bounds?: OrientedBounds, skipUpdate?: boolean): OrientedBounds;
+}
+/**
+ * Fired once when a transformation interaction begins (after the pointer moves beyond the click threshold).
+ *
+ * @event Transformer#transformstart
+ * @type {{ handle: Handle | null; transformType: "translate" | "scale" | "rotate" | "skew" | "none" }}
+ */
+/**
+ * This is fired when the transformer modifies the transforms of display-objects.
+ *
+ * @event Transformer#transformchange
+ * @type {Matrix}
+ */
+/**
+ * This is fired when the user lifts the mouse button after dragging a transformer handle. It can be used
+ *
+ * @event Transformer#transformcommit
+ */