reacthub-pixitweenjs 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.8](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.7...v0.2.8) (2023-08-27)
+
+
+### Bug Fixes
+
+* exported all pixi elements ([cec8ce1](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/cec8ce10588432fd775b6cd3cbb22118b034c4ca))
+
+### [0.2.7](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.6...v0.2.7) (2023-08-27)
+
+
+### Features
+
+* reupdated the filters and hoc wrappers ([0083847](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/00838477793b342453341f1dbd3e418c66f02619))
+
+
+### Bug Fixes
+
+* filters applied on all video and other elements ([19100d0](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/19100d0f16d7f7be4ad0f4622a1b9f67765b3134))
+* pixi fixed colorization component ([8ca4c32](https://github.com/khanzzirfan/reacthub-pixitweenjs/commit/8ca4c326514eb6c677c1460323afe92c34c25060))
+
 ### [0.2.6](https://github.com/khanzzirfan/reacthub-pixitweenjs/compare/v0.2.5...v0.2.6) (2023-08-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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",

package/src/components/PixiGifSprite/PixiGifSprite.stories.tsx

@@ -114,11 +114,14 @@ export const Normal: Story = {
     src: "https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif",
     locked: false,
     loop: false,
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 4,
     transformation: {
-      x: 100,
-      y: 100,
-      width: 150,
-      height: 150,
+      x: 200,
+      y: 200,
+      width: 200,
+      height: 200,
       anchor: 0.5,
       rotation: 0,
       alpha: 1,
@@ -127,9 +130,43 @@ export const Normal: Story = {
       blendMode: 0,
       colorCorrection: {},
     },
+    initialAlpha: 1,
+  },
+};
+
+export const Filters: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiGifSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "suryaGify001", // uniqueId of the sprite
+    src: "https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif",
+    locked: false,
+    loop: false,
     applyTransformer: false,
     startAt: 0,
     endAt: 4,
+    transformation: {
+      x: 200,
+      y: 200,
+      width: 200,
+      height: 200,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      colorCorrection: {
+        enabled: true,
+        contrast: 2,
+        saturation: 2,
+        exposure: 2,
+        blurRadius: 1,
+      },
+    },
     initialAlpha: 1,
   },
 };

package/src/components/PixiGifSprite/PixiGifSprite.tsx

@@ -5,7 +5,8 @@ import map from "lodash/map";
 // @ts-ignore
 import PropTypes from "prop-types";
 import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
-import { Container, useApp, Graphics } from "@pixi/react";
+import { Container, useApp, Graphics, withFilters } from "@pixi/react";
+import { AdjustmentFilter } from "@pixi/filter-adjustment";
 import * as PIXI from "pixi.js";
 import gsap from "gsap";
 import { useWorkerParser, usePlayerState } from "@react-gifs/tools";
@@ -71,6 +72,15 @@ type PixiGifSpriteProps = {
   onAnchorTransformationEnd?: (endData: any) => void;
 };
 
+const Filters = withFilters(Container, {
+  blur: PIXI.filters.BlurFilter,
+  adjust: AdjustmentFilter,
+  matrix: PIXI.filters.ColorMatrixFilter,
+});
+
+/** CYAN Filters */
+const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+
 /**
  * PixiGifSprite Component is used to render gif image
  * @param props Gif Sprite props
@@ -79,7 +89,7 @@ type PixiGifSpriteProps = {
 const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
   //// State
   const [gifFrame, setGifFrame] = React.useState<PIXI.Texture[]>([]);
-  const [gifDuration, setGifDuration] = React.useState<number>(0);
+  const [, setGifDuration] = React.useState<number>(0);
   const [gifFrameObject, setGifFrameObject] = React.useState<
     PIXI.FrameObject[]
   >([]);
@@ -92,7 +102,6 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
   const [gifState, update] = usePlayerState({ autoPlay: false });
   const graphicRef = React.useRef<PIXI.Graphics>(null);
 
-  console.log("allProps", props);
   //// Refs
   const animatedSpriteRef = useRef<PIXI.AnimatedSprite>(null);
   const containerRef = useRef<PIXI.Container>(null);
@@ -104,8 +113,6 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
   const { tl, play: tlPlay } = useContext(GsapPixieContext);
 
   /// 1001
-  console.log("contxt Values", tl);
-  console.log("gifState", gifState, gifDuration);
   const { frames: gifFrames, delays: gifDelays, loaded } = gifState;
 
   const {
@@ -124,6 +131,8 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
       rotation = 0,
       scale,
       animation,
+      colorCorrection,
+      effect,
     },
     pointerdown,
     pointerup,
@@ -138,6 +147,21 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
   } = props;
 
   // color corrections
+  const {
+    contrast = 1,
+    saturation = 1,
+    exposure = 1,
+    blurRadius = 0,
+    alpha = 1,
+  } = colorCorrection || {};
+
+  /** adjustment filter */
+  const adjustments = {
+    brightness: exposure,
+    contrast,
+    saturation,
+    alpha,
+  };
 
   const app = useApp();
 
@@ -319,38 +343,62 @@ const PixiGifSprite: React.FC<PixiGifSpriteProps> = (props) => {
             </Container>
           )}
           {gifFrame && gifFrame.length > 0 && (
-            <PixiAnimatedSprite
-              x={x}
-              y={y}
-              width={width}
-              height={height}
-              rotation={rotation}
-              animationSpeed={1}
-              loop={loop}
-              isPlaying={!!tlPlay}
-              // @ts-ignore
-              textures={gifFrameObject}
-              onComplete={handleComplete}
-              onFrameChange={(currentFrame: number) =>
-                setCurrentFrame(currentFrame)
-              }
-              anchor={0.5}
-              {...(!locked &&
-                !isDragging && {
-                  interactive: true,
-                  buttonMode: true,
-                  pointerdown: pointerdown,
-                  pointerover: pointerover,
-                  pointerout: pointerout,
-                  pointerup: pointerup,
-                  mousedown: mousedown,
-                  mouseup: mouseup,
-                  mouseover: mouseover,
-                  mouseout: mouseout,
-                })}
-              forwardRef={animatedSpriteRef}
-              scale={scale}
-            />
+            <Filters
+              scale={1}
+              blur={{ blur: blurRadius, quality: 4 }}
+              adjust={adjustments}
+              apply={({ matrix }: { matrix: any }) => {
+                if (effect === "BlackAndWhite") {
+                  matrix.desaturate();
+                } else if (effect === "Sepia") {
+                  matrix.sepia();
+                } else if (effect === "RetroVintage") {
+                  matrix.negative();
+                } else if (effect === "NightVision") {
+                  matrix.negative();
+                } else if (effect === "Normal") {
+                  matrix.reset();
+                }
+              }}
+              matrix={{
+                enabled: true,
+                // @ts-ignore
+                matrix: CYAN,
+              }}
+            >
+              <PixiAnimatedSprite
+                x={x}
+                y={y}
+                width={width}
+                height={height}
+                rotation={rotation}
+                animationSpeed={1}
+                loop={loop}
+                isPlaying={!!tlPlay}
+                // @ts-ignore
+                textures={gifFrameObject}
+                onComplete={handleComplete}
+                onFrameChange={(currentFrame: number) =>
+                  setCurrentFrame(currentFrame)
+                }
+                anchor={0.5}
+                {...(!locked &&
+                  !isDragging && {
+                    interactive: true,
+                    buttonMode: true,
+                    pointerdown: pointerdown,
+                    pointerover: pointerover,
+                    pointerout: pointerout,
+                    pointerup: pointerup,
+                    mousedown: mousedown,
+                    mouseup: mouseup,
+                    mouseover: mouseover,
+                    mouseout: mouseout,
+                  })}
+                forwardRef={animatedSpriteRef}
+                scale={scale}
+              />
+            </Filters>
           )}
         </Container>
       </Container>

package/src/components/PixiImageSprite/PixiImageSprite.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PixiImageSprite } from ".";
 import { AppStateContextProvider } from "../../utils/AppStateProvider";
+import { Effects } from "../../types/Effects";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
@@ -35,9 +36,18 @@ const meta = {
       scale: { control: "number", description: "scale of the sprite" },
       tint: { control: "number", description: "tint of the sprite" },
       blendMode: { control: "number", description: "blendMode of the sprite" },
+      effects: {
+        type: "string",
+        options: Object.values(Effects),
+        description: "filter effects of the sprite",
+      },
       colorCorrection: {
         control: "object",
         description: "colorCorrection of the sprite",
+        enabled: {
+          control: "boolean",
+          description: "enabled of the sprite  with color filter mode applied.",
+        },
         brightness: {
           control: "number",
           description: "brightness of the sprite",
@@ -84,9 +94,12 @@ export const Normal: Story = {
   args: {
     uniqueId: "surya001", // uniqueId of the sprite
     src: "https://assets.codepen.io/693612/surya.svg",
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 10,
     transformation: {
-      x: 100,
-      y: 100,
+      x: 200,
+      y: 200,
       width: 150,
       height: 150,
       anchor: 0.5,
@@ -95,11 +108,15 @@ export const Normal: Story = {
       scale: 1,
       tint: 0xffffff,
       blendMode: 0,
-      colorCorrection: {},
+      effect: Effects.None,
+      colorCorrection: {
+        enabled: false,
+        contrast: 1,
+        saturation: 1,
+        exposure: 1,
+        blurRadius: 0,
+      },
     },
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
     initialAlpha: 1,
   },
 };
@@ -113,6 +130,9 @@ export const FadeIn: Story = {
   args: {
     uniqueId: "surya002", // uniqueId of the sprite
     src: "https://assets.codepen.io/693612/surya.svg",
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 10,
     transformation: {
       x: 100,
       y: 100,
@@ -124,12 +144,77 @@ export const FadeIn: Story = {
       scale: 1,
       tint: 0xffffff,
       blendMode: 0,
+      effect: Effects.None,
       animation: "FADE_IN",
       colorCorrection: {},
     },
+    initialAlpha: 0,
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Filters: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiImageSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "image-filters001", // uniqueId of the sprite
+    src: "https://assets.codepen.io/693612/surya.svg",
     applyTransformer: false,
     startAt: 0,
     endAt: 10,
-    initialAlpha: 0,
+    transformation: {
+      x: 200,
+      y: 200,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      effect: Effects.None,
+      colorCorrection: {
+        enabled: true,
+        contrast: 1,
+        saturation: 2,
+        exposure: 1,
+        blurRadius: 0,
+      },
+    },
+    initialAlpha: 1,
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const FilterEffects: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiImageSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "image-filtereffects001", // uniqueId of the sprite
+    src: "https://assets.codepen.io/693612/surya.svg",
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 10,
+    transformation: {
+      x: 200,
+      y: 200,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      effect: Effects.BlackAndWhite,
+    },
+    initialAlpha: 1,
   },
 };