reacthub-pixitweenjs 0.2.3 → 0.2.5

package/src/components/PixiVideoSprite/index.ts

@@ -0,0 +1 @@
+export { default as PixiVideoSprite } from "./PixiVideoSprite";

package/src/declare.module.ts

@@ -0,0 +1,5 @@
+// declare module "@pixi/react" {
+//   interface Container {
+//     children?: React.ReactNode;
+//   }
+// }

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.tsx

@@ -0,0 +1,251 @@
+import * as React from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useLayoutEffect,
+} from "react";
+import gsap from "gsap";
+import { emitCustomEvent, useCustomEventListener } from "react-custom-events";
+import { useDebounce } from "../utils/useDebounce";
+
+interface GsapPixieContextProps {
+  gsapCtx: React.MutableRefObject<any>;
+  tl: React.MutableRefObject<any>;
+  play: boolean;
+  isDragging: boolean;
+  handlePlay: () => void;
+  handlePause: () => void;
+  handleReset: () => void;
+  handleSeek: (value: number) => void;
+  handleSeekTest: () => void;
+  handleRestart: () => void;
+  handleRepeat: () => void;
+  playerTimeRef: React.MutableRefObject<number>;
+  totalDuration: number;
+}
+
+// Context has been created
+// @ts-ignore
+const GsapPixieContext = React.createContext<GsapPixieContextProps>({});
+
+const Events = {
+  STOP: "GSAP_STOP",
+  PAUSE: "GSAP_PAUSE",
+  PLAY: "GSAP_PLAY",
+  RESUME: "GSAP_RESUME",
+  RESTART: "GSAP_RESTART",
+  REPEAT: "GSAP_REPEAT",
+  SEEK: "GSAP_SEEK",
+  RESET: "GSAP_RESET",
+  DRAGGING_START: "GSAP_DRAGGING_START",
+  DRAGGING_END: "GSAP_DRAGGING_END",
+};
+
+// Provider
+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);
+  const delayedDuration = useDebounce(internalDuration, 600);
+
+  const tl = useRef<any>();
+  const gsapCtx = useRef<any>();
+  const playerTimeRef = useRef<number>(0.001);
+
+  const parentElementRef = useRef<any>();
+  // передаем предка анимируемых элементов
+  const q = gsap.utils.selector(parentElementRef);
+
+  useLayoutEffect(() => {
+    gsapCtx.current = gsap.context(() => {
+      // add a box and circle animation to our timeline and play on first render
+      // console.log("creating timeline");
+      tl.current && tl.current.progress(0).kill();
+      tl.current = gsap.timeline({
+        paused: true,
+        defaults: { duration: 0 },
+      });
+    });
+    return () => gsapCtx.current.revert();
+  }, []);
+
+  gsap.ticker.add((time, deltaTime, frame) => {
+    // console.log("timeframe", time, deltaTime, frame);
+    // setFrameNumber(frame);
+    if (tl.current && getTimelineDuration) {
+      setInternalDuration(getTimelineDuration());
+    }
+  });
+
+  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;
+    }
+    //  console.log(`elapseTime :${elapsedTime} and frame: ${frameNumber}`);
+    //time = now;
+    playerTimeRef.current = now;
+  }, []);
+
+  // set the total duration based on the delayed duration value
+  useEffect(() => {
+    setTotalDuration(delayedDuration);
+  }, [delayedDuration]);
+
+  useEffect(() => {
+    const timeline = tl.current;
+    timeline
+      .eventCallback("onStart", function () {
+        // console.log("onstart", timeline.progress());
+        // setPlay(true);
+        // onUpdate();
+      })
+      .eventCallback("onInterrupt", function () {
+        /// console.log("onInterrupt", timeline.progress());
+        setPlay(false);
+        onUpdate();
+      })
+      .eventCallback("onUpdate", function () {
+        /// console.log("onupdate", timeline.progress());
+        onUpdate();
+      })
+      // .eventCallback("onRepeat", function () {
+      //   /// console.log("onrepeat", timeline.progress());
+      //   onUpdate();
+      // })
+      // .eventCallback("onReverseComplete", function () {
+      //   /// console.log("onReverseComplete", timeline.progress());
+      //   onUpdate();
+      // })
+      // write a pause event
+      .eventCallback("onPause", function () {
+        console.log("onPause", timeline.progress());
+        setPlay(false);
+        onUpdate();
+      })
+      .eventCallback("onResume", function () {
+        console.log("onResume", timeline.progress());
+        setPlay(true);
+        onUpdate();
+      })
+      .eventCallback("onComplete", function () {
+        timeline.seek(0);
+        timeline.pause();
+        setPlay(false);
+        onUpdate();
+      });
+  }, []);
+
+  useEffect(() => {
+    const timeline = tl.current;
+    if (!play) {
+      timeline.pause();
+    } else {
+      timeline.resume();
+    }
+  }, [play]);
+
+  const addTotalDuration = (duration: number) => {
+    const timeline = tl.current;
+    timeline.totalDuration(duration);
+  };
+
+  const handleReset = useCallback(() => {
+    const timeline = tl.current;
+
+    timeline.revert();
+  }, []);
+
+  const handleRestart = useCallback(() => {
+    const timeline = tl.current;
+    timeline.restart();
+    setPlay(true);
+  }, []);
+
+  const handleRepeat = useCallback(() => {
+    const timeline = tl.current;
+    timeline.repeat(1);
+    timeline.restart();
+    // setPlay(true);
+  }, []);
+
+  const handleSeek = useCallback((value: number) => {
+    const timeline = tl.current;
+    timeline.seek(value);
+  }, []);
+
+  const handleSeekTest = useCallback(() => {
+    const timeline = tl.current;
+    timeline.seek(4);
+  }, []);
+
+  const setTimelineDuration = useCallback(() => {
+    const timeline = tl.current;
+    timeline.totalDuration(3);
+  }, []);
+
+  const getTimelineDuration = useCallback(() => {
+    const timeline = tl.current;
+    if (!timeline) return 0;
+    return timeline.totalDuration();
+  }, []);
+
+  const handlePause = () => {
+    const timeline = tl.current;
+    timeline.pause();
+    emitCustomEvent(Events.PAUSE);
+    setPlay(false);
+  };
+
+  const handlePlay = () => {
+    const timeline = tl.current;
+    setPlay(true);
+    timeline.resume();
+    emitCustomEvent(Events.RESUME);
+  };
+
+  /** Event listener dragging */
+  useCustomEventListener(Events.DRAGGING_START, (time) => {
+    console.log("dragging start");
+    setIsDragging(true);
+  });
+
+  useCustomEventListener(Events.DRAGGING_END, (time) => {
+    setIsDragging(false);
+    console.log("dragging end");
+  });
+
+  console.log("set play updated", play);
+  return (
+    <GsapPixieContext.Provider
+      value={{
+        gsapCtx,
+        tl,
+        handlePlay,
+        handlePause,
+        handleReset,
+        handleSeek,
+        handleSeekTest,
+        handleRestart,
+        handleRepeat,
+        playerTimeRef,
+        play,
+        totalDuration,
+        isDragging,
+      }}
+    >
+      {children}
+    </GsapPixieContext.Provider>
+  );
+};
+
+export { GsapPixieContext, GsapPixieContextProvider, Events };

package/src/providers/index.ts

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

package/src/reacthub-react-bindings.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as PIXI from "pixi.js";
+
+declare module "reacthub-react-bindings" {
+  interface TransformerProps {
+    group: PIXI.DisplayObject[];
+    rotateEnabled?: boolean;
+    boxRotationEnabled?: boolean;
+    boxScalingEnabled?: boolean;
+    wireframeStyle?: {
+      thickness: number;
+      color: number;
+    };
+    lockAspectRatio?: boolean;
+    scaleEnabled?: boolean;
+    handleStyle?: {
+      color?: number;
+      outlineColor?: number;
+      shape?: "circle" | "square";
+      radius?: number;
+    };
+    transformchange?: (transform: PIXI.Matrix) => void;
+    transformcommit?: (transform: PIXI.Matrix) => void;
+  }
+
+  export class Transformer extends React.Component<TransformerProps> {}
+}

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,59 @@
+import * as React from "react";
+import useDeepEffect from "./useDeepEffect";
+import { TransformationEnd } from "../types/transformation";
+
+interface AppState {
+  transformation: {
+    [key: string]: unknown;
+  };
+}
+
+interface AppStateContextProviderProps extends AppState {
+  children: React.ReactNode;
+}
+
+export const AppStateContextProvider: React.FC<
+  AppStateContextProviderProps
+> = ({ children, ...props }) => {
+  console.log("AppStateContextProvider", props);
+  const [appState, setAppState] = React.useState<AppState>(props);
+  const appStateRef = React.useRef<AppState>(appState);
+
+  useDeepEffect(() => {
+    setAppState(props);
+    appStateRef.current = props;
+  }, [props]);
+
+  const onAnchorTransformationEnd = React.useCallback(
+    (data: TransformationEnd) => {
+      console.log("onAnchorTransformationEnd", data);
+      const { uniqueId, transformation } = data;
+      const newAppState = {
+        ...appStateRef.current,
+        transformation: {
+          ...appStateRef.current?.transformation,
+          ...transformation,
+        },
+      };
+      console.log("saving state", newAppState);
+      setAppState(newAppState);
+    },
+    []
+  );
+
+  const onMouseOverSprite = React.useCallback((data: unknown) => {}, []);
+
+  const onClickSprite = React.useCallback((data: unknown) => {}, []);
+
+  return (
+    <>
+      {/*@ts-ignore */}
+      {React.cloneElement(children, {
+        ...appState,
+        onAnchorTransformationEnd,
+        onMouseOverSprite,
+        onClickSprite,
+      })}
+    </>
+  );
+};

package/src/utils/AppStateStage.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import ContextBridge from "./ContextBridge";
+import { AppStateContext } from "./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":