reacthub-pixitweenjs 0.2.2 → 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/stories/Introduction.mdx

@@ -136,104 +136,5 @@ reacthub-pixitweenjs also provides a set of React components that make it easy t
 
 Overall, reacthub-pixitweenjs is a great choice for developers who want to create stunning animations and interactive graphics in their React applications. It provides a powerful set of tools and a simple API that makes it easy to create complex animations and manipulate images in a timeline sequence.
 
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
 Browse example stories now by navigating to them in the sidebar.
 View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/tutorials/"
-    target="_blank"
-  >
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://github.com/storybookjs/storybook"
-    target="_blank"
-  >
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{" "}
-  <code>stories/Introduction.stories.mdx</code>
-</div>

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;