reacthub-pixitweenjs 0.2.5 → 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/main.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+// @ts-ignore
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

package/src/providers/GsapPixieContextProvider.tsx

@@ -48,7 +48,6 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [play, setPlay] = useState<boolean>(false);
-  const [frameNumber, setFrameNumber] = useState<number>(0);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [internalDuration, setInternalDuration] = useState<number>(0);
   const [totalDuration, setTotalDuration] = useState<number>(0);
@@ -58,9 +57,9 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
   const gsapCtx = useRef<any>();
   const playerTimeRef = useRef<number>(0.001);
 
-  const parentElementRef = useRef<any>();
+  // const parentElementRef = useRef<any>();
   // передаем предка анимируемых элементов
-  const q = gsap.utils.selector(parentElementRef);
+  // const q = gsap.utils.selector(parentElementRef);
 
   useLayoutEffect(() => {
     gsapCtx.current = gsap.context(() => {
@@ -75,7 +74,7 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
     return () => gsapCtx.current.revert();
   }, []);
 
-  gsap.ticker.add((time, deltaTime, frame) => {
+  gsap.ticker.add(() => {
     // console.log("timeframe", time, deltaTime, frame);
     // setFrameNumber(frame);
     if (tl.current && getTimelineDuration) {
@@ -86,11 +85,11 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
   const onUpdate = useCallback(() => {
     /// console.log("update event callback");
     const timeline = tl.current;
-    var now = timeline.time();
-    var elapsedTime;
-    if (playerTimeRef.current) {
-      elapsedTime = now - playerTimeRef.current;
-    }
+    let now = timeline.time();
+    // let elapsedTime;
+    // if (playerTimeRef.current) {
+    //   elapsedTime = now - playerTimeRef.current;
+    // }
     //  console.log(`elapseTime :${elapsedTime} and frame: ${frameNumber}`);
     //time = now;
     playerTimeRef.current = now;
@@ -154,11 +153,6 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
     }
   }, [play]);
 
-  const addTotalDuration = (duration: number) => {
-    const timeline = tl.current;
-    timeline.totalDuration(duration);
-  };
-
   const handleReset = useCallback(() => {
     const timeline = tl.current;
 
@@ -188,10 +182,10 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
     timeline.seek(4);
   }, []);
 
-  const setTimelineDuration = useCallback(() => {
-    const timeline = tl.current;
-    timeline.totalDuration(3);
-  }, []);
+  // const setTimelineDuration = useCallback(() => {
+  //   const timeline = tl.current;
+  //   timeline.totalDuration(3);
+  // }, []);
 
   const getTimelineDuration = useCallback(() => {
     const timeline = tl.current;
@@ -214,12 +208,12 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   /** Event listener dragging */
-  useCustomEventListener(Events.DRAGGING_START, (time) => {
+  useCustomEventListener(Events.DRAGGING_START, () => {
     console.log("dragging start");
     setIsDragging(true);
   });
 
-  useCustomEventListener(Events.DRAGGING_END, (time) => {
+  useCustomEventListener(Events.DRAGGING_END, () => {
     setIsDragging(false);
     console.log("dragging end");
   });

package/src/stories/Installation.mdx

@@ -34,7 +34,7 @@ npm install
     "@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-filters": "^5.2.1",
+    "pixi-svg": "^3.2.0",
+    "pixi.js": "^7.2.3",
 ```

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",
+}

package/src/utils/AppStateProvider.tsx

@@ -27,7 +27,7 @@ export const AppStateContextProvider: React.FC<
   const onAnchorTransformationEnd = React.useCallback(
     (data: TransformationEnd) => {
       console.log("onAnchorTransformationEnd", data);
-      const { uniqueId, transformation } = data;
+      const { transformation } = data;
       const newAppState = {
         ...appStateRef.current,
         transformation: {
@@ -41,9 +41,9 @@ export const AppStateContextProvider: React.FC<
     []
   );
 
-  const onMouseOverSprite = React.useCallback((data: unknown) => {}, []);
+  const onMouseOverSprite = React.useCallback(() => {}, []);
 
-  const onClickSprite = React.useCallback((data: unknown) => {}, []);
+  const onClickSprite = React.useCallback(() => {}, []);
 
   return (
     <>

package/src/utils/AppStateStage.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import ContextBridge from "./ContextBridge";
-import { AppStateContext } from "./AppStateProvider";
 import { Container as PixiContainer } from "@pixi/react";
 
 interface AppStateStageProps {
@@ -11,17 +9,7 @@ const AppStateStage: React.FC<AppStateStageProps> = ({
   children,
   ...props
 }) => {
-  return (
-    <ContextBridge
-      Context={AppStateContext}
-      render={(children: React.ReactNode) => (
-        // @ts-ignore
-        <PixiContainer {...props}>{children}</PixiContainer>
-      )}
-    >
-      {children}
-    </ContextBridge>
-  );
+  return <PixiContainer {...props}>{children}</PixiContainer>;
 };
 
 export default AppStateStage;

package/src/utils/AppWrapper.tsx

@@ -18,9 +18,13 @@ export const AppWrapper: React.FC<AppProps> = ({
   const backgroundColorx = PIXI.utils.string2hex(backgroundColor || "#2D2E3C");
   const width = 600;
   const height = 500;
+  const quillEditorRef = React.useRef<HTMLDivElement>(null);
+
   /// color: 0x1099bb,
   return (
     <div className="App">
+      <div id="note-editor" ref={quillEditorRef}></div>
+      <div id="lottieroot"></div>
       <GsapPixieContextProvider>
         <ChakraProvider>
           <Flex flexDir={"column"}>

package/src/utils/GsapAnim.tsx

@@ -26,13 +26,7 @@ interface Ease {
   };
 }
 
-export const getAnimByName = (
-  animate: string,
-  stageWidth?: number,
-  stageHeight?: number,
-  x?: number,
-  y?: number,
-): Ease => {
+export const getAnimByName = (animate: string): Ease => {
   let ease: Ease = {};
   switch (animate) {
     case "NONE":