reacthub-pixitweenjs 0.2.109-alpha.5 → 0.2.109-alpha.7

package/README.md

@@ -1,5 +1,11 @@
 <div align="center">
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/khanzzirfan/reacthub-pixitweenjs/main/src/assets/svg/pixitweenjs-logo-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/khanzzirfan/reacthub-pixitweenjs/main/src/assets/svg/pixitweenjs-logo.svg">
+  <img src="https://raw.githubusercontent.com/khanzzirfan/reacthub-pixitweenjs/main/src/assets/svg/pixitweenjs-logo.svg" alt="PixiTweenJS Logo" width="500">
+</picture>
+
 # ✨ Reacthub PixiTweenJS ✨
 
 **A powerful library for creating stunning animated, time-controlled canvas elements in React using PixiJS, GSAP, and more**

package/dist/assets/icon/transformericons/icons.d.ts

@@ -0,0 +1,8 @@
+export declare const opacityIcon: () => string;
+export declare const roundCornersIcon: () => string;
+export declare const deleteIcon: () => string;
+export declare const copyIcon: () => string;
+export declare const orderIcon: () => string;
+export declare const saveIcon: () => string;
+export declare const replaceImageIcon: () => string;
+export declare const chevronRightIcon: () => string;

package/dist/components/PixiAudioSprite/PixiAudioSprite.d.ts

@@ -1,5 +1,6 @@
 import { PixiBaseSpriteProps, ForwardedRefResponse } from '../../types/BaseProps';
 import * as React from "react";
+import * as PIXI from "pixi.js";
 export interface PixiAudioSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     src: string;
@@ -10,6 +11,8 @@ export interface PixiAudioSpriteProps extends PixiBaseSpriteProps {
     mute: boolean;
     speed: number;
     visible: boolean;
+    onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
 }
 declare const PixiAudioSprite: React.ForwardRefExoticComponent<PixiAudioSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiAudioSprite;

package/dist/components/PixiAudioSprite/PixiAudioSprite.stories.d.ts

@@ -1,101 +1,7 @@
-import { StoryObj } from '@storybook/react';
-import { Waveforms } from '../../types/Effects';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PixiAudioSprite } from '.';
 
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<import('./PixiAudioSprite').PixiAudioSpriteProps & import('react').RefAttributes<import('../..').ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    tags: string[];
-    argTypes: {
-        uniqueId: {
-            control: string;
-            description: string;
-        };
-        src: {
-            control: string;
-            description: string;
-        };
-        startAt: {
-            control: string;
-            description: string;
-        };
-        endAt: {
-            control: string;
-            description: string;
-        };
-        audioStartAt: {
-            control: string;
-            description: string;
-        };
-        audioEndAt: {
-            control: string;
-            description: string;
-        };
-        mute: {
-            control: string;
-            description: string;
-        };
-        speed: {
-            control: string;
-            description: string;
-        };
-        visible: {
-            control: string;
-            description: string;
-        };
-        transformation: {
-            control: string;
-            description: string;
-            x: {
-                control: string;
-                description: string;
-            };
-            y: {
-                control: string;
-                description: string;
-            };
-            width: {
-                control: string;
-                description: string;
-            };
-            height: {
-                control: string;
-                description: string;
-            };
-            anchor: {
-                control: string;
-                description: string;
-            };
-            rotation: {
-                control: string;
-                description: string;
-            };
-            alpha: {
-                control: string;
-                min: number;
-                max: number;
-                description: string;
-            };
-            scale: {
-                control: string;
-                description: string;
-            };
-            tint: {
-                control: string;
-                description: string;
-            };
-            blendMode: {
-                control: string;
-                description: string;
-            };
-            waveform: {
-                type: string;
-                options: Waveforms[];
-                description: string;
-            };
-        };
-    };
-};
+declare const meta: Meta<typeof PixiAudioSprite>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
@@ -103,3 +9,4 @@ export declare const Visualization: Story;
 export declare const Speech: Story;
 export declare const Muted: Story;
 export declare const SplitPosition: Story;
+export declare const WithUnifiedTransformer: Story;

package/dist/components/PixiGifSprite/PixiGifGsapSync.d.ts

@@ -1,5 +1,6 @@
 import { PixiBaseSpriteProps, ForwardedRefResponse } from '../../types/BaseProps';
 import * as React from "react";
+import * as PIXI from "pixi.js";
 export interface PixiGifSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     src: string;
@@ -9,6 +10,8 @@ export interface PixiGifSpriteProps extends PixiBaseSpriteProps {
     frameEndAt: number;
     locked: boolean;
     loop: boolean;
+    onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
 }
 /**
  * PixiGifSprite Component is used to render gif image

package/dist/components/PixiGifSprite/PixiGifSprite.stories.d.ts

@@ -1,21 +1,22 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
+import * as React from "react";
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./PixiGifGsapSync').PixiGifSpriteProps & import('react').RefAttributes<import('../../types').ForwardedRefResponse | null>>;
+    component: React.ForwardRefExoticComponent<import('./PixiGifGsapSync').PixiGifSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
         uniqueId: {
-            control: string;
+            control: "text";
             description: string;
         };
         src: {
-            control: string;
+            control: "text";
             description: string;
         };
         transformation: {
-            control: string;
+            control: "object";
             description: string;
             x: {
                 control: string;
@@ -81,27 +82,27 @@ declare const meta: {
             };
         };
         applyTransformer: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         startAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         endAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         frameStartAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         frameEndAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         visible: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         onAnchorTransformationEnd: {
@@ -140,6 +141,14 @@ declare const meta: {
             action: string;
             description: string;
         };
+        onContainerRefReady: {
+            action: string;
+            description: string;
+        };
+        onSpriteRefReady: {
+            action: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -151,3 +160,4 @@ export declare const Filters: Story;
 export declare const SplitPosition: Story;
 export declare const SplitStartPos: Story;
 export declare const StipopGif: Story;
+export declare const WithUnifiedTransformer: Story;

package/dist/components/PixiImageSprite/PixiImageSprite.d.ts

@@ -1,4 +1,8 @@
 import { PixiBaseSpriteProps, ForwardedRefResponse } from '../../types/BaseProps';
 import * as React from "react";
-declare const PixiImageSprite: React.ForwardRefExoticComponent<PixiBaseSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
+import * as PIXI from "pixi.js";
+declare const PixiImageSprite: React.ForwardRefExoticComponent<PixiBaseSpriteProps & {
+    onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+} & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiImageSprite;

package/dist/components/PixiImageSprite/PixiImageSprite.stories.d.ts

@@ -1,22 +1,27 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { Effects } from '../../types/Effects';
 
+import * as React from "react";
+import * as PIXI from "pixi.js";
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('../../types').PixiBaseSpriteProps & import('react').RefAttributes<import('../../types').ForwardedRefResponse | null>>;
+    component: React.ForwardRefExoticComponent<import('../..').PixiBaseSpriteProps & {
+        onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+        onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    } & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
         uniqueId: {
-            control: string;
+            control: "text";
             description: string;
         };
         src: {
-            control: string;
+            control: "text";
             description: string;
         };
         transformation: {
-            control: string;
+            control: "object";
             description: string;
             x: {
                 control: string;
@@ -91,25 +96,33 @@ declare const meta: {
             };
         };
         applyTransformer: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         startAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         endAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         visible: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         onAnchorTransformationEnd: {
             action: string;
             description: string;
         };
+        onContainerRefReady: {
+            action: string;
+            description: string;
+        };
+        onSpriteRefReady: {
+            action: string;
+            description: string;
+        };
         pointerdown: {
             action: string;
             description: string;
@@ -132,5 +145,6 @@ export declare const Filters: Story;
 export declare const FilterEffects: Story;
 export declare const Overlays: Story;
 export declare const PointerTests: Story;
+export declare const WithUnifiedTransformer: Story;
 export declare const Animation: Story;
 export declare const PointerAnimation: Story;

package/dist/components/PixiLottieSprite/PixiLottieSprite.d.ts

@@ -1,5 +1,6 @@
 import { PixiBaseSpriteProps, ForwardedRefResponse } from '../../types/BaseProps';
 import * as React from "react";
+import * as PIXI from "pixi.js";
 export interface PixiLottieSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     src: string;
@@ -9,6 +10,8 @@ export interface PixiLottieSpriteProps extends PixiBaseSpriteProps {
     frameEndAt: number;
     locked: boolean;
     loop: boolean;
+    onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
 }
 declare const PixiLottieSprite: React.ForwardRefExoticComponent<PixiLottieSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiLottieSprite;

package/dist/components/PixiLottieSprite/PixiLottieSprite.stories.d.ts

@@ -1,21 +1,22 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
+import * as React from "react";
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./PixiLottieSprite').PixiLottieSpriteProps & import('react').RefAttributes<import('../../types').ForwardedRefResponse | null>>;
+    component: React.ForwardRefExoticComponent<import('./PixiLottieSprite').PixiLottieSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
         uniqueId: {
-            control: string;
+            control: "text";
             description: string;
         };
         src: {
-            control: string;
+            control: "text";
             description: string;
         };
         transformation: {
-            control: string;
+            control: "object";
             description: string;
             x: {
                 control: string;
@@ -81,27 +82,27 @@ declare const meta: {
             };
         };
         applyTransformer: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         startAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         endAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         frameStartAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         frameEndAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         visible: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         onAnchorTransformationEnd: {
@@ -140,6 +141,14 @@ declare const meta: {
             action: string;
             description: string;
         };
+        onContainerRefReady: {
+            action: string;
+            description: string;
+        };
+        onSpriteRefReady: {
+            action: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -147,3 +156,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Filter: Story;
 export declare const FadeIn: Story;
+export declare const WithUnifiedTransformer: Story;

package/dist/components/PixiSVGSprite/PixiSvgPathSprite.d.ts

@@ -2,6 +2,7 @@ import { PixiBaseSpriteProps, ForwardedRefResponse } from '../../types/BaseProps
 import { Effects } from '../../types/Effects';
 import { Animations } from '../../types';
 import * as React from "react";
+import * as PIXI from "pixi.js";
 export interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     path: string;
@@ -59,6 +60,8 @@ export interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
     mouseout?: () => void;
     applyTransformer?: boolean;
     onAnchorTransformationEnd?: (endData: any) => void;
+    onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
 }
 declare const PixiSvgPathSprite: React.ForwardRefExoticComponent<PixiSvgPathSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiSvgPathSprite;

package/dist/components/PixiSVGSprite/PixiSvgPathSprite.stories.d.ts

@@ -1,21 +1,22 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
+import * as React from "react";
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./PixiSvgPathSprite').PixiSvgPathSpriteProps & import('react').RefAttributes<import('../../types').ForwardedRefResponse | null>>;
+    component: React.ForwardRefExoticComponent<import('./PixiSvgPathSprite').PixiSvgPathSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
         uniqueId: {
-            control: string;
+            control: "text";
             description: string;
         };
         path: {
-            control: string;
+            control: "text";
             description: string;
         };
         transformation: {
-            control: string;
+            control: "object";
             description: string;
             x: {
                 control: string;
@@ -81,19 +82,19 @@ declare const meta: {
             };
         };
         applyTransformer: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         startAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         endAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         visible: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         onAnchorTransformationEnd: {
@@ -112,6 +113,14 @@ declare const meta: {
             action: string;
             description: string;
         };
+        onContainerRefReady: {
+            action: string;
+            description: string;
+        };
+        onSpriteRefReady: {
+            action: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -119,3 +128,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const FadeIn: Story;
 export declare const Filters: Story;
+export declare const WithUnifiedTransformer: Story;

package/dist/components/PixiSequence/PixiSequence.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
 declare const meta: {
     title: string;
@@ -9,19 +9,19 @@ declare const meta: {
         children: {
             description: string;
             control: {
-                type: string;
+                type: "text";
             };
         };
         startAt: {
             description: string;
             control: {
-                type: string;
+                type: "number";
             };
         };
         endAt: {
             description: string;
             control: {
-                type: string;
+                type: "number";
             };
         };
     };

package/dist/components/PixiTextSprite/PixiTextSprite.d.ts

@@ -2,6 +2,7 @@ import { PixiBaseSpriteProps, ForwardedRefResponse } from '../../types/BaseProps
 import { Effects } from '../../types/Effects';
 import { Animations } from '../../types';
 import * as React from "react";
+import * as PIXI from "pixi.js";
 export interface PixiTextSpriteProps extends PixiBaseSpriteProps {
     text: string;
     startAt: number;
@@ -81,6 +82,8 @@ export interface PixiTextSpriteProps extends PixiBaseSpriteProps {
     onTextUpdate?: (data: any) => void;
     onAnchorTransformationEnd?: (endData: any) => void;
     onDobuleClick?: () => void;
+    onContainerRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
+    onSpriteRefReady?: (uniqueId: string, ref: React.MutableRefObject<PIXI.Container | null>) => void;
 }
 declare const PixiTextSprite: React.ForwardRefExoticComponent<PixiTextSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiTextSprite;

package/dist/components/PixiTextSprite/PixiTextSprite.stories.d.ts

@@ -1,21 +1,22 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
+import * as React from "react";
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./PixiTextSprite').PixiTextSpriteProps & import('react').RefAttributes<import('../../types').ForwardedRefResponse | null>>;
+    component: React.ForwardRefExoticComponent<import('./PixiTextSprite').PixiTextSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];
     argTypes: {
         uniqueId: {
-            control: string;
+            control: "text";
             description: string;
         };
         text: {
-            control: string;
+            control: "text";
             description: string;
         };
         transformation: {
-            control: string;
+            control: "object";
             description: string;
             x: {
                 control: string;
@@ -81,25 +82,33 @@ declare const meta: {
             };
         };
         applyTransformer: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         startAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         endAt: {
-            control: string;
+            control: "number";
             description: string;
         };
         visible: {
-            control: string;
+            control: "boolean";
             description: string;
         };
         onAnchorTransformationEnd: {
             action: string;
             description: string;
         };
+        onContainerRefReady: {
+            action: string;
+            description: string;
+        };
+        onSpriteRefReady: {
+            action: string;
+            description: string;
+        };
         pointerup: {
             action: string;
             description: string;
@@ -128,3 +137,4 @@ export declare const Normal: Story;
 export declare const FadeIn: Story;
 export declare const Filters: Story;
 export declare const Draggable: Story;
+export declare const WithUnifiedTransformer: Story;

package/dist/components/PixiUnifiedTransformer/PixiUnifiedTransformer.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as PIXI from "pixi.js";
+type RefsMap = Record<string, React.MutableRefObject<PIXI.Container | null>>;
+type PixiUnifiedTransformerProps = {
+    selectedElementIds: string[];
+    containerRefsMap: RefsMap;
+    spriteHelperRef?: React.MutableRefObject<any>;
+    mouseOverTransformerRef?: React.MutableRefObject<{
+        isMouseOver?: boolean;
+        isDragging?: boolean;
+        dragType?: string | null;
+    } | null>;
+    isMultiSelect?: boolean;
+    selectedGroupId?: string | null;
+    selectedElementIdInGroup?: string | null;
+    getElementTimeRange?: (uniqueId: string) => {
+        start: number;
+        end: number;
+    } | undefined;
+    getRotationByElementId?: (uniqueId: string) => number | undefined;
+    onDoubleClickElement?: (uniqueId: string) => void;
+    onTransformChange?: (uniqueId: string) => void;
+    onTransformCommit?: (uniqueId: string, endData: any) => void;
+};
+declare const PixiUnifiedTransformer: React.FC<PixiUnifiedTransformerProps>;
+export default PixiUnifiedTransformer;

package/dist/components/PixiUnifiedTransformer/index.d.ts

@@ -0,0 +1 @@
+export { default as PixiUnifiedTransformer } from './PixiUnifiedTransformer';