reacthub-pixitweenjs 0.2.10 → 0.2.12

package/src/utils/GsapAnim.tsx

@@ -1,107 +0,0 @@
-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: string): Ease => {
-  let ease: Ease = {};
-  switch (animate) {
-    case "NONE":
-    case "none":
-      break;
-    case "BOUNCE_IN":
-      ease.from = {
-        duration: 2,
-        ease: "bounce.out",
-        y: -1500,
-      };
-      break;
-    case "BOUNCE_IN_DOWN":
-      ease.from = { ease: "bounce.out", y: -1500, duration: 2 };
-      break;
-    case "BOUNCE_IN_LEFT":
-      ease.from = { ease: "bounce.out", x: -1500, duration: 2 };
-      break;
-    case "BOUNCE_IN_RIGHT":
-      ease.from = { ease: "bounce.out", x: 1500, duration: 2 };
-      break;
-    case "BOUNCE_IN_UP":
-      ease.from = { ease: "bounce.out", y: 1500, duration: 2 };
-      break;
-    case "BOUNCE_OUT":
-      ease.from = { ease: "bounce.in", y: 2, duration: 2 };
-      break;
-    case "BOUNCE_OUT_DOWN":
-      break;
-    case "BOUNCE_OUT_LEFT":
-      break;
-    case "BOUNCE_OUT_RIGHT":
-      break;
-    case "BOUNCE_OUT_UP":
-      break;
-    case "FADE_IN":
-      ease.to = { ease: "power4.in", alpha: 1, duration: 0.5 };
-      break;
-    case "FADE_IN_DOWN":
-      ease.fromTo = {
-        from: { y: -1000, alpha: 0 },
-        to: { ease: "power4.in", y: 0, alpha: 1, duration: 1 },
-      };
-      break;
-    case "FADE_IN_LEFT":
-      ease.fromTo = {
-        from: { x: -1000, alpha: 0 },
-        to: { ease: "power4.in", x: 0, alpha: 1, duration: 1 },
-      };
-      break;
-    case "FADE_IN_RIGHT":
-      ease.fromTo = {
-        from: { x: 2000, alpha: 0 },
-        to: { ease: "power4.in", x: 0, alpha: 1, duration: 1 },
-      };
-      break;
-    case "FADE_IN_UP":
-      ease.fromTo = {
-        from: { y: 2000, alpha: 0 },
-        to: { ease: "power4.in", y: 0, alpha: 1, duration: 1 },
-      };
-      break;
-    case "FADE_OUT":
-      break;
-    case "FADE_OUT_DOWN":
-      break;
-    case "FADE_OUT_LEFT":
-      break;
-    case "FADE_OUT_RIGHT":
-      break;
-    case "FADE_OUT_UP":
-      break;
-    default:
-      break;
-  }
-
-  return ease;
-};

package/src/utils/InteractionManager.tsx

@@ -1,36 +0,0 @@
-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,29 +0,0 @@
-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

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

package/src/utils/VideoSeekBar.tsx

@@ -1,122 +0,0 @@
-import * as React from "react";
-import {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-  Flex,
-  Text,
-  Box,
-  Button,
-} from "@chakra-ui/react";
-import {
-  GsapPixieContext,
-  Events,
-} from "../providers/GsapPixieContextProvider";
-import { 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 sliderThumbRef = React.useRef<HTMLDivElement>(null);
-  const {
-    tl: timeline,
-    playerTimeRef,
-    handlePlay,
-    handlePause,
-    handleSeekTest,
-    handleRestart,
-    totalDuration: duration,
-  } = React.useContext(GsapPixieContext);
-
-  /// state
-  const [time, setTime] = React.useState<number>(0);
-  const totalVideoSeconds = 20;
-
-  const animate = () => {
-    /// 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 = () => {
-    // trigger custom event and pause the timeline
-    emitCustomEvent(Events.DRAGGING_START);
-    timeline && timeline.current.pause();
-  };
-
-  const handleOnSliderChangeEnd = () => {
-    // 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

@@ -1,15 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/tsconfig.json

@@ -1,37 +0,0 @@
-{
-  "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

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

package/vite.config.ts

@@ -1,39 +0,0 @@
-import { defineConfig } from "vite";
-// 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(), EnvironmentPlugin("all")],
-  build: {
-    lib: {
-      entry: "src/index.ts",
-      name: "reacthub-pixitweenjs",
-      fileName: (format) => `index.${format}.js`,
-    },
-    rollupOptions: {
-      external: [
-        "react",
-        "react-dom",
-        "pixi.js",
-        "gsap",
-        // "pixi.js-legacy",
-        // "pixi-sound",
-        // "pixi-viewport",
-        // "pixi-viewport-extensions",
-        // "@pixi/core",
-        // "@pixi/display",
-        // "@pixi/app",
-      ],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          "pixi.js": "PIXI",
-          gsap: "gsap",
-        },
-      },
-    },
-  },
-});

package/vitest.config.ts

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