reacthub-pixitweenjs 0.2.5 → 0.2.7

package/src/components/PixiSVGSprite/PixiSvgPathSprite.tsx

@@ -1,22 +1,19 @@
 import * as React from "react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useRef } 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 { Sprite, Container, useApp } from "@pixi/react";
 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";
+import { PixiBaseSpriteProps } from "../../types/BaseProps";
+import AbstractContainer from "../../hocs/AbstractContainer";
+import { Effects } from "../../types/Effects";
 
-type PixiSvgPathSpriteProps = {
+interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
   uniqueId: string;
   path: string;
   startAt: number;
@@ -60,7 +57,7 @@ type PixiSvgPathSpriteProps = {
       alpha?: number;
       scaleInput?: number;
     };
-    effect?: string;
+    effect?: Effects;
   };
   pointerdown?: () => void;
   pointerup?: () => void;
@@ -71,73 +68,32 @@ type PixiSvgPathSpriteProps = {
   mouseout?: () => void;
   applyTransformer?: boolean;
   onAnchorTransformationEnd?: (endData: any) => void;
-};
-
-type EffectFunc = () => void;
-type Deps = ReadonlyArray<unknown>;
-
-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];
+}
 
 const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
   //// State
-  const [isMounted, setIsMounted] = React.useState(false);
-  const [isTransformerDragging, setIsTransformerDragging] = useState(false);
-  const [isMouseOverTransformer, setIsMouseOverTransformer] = useState(false);
   const [texture, setTexture] = React.useState<any>(null);
 
-  console.log("allProps", props);
   //// 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,
-      fontWeight,
-      fontStyle,
       stroke = "none",
       strokeWidth = 0,
-      blurRadius = 0,
     },
     pointerdown,
     pointerup,
@@ -146,115 +102,11 @@ const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
     pointerover,
     mouseover,
     mouseout,
-    applyTransformer,
-    onAnchorTransformationEnd,
-    ...restProps
   } = props;
 
-  // color corrections
-  const {
-    enabled = false,
-    temperature = 1,
-    hue = 1,
-    contrast = 1,
-    saturation = 1,
-    exposure = 1,
-    reset,
-    sharpness = 1,
-    value = 0,
-    levels = 1,
-    luminance = 0,
-    enhance = 0,
-    red = 150,
-    green = 150,
-    blue = 150,
-    alpha = 1,
-    scaleInput = 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);
-    }
-  }, []);
+  // const fillColor = PIXI.utils.string2hex(fill || "#262730");
 
   React.useEffect(() => {
     const transformedPath = svgpath(path).scale(5).translate(0, 0).toString();
@@ -274,104 +126,32 @@ const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
   }, [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,
+    <AbstractContainer {...props}>
+      <Container ref={parentNode}>
+        <Container ref={imgGroupRef}>
+          {texture && (
+            <Sprite
+              texture={texture}
+              width={width}
+              height={height}
+              anchor={anchor}
+              ref={imageRef}
+              x={x}
+              y={y}
               // @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>
-        )}
+              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>
+    </AbstractContainer>
   );
 };
 

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

@@ -0,0 +1,228 @@
+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: 200,
+      y: 200,
+      width: 200,
+      height: 200,
+      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: 200,
+      y: 200,
+      width: 200,
+      height: 200,
+      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,
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Filters: 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: 200,
+      y: 200,
+      width: 200,
+      height: 200,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      blendMode: 0,
+      colorCorrection: {
+        enabled: true,
+        contrast: 2,
+        saturation: 2,
+        exposure: 2,
+        blurRadius: 1,
+      },
+      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,
+  },
+};