reacthub-pixitweenjs 0.2.4 → 0.2.6

package/src/components/PixiSVGSprite/PixiSvgPathSprite.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiSvgPathSprite } from ".";
+import { AppStateContextProvider } from "../../utils/AppStateProvider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "Components/SvgSprite",
+  component: PixiSvgPathSprite,
+
+  tags: ["autodocs"],
+  argTypes: {
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
+    },
+    path: {
+      control: "text",
+      description: "source of the svg path",
+    },
+    transformation: {
+      control: "object",
+      description: "transformation of the sprite",
+      x: { control: "number", description: "x position of the sprite" },
+      y: { control: "number", description: "y position of the sprite" },
+      width: { control: "number", description: "width of the sprite" },
+      height: { control: "number", description: "height of the sprite" },
+      anchor: { control: "number", description: "anchor of the sprite" },
+      rotation: { control: "number", description: "rotation of the sprite" },
+      alpha: {
+        control: "number",
+        min: 0,
+        max: 1,
+        description: "alpha of the sprite",
+      },
+      scale: { control: "number", description: "scale of the sprite" },
+      tint: { control: "number", description: "tint of the sprite" },
+      blendMode: { control: "number", description: "blendMode of the sprite" },
+      colorCorrection: {
+        control: "object",
+        description: "colorCorrection of the sprite",
+        brightness: {
+          control: "number",
+          description: "brightness of the sprite",
+        },
+        contrast: { control: "number", description: "contrast of the sprite" },
+        saturation: {
+          control: "number",
+          description: "saturation of the sprite",
+        },
+        alpha: { control: "number", description: "alpha of the sprite" },
+      },
+    },
+    applyTransformer: { control: "boolean", description: "applyTransformer" },
+    startAt: { control: "number", description: "startAt" },
+    endAt: { control: "number", description: "endAt" },
+    initialAlpha: {
+      control: "number",
+      min: 0,
+      max: 1,
+      description: "sprite initial alpha value (default  1)",
+    },
+    onAnchorTransformationEnd: {
+      action: "onAnchorTransformationEnd",
+      description:
+        "on transforamtion end the event is fire callback with latest sprite transformation properties.",
+    },
+    pointerdown: {
+      action: "pointerdown",
+      description: "pointerdown event",
+    },
+  },
+} satisfies Meta<typeof PixiSvgPathSprite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiSvgPathSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "svg001", // uniqueId of the sprite
+    path: "M 100 100 L 300 100 L 200 300 z",
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      colorCorrection: {},
+      fill: "#FFC0CB",
+    },
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 10,
+    initialAlpha: 1,
+  },
+};
+
+export const FadeIn: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiSvgPathSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "surya002", // uniqueId of the sprite
+    path: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      animation: "FADE_IN",
+      colorCorrection: {},
+      fill: "#fe2c54",
+    },
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 10,
+    initialAlpha: 0,
+  },
+};

package/src/components/PixiSVGSprite/PixiSvgPathSprite.tsx

@@ -0,0 +1,346 @@
+import * as React from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+// @ts-ignore
+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 { SVG } from "pixi-svg";
+import PixiTransformer from "../../utils/PixiTransformer";
+// @ts-ignore
+import svgpath from "svgpath";
+// @ts-ignore
+import isEmpty from "lodash/isEmpty";
+import { getAnimByName } from "../../utils/GsapAnim";
+import { TransformationEnd } from "../../types/transformation";
+
+type PixiSvgPathSpriteProps = {
+  uniqueId: string;
+  path: string;
+  startAt: number;
+  endAt: number;
+  initialAlpha: number;
+  transformation: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    anchor: number;
+    rotation?: number;
+    alpha?: number;
+    scale?: number | [number, number];
+    tint?: number;
+    blendMode?: number;
+    animation?: string;
+    fill?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    blurRadius?: number;
+    colorCorrection?: {
+      enabled?: boolean;
+      temperature?: number;
+      hue?: number;
+      contrast?: number;
+      saturation?: number;
+      exposure?: number;
+      reset?: boolean;
+      sharpness?: number;
+      value?: number;
+      levels?: number;
+      luminance?: number;
+      enhance?: number;
+      blurRadius?: number;
+      red?: number;
+      green?: number;
+      blue?: number;
+      alpha?: number;
+      scaleInput?: number;
+    };
+    effect?: string;
+  };
+  pointerdown?: () => void;
+  pointerup?: () => void;
+  mousedown?: () => void;
+  mouseup?: () => void;
+  pointerover?: () => void;
+  mouseover?: () => void;
+  mouseout?: () => void;
+  applyTransformer?: boolean;
+  onAnchorTransformationEnd?: (endData: any) => void;
+};
+
+const Filters = withFilters(Container, {
+  blur: PIXI.filters.BlurFilter,
+  adjust: AdjustmentFilter,
+  matrix: PIXI.filters.ColorMatrixFilter,
+});
+
+/** CYAN Filters */
+const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+
+const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
+  //// State
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [, setIsTransformerDragging] = useState(false);
+  const [, setIsMouseOverTransformer] = useState(false);
+  const [texture, setTexture] = React.useState<any>(null);
+
+  //// Refs
+  const imageRef = useRef<PIXI.Sprite>(null);
+  const containerRef = useRef<PIXI.Container>(null);
+  const parentNode = useRef<PIXI.Container>(null);
+  const imgGroupRef = useRef<PIXI.Container>(null);
+  const transformerRef = useRef<PIXI.Container>(null);
+
+  //// Context
+  const { tl } = useContext(GsapPixieContext);
+
+  /// 1001
+  // console.log("contxt Values", tl);
+  const {
+    uniqueId,
+    path,
+    startAt,
+    endAt,
+    initialAlpha,
+    transformation: {
+      x,
+      y,
+      width,
+      height,
+      anchor,
+      animation,
+      colorCorrection,
+      effect,
+      fill,
+      stroke = "none",
+      strokeWidth = 0,
+      blurRadius = 0,
+    },
+    pointerdown,
+    pointerup,
+    mousedown,
+    mouseup,
+    pointerover,
+    mouseover,
+    mouseout,
+    applyTransformer,
+    onAnchorTransformationEnd,
+  } = props;
+
+  // color corrections
+  const {
+    contrast = 1,
+    saturation = 1,
+    exposure = 1,
+    alpha = 1,
+  } = colorCorrection || {};
+
+  const app = useApp();
+
+  /** adjustment filter */
+  const adjustments = {
+    brightness: exposure,
+    contrast,
+    saturation,
+    alpha,
+  };
+
+  // const fillColor = PIXI.utils.string2hex(fill || "#262730");
+
+  /** handle on tranformer onchange */
+  const handleOnTransformChange = React.useCallback(() => {
+    setIsTransformerDragging(true);
+  }, []);
+
+  // transformer to handle sprite transformation
+  const handleOnTransformEnd = React.useCallback(
+    (endData: TransformationEnd) => {
+      console.log("changeEnd", endData);
+      if (onAnchorTransformationEnd) {
+        console.log("running onAnchorTransformationEnd");
+        onAnchorTransformationEnd(endData);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    let ctx = gsap.context(() => {});
+    if (containerRef.current && tl.current) {
+      const data = {
+        duration: Number(endAt) - Number(startAt),
+      };
+
+      const ease = getAnimByName(animation || "None");
+      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]);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      setIsMounted(true);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const transformedPath = svgpath(path).scale(5).translate(0, 0).toString();
+    // console.log('path', path);
+    // console.log('transformedPath', transformedPath);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"> 
+        <path stroke="${stroke}" stroke-width="${strokeWidth}" fill="${fill}" d="${transformedPath}">
+        </path>
+      </svg>`;
+
+    const svgObject = new SVG(svg);
+    const tex = app.renderer.generateTexture(svgObject);
+    setTexture(tex);
+    return () => {
+      // removeTransformer();
+    };
+  }, [app, path, stroke, strokeWidth, fill]);
+
+  return (
+    // @ts-ignore
+    <Container ref={parentNode}>
+      {/* @ts-ignore */}
+      <Container
+        ref={containerRef}
+        alpha={initialAlpha}
+        position={[x, y]}
+        pivot={[x, y]}
+        width={width}
+        height={height}
+      >
+        {colorCorrection && colorCorrection.enabled ? (
+          <Filters
+            scale={1}
+            blur={{ blur: blurRadius, quality: 4 }}
+            adjust={adjustments}
+            apply={({ matrix }: { matrix: any }) => {
+              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,
+              // @ts-ignore
+              matrix: CYAN,
+            }}
+          >
+            {/* @ts-ignore */}
+
+            <Container ref={imgGroupRef}>
+              {texture && (
+                <Sprite
+                  texture={texture}
+                  width={width}
+                  height={height}
+                  anchor={anchor}
+                  ref={imageRef}
+                  x={x}
+                  y={y}
+                  // @ts-ignore
+                  interactive={true}
+                  pointerdown={pointerdown}
+                  pointerup={pointerup}
+                  pointerover={pointerover}
+                  mousedown={mousedown}
+                  mouseup={mouseup}
+                  mouseover={mouseover}
+                  mouseout={mouseout}
+                />
+              )}
+            </Container>
+          </Filters>
+        ) : (
+          // @ts-ignore
+          <Container ref={imgGroupRef}>
+            {texture && (
+              <Sprite
+                texture={texture}
+                width={width}
+                height={height}
+                anchor={anchor}
+                ref={imageRef}
+                x={x}
+                y={y}
+                // @ts-ignore
+                interactive={true}
+                pointerdown={pointerdown}
+                pointerup={pointerup}
+                pointerover={pointerover}
+                mousedown={mousedown}
+                mouseup={mouseup}
+                mouseover={mouseover}
+                mouseout={mouseout}
+              />
+            )}
+          </Container>
+        )}
+      </Container>
+      {applyTransformer && (
+        <PixiTransformer
+          pixiTransformerRef={transformerRef}
+          imageRef={containerRef}
+          isMounted={isMounted}
+          transformCommit={handleOnTransformEnd}
+          transformChange={handleOnTransformChange}
+          mouseoverEvent={setIsMouseOverTransformer}
+          uniqueId={uniqueId}
+        />
+      )}
+    </Container>
+  );
+};
+
+export default PixiSvgPathSprite;

package/src/components/PixiSVGSprite/index.ts

@@ -0,0 +1 @@
+export { default as PixiSvgPathSprite } from "./PixiSvgPathSprite";

package/src/components/PixiTextSprite/PixiTextSprite.stories.tsx

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiTextSprite } from ".";
+import { AppStateContextProvider } from "../../utils/AppStateProvider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "Components/TextSprite",
+  component: PixiTextSprite,
+
+  tags: ["autodocs"],
+  argTypes: {
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
+    },
+    text: {
+      control: "text",
+      description: "Text to be displayed",
+    },
+    transformation: {
+      control: "object",
+      description: "transformation of the sprite",
+      x: { control: "number", description: "x position of the sprite" },
+      y: { control: "number", description: "y position of the sprite" },
+      width: { control: "number", description: "width of the sprite" },
+      height: { control: "number", description: "height of the sprite" },
+      anchor: { control: "number", description: "anchor of the sprite" },
+      rotation: { control: "number", description: "rotation of the sprite" },
+      alpha: {
+        control: "number",
+        min: 0,
+        max: 1,
+        description: "alpha of the sprite",
+      },
+      scale: { control: "number", description: "scale of the sprite" },
+      tint: { control: "number", description: "tint of the sprite" },
+      blendMode: { control: "number", description: "blendMode of the sprite" },
+      colorCorrection: {
+        control: "object",
+        description: "colorCorrection of the sprite",
+        brightness: {
+          control: "number",
+          description: "brightness of the sprite",
+        },
+        contrast: { control: "number", description: "contrast of the sprite" },
+        saturation: {
+          control: "number",
+          description: "saturation of the sprite",
+        },
+        alpha: { control: "number", description: "alpha of the sprite" },
+      },
+    },
+    applyTransformer: { control: "boolean", description: "applyTransformer" },
+    startAt: { control: "number", description: "startAt" },
+    endAt: { control: "number", description: "endAt" },
+    initialAlpha: {
+      control: "number",
+      min: 0,
+      max: 1,
+      description: "sprite initial alpha value (default  1)",
+    },
+    onAnchorTransformationEnd: {
+      action: "onAnchorTransformationEnd",
+      description:
+        "on transforamtion end the event is fire callback with latest sprite transformation properties.",
+    },
+    pointerdown: {
+      action: "pointerdown",
+      description: "pointerdown event",
+    },
+
+    pointerup: {
+      action: "pointerup",
+      description: "pointerup event",
+    },
+    onTextUpdate: {
+      action: "onTextUpdate",
+      description: "onTextUpdate event",
+    },
+  },
+} satisfies Meta<typeof PixiTextSprite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiTextSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "TextSpritexx001", // uniqueId of the sprite
+    text: "Hello Welcome to PixiJS",
+    locked: false,
+    applyTransformer: false,
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      blendMode: 0,
+      colorCorrection: {},
+      fill: "#00ff99",
+      fontSize: 80,
+      fontFamily: "Arial",
+      align: "center",
+      stroke: "#522d2d",
+      strokeThickness: 0,
+      letterSpacing: 0,
+      lineHeight: 0,
+      dropShadow: false,
+      dropShadowColor: "#522d2d",
+      dropShadowBlur: 0,
+      wordWrap: false,
+      wordWrapWidth: 5000000,
+      padding: 10,
+      textBaseline: "alphabetic",
+      trim: false,
+    },
+    startAt: 0,
+    endAt: 10,
+    initialAlpha: 1,
+  },
+};
+
+export const FadeIn: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiTextSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "TextSprite001", // uniqueId of the sprite
+    text: "Hello Welcome to PixiJS",
+    locked: false,
+    applyTransformer: false,
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      colorCorrection: {},
+      fill: "#00ff99",
+      fontSize: 20,
+      fontFamily: "Arial",
+      align: "center",
+      stroke: 0x000000,
+      strokeThickness: 0,
+      letterSpacing: 0,
+      lineHeight: 0,
+      dropShadow: false,
+      dropShadowColor: 0x000000,
+      dropShadowBlur: 0,
+      wordWrap: false,
+      wordWrapWidth: 100,
+      padding: 0,
+      textBaseline: "alphabetic",
+      trim: false,
+    },
+    startAt: 0,
+    endAt: 10,
+    initialAlpha: 0,
+  },
+};