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

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/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,7 +15,10 @@ 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];
@@ -53,6 +55,12 @@ export interface PixiBaseSpriteProps {
         overlay?: OverlayTypes;
         waveform?: Waveforms;
         fontSize?: number;
+        border?: {
+            width: number;
+            color: number | string | null;
+        };
+        roundedCorners?: boolean | number;
+        maskShape?: import('./MaskTypes').MaskTypes;
     };
     pointerdown?: () => void;
     pointerup?: () => void;

package/dist/types/MaskTypes.d.ts

@@ -0,0 +1,10 @@
+export declare enum MaskTypes {
+    NONE = "none",
+    HORIZONTAL = "horizontal",
+    MIRROR = "mirror",
+    CIRCLE = "circle",
+    RECTANGLE = "rectangle",
+    HEART = "heart",
+    STARS = "stars"
+}
+export type MaskType = MaskTypes;

package/dist/types/OverlayTypes.d.ts

@@ -0,0 +1,9 @@
+export declare enum OverlayTypes {
+    NONE = "none",
+    NORMAL = "normal",
+    LENSFLARE = "lensflare",
+    FILMSTRIP = "filmstrip",
+    GRUNGE = "grunge",
+    BRICKS = "bricks"
+}
+export type OverlayType = OverlayTypes;

package/dist/types/aep/asset.d.ts

@@ -0,0 +1,43 @@
+import { z } from 'zod';
+export declare const aepAssetKindSchema: z.ZodEnum<["image", "video", "audio", "lottie", "gif", "svg", "font", "composition"]>;
+export type AepAssetKind = z.infer<typeof aepAssetKindSchema>;
+export declare const aepAssetSchema: z.ZodObject<{
+    type: z.ZodEnum<["image", "video", "audio", "lottie", "gif", "svg", "font", "composition"]>;
+    src: z.ZodString;
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    duration: z.ZodOptional<z.ZodNumber>;
+}, "strict", z.ZodTypeAny, {
+    src: string;
+    type: "font" | "audio" | "video" | "svg" | "image" | "lottie" | "gif" | "composition";
+    duration?: number | undefined;
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    src: string;
+    type: "font" | "audio" | "video" | "svg" | "image" | "lottie" | "gif" | "composition";
+    duration?: number | undefined;
+    height?: number | undefined;
+    width?: number | undefined;
+}>;
+export type AepAsset = z.infer<typeof aepAssetSchema>;
+export declare const aepAssetMapSchema: z.ZodRecord<z.ZodString, z.ZodObject<{
+    type: z.ZodEnum<["image", "video", "audio", "lottie", "gif", "svg", "font", "composition"]>;
+    src: z.ZodString;
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    duration: z.ZodOptional<z.ZodNumber>;
+}, "strict", z.ZodTypeAny, {
+    src: string;
+    type: "font" | "audio" | "video" | "svg" | "image" | "lottie" | "gif" | "composition";
+    duration?: number | undefined;
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    src: string;
+    type: "font" | "audio" | "video" | "svg" | "image" | "lottie" | "gif" | "composition";
+    duration?: number | undefined;
+    height?: number | undefined;
+    width?: number | undefined;
+}>>;
+export type AepAssetMap = z.infer<typeof aepAssetMapSchema>;