reacthub-pixitweenjs 0.2.3 → 0.2.5

package/src/utils/PixiStage.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import ContextBridge from "./ContextBridge";
+import { Stage as PixiStage } from "@pixi/react";
+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 */}
+          {children}
+        </PixiStage>
+      )}
+    >
+      {children}
+    </ContextBridge>
+  );
+};
+
+export default Stage;

package/src/utils/PixiTransformer.tsx

@@ -0,0 +1,100 @@
+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;
+  uniqueId?: string;
+};
+const PixiTransformer = ({
+  pixiTransformerRef,
+  imageRef,
+  isMounted,
+  transformCommit,
+  transformChange,
+  mouseoverEvent,
+  uniqueId = "",
+}: PixiTransformerProps) => {
+  const colorYellow = PIXI.utils.string2hex("#F3C409");
+  const anchorFill = PIXI.utils.string2hex("#F3C409");
+
+  const handleOnMouseOver = React.useCallback(() => {
+    if (mouseoverEvent) {
+      mouseoverEvent(true);
+    }
+  }, [mouseoverEvent]);
+
+  const handleOnMouseOut = React.useCallback(() => {
+    if (mouseoverEvent) {
+      mouseoverEvent(false);
+    }
+  }, [mouseoverEvent]);
+
+  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,
+        },
+      });
+    }
+  }, [transformCommit]);
+
+  React.useEffect(() => {
+    if (pixiTransformerRef.current) {
+      pixiTransformerRef.current.on("mouseover", handleOnMouseOver);
+      pixiTransformerRef.current.on("mouseout", handleOnMouseOut);
+    }
+    return () => {
+      if (pixiTransformerRef.current) {
+        pixiTransformerRef.current.off("mouseover", handleOnMouseOver);
+        pixiTransformerRef.current.off("mouseout", handleOnMouseOut);
+      }
+    };
+  }, []);
+
+  return (
+    <Transformer
+      ref={pixiTransformerRef}
+      group={isMounted ? [imageRef.current] : []}
+      rotateEnabled={true}
+      boxRotationEnabled={true}
+      boxScalingEnabled={true}
+      wireframeStyle={{ thickness: 1, color: anchorFill }}
+      lockAspectRatio={true}
+      scaleEnabled={true}
+      handleStyle={{
+        // color: colorYellow,
+        outlineColor: colorYellow,
+        shape: "circle",
+        radius: 9,
+      }}
+      transformchange={transformChange}
+      transformcommit={handleOnTransformCommit}
+    />
+  );
+};
+
+export default PixiTransformer;

package/src/utils/VideoSeekBar.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import {
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderMark,
+  Flex,
+  Icon,
+  Text,
+  Box,
+  Button,
+} from "@chakra-ui/react";
+import {
+  GsapPixieContext,
+  Events,
+} from "../providers/GsapPixieContextProvider";
+import { useCustomEventListener, emitCustomEvent } from "react-custom-events";
+
+import { gsap } from "gsap";
+import { Draggable } from "gsap/Draggable";
+
+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);
+
+  /// state
+  const [time, setTime] = React.useState<number>(0);
+  const totalVideoSeconds = 20;
+
+  const animate = (time: number) => {
+    /// console.log("totalDuration", timeline.current.totalDuration());
+    if (playerTimeRef && playerTimeRef.current) {
+      setTime(playerTimeRef.current);
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  };
+
+  React.useEffect(() => {
+    rafRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafRef.current!);
+  }, []); // Make sure the effect runs only once
+
+  const handleOnSliderChange = (value: number) => {
+    console.log("onslider change", value);
+    const nTotSeconds =
+      totalVideoSeconds && totalVideoSeconds > 0 ? totalVideoSeconds : 1;
+    const progress = value / nTotSeconds;
+    console.log("progressbar", value, progress);
+
+    playerTimeRef.current = value;
+    // handleSeek(value);
+    // // @ts-ignore
+    timeline && timeline.current.progress(progress);
+    // timeline && timeline.current.pause();
+    // gsap.set(sliderProgressRef.current!, {
+    //   scaleX: progress,
+    // });
+  };
+
+  /** on slider start
+   * 1. pause the timeline
+   * 2. trigger custom event isDraggingStart
+   */
+  const handleOnSliderChangeStart = (value: number) => {
+    // trigger custom event and pause the timeline
+    emitCustomEvent(Events.DRAGGING_START);
+    timeline && timeline.current.pause();
+  };
+
+  const handleOnSliderChangeEnd = (value: number) => {
+    // trigger custom event and pause the timeline
+    emitCustomEvent(Events.DRAGGING_END);
+    timeline && timeline.current.pause();
+  };
+
+  /** Create Draggable for the Gsap Player */
+
+  return (
+    <Flex flexDir={"column"}>
+      <Box>
+        <Button onClick={handleRestart}>Play</Button>
+        <Button onClick={handlePause}>Pause</Button>
+        <Button onClick={handlePlay}>Resume</Button>
+        <Button onClick={handleSeekTest}>Seek (4:00)</Button>
+      </Box>
+      <Flex px={1} mt={2}>
+        <Slider
+          aria-label="slider-ex-1"
+          data-testid="sliderthumb"
+          value={playerTimeRef.current || 0}
+          min={0}
+          max={10}
+          step={0.1}
+          onChange={handleOnSliderChange}
+          onChangeStart={handleOnSliderChangeStart}
+          onChangeEnd={handleOnSliderChangeEnd}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb data-testid="sliderthumb" ref={sliderThumbRef} />
+        </Slider>
+      </Flex>
+      <Flex flexDir={"row"}>
+        <Text>
+          Gsap-CurrentTime: {Math.round((time + Number.EPSILON) * 100) / 100} /{" "}
+          {duration}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/src/utils/useDebounce.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/utils/useDeepEffect.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+// @ts-ignore
+import isEqual from "react-fast-compare";
+
+type EffectFunc = () => void;
+type Deps = ReadonlyArray<unknown>;
+
+const useDeepEffect = (effectFunc: EffectFunc, deps: Deps) => {
+  const isFirst = useRef(true);
+  const prevDeps = useRef(deps);
+  useEffect(() => {
+    const isSame = prevDeps.current.every((obj, index) =>
+      isEqual(obj, deps[index]),
+    );
+    if (isFirst.current || !isSame) {
+      effectFunc();
+    }
+    isFirst.current = false;
+    prevDeps.current = deps;
+  }, deps);
+};
+
+export default useDeepEffect;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "postcssOptions": {
+            "useConfig": true
+          }
+        }
+      }
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals"],
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/{vite.config.js → vite.config.ts}

@@ -1,9 +1,11 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+// import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
+import EnvironmentPlugin from "vite-plugin-environment";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), EnvironmentPlugin("all")],
   // build: {
   //   rollupOptions: {
   //     external: [

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    css: true,
+    environment: "jsdom",
+  },
+});

package/src/App.jsx

@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
-}
-
-export default App

package/src/index.js

@@ -1,3 +0,0 @@
-export * from "./stories/PixiImageSprite";
-// Path: src\index.js
-export * from './providers';

package/src/providers/ContextBridge.jsx

@@ -1,67 +0,0 @@
-// your Stage:
-import { Stage as PixiStage } from "@pixi/react";
-import React from "react";
-import { Flex, Icon, Text, Box, Button } from "@chakra-ui/react";
-import * as PIXI from "pixi.js";
-import { ChakraProvider } from "@chakra-ui/react";
-import {
-  GsapPixieContext,
-  GsapPixieContextProvider,
-} from "./GsapPixieContextProvider";
-
-import { VideoSeekBar } from "./VideoSeekBar";
-
-// the context bridge:
-const ContextBridge = ({ children, Context, render }) => {
-  return (
-    <Context.Consumer>
-      {(value) => {
-        console.log("value", value);
-        return render(
-          <Context.Provider value={value}>{children}</Context.Provider>,
-        );
-      }}
-    </Context.Consumer>
-  );
-};
-
-const Stage = ({ children, ...props }) => {
-  return (
-    <ContextBridge
-      Context={GsapPixieContext}
-      render={(children) => <PixiStage {...props}>{children}</PixiStage>}
-    >
-      {children}
-    </ContextBridge>
-  );
-};
-
-export const App = ({ children, backgroundColor, ...props }) => {
-  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/providers/GsapPixieContextProvider.jsx

@@ -1,162 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useLayoutEffect,
-} from "react";
-import gsap from "gsap";
-import { emitCustomEvent } from "react-custom-events";
-// import { Power4 } from "gsap";
-
-// Context has been created
-const GsapPixieContext = React.createContext({});
-
-const Events = {
-  STOP: "GSAP_STOP",
-  PAUSE: "GSAP_PAUSE",
-  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);
-
-  // gsap.ticker.add((time, deltaTime, frame) => {
-  //   console.log("timeframe", time, deltaTime, frame);
-  //   setFrameNumber(frame);
-  // });
-
-  const parentElementRef = useRef();
-  // передаем предка анимируемых элементов
-  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();
-  }, []);
-
-  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;
-  }, []);
-
-  // const timeline = React.useCallback(
-  //   gsap.timeline({
-  //     paused: true,
-  //     defaults: { duration: 0, onUpdate: onUpdate },
-  //   }),
-  //   [],
-  // );
-
-  useEffect(() => {
-    const timeline = tl.current;
-    timeline
-      .eventCallback("onUpdate", function () {
-        /// console.log("onupdate", timeline.progress());
-        onUpdate();
-      })
-      .eventCallback("onComplete", function () {
-        timeline.seek(0.01);
-        timeline.pause();
-        onUpdate();
-      });
-  }, []);
-
-  useEffect(() => {
-    const timeline = tl.current;
-    if (!play) {
-      timeline.pause();
-    } else {
-      timeline.resume();
-    }
-  }, [play]);
-
-  const addTotalDuration = (duration) => {
-    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();
-  }, []);
-
-  const handleRepeat = useCallback(() => {
-    const timeline = tl.current;
-
-    timeline.repeat(1);
-    timeline.restart();
-  }, []);
-
-  const handleSeek = useCallback(() => {
-    const timeline = tl.current;
-    timeline.seek(4);
-  }, []);
-
-  const setDurationTimeline = useCallback(() => {
-    const timeline = tl.current;
-
-    timeline.totalDuration(3);
-  }, []);
-
-  const handlePause = () => {
-    const timeline = tl.current;
-
-    timeline.pause();
-    emitCustomEvent(Events.PAUSE);
-  };
-
-  const handlePlay = () => {
-    const timeline = tl.current;
-    timeline.resume();
-    emitCustomEvent(Events.RESUME);
-  };
-
-  return (
-    <GsapPixieContext.Provider
-      value={{
-        gsapCtx,
-        tl,
-        handlePlay,
-        handlePause,
-        handleReset,
-        handleSeek,
-        handleRestart,
-        handleRepeat,
-        playerTimeRef,
-      }}
-    >
-      {children}
-    </GsapPixieContext.Provider>
-  );
-};
-
-export { GsapPixieContext, GsapPixieContextProvider, Events };