reacthub-pixitweenjs 0.2.5 → 0.2.6

package/.storybook/preview.tsx

@@ -1,5 +1,11 @@
 import React from "react";
 import { AppWrapper } from "../src/utils/AppWrapper";
+import whyDidYouRender from "@welldone-software/why-did-you-render";
+
+whyDidYouRender(React, {
+  trackAllPureComponents: true,
+});
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.6](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.5...v0.2.6) (2023-08-25)
+
+
+### Features
+
+* added text , gif and svg sprites ([290e6fd](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/290e6fda45ad4954c9ca767945c0863362326af4))
+
+
+### Bug Fixes
+
+* updated pixi svg sprite ([6fe3619](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/6fe3619e0eb9faf0a46d10de7154ad428a21e188))
+* updated pixi text editor ([d4cd8d9](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/d4cd8d97b53fa6210919cd641bfa74d4f7d93f84))
+
 ### [0.2.5](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.4...v0.2.5) (2023-08-23)
 
 

package/README.md

@@ -37,4 +37,4 @@ PixiTweenJs is designed to help you build animated time-controlled canvas elemen
 
 ## Usage
 
-Visit the [storybook](https://64b9d71094fa7aed0c7291cf-sinysbbbmx.chromatic.com/?path=/docs/components-imagesprite--docs)
+Visit the [storybook](https://62ea8f8fe832236b40182334-qwuvdhldjp.chromatic.com/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "reacthub-pixitweenjs is a library that provides a powerful combination of React, PixiJS, GSAP, and image manipulation capabilities in a timeline sequence. With this library, you can easily create stunning animations and interactive graphics for your React applications",
   "author": "khanzzirfan",
   "type": "module",
@@ -55,12 +55,14 @@
     "@testing-library/react": "^14.0.0",
     "@types/dotenv": "^8.2.0",
     "@types/howler": "^2.2.8",
+    "@types/quill": "^2.0.10",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "@welldone-software/why-did-you-render": "^7.0.1",
     "chromatic": "^6.7.3",
     "debug": "^4.3.4",
     "dotenv": "^16.0.1",
@@ -83,6 +85,7 @@
     "pixi-svg": "^3.2.0",
     "pixi.js": "^7.2.3",
     "prop-types": "^15.8.1",
+    "quill": "^1.3.7",
     "react": "^18.2.0",
     "react-custom-events": "^1.1.1",
     "react-dom": "^18.2.0",

package/src/components/PixiAudioSprite/PixiAudioSprite.tsx

@@ -6,7 +6,7 @@ import {
   GsapPixieContext,
   Events,
 } from "../../providers/GsapPixieContextProvider";
-import { Container, useApp } from "@pixi/react";
+import { Container } from "@pixi/react";
 import { useCustomEventListener } from "react-custom-events";
 import gsap from "gsap";
 import { Sound } from "@pixi/sound";
@@ -46,7 +46,7 @@ const PixiAudioSprite: React.FC<PixiAudioSpriteProps> = (props) => {
     isDragging: false,
   };
   //// State
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [, setIsMounted] = React.useState(false);
 
   const audioStateRef = useRef<AudioState>(initialState);
 
@@ -61,9 +61,8 @@ const PixiAudioSprite: React.FC<PixiAudioSpriteProps> = (props) => {
 
   /// 1001
   // console.log("contxt Values", tl);
-  const { uniqueId, src, startAt, endAt, mute, speed, ...restProps } = props;
+  const { uniqueId, src, startAt, endAt, mute, speed } = props;
 
-  const app = useApp();
   const audioContainerRef = React.useRef<Sound>(null);
 
   /** Adding custom event listners */
@@ -94,15 +93,6 @@ const PixiAudioSprite: React.FC<PixiAudioSpriteProps> = (props) => {
     }
   };
 
-  const gsapOnPause = (startAt: number) => {
-    if (containerRef.current) {
-      console.log("audio gsapOnStart", startAt);
-      // @ts-ignore
-      audioContainerRef.current?.pause();
-      audioStateRef.current.isPlaying = false;
-    }
-  };
-
   const gsapOnComplete = () => {
     if (containerRef.current) {
       console.log("audio gsapOnStart", startAt);
@@ -131,7 +121,7 @@ const PixiAudioSprite: React.FC<PixiAudioSpriteProps> = (props) => {
     }
   };
 
-  const onInterrupt = (startAt: number) => {};
+  const onInterrupt = () => {};
 
   useEffect(() => {
     let ctx = gsap.context(() => {});
@@ -178,7 +168,7 @@ const PixiAudioSprite: React.FC<PixiAudioSpriteProps> = (props) => {
   }, [mute, speed]);
 
   const onSoundLoaded = React.useCallback(
-    (err: any, sound: Sound | undefined) => {
+    (_: any, sound: Sound | undefined) => {
       //@ts-ignore
       audioContainerRef.current = sound;
       audioStateRef.current.loaded = true;

package/src/components/PixiGifSprite/PixiGifSprite.tsx

@@ -5,8 +5,7 @@ import map from "lodash/map";
 // @ts-ignore
 import PropTypes from "prop-types";
 import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
-import { Container, useApp, withFilters, Graphics } from "@pixi/react";
-import { AdjustmentFilter } from "@pixi/filter-adjustment";
+import { Container, useApp, Graphics } from "@pixi/react";
 import * as PIXI from "pixi.js";
 import gsap from "gsap";
 import { useWorkerParser, usePlayerState } from "@react-gifs/tools";
@@ -72,42 +71,6 @@ type PixiGifSpriteProps = {
   onAnchorTransformationEnd?: (endData: any) => void;
 };
 
-type EffectFunc = () => void;
-type Deps = ReadonlyArray<unknown>;
-
-const Filters = withFilters(Container, {
-  blur: PIXI.filters.BlurFilter,
-  adjust: AdjustmentFilter,
-  matrix: PIXI.filters.ColorMatrixFilter,
-});
-
-/** filter config */
-const config = {
-  dot: {
-    scale: 1,
-    angle: 5,
-  },
-  blur: {
-    blur: 0,
-    quality: 4,
-  },
-};
-
-/** CYAN Filters */
-const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
-
-const initialState = {
-  isPlaying: false,
-  progress: 0,
-  speed: 1,
-  isMuted: false,
-  isWaiting: false,
-  loaded: false,
-  size: { width: 50, height: 50 },
-  play: false,
-  current: false,
-};
-
 /**
  * PixiGifSprite Component is used to render gif image
  * @param props Gif Sprite props
@@ -120,15 +83,14 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
   const [gifFrameObject, setGifFrameObject] = React.useState<
     PIXI.FrameObject[]
   >([]);
-  const [currentFrame, setCurrentFrame] = useState<number>(0);
-  const [isComplete, setIsComplete] = useState<boolean>(false);
+  const [, setCurrentFrame] = useState<number>(0);
+  const [, setIsComplete] = useState<boolean>(false);
 
   const [isDragging, setIsDragging] = useState(false);
-  const [isMouseOverTransformer, setIsMouseOverTransformer] = useState(false);
+  const [, setIsMouseOverTransformer] = useState(false);
 
   const [gifState, update] = usePlayerState({ autoPlay: false });
   const graphicRef = React.useRef<PIXI.Graphics>(null);
-  const gifStatusRef = React.useRef(false);
 
   console.log("allProps", props);
   //// Refs
@@ -144,13 +106,7 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
   /// 1001
   console.log("contxt Values", tl);
   console.log("gifState", gifState, gifDuration);
-  const {
-    index,
-    frames: gifFrames,
-    delays: gifDelays,
-    length,
-    loaded,
-  } = gifState;
+  const { frames: gifFrames, delays: gifDelays, loaded } = gifState;
 
   const {
     uniqueId,
@@ -167,10 +123,7 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
       y,
       rotation = 0,
       scale,
-      anchor,
       animation,
-      colorCorrection,
-      effect,
     },
     pointerdown,
     pointerup,
@@ -182,41 +135,12 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
     pointerout,
     applyTransformer,
     onAnchorTransformationEnd,
-    ...restProps
   } = props;
 
   // color corrections
-  const {
-    enabled = false,
-    temperature = 1,
-    hue = 1,
-    contrast = 1,
-    saturation = 1,
-    exposure = 1,
-    reset,
-    sharpness = 1,
-    value = 0,
-    levels = 1,
-    luminance = 0,
-    enhance = 0,
-    blurRadius = 0,
-    red = 150,
-    green = 150,
-    blue = 150,
-    alpha = 1,
-    scaleInput = 1,
-  } = colorCorrection || {};
 
   const app = useApp();
 
-  /** adjustment filter */
-  const adjustments = {
-    brightness: exposure,
-    contrast,
-    saturation,
-    alpha,
-  };
-
   //  load and parse gif
   useWorkerParser(src, update);
 
@@ -270,14 +194,6 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
     }
   };
 
-  const gsapOnPause = (startAt: number) => {
-    // console.log(`gsap onStart ${droptype} id`, refId);
-    // console.log(elementRefs.current[refId]);
-    if (animatedSpriteRef.current) {
-      animatedSpriteRef.current.stop();
-    }
-  };
-
   const gsapOnComplete = () => {
     if (animatedSpriteRef.current) {
       animatedSpriteRef.current.stop();
@@ -426,6 +342,11 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
                   pointerdown: pointerdown,
                   pointerover: pointerover,
                   pointerout: pointerout,
+                  pointerup: pointerup,
+                  mousedown: mousedown,
+                  mouseup: mouseup,
+                  mouseover: mouseover,
+                  mouseout: mouseout,
                 })}
               forwardRef={animatedSpriteRef}
               scale={scale}

package/src/components/PixiImageSprite/PixiImageSprite.tsx

@@ -3,7 +3,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 // @ts-ignore
 import PropTypes from "prop-types";
 import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
-import { Sprite, Container, useApp, withFilters } from "@pixi/react";
+import { Sprite, Container, withFilters } from "@pixi/react";
 import { AdjustmentFilter } from "@pixi/filter-adjustment";
 import * as PIXI from "pixi.js";
 import gsap from "gsap";
@@ -65,35 +65,20 @@ type PixiImageSpriteProps = {
   onAnchorTransformationEnd?: (endData: any) => void;
 };
 
-type EffectFunc = () => void;
-type Deps = ReadonlyArray<unknown>;
-
 const Filters = withFilters(Container, {
   blur: PIXI.filters.BlurFilter,
   adjust: AdjustmentFilter,
   matrix: PIXI.filters.ColorMatrixFilter,
 });
 
-/** filter config */
-const config = {
-  dot: {
-    scale: 1,
-    angle: 5,
-  },
-  blur: {
-    blur: 0,
-    quality: 4,
-  },
-};
-
 /** CYAN Filters */
 const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
 
 const PixiImageSprite: React.FC<PixiImageSpriteProps> = (props) => {
   //// State
   const [isMounted, setIsMounted] = React.useState(false);
-  const [isTransformerDragging, setIsTransformerDragging] = useState(false);
-  const [isMouseOverTransformer, setIsMouseOverTransformer] = useState(false);
+  const [, setIsTransformerDragging] = useState(false);
+  const [, setIsMouseOverTransformer] = useState(false);
 
   console.log("allProps", props);
   //// Refs
@@ -133,33 +118,17 @@ const PixiImageSprite: React.FC<PixiImageSpriteProps> = (props) => {
     mouseout,
     applyTransformer,
     onAnchorTransformationEnd,
-    ...restProps
   } = props;
 
   // color corrections
   const {
-    enabled = false,
-    temperature = 1,
-    hue = 1,
     contrast = 1,
     saturation = 1,
     exposure = 1,
-    reset,
-    sharpness = 1,
-    value = 0,
-    levels = 1,
-    luminance = 0,
-    enhance = 0,
     blurRadius = 0,
-    red = 150,
-    green = 150,
-    blue = 150,
     alpha = 1,
-    scaleInput = 1,
   } = colorCorrection || {};
 
-  const app = useApp();
-
   /** adjustment filter */
   const adjustments = {
     brightness: exposure,

package/src/components/PixiSVGSprite/PixiSvgPathSprite.stories.tsx

@@ -13,9 +13,9 @@ const meta = {
       control: "text",
       description: "uniqueId of the sprite",
     },
-    src: {
+    path: {
       control: "text",
-      description: "source of the image",
+      description: "source of the svg path",
     },
     transformation: {
       control: "object",

package/src/components/PixiSVGSprite/PixiSvgPathSprite.tsx

@@ -73,38 +73,22 @@ type PixiSvgPathSpriteProps = {
   onAnchorTransformationEnd?: (endData: any) => void;
 };
 
-type EffectFunc = () => void;
-type Deps = ReadonlyArray<unknown>;
-
 const Filters = withFilters(Container, {
   blur: PIXI.filters.BlurFilter,
   adjust: AdjustmentFilter,
   matrix: PIXI.filters.ColorMatrixFilter,
 });
 
-/** filter config */
-const config = {
-  dot: {
-    scale: 1,
-    angle: 5,
-  },
-  blur: {
-    blur: 0,
-    quality: 4,
-  },
-};
-
 /** CYAN Filters */
 const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
 
 const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
   //// State
   const [isMounted, setIsMounted] = React.useState(false);
-  const [isTransformerDragging, setIsTransformerDragging] = useState(false);
-  const [isMouseOverTransformer, setIsMouseOverTransformer] = useState(false);
+  const [, setIsTransformerDragging] = useState(false);
+  const [, setIsMouseOverTransformer] = useState(false);
   const [texture, setTexture] = React.useState<any>(null);
 
-  console.log("allProps", props);
   //// Refs
   const imageRef = useRef<PIXI.Sprite>(null);
   const containerRef = useRef<PIXI.Container>(null);
@@ -133,8 +117,6 @@ const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
       colorCorrection,
       effect,
       fill,
-      fontWeight,
-      fontStyle,
       stroke = "none",
       strokeWidth = 0,
       blurRadius = 0,
@@ -148,28 +130,14 @@ const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
     mouseout,
     applyTransformer,
     onAnchorTransformationEnd,
-    ...restProps
   } = props;
 
   // color corrections
   const {
-    enabled = false,
-    temperature = 1,
-    hue = 1,
     contrast = 1,
     saturation = 1,
     exposure = 1,
-    reset,
-    sharpness = 1,
-    value = 0,
-    levels = 1,
-    luminance = 0,
-    enhance = 0,
-    red = 150,
-    green = 150,
-    blue = 150,
     alpha = 1,
-    scaleInput = 1,
   } = colorCorrection || {};
 
   const app = useApp();
@@ -182,7 +150,7 @@ const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
     alpha,
   };
 
-  const fillColor = PIXI.utils.string2hex(fill || "#262730");
+  // const fillColor = PIXI.utils.string2hex(fill || "#262730");
 
   /** handle on tranformer onchange */
   const handleOnTransformChange = React.useCallback(() => {

package/src/components/PixiTextSprite/PixiTextSprite.stories.tsx

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiTextSprite } from ".";
+import { AppStateContextProvider } from "../../utils/AppStateProvider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "Components/TextSprite",
+  component: PixiTextSprite,
+
+  tags: ["autodocs"],
+  argTypes: {
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
+    },
+    text: {
+      control: "text",
+      description: "Text to be displayed",
+    },
+    transformation: {
+      control: "object",
+      description: "transformation of the sprite",
+      x: { control: "number", description: "x position of the sprite" },
+      y: { control: "number", description: "y position of the sprite" },
+      width: { control: "number", description: "width of the sprite" },
+      height: { control: "number", description: "height of the sprite" },
+      anchor: { control: "number", description: "anchor of the sprite" },
+      rotation: { control: "number", description: "rotation of the sprite" },
+      alpha: {
+        control: "number",
+        min: 0,
+        max: 1,
+        description: "alpha of the sprite",
+      },
+      scale: { control: "number", description: "scale of the sprite" },
+      tint: { control: "number", description: "tint of the sprite" },
+      blendMode: { control: "number", description: "blendMode of the sprite" },
+      colorCorrection: {
+        control: "object",
+        description: "colorCorrection of the sprite",
+        brightness: {
+          control: "number",
+          description: "brightness of the sprite",
+        },
+        contrast: { control: "number", description: "contrast of the sprite" },
+        saturation: {
+          control: "number",
+          description: "saturation of the sprite",
+        },
+        alpha: { control: "number", description: "alpha of the sprite" },
+      },
+    },
+    applyTransformer: { control: "boolean", description: "applyTransformer" },
+    startAt: { control: "number", description: "startAt" },
+    endAt: { control: "number", description: "endAt" },
+    initialAlpha: {
+      control: "number",
+      min: 0,
+      max: 1,
+      description: "sprite initial alpha value (default  1)",
+    },
+    onAnchorTransformationEnd: {
+      action: "onAnchorTransformationEnd",
+      description:
+        "on transforamtion end the event is fire callback with latest sprite transformation properties.",
+    },
+    pointerdown: {
+      action: "pointerdown",
+      description: "pointerdown event",
+    },
+
+    pointerup: {
+      action: "pointerup",
+      description: "pointerup event",
+    },
+    onTextUpdate: {
+      action: "onTextUpdate",
+      description: "onTextUpdate event",
+    },
+  },
+} satisfies Meta<typeof PixiTextSprite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiTextSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "TextSpritexx001", // uniqueId of the sprite
+    text: "Hello Welcome to PixiJS",
+    locked: false,
+    applyTransformer: false,
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      blendMode: 0,
+      colorCorrection: {},
+      fill: "#00ff99",
+      fontSize: 80,
+      fontFamily: "Arial",
+      align: "center",
+      stroke: "#522d2d",
+      strokeThickness: 0,
+      letterSpacing: 0,
+      lineHeight: 0,
+      dropShadow: false,
+      dropShadowColor: "#522d2d",
+      dropShadowBlur: 0,
+      wordWrap: false,
+      wordWrapWidth: 5000000,
+      padding: 10,
+      textBaseline: "alphabetic",
+      trim: false,
+    },
+    startAt: 0,
+    endAt: 10,
+    initialAlpha: 1,
+  },
+};
+
+export const FadeIn: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiTextSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "TextSprite001", // uniqueId of the sprite
+    text: "Hello Welcome to PixiJS",
+    locked: false,
+    applyTransformer: false,
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      colorCorrection: {},
+      fill: "#00ff99",
+      fontSize: 20,
+      fontFamily: "Arial",
+      align: "center",
+      stroke: 0x000000,
+      strokeThickness: 0,
+      letterSpacing: 0,
+      lineHeight: 0,
+      dropShadow: false,
+      dropShadowColor: 0x000000,
+      dropShadowBlur: 0,
+      wordWrap: false,
+      wordWrapWidth: 100,
+      padding: 0,
+      textBaseline: "alphabetic",
+      trim: false,
+    },
+    startAt: 0,
+    endAt: 10,
+    initialAlpha: 0,
+  },
+};