reacthub-pixitweenjs 0.2.109-alpha.7 → 0.3.0-alpha.4

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

@@ -0,0 +1,142 @@
+import { Graphics, Point, FederatedPointerEvent } from 'pixi.js';
+import { Handle, Transformer } from './Transformer';
+/** @see TransformerHandle#style */
+export interface ITransformerHandleStyle {
+    /** Fill color of the handle */
+    color: number;
+    /** Outline color of the handle */
+    outlineColor: number;
+    /** Outline thickness around the handle */
+    outlineThickness: number;
+    /** Radius (or size for non-circular handles) of the handle */
+    radius: number;
+    /** {@link TransformerHandle} provides three types of handle shapes - 'circle', 'square', 'tooth'. */
+    shape: string;
+    /** Glow color for the handle */
+    glowColor?: number;
+    /** Glow intensity for the handle */
+    glowIntensity?: number;
+    /** Optional explicit color for the rotator SVG icon (overrides outlineColor) */
+    rotatorIconColor?: number;
+}
+/**
+ * The transformer handle base implementation.
+ *
+ * @extends Graphics (Pixi v8)
+ */
+export declare class TransformerHandle extends Graphics {
+    protected readonly transformer: Transformer;
+    onHandleDelta: (pointerPosition: Point) => void;
+    onHandleCommit: () => void;
+    protected _handle: Handle;
+    protected _style: ITransformerHandleStyle;
+    protected _dirty: boolean;
+    private _pointerDown;
+    private _pointerDragging;
+    private _pointerPosition;
+    private _pointerMoveTarget;
+    /** SVG-backed rotator sprite (loaded asynchronously via `Assets.load`). */
+    private _rotatorSprite;
+    private _rotatorKey;
+    /**
+     * Texture cache for rotator SVGs, keyed by `bgColor:arrowColor:size`.
+     * Promise entries are in-flight loads; resolved entries are ready Textures.
+     */
+    private static _rotatorTextureCache;
+    /**
+     * Pre-load the rotator SVG textures for the supplied color combos. Mirrors
+     * the upstream `PIXI.TransformerHandle.loadTextures()` helper the
+     * `pixi-essentials` demos call before mounting. Safe to call multiple
+     * times — entries are cached by `bgColor:arrowColor:size`.
+     *
+     * Pixi v8's `Texture.from(dataUrl)` returns a Texture whose underlying
+     * source decodes asynchronously. The first paint can race the decode and
+     * render an empty texture (which `Sprite.width = N` then mis-scales).
+     * `Assets.load` awaits the decode, so the returned Texture is paint-ready.
+     */
+    static loadTextures(combos?: Array<{
+        bgColor?: string;
+        arrowColor?: string;
+        size?: number;
+    }>): Promise<void>;
+    /**
+     * @param transformer
+     * @param handle - the type of handle being drawn
+     * @param styleOpts - styling options passed by the user
+     * @param handler - handler for drag events, it receives the pointer position; used by {@code onDrag}.
+     * @param commit - handler for drag-end events.
+     * @param cursor - a custom cursor to be applied on this handle (defaults to 'move')
+     */
+    constructor(transformer: Transformer, handle: Handle, styleOpts: Partial<ITransformerHandleStyle> | undefined, handler: (pointerPosition: Point) => void, commit: () => void, cursor?: string);
+    get handle(): Handle;
+    set handle(handle: Handle);
+    /**
+     * The currently applied handle style.
+     */
+    get style(): Partial<ITransformerHandleStyle>;
+    set style(value: Partial<ITransformerHandleStyle>);
+    /**
+     * Redraws the handle's geometry.
+     */
+    protected draw(): void;
+    /**
+     * Draws glow effect for handles
+     */
+    private drawGlowEffect;
+    /**
+     * Draws corner handle (circle)
+     */
+    private drawCornerHandle;
+    /**
+     * Draws pill-shaped handle for middle handles
+     */
+    private drawPillHandle;
+    /**
+     * Draws the rotator handle as an SVG-backed sprite (the cyan disk + two
+     * curved refresh arrows shipped by the upstream `pixi-essentials` demo).
+     *
+     * Pixi v8's `Texture.from(dataUrl)` is synchronous but the underlying
+     * `HTMLImageElement` decodes asynchronously, so the very first paint can
+     * land before the SVG is ready. We hedge with two things:
+     *   1. `Assets.load(dataUrl)` (proper async loader) populates the cache;
+     *      subsequent paints use the resolved Texture.
+     *   2. While the load is in flight, we draw a Graphics fallback (disk +
+     *      arc-arrows) so the rotator is always visible, then redraw once the
+     *      texture lands.
+     */
+    private drawRotatorHandle;
+    /**
+     * Handles the `pointerdown` event. You must call the super implementation.
+     *
+     * @param e
+     */
+    protected onPointerDown(e: FederatedPointerEvent): void;
+    /**
+     * Handles the `pointermove` event. You must call the super implementation.
+     *
+     * @param e
+     */
+    protected onPointerMove(e: FederatedPointerEvent): void;
+    /**
+     * Handles the `pointerup` and `pointerupoutside` events. You must call the super implementation.
+     *
+     * @param e
+     */
+    protected onPointerUp(e: FederatedPointerEvent): void;
+    /**
+     * Called on the first `pointermove` when {@code this._pointerDown} is true.
+     *
+     * @param e
+     */
+    protected onDragStart(e: FederatedPointerEvent): void;
+    /**
+     * Called on a `pointermove` when {@code this._pointerDown} & {@code this._pointerDragging}.
+     *
+     * @param e
+     */
+    protected onDrag(e: FederatedPointerEvent): void;
+    /**
+     * Called on a `pointerup` or `pointerupoutside` & {@code this._pointerDragging} was true.
+     */
+    protected onDragEnd(_: FederatedPointerEvent): void;
+}

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

@@ -0,0 +1,54 @@
+import { Graphics, Matrix, Point } from 'pixi.js';
+import { AxisAlignedBounds, OrientedBounds } from '../bounds';
+import { Handle, Transformer } from './Transformer';
+/**
+ * The transformer's wireframe is drawn using this class.
+ *
+ * @ignore
+ * @public
+ * @extends Graphics (Pixi v8)
+ */
+export declare class TransformerWireframe extends Graphics {
+    protected transformer: Transformer;
+    /**
+     * The four scaling "edges" (or wide handles) for box-scaling. {@link TransformerWireframe#drawBoxScalingTolerance}
+     * should draw into these.
+     */
+    protected boxScalingHandles: [Graphics, Graphics, Graphics, Graphics];
+    constructor(transformer: Transformer);
+    /**
+     * Detects which type of box-handle, if any, the pointer clicked on in the wireframe.
+     *
+     * @param groupBounds
+     * @param projectionTransform
+     * @param pointerPosition
+     */
+    hitHandleType(groupBounds: OrientedBounds, projectionTransform: Matrix, pointerPosition: Point): Handle | null;
+    /**
+     * Draws the bounding box into the wireframe.
+     *
+     * @param bounds
+     */
+    drawBounds(bounds: OrientedBounds | AxisAlignedBounds): void;
+    /**
+     * Draws around edges of the bounding box to capture pointer events within
+     * {@link Transformer#boxScalingTolerance}.
+     *
+     * @param bounds
+     * @param boxScalingTolerance
+     */
+    drawBoxScalingTolerance(bounds: OrientedBounds, boxScalingTolerance?: number): void;
+    /**
+     * Draws square-shaped tolerance regions for capturing pointer events within {@link Transformer#boxRotationTolernace}
+     * of the four corners of the group bounding box. The square are cut in the interior region of the group bounds.
+     */
+    drawBoxRotationTolerance(): void;
+    /**
+     * Alias for {@link Transformer#projectToLocal}. The transform of the wireframe should equal that
+     * of the transformer itself.
+     *
+     * @param input
+     * @param output
+     */
+    protected projectToLocal(input: Point, output: Point): Point;
+}

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

@@ -0,0 +1,5 @@
+export { Transformer } from './Transformer';
+export { TransformerHandle } from './TransformerHandle';
+export { TransformerWireframe } from './TransformerWireframe';
+export type { Handle, RotateHandle, ScaleHandle, SkewHandle, ITransformerOptions, ITransformerStyle, ITransformerCursors, ITransformerColorTheme, IRotatorAnchorConfig, ITransformCommitPayload, ITransformerElementDims, ITransformerGroupBoundsSnapshot, } from './Transformer';
+export type { ITransformerHandleStyle } from './TransformerHandle';

package/dist/lib/pixi-essentials/transformer/utils/decomposeTransform.d.ts

@@ -0,0 +1,11 @@
+import { Matrix, Point, Transform } from 'pixi.js';
+/**
+ * Decomposes the matrix into transform, while preserving rotation & the pivot.
+ *
+ * @ignore
+ * @param transform
+ * @param matrix
+ * @param rotation
+ * @param pivot
+ */
+export declare function decomposeTransform(transform: Transform, matrix: Matrix, rotation?: number, pivot?: Point): Transform;

package/dist/lib/pixi-essentials/transformer/utils/distanceToLine.d.ts

@@ -0,0 +1,7 @@
+import { Point } from 'pixi.js';
+/**
+ * Calculates the distance of (x,y) from the line through l0 and l1.
+ *
+ * @ignore
+ */
+export declare function distanceToLine(h: number, k: number, l0: Point, l1: Point): number;

package/dist/lib/pixi-essentials/transformer/utils/multiplyTransform.d.ts

@@ -0,0 +1,17 @@
+import { Matrix, Container } from 'pixi.js';
+/**
+ * Multiplies the transformation matrix {@code transform} to the container's
+ * local transform and writes the decomposed result back to the container's
+ * position / scale / rotation / pivot / skew.
+ *
+ * Pixi v8 removed `DisplayObject`, `enableTempParent`, `disableTempParent`,
+ * and the `Transform` instance on `Container`. The new flow is:
+ *  - read `worldTransform` (auto-updated after `updateLocalTransform()`)
+ *  - re-express as a local-space matrix using `parent.worldTransform.invert()`
+ *  - decompose onto a throwaway `Transform`, then copy the components onto the
+ *    container directly (Container exposes `position`/`scale`/etc. as
+ *    `ObservablePoint`s and `rotation` as a number).
+ *
+ * @ignore
+ */
+export declare function multiplyTransform(container: Container, transform: Matrix, skipUpdate?: boolean): void;

package/dist/lib/pixi-essentials/transformer/utils/skewTransform.d.ts

@@ -0,0 +1,13 @@
+import { Matrix } from 'pixi.js';
+/**
+ * @ignore
+ * @param angle
+ * @returns a horizontal skew matrix
+ */
+export declare function createHorizontalSkew(angle: number): Matrix;
+/**
+ * @ignore
+ * @param angle
+ * @returns a vertical skew matrix
+ */
+export declare function createVerticalSkew(angle: number): Matrix;

package/dist/providers/GsapPixieContextProvider.d.ts

@@ -17,6 +17,13 @@ interface GsapPixieContextProps {
     dragModeRef: React.MutableRefObject<boolean>;
     isRemotion: boolean;
     setIsRemotion: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Subscribe to master-timeline time updates (seconds). Fired from onUpdate and handleSeek. */
+    registerTimeUpdateListener: (fn: (time: number) => void) => void;
+    unregisterTimeUpdateListener: (fn: (time: number) => void) => void;
+    /** true = playing, false = paused. Single source of truth for play state. */
+    playStateRef: React.MutableRefObject<boolean>;
+    /** true while the user is seeking / dragging the scrubber. */
+    isSeekingRef: React.MutableRefObject<boolean>;
 }
 declare const GsapPixieContext: React.Context<GsapPixieContextProps>;
 declare const Events: {

package/dist/types/BaseProps.d.ts

@@ -1,7 +1,6 @@
 import { Effects, Waveforms } from './Effects';
-import { OverlayTypes } from '../hocs/OverlayTilingSprite';
+import { OverlayTypes } from './OverlayTypes';
 import { Animations } from './Animations';
-
 export interface PixiBaseSpriteProps {
     children?: React.ReactNode;
     uniqueId: string;
@@ -16,43 +15,79 @@ export interface PixiBaseSpriteProps {
         y: number;
         width: number;
         height: number;
-        anchor: number;
+        anchor: number | {
+            x: number;
+            y: number;
+        };
         rotation?: number;
         alpha?: number;
         scale?: number | [number, number];
         tint?: number;
         blendMode?: number;
         animation?: Animations;
+        /**
+         * Slider units (neutral = 0), same as the Clippy editor:
+         * brightness/contrast/saturation/red/green/blue/temperature/tint/highlights/shadows/
+         * exposure/vibrance -100..100, hue -180..180, sharpness/blurRadius/vignette/noise/
+         * edgeFeather 0..100, gamma/alpha 1 = none. Use `fromMultiplierColorCorrection` for old data.
+         */
         colorCorrection?: {
             enabled?: boolean;
-            temperature?: number;
-            hue?: number;
+            brightness?: number;
             contrast?: number;
             saturation?: number;
-            brightness?: number;
+            red?: number;
+            green?: number;
+            blue?: number;
+            gamma?: number;
+            alpha?: number;
+            temperature?: number;
+            tint?: number;
+            hue?: number;
+            highlights?: number;
+            shadows?: number;
             exposure?: number;
-            reset?: boolean;
+            vibrance?: number;
             sharpness?: number;
+            blurRadius?: number;
+            vignette?: number;
+            noise?: number;
+            edgeFeather?: number;
+            reset?: boolean;
             value?: number;
             levels?: number;
             luminance?: number;
             enhance?: number;
-            blurRadius?: number;
-            red?: number;
-            green?: number;
-            blue?: number;
-            alpha?: number;
-            gamma?: number;
             scaleInput?: number;
-            vignette?: number;
-            noise?: number;
             outline?: number;
             outlineColor?: number;
         };
-        effect?: Effects;
+        /** Legacy preset name. Prefer `effects`. */
+        effect?: Effects | string;
+        /** Preset effect with strength (0-100, default 100) and per-effect `params`. */
+        effects?: {
+            name?: Effects | string;
+            intensity?: number;
+            params?: Record<string, unknown>;
+        };
+        /** Neon glow colour: number, `#hex`, `0xhex` or any CSS colour. */
+        neonColor?: number | string | null;
+        /** Key a flat background plate out of the image. `true` = default cream plate. */
+        plateKey?: boolean | string | {
+            color?: string;
+            tolerance?: number;
+        } | null;
         overlay?: OverlayTypes;
         waveform?: Waveforms;
         fontSize?: number;
+        border?: {
+            width: number;
+            color: number | string | null;
+        };
+        roundedCorners?: boolean | number;
+        maskShape?: import('./MaskTypes').MaskTypes | `${import('./MaskTypes').MaskTypes}`;
+        /** Sprite-local crop rect; mask/border are drawn inside it. */
+        crop?: import('./CropTypes').CropRect;
     };
     pointerdown?: () => void;
     pointerup?: () => void;

package/dist/types/CropTypes.d.ts

@@ -0,0 +1,12 @@
+export interface CropRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface AspectRatioPreset {
+    label: string;
+    ratio: number | null;
+}
+export declare const ASPECT_RATIOS: AspectRatioPreset[];
+export declare const MIN_CROP_SIZE = 20;