@twick/visualizer 0.0.1 → 0.14.2

package/src/helpers/element.utils.ts

@@ -1,85 +1,239 @@
-import { Reference } from "@revideo/core";
-import { ObjectFit, SizeVector } from "./types";
-import { OBJECT_FIT } from "./constants";
-
-/**
- * Element utilities for the visualizer package.
- * Provides functions for handling element positioning, sizing, and transformations.
- */
-
-/**
- * Fits an element within specified bounds while maintaining aspect ratio
- * @param {Object} params - Parameters for fitting the element
- * @param {Object} params.containerSize - The container size
- * @param {Object} params.elementSize - The element size
- * @param {Object} params.elementRef - The element reference
- * @param {string} [params.objectFit] - The fit mode (contain, cover, fill)
- * @returns {Object} Updated element dimensions
- */
-export function* fitElement({ 
-    containerSize, 
-    elementSize, 
-    elementRef, 
-    objectFit 
-  }: { 
-    containerSize: SizeVector; 
-    elementSize: SizeVector; 
-    elementRef: Reference<any>; 
-    objectFit?: ObjectFit;
-  }) {
-      const containerAspectRatio = containerSize.x / containerSize.y;
-      const elementAspectRatio = elementSize.x / elementSize.y;
-      switch (objectFit) {
-        case OBJECT_FIT.CONTAIN:
-          if (elementAspectRatio > containerAspectRatio) {
-            yield elementRef().size({
-              x: containerSize.x,
-              y: containerSize.x / elementAspectRatio,
-            });
-            yield elementRef().scale(
-              containerSize.x / elementSize.x,
-              (containerSize.x * elementAspectRatio) / elementSize.y
-            );
-          } else {
-            yield elementRef().size({
-              x: containerSize.y * elementAspectRatio,
-              y: containerSize.y,
-            });
-            yield elementRef().scale(
-              (containerSize.y * elementAspectRatio) / elementSize.x,
-              containerSize.y / elementSize.y
-            );
-          }
-          break;
-        case OBJECT_FIT.COVER:
-          if (elementAspectRatio > containerAspectRatio) {
-            yield elementRef().size({
-              x: containerSize.y * elementAspectRatio,
-              y: containerSize.y,
-            });
-            yield elementRef().scale(
-              (containerSize.y * elementAspectRatio) / elementSize.x,
-              containerSize.y / elementSize.y
-            );
-          } else {
-            yield elementRef().size({
-              x: containerSize.x,
-              y: containerSize.x / elementAspectRatio,
-            });
-            yield elementRef().scale(
-              containerSize.x / elementSize.x,
-              (containerSize.x * elementAspectRatio) / elementSize.y
-            );
-          }
-          break;
-        case OBJECT_FIT.FILL:
-          yield elementRef().size(containerSize);
-          yield elementRef().scale(
-            containerSize.x / elementSize.x,
-            containerSize.x / elementSize.y
-          );
-          break;
-        default:
-          break;
-      }
-    }
+import { all, Reference, waitFor } from "@twick/core";
+import { FrameState, ObjectFit, SizeVector, VisualizerElement } from "./types";
+import { OBJECT_FIT } from "./constants";
+import textEffectController from "../controllers/text-effect.controller";
+import animationController from "../controllers/animation.controller";
+import { View2D } from "@twick/2d";
+import frameEffectController from "../controllers/frame-effect.controller";
+import { logger } from "./log.utils";
+
+/**
+ * Element utilities for the visualizer package.
+ * Provides functions for handling element positioning, sizing, and transformations.
+ */
+
+/**
+ * Fits an element within specified bounds while maintaining aspect ratio
+ * @param {Object} params - Parameters for fitting the element
+ * @param {Object} params.containerSize - The container size
+ * @param {Object} params.elementSize - The element size
+ * @param {Object} params.elementRef - The element reference
+ * @param {string} [params.objectFit] - The fit mode (contain, cover, fill)
+ * @returns {Object} Updated element dimensions
+ */
+export function* fitElement({
+  containerSize,
+  elementSize,
+  elementRef,
+  objectFit,
+}: {
+  containerSize: SizeVector;
+  elementSize: SizeVector;
+  elementRef: Reference<any>;
+  objectFit?: ObjectFit;
+}) {
+  const containerAspectRatio = containerSize.x / containerSize.y;
+  const elementAspectRatio = elementSize.x / elementSize.y;
+  switch (objectFit) {
+    case OBJECT_FIT.CONTAIN:
+      if (elementAspectRatio > containerAspectRatio) {
+        yield elementRef().size({
+          x: containerSize.x,
+          y: containerSize.x / elementAspectRatio,
+        });
+        yield elementRef().scale(
+          containerSize.x / elementSize.x,
+          (containerSize.x * elementAspectRatio) / elementSize.y
+        );
+      } else {
+        yield elementRef().size({
+          x: containerSize.y * elementAspectRatio,
+          y: containerSize.y,
+        });
+        yield elementRef().scale(
+          (containerSize.y * elementAspectRatio) / elementSize.x,
+          containerSize.y / elementSize.y
+        );
+      }
+      break;
+    case OBJECT_FIT.COVER:
+      if (elementAspectRatio > containerAspectRatio) {
+        yield elementRef().size({
+          x: containerSize.y * elementAspectRatio,
+          y: containerSize.y,
+        });
+        yield elementRef().scale(
+          (containerSize.y * elementAspectRatio) / elementSize.x,
+          containerSize.y / elementSize.y
+        );
+      } else {
+        yield elementRef().size({
+          x: containerSize.x,
+          y: containerSize.x / elementAspectRatio,
+        });
+        yield elementRef().scale(
+          containerSize.x / elementSize.x,
+          (containerSize.x * elementAspectRatio) / elementSize.y
+        );
+      }
+      break;
+    case OBJECT_FIT.FILL:
+      yield elementRef().size(containerSize);
+      yield elementRef().scale(
+        containerSize.x / elementSize.x,
+        containerSize.x / elementSize.y
+      );
+      break;
+    default:
+      break;
+  }
+}
+
+export function* addTextEffect({
+  elementRef,
+  element,
+}: {
+  elementRef: Reference<any>;
+  element: VisualizerElement;
+}) {
+  yield elementRef();
+  if (element.textEffect) {
+    const effect = textEffectController.get(element.textEffect.name);
+    if (effect) {
+      yield* effect.run({
+        elementRef,
+        duration: element.e - element.s,
+        ...element.textEffect,
+      });
+    }
+  }
+}
+
+export function* addAnimation({
+  elementRef,
+  containerRef,
+  element,
+  view,
+}: {
+  elementRef: Reference<any>;
+  containerRef?: Reference<any>;
+  element: VisualizerElement;
+  view: View2D;
+}) {
+  yield elementRef();
+  if (element.animation) {
+    const animation = animationController.get(element.animation.name);
+    if (animation) {
+      yield* animation.run({
+        elementRef,
+        containerRef,
+        view,
+        duration: element.e - element.s,
+        ...element.animation,
+      });
+    }
+  }
+}
+
+
+export function* addFrameEffect({
+  containerRef,
+  elementRef,
+  element,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  element: VisualizerElement;
+}) {
+  let frameEffects = [];
+  const initProps = getFrameState({
+    containerRef,
+    elementRef,
+  });
+
+  for (let i = 0; i < element?.frameEffects?.length; i++) {
+    const frameEffect = element.frameEffects[i];
+    const restore =
+      i === element.frameEffects.length - 1 ||
+      element.frameEffects[i + 1].s !== frameEffect.e;
+      const frameEffectPlugin = frameEffectController.get(frameEffect.name);
+      if (frameEffectPlugin) {
+        yield* frameEffectPlugin.run({
+          containerRef,
+          elementRef,
+          initFrameState: initProps,
+          frameEffect,
+        });
+        if (restore) {
+          yield* restoreFrameState({
+              containerRef,
+              elementRef,
+              duration: frameEffect.e - frameEffect.s,
+              element,  
+              initProps,
+            }) 
+        }
+        // frameEffects.push(...sequence);
+      
+      }
+  }
+  // yield* all(...frameEffects);
+}
+
+export function getFrameState({
+  containerRef,
+  elementRef,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+}): FrameState {
+  return {
+    frame: {
+      size: containerRef().size(),
+      pos: containerRef().position(),
+      radius: containerRef().radius(),
+      scale: containerRef().scale(),
+      rotation: containerRef().rotation(),
+    },
+    element: {
+      size: containerRef().size(),
+      pos: elementRef().position(),
+      scale: elementRef().scale(),
+    },
+  }
+}
+
+export function* restoreFrameState({
+  containerRef,
+  elementRef,
+  duration,
+  element,
+  initProps,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  duration: number;
+  element: VisualizerElement;
+  initProps: FrameState;
+}) {
+  yield* waitFor(duration);
+  logger(`restoreFrameState: ${JSON.stringify(initProps)}`);
+  let sequence = [];
+  sequence.push(containerRef().size(initProps.frame.size));
+  sequence.push(containerRef().position(initProps.frame.pos));
+  sequence.push(containerRef().scale(initProps.frame.scale));
+  sequence.push(containerRef().rotation(initProps.frame.rotation));
+  sequence.push(containerRef().radius(initProps.frame.radius));
+  sequence.push(elementRef().size(initProps.element.size));
+  sequence.push(elementRef().position(initProps.element.pos));
+  sequence.push(elementRef().scale(initProps.element.scale));
+  sequence.push(
+    fitElement({
+      elementRef,
+      containerSize: initProps.frame.size,
+      elementSize: initProps.element.size,
+      objectFit: element.objectFit ?? "none",
+    })
+  );
+  yield* all(...sequence);
+}

package/src/helpers/event.utils.ts

@@ -0,0 +1,6 @@
+export const dispatchWindowEvent = (eventName: string, detail: any) => {
+  if (typeof window !== "undefined") {
+    const event = new CustomEvent(eventName, detail as any);
+    return window.dispatchEvent(event);
+  }
+};

package/src/helpers/filters.ts

@@ -1,128 +1,128 @@
-import { Reference } from "@revideo/core";
-import { COLOR_FILTERS } from "./constants";
-
-/**
- * Filter utilities for the visualizer package.
- * Provides functions for applying various visual filters to elements.
- */
-
-/**
- * Applies a blur filter to an element
- * @param {Object} params - Parameters for the blur filter
- * @param {Reference<any>} params.element - The element to apply the filter to
- * @param {number} params.amount - The blur amount
- * @returns {void}
- */
-export function applyBlurFilter({ element, amount }: { element: Reference<any>; amount: number }) {
-  // ... existing code ...
-}
-
-/**
- * Applies a brightness filter to an element
- * @param {Object} params - Parameters for the brightness filter
- * @param {Reference<any>} params.element - The element to apply the filter to
- * @param {number} params.amount - The brightness amount
- * @returns {void}
- */
-export function applyBrightnessFilter({ element, amount }: { element: Reference<any>; amount: number }) {
-  // ... existing code ...
-}
-
-/**
- * Applies a contrast filter to an element
- * @param {Object} params - Parameters for the contrast filter
- * @param {Reference<any>} params.element - The element to apply the filter to
- * @param {number} params.amount - The contrast amount
- * @returns {void}
- */
-export function applyContrastFilter({ element, amount }: { element: Reference<any>; amount: number }) {
-  // ... existing code ...
-}
-
-export const applyColorFilter = (ref: Reference<any>, filterType: string) => {
-    switch (filterType) {
-      case COLOR_FILTERS.SATURATED:
-        ref().filters.saturate(1.4);
-        ref().filters.contrast(1.1);
-        break;
-      case COLOR_FILTERS.BRIGHT:
-        ref().filters.brightness(1.3);
-        ref().filters.contrast(1.05);
-        break;
-      case COLOR_FILTERS.VIBRANT:
-        ref().filters.saturate(1.6);
-        ref().filters.brightness(1.15);
-        ref().filters.contrast(1.1);
-        break;
-      case COLOR_FILTERS.RETRO:
-        ref().filters.sepia(0.8);
-        ref().filters.contrast(1.3);
-        ref().filters.brightness(0.85);
-        ref().filters.saturate(0.8);
-        break;
-      case COLOR_FILTERS.BLACK_WHITE:
-        ref().filters.grayscale(1);
-        ref().filters.contrast(1.25);
-        ref().filters.brightness(1.05);
-        break;
-      case COLOR_FILTERS.COOL:
-        ref().filters.hue(15);
-        ref().filters.brightness(1.1);
-        ref().filters.saturate(1.3);
-        ref().filters.contrast(1.05);
-        break;
-      case COLOR_FILTERS.WARM:
-        ref().filters.hue(-15);
-        ref().filters.brightness(1.15);
-        ref().filters.saturate(1.3);
-        ref().filters.contrast(1.05);
-        break;
-      case COLOR_FILTERS.CINEMATIC:
-        ref().filters.contrast(1.4);
-        ref().filters.brightness(0.95);
-        ref().filters.saturate(0.85);
-        ref().filters.sepia(0.2);
-        break;
-      case COLOR_FILTERS.SOFT_GLOW:
-        ref().filters.brightness(1.2);
-        ref().filters.contrast(0.95);
-        ref().filters.blur(1.2);
-        ref().filters.saturate(1.1);
-        break;
-      case COLOR_FILTERS.MOODY:
-        ref().filters.brightness(1.05);
-        ref().filters.contrast(1.4);
-        ref().filters.saturate(0.65);
-        ref().filters.sepia(0.2);
-        break;
-      case COLOR_FILTERS.DREAMY:
-        ref().filters.brightness(1.3);
-        ref().filters.blur(2);
-        ref().filters.saturate(1.4);
-        ref().filters.contrast(0.95);
-        break;
-      case COLOR_FILTERS.INVERTED:
-        ref().filters.invert(1);
-        ref().filters.hue(180);
-        break;
-      case COLOR_FILTERS.VINTAGE:
-        ref().filters.sepia(0.4);
-        ref().filters.saturate(1.4);
-        ref().filters.contrast(1.2);
-        ref().filters.brightness(1.1);
-        break;
-      case COLOR_FILTERS.DRAMATIC:
-        ref().filters.contrast(1.5);
-        ref().filters.brightness(0.9);
-        ref().filters.saturate(1.2);
-        break;
-      case COLOR_FILTERS.FADED:
-        ref().filters.opacity(0.9);
-        ref().filters.brightness(1.2);
-        ref().filters.saturate(0.8);
-        ref().filters.contrast(0.9);
-        break;
-      default:
-        break;
-    }
+import { Reference } from "@twick/core";
+import { COLOR_FILTERS } from "./constants";
+
+/**
+ * Filter utilities for the visualizer package.
+ * Provides functions for applying various visual filters to elements.
+ */
+
+/**
+ * Applies a blur filter to an element
+ * @param {Object} params - Parameters for the blur filter
+ * @param {Reference<any>} params.element - The element to apply the filter to
+ * @param {number} params.amount - The blur amount
+ * @returns {void}
+ */
+export function applyBlurFilter({ element, amount }: { element: Reference<any>; amount: number }) {
+  // ... existing code ...
+}
+
+/**
+ * Applies a brightness filter to an element
+ * @param {Object} params - Parameters for the brightness filter
+ * @param {Reference<any>} params.element - The element to apply the filter to
+ * @param {number} params.amount - The brightness amount
+ * @returns {void}
+ */
+export function applyBrightnessFilter({ element, amount }: { element: Reference<any>; amount: number }) {
+  // ... existing code ...
+}
+
+/**
+ * Applies a contrast filter to an element
+ * @param {Object} params - Parameters for the contrast filter
+ * @param {Reference<any>} params.element - The element to apply the filter to
+ * @param {number} params.amount - The contrast amount
+ * @returns {void}
+ */
+export function applyContrastFilter({ element, amount }: { element: Reference<any>; amount: number }) {
+  // ... existing code ...
+}
+
+export const applyColorFilter = (ref: Reference<any>, filterType: string) => {
+    switch (filterType) {
+      case COLOR_FILTERS.SATURATED:
+        ref().filters.saturate(1.4);
+        ref().filters.contrast(1.1);
+        break;
+      case COLOR_FILTERS.BRIGHT:
+        ref().filters.brightness(1.3);
+        ref().filters.contrast(1.05);
+        break;
+      case COLOR_FILTERS.VIBRANT:
+        ref().filters.saturate(1.6);
+        ref().filters.brightness(1.15);
+        ref().filters.contrast(1.1);
+        break;
+      case COLOR_FILTERS.RETRO:
+        ref().filters.sepia(0.8);
+        ref().filters.contrast(1.3);
+        ref().filters.brightness(0.85);
+        ref().filters.saturate(0.8);
+        break;
+      case COLOR_FILTERS.BLACK_WHITE:
+        ref().filters.grayscale(1);
+        ref().filters.contrast(1.25);
+        ref().filters.brightness(1.05);
+        break;
+      case COLOR_FILTERS.COOL:
+        ref().filters.hue(15);
+        ref().filters.brightness(1.1);
+        ref().filters.saturate(1.3);
+        ref().filters.contrast(1.05);
+        break;
+      case COLOR_FILTERS.WARM:
+        ref().filters.hue(-15);
+        ref().filters.brightness(1.15);
+        ref().filters.saturate(1.3);
+        ref().filters.contrast(1.05);
+        break;
+      case COLOR_FILTERS.CINEMATIC:
+        ref().filters.contrast(1.4);
+        ref().filters.brightness(0.95);
+        ref().filters.saturate(0.85);
+        ref().filters.sepia(0.2);
+        break;
+      case COLOR_FILTERS.SOFT_GLOW:
+        ref().filters.brightness(1.2);
+        ref().filters.contrast(0.95);
+        ref().filters.blur(1.2);
+        ref().filters.saturate(1.1);
+        break;
+      case COLOR_FILTERS.MOODY:
+        ref().filters.brightness(1.05);
+        ref().filters.contrast(1.4);
+        ref().filters.saturate(0.65);
+        ref().filters.sepia(0.2);
+        break;
+      case COLOR_FILTERS.DREAMY:
+        ref().filters.brightness(1.3);
+        ref().filters.blur(2);
+        ref().filters.saturate(1.4);
+        ref().filters.contrast(0.95);
+        break;
+      case COLOR_FILTERS.INVERTED:
+        ref().filters.invert(1);
+        ref().filters.hue(180);
+        break;
+      case COLOR_FILTERS.VINTAGE:
+        ref().filters.sepia(0.4);
+        ref().filters.saturate(1.4);
+        ref().filters.contrast(1.2);
+        ref().filters.brightness(1.1);
+        break;
+      case COLOR_FILTERS.DRAMATIC:
+        ref().filters.contrast(1.5);
+        ref().filters.brightness(0.9);
+        ref().filters.saturate(1.2);
+        break;
+      case COLOR_FILTERS.FADED:
+        ref().filters.opacity(0.9);
+        ref().filters.brightness(1.2);
+        ref().filters.saturate(0.8);
+        ref().filters.contrast(0.9);
+        break;
+      default:
+        break;
+    }
   };

package/src/helpers/log.utils.ts

@@ -1,32 +1,29 @@
-import { useLogger } from "@revideo/core";
-import { format } from "date-fns";
-
-const loggerInstance = useLogger();
-
-const getCurrentTime = (dateFormat = "mm:ss:SSS") => {
-  const now = new Date();
-  return format(now, dateFormat);
-};
-
-/**
- * Logging utilities for the visualizer package.
- * Provides consistent logging functionality across the application.
- */
-
-/**
- * Logs a message to the console with a visualizer prefix
- * @param {string} message - The message to log
- * @param {any} [data] - Optional data to log
- */
-export function logger(message: string, data?: any) {
-  console.log(`[Visualizer] ${message}`, data ? data : "");
-}
-
-/**
- * Logs an error to the console with a visualizer prefix
- * @param {string} message - The error message to log
- * @param {Error} [error] - Optional error object
- */
-export function errorLogger(message: string, error?: Error) {
-  console.error(`[Visualizer Error] ${message}`, error ? error : "");
-}
+import { format } from "date-fns";
+
+const getCurrentTime = (dateFormat = "mm:ss:SSS") => {
+  const now = new Date();
+  return format(now, dateFormat);
+};
+
+/**
+ * Logging utilities for the visualizer package.
+ * Provides consistent logging functionality across the application.
+ */
+
+/**
+ * Logs a message to the console with a visualizer prefix
+ * @param {string} message - The message to log
+ * @param {any} [data] - Optional data to log
+ */
+export function logger(message: string, data?: any) {
+  console.log(`[Visualizer] ${message}`, data ? data : "");
+}
+
+/**
+ * Logs an error to the console with a visualizer prefix
+ * @param {string} message - The error message to log
+ * @param {Error} [error] - Optional error object
+ */
+export function errorLogger(message: string, error?: Error) {
+  console.error(`[Visualizer Error] ${message}`, error ? error : "");
+}