@twick/visualizer 0.15.14 → 0.15.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.15.14",
+  "version": "0.15.16",
   "license": "https://github.com/ncounterspecialist/twick/blob/main/LICENSE.md",
   "scripts": {
     "start": "twick editor --projectFile ./src/live.tsx",
@@ -22,18 +22,18 @@
   },
   "dependencies": {
     "@preact/signals": "^1.2.1",
-    "@twick/2d": "^0.15.14",
-    "@twick/core": "^0.15.14",
-    "@twick/renderer": "^0.15.14",
-    "@twick/vite-plugin": "^0.15.14",
+    "@twick/2d": "^0.15.16",
+    "@twick/core": "^0.15.16",
+    "@twick/renderer": "^0.15.16",
+    "@twick/vite-plugin": "^0.15.16",
     "date-fns": "^4.1.0",
     "preact": "^10.19.2",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.15.14"
+    "@twick/media-utils": "0.15.16"
   },
   "devDependencies": {
-    "@twick/cli": "^0.15.14",
-    "@twick/ui": "^0.15.14",
+    "@twick/cli": "^0.15.16",
+    "@twick/ui": "^0.15.16",
     "typescript": "5.4.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",

package/src/animations/fade.tsx

@@ -74,10 +74,10 @@ import { AnimationParams } from "../helpers/types";
  *     animation: { name: "fade", animate: "enter", duration: 2 }
  *   },
  *   {
- *     id: "subtitle", 
+ *     id: "caption", 
  *     type: "text",
  *     s: 1, e: 8,
- *     t: "Subtitle",
+ *     t: "Caption",
  *     animation: { name: "fade", animate: "enter", duration: 2 }
  *   },
  *   {

package/src/controllers/element.controller.ts

@@ -1,7 +1,6 @@
 import { AudioElement } from "../elements/audio.element";
 import { CaptionElement } from "../elements/caption.element";
 import { CircleElement } from "../elements/circle.element";
-import { IconElement } from "../elements/icon.element";
 import { ImageElement } from "../elements/image.element";
 import { RectElement } from "../elements/rect.element";
 import { SceneElement } from "../elements/scene.element";
@@ -33,7 +32,6 @@ export class ElementController {
     elementController.register(TextElement);
     elementController.register(AudioElement);
     elementController.register(CircleElement);
-    elementController.register(IconElement);
     elementController.register(RectElement);
   }
 

package/src/elements/index.ts

@@ -10,5 +10,4 @@ export { TextElement } from './text.element';
 export { CaptionElement } from './caption.element';
 export { RectElement } from './rect.element';
 export { CircleElement } from './circle.element';
-export { IconElement } from './icon.element';
 export { SceneElement } from './scene.element';

package/src/visualizer-grouped.ts

@@ -55,7 +55,6 @@ export { CaptionElement } from './elements/caption.element';
 // Shape and UI elements
 export { RectElement } from './elements/rect.element';
 export { CircleElement } from './elements/circle.element';
-export { IconElement } from './elements/icon.element';
 
 // Special elements
 export { SceneElement } from './elements/scene.element';

package/src/visualizer.tsx

@@ -134,7 +134,7 @@ export const scene = makeScene2D("scene", function* (view: View2D) {
       const movie = [];
       let index = 1;
 
-      // Iterate through each track element and create appropriate visualization
+      // Iterate through each track. Z-order is determined by track order (first track = back, last = front).
       for (const track of input.tracks) {
         switch (track.type) {
           case TRACK_TYPES.VIDEO:

package/src/elements/icon.element.tsx

@@ -1,88 +0,0 @@
-import { ElementParams } from "../helpers/types";
-import { all, createRef, waitFor } from "@twick/core";
-import { Icon } from "@twick/2d";
-import { addAnimation } from "../helpers/element.utils";
-
-/**
- * @group IconElement
- * IconElement creates and manages icon elements in the visualizer scene.
- * Handles icon rendering, styling, and animations for UI elements and
- * visual design components.
- *
- * Features:
- * - Icon rendering with custom styling
- * - Size and position control
- * - Color and opacity customization
- * - Animation support
- *
- * @param containerRef - Reference to the container element
- * @param element - Icon element configuration and properties
- * @param view - The main scene view for rendering
- * 
- * @example
- * ```js
- * // Basic icon element
- * {
- *   id: "play-icon",
- *   type: "icon",
- *   s: 0,
- *   e: 20,
- *   props: {
- *     icon: "play",
- *     size: 64,
- *     fill: "#ffffff"
- *   }
- * }
- * 
- * // Icon with animation
- * {
- *   id: "animated-icon",
- *   type: "icon",
- *   s: 2,
- *   e: 15,
- *   props: {
- *     icon: "pause",
- *     size: 48,
- *     fill: "#ff0000",
- *     opacity: 0.8
- *   },
- *   animation: {
- *     name: "fade",
- *     animate: "enter",
- *     duration: 2
- *   }
- * }
- * ```
- */
-export const IconElement = {
-    name: "icon",
-
-    /**
-     * Generator function that creates and manages icon elements in the scene.
-     * Handles icon creation, styling, and cleanup.
-     *
-     * @param params - Element parameters including container reference, element config, and view
-     * @returns Generator that controls the icon element lifecycle
-     * 
-     * @example
-     * ```js
-     * yield* IconElement.create({
-     *   containerRef: mainContainer,
-     *   element: iconConfig,
-     *   view: sceneView
-     * });
-     * ```
-     */
-    *create({ containerRef, element, view }: ElementParams) {
-    const elementRef = createRef<any>();
-    yield* waitFor(element?.s);
-    yield containerRef().add(
-      <Icon ref={elementRef} key={element.id} {...element.props} />
-    );
-    yield* all(
-      addAnimation({ elementRef: elementRef, element: element, view }),
-      waitFor(Math.max(0, element.e - element.s))
-    );
-    yield elementRef().remove();
-  },
-};