reacthub-pixitweenjs 0.2.3 → 0.2.4

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/VideoSeekBar.jsx

@@ -1,186 +0,0 @@
-import React from "react";
-import {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-  SliderMark,
-  Flex,
-  Icon,
-  Text,
-  Box,
-  Button,
-} from "@chakra-ui/react";
-import { GsapPixieContext } from "./GsapPixieContextProvider";
-
-import { gsap } from "gsap";
-import { Draggable } from "gsap/Draggable";
-
-gsap.registerPlugin(Draggable);
-
-export const VideoSeekBar = () => {
-  const rafRef = React.useRef();
-  const sliderRef = React.useRef();
-  const sliderThumbRef = React.useRef(null);
-  const sliderProgressRef = React.useRef(null);
-  const {
-    tl: timeline,
-    playerTimeRef,
-    handlePlay,
-    handlePause,
-    handleReset,
-    handleSeek,
-    handleRestart,
-    handleRepeat,
-  } = React.useContext(GsapPixieContext);
-
-  /// state
-  const [time, setTime] = React.useState(0);
-  const [duration, setDuration] = React.useState(0);
-
-  const totalVideoSeconds = 20;
-
-  const animate = (time) => {
-    /// console.log("totalDuration", timeline.current.totalDuration());
-    setDuration(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) => {
-    const nTotSeconds =
-      totalVideoSeconds && totalVideoSeconds > 0 ? totalVideoSeconds : 1;
-    const progress = value / nTotSeconds;
-    console.log("progressbar", value, progress);
-    playerTimeRef.current = value;
-    timeline && timeline.progress(progress);
-    gsap.set(sliderProgressRef.current, {
-      scaleX: progress,
-    });
-  };
-  const handleOnSliderChangeStart = (value) => {};
-  const handleOnSliderChangeEnd = (value) => {};
-
-  /** Create Draggable for the Gsap Player */
-
-  const updateDrag = React.useCallback(
-    (x, maxX) => {
-      console.log("updatgeDrag running", x, maxX);
-      const currentTime = (x / maxX) * totalVideoSeconds;
-      const prog = x / sliderRef.current.offsetWidth;
-      console.log("drage update", currentTime, prog);
-    },
-    [totalVideoSeconds],
-  );
-
-  /**
-  React.useEffect(() => {
-    console.log(sliderRef.current.clientWidth, sliderRef.current.innerWidth);
-    console.log(
-      sliderThumbRef.current.clientWidth,
-      sliderThumbRef.current.innerWidth,
-    );
-    Draggable.create(sliderThumbRef.current, {
-      type: "x",
-      trigger: sliderRef.current,
-      bounds: sliderRef.current,
-      onPress: function () {
-        console.log("Draggable clicked");
-      },
-      onDrag: function () {
-        const currentTime = (this.x / this.maxX) * totalVideoSeconds;
-        /// console.log("onDragggg currenttime", currentTime);
-        playerTimeRef.current = currentTime;
-        const progress = this.x / sliderRef.current.offsetWidth;
-        timeline && timeline.progress(progress);
-        gsap.set(sliderProgressRef.current, {
-          scaleX: progress,
-        });
-      },
-      onRelease: function (e) {
-        e.preventDefault();
-        timeline && timeline.pause();
-        handlePause();
-      },
-    });
-  }, []);
- */
-  return (
-    <Flex flexDir={"column"}>
-      <Box>
-        <Button onClick={handleRestart}>Play</Button>
-        <Button onClick={handlePause}>Pause</Button>
-        <Button onClick={handlePlay}>Resume</Button>
-        <Button onClick={handleSeek}>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={duration}
-          step={0.1}
-          onChange={handleOnSliderChange}
-          onChangeStart={handleOnSliderChangeStart}
-          onChangeEnd={handleOnSliderChangeEnd}
-        >
-          <SliderTrack>
-            <SliderFilledTrack />
-          </SliderTrack>
-          <SliderThumb data-testid="sliderthumb" />
-        </Slider>
-      </Flex>
-      <Flex flexDir={"row"}>
-        <Text>
-          Gsap-CurrentTime: {Math.round((time + Number.EPSILON) * 100) / 100} /{" "}
-          {duration}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-};
-
-/**
- * 
- <Box mt={5}>
-          <Box
-            ref={sliderRef}
-            bgColor={"black"}
-            width={"100%"}
-            height={5}
-            cursor={"pointer"}
-            position={"relative"}
-          >
-            <Box
-              ref={sliderThumbRef}
-              data-id="draggable"
-              bgColor={"yellow"}
-              h={5}
-              width={"5px"}
-              top={0}
-              position={"absolute"}
-              zIndex={2}
-              transformOrigin={"0 0"}
-            />
-            <Box
-              ref={sliderProgressRef}
-              data-id="draggable"
-              width={"100%"}
-              height={"100%"}
-              bgColor={"green.100"}
-              transform={"scaleX(0)"}
-              transformOrigin={"0 0"}
-              position={"relative"}
-              zIndex={1}
-            />
-          </Box>
-        </Box>
- */

package/src/providers/index.js

@@ -1,3 +0,0 @@
-export *  from './ContextBridge';
-export * from './GsapAnim';
-export * from './GsapPixieContextProvider';

package/src/stories/PixiImageSprite/PixiImageSprite.jsx

@@ -1,318 +0,0 @@
-import React, { Context } from "react";
-import PropTypes from "prop-types";
-import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
-import { Sprite, Container, useApp, withFilters } from "@pixi/react";
-import { AdjustmentFilter } from "@pixi/filter-adjustment";
-import * as PIXI from "pixi.js";
-import gsap from "gsap";
-import isEmpty from "lodash/isEmpty";
-import { getAnimByName } from "../../providers/GsapAnim";
-
-const Filters = withFilters(Container, {
-  blur: PIXI.filters.BlurFilter,
-  adjust: AdjustmentFilter,
-  matrix: PIXI.filters.ColorMatrixFilter,
-});
-
-/** filter config */
-const config = {
-  dot: {
-    scale: 1,
-    angle: 5,
-  },
-  blur: {
-    blur: 0,
-    quality: 4,
-  },
-};
-
-/** CYAN Filters */
-const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
-
-export const PixiImageSprite = (props) => {
-  /// console.log("allProps", props);
-  //// Refs
-  const imageRef = React.useRef(null);
-  const containerRef = React.useRef(null);
-  const imgGroupRef = React.useRef(null);
-
-  //// Context
-  const { tl } = React.useContext(GsapPixieContext);
-
-  /// 1001
-  console.log("contxt Values", tl);
-  const {
-    src,
-    startAt,
-    endAt,
-    initialAlpha,
-    transformation: {
-      x,
-      y,
-      width,
-      height,
-      anchor,
-      animation,
-      colorCorrection,
-      effect,
-    } = {},
-    pointerdown,
-    pointerup,
-    mousedown,
-    mouseup,
-    pointerover,
-    mouseover,
-    mouseout,
-    ...restProps
-  } = props;
-
-  const {
-    enabled = false,
-    temperature = 1,
-    hue = 1,
-    contrast = 1,
-    saturation = 1,
-    exposure = 1,
-    reset,
-    sharpness = 1,
-    value = 0,
-    levels = 1,
-    luminance = 0,
-    enhance = 0,
-    blurRadius = 0,
-    red = 150,
-    green = 150,
-    blue = 150,
-    alpha = 1,
-    scaleInput = 1,
-  } = colorCorrection;
-
-  const app = useApp();
-  const PixiTransformer = React.useRef(null);
-
-  /** adjustment filter */
-  const adjustments = {
-    brightness: exposure,
-    contrast,
-    saturation,
-    alpha,
-  };
-
-  React.useEffect(() => {
-    let ctx = gsap.context(() => {});
-    if (containerRef.current && tl.current) {
-      const data = {
-        duration: Number(endAt) - Number(startAt),
-      };
-
-      const ease = getAnimByName(animation);
-      ctx = gsap.context(() => {
-        if (!isEmpty(ease.from)) {
-          tl.current
-            .from(containerRef.current, { ...ease.from }, startAt)
-            .to(imgGroupRef.current, { alpha: 1, duration: 0.2 }, startAt)
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else if (!isEmpty(ease.to)) {
-          tl.current
-            .to(
-              containerRef.current,
-              { alpha: 1, duration: 0.2, ...ease.to },
-              startAt,
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else if (!isEmpty(ease.fromTo)) {
-          tl.current
-            .fromTo(
-              containerRef.current,
-              ease.fromTo.from,
-              ease.fromTo.to,
-              startAt,
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else {
-          tl.current
-            .to(containerRef.current, { alpha: 1, duration: 0.01 }, startAt)
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(
-              containerRef.current,
-              { alpha: 0, duration: 0.1 },
-              Number(endAt) - Number(0.1),
-            );
-        }
-      });
-    }
-    return () => ctx.revert(); // cleanup!
-  }, [animation, startAt, endAt]);
-
-  return (
-    <Container ref={containerRef} alpha={initialAlpha}>
-      {colorCorrection && colorCorrection.enabled ? (
-        <Filters
-          scale={1}
-          blur={{ blur: blurRadius, quality: 4 }}
-          adjust={adjustments}
-          apply={({ matrix }) => {
-            if (effect === "BlackAndWhite") {
-              matrix.desaturate();
-            } else if (effect === "Sepia") {
-              matrix.sepia();
-            } else if (effect === "RetroVintage") {
-              matrix.negative();
-            } else if (effect === "NightVision") {
-              matrix.negative();
-            } else if (effect === "Normal") {
-              matrix.reset();
-            }
-          }}
-          matrix={{
-            enabled: true,
-            matrix: CYAN,
-          }}
-        >
-          <Container ref={imgGroupRef}>
-            <Sprite
-              image={src}
-              width={width}
-              height={height}
-              anchor={anchor}
-              ref={imageRef}
-              x={x}
-              y={y}
-              interactive={true}
-              pointerdown={pointerdown}
-              pointerup={pointerup}
-              pointerover={pointerover}
-              mousedown={mousedown}
-              mouseup={mouseup}
-              mouseover={mouseover}
-              mouseout={mouseout}
-            />
-          </Container>
-        </Filters>
-      ) : (
-        <Container ref={imgGroupRef}>
-          <Sprite
-            image={src}
-            width={width}
-            height={height}
-            anchor={anchor}
-            ref={imageRef}
-            x={x}
-            y={y}
-            interactive={true}
-            pointerdown={pointerdown}
-            pointerup={pointerup}
-            pointerover={pointerover}
-            mousedown={mousedown}
-            mouseup={mouseup}
-            mouseover={mouseover}
-            mouseout={mouseout}
-          />
-        </Container>
-      )}
-    </Container>
-  );
-};
-
-PixiImageSprite.propTypes = {
-  // app background color property
-  backgroundColor: PropTypes.string,
-  // sprite transformation properties
-  transformation: PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    anchor: PropTypes.number,
-    rotation: PropTypes.number,
-    alpha: PropTypes.number,
-    scale: PropTypes.number,
-    tint: PropTypes.number,
-    blendMode: PropTypes.number,
-    colorCorrection: PropTypes.shape({
-      enabled: PropTypes.bool,
-      temperature: PropTypes.number,
-      hue: PropTypes.number,
-      contrast: PropTypes.number,
-      saturation: PropTypes.number,
-      exposure: PropTypes.number,
-      reset: PropTypes.bool,
-      sharpness: PropTypes.number,
-      value: PropTypes.number,
-      levels: PropTypes.number,
-      luminance: PropTypes.number,
-      enhance: PropTypes.number,
-      blurRadius: PropTypes.number,
-      red: PropTypes.number,
-      green: PropTypes.number,
-      blue: PropTypes.number,
-      alpha: PropTypes.number,
-      scaleInput: PropTypes.number,
-    }),
-    effect: PropTypes.string,
-    pointerdown: PropTypes.func,
-    pointerup: PropTypes.func,
-    pointerover: PropTypes.func,
-    mousedown: PropTypes.func,
-    mouseup: PropTypes.func,
-    mouseover: PropTypes.func,
-    mouseout: PropTypes.func,
-  }).isRequired,
-  // sprite initial alpha property (opacity)
-  initialAlpha: PropTypes.number,
-  // sprite animation properties
-  applyTransformer: PropTypes.bool,
-  // sprite startAt and endAt properties
-  startAt: PropTypes.number.isRequired,
-  // sprite startAt and endAt properties
-  endAt: PropTypes.number.isRequired,
-};
-
-PixiImageSprite.defaultProps = {
-  pointerdown: () => {},
-  pointerup: () => {},
-  mousedown: () => {},
-  mouseup: () => {},
-  pointerover: () => {},
-  mouseover: () => {},
-  mouseout: () => {},
-  backgroundColor: "0x000000",
-  transformation: {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    anchor: 0,
-    rotation: 0,
-    alpha: 1,
-    scale: 1,
-    tint: 0xffffff,
-    blendMode: 0,
-    colorCorrection: {
-      enabled: false,
-      temperature: 1,
-      hue: 1,
-      contrast: 1,
-      saturation: 1,
-      exposure: 1,
-      reset: false,
-      sharpness: 1,
-      value: 0,
-      levels: 1,
-      luminance: 0,
-      enhance: 0,
-      blurRadius: 0,
-      red: 150,
-      green: 150,
-      blue: 150,
-      alpha: 1,
-      scaleInput: 1,
-    },
-    effect: "Normal",
-  },
-  initialAlpha: 1,
-  applyTransformer: false,
-};

package/src/stories/PixiImageSprite/index.js

@@ -1 +0,0 @@
-export * from "./PixiImageSprite";