reacthub-pixitweenjs 0.2.5 → 0.2.6

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

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

@@ -10,8 +10,19 @@ type PixiTransformerProps = {
   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,
@@ -19,23 +30,58 @@ const PixiTransformer = ({
   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) {
+    if (mouseoverEvent && !transformerState.current.isDragging) {
       mouseoverEvent(true);
     }
   }, [mouseoverEvent]);
 
   const handleOnMouseOut = React.useCallback(() => {
-    if (mouseoverEvent) {
+    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;
@@ -60,17 +106,35 @@ const PixiTransformer = ({
         },
       });
     }
+    // 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
+        );
       }
     };
   }, []);
@@ -81,6 +145,7 @@ const PixiTransformer = ({
       group={isMounted ? [imageRef.current] : []}
       rotateEnabled={true}
       boxRotationEnabled={true}
+      centeredScaling={true}
       boxScalingEnabled={true}
       wireframeStyle={{ thickness: 1, color: anchorFill }}
       lockAspectRatio={true}
@@ -91,7 +156,7 @@ const PixiTransformer = ({
         shape: "circle",
         radius: 9,
       }}
-      transformchange={transformChange}
+      transformchange={handleOnTransformChange}
       transformcommit={handleOnTransformCommit}
     />
   );

package/src/utils/VideoSeekBar.tsx

@@ -4,9 +4,7 @@ import {
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
-  SliderMark,
   Flex,
-  Icon,
   Text,
   Box,
   Button,
@@ -15,7 +13,7 @@ import {
   GsapPixieContext,
   Events,
 } from "../providers/GsapPixieContextProvider";
-import { useCustomEventListener, emitCustomEvent } from "react-custom-events";
+import { emitCustomEvent } from "react-custom-events";
 
 import { gsap } from "gsap";
 import { Draggable } from "gsap/Draggable";
@@ -24,19 +22,14 @@ 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,
     handleSeekTest,
     handleRestart,
-    handleRepeat,
     totalDuration: duration,
   } = React.useContext(GsapPixieContext);
 
@@ -44,7 +37,7 @@ export const VideoSeekBar: React.FC = () => {
   const [time, setTime] = React.useState<number>(0);
   const totalVideoSeconds = 20;
 
-  const animate = (time: number) => {
+  const animate = () => {
     /// console.log("totalDuration", timeline.current.totalDuration());
     if (playerTimeRef && playerTimeRef.current) {
       setTime(playerTimeRef.current);
@@ -78,13 +71,13 @@ export const VideoSeekBar: React.FC = () => {
    * 1. pause the timeline
    * 2. trigger custom event isDraggingStart
    */
-  const handleOnSliderChangeStart = (value: number) => {
+  const handleOnSliderChangeStart = () => {
     // trigger custom event and pause the timeline
     emitCustomEvent(Events.DRAGGING_START);
     timeline && timeline.current.pause();
   };
 
-  const handleOnSliderChangeEnd = (value: number) => {
+  const handleOnSliderChangeEnd = () => {
     // trigger custom event and pause the timeline
     emitCustomEvent(Events.DRAGGING_END);
     timeline && timeline.current.pause();

package/src/hooks/usePixiTransformer.tsx

@@ -1,168 +0,0 @@
-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 };
-};