fix: fixed vector <-> matrix and txtleaf <-> txt

packages/2d/src/editor/PreviewOverlayConfig.tsx

@@ -1,4 +1,4 @@
-import {Vector2} from '@revideo/core';
+import {transformVectorAsPoint, Vector2} from '@revideo/core';
 import type {PluginOverlayConfig} from '@revideo/ui';
 import {
   MouseButton,
@@ -21,10 +21,11 @@ function Component({children}: {children?: ComponentChildren}) {
         if (!scene.value) return;
         event.stopPropagation();
 
-        const position = new Vector2(
+        const diff = new Vector2(
           event.x - state.rect.x,
           event.y - state.rect.y,
-        ).transformAsPoint(matrix.inverse());
+        );
+        const position = transformVectorAsPoint(diff, matrix.inverse());
 
         selectedKey.value = scene.value.inspectPosition(
           position.x,

packages/2d/src/lib/components/Bezier.ts

@@ -1,5 +1,5 @@
 import type {SerializedVector2, Vector2} from '@revideo/core';
-import {BBox} from '@revideo/core';
+import {BBox, transformVectorAsPoint} from '@revideo/core';
 import type {CurveProfile} from '../curves';
 import type {PolynomialSegment} from '../curves/PolynomialSegment';
 import {computed} from '../decorators';
@@ -49,7 +49,8 @@ export abstract class Bezier extends Curve {
   ) {
     const size = this.computedSize();
     const box = this.childrenBBox().transformCorners(matrix);
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+    const offsetBeforeTransform = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetBeforeTransform, matrix);
     const overlayInfo = this.overlayInfo(matrix);
 
     context.lineWidth = 1;

packages/2d/src/lib/components/Knot.ts

@@ -4,7 +4,7 @@ import type {
   SignalValue,
   Vector2Signal,
 } from '@revideo/core';
-import {Vector2} from '@revideo/core';
+import {transformVectorAsPoint, Vector2} from '@revideo/core';
 import type {KnotInfo} from '../curves';
 import {
   cloneable,
@@ -141,8 +141,8 @@ export class Knot extends Node {
 
     return {
       position: this.position(),
-      startHandle: startHandle.transformAsPoint(this.localToParent()),
-      endHandle: endHandle.transformAsPoint(this.localToParent()),
+      startHandle: transformVectorAsPoint(startHandle, this.localToParent()),
+      endHandle: transformVectorAsPoint(endHandle, this.localToParent()),
       auto: {start: this.startHandleAuto(), end: this.endHandleAuto()},
     };
   }

packages/2d/src/lib/components/Layout.ts

@@ -21,6 +21,8 @@ import {
   modify,
   originToOffset,
   threadable,
+  transformVector,
+  transformVectorAsPoint,
   tween,
 } from '@revideo/core';
 import type {Vector2LengthSignal} from '../decorators';
@@ -846,7 +848,8 @@ export class Layout extends Node {
     matrix: DOMMatrix,
   ) {
     const size = this.computedSize();
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+    const offsetVector = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetVector, matrix);
     const box = BBox.fromSizeCentered(size);
     const layout = box.transformCorners(matrix);
     const padding = box
@@ -1041,7 +1044,10 @@ export class Layout extends Node {
   }
 
   public override hit(position: Vector2): Node | null {
-    const local = position.transformAsPoint(this.localToParent().inverse());
+    const local = transformVectorAsPoint(
+      position,
+      this.localToParent().inverse(),
+    );
     if (this.cacheBBox().includes(local)) {
       return super.hit(position) ?? this;
     }
@@ -1057,20 +1063,21 @@ function originSignal(origin: Origin): PropertyDecorator {
     const meta = getPropertyMeta<any>(target, key);
     meta!.parser = value => new Vector2(value);
     meta!.getter = function (this: Layout) {
-      return this.computedSize()
-        .getOriginOffset(origin)
-        .transformAsPoint(this.localToParent());
+      const originOffset = this.computedSize().getOriginOffset(origin);
+      return transformVectorAsPoint(originOffset, this.localToParent());
     };
     meta!.setter = function (
       this: Layout,
       value: SignalValue<PossibleVector2>,
     ) {
       this.position(
-        modify(value, unwrapped =>
-          this.getOriginDelta(origin)
-            .transform(this.scalingRotationMatrix())
-            .flipped.add(unwrapped),
-        ),
+        modify(value, unwrapped => {
+          const originDelta = this.getOriginDelta(origin);
+          return transformVector(
+            originDelta,
+            this.scalingRotationMatrix(),
+          ).flipped.add(unwrapped);
+        }),
       );
       return this;
     };

packages/2d/src/lib/components/Line.ts

@@ -9,6 +9,7 @@ import {
   BBox,
   createSignal,
   threadable,
+  transformVectorAsPoint,
   tween,
   unwrap,
   useLogger,
@@ -383,15 +384,17 @@ export class Line extends Curve {
   ) {
     const box = this.childrenBBox().transformCorners(matrix);
     const size = this.computedSize();
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+    const offsetVector = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetVector, matrix);
 
     context.fillStyle = 'white';
     context.strokeStyle = 'black';
     context.lineWidth = 1;
 
     const path = new Path2D();
-    const points = (this.tweenedPoints() ?? this.parsedPoints()).map(point =>
-      point.transformAsPoint(matrix),
+    const pointsPreTransformation = this.tweenedPoints() ?? this.parsedPoints();
+    const points = pointsPreTransformation.map(p =>
+      transformVectorAsPoint(p, matrix),
     );
     if (points.length > 0) {
       moveTo(path, points[0]);

packages/2d/src/lib/components/Node.ts

@@ -30,6 +30,8 @@ import {
   threadable,
   transformAngle,
   transformScalar,
+  transformVector,
+  transformVectorAsPoint,
   unwrap,
   useLogger,
 } from '@revideo/core';
@@ -201,7 +203,7 @@ export class Node implements Promisable<Node> {
   protected setAbsolutePosition(value: SignalValue<PossibleVector2>) {
     this.position(
       modify(value, unwrapped =>
-        new Vector2(unwrapped).transformAsPoint(this.worldToParent()),
+        transformVectorAsPoint(new Vector2(unwrapped), this.worldToParent()),
       ),
     );
   }
@@ -560,7 +562,7 @@ export class Node implements Promisable<Node> {
    * of the node:
    * ```ts
    * const local = new Vector2(0, 200);
-   * const world = local.transformAsPoint(node.localToWorld());
+   * const world = transformVectorAsPoint(local, node.localToWorld());
    * ```
    */
   @computed()
@@ -583,7 +585,7 @@ export class Node implements Promisable<Node> {
    * top-left corner of the screen:
    * ```ts
    * const world = new Vector2(0, 0);
-   * const local = world.transformAsPoint(node.worldToLocal());
+   * const local = transformVectorAsPoint(world, node.worldToLocal());
    * ```
    */
   @computed()
@@ -1407,7 +1409,7 @@ export class Node implements Promisable<Node> {
       const childCache = child.fullCacheBBox();
       const childMatrix = child.localToParent();
       points.push(
-        ...childCache.corners.map(r => r.transformAsPoint(childMatrix)),
+        ...childCache.corners.map(r => transformVectorAsPoint(r, childMatrix)),
       );
     }
 
@@ -1425,7 +1427,7 @@ export class Node implements Promisable<Node> {
   @computed()
   protected fullCacheBBox(): BBox {
     const matrix = this.compositeToLocal();
-    const shadowOffset = this.shadowOffset().transform(matrix);
+    const shadowOffset = transformVector(this.shadowOffset(), matrix);
     const shadowBlur = transformScalar(this.shadowBlur(), matrix);
 
     const result = this.cacheBBox().expand(
@@ -1499,7 +1501,7 @@ export class Node implements Promisable<Node> {
     }
     if (this.hasShadow()) {
       const matrix = this.compositeToWorld();
-      const offset = this.shadowOffset().transform(matrix);
+      const offset = transformVector(this.shadowOffset(), matrix);
       const blur = transformScalar(this.shadowBlur(), matrix);
 
       context.shadowColor = this.shadowColor().serialize();
@@ -1734,7 +1736,10 @@ export class Node implements Promisable<Node> {
    */
   public hit(position: Vector2): Node | null {
     let hit: Node | null = null;
-    const local = position.transformAsPoint(this.localToParent().inverse());
+    const local = transformVectorAsPoint(
+      position,
+      this.localToParent().inverse(),
+    );
     const children = this.children();
     for (let i = children.length - 1; i >= 0; i--) {
       hit = children[i].hit(local);

packages/2d/src/lib/components/Path.ts

@@ -4,7 +4,14 @@ import type {
   TimingFunction,
   Vector2,
 } from '@revideo/core';
-import {BBox, createSignal, isReactive, threadable, tween} from '@revideo/core';
+import {
+  BBox,
+  createSignal,
+  isReactive,
+  threadable,
+  transformVectorAsPoint,
+  tween,
+} from '@revideo/core';
 import type {CurveProfile} from '../curves';
 import {createCurveProfileLerp} from '../curves/createCurveProfileLerp';
 import {getPathProfile} from '../curves/getPathProfile';
@@ -93,7 +100,8 @@ export class Path extends Curve {
   ): void {
     const box = this.childrenBBox().transformCorners(matrix);
     const size = this.computedSize();
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+    const offsetVector = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetVector, matrix);
     const segments = this.profile().segments;
 
     context.lineWidth = 1;

packages/2d/src/lib/components/Ray.ts

@@ -1,5 +1,5 @@
 import type {PossibleVector2, SignalValue, Vector2Signal} from '@revideo/core';
-import {BBox} from '@revideo/core';
+import {BBox, transformVectorAsPoint} from '@revideo/core';
 import type {CurveProfile} from '../curves';
 import {LineSegment} from '../curves';
 import {nodeName, vector2Signal} from '../decorators';
@@ -89,9 +89,10 @@ export class Ray extends Curve {
   ) {
     const box = this.childrenBBox().transformCorners(matrix);
     const size = this.computedSize();
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
-    const from = this.from().transformAsPoint(matrix);
-    const to = this.to().transformAsPoint(matrix);
+    const offsetVector = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetVector, matrix);
+    const from = transformVectorAsPoint(this.from(), matrix);
+    const to = transformVectorAsPoint(this.to(), matrix);
 
     context.fillStyle = 'white';
     context.strokeStyle = 'black';

packages/2d/src/lib/components/Spline.ts

@@ -4,7 +4,13 @@ import type {
   SignalValue,
   SimpleSignal,
 } from '@revideo/core';
-import {BBox, Vector2, unwrap, useLogger} from '@revideo/core';
+import {
+  BBox,
+  Vector2,
+  transformVectorAsPoint,
+  unwrap,
+  useLogger,
+} from '@revideo/core';
 import type {CurveProfile, KnotInfo} from '../curves';
 import {CubicBezierSegment, getBezierSplineProfile} from '../curves';
 import type {PolynomialSegment} from '../curves/PolynomialSegment';
@@ -231,7 +237,8 @@ export class Spline extends Curve {
   ) {
     const size = this.computedSize();
     const box = this.childrenBBox().transformCorners(matrix);
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+    const offsetVector = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetVector, matrix);
     const segments = this.profile().segments as PolynomialSegment[];
 
     context.lineWidth = 1;

packages/2d/src/lib/components/TxtLeaf.ts

@@ -9,7 +9,6 @@ import {
 } from '../decorators';
 import type {ShapeProps} from './Shape';
 import {Shape} from './Shape';
-import {Txt} from './Txt';
 
 export interface TxtLeafProps extends ShapeProps {
   children?: string;
@@ -44,7 +43,7 @@ export class TxtLeaf extends Shape {
   @computed()
   protected parentTxt() {
     const parent = this.parent();
-    return parent instanceof Txt ? parent : null;
+    return parent?.constructor.name === 'Txt' ? parent : null;
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
@@ -166,6 +165,15 @@ export class TxtLeaf extends Shape {
   }
 }
 
+/**
+ * Overwrite all getters for signal values to return the parent value if it
+ * exists.
+ *
+ * The getters on the TxtLeaf class are used by the `@signal` decorators and
+ * are not used by the class or its consumers directly.
+ *
+ * Check out 2d/src/lib/utils/makeSignalExtensions.ts if this is confusing.
+ */
 [
   'fill',
   'stroke',

packages/2d/src/lib/curves/PolynomialSegment.ts

@@ -1,4 +1,4 @@
-import type {BBox, Vector2} from '@revideo/core';
+import {transformVectorAsPoint, type BBox, type Vector2} from '@revideo/core';
 import {moveTo} from '../utils';
 import type {CurvePoint} from './CurvePoint';
 import type {Polynomial2D} from './Polynomial2D';
@@ -61,7 +61,7 @@ export abstract class PolynomialSegment extends Segment {
   }
 
   public transformPoints(matrix: DOMMatrix): Vector2[] {
-    return this.points.map(point => point.transformAsPoint(matrix));
+    return this.points.map(point => transformVectorAsPoint(point, matrix));
   }
 
   /**

packages/2d/src/lib/scenes/Scene2D.ts

@@ -11,6 +11,7 @@ import {
   GeneratorScene,
   SceneRenderEvent,
   Vector2,
+  transformVectorAsPoint,
   useLogger,
 } from '@revideo/core';
 import type {Node} from '../components';
@@ -125,7 +126,8 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
   }
 
   public transformMousePosition(x: number, y: number): Vector2 | null {
-    return new Vector2(x, y).transformAsPoint(
+    return transformVectorAsPoint(
+      new Vector2(x, y),
       this.getView().localToParent().inverse(),
     );
   }

packages/core/src/signals/createSignal.ts

@@ -1,7 +1,8 @@
-import type {SignalValue, SimpleSignal} from '../signals';
-import {SignalContext} from '../signals';
 import type {InterpolationFunction} from '../tweening';
 import {deepLerp} from '../tweening';
+import type {SimpleSignal} from './SignalContext';
+import {SignalContext} from './SignalContext';
+import type {SignalValue} from './types';
 
 export function createSignal<TValue, TOwner = void>(
   initial?: SignalValue<TValue>,

packages/core/src/types/BBox.ts

@@ -7,6 +7,10 @@ import type {PossibleSpacing} from './Spacing';
 import {Spacing} from './Spacing';
 import type {Type, WebGLConvertible} from './Type';
 import {Vector2} from './Vector';
+import {
+  transformVector,
+  transformVectorAsPoint,
+} from './vector-transformations';
 
 export type SerializedBBox = {
   x: number;
@@ -278,13 +282,13 @@ export class BBox implements Type, WebGLConvertible {
 
   public transform(matrix: PossibleMatrix2D): BBox {
     return new BBox(
-      this.position.transformAsPoint(matrix),
-      this.size.transform(matrix),
+      transformVectorAsPoint(this.position, matrix),
+      transformVector(this.size, matrix),
     );
   }
 
   public transformCorners(matrix: PossibleMatrix2D) {
-    return this.corners.map(corner => corner.transformAsPoint(matrix));
+    return this.corners.map(corner => transformVectorAsPoint(corner, matrix));
   }
 
   /**