@revideo/2d 0.10.1 → 0.10.3

package/src/lib/components/Shape.ts

@@ -1,7 +1,5 @@
+import type {BBox, SignalValue, SimpleSignal} from '@revideo/core';
 import {
-  BBox,
-  SignalValue,
-  SimpleSignal,
   createSignal,
   easeOutExpo,
   linear,
@@ -9,13 +7,12 @@ import {
   threadable,
 } from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {
-  CanvasStyleSignal,
-  canvasStyleSignal,
-} from '../decorators/canvasStyleSignal';
-import {PossibleCanvasStyle} from '../partials';
+import type {CanvasStyleSignal} from '../decorators/canvasStyleSignal';
+import {canvasStyleSignal} from '../decorators/canvasStyleSignal';
+import type {PossibleCanvasStyle} from '../partials';
 import {resolveCanvasStyle} from '../utils';
-import {Layout, LayoutProps} from './Layout';
+import type {LayoutProps} from './Layout';
+import {Layout} from './Layout';
 
 export interface ShapeProps extends LayoutProps {
   fill?: SignalValue<PossibleCanvasStyle>;

package/src/lib/components/Spline.ts

@@ -1,22 +1,21 @@
-import {
-  BBox,
+import type {
   PossibleVector2,
   SerializedVector2,
   SignalValue,
   SimpleSignal,
+} from '@revideo/core';
+import {
+  BBox,
   Vector2,
+  transformVectorAsPoint,
   unwrap,
   useLogger,
 } from '@revideo/core';
-import {
-  CubicBezierSegment,
-  CurveProfile,
-  KnotInfo,
-  getBezierSplineProfile,
-} from '../curves';
-import {PolynomialSegment} from '../curves/PolynomialSegment';
+import type {CurveProfile, KnotInfo} from '../curves';
+import {CubicBezierSegment, getBezierSplineProfile} from '../curves';
+import type {PolynomialSegment} from '../curves/PolynomialSegment';
 import {computed, initial, signal} from '../decorators';
-import {DesiredLength} from '../partials';
+import type {DesiredLength} from '../partials';
 import {
   arc,
   bezierCurveTo,
@@ -26,9 +25,10 @@ import {
   moveTo,
   quadraticCurveTo,
 } from '../utils';
-import {Curve, CurveProps} from './Curve';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
 import {Knot} from './Knot';
-import {Node} from './Node';
+import type {Node} from './Node';
 
 const splineWithInsufficientKnots = `
 The spline won't be visible unless you specify at least two knots:
@@ -237,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;

package/src/lib/components/Txt.ts

@@ -1,20 +1,18 @@
-import {
-  DEFAULT,
+import type {
   InterpolationFunction,
   SignalValue,
   SimpleSignal,
   ThreadGenerator,
   TimingFunction,
-  all,
-  capitalize,
-  threadable,
 } from '@revideo/core';
+import {DEFAULT, all, capitalize, threadable} from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {is} from '../utils';
-import {Node} from './Node';
-import {Shape, ShapeProps} from './Shape';
-import {TxtLeaf} from './TxtLeaf';
-import {ComponentChildren} from './types';
+import type {Node} from './Node';
+import type {ShapeProps} from './Shape';
+import {Shape} from './Shape';
+import {TXT_TYPE, TxtLeaf} from './TxtLeaf';
+import type {ComponentChildren} from './types';
 
 type TxtChildren = string | Node | (string | Node)[];
 type AnyTxt = Txt | TxtLeaf;
@@ -26,6 +24,8 @@ export interface TxtProps extends ShapeProps {
 
 @nodeName('Txt')
 export class Txt extends Shape {
+  public readonly [TXT_TYPE] = true;
+
   /**
    * Create a bold text node.
    *

package/src/lib/components/TxtLeaf.ts

@@ -1,11 +1,5 @@
-import {
-  BBox,
-  SignalValue,
-  SimpleSignal,
-  capitalize,
-  lazy,
-  textLerp,
-} from '@revideo/core';
+import type {SignalValue, SimpleSignal} from '@revideo/core';
+import {BBox, capitalize, lazy, textLerp} from '@revideo/core';
 import {
   computed,
   initial,
@@ -13,14 +7,16 @@ import {
   nodeName,
   signal,
 } from '../decorators';
-import {Shape, ShapeProps} from './Shape';
-import {Txt} from './Txt';
+import type {ShapeProps} from './Shape';
+import {Shape} from './Shape';
 
 export interface TxtLeafProps extends ShapeProps {
   children?: string;
   text?: SignalValue<string>;
 }
 
+export const TXT_TYPE = Symbol('Txt');
+
 @nodeName('TxtLeaf')
 export class TxtLeaf extends Shape {
   @lazy(() => {
@@ -49,7 +45,15 @@ export class TxtLeaf extends Shape {
   @computed()
   protected parentTxt() {
     const parent = this.parent();
-    return parent instanceof Txt ? parent : null;
+    if (!parent) {
+      return null;
+    }
+
+    if (!(TXT_TYPE in parent)) {
+      return null;
+    }
+
+    return parent;
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
@@ -171,6 +175,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',

package/src/lib/components/Video.ts

@@ -1,18 +1,13 @@
-import {
-  BBox,
-  DependencyContext,
-  PlaybackState,
-  SerializedVector2,
-  SignalValue,
-  SimpleSignal,
-} from '@revideo/core';
+import type {SerializedVector2, SignalValue, SimpleSignal} from '@revideo/core';
+import {BBox, DependencyContext, PlaybackState} from '@revideo/core';
 import Hls from 'hls.js';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {DesiredLength} from '../partials';
+import type {DesiredLength} from '../partials';
 import {drawImage} from '../utils';
 import {ImageCommunication} from '../utils/video/ffmpeg-client';
 import {dropExtractor, getFrame} from '../utils/video/mp4-parser-manager';
-import {Media, MediaProps} from './Media';
+import type {MediaProps} from './Media';
+import {Media} from './Media';
 
 export interface VideoProps extends MediaProps {
   /**
@@ -118,7 +113,8 @@ export class Video extends Media {
       video = document.createElement('video');
       video.crossOrigin = 'anonymous';
 
-      if (src.endsWith('.m3u8')) {
+      const parsedSrc = new URL(src);
+      if (parsedSrc.pathname.endsWith('.m3u8')) {
         const hls = new Hls();
         hls.loadSource(src);
         hls.attachMedia(video);

package/src/lib/components/View2D.ts

@@ -1,9 +1,11 @@
-import {PlaybackState, SimpleSignal, lazy} from '@revideo/core';
+import type {SimpleSignal} from '@revideo/core';
+import {PlaybackState, lazy} from '@revideo/core';
 import {initial, signal} from '../decorators';
 import {nodeName} from '../decorators/nodeName';
 import {useScene2D} from '../scenes/useScene2D';
 import type {Node} from './Node';
-import {Rect, RectProps} from './Rect';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
 
 export interface View2DProps extends RectProps {
   assetHash: string;

package/src/lib/components/__tests__/generatorTest.ts

@@ -1,6 +1,7 @@
-import {ThreadGeneratorFactory, threads} from '@revideo/core';
+import type {ThreadGeneratorFactory} from '@revideo/core';
+import {threads} from '@revideo/core';
 import {useScene2D} from '../../scenes';
-import {View2D} from '../View2D';
+import type {View2D} from '../View2D';
 
 /**
  * Turn a generator factory into a test function.

package/src/lib/components/__tests__/mockScene2D.ts

@@ -1,8 +1,7 @@
+import type {FullSceneDescription, ThreadGeneratorFactory} from '@revideo/core';
 import {
-  FullSceneDescription,
   PlaybackManager,
   PlaybackStatus,
-  ThreadGeneratorFactory,
   Vector2,
   endPlayback,
   endScene,
@@ -11,7 +10,7 @@ import {
 } from '@revideo/core';
 import {afterAll, beforeAll, beforeEach} from 'vitest';
 import {Scene2D, makeScene2D} from '../../scenes';
-import {View2D} from '../View2D';
+import type {View2D} from '../View2D';
 
 /**
  * Set up the test environment to support creating nodes.

package/src/lib/curves/ArcSegment.ts

@@ -1,6 +1,13 @@
-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 {CurvePoint} from './CurvePoint';
+import type {CurvePoint} from './CurvePoint';
 import {Segment} from './Segment';
 
 export class ArcSegment extends 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(

package/src/lib/curves/CircleSegment.ts

@@ -1,5 +1,5 @@
 import {Vector2, clamp} from '@revideo/core';
-import {CurvePoint} from './CurvePoint';
+import type {CurvePoint} from './CurvePoint';
 import {Segment} from './Segment';
 
 export class CircleSegment extends Segment {

package/src/lib/curves/CurveDrawingInfo.ts

@@ -1,4 +1,4 @@
-import {Vector2} from '@revideo/core';
+import type {Vector2} from '@revideo/core';
 
 export interface CurveDrawingInfo {
   path: Path2D;

package/src/lib/curves/CurveProfile.ts

@@ -1,4 +1,4 @@
-import {Segment} from './Segment';
+import type {Segment} from './Segment';
 
 export interface CurveProfile {
   arcLength: number;

package/src/lib/curves/KnotInfo.ts

@@ -1,4 +1,4 @@
-import {Vector2} from '@revideo/core';
+import type {Vector2} from '@revideo/core';
 
 export type KnotAutoHandles = {start: number; end: number};
 

package/src/lib/curves/LineSegment.ts

@@ -1,6 +1,6 @@
-import {Vector2} from '@revideo/core';
+import type {Vector2} from '@revideo/core';
 import {lineTo, moveTo} from '../utils';
-import {CurvePoint} from './CurvePoint';
+import type {CurvePoint} from './CurvePoint';
 import {Segment} from './Segment';
 
 export class LineSegment extends Segment {

package/src/lib/curves/PolynomialSegment.ts

@@ -1,7 +1,7 @@
-import {BBox, Vector2} from '@revideo/core';
+import {transformVectorAsPoint, type BBox, type Vector2} from '@revideo/core';
 import {moveTo} from '../utils';
-import {CurvePoint} from './CurvePoint';
-import {Polynomial2D} from './Polynomial2D';
+import type {CurvePoint} from './CurvePoint';
+import type {Polynomial2D} from './Polynomial2D';
 import {Segment} from './Segment';
 import {UniformPolynomialCurveSampler} from './UniformPolynomialCurveSampler';
 
@@ -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));
   }
 
   /**

package/src/lib/curves/Segment.ts

@@ -1,5 +1,5 @@
-import {Vector2} from '@revideo/core';
-import {CurvePoint} from './CurvePoint';
+import type {Vector2} from '@revideo/core';
+import type {CurvePoint} from './CurvePoint';
 
 export abstract class Segment {
   public abstract readonly points: Vector2[];

package/src/lib/curves/UniformPolynomialCurveSampler.ts

@@ -1,6 +1,7 @@
-import {Vector2, clamp, remap} from '@revideo/core';
-import {CurvePoint} from './CurvePoint';
-import {PolynomialSegment} from './PolynomialSegment';
+import type {Vector2} from '@revideo/core';
+import {clamp, remap} from '@revideo/core';
+import type {CurvePoint} from './CurvePoint';
+import type {PolynomialSegment} from './PolynomialSegment';
 
 /**
  * Class to uniformly sample points on a given polynomial curve.

package/src/lib/curves/createCurveProfileLerp.ts

@@ -1,5 +1,5 @@
 import {Vector2} from '@revideo/core';
-import {CurveProfile} from './CurveProfile';
+import type {CurveProfile} from './CurveProfile';
 import {LineSegment} from './LineSegment';
 import {getPointAtDistance} from './getPointAtDistance';
 import {getPolylineProfile} from './getPolylineProfile';

package/src/lib/curves/getBezierSplineProfile.ts

@@ -1,8 +1,8 @@
 import {Vector2, clamp} from '@revideo/core';
 import {CubicBezierSegment} from './CubicBezierSegment';
-import {CurveProfile} from './CurveProfile';
-import {KnotInfo} from './KnotInfo';
-import {PolynomialSegment} from './PolynomialSegment';
+import type {CurveProfile} from './CurveProfile';
+import type {KnotInfo} from './KnotInfo';
+import type {PolynomialSegment} from './PolynomialSegment';
 import {QuadBezierSegment} from './QuadBezierSegment';
 
 function isCubicSegment(

package/src/lib/curves/getCircleProfile.ts

@@ -1,8 +1,8 @@
 import {Vector2} from '@revideo/core';
 import {ArcSegment} from './ArcSegment';
-import {CurveProfile} from './CurveProfile';
+import type {CurveProfile} from './CurveProfile';
 import {LineSegment} from './LineSegment';
-import {Segment} from './Segment';
+import type {Segment} from './Segment';
 
 export function getCircleProfile(
   size: Vector2,

package/src/lib/curves/getPathProfile.ts

@@ -1,11 +1,12 @@
 import {Vector2, clamp} from '@revideo/core';
-import parse, {PathCommand} from 'parse-svg-path';
+import type {PathCommand} from 'parse-svg-path';
+import parse from 'parse-svg-path';
 import {ArcSegment} from './ArcSegment';
 import {CubicBezierSegment} from './CubicBezierSegment';
-import {CurveProfile} from './CurveProfile';
+import type {CurveProfile} from './CurveProfile';
 import {LineSegment} from './LineSegment';
 import {QuadBezierSegment} from './QuadBezierSegment';
-import {Segment} from './Segment';
+import type {Segment} from './Segment';
 
 function addSegmentToProfile(profile: CurveProfile, segment: Segment) {
   profile.segments.push(segment);

package/src/lib/curves/getPointAtDistance.ts

@@ -1,6 +1,6 @@
 import {Vector2, clamp} from '@revideo/core';
-import {CurvePoint} from './CurvePoint';
-import {CurveProfile} from './CurveProfile';
+import type {CurvePoint} from './CurvePoint';
+import type {CurveProfile} from './CurveProfile';
 
 export function getPointAtDistance(
   profile: CurveProfile,

package/src/lib/curves/getPolylineProfile.ts

@@ -1,6 +1,7 @@
-import {Vector2, clamp} from '@revideo/core';
+import type {Vector2} from '@revideo/core';
+import {clamp} from '@revideo/core';
 import {CircleSegment} from './CircleSegment';
-import {CurveProfile} from './CurveProfile';
+import type {CurveProfile} from './CurveProfile';
 import {LineSegment} from './LineSegment';
 
 export function getPolylineProfile(

package/src/lib/curves/getRectProfile.ts

@@ -1,10 +1,11 @@
-import {BBox, Spacing, Vector2} from '@revideo/core';
+import type {BBox, Spacing} from '@revideo/core';
+import {Vector2} from '@revideo/core';
 import {adjustRectRadius} from '../utils';
 import {CircleSegment} from './CircleSegment';
 import {CubicBezierSegment} from './CubicBezierSegment';
-import {CurveProfile} from './CurveProfile';
+import type {CurveProfile} from './CurveProfile';
 import {LineSegment} from './LineSegment';
-import {Segment} from './Segment';
+import type {Segment} from './Segment';
 
 export function getRectProfile(
   rect: BBox,

package/src/lib/decorators/canvasStyleSignal.ts

@@ -1,4 +1,5 @@
-import {Color, Signal} from '@revideo/core';
+import type {Signal} from '@revideo/core';
+import {Color} from '@revideo/core';
 import type {CanvasStyle, PossibleCanvasStyle} from '../partials';
 import {canvasStyleParser} from '../utils';
 import {initial, interpolation, parser, signal} from './signal';

package/src/lib/decorators/defaultStyle.ts

@@ -1,5 +1,5 @@
 import {capitalize} from '@revideo/core';
-import {Layout} from '../components';
+import type {Layout} from '../components';
 
 export function defaultStyle<T>(
   styleName: string,

package/src/lib/decorators/filtersSignal.ts

@@ -1,16 +1,19 @@
-import {
+import type {
   Signal,
-  SignalContext,
   SignalValue,
   SimpleSignal,
   ThreadGenerator,
   TimingFunction,
+} from '@revideo/core';
+import {
+  SignalContext,
   all,
   deepLerp,
   easeInOutCubic,
   unwrap,
 } from '@revideo/core';
-import {FILTERS, Filter, FilterName} from '../partials';
+import type {FilterName} from '../partials';
+import {FILTERS, Filter} from '../partials';
 import {addInitializer} from './initializers';
 import {getPropertyMetaOrCreate} from './signal';
 

package/src/lib/decorators/signal.test.ts

@@ -1,4 +1,5 @@
-import {DEFAULT, SimpleSignal} from '@revideo/core';
+import type {SimpleSignal} from '@revideo/core';
+import {DEFAULT} from '@revideo/core';
 import {beforeEach, describe, expect, test, vi} from 'vitest';
 import {initial, initializeSignals, parser, signal} from './signal';
 

package/src/lib/decorators/signal.ts

@@ -1,12 +1,9 @@
-import {
-  capitalize,
-  deepLerp,
+import type {
   InterpolationFunction,
-  SignalContext,
   SignalValue,
   TimingFunction,
-  useLogger,
 } from '@revideo/core';
+import {capitalize, deepLerp, SignalContext, useLogger} from '@revideo/core';
 import {makeSignalExtensions} from '../utils/makeSignalExtensions';
 import {addInitializer, initialize} from './initializers';
 

package/src/lib/decorators/vector2Signal.ts

@@ -1,4 +1,5 @@
-import {PossibleVector2, Signal, Vector2} from '@revideo/core';
+import type {PossibleVector2, Signal} from '@revideo/core';
+import {Vector2} from '@revideo/core';
 import type {Length} from '../partials';
 import {compound} from './compound';
 import {wrapper} from './signal';

package/src/lib/jsx-runtime.ts

@@ -21,7 +21,8 @@ function isClassComponent(
   return !!fn.prototype?.isClass;
 }
 
-export const Fragment = Symbol.for('@revideo/2d/fragment');
+export const Fragment: FunctionComponent = ({children}) => children;
+
 export function jsx(
   type: NodeConstructor | FunctionComponent | typeof Fragment,
   config: JSXProps,

package/src/lib/partials/Filter.ts

@@ -1,10 +1,5 @@
-import {
-  createSignal,
-  map,
-  SignalValue,
-  SimpleSignal,
-  transformScalar,
-} from '@revideo/core';
+import type {SignalValue, SimpleSignal} from '@revideo/core';
+import {createSignal, map, transformScalar} from '@revideo/core';
 
 /**
  * All possible CSS filter names.

package/src/lib/partials/Gradient.ts

@@ -1,12 +1,11 @@
-import {
-  Color,
+import type {
   PossibleColor,
   PossibleVector2,
   SignalValue,
   SimpleSignal,
   Vector2Signal,
-  unwrap,
 } from '@revideo/core';
+import {Color, unwrap} from '@revideo/core';
 import {computed} from '../decorators/computed';
 import {initial, initializeSignals, signal} from '../decorators/signal';
 import {vector2Signal} from '../decorators/vector2Signal';

package/src/lib/partials/Pattern.ts

@@ -1,4 +1,4 @@
-import {SimpleSignal} from '@revideo/core';
+import type {SimpleSignal} from '@revideo/core';
 import {computed} from '../decorators/computed';
 import {initial, initializeSignals, signal} from '../decorators/signal';
 

package/src/lib/partials/ShaderConfig.ts

@@ -1,11 +1,6 @@
-import {
-  experimentalLog,
-  SignalValue,
-  useLogger,
-  useScene,
-  WebGLConvertible,
-} from '@revideo/core';
-import {Node} from '../components';
+import type {SignalValue, WebGLConvertible} from '@revideo/core';
+import {experimentalLog, useLogger, useScene} from '@revideo/core';
+import type {Node} from '../components';
 
 /**
  * Describes a shader program used to apply effects to nodes.

package/src/lib/partials/types.ts

@@ -1,4 +1,4 @@
-import {Color, PossibleColor} from '@revideo/core';
+import type {Color, PossibleColor} from '@revideo/core';
 import type {Gradient} from './Gradient';
 import type {Pattern} from './Pattern';