reacthub-pixitweenjs 0.2.4 → 0.2.6

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/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

@@ -7,18 +7,23 @@ import {
   useLayoutEffect,
 } from "react";
 import gsap from "gsap";
-import { emitCustomEvent } from "react-custom-events";
+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: () => void;
+  handleSeek: (value: number) => void;
+  handleSeekTest: () => void;
   handleRestart: () => void;
   handleRepeat: () => void;
   playerTimeRef: React.MutableRefObject<number>;
+  totalDuration: number;
 }
 
 // Context has been created
@@ -30,6 +35,12 @@ const Events = {
   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
@@ -37,15 +48,18 @@ 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 parentElementRef = useRef<any>();
   // передаем предка анимируемых элементов
-  const q = gsap.utils.selector(parentElementRef);
+  // const q = gsap.utils.selector(parentElementRef);
 
   useLayoutEffect(() => {
     gsapCtx.current = gsap.context(() => {
@@ -60,29 +74,72 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
     return () => gsapCtx.current.revert();
   }, []);
 
+  gsap.ticker.add(() => {
+    // 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;
-    }
+    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;
   }, []);
 
+  // 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.01);
+        timeline.seek(0);
         timeline.pause();
+        setPlay(false);
         onUpdate();
       });
   }, []);
@@ -96,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;
 
@@ -110,39 +162,63 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
   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(() => {
+  const handleSeek = useCallback((value: number) => {
     const timeline = tl.current;
-    timeline.seek(4);
+    timeline.seek(value);
   }, []);
 
-  const setDurationTimeline = useCallback(() => {
+  const handleSeekTest = useCallback(() => {
     const timeline = tl.current;
+    timeline.seek(4);
+  }, []);
+
+  // const setTimelineDuration = useCallback(() => {
+  //   const timeline = tl.current;
+  //   timeline.totalDuration(3);
+  // }, []);
 
-    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, () => {
+    console.log("dragging start");
+    setIsDragging(true);
+  });
+
+  useCustomEventListener(Events.DRAGGING_END, () => {
+    setIsDragging(false);
+    console.log("dragging end");
+  });
+
+  console.log("set play updated", play);
   return (
     <GsapPixieContext.Provider
       value={{
@@ -152,9 +228,13 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
         handlePause,
         handleReset,
         handleSeek,
+        handleSeekTest,
         handleRestart,
         handleRepeat,
         playerTimeRef,
+        play,
+        totalDuration,
+        isDragging,
       }}
     >
       {children}

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/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/utils/AppStateProvider.tsx

@@ -8,19 +8,6 @@ interface AppState {
   };
 }
 
-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;
 }
@@ -28,43 +15,45 @@ interface AppStateContextProviderProps extends AppState {
 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: {
-      uniqueId: string;
-      transformation: { [key: string]: unknown };
-    }) => {
-      const { uniqueId, transformation } = data;
+    (data: TransformationEnd) => {
+      console.log("onAnchorTransformationEnd", data);
+      const { transformation } = data;
       const newAppState = {
-        ...props,
+        ...appStateRef.current,
         transformation: {
-          ...props.transformation,
+          ...appStateRef.current?.transformation,
           ...transformation,
         },
       };
+      console.log("saving state", newAppState);
       setAppState(newAppState);
     },
-    [props],
+    []
   );
 
-  const onMouseOverSprite = React.useCallback((data: unknown) => {}, []);
+  const onMouseOverSprite = React.useCallback(() => {}, []);
 
-  const onClickSprite = React.useCallback((data: unknown) => {}, []);
+  const onClickSprite = React.useCallback(() => {}, []);
 
   return (
-    <AppStateContext.Provider
-      value={{
+    <>
+      {/*@ts-ignore */}
+      {React.cloneElement(children, {
         ...appState,
         onAnchorTransformationEnd,
         onMouseOverSprite,
         onClickSprite,
-      }}
-    >
-      {children}
-    </AppStateContext.Provider>
+      })}
+    </>
   );
 };

package/src/utils/AppStateStage.tsx

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

package/src/utils/InteractionManager.tsx

@@ -0,0 +1,36 @@
+import { useApp } from "@pixi/react";
+import { useEffect } from "react";
+
+type PixiInteractionManagerProps = {
+  children: React.ReactNode;
+  options?: {
+    [key: string]: unknown;
+  };
+};
+
+const interactionManagerSettings = { moveWhenInside: true };
+
+/**
+ * Initialize Pixi Interaction Manager
+ * @param param0
+ * @returns
+ * @see https://pixijs.download/dev/docs/PIXI.InteractionManager.html
+ * @see https://pixijs.download/dev/docs/PIXI.InteractionManager.html#moveWhenInside
+ * @see https://pixijs.download/dev/docs/PIXI.InteractionManager.html#on
+ *
+ * */
+const InteractionManager = ({
+  children,
+  options = interactionManagerSettings,
+}: PixiInteractionManagerProps) => {
+  const app = useApp();
+
+  useEffect(() => {
+    Object.keys(options).forEach((key) => {
+      app.renderer.plugins.interaction[key] = options[key];
+    });
+  }, [options]);
+
+  return children;
+};
+export default InteractionManager;

package/src/utils/PixiStage.tsx

@@ -1,7 +1,6 @@
 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 {
@@ -18,10 +17,7 @@ const Stage: React.FC<StageProps> = ({ children, ...props }) => {
       render={(children: React.ReactNode | React.ReactElement) => (
         <PixiStage {...props}>
           {/* @ts-ignore */}
-          <AppStateContextProvider {...props}>
-            {/* @ts-ignore */}
-            {children}
-          </AppStateContextProvider>
+          {children}
         </PixiStage>
       )}
     >

package/src/utils/PixiTransformer.tsx

@@ -0,0 +1,165 @@
+import * as PIXI from "pixi.js";
+import * as React from "react";
+// @ts-ignore
+import { Transformer } from "reacthub-react-bindings";
+
+type PixiTransformerProps = {
+  pixiTransformerRef: React.MutableRefObject<any>;
+  imageRef: React.MutableRefObject<any>;
+  isMounted: boolean;
+  transformCommit?: (data: any) => void;
+  transformChange?: (data: any) => void;
+  mouseoverEvent?: (flag: boolean) => void;
+  onDoubleClick?: (data: any) => void;
+  uniqueId?: string;
+};
+
+type PixiTransformerState = {
+  isDragging: boolean;
+};
+
+/**
+ * Initialize PixiTransformer to transform the image
+ * @param param0
+ * @returns
+ */
+const PixiTransformer = ({
+  pixiTransformerRef,
+  imageRef,
+  isMounted,
+  transformCommit,
+  transformChange,
+  mouseoverEvent,
+  onDoubleClick,
+  uniqueId = "",
+}: PixiTransformerProps) => {
+  // states
+  const colorYellow = PIXI.utils.string2hex("#F3C409");
+  const anchorFill = PIXI.utils.string2hex("#F3C409");
+  const transformerState = React.useRef<PixiTransformerState>({
+    isDragging: false,
+  });
+
+  const handleOnMouseOver = React.useCallback(() => {
+    if (mouseoverEvent && !transformerState.current.isDragging) {
+      mouseoverEvent(true);
+    }
+  }, [mouseoverEvent]);
+
+  const handleOnMouseOut = React.useCallback(() => {
+    if (mouseoverEvent && !transformerState.current.isDragging) {
+      mouseoverEvent(false);
+    }
+  }, [mouseoverEvent]);
+
+  const handleOnMouseDown = React.useCallback(() => {
+    // update transfomer state to is draggin.
+    transformerState.current.isDragging = true;
+  }, []);
+
+  const handleOnMouseUp = React.useCallback(() => {
+    // update transfomer state to is not dragging.
+    transformerState.current.isDragging = false;
+  }, []);
+
+  const handleOnMouseUpOutside = React.useCallback(() => {
+    // update transfomer state to is not dragging.
+    transformerState.current.isDragging = false;
+  }, []);
+
+  const handleOnDoubleClick = React.useCallback(() => {
+    console.log("dobule click in pixi transformer");
+    if (onDoubleClick) onDoubleClick({ uniqueId });
+  }, [onDoubleClick]);
+
+  // add handler for transform change
+  const handleOnTransformChange = React.useCallback(
+    (e: any) => {
+      // update transfomer state to is draggin.
+      transformerState.current.isDragging = true;
+      if (transformChange) transformChange(e);
+    },
+    [transformChange]
+  );
+
+  const handleOnTransformCommit = React.useCallback(() => {
+    if (imageRef.current === null) return;
+    const x = imageRef.current.x;
+    const y = imageRef.current.y;
+    const width = imageRef.current.width;
+    const height = imageRef.current.height;
+    const rotate = imageRef.current.rotation;
+    const scale: [number, number] = [
+      imageRef.current.scale.x,
+      imageRef.current.scale.y,
+    ];
+    if (transformCommit) {
+      transformCommit({
+        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,
+        },
+      });
+    }
+    // update transformer state to is not dragging.
+    transformerState.current.isDragging = false;
+  }, [transformCommit]);
+
+  React.useEffect(() => {
+    if (pixiTransformerRef.current) {
+      pixiTransformerRef.current.on("mouseover", handleOnMouseOver);
+      pixiTransformerRef.current.on("mouseout", handleOnMouseOut);
+      pixiTransformerRef.current.on("mousedown", handleOnMouseDown);
+      pixiTransformerRef.current.on("mouseup", handleOnMouseUp);
+      pixiTransformerRef.current.on("mouseupoutside", handleOnMouseUpOutside);
+      /// pixiTransformerRef.current.on("dblclick", handleOnDoubleClick);
+      pixiTransformerRef.current.addListener("dblclick", handleOnDoubleClick);
+    }
+    return () => {
+      if (pixiTransformerRef.current) {
+        pixiTransformerRef.current.off("mouseover", handleOnMouseOver);
+        pixiTransformerRef.current.off("mouseout", handleOnMouseOut);
+        pixiTransformerRef.current.off("mousedown", handleOnMouseDown);
+        pixiTransformerRef.current.off("mouseup", handleOnMouseUp);
+        pixiTransformerRef.current.off(
+          "mouseupoutside",
+          handleOnMouseUpOutside
+        );
+        ////  pixiTransformerRef.current.off("dblclick", handleOnDoubleClick);
+        pixiTransformerRef.current.removeListener(
+          "dblclick",
+          handleOnDoubleClick
+        );
+      }
+    };
+  }, []);
+
+  return (
+    <Transformer
+      ref={pixiTransformerRef}
+      group={isMounted ? [imageRef.current] : []}
+      rotateEnabled={true}
+      boxRotationEnabled={true}
+      centeredScaling={true}
+      boxScalingEnabled={true}
+      wireframeStyle={{ thickness: 1, color: anchorFill }}
+      lockAspectRatio={true}
+      scaleEnabled={true}
+      handleStyle={{
+        // color: colorYellow,
+        outlineColor: colorYellow,
+        shape: "circle",
+        radius: 9,
+      }}
+      transformchange={handleOnTransformChange}
+      transformcommit={handleOnTransformCommit}
+    />
+  );
+};
+
+export default PixiTransformer;