@twick/visualizer 0.15.20 → 0.15.21

package/package.json

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

package/src/controllers/element.controller.ts

@@ -3,6 +3,8 @@ import { CaptionElement } from "../elements/caption.element";
 import { CircleElement } from "../elements/circle.element";
 import { ImageElement } from "../elements/image.element";
 import { RectElement } from "../elements/rect.element";
+import { ArrowElement } from "../elements/arrow.element";
+import { LineElement } from "../elements/line.element";
 import { SceneElement } from "../elements/scene.element";
 import { TextElement } from "../elements/text.element";
 import { VideoElement } from "../elements/video.element";
@@ -33,6 +35,8 @@ export class ElementController {
     elementController.register(AudioElement);
     elementController.register(CircleElement);
     elementController.register(RectElement);
+    elementController.register(ArrowElement);
+    elementController.register(LineElement);
   }
 
   const elementController = new ElementController();  

package/src/elements/arrow.element.tsx

@@ -0,0 +1,75 @@
+import { ElementParams } from "../helpers/types";
+import { all, createRef, waitFor } from "@twick/core";
+import { Layout, Polygon, Rect } from "@twick/2d";
+import { addAnimation } from "../helpers/element.utils";
+import { logger } from "../helpers/log.utils";
+
+const HEAD_OFFSET = 2;
+
+/**
+ * Arrow element: bar + triangle (callout) for the visualizer.
+ * Matches canvas arrow layout: bar from left, triangle overlapping at the tip.
+ */
+export const ArrowElement = {
+  name: "arrow",
+
+  *create({ containerRef, element, view }: ElementParams) {
+    const elementRef = createRef<any>();
+    yield* waitFor(element?.s ?? 0);
+    logger(`ArrowElement: ${element?.id}`);
+
+    const w = element?.props?.width ?? 220;
+    const h = element?.props?.height ?? 14;
+    const fill = element?.props?.fill ?? "#f59e0b";
+    const radius = element?.props?.radius ?? 4;
+    const rotation = element?.props?.rotation ?? 0;
+    const opacity = element?.props?.opacity ?? 1;
+    const cx = element?.props?.x ?? 0;
+    const cy = element?.props?.y ?? 0;
+
+    // Match canvas triangle size: Polygon is inscribed in its size box so appears
+    // smaller than Fabric’s Triangle (which fills its box). Scale up ~1.3×.
+    const HEAD_SIZE_MULT = 1.8 * 1.3;
+    const headSize = h * HEAD_SIZE_MULT;
+    const barLength = w - headSize * 0.5 + HEAD_OFFSET;
+    const barWidth = w;
+
+    // Single group so one ref for animations
+    const arrowGroup = (
+      <Layout
+        ref={elementRef}
+        key={element?.id}
+        x={cx}
+        y={cy}
+        rotation={rotation}
+        opacity={opacity}
+      >
+        <Rect
+          x={-barWidth / 2 + barLength / 2}
+          y={0}
+          width={barLength}
+          height={h}
+          fill={fill}
+          radius={radius}
+        />
+        <Polygon
+          x={barWidth / 2 - headSize * 0.25}
+          y={0}
+          width={headSize}
+          height={headSize}
+          sides={3}
+          fill={fill}
+          rotation={90}
+        />
+      </Layout>
+    );
+
+    yield containerRef().add(arrowGroup);
+
+    yield* all(
+      addAnimation({ elementRef, element: element!, view }),
+      waitFor(Math.max(0, (element?.e ?? 0) - (element?.s ?? 0)))
+    );
+    yield elementRef().remove();
+  },
+};

package/src/elements/index.ts

@@ -9,5 +9,7 @@ export { AudioElement } from './audio.element';
 export { TextElement } from './text.element';
 export { CaptionElement } from './caption.element';
 export { RectElement } from './rect.element';
+export { ArrowElement } from './arrow.element';
+export { LineElement } from './line.element';
 export { CircleElement } from './circle.element';
 export { SceneElement } from './scene.element';

package/src/elements/line.element.tsx

@@ -0,0 +1,17 @@
+import { ElementParams } from "../helpers/types";
+import { RectElement } from "./rect.element";
+
+/**
+ * LineElement: visualizer representation for line/segment shapes.
+ * Uses the same renderer as RectElement so width/height/fill/rotation
+ * map directly to the exported video.
+ */
+export const LineElement = {
+  name: "line",
+
+  *create(params: ElementParams) {
+    // Delegate to RectElement to reuse rendering and animation behavior.
+    yield* RectElement.create(params);
+  },
+};
+

package/src/elements/text.element.tsx

@@ -122,6 +122,10 @@ export const TextElement = {
           alignItems={"center"}
           justifyContent={"center"}
           layout
+          x={element.props?.x}
+          y={element.props?.y}
+          rotation={element.props?.rotation}
+          opacity={element.props?.opacity}
         >
           <Txt
             ref={innerTextRef}

package/src/helpers/constants.ts

@@ -41,6 +41,7 @@ export const TRACK_TYPES = {
   CAPTION: "caption",
   SCENE: "scene",
   ELEMENT: "element",
+  EFFECT: "effect",
 } as const;
 
 export const CAPTION_STYLE: Record<string, CaptionStyle> = {

package/src/project.ts

@@ -1,6 +1,10 @@
 import { makeProject } from "@twick/core";
+import { getActiveEffectsForFrame } from "@twick/effects";
 import { scene } from "./visualizer";
 
-export default makeProject({
+const project = makeProject({
   scenes: [scene],
 });
+(project as import("@twick/core").Project).getActiveEffectsForFrame =
+  getActiveEffectsForFrame;
+export default project;