reacthub-pixitweenjs 0.2.9 → 0.2.11

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

@@ -1,174 +0,0 @@
-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",
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
-    transformation: {
-      x: 200,
-      y: 200,
-      width: 200,
-      height: 200,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      colorCorrection: {},
-      fill: "#FFC0CB",
-    },
-    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",
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
-    transformation: {
-      x: 200,
-      y: 200,
-      width: 200,
-      height: 200,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      animation: "FADE_IN",
-      colorCorrection: {},
-      fill: "#fe2c54",
-    },
-    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}>
-      <PixiSvgPathSprite {...args} />
-    </AppStateContextProvider>
-  ),
-  args: {
-    uniqueId: "svgfilters001", // uniqueId of the sprite
-    path: "M 100 100 L 300 100 L 200 300 z",
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
-    transformation: {
-      x: 200,
-      y: 200,
-      width: 200,
-      height: 200,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      colorCorrection: {
-        enabled: true,
-        contrast: 1,
-        saturation: 2,
-        exposure: 1,
-        blurRadius: 3,
-      },
-      fill: "#FFC0CB",
-    },
-    initialAlpha: 1,
-  },
-};

package/src/components/PixiSVGSprite/PixiSvgPathSprite.tsx

@@ -1,158 +0,0 @@
-import * as React from "react";
-import { useRef } from "react";
-// @ts-ignore
-import PropTypes from "prop-types";
-import { Sprite, Container, useApp } from "@pixi/react";
-import * as PIXI from "pixi.js";
-import { SVG } from "pixi-svg";
-// @ts-ignore
-import svgpath from "svgpath";
-// @ts-ignore
-import isEmpty from "lodash/isEmpty";
-import { PixiBaseSpriteProps } from "../../types/BaseProps";
-import AbstractContainer from "../../hocs/AbstractContainer";
-import { Effects } from "../../types/Effects";
-
-interface PixiSvgPathSpriteProps extends PixiBaseSpriteProps {
-  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?: Effects;
-  };
-  pointerdown?: () => void;
-  pointerup?: () => void;
-  mousedown?: () => void;
-  mouseup?: () => void;
-  pointerover?: () => void;
-  mouseover?: () => void;
-  mouseout?: () => void;
-  applyTransformer?: boolean;
-  onAnchorTransformationEnd?: (endData: any) => void;
-}
-
-const PixiSvgPathSprite: React.FC<PixiSvgPathSpriteProps> = (props) => {
-  //// State
-  const [texture, setTexture] = React.useState<any>(null);
-
-  //// Refs
-  const imageRef = useRef<PIXI.Sprite>(null);
-  const parentNode = useRef<PIXI.Container>(null);
-  const imgGroupRef = useRef<PIXI.Container>(null);
-
-  //// Context
-
-  /// 1001
-  // console.log("contxt Values", tl);
-  const {
-    path,
-    transformation: {
-      x,
-      y,
-      width,
-      height,
-      anchor,
-      fill,
-      stroke = "none",
-      strokeWidth = 0,
-    },
-    pointerdown,
-    pointerup,
-    mousedown,
-    mouseup,
-    pointerover,
-    mouseover,
-    mouseout,
-  } = props;
-
-  const app = useApp();
-
-  // const fillColor = PIXI.utils.string2hex(fill || "#262730");
-
-  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 (
-    <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
-              interactive={true}
-              pointerdown={pointerdown}
-              pointerup={pointerup}
-              pointerover={pointerover}
-              mousedown={mousedown}
-              mouseup={mouseup}
-              mouseover={mouseover}
-              mouseout={mouseout}
-            />
-          )}
-        </Container>
-      </Container>
-    </AbstractContainer>
-  );
-};
-
-export default PixiSvgPathSprite;

package/src/components/PixiSVGSprite/index.ts

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

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

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