@revideo/2d 0.10.0 → 0.10.1-alpha.1116

package/src/lib/components/Curve.ts

@@ -1,19 +1,19 @@
-import {
+import type {
   BBox,
   SerializedVector2,
   SignalValue,
   SimpleSignal,
-  Vector2,
-  clamp,
 } from '@revideo/core';
-import {CurveDrawingInfo} from '../curves/CurveDrawingInfo';
-import {CurvePoint} from '../curves/CurvePoint';
-import {CurveProfile} from '../curves/CurveProfile';
+import {Vector2, clamp} from '@revideo/core';
+import type {CurveDrawingInfo} from '../curves/CurveDrawingInfo';
+import type {CurvePoint} from '../curves/CurvePoint';
+import type {CurveProfile} from '../curves/CurveProfile';
 import {getPointAtDistance} from '../curves/getPointAtDistance';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {DesiredLength} from '../partials';
+import type {DesiredLength} from '../partials';
 import {lineTo, moveTo, resolveCanvasStyle} from '../utils';
-import {Shape, ShapeProps} from './Shape';
+import type {ShapeProps} from './Shape';
+import {Shape} from './Shape';
 
 export interface CurveProps extends ShapeProps {
   /**

package/src/lib/components/Grid.ts

@@ -1,12 +1,13 @@
-import {
+import type {
   PossibleVector2,
   SignalValue,
   SimpleSignal,
   Vector2Signal,
-  map,
 } from '@revideo/core';
+import {map} from '@revideo/core';
 import {initial, nodeName, signal, vector2Signal} from '../decorators';
-import {Shape, ShapeProps} from './Shape';
+import type {ShapeProps} from './Shape';
+import {Shape} from './Shape';
 
 export interface GridProps extends ShapeProps {
   /**

package/src/lib/components/Icon.ts

@@ -1,12 +1,13 @@
-import {
+import type {
   ColorSignal,
   PossibleColor,
   SignalValue,
   SimpleSignal,
-  useLogger,
 } from '@revideo/core';
+import {useLogger} from '@revideo/core';
 import {colorSignal, computed, initial, signal} from '../decorators';
-import {Img, ImgProps} from './Img';
+import type {ImgProps} from './Img';
+import {Img} from './Img';
 
 export interface IconProps extends ImgProps {
   /**

package/src/lib/components/Img.ts

@@ -1,19 +1,22 @@
+import type {
+  PossibleVector2,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+} from '@revideo/core';
 import {
   BBox,
   Color,
   DependencyContext,
   DetailedError,
-  PossibleVector2,
-  SerializedVector2,
-  SignalValue,
-  SimpleSignal,
   Vector2,
   useLogger,
 } from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {DesiredLength} from '../partials';
+import type {DesiredLength} from '../partials';
 import {drawImage} from '../utils';
-import {Rect, RectProps} from './Rect';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
 
 const imageWithoutSource = `
 The image won't be visible unless you specify a source:

package/src/lib/components/Knot.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   PossibleVector2,
   Signal,
   SignalValue,
-  Vector2,
   Vector2Signal,
 } from '@revideo/core';
-import {KnotInfo} from '../curves';
+import {transformVectorAsPoint, Vector2} from '@revideo/core';
+import type {KnotInfo} from '../curves';
 import {
   cloneable,
   compound,
@@ -15,7 +15,8 @@ import {
   signal,
   wrapper,
 } from '../decorators';
-import {Node, NodeProps} from './Node';
+import type {NodeProps} from './Node';
+import {Node} from './Node';
 
 export interface KnotProps extends NodeProps {
   /**
@@ -140,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()},
     };
   }

package/src/lib/components/Latex.ts

@@ -1,18 +1,15 @@
-import {
-  DependencyContext,
-  SignalValue,
-  SimpleSignal,
-  useLogger,
-} from '@revideo/core';
+import type {SignalValue, SimpleSignal} from '@revideo/core';
+import {DependencyContext, useLogger} from '@revideo/core';
 import {liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor';
 import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html';
 import {TeX} from 'mathjax-full/js/input/tex';
 import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages';
 import {mathjax} from 'mathjax-full/js/mathjax';
 import {SVG} from 'mathjax-full/js/output/svg';
-import {OptionList} from 'mathjax-full/js/util/Options';
+import type {OptionList} from 'mathjax-full/js/util/Options';
 import {initial, signal} from '../decorators';
-import {Img, ImgProps} from './Img';
+import type {ImgProps} from './Img';
+import {Img} from './Img';
 
 const Adaptor = liteAdaptor();
 RegisterHTMLHandler(Adaptor);

package/src/lib/components/Layout.ts

@@ -1,8 +1,5 @@
-import {
-  BBox,
-  DependencyContext,
+import type {
   InterpolationFunction,
-  Origin,
   PossibleSpacing,
   PossibleVector2,
   SerializedVector2,
@@ -13,16 +10,23 @@ import {
   SpacingSignal,
   ThreadGenerator,
   TimingFunction,
-  Vector2,
   Vector2Signal,
+} from '@revideo/core';
+import {
+  BBox,
+  DependencyContext,
+  Origin,
+  Vector2,
   boolLerp,
   modify,
   originToOffset,
   threadable,
+  transformVector,
+  transformVectorAsPoint,
   tween,
 } from '@revideo/core';
+import type {Vector2LengthSignal} from '../decorators';
 import {
-  Vector2LengthSignal,
   addInitializer,
   cloneable,
   computed,
@@ -35,7 +39,7 @@ import {
   vector2Signal,
 } from '../decorators';
 import {spacingSignal} from '../decorators/spacingSignal';
-import {
+import type {
   DesiredLength,
   FlexBasis,
   FlexContent,
@@ -48,7 +52,8 @@ import {
   TextWrap,
 } from '../partials';
 import {drawLine, drawPivot, is} from '../utils';
-import {Node, NodeProps} from './Node';
+import type {NodeProps} from './Node';
+import {Node} from './Node';
 
 export interface LayoutProps extends NodeProps {
   layout?: LayoutMode;
@@ -843,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
@@ -1038,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;
     }
@@ -1054,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;
     };

package/src/lib/components/Line.ts

@@ -1,18 +1,22 @@
-import {
-  BBox,
-  createSignal,
+import type {
   PossibleVector2,
   SignalValue,
   SimpleSignal,
-  threadable,
   ThreadGenerator,
   TimingFunction,
+} from '@revideo/core';
+import {
+  BBox,
+  createSignal,
+  threadable,
+  transformVectorAsPoint,
   tween,
   unwrap,
   useLogger,
   Vector2,
 } from '@revideo/core';
-import {CurveProfile, getPolylineProfile} from '../curves';
+import type {CurveProfile} from '../curves';
+import {getPolylineProfile} from '../curves';
 import {
   calculateLerpDistance,
   polygonLength,
@@ -20,7 +24,8 @@ import {
 } from '../curves/createCurveProfileLerp';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {arc, drawLine, drawPivot, lineTo, moveTo} from '../utils';
-import {Curve, CurveProps} from './Curve';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
 import {Layout} from './Layout';
 
 const lineWithoutPoints = `
@@ -379,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]);

package/src/lib/components/Media.ts

@@ -1,15 +1,15 @@
+import type {SignalValue, SimpleSignal} from '@revideo/core';
 import {
   DependencyContext,
   PlaybackState,
-  SignalValue,
-  SimpleSignal,
   clamp,
   isReactive,
   useLogger,
   useThread,
 } from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {Rect, RectProps} from './Rect';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
 
 export interface MediaProps extends RectProps {
   src?: SignalValue<string>;

package/src/lib/components/Node.ts

@@ -1,7 +1,5 @@
-import {
-  BBox,
+import type {
   ColorSignal,
-  DependencyContext,
   PossibleColor,
   PossibleSpacing,
   PossibleVector2,
@@ -14,11 +12,15 @@ import {
   SpacingSignal,
   ThreadGenerator,
   TimingFunction,
+  Vector2Signal,
+} from '@revideo/core';
+import {
+  BBox,
+  DependencyContext,
   UNIFORM_DESTINATION_MATRIX,
   UNIFORM_SOURCE_MATRIX,
   UNIFORM_TIME,
   Vector2,
-  Vector2Signal,
   all,
   clamp,
   createSignal,
@@ -28,6 +30,8 @@ import {
   threadable,
   transformAngle,
   transformScalar,
+  transformVector,
+  transformVectorAsPoint,
   unwrap,
   useLogger,
 } from '@revideo/core';
@@ -46,14 +50,15 @@ import {
   vector2Signal,
   wrapper,
 } from '../decorators';
-import {FiltersSignal, filtersSignal} from '../decorators/filtersSignal';
+import type {FiltersSignal} from '../decorators/filtersSignal';
+import {filtersSignal} from '../decorators/filtersSignal';
 import {spacingSignal} from '../decorators/spacingSignal';
-import {Filter} from '../partials';
-import {
+import type {Filter} from '../partials';
+import type {
   PossibleShaderConfig,
   ShaderConfig,
-  parseShader,
 } from '../partials/ShaderConfig';
+import {parseShader} from '../partials/ShaderConfig';
 import {useScene2D} from '../scenes/useScene2D';
 import {drawLine} from '../utils';
 import type {View2D} from './View2D';
@@ -198,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()),
       ),
     );
   }
@@ -557,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()
@@ -580,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()
@@ -1404,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)),
       );
     }
 
@@ -1422,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(
@@ -1496,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();
@@ -1731,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);

package/src/lib/components/Path.ts

@@ -1,20 +1,24 @@
+import type {
+  SignalValue,
+  SimpleSignal,
+  TimingFunction,
+  Vector2,
+} from '@revideo/core';
 import {
   BBox,
   createSignal,
   isReactive,
-  SignalValue,
-  SimpleSignal,
   threadable,
-  TimingFunction,
+  transformVectorAsPoint,
   tween,
-  Vector2,
 } from '@revideo/core';
-import {CurveProfile} from '../curves';
+import type {CurveProfile} from '../curves';
 import {createCurveProfileLerp} from '../curves/createCurveProfileLerp';
 import {getPathProfile} from '../curves/getPathProfile';
 import {computed, signal} from '../decorators';
 import {drawLine, drawPivot} from '../utils';
-import {Curve, CurveProps} from './Curve';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
 
 export interface PathProps extends CurveProps {
   data: SignalValue<string>;
@@ -96,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;

package/src/lib/components/Polygon.ts

@@ -1,15 +1,12 @@
-import {
-  BBox,
-  SerializedVector2,
-  SignalValue,
-  SimpleSignal,
-  Vector2,
-} from '@revideo/core';
-import {CurveProfile, getPolylineProfile} from '../curves';
+import type {SerializedVector2, SignalValue, SimpleSignal} from '@revideo/core';
+import {BBox, Vector2} from '@revideo/core';
+import type {CurveProfile} from '../curves';
+import {getPolylineProfile} from '../curves';
 import {computed, initial, signal} from '../decorators';
-import {DesiredLength} from '../partials';
+import type {DesiredLength} from '../partials';
 import {drawPolygon} from '../utils';
-import {Curve, CurveProps} from './Curve';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
 
 export interface PolygonProps extends CurveProps {
   /**

package/src/lib/components/QuadBezier.ts

@@ -1,10 +1,11 @@
-import {PossibleVector2, SignalValue, Vector2Signal} from '@revideo/core';
+import type {PossibleVector2, SignalValue, Vector2Signal} from '@revideo/core';
 import {QuadBezierSegment} from '../curves';
-import {PolynomialSegment} from '../curves/PolynomialSegment';
+import type {PolynomialSegment} from '../curves/PolynomialSegment';
 import {computed, vector2Signal} from '../decorators';
 import {lineTo, moveTo, quadraticCurveTo} from '../utils';
-import {Bezier, BezierOverlayInfo} from './Bezier';
-import {CurveProps} from './Curve';
+import type {BezierOverlayInfo} from './Bezier';
+import {Bezier} from './Bezier';
+import type {CurveProps} from './Curve';
 
 export interface QuadBezierProps extends CurveProps {
   p0?: SignalValue<PossibleVector2>;

package/src/lib/components/Ray.ts

@@ -1,8 +1,11 @@
-import {BBox, PossibleVector2, SignalValue, Vector2Signal} from '@revideo/core';
-import {CurveProfile, LineSegment} from '../curves';
+import type {PossibleVector2, SignalValue, Vector2Signal} from '@revideo/core';
+import {BBox, transformVectorAsPoint} from '@revideo/core';
+import type {CurveProfile} from '../curves';
+import {LineSegment} from '../curves';
 import {nodeName, vector2Signal} from '../decorators';
 import {arc, drawLine, drawPivot} from '../utils';
-import {Curve, CurveProps} from './Curve';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
 
 export interface RayProps extends CurveProps {
   /**
@@ -86,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';

package/src/lib/components/Rect.ts

@@ -1,17 +1,18 @@
-import {
-  BBox,
+import type {
   PossibleSpacing,
   SerializedVector2,
   SignalValue,
   SimpleSignal,
   SpacingSignal,
 } from '@revideo/core';
+import {BBox} from '@revideo/core';
 import {getRectProfile} from '../curves/getRectProfile';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {spacingSignal} from '../decorators/spacingSignal';
-import {DesiredLength} from '../partials';
+import type {DesiredLength} from '../partials';
 import {drawRoundRect} from '../utils';
-import {Curve, CurveProps} from './Curve';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
 
 export interface RectProps extends CurveProps {
   /**

package/src/lib/components/Rive.ts

@@ -1,13 +1,16 @@
-import {BBox, SignalValue, SimpleSignal, useThread} from '@revideo/core';
-import RiveInitializer, {
+import type {SignalValue, SimpleSignal} from '@revideo/core';
+import {BBox, useThread} from '@revideo/core';
+import type {
   Artboard,
   File,
   LinearAnimationInstance,
   Renderer,
   RiveCanvas,
 } from '@rive-app/canvas-advanced';
+import RiveInitializer from '@rive-app/canvas-advanced';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {Rect, RectProps} from './Rect';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
 
 export interface RiveProps extends RectProps {
   src?: SignalValue<string>;

package/src/lib/components/SVG.ts

@@ -1,12 +1,14 @@
-import {
-  BBox,
-  Matrix2D,
+import type {
   PossibleSpacing,
   SerializedVector2,
   SignalValue,
   SimpleSignal,
   ThreadGenerator,
   TimingFunction,
+} from '@revideo/core';
+import {
+  BBox,
+  Matrix2D,
   Vector2,
   all,
   clampRemap,
@@ -19,16 +21,23 @@ import {
   useLogger,
 } from '@revideo/core';
 import {computed, signal} from '../decorators';
-import {DesiredLength, PossibleCanvasStyle} from '../partials';
+import type {DesiredLength, PossibleCanvasStyle} from '../partials';
 import {applyTransformDiff, getTransformDiff} from '../utils/diff';
-import {Circle, CircleProps} from './Circle';
-import {Img, ImgProps} from './Img';
+import type {CircleProps} from './Circle';
+import {Circle} from './Circle';
+import type {ImgProps} from './Img';
+import {Img} from './Img';
 import {Layout} from './Layout';
-import {Line, LineProps} from './Line';
-import {Node, NodeProps} from './Node';
-import {Path, PathProps} from './Path';
-import {Rect, RectProps} from './Rect';
-import {Shape, ShapeProps} from './Shape';
+import type {LineProps} from './Line';
+import {Line} from './Line';
+import type {NodeProps} from './Node';
+import {Node} from './Node';
+import type {PathProps} from './Path';
+import {Path} from './Path';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
+import type {ShapeProps} from './Shape';
+import {Shape} from './Shape';
 import {View2D} from './View2D';
 
 /**