reacthub-pixitweenjs 0.2.107-alpha.98 → 0.2.107-test.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Chroma Software Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -16,19 +16,16 @@ Make sure you install the devDependencies in your project.
 
 ```js
 npm install
-    "@pixi-essentials/react-bindings": "2.0.0",
-    "@pixi-essentials/transformer": "2.5.6",
-    "@pixi/assets": "6.5.9",
-    "@pixi/basis": "6.5.9",
-    "@pixi/filter-adjustment": "5.1.1",
-    "@pixi/gif": "1.1.3",
-    "@pixi/interaction": "6.5.9",
-    "@pixi/picture": "^3.0.3",
-    "@pixi/react": "7.0.0",
-    "@pixi/sound": "^4.3.1",
-    "pixi-filters": "5.1.1",
-    "pixi-svg": "3.2.0",
-    "pixi.js": "6.5.9",
+    "@pixi/gif": "^2.1.0",
+    "@pixi/react": "~7.1.0",
+    "@pixi/sound": "^5.2.1",
+    "pixi-filters": "^5.2.1",
+    "pixi-svg": "^3.2.0",
+    "pixi.js": "^7.2.3",
+    "gsap": "3.11.5",
+    "howler": "^2.2.3",
+    "lottie-web": "^5.10.2",
+    "react-custom-events": "^1.1.1",
 ```
 
 ## Description
@@ -37,4 +34,28 @@ PixiTweenJs is designed to help you build animated time-controlled canvas elemen
 
 ## Usage
 
-Visit the [storybook](https://64b9d71094fa7aed0c7291cf-bpnkkrlkgw.chromatic.com)
+Visit the [storybook](https://pixitweenjs.xyz/)
+
+## Documentation
+
+## License
+
+This library is licensed under the MIT License. See the LICENSE.md file for details.
+
+Note: This library comes with restrictions. You are not allowed to copy, modify, or sell this library or any derivative work on behalf of the original author. Usage is permitted only under the terms specified in the license.
+
+For example:
+
+- Allowed: Use in personal and non-commercial projects.
+- Not Allowed: Copying, modification, or commercial use without explicit permission.
+
+## Contributing
+
+Want to contribute to pixitweenjs? Our [contributing guide](Contribution.md) has you covered.
+
+## See also
+
+- [editly](https://github.com/mifi/editly) - Declarative video API I also created earlier
+- [remotion](https://github.com/remotion-dev/remotion) - Great inspiration
+
+Made with ❤️ in 🇦🇺

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-type PixiAudioSpriteProps = {
+import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
+export interface PixiAudioSpriteProps extends PixiBaseSpriteProps {
     uniqueId: string;
     src: string;
     startAt: number;
@@ -9,6 +10,6 @@ type PixiAudioSpriteProps = {
     mute: boolean;
     speed: number;
     visible: boolean;
-};
-declare const PixiAudioSprite: React.FC<PixiAudioSpriteProps>;
+}
+declare const PixiAudioSprite: React.ForwardRefExoticComponent<PixiAudioSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiAudioSprite;

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

@@ -1,18 +1,9 @@
 /// <reference types="react" />
 import type { StoryObj } from "@storybook/react";
+import { Waveforms } from "../../types/Effects";
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        uniqueId: string;
-        src: string;
-        startAt: number;
-        endAt: number;
-        audioStartAt: number;
-        audioEndAt: number;
-        mute: boolean;
-        speed: number;
-        visible: boolean;
-    }>;
+    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: {
@@ -52,11 +43,63 @@ declare const meta: {
             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;
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
+export declare const Visualization: Story;
 export declare const Speech: Story;
-export declare const Customized: Story;
+export declare const Muted: Story;
 export declare const SplitPosition: Story;

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import AudioMotionAnalyzer from "audiomotion-analyzer";
+import { PixiBaseSpriteProps } from "../../types/BaseProps";
+export type AudioVisualizerProps = Partial<PixiBaseSpriteProps> & {
+    uniqueId: string;
+    src: string;
+    muted?: boolean;
+    volume?: number;
+    loop?: boolean;
+    playbackRate?: number;
+    visible?: boolean;
+};
+declare const useAudioVisualizer: (audioProps: AudioVisualizerProps) => {
+    audioMotionRef: React.MutableRefObject<AudioMotionAnalyzer | undefined>;
+    blobUrl: string;
+    canvasRef: React.MutableRefObject<HTMLDivElement | undefined>;
+};
+export default useAudioVisualizer;

package/dist/components/PixiAudioSprite/wave-config.d.ts

@@ -0,0 +1,4 @@
+import { Waveforms } from "../../types/Effects";
+import { Options, ConstructorOptions } from "audiomotion-analyzer";
+export type WaveConfigOptions = Partial<ConstructorOptions & Options>;
+export declare const waveConfig: Record<Waveforms, WaveConfigOptions>;

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

@@ -145,6 +145,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
+export declare const Multiple: Story;
 export declare const FadeIn: Story;
 export declare const Filters: Story;
 export declare const SplitPosition: Story;

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { PixiBaseSpriteProps, ForwardedRefResponse } from "../../types/BaseProps";
+export interface PixiLottieSpriteProps extends PixiBaseSpriteProps {
+    uniqueId: string;
+    src: string;
+    startAt: number;
+    endAt: number;
+    frameStartAt: number;
+    frameEndAt: number;
+    locked: boolean;
+    loop: boolean;
+}
+declare const PixiLottieSprite: React.ForwardRefExoticComponent<PixiLottieSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
+export default PixiLottieSprite;

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

@@ -0,0 +1,149 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./PixiLottieSprite").PixiLottieSpriteProps & import("react").RefAttributes<import("../../types").ForwardedRefResponse | null>>;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+    argTypes: {
+        uniqueId: {
+            control: string;
+            description: string;
+        };
+        src: {
+            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;
+            };
+            colorCorrection: {
+                control: string;
+                description: string;
+                brightness: {
+                    control: string;
+                    description: string;
+                };
+                contrast: {
+                    control: string;
+                    description: string;
+                };
+                saturation: {
+                    control: string;
+                    description: string;
+                };
+                alpha: {
+                    control: string;
+                    description: string;
+                };
+            };
+        };
+        applyTransformer: {
+            control: string;
+            description: string;
+        };
+        startAt: {
+            control: string;
+            description: string;
+        };
+        endAt: {
+            control: string;
+            description: string;
+        };
+        frameStartAt: {
+            control: string;
+            description: string;
+        };
+        frameEndAt: {
+            control: string;
+            description: string;
+        };
+        visible: {
+            control: string;
+            description: string;
+        };
+        onAnchorTransformationEnd: {
+            action: string;
+            description: string;
+        };
+        pointerdown: {
+            action: string;
+            description: string;
+        };
+        pointerup: {
+            action: string;
+            description: string;
+        };
+        mousedown: {
+            action: string;
+            description: string;
+        };
+        mouseup: {
+            action: string;
+            description: string;
+        };
+        pointerover: {
+            action: string;
+            description: string;
+        };
+        mouseover: {
+            action: string;
+            description: string;
+        };
+        mouseout: {
+            action: string;
+            description: string;
+        };
+        pointerout: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const Filter: Story;
+export declare const FadeIn: Story;

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

@@ -0,0 +1 @@
+export { default as PixiLottieSprite } from "./PixiLottieSprite";

package/dist/components/PixiTransformer/MenuIcons.d.ts

@@ -0,0 +1,40 @@
+declare const MENUS_ICONS: {
+    ARROW_DOWN: string;
+    ARROW_UP: string;
+    COLOR: string;
+    COPY: string;
+    DELETE: string;
+    TRASH: string;
+    EYE: string;
+    EYE_SLASH: string;
+    LOCK: string;
+    UNLOCK: string;
+    PASTE: string;
+    PENCIL: string;
+    PLUS: string;
+    MINUS: string;
+    ROTATE: string;
+    SCALE: string;
+    SAVE: string;
+    RESET: string;
+    SETTINGS: string;
+    ZOOM_IN: string;
+    ZOOM_OUT: string;
+    ALIGN_LEFT: string;
+    ALIGN_CENTER: string;
+    ALIGN_RIGHT: string;
+    DISTRIBUTE_HORIZONTALLY: string;
+    DISTRIBUTE_VERTICALLY: string;
+    FLIP_HORIZONTAL: string;
+    FLIP_VERTICAL: string;
+    ROTATE_LEFT: string;
+    ROTATE_RIGHT: string;
+    SCALE_DOWN: string;
+    SCALE_UP: string;
+    ADJUST_EQUALISER: string;
+    ADJUST_EQUALISER_SLIDERS: string;
+    ADJUST_HORIZONTAL_SLIDERS: string;
+    COLOR_FILL: string;
+};
+declare const MAX_RECENT_COLORS = 10;
+export { MENUS_ICONS, MAX_RECENT_COLORS };

package/dist/components/PixiTransformer/MenuUtils.d.ts

@@ -0,0 +1,2 @@
+import * as PIXI from "pixi.js";
+export declare const createColorPreviewGraphics: (color: string, size: number) => PIXI.Graphics;

package/dist/components/PixiTransformer/PixiColorPicker.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface Position {
+    x: number;
+    y: number;
+}
+interface ColorPickerPortalProps {
+    position: Position;
+    color: string;
+    onChange: (color: string) => void;
+    onClose: () => void;
+    recentColors?: string[];
+}
+declare const ColorPickerPortal: ({ position, color, onChange, onClose, }: ColorPickerPortalProps) => React.ReactPortal;
+export default ColorPickerPortal;

package/dist/components/PixiTransformer/PixiDropdownMenu.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import * as PIXI from "pixi.js";
+interface AlignmentOption {
+    icon: string;
+    label: string;
+    action: () => void;
+}
+interface DropdownPosition {
+    x: number;
+    y: number;
+}
+declare const useDropDownMenu: (setShowAlignmentDropdown: (show: boolean) => void) => {
+    createMenu: (showAlignmentDropdown: boolean, alignmentOptions: AlignmentOption[], dropdownPosition: DropdownPosition) => (() => void) | undefined;
+    dropdownRef: import("react").MutableRefObject<PIXI.Container<PIXI.DisplayObject> | null>;
+};
+export default useDropDownMenu;

package/dist/components/PixiTransformer/PixiMenuText.d.ts

@@ -0,0 +1,2 @@
+import * as PIXI from "pixi.js";
+export declare const style: PIXI.TextStyle;

package/dist/components/PixiTransformer/PixiTransformer.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { Transformer } from "reacthub-react-bindings";
 type PixiTransformerProps = {
-    pixiTransformerRef: React.MutableRefObject<any>;
+    pixiTransformerRef: React.MutableRefObject<Transformer>;
     imageRef: React.MutableRefObject<any>;
     isMounted: boolean;
     transformCommit?: (data: any) => void;

package/dist/components/PixiTransformer/PixiTransformerMenu.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Transformer } from "@pixi-essentials/transformer";
+interface TransformerMenuProps {
+    PixiTransformer: React.MutableRefObject<Transformer>;
+    uniqueId: string;
+    isText: boolean;
+}
+export declare const TransformerMenu: ({ PixiTransformer }: TransformerMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PixiVideoSprite/PixiVideoSprite.d.ts

@@ -16,6 +16,7 @@ export interface PixiVideoSpriteProps extends PixiBaseSpriteProps {
     mouseout?: () => void;
     applyTransformer?: boolean;
     onAnchorTransformationEnd?: (endData: any) => void;
+    fps?: number;
 }
 declare const PixiVideoSprite: React.ForwardRefExoticComponent<PixiVideoSpriteProps & React.RefAttributes<ForwardedRefResponse | null>>;
 export default PixiVideoSprite;

package/dist/components/index.d.ts

@@ -7,3 +7,4 @@ export * from "./PixiVideoSprite";
 export * from "./PixiAnimatedSprite";
 export * from "./PixiSequence";
 export * from "./PixiRemotionSprite";
+export * from "./PixiLottieSprite";