@revideo/2d 0.1.0

package/src/lib/curves/ArcSegment.ts

@@ -0,0 +1,149 @@
+import {BBox, DEG2RAD, Matrix2D, Vector2, lazy} from '@revideo/core';
+import {View2D} from '../components/View2D';
+import {CurvePoint} from './CurvePoint';
+import {Segment} from './Segment';
+
+export class ArcSegment extends Segment {
+  @lazy(() => {
+    const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    root.appendChild(el);
+    View2D.shadowRoot.appendChild(root);
+    return el;
+  })
+  private static el: SVGPathElement;
+  public readonly center: Vector2;
+  // angle in radian
+  public readonly startAngle: number;
+  public readonly deltaAngle: number;
+  public readonly xAxisRotation: number;
+  private xAxisRotationMatrix: DOMMatrix;
+  public override readonly points: Vector2[];
+  private length: number;
+
+  public constructor(
+    public readonly startPoint: Vector2,
+    public readonly radius: Vector2,
+    public readonly xAxisRotationDegree: number,
+    public readonly largeArcFlag: number,
+    public readonly sweepFlag: number,
+    public readonly endPoint: Vector2,
+  ) {
+    super();
+
+    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 L =
+      (pAccent.x * pAccent.x) / (radius.x * radius.x) +
+      (pAccent.y * pAccent.y) / (radius.y * radius.y);
+
+    if (L > 1) {
+      const Lsqrt = Math.sqrt(L);
+      radius.x = Lsqrt * radius.x;
+      radius.y = Lsqrt * radius.y;
+    }
+
+    const cAccent = new Vector2(
+      radius.ctg * pAccent.y,
+      radius.perpendicular.ctg * pAccent.x,
+    ).scale(
+      Math.sqrt(
+        1 /
+          ((pAccent.x * pAccent.x) / (radius.x * radius.x) +
+            (pAccent.y * pAccent.y) / (radius.y * radius.y)) -
+          1,
+      ) * (largeArcFlag === sweepFlag ? -1 : 1),
+    );
+
+    this.xAxisRotationMatrix =
+      Matrix2D.fromRotation(xAxisRotationDegree).domMatrix;
+    this.center = cAccent
+      .transform(this.xAxisRotationMatrix)
+      .add(startPoint.add(endPoint).div(2));
+
+    const q = pAccent.sub(cAccent).div(radius);
+    const s = pAccent.scale(-1).sub(cAccent).div(radius);
+    this.startAngle = q.radians;
+    this.deltaAngle = Vector2.angleBetween(q, s) % (Math.PI * 2);
+    if (this.sweepFlag === 0 && this.deltaAngle > 0) {
+      this.deltaAngle -= Math.PI * 2;
+    }
+    if (this.sweepFlag === 1 && this.deltaAngle < 0) {
+      this.deltaAngle += Math.PI * 2;
+    }
+
+    ArcSegment.el.setAttribute(
+      'd',
+      `M ${this.startPoint.x} ${this.startPoint.y} A ${this.radius.x} ${this.radius.y} ${this.xAxisRotationDegree} ${this.largeArcFlag} ${this.sweepFlag} ${this.endPoint.x} ${this.endPoint.y}`,
+    );
+    this.length = ArcSegment.el.getTotalLength();
+
+    const bbox = new BBox(ArcSegment.el.getBBox());
+    this.points = [bbox.topLeft, bbox.bottomRight];
+  }
+
+  public getAnglePosition(angle: number) {
+    return this.radius
+      .mul(Vector2.fromRadians(angle))
+      .transform(this.xAxisRotationMatrix)
+      .add(this.center);
+  }
+
+  public getAngleDerivative(angle: number) {
+    return new Vector2(
+      -this.radius.x * Math.sin(angle),
+      this.radius.y * Math.cos(angle),
+    ).transform(this.xAxisRotationMatrix);
+  }
+
+  public draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start: number,
+    end: number,
+    move: boolean,
+  ): [CurvePoint, CurvePoint] {
+    const startAngle = this.startAngle + this.deltaAngle * start;
+    const endAngle = this.startAngle + this.deltaAngle * end;
+    const startPos = this.getPoint(start);
+    const endPos = this.getPoint(end);
+
+    if (move) context.moveTo(startPos.position.x, startPos.position.y);
+
+    context.ellipse(
+      this.center.x,
+      this.center.y,
+      this.radius.x,
+      this.radius.y,
+      this.xAxisRotation,
+      startAngle,
+      endAngle,
+      this.sweepFlag === 0,
+    );
+
+    return [startPos, endPos];
+  }
+
+  public getPoint(distance: number): CurvePoint {
+    const angle = this.startAngle + distance * this.deltaAngle;
+    const tangent = this.getAngleDerivative(angle).normalized;
+    return {
+      position:
+        distance === 0
+          ? this.startPoint
+          : distance === 1
+            ? this.endPoint
+            : this.getAnglePosition(angle),
+      tangent,
+      normal: tangent.perpendicular,
+    };
+  }
+  public get arcLength(): number {
+    return this.length;
+  }
+}

package/src/lib/curves/CircleSegment.ts

@@ -0,0 +1,77 @@
+import {Vector2, clamp} from '@revideo/core';
+import {CurvePoint} from './CurvePoint';
+import {Segment} from './Segment';
+
+export class CircleSegment extends Segment {
+  private readonly length: number;
+  private readonly angle: number;
+  public override readonly points: Vector2[];
+
+  public constructor(
+    private center: Vector2,
+    private radius: number,
+    private from: Vector2,
+    private to: Vector2,
+    private counter: boolean,
+  ) {
+    super();
+    this.angle = Math.acos(clamp(-1, 1, from.dot(to)));
+    this.length = Math.abs(this.angle * radius);
+    const edgeVector = new Vector2(1, 1).scale(radius);
+    this.points = [center.sub(edgeVector), center.add(edgeVector)];
+  }
+
+  public get arcLength(): number {
+    return this.length;
+  }
+
+  public draw(
+    context: CanvasRenderingContext2D | Path2D,
+    from: number,
+    to: number,
+  ): [CurvePoint, CurvePoint] {
+    const counterFactor = this.counter ? -1 : 1;
+    const startAngle = this.from.radians + from * this.angle * counterFactor;
+    const endAngle = this.to.radians - (1 - to) * this.angle * counterFactor;
+
+    if (Math.abs(this.angle) > 0.0001) {
+      context.arc(
+        this.center.x,
+        this.center.y,
+        this.radius,
+        startAngle,
+        endAngle,
+        this.counter,
+      );
+    }
+
+    const startNormal = Vector2.fromRadians(startAngle);
+    const endNormal = Vector2.fromRadians(endAngle);
+
+    return [
+      {
+        position: this.center.add(startNormal.scale(this.radius)),
+        tangent: this.counter ? startNormal : startNormal.flipped,
+        normal: this.counter ? startNormal.flipped : startNormal,
+      },
+      {
+        position: this.center.add(endNormal.scale(this.radius)),
+        tangent: this.counter ? endNormal.flipped : endNormal,
+        normal: this.counter ? endNormal.flipped : endNormal,
+      },
+    ];
+  }
+
+  public getPoint(distance: number): CurvePoint {
+    const counterFactor = this.counter ? -1 : 1;
+    const angle = this.from.radians + distance * this.angle * counterFactor;
+
+    const normal = Vector2.fromRadians(angle);
+
+    return {
+      position: this.center.add(normal.scale(this.radius)),
+      tangent: this.counter ? normal : normal.flipped,
+      normal: this.counter ? normal : normal.flipped,
+    };
+  }
+}

package/src/lib/curves/CubicBezierSegment.ts

@@ -0,0 +1,78 @@
+import {Vector2, lazy} from '@revideo/core';
+import {bezierCurveTo} from '../utils';
+import {Polynomial2D} from './Polynomial2D';
+import {PolynomialSegment} from './PolynomialSegment';
+
+/**
+ * A spline segment representing a cubic Bézier curve.
+ */
+export class CubicBezierSegment extends PolynomialSegment {
+  @lazy(() => document.createElementNS('http://www.w3.org/2000/svg', 'path'))
+  private static el: SVGPathElement;
+
+  public get points(): Vector2[] {
+    return [this.p0, this.p1, this.p2, this.p3];
+  }
+
+  public constructor(
+    public readonly p0: Vector2,
+    public readonly p1: Vector2,
+    public readonly p2: Vector2,
+    public readonly p3: Vector2,
+  ) {
+    super(
+      new Polynomial2D(
+        p0,
+        // 3*(-p0+p1)
+        p0.flipped.add(p1).scale(3),
+        // 3*p0-6*p1+3*p2
+        p0.scale(3).sub(p1.scale(6)).add(p2.scale(3)),
+        // -p0+3*p1-3*p2+p3
+        p0.flipped.add(p1.scale(3)).sub(p2.scale(3)).add(p3),
+      ),
+      CubicBezierSegment.getLength(p0, p1, p2, p3),
+    );
+  }
+
+  public split(t: number): [PolynomialSegment, PolynomialSegment] {
+    const a = new Vector2(
+      this.p0.x + (this.p1.x - this.p0.x) * t,
+      this.p0.y + (this.p1.y - this.p0.y) * t,
+    );
+    const b = new Vector2(
+      this.p1.x + (this.p2.x - this.p1.x) * t,
+      this.p1.y + (this.p2.y - this.p1.y) * t,
+    );
+    const c = new Vector2(
+      this.p2.x + (this.p3.x - this.p2.x) * t,
+      this.p2.y + (this.p3.y - this.p2.y) * t,
+    );
+    const d = new Vector2(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
+    const e = new Vector2(b.x + (c.x - b.x) * t, b.y + (c.y - b.y) * t);
+    const p = new Vector2(d.x + (e.x - d.x) * t, d.y + (e.y - d.y) * t);
+
+    const left = new CubicBezierSegment(this.p0, a, d, p);
+    const right = new CubicBezierSegment(p, e, c, this.p3);
+
+    return [left, right];
+  }
+
+  protected override doDraw(context: CanvasRenderingContext2D | Path2D) {
+    bezierCurveTo(context, this.p1, this.p2, this.p3);
+  }
+
+  protected static getLength(
+    p0: Vector2,
+    p1: Vector2,
+    p2: Vector2,
+    p3: Vector2,
+  ): number {
+    // Let the browser do the work for us instead of calculating the arclength
+    // manually.
+    CubicBezierSegment.el.setAttribute(
+      'd',
+      `M ${p0.x} ${p0.y} C ${p1.x} ${p1.y} ${p2.x} ${p2.y} ${p3.x} ${p3.y}`,
+    );
+    return CubicBezierSegment.el.getTotalLength();
+  }
+}

package/src/lib/curves/CurveDrawingInfo.ts

@@ -0,0 +1,11 @@
+import {Vector2} from '@revideo/core';
+
+export interface CurveDrawingInfo {
+  path: Path2D;
+  arrowSize: number;
+  endPoint: Vector2;
+  endTangent: Vector2;
+  startPoint: Vector2;
+  startTangent: Vector2;
+  startOffset: number;
+}

package/src/lib/curves/CurvePoint.ts

@@ -0,0 +1,15 @@
+import type {Vector2} from '@revideo/core';
+
+export interface CurvePoint {
+  position: Vector2;
+  /**
+   * @deprecated
+   * The tangent is currently inconsistent for different types of curves and may
+   * sometimes return the normal of the point, instead. This will be fixed in
+   * the next major version but is kept as is for now for backwards
+   * compatibility reasons. To always get the real tangent of the point, you can
+   * use `normal.flipped.perpendicular`, instead.
+   */
+  tangent: Vector2;
+  normal: Vector2;
+}

package/src/lib/curves/CurveProfile.ts

@@ -0,0 +1,7 @@
+import {Segment} from './Segment';
+
+export interface CurveProfile {
+  arcLength: number;
+  segments: Segment[];
+  minSin: number;
+}

package/src/lib/curves/KnotInfo.ts

@@ -0,0 +1,10 @@
+import {Vector2} from '@revideo/core';
+
+export type KnotAutoHandles = {start: number; end: number};
+
+export interface KnotInfo {
+  position: Vector2;
+  startHandle: Vector2;
+  endHandle: Vector2;
+  auto: KnotAutoHandles;
+}

package/src/lib/curves/LineSegment.ts

@@ -0,0 +1,62 @@
+import {Vector2} from '@revideo/core';
+import {lineTo, moveTo} from '../utils';
+import {CurvePoint} from './CurvePoint';
+import {Segment} from './Segment';
+
+export class LineSegment extends Segment {
+  private readonly length: number;
+  private readonly vector: Vector2;
+  private readonly normal: Vector2;
+  public override readonly points: Vector2[];
+
+  public constructor(
+    public readonly from: Vector2,
+    public readonly to: Vector2,
+  ) {
+    super();
+    this.vector = to.sub(from);
+    this.length = this.vector.magnitude;
+    this.normal = this.vector.perpendicular.normalized.safe;
+    this.points = [from, to];
+  }
+
+  public get arcLength(): number {
+    return this.length;
+  }
+
+  public draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start = 0,
+    end = 1,
+    move = false,
+  ): [CurvePoint, CurvePoint] {
+    const from = this.from.add(this.vector.scale(start));
+    const to = this.from.add(this.vector.scale(end));
+    if (move) {
+      moveTo(context, from);
+    }
+    lineTo(context, to);
+
+    return [
+      {
+        position: from,
+        tangent: this.normal.flipped,
+        normal: this.normal,
+      },
+      {
+        position: to,
+        tangent: this.normal,
+        normal: this.normal,
+      },
+    ];
+  }
+
+  public getPoint(distance: number): CurvePoint {
+    const point = this.from.add(this.vector.scale(distance));
+    return {
+      position: point,
+      tangent: this.normal.flipped,
+      normal: this.normal,
+    };
+  }
+}