@twick/visualizer 0.15.8 → 0.15.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.15.8",
+  "version": "0.15.10",
   "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.8",
-    "@twick/core": "^0.15.8",
-    "@twick/renderer": "^0.15.8",
-    "@twick/vite-plugin": "^0.15.8",
+    "@twick/2d": "^0.15.10",
+    "@twick/core": "^0.15.10",
+    "@twick/renderer": "^0.15.10",
+    "@twick/vite-plugin": "^0.15.10",
     "date-fns": "^4.1.0",
     "preact": "^10.19.2",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.15.8"
+    "@twick/media-utils": "0.15.10"
   },
   "devDependencies": {
-    "@twick/cli": "^0.15.8",
-    "@twick/ui": "^0.15.8",
+    "@twick/cli": "^0.15.10",
+    "@twick/ui": "^0.15.10",
     "typescript": "5.4.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",

package/src/components/track.tsx

@@ -177,6 +177,7 @@ export function* makeSceneTrack({
       containerRef: frameRef,
       element: sceneElement,
       view,
+      containerProps: track.containerProps,
     });
   }
   yield frameRef().remove();

package/src/elements/caption.element.tsx

@@ -89,7 +89,7 @@ export const CaptionElement = {
    * });
    * ```
    */
-  *create({ containerRef, caption }: ElementParams) {
+  *create({ containerRef, caption, containerProps }: ElementParams) {
     const words = splitPhraseTiming(caption);
     let phraseStart = 0;
     if (words?.length) {
@@ -106,6 +106,13 @@ export const CaptionElement = {
       idx: 0,
       prevTime: phraseStart,
     };
+
+    // Set container properties
+    containerRef().maxWidth(containerProps?.maxWidth ?? "95%");
+    containerRef().wrap(containerProps?.wrap ?? "wrap");
+    containerRef().justifyContent(containerProps?.justifyContent ?? "center");
+    containerRef().alignItems(containerProps?.alignItems ?? "center");
+
     for (const word of words) {
       wordsState.props.push(caption.props);
       const textRef = createRef<Txt>();

package/src/helpers/types.ts

@@ -141,6 +141,7 @@ export type CaptionProps = {
   bgMargin?: [number, number];
   bgRadius?: number;
   bgPadding?: [number, number];
+  maxWidth?: number;
   x?: number;
   y?: number;
 };
@@ -198,6 +199,7 @@ export type VisualizerTrack = {
   id: string;
   type: string;
   elements: VisualizerElement[];
+  containerProps?: ContainerProps;
   props?: {
     capStyle?: string;
     bgOpacity?: number;
@@ -219,6 +221,17 @@ export type VisualizerTrack = {
   };
 };
 
+/**
+ * Container properties for layout and positioning of elements.
+ * Controls the layout and positioning of elements in the container.
+ */
+export type ContainerProps = {
+  maxWidth?: number;
+  wrap?: "wrap" | "nowrap" | "wrap-reverse";
+  justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+  alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+};
+
 /**
  * Parameters for creating elements in the visualizer scene.
  * Contains all necessary references and configuration for element creation.
@@ -229,6 +242,7 @@ export type ElementParams = {
   element?: VisualizerElement;
   caption?: Caption;
   waitOnStart?: boolean;
+  containerProps?: ContainerProps;
 };
 
 /**

package/src/jsx-dev-runtime-shim.ts

@@ -0,0 +1,5 @@
+/**
+ * Shim for @twick/2d/lib/jsx-dev-runtime when the installed @twick/2d
+ * doesn't export it. Re-exports jsx as jsxDEV from the main package.
+ */
+export { Fragment, jsx as jsxDEV } from "@twick/2d";