fix: fixing all of our circular imports (#328)

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/ArcSegment.ts

@@ -1,4 +1,11 @@
-import {BBox, DEG2RAD, Matrix2D, Vector2, lazy} from '@revideo/core';
+import {
+  BBox,
+  DEG2RAD,
+  Matrix2D,
+  Vector2,
+  lazy,
+  transformVector,
+} from '@revideo/core';
 import {View2D} from '../components/View2D';
 import type {CurvePoint} from './CurvePoint';
 import {Segment} from './Segment';
@@ -34,10 +41,12 @@ export class ArcSegment extends Segment {
     this.xAxisRotation = this.xAxisRotationDegree * DEG2RAD;
     this.radius = new Vector2(Math.abs(radius.x), Math.abs(radius.y));
 
-    const pAccent = startPoint
-      .sub(endPoint)
-      .div(2)
-      .transform(Matrix2D.fromRotation(-xAxisRotationDegree).domMatrix);
+    const rotationMatrix =
+      Matrix2D.fromRotation(-xAxisRotationDegree).domMatrix;
+    const pAccent = transformVector(
+      startPoint.sub(endPoint).div(2),
+      rotationMatrix,
+    );
 
     const L =
       (pAccent.x * pAccent.x) / (radius.x * radius.x) +
@@ -63,9 +72,8 @@ export class ArcSegment extends Segment {
 
     this.xAxisRotationMatrix =
       Matrix2D.fromRotation(xAxisRotationDegree).domMatrix;
-    this.center = cAccent
-      .transform(this.xAxisRotationMatrix)
-      .add(startPoint.add(endPoint).div(2));
+    const rotatedCAccent = transformVector(cAccent, this.xAxisRotationMatrix);
+    this.center = rotatedCAccent.add(startPoint.add(endPoint).div(2));
 
     const q = pAccent.sub(cAccent).div(radius);
     const s = pAccent.scale(-1).sub(cAccent).div(radius);
@@ -89,17 +97,19 @@ export class ArcSegment extends Segment {
   }
 
   public getAnglePosition(angle: number) {
-    return this.radius
-      .mul(Vector2.fromRadians(angle))
-      .transform(this.xAxisRotationMatrix)
-      .add(this.center);
+    const rotatedVector = transformVector(
+      this.radius.mul(Vector2.fromRadians(angle)),
+      this.xAxisRotationMatrix,
+    );
+    return rotatedVector.add(this.center);
   }
 
   public getAngleDerivative(angle: number) {
-    return new Vector2(
+    const derivative = new Vector2(
       -this.radius.x * Math.sin(angle),
       this.radius.y * Math.cos(angle),
-    ).transform(this.xAxisRotationMatrix);
+    );
+    return transformVector(derivative, this.xAxisRotationMatrix);
   }
 
   public draw(