reacthub-pixitweenjs 0.2.4 → 0.2.6

package/src/components/PixiTextSprite/PixiTextSprite.tsx

@@ -0,0 +1,540 @@
+import * as React from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+import { Container, withFilters, Text } from "@pixi/react";
+import { AdjustmentFilter } from "@pixi/filter-adjustment";
+import * as PIXI from "pixi.js";
+import gsap from "gsap";
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+// @ts-ignore
+import PropTypes from "prop-types";
+// @ts-ignore
+import isEmpty from "lodash/isEmpty";
+// @ts-ignore
+import isEqual from "lodash/isEqual";
+// @ts-ignore
+import pick from "lodash/pick";
+import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
+import PixiTransformer from "../../utils/PixiTransformer";
+import { getAnimByName } from "../../utils/GsapAnim";
+import { TransformationEnd } from "../../types/transformation";
+
+type PixiTextSpriteProps = {
+  uniqueId: string;
+  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?: string;
+  };
+  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 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];
+// change these to control the text size
+
+const PixiTextSprite: React.FC<PixiTextSpriteProps> = (props) => {
+  //// State
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [, setIsTransformerDragging] = useState(false);
+  const [, setIsMouseOverTransformer] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
+  console.log("allProps", props);
+  //// Refs
+  const containerRef = useRef<PIXI.Container>(null);
+  const parentNode = useRef<PIXI.Container>(null);
+  const imgGroupRef = useRef<PIXI.Container>(null);
+  const transformerRef = 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);
+
+  //// Context
+  const { tl } = useContext(GsapPixieContext);
+
+  /// 1001
+  // console.log("contxt Values", tl);
+  const {
+    uniqueId,
+    text,
+    startAt,
+    endAt,
+    initialAlpha,
+    locked,
+    transformation,
+    pointerdown,
+    mouseout,
+    applyTransformer,
+    onAnchorTransformationEnd,
+    onTextUpdate,
+  } = props;
+
+  const {
+    width = 0,
+    height = 0,
+    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,
+    colorCorrection = {},
+    animation,
+    effect,
+  } = transformation;
+
+  // color corrections
+  const {
+    contrast = 1,
+    saturation = 1,
+    exposure = 1,
+    alpha = 1,
+  } = colorCorrection || {};
+
+  /** adjustment filter */
+  const adjustments = {
+    brightness: exposure,
+    contrast,
+    saturation,
+    alpha,
+  };
+
+  /** handle on tranformer onchange */
+  const handleOnTransformChange = React.useCallback(() => {
+    setIsTransformerDragging(true);
+  }, []);
+
+  React.useEffect(() => {
+    textFontSize.current = Number(fontSize);
+  }, [fontSize]);
+
+  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 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]);
+
+  const handleOnDoubleClickEditText = () => {
+    console.log("double click triggered");
+    setIsEditing(true);
+  };
+
+  const handleTextChange = (e: string) => {
+    if (onTextUpdate) {
+      onTextUpdate({
+        text: e,
+        uniqueId: uniqueId,
+        droptype: "titles",
+      });
+    }
+  };
+
+  const handleOnTransformEnd = React.useCallback(
+    (endData: TransformationEnd) => {
+      if (!textRef.current) return;
+      console.log("enddata", endData);
+      if (onAnchorTransformationEnd) {
+        console.log("running onAnchorTransformationEnd");
+        onAnchorTransformationEnd(endData);
+      }
+    },
+    [onAnchorTransformationEnd, uniqueId, width]
+  );
+
+  // 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 (
+    // @ts-ignore
+    <Container ref={parentNode}>
+      {/* @ts-ignore */}
+      <Container
+        ref={containerRef}
+        alpha={initialAlpha}
+        position={[x, y]}
+        pivot={[x, y]}
+        width={width}
+        height={height}
+      >
+        {isEditing && <Container ref={textInputGroupRef}></Container>}
+        {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 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,
+                  })}
+                ref={textRef}
+                scale={scale}
+              />
+            </Container>
+          </Filters>
+        ) : (
+          // @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,
+                })}
+              ref={textRef}
+              scale={scale}
+            />
+          </Container>
+        )}
+      </Container>
+      {applyTransformer && (
+        <PixiTransformer
+          pixiTransformerRef={transformerRef}
+          imageRef={containerRef}
+          isMounted={isMounted}
+          transformCommit={handleOnTransformEnd}
+          transformChange={handleOnTransformChange}
+          mouseoverEvent={setIsMouseOverTransformer}
+          uniqueId={uniqueId}
+          onDoubleClick={handleOnDoubleClickEditText}
+        />
+      )}
+    </Container>
+  );
+};
+
+export default PixiTextSprite;
+
+// @ts-ignore
+// PixiTextSprite.whyDidYouRender = {
+//   logOnDifferentValues: true,
+//   customName: "PixiTextSprite",
+// };

package/src/components/PixiTextSprite/index.ts

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

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

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