reacthub-pixitweenjs 0.2.10 → 0.2.12

package/src/components/PixiTextSprite/PixiTextSprite.tsx

@@ -1,361 +0,0 @@
-import * as React from "react";
-import { useRef, useState } from "react";
-import { Container, Text } from "@pixi/react";
-import * as PIXI from "pixi.js";
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
-// @ts-ignore
-import isEmpty from "lodash/isEmpty";
-// @ts-ignore
-import isEqual from "lodash/isEqual";
-// @ts-ignore
-import pick from "lodash/pick";
-import { PixiBaseSpriteProps } from "../../types/BaseProps";
-import AbstractContainer from "../../hocs/AbstractContainer";
-import { Effects } from "../../types/Effects";
-
-interface PixiTextSpriteProps extends PixiBaseSpriteProps {
-  text: string;
-  startAt: number;
-  endAt: number;
-  initialAlpha: number;
-  locked: boolean;
-  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;
-    fontWeight?: string;
-    fontSize?: number;
-    fontFamily?: string;
-    fontStyle?: string;
-    fontColor?: string;
-    fontVariant?: string;
-    lineHeight?: number;
-    letterSpacing?: number;
-    textDecoration?: string;
-    wordWrap?: boolean;
-    wordWrapWidth?: number;
-    leading?: number;
-    padding?: number;
-    border?: string;
-    dropShadow?: boolean;
-    dropShadowColor?: string | number;
-    shadowOffsetX?: number;
-    shadowOffsetY?: number;
-    dropShadowBlur?: number;
-    blurEnabled?: boolean;
-    blurRadius?: number;
-    fill: string | number;
-    stroke?: string | number;
-    strokeThickness?: number;
-    zIndex?: number;
-    align?: string;
-    textBaseline?: string;
-    trim?: boolean;
-
-    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;
-  onTextUpdate?: (data: any) => void;
-  onAnchorTransformationEnd?: (endData: any) => void;
-}
-
-const PixiTextSprite: React.FC<PixiTextSpriteProps> = (props) => {
-  //// State
-  const [isEditing, setIsEditing] = useState(false);
-
-  console.log("allProps", props);
-  //// Refs
-  const parentNode = useRef<PIXI.Container>(null);
-
-  /// refs
-  const textRef = useRef<PIXI.Text>(null);
-  const textInputGroupRef = useRef(null);
-  const textInnerGroupRef = useRef(null);
-  const textFontSize = useRef<number>(16);
-  const textTransformDetailRef = useRef<any>(null);
-
-  /// 1001
-  // console.log("contxt Values", tl);
-  const {
-    uniqueId,
-    text,
-    locked,
-    transformation,
-    onTextUpdate,
-    pointerdown,
-    pointerup,
-    mousedown,
-    mouseup,
-    pointerover,
-    mouseover,
-    mouseout,
-  } = props;
-
-  const {
-    scale = [1, 1],
-    x,
-    y,
-    rotation = 1,
-    /// font
-    fontFamily = "Arial",
-    fontWeight = "normal",
-    fontStyle = "normal",
-    fontSize = 16,
-
-    // fill
-    fill = "black",
-
-    // stroke
-    stroke,
-    strokeThickness: strokeWidth,
-    // drop shadow
-    blurRadius = 0,
-    blurEnabled = false,
-    dropShadowColor: shadowColor = null,
-
-    // multiline
-    wordWrapWidth = 50000000,
-    leading = 0,
-    letterSpacing,
-  } = transformation;
-
-  React.useEffect(() => {
-    textFontSize.current = Number(fontSize);
-  }, [fontSize]);
-
-  const nFontStyle = ["italic", "oblique"].includes(fontStyle)
-    ? fontStyle
-    : undefined;
-
-  const nFontWeight = ["bold", "lighter", "100", "200", "300"].includes(
-    fontWeight
-  )
-    ? fontWeight
-    : undefined;
-
-  const nLetterSpacing = Number(letterSpacing) > 0 ? letterSpacing : undefined;
-
-  const pixiStyles = React.useMemo(() => {
-    return new PIXI.TextStyle({
-      fontFamily: fontFamily,
-      fontSize: fontSize,
-      fill: fill || "white", //[color, '#00ff99'], // gradient
-      stroke: stroke,
-      strokeThickness: strokeWidth,
-      ...(nFontStyle && {
-        fontStyle: nFontStyle as unknown as PIXI.TextStyleFontStyle,
-      }),
-      ...(nFontWeight && {
-        fontWeight: nFontWeight as unknown as PIXI.TextStyleFontWeight,
-      }),
-      ...(nLetterSpacing && { letterSpacing: nLetterSpacing }),
-      ...(blurEnabled && {
-        dropShadow: true,
-        dropShadowBlur: Number(blurRadius),
-        dropShadowColor: shadowColor?.toString() || "black",
-        // / dropShadowAngle: Math.PI / 6,
-        dropShadowDistance: 0,
-      }),
-      wordWrap: true,
-      breakWords: true,
-      wordWrapWidth: wordWrapWidth || 500,
-      leading: leading || 0,
-      // lineHeight: lineHeight,
-    });
-  }, [
-    blurEnabled,
-    blurRadius,
-    fill,
-    fontFamily,
-    fontSize,
-    leading,
-    nFontStyle,
-    nFontWeight,
-    nLetterSpacing,
-    shadowColor,
-    stroke,
-    strokeWidth,
-    wordWrapWidth,
-  ]);
-
-  // let textMetrics = {};
-  // if (!isEmpty(text) && !isEmpty(pixiStyles)) {
-  //   textMetrics = PIXI.TextMetrics.measureText(text, pixiStyles);
-  // }
-
-  // On transformation change, update the textTransformDetailRef
-  React.useEffect(() => {
-    textTransformDetailRef.current = {
-      ...transformation,
-    };
-  }, [transformation]);
-
-  // @ts-ignore
-  const handleOnDoubleClickEditText = () => {
-    console.log("double click triggered");
-    setIsEditing(true);
-  };
-
-  const handleTextChange = (e: string) => {
-    if (onTextUpdate) {
-      onTextUpdate({
-        text: e,
-        uniqueId: uniqueId,
-        droptype: "titles",
-      });
-    }
-  };
-
-  // const handleOnMoveOver = (interactionData) => {
-  //   if (!isDragging) {
-  //     setMouseOverSprite(true);
-  //   }
-  // };
-
-  // const handleOnMoveOut = () => {
-  //   if (!isDragging) {
-  //     setMouseOverSprite(false);
-  //   }
-  // };
-
-  React.useEffect(() => {
-    if (isEditing && textInputGroupRef.current) {
-      let el = document.getElementById("note-editor");
-      if (el) {
-        el.style.position = "absolute";
-        el.style.zIndex = "10";
-        el.style.left = x + "px";
-        el.style.top = y + "px";
-        el.style.backgroundColor = "var(--chakra-color-darkShark)";
-        el.style.transform = "scale(1.5)";
-        el.style.width = 300 + "px";
-        el.style.height = 100 + "px";
-        el.style.color = "#fff";
-        el.style.fontSize = "20px";
-        el.style.border = "1px solid #CBCEE0";
-
-        const keyboardbindings = {
-          // This will overwrite the default binding also named 'tab'
-          esc: {
-            key: 27,
-            handler: function () {
-              setIsEditing(false);
-              /// onUnSelectKeyFrame();
-            },
-          },
-          enter: {
-            key: 13,
-            handler: function () {
-              setIsEditing(false);
-              /// onUnSelectKeyFrame();
-            },
-          },
-        };
-
-        var quill = new Quill("#note-editor", {
-          modules: {
-            toolbar: false,
-            keyboard: {
-              bindings: {
-                ...keyboardbindings,
-              },
-            },
-          },
-          placeholder: "Compose your text here...",
-          theme: "snow", // or 'bubble'
-        });
-
-        quill.on("text-change", function () {
-          handleTextChange(quill.root.innerText);
-        });
-
-        quill.setText(text);
-        quill.focus();
-        quill.off("text-change", () => {
-          console.log("removed");
-        });
-        if (!quill.hasFocus()) {
-          el.style.display = "none";
-        }
-      }
-    }
-  }, [x, y, isEditing]);
-
-  return (
-    <AbstractContainer {...props}>
-      <Container ref={parentNode}>
-        {/* @ts-ignore */}
-        {isEditing && <Container ref={textInputGroupRef}></Container>}
-        {/* @ts-ignore */}
-        <Container alpha={isEditing ? 0 : 1} ref={textInnerGroupRef}>
-          <Text
-            style={pixiStyles}
-            x={x}
-            y={y}
-            rotation={rotation}
-            anchor={0.5}
-            text={text}
-            {...(!isEditing &&
-              !locked && {
-                interactive: true,
-                buttonMode: true,
-                pointerdown: pointerdown,
-                pointerout: mouseout,
-                pointerover: pointerover,
-                pointerup: pointerup,
-                mousedown: mousedown,
-                mouseup: mouseup,
-                mouseover: mouseover,
-              })}
-            ref={textRef}
-            scale={scale}
-          />
-        </Container>
-      </Container>
-    </AbstractContainer>
-  );
-};
-
-export default PixiTextSprite;
-
-// @ts-ignore
-// PixiTextSprite.whyDidYouRender = {
-//   logOnDifferentValues: true,
-//   customName: "PixiTextSprite",
-// };

package/src/components/PixiTextSprite/index.ts

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

package/src/components/PixiVideoSprite/PixiVideoSprite.stories.tsx

@@ -1,186 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { PixiVideoSprite } 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/VideoSprite",
-  component: PixiVideoSprite,
-
-  tags: ["autodocs"],
-  argTypes: {
-    uniqueId: {
-      control: "text",
-      description: "uniqueId of the sprite",
-    },
-    src: {
-      control: "text",
-      description: "source of the image",
-    },
-    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" },
-    frameStartAt: { control: "number", description: "frameStartAt" },
-    frameEndAt: { control: "number", description: "frameEndAt" },
-    mute: { control: "boolean", description: "mute" },
-    locked: { control: "boolean", description: "locked" },
-    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 PixiVideoSprite>;
-
-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}>
-      <PixiVideoSprite {...args} />
-    </AppStateContextProvider>
-  ),
-  args: {
-    uniqueId: "oceanv1", // uniqueId of the sprite
-    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
-    transformation: {
-      x: 290,
-      y: 250,
-      width: 550,
-      height: 400,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      colorCorrection: {},
-    },
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
-    frameStartAt: 0,
-    frameEndAt: 10,
-    initialAlpha: 1,
-    mute: false,
-    locked: false,
-  },
-};
-
-export const FadeIn: Story = {
-  render: (args: any) => (
-    <AppStateContextProvider {...args}>
-      <PixiVideoSprite {...args} />
-    </AppStateContextProvider>
-  ),
-  args: {
-    uniqueId: "ForBiggerBlazes002", // uniqueId of the sprite
-    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
-    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: {},
-    },
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
-    frameStartAt: 0,
-    frameEndAt: 10,
-    initialAlpha: 0,
-    mute: false,
-    locked: false,
-  },
-};
-
-export const Filters: Story = {
-  render: (args: any) => (
-    <AppStateContextProvider {...args}>
-      <PixiVideoSprite {...args} />
-    </AppStateContextProvider>
-  ),
-  args: {
-    uniqueId: "videofiter002", // uniqueId of the sprite
-    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
-    transformation: {
-      x: 290,
-      y: 250,
-      width: 550,
-      height: 400,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      colorCorrection: {
-        enabled: true,
-        contrast: 2,
-        saturation: 2,
-        exposure: 2,
-        blurRadius: 1,
-      },
-    },
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 10,
-    frameStartAt: 0,
-    frameEndAt: 10,
-    initialAlpha: 1,
-    mute: false,
-    locked: false,
-  },
-};