reacthub-pixitweenjs 0.2.6 → 0.2.7

package/src/hocs/AbstractContainer.tsx

@@ -0,0 +1,199 @@
+import * as React from "react";
+import { useContext, useRef, useState } from "react";
+import gsap from "gsap";
+
+import { Container, withFilters } from "@pixi/react";
+import { AdjustmentFilter } from "@pixi/filter-adjustment";
+import * as PIXI from "pixi.js";
+import { Effects } from "../types/Effects";
+// import pixiTransfomer from "../utils/PixiTransformer";
+import PixiTransformer from "../utils/PixiTransformer";
+import { PixiBaseSpriteProps } from "../types/BaseProps";
+import { TransformationEnd } from "../types/transformation";
+import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
+import { getAnimByName } from "../utils/GsapAnim";
+// @ts-ignore
+import isEmpty from "lodash/isEmpty";
+
+/** 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 AbstractContainer: React.FC<PixiBaseSpriteProps> = (props) => {
+  //// State
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [, setIsTransformerDragging] = useState(false);
+  const [, setIsMouseOverTransformer] = useState(false);
+
+  //// Refs
+  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);
+
+  const {
+    uniqueId,
+    startAt,
+    endAt,
+    initialAlpha,
+    transformation: { x, y, width, height, colorCorrection, animation, effect },
+    applyTransformer,
+  } = props;
+
+  console.log("all abstract props", props);
+
+  // color corrections
+  const {
+    contrast = 1,
+    saturation = 1,
+    brightness = 1,
+    alpha = 1,
+    blurRadius = 0,
+  } = colorCorrection || {};
+
+  /** adjustment filter */
+  const adjustments = {
+    ...(brightness > 1 && { brightness: brightness }),
+    ...(contrast > 1 && { contrast: contrast }),
+    ...(saturation > 1 && { saturation: saturation }),
+    ...(alpha !== 0 && { alpha: alpha }),
+  };
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      setIsMounted(true);
+    }
+  }, []);
+
+  React.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]);
+
+  /** 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 (props.onAnchorTransformationEnd) {
+        console.log("running onAnchorTransformationEnd");
+        props.onAnchorTransformationEnd(endData);
+      }
+    },
+    []
+  );
+
+  const Filters = withFilters(Container, {
+    ...(blurRadius > 0 && { blur: PIXI.filters.BlurFilter }),
+    ...(!isEmpty(adjustments) && { adjust: AdjustmentFilter }),
+    matrix: PIXI.filters.ColorMatrixFilter,
+  });
+
+  const isFilterOrEffectEnabled =
+    colorCorrection?.enabled || (effect && effect !== Effects.Normal);
+
+  return (
+    <Container ref={parentNode}>
+      <Container
+        ref={containerRef}
+        alpha={initialAlpha}
+        position={[x, y]}
+        pivot={[x, y]}
+        width={width}
+        height={height}
+      >
+        {isFilterOrEffectEnabled && (
+          <Filters
+            scale={1}
+            blur={{ blur: blurRadius, quality: 4 }}
+            adjust={adjustments}
+            apply={({ matrix }: { matrix: any }) => {
+              if (effect === Effects.BlackAndWhite) {
+                matrix.desaturate();
+              } else if (effect === Effects.Sepia) {
+                matrix.sepia();
+              } else if (effect === Effects.RetroVintage) {
+                matrix.negative();
+              } else if (effect === Effects.NightVision) {
+                matrix.negative();
+              } else if (effect === Effects.Normal) {
+                matrix.reset();
+              }
+            }}
+            matrix={{
+              enabled: true,
+              // @ts-ignore
+              matrix: CYAN,
+            }}
+          >
+            {props.children}
+          </Filters>
+        )}
+        {!isFilterOrEffectEnabled && props.children}
+      </Container>
+      {applyTransformer && (
+        <PixiTransformer
+          pixiTransformerRef={transformerRef}
+          imageRef={containerRef}
+          isMounted={isMounted}
+          transformCommit={handleOnTransformEnd}
+          transformChange={handleOnTransformChange}
+          mouseoverEvent={setIsMouseOverTransformer}
+          uniqueId={uniqueId}
+        />
+      )}
+    </Container>
+  );
+};
+
+export default AbstractContainer;

package/src/hocs/WithFilterContainer.tsx

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { Container, withFilters } from "@pixi/react";
+import { AdjustmentFilter } from "@pixi/filter-adjustment";
+import * as PIXI from "pixi.js";
+import { Effects } from "../types/Effects";
+// import pixiTransfomer from "../utils/PixiTransformer";
+import PixiTransformer from "../utils/PixiTransformer";
+import { PixiBaseSpriteProps } from "../types/BaseProps";
+import { TransformationEnd } from "../types/transformation";
+
+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];
+
+const withFilterContainer = <P extends object>(
+  WrappedComponent: React.ComponentType<P & PixiBaseSpriteProps>
+) => {
+  return class WithPixi extends React.Component<P & PixiBaseSpriteProps> {
+    imageRef: React.RefObject<PIXI.Sprite>;
+    containerRef: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+    parentNode: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+    imgGroupRef: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+    transformerRef: React.RefObject<PIXI.Container<PIXI.DisplayObject>>;
+    isMounted: React.RefObject<boolean>;
+
+    constructor(props: P & PixiBaseSpriteProps) {
+      super(props);
+      // create refs
+      this.imageRef = React.createRef<PIXI.Sprite>();
+      this.containerRef = React.createRef<PIXI.Container>();
+      this.parentNode = React.createRef<PIXI.Container>();
+      this.imgGroupRef = React.createRef<PIXI.Container>();
+      this.transformerRef = React.createRef<PIXI.Container>();
+      this.isMounted = React.createRef<boolean>();
+      // implement ismounted state
+      this.state = {
+        isMounted: false,
+        isTransformerDragging: false,
+        isMouseOverTransformer: false,
+      };
+    }
+
+    componentDidMount() {
+      /// this.app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
+      // console.log("this.app.stage", this.app.stage);
+      // set isMounted to true
+      // @ts-ignore
+      this.isMounted.current = true;
+    }
+
+    componentWillUnmount() {
+      // set isMounted to false
+      // @ts-ignore
+      this.isMounted.current = false;
+    }
+
+    /** handle on tranformer onchange */
+    handleOnTransformChange = () => {
+      this.setState({ isTransformerDragging: true });
+    };
+
+    // transformer to handle sprite transformation
+    handleOnTransformEnd = (endData: TransformationEnd) => {
+      console.log("changeEnd", endData);
+      const { onAnchorTransformationEnd } = this.props;
+      if (onAnchorTransformationEnd) {
+        console.log("running onAnchorTransformationEnd");
+        onAnchorTransformationEnd(endData);
+      }
+    };
+
+    // handle mouse over transformer state
+    setIsMouseOverTransformer = (isMouseOverTransformer: boolean) => {
+      this.setState({ isMouseOverTransformer });
+    };
+
+    render() {
+      const {
+        uniqueId,
+        initialAlpha,
+        transformation: { x, y, width, height, colorCorrection, effect },
+        applyTransformer,
+      } = this.props;
+
+      // color corrections
+      const {
+        contrast = 1,
+        saturation = 1,
+        exposure = 1,
+        alpha = 1,
+        blurRadius = 0,
+      } = colorCorrection || {};
+
+      /** adjustment filter */
+      const adjustments = {
+        brightness: exposure,
+        contrast,
+        saturation,
+        alpha,
+      };
+      return (
+        <Container ref={this.parentNode}>
+          <Container
+            ref={this.containerRef}
+            alpha={initialAlpha}
+            position={[x, y]}
+            pivot={[x, y]}
+            width={width}
+            height={height}
+          >
+            <Filters
+              scale={1}
+              blur={{ blur: blurRadius, quality: 4 }}
+              adjust={adjustments}
+              apply={({ matrix }: { matrix: any }) => {
+                if (effect === Effects.BlackAndWhite) {
+                  matrix.desaturate();
+                } else if (effect === Effects.Sepia) {
+                  matrix.sepia();
+                } else if (effect === Effects.RetroVintage) {
+                  matrix.negative();
+                } else if (effect === Effects.NightVision) {
+                  matrix.negative();
+                } else if (effect === Effects.Normal) {
+                  matrix.reset();
+                }
+              }}
+              matrix={{
+                enabled: true,
+                // @ts-ignore
+                matrix: CYAN,
+              }}
+            >
+              <WrappedComponent {...this.props} />
+            </Filters>
+          </Container>
+          {applyTransformer && (
+            <PixiTransformer
+              pixiTransformerRef={this.transformerRef}
+              imageRef={this.containerRef}
+              isMounted={this.isMounted.current || false}
+              transformCommit={this.handleOnTransformEnd}
+              transformChange={this.handleOnTransformChange}
+              mouseoverEvent={this.setIsMouseOverTransformer}
+              uniqueId={uniqueId}
+            />
+          )}
+        </Container>
+      );
+    }
+  };
+};
+
+export default withFilterContainer;

package/src/types/Animations.tsx

@@ -0,0 +1,41 @@
+export enum Animations {
+  FADE_IN = "FADE_IN",
+  FADE_OUT = "FADE_OUT",
+  FADE_IN_OUT = "FADE_IN_OUT",
+  SLIDE_IN_LEFT = "SLIDE_IN_LEFT",
+  SLIDE_IN_RIGHT = "SLIDE_IN_RIGHT",
+  SLIDE_IN_TOP = "SLIDE_IN_TOP",
+  SLIDE_IN_BOTTOM = "SLIDE_IN_BOTTOM",
+  SLIDE_OUT_LEFT = "SLIDE_OUT_LEFT",
+  SLIDE_OUT_RIGHT = "SLIDE_OUT_RIGHT",
+  SLIDE_OUT_TOP = "SLIDE_OUT_TOP",
+  SLIDE_OUT_BOTTOM = "SLIDE_OUT_BOTTOM",
+  ZOOM_IN = "ZOOM_IN",
+  ZOOM_OUT = "ZOOM_OUT",
+  ZOOM_IN_OUT = "ZOOM_IN_OUT",
+  BOUNCE_IN = "BOUNCE_IN",
+  BOUNCE_OUT = "BOUNCE_OUT",
+  BOUNCE_IN_OUT = "BOUNCE_IN_OUT",
+  ELASTIC_IN = "ELASTIC_IN",
+  ELASTIC_OUT = "ELASTIC_OUT",
+  ELASTIC_IN_OUT = "ELASTIC_IN_OUT",
+  BACK_IN = "BACK_IN",
+  BACK_OUT = "BACK_OUT",
+  BACK_IN_OUT = "BACK_IN_OUT",
+  CIRCULAR_IN = "CIRCULAR_IN",
+  CIRCULAR_OUT = "CIRCULAR_OUT",
+  CIRCULAR_IN_OUT = "CIRCULAR_IN_OUT",
+  EXPO_IN = "EXPO_IN",
+  EXPO_OUT = "EXPO_OUT",
+  EXPO_IN_OUT = "EXPO_IN_OUT",
+  SINE_IN = "SINE_IN",
+  SINE_OUT = "SINE_OUT",
+  SINE_IN_OUT = "SINE_IN_OUT",
+  BOUNCE = "BOUNCE",
+  ELASTIC = "ELASTIC",
+  BACK = "BACK",
+  CIRCULAR = "CIRCULAR",
+  EXPO = "EXPO",
+  SINE = "SINE",
+  // Custom
+}

package/src/types/BaseProps.tsx

@@ -0,0 +1,56 @@
+import { Effects } from "./Effects";
+
+export interface PixiBaseSpriteProps {
+  children?: React.ReactNode;
+  uniqueId: string;
+  src?: string;
+  path?: string;
+  text?: 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;
+      brightness?: 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?: Effects;
+  };
+  pointerdown?: () => void;
+  pointerup?: () => void;
+  mousedown?: () => void;
+  mouseup?: () => void;
+  pointerover?: () => void;
+  mouseover?: () => void;
+  mouseout?: () => void;
+  applyTransformer?: boolean;
+  onAnchorTransformationEnd?: (endData: any) => void;
+}

package/src/types/BlendModes.tsx

@@ -0,0 +1,19 @@
+export enum BlendModes {
+  NORMAL = 0,
+  ADD = 1,
+  MULTIPLY = 2,
+  SCREEN = 3,
+  OVERLAY = 4,
+  DARKEN = 5,
+  LIGHTEN = 6,
+  COLOR_DODGE = 7,
+  COLOR_BURN = 8,
+  HARD_LIGHT = 9,
+  SOFT_LIGHT = 10,
+  DIFFERENCE = 11,
+  EXCLUSION = 12,
+  HUE = 13,
+  SATURATION = 14,
+  COLOR = 15,
+  LUMINOSITY = 16,
+}

package/src/types/Effects.tsx

@@ -0,0 +1,10 @@
+/**
+ * Effects enum
+ */
+export enum Effects {
+  BlackAndWhite = "BlackAndWhite",
+  Sepia = "Sepia",
+  RetroVintage = "RetroVintage",
+  NightVision = "NightVision",
+  Normal = "Normal",
+}