reacthub-pixitweenjs 0.2.3 → 0.2.4

package/src/hooks/usePixiTransformer.tsx

@@ -0,0 +1,168 @@
+import { Transformer } from "@pixi-essentials/transformer";
+import * as PIXI from "pixi.js";
+import { useApp } from "@pixi/react";
+import * as React from "react";
+import { useEffect, useRef, useCallback } from "react";
+import { Transformation } from "../types/transformation";
+// @ts-ignore
+import has from "lodash/has";
+
+const colorYellow = PIXI.utils.string2hex("#F3C409");
+const anchorFill = PIXI.utils.string2hex("#F3C409");
+
+interface Events {
+  dblclick?: (e: any) => void;
+}
+
+interface Props {
+  uniqueId?: string;
+  onTransformEnd?: (data: {
+    uniqueId: string;
+    transformation: Transformation;
+  }) => void;
+  events?: Events;
+  mouseoverEvent?: (flag: boolean) => void;
+  setDragging?: (flag: boolean) => void;
+}
+
+export const usePixiTransformer = ({
+  uniqueId = "",
+  onTransformEnd,
+  events = {},
+  mouseoverEvent = (f) => f,
+  setDragging = (f) => f,
+}: Props) => {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const PixiTransformer = React.useRef<PIXI.Container>(null);
+  const mounted = React.useRef(false);
+  const app = useApp();
+  const transformerRef = useRef<Transformer>(null);
+  const parentRef = useRef<PIXI.Container>(null);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (transformerRef.current) {
+        parentRef.current?.removeChild(transformerRef.current);
+      }
+    };
+  }, []);
+
+  const transformChange = useCallback(() => {
+    setIsDragging(true);
+    setDragging(true);
+  }, []);
+
+  const transformCommit = useCallback(() => {
+    if (PixiTransformer.current === null) return;
+    const x = PixiTransformer.current.x;
+    const y = PixiTransformer.current.y;
+    const width = PixiTransformer.current.width;
+    const height = PixiTransformer.current.height;
+    const rotate = PixiTransformer.current.rotation;
+    const scale: [number, number] = [
+      PixiTransformer.current.scale.x,
+      PixiTransformer.current.scale.y,
+    ];
+    if (onTransformEnd) {
+      onTransformEnd({
+        uniqueId,
+        transformation: {
+          x: Math.round(x),
+          y: Math.round(y),
+          width: Math.round(Math.max(5, width)),
+          height: Math.round(Math.max(5, height)),
+          rotate: Math.round(rotate),
+          scale: scale,
+        },
+      });
+    }
+    setIsDragging(false);
+    setDragging(false);
+  }, []);
+
+  const handleOnDblClick = useCallback((e: any) => {
+    if (events && has(events, "dblclick") && events.dblclick) {
+      events.dblclick(e);
+    }
+  }, []);
+
+  const handleOnMouseOver = useCallback(
+    (msevent: any) => {
+      if (mouseoverEvent) {
+        mouseoverEvent(true);
+      }
+    },
+    [mouseoverEvent],
+  );
+
+  const handleOnMouseOut = useCallback(
+    (msevent: any) => {
+      if (mouseoverEvent) {
+        mouseoverEvent(false);
+      }
+    },
+    [mouseoverEvent],
+  );
+
+  const handleTransformer = useCallback(
+    (node: PIXI.Container, parentNode: PIXI.Container) => {
+      const isEnabled = true;
+      // @ts-ignore
+      PixiTransformer.current = node;
+      const transformer = new Transformer({
+        rotateEnabled: isEnabled,
+        boxRotationEnabled: isEnabled,
+        boxScalingEnabled: isEnabled,
+        scaleEnabled: isEnabled,
+        group: [node],
+        wireframeStyle: {
+          thickness: 2,
+          color: anchorFill,
+        },
+        lockAspectRatio: true,
+        handleStyle: {
+          // color: colorYellow,
+          outlineColor: colorYellow,
+          shape: "circle",
+          radius: 10,
+        },
+      });
+
+      // transformer.addListener("transformchange", transformChange);
+      // @ts-ignore
+      transformer.addListener("transformcommit", transformCommit);
+      // transformer.addListener("dblclick", (evt) => {
+      //   handleOnDblClick(evt);
+      // });
+      // transformer.on("mouseover", () => {
+      //   handleOnMouseOver(true);
+      // });
+      // transformer.on("mouseout", () => {
+      //   handleOnMouseOut(false);
+      // });
+      // @ts-ignore
+      transformerRef.current = transformer;
+      // @ts-ignore
+      parentRef.current = parentNode;
+      parentRef.current.addChild(transformerRef.current);
+    },
+    [
+      transformCommit,
+      transformChange,
+      handleOnMouseOver,
+      handleOnMouseOut,
+      handleOnDblClick,
+    ],
+  );
+
+  const removeTransformer = useCallback(() => {
+    if (transformerRef.current) {
+      // @ts-ignore
+      parentRef.current.removeChild(transformerRef.current);
+    }
+  }, []);
+
+  return { handleTransformer, removeTransformer, isDragging };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/PixiImageSprite";
+// Path: src\index.js
+export * from "./providers";

package/src/providers/{GsapPixieContextProvider.jsx → GsapPixieContextProvider.tsx}

@@ -1,4 +1,5 @@
-import React, {
+import * as React from "react";
+import {
   useState,
   useEffect,
   useCallback,
@@ -7,10 +8,22 @@ import React, {
 } from "react";
 import gsap from "gsap";
 import { emitCustomEvent } from "react-custom-events";
-// import { Power4 } from "gsap";
+
+interface GsapPixieContextProps {
+  gsapCtx: React.MutableRefObject<any>;
+  tl: React.MutableRefObject<any>;
+  handlePlay: () => void;
+  handlePause: () => void;
+  handleReset: () => void;
+  handleSeek: () => void;
+  handleRestart: () => void;
+  handleRepeat: () => void;
+  playerTimeRef: React.MutableRefObject<number>;
+}
 
 // Context has been created
-const GsapPixieContext = React.createContext({});
+// @ts-ignore
+const GsapPixieContext = React.createContext<GsapPixieContextProps>({});
 
 const Events = {
   STOP: "GSAP_STOP",
@@ -18,21 +31,19 @@ const Events = {
   PLAY: "GSAP_PLAY",
   RESUME: "GSAP_RESUME",
 };
-// Provider
-const GsapPixieContextProvider = ({ children }) => {
-  const [play, setPlay] = useState(false);
-  const [frameNumber, setFrameNumber] = useState(0);
 
-  const tl = useRef();
-  const gsapCtx = useRef();
-  const playerTimeRef = useRef(0.001);
+// Provider
+const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [play, setPlay] = useState<boolean>(false);
+  const [frameNumber, setFrameNumber] = useState<number>(0);
 
-  // gsap.ticker.add((time, deltaTime, frame) => {
-  //   console.log("timeframe", time, deltaTime, frame);
-  //   setFrameNumber(frame);
-  // });
+  const tl = useRef<any>();
+  const gsapCtx = useRef<any>();
+  const playerTimeRef = useRef<number>(0.001);
 
-  const parentElementRef = useRef();
+  const parentElementRef = useRef<any>();
   // передаем предка анимируемых элементов
   const q = gsap.utils.selector(parentElementRef);
 
@@ -62,14 +73,6 @@ const GsapPixieContextProvider = ({ children }) => {
     playerTimeRef.current = now;
   }, []);
 
-  // const timeline = React.useCallback(
-  //   gsap.timeline({
-  //     paused: true,
-  //     defaults: { duration: 0, onUpdate: onUpdate },
-  //   }),
-  //   [],
-  // );
-
   useEffect(() => {
     const timeline = tl.current;
     timeline
@@ -93,7 +96,7 @@ const GsapPixieContextProvider = ({ children }) => {
     }
   }, [play]);
 
-  const addTotalDuration = (duration) => {
+  const addTotalDuration = (duration: number) => {
     const timeline = tl.current;
     timeline.totalDuration(duration);
   };

package/src/providers/index.ts

@@ -0,0 +1 @@
+export * from "./GsapPixieContextProvider";

package/src/types/transformation.tsx

@@ -0,0 +1,13 @@
+export interface Transformation {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotate: number;
+  scale: [number, number];
+}
+
+export interface TransformationEnd {
+  uniqueId: string;
+  transformation: Transformation;
+}

package/src/utils/AppStateProvider.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import useDeepEffect from "./useDeepEffect";
+import { TransformationEnd } from "../types/transformation";
+
+interface AppState {
+  transformation: {
+    [key: string]: unknown;
+  };
+}
+
+interface AppStateContextProps extends AppState {
+  onAnchorTransformationEnd: (data: TransformationEnd) => void;
+  onMouseOverSprite: (data: unknown) => void;
+  onClickSprite: (data: unknown) => void;
+}
+
+export const AppStateContext = React.createContext<AppStateContextProps>({
+  transformation: {},
+  onAnchorTransformationEnd: () => {},
+  onMouseOverSprite: () => {},
+  onClickSprite: () => {},
+});
+
+interface AppStateContextProviderProps extends AppState {
+  children: React.ReactNode;
+}
+
+export const AppStateContextProvider: React.FC<
+  AppStateContextProviderProps
+> = ({ children, ...props }) => {
+  const [appState, setAppState] = React.useState<AppState>(props);
+  useDeepEffect(() => {
+    setAppState(props);
+  }, [props]);
+
+  const onAnchorTransformationEnd = React.useCallback(
+    (data: {
+      uniqueId: string;
+      transformation: { [key: string]: unknown };
+    }) => {
+      const { uniqueId, transformation } = data;
+      const newAppState = {
+        ...props,
+        transformation: {
+          ...props.transformation,
+          ...transformation,
+        },
+      };
+      setAppState(newAppState);
+    },
+    [props],
+  );
+
+  const onMouseOverSprite = React.useCallback((data: unknown) => {}, []);
+
+  const onClickSprite = React.useCallback((data: unknown) => {}, []);
+
+  return (
+    <AppStateContext.Provider
+      value={{
+        ...appState,
+        onAnchorTransformationEnd,
+        onMouseOverSprite,
+        onClickSprite,
+      }}
+    >
+      {children}
+    </AppStateContext.Provider>
+  );
+};

package/src/utils/AppStateStage.tsx

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

package/src/utils/AppWrapper.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Flex, Box } from "@chakra-ui/react";
+import * as PIXI from "pixi.js";
+import { ChakraProvider } from "@chakra-ui/react";
+import { GsapPixieContextProvider } from "../providers/GsapPixieContextProvider";
+import { VideoSeekBar } from "./VideoSeekBar";
+import Stage from "./PixiStage";
+
+interface AppProps {
+  children: React.ReactNode;
+  backgroundColor?: string;
+}
+
+export const AppWrapper: React.FC<AppProps> = ({
+  children,
+  backgroundColor,
+}) => {
+  const backgroundColorx = PIXI.utils.string2hex(backgroundColor || "#2D2E3C");
+  const width = 600;
+  const height = 500;
+  /// color: 0x1099bb,
+  return (
+    <div className="App">
+      <GsapPixieContextProvider>
+        <ChakraProvider>
+          <Flex flexDir={"column"}>
+            <Stage
+              width={width}
+              height={height}
+              // options={{ background: backgroundColor }}
+              options={{ backgroundColor: backgroundColorx, resolution: 2 }}
+            >
+              {children}
+            </Stage>
+            <Box mt={5} w={600}>
+              <VideoSeekBar />
+            </Box>
+          </Flex>
+        </ChakraProvider>
+      </GsapPixieContextProvider>
+    </div>
+  );
+};

package/src/utils/ContextBridge.tsx

@@ -0,0 +1,25 @@
+// your Stage:
+// the context bridge:
+import * as React from "react";
+
+const ContextBridge = <T,>({
+  children,
+  Context,
+  render,
+}: {
+  children: React.ReactNode;
+  Context: React.Context<T>;
+  render: (children: React.ReactNode) => JSX.Element;
+}) => {
+  return (
+    <Context.Consumer>
+      {(value) => {
+        return render(
+          <Context.Provider value={value}>{children}</Context.Provider>,
+        );
+      }}
+    </Context.Consumer>
+  );
+};
+
+export default ContextBridge;

package/src/{providers/GsapAnim.jsx → utils/GsapAnim.tsx}

@@ -1,8 +1,39 @@
-/// import { Elastic } from "gsap";
-// import BezierEasing from 'bezier-easing';
+interface Ease {
+  from?: {
+    duration: number;
+    ease: string;
+    y?: number;
+    x?: number;
+  };
+  fromTo?: {
+    from: {
+      y?: number;
+      x?: number;
+      alpha?: number;
+    };
+    to: {
+      ease: string;
+      y?: number;
+      x?: number;
+      alpha?: number;
+      duration: number;
+    };
+  };
+  to?: {
+    ease: string;
+    alpha: number;
+    duration: number;
+  };
+}
 
-export const getAnimByName = (animate, stageWidth, stageHeight, x, y) => {
-  let ease = {};
+export const getAnimByName = (
+  animate: string,
+  stageWidth?: number,
+  stageHeight?: number,
+  x?: number,
+  y?: number,
+): Ease => {
+  let ease: Ease = {};
   switch (animate) {
     case "NONE":
     case "none":

package/src/utils/PixiStage.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import ContextBridge from "./ContextBridge";
+import { Stage as PixiStage } from "@pixi/react";
+import { AppStateContextProvider } from "./AppStateProvider";
+import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
+
+interface StageProps {
+  children: React.ReactNode;
+  width: number;
+  height: number;
+  options: any;
+}
+
+const Stage: React.FC<StageProps> = ({ children, ...props }) => {
+  return (
+    <ContextBridge
+      Context={GsapPixieContext}
+      render={(children: React.ReactNode | React.ReactElement) => (
+        <PixiStage {...props}>
+          {/* @ts-ignore */}
+          <AppStateContextProvider {...props}>
+            {/* @ts-ignore */}
+            {children}
+          </AppStateContextProvider>
+        </PixiStage>
+      )}
+    >
+      {children}
+    </ContextBridge>
+  );
+};
+
+export default Stage;

package/src/utils/VideoSeekBar.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import {
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderMark,
+  Flex,
+  Icon,
+  Text,
+  Box,
+  Button,
+} from "@chakra-ui/react";
+import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
+
+import { gsap } from "gsap";
+import { Draggable } from "gsap/Draggable";
+
+gsap.registerPlugin(Draggable);
+
+export const VideoSeekBar: React.FC = () => {
+  const rafRef = React.useRef<number>();
+  const sliderRef = React.useRef<HTMLDivElement>(null);
+  const sliderThumbRef = React.useRef<HTMLDivElement>(null);
+  const sliderProgressRef = React.useRef<HTMLDivElement>(null);
+  const {
+    tl: timeline,
+    playerTimeRef,
+    handlePlay,
+    handlePause,
+    handleReset,
+    handleSeek,
+    handleRestart,
+    handleRepeat,
+  } = React.useContext(GsapPixieContext);
+
+  /// state
+  const [time, setTime] = React.useState<number>(0);
+  const [duration, setDuration] = React.useState<number>(0);
+
+  const totalVideoSeconds = 20;
+
+  const animate = (time: number) => {
+    /// console.log("totalDuration", timeline.current.totalDuration());
+    setDuration(timeline.current.totalDuration());
+    if (playerTimeRef && playerTimeRef.current) {
+      setTime(playerTimeRef.current);
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  };
+
+  React.useEffect(() => {
+    rafRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafRef.current!);
+  }, []); // Make sure the effect runs only once
+
+  const handleOnSliderChange = (value: number) => {
+    const nTotSeconds =
+      totalVideoSeconds && totalVideoSeconds > 0 ? totalVideoSeconds : 1;
+    const progress = value / nTotSeconds;
+    console.log("progressbar", value, progress);
+    playerTimeRef.current = value;
+    // @ts-ignore
+    timeline && timeline.progress(progress);
+    gsap.set(sliderProgressRef.current!, {
+      scaleX: progress,
+    });
+  };
+  const handleOnSliderChangeStart = (value: number) => {};
+  const handleOnSliderChangeEnd = (value: number) => {};
+
+  /** Create Draggable for the Gsap Player */
+
+  const updateDrag = React.useCallback(
+    (x: number, maxX: number) => {
+      console.log("updatgeDrag running", x, maxX);
+      const currentTime = (x / maxX) * totalVideoSeconds;
+      const prog = x / sliderRef.current!.offsetWidth;
+      console.log("drage update", currentTime, prog);
+    },
+    [totalVideoSeconds],
+  );
+
+  return (
+    <Flex flexDir={"column"}>
+      <Box>
+        <Button onClick={handleRestart}>Play</Button>
+        <Button onClick={handlePause}>Pause</Button>
+        <Button onClick={handlePlay}>Resume</Button>
+        <Button onClick={handleSeek}>Seek (4:00)</Button>
+      </Box>
+      <Flex px={1} mt={2}>
+        <Slider
+          aria-label="slider-ex-1"
+          data-testid="sliderthumb"
+          value={playerTimeRef.current || 0}
+          min={0}
+          max={duration}
+          step={0.1}
+          onChange={handleOnSliderChange}
+          onChangeStart={handleOnSliderChangeStart}
+          onChangeEnd={handleOnSliderChangeEnd}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb data-testid="sliderthumb" ref={sliderThumbRef} />
+        </Slider>
+      </Flex>
+      <Flex flexDir={"row"}>
+        <Text>
+          Gsap-CurrentTime: {Math.round((time + Number.EPSILON) * 100) / 100} /{" "}
+          {duration}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/src/utils/useDeepEffect.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+// @ts-ignore
+import isEqual from "react-fast-compare";
+
+type EffectFunc = () => void;
+type Deps = ReadonlyArray<unknown>;
+
+const useDeepEffect = (effectFunc: EffectFunc, deps: Deps) => {
+  const isFirst = useRef(true);
+  const prevDeps = useRef(deps);
+  useEffect(() => {
+    const isSame = prevDeps.current.every((obj, index) =>
+      isEqual(obj, deps[index]),
+    );
+    if (isFirst.current || !isSame) {
+      effectFunc();
+    }
+    isFirst.current = false;
+    prevDeps.current = deps;
+  }, deps);
+};
+
+export default useDeepEffect;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />