reacthub-pixitweenjs 0.2.6 → 0.2.7

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.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.7",
   "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

@@ -38,6 +38,10 @@ const meta = {
       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 +88,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 +102,14 @@ export const Normal: Story = {
       scale: 1,
       tint: 0xffffff,
       blendMode: 0,
-      colorCorrection: {},
+      colorCorrection: {
+        enabled: false,
+        contrast: 1,
+        saturation: 1,
+        exposure: 1,
+        blurRadius: 0,
+      },
     },
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
     initialAlpha: 1,
   },
 };
@@ -113,6 +123,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,
@@ -127,9 +140,42 @@ export const FadeIn: Story = {
       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,
+      colorCorrection: {
+        enabled: true,
+        contrast: 1,
+        saturation: 2,
+        exposure: 1,
+        blurRadius: 0,
+      },
+    },
+    initialAlpha: 1,
   },
 };

package/src/components/PixiImageSprite/PixiImageSprite.tsx

@@ -1,114 +1,27 @@
 import * as React from "react";
-import { useContext, useEffect, useRef, useState } from "react";
-// @ts-ignore
-import PropTypes from "prop-types";
-import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
-import { Sprite, Container, withFilters } from "@pixi/react";
-import { AdjustmentFilter } from "@pixi/filter-adjustment";
+import { useRef } from "react";
+import { Sprite, Container } from "@pixi/react";
 import * as PIXI from "pixi.js";
-import gsap from "gsap";
-import PixiTransformer from "../../utils/PixiTransformer";
-
 // @ts-ignore
 import isEmpty from "lodash/isEmpty";
-import { getAnimByName } from "../../utils/GsapAnim";
-import { TransformationEnd } from "../../types/transformation";
-
-type PixiImageSpriteProps = {
-  uniqueId: string;
-  src: string;
-  startAt: number;
-  endAt: number;
-  initialAlpha: number;
-  transformation: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    anchor: number;
-    rotation?: number;
-    alpha?: number;
-    scale?: number | [number, number];
-    tint?: number;
-    blendMode?: number;
-    animation?: string;
-    colorCorrection?: {
-      enabled?: boolean;
-      temperature?: number;
-      hue?: number;
-      contrast?: number;
-      saturation?: number;
-      exposure?: number;
-      reset?: boolean;
-      sharpness?: number;
-      value?: number;
-      levels?: number;
-      luminance?: number;
-      enhance?: number;
-      blurRadius?: number;
-      red?: number;
-      green?: number;
-      blue?: number;
-      alpha?: number;
-      scaleInput?: number;
-    };
-    effect?: string;
-  };
-  pointerdown?: () => void;
-  pointerup?: () => void;
-  mousedown?: () => void;
-  mouseup?: () => void;
-  pointerover?: () => void;
-  mouseover?: () => void;
-  mouseout?: () => void;
-  applyTransformer?: boolean;
-  onAnchorTransformationEnd?: (endData: any) => void;
-};
-
-const Filters = withFilters(Container, {
-  blur: PIXI.filters.BlurFilter,
-  adjust: AdjustmentFilter,
-  matrix: PIXI.filters.ColorMatrixFilter,
-});
+// setup hocs
+import AbstractContainer from "../../hocs/AbstractContainer";
+import { PixiBaseSpriteProps } from "../../types/BaseProps";
 
-/** 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) => {
+const PixiImageSprite: React.FC<PixiBaseSpriteProps> = (props) => {
   //// State
-  const [isMounted, setIsMounted] = React.useState(false);
-  const [, setIsTransformerDragging] = useState(false);
-  const [, setIsMouseOverTransformer] = useState(false);
 
-  console.log("allProps", props);
   //// Refs
   const imageRef = useRef<PIXI.Sprite>(null);
-  const containerRef = useRef<PIXI.Container>(null);
-  const parentNode = useRef<PIXI.Container>(null);
   const imgGroupRef = useRef<PIXI.Container>(null);
-  const transformerRef = useRef<PIXI.Container>(null);
 
   //// Context
-  const { tl } = useContext(GsapPixieContext);
 
   /// 1001
   // console.log("contxt Values", tl);
   const {
-    uniqueId,
     src,
-    startAt,
-    endAt,
-    initialAlpha,
-    transformation: {
-      x,
-      y,
-      width,
-      height,
-      anchor,
-      animation,
-      colorCorrection,
-      effect,
-    },
+    transformation: { x, y, width, height, anchor },
     pointerdown,
     pointerup,
     mousedown,
@@ -116,193 +29,31 @@ const PixiImageSprite: React.FC<PixiImageSpriteProps> = (props) => {
     pointerover,
     mouseover,
     mouseout,
-    applyTransformer,
-    onAnchorTransformationEnd,
   } = props;
 
-  // color corrections
-  const {
-    contrast = 1,
-    saturation = 1,
-    exposure = 1,
-    blurRadius = 0,
-    alpha = 1,
-  } = colorCorrection || {};
-
-  /** adjustment filter */
-  const adjustments = {
-    brightness: exposure,
-    contrast,
-    saturation,
-    alpha,
-  };
-
-  /** handle on tranformer onchange */
-  const handleOnTransformChange = React.useCallback(() => {
-    setIsTransformerDragging(true);
-  }, []);
-
-  // transformer to handle sprite transformation
-  const handleOnTransformEnd = React.useCallback(
-    (endData: TransformationEnd) => {
-      console.log("changeEnd", endData);
-      if (onAnchorTransformationEnd) {
-        console.log("running onAnchorTransformationEnd");
-        onAnchorTransformationEnd(endData);
-      }
-    },
-    []
-  );
-
-  useEffect(() => {
-    let ctx = gsap.context(() => {});
-    if (containerRef.current && tl.current) {
-      const data = {
-        duration: Number(endAt) - Number(startAt),
-      };
-
-      const ease = getAnimByName(animation || "None");
-      ctx = gsap.context(() => {
-        if (!isEmpty(ease.from)) {
-          tl.current
-            .from(containerRef.current, { ...ease.from }, startAt)
-            .to(imgGroupRef.current, { alpha: 1, duration: 0.2 }, startAt)
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else if (!isEmpty(ease.to)) {
-          tl.current
-            .to(
-              containerRef.current,
-              { alpha: 1, duration: 0.2, ...ease.to },
-              startAt
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else if (!isEmpty(ease.fromTo)) {
-          tl.current
-            .fromTo(
-              containerRef.current,
-              ease.fromTo?.from,
-              ease.fromTo?.to,
-              startAt
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else {
-          tl.current
-            .to(containerRef.current, { alpha: 1, duration: 0.01 }, startAt)
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(
-              containerRef.current,
-              { alpha: 0, duration: 0.1 },
-              Number(endAt) - Number(0.1)
-            );
-        }
-      });
-    }
-    return () => ctx.revert(); // cleanup!
-  }, [animation, startAt, endAt]);
-
-  React.useEffect(() => {
-    if (containerRef.current) {
-      setIsMounted(true);
-    }
-  }, []);
-
   return (
-    // @ts-ignore
-    <Container ref={parentNode}>
-      {/* @ts-ignore */}
-      <Container
-        ref={containerRef}
-        alpha={initialAlpha}
-        position={[x, y]}
-        pivot={[x, y]}
-        width={width}
-        height={height}
-      >
-        {colorCorrection && colorCorrection.enabled ? (
-          <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,
-            }}
-          >
-            {/* @ts-ignore */}
-            <Container ref={imgGroupRef}>
-              <Sprite
-                image={src}
-                width={width}
-                height={height}
-                anchor={anchor}
-                ref={imageRef}
-                x={x}
-                y={y}
-                // @ts-ignore
-                interactive={true}
-                pointerdown={pointerdown}
-                pointerup={pointerup}
-                pointerover={pointerover}
-                mousedown={mousedown}
-                mouseup={mouseup}
-                mouseover={mouseover}
-                mouseout={mouseout}
-              />
-            </Container>
-          </Filters>
-        ) : (
+    <AbstractContainer {...props}>
+      <Container ref={imgGroupRef}>
+        <Sprite
+          image={src}
+          width={width}
+          height={height}
+          anchor={anchor}
+          ref={imageRef}
+          x={x}
+          y={y}
           // @ts-ignore
-          <Container ref={imgGroupRef}>
-            <Sprite
-              image={src}
-              width={width}
-              height={height}
-              anchor={anchor}
-              ref={imageRef}
-              x={x}
-              y={y}
-              // @ts-ignore
-              interactive={true}
-              pointerdown={pointerdown}
-              pointerup={pointerup}
-              pointerover={pointerover}
-              mousedown={mousedown}
-              mouseup={mouseup}
-              mouseover={mouseover}
-              mouseout={mouseout}
-            />
-          </Container>
-        )}
-      </Container>
-      {applyTransformer && (
-        <PixiTransformer
-          pixiTransformerRef={transformerRef}
-          imageRef={containerRef}
-          isMounted={isMounted}
-          transformCommit={handleOnTransformEnd}
-          transformChange={handleOnTransformChange}
-          mouseoverEvent={setIsMouseOverTransformer}
-          uniqueId={uniqueId}
+          interactive={true}
+          pointerdown={pointerdown}
+          pointerup={pointerup}
+          pointerover={pointerover}
+          mousedown={mousedown}
+          mouseup={mouseup}
+          mouseover={mouseover}
+          mouseout={mouseout}
         />
-      )}
-    </Container>
+      </Container>
+    </AbstractContainer>
   );
 };