reacthub-pixitweenjs 0.2.5 → 0.2.7

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 };
-};