@twick/2d 0.13.0 → 0.14.2

package/src/lib/curves/Polynomial2D.ts

@@ -1,62 +1,62 @@
-import {BBox, Vector2} from '@twick/core';
-
-import {Polynomial} from './Polynomial';
-
-export class Polynomial2D {
-  public readonly x: Polynomial;
-  public readonly y: Polynomial;
-
-  public constructor(c0: Vector2, c1: Vector2, c2: Vector2, c3: Vector2);
-  public constructor(c0: Vector2, c1: Vector2, c2: Vector2);
-  public constructor(x: Polynomial, y: Polynomial);
-  public constructor(
-    public readonly c0: Vector2 | Polynomial,
-    public readonly c1: Vector2 | Polynomial,
-    public readonly c2?: Vector2,
-    public readonly c3?: Vector2,
-  ) {
-    if (c0 instanceof Polynomial) {
-      this.x = c0;
-      this.y = c1 as Polynomial;
-    } else if (c3 !== undefined) {
-      this.x = new Polynomial(c0.x, (c1 as Vector2).x, c2!.x, c3.x);
-      this.y = new Polynomial(c0.y, (c1 as Vector2).y, c2!.y, c3.y);
-    } else {
-      this.x = new Polynomial(c0.x, (c1 as Vector2).x, c2!.x);
-      this.y = new Polynomial(c0.y, (c1 as Vector2).y, c2!.y);
-    }
-  }
-
-  public eval(t: number, derivative = 0): Vector2 {
-    return new Vector2(
-      this.x.differentiate(derivative).eval(t),
-      this.y.differentiate(derivative).eval(t),
-    );
-  }
-
-  public split(u: number): [Polynomial2D, Polynomial2D] {
-    const [xPre, xPost] = this.x.split(u);
-    const [yPre, yPost] = this.y.split(u);
-    return [new Polynomial2D(xPre, yPre), new Polynomial2D(xPost, yPost)];
-  }
-
-  public differentiate(n = 1): Polynomial2D {
-    return new Polynomial2D(this.x.differentiate(n), this.y.differentiate(n));
-  }
-
-  public evalDerivative(t: number): Vector2 {
-    return this.differentiate().eval(t);
-  }
-
-  /**
-   * Calculate the tight axis-aligned bounds of the curve in the unit interval.
-   */
-  public getBounds(): BBox {
-    const rangeX = this.x.outputRange01();
-    const rangeY = this.y.outputRange01();
-    return BBox.fromPoints(
-      new Vector2(Math.min(...rangeX), Math.max(...rangeY)),
-      new Vector2(Math.max(...rangeX), Math.min(...rangeY)),
-    );
-  }
-}
+import {BBox, Vector2} from '@twick/core';
+
+import {Polynomial} from './Polynomial';
+
+export class Polynomial2D {
+  public readonly x: Polynomial;
+  public readonly y: Polynomial;
+
+  public constructor(c0: Vector2, c1: Vector2, c2: Vector2, c3: Vector2);
+  public constructor(c0: Vector2, c1: Vector2, c2: Vector2);
+  public constructor(x: Polynomial, y: Polynomial);
+  public constructor(
+    public readonly c0: Vector2 | Polynomial,
+    public readonly c1: Vector2 | Polynomial,
+    public readonly c2?: Vector2,
+    public readonly c3?: Vector2,
+  ) {
+    if (c0 instanceof Polynomial) {
+      this.x = c0;
+      this.y = c1 as Polynomial;
+    } else if (c3 !== undefined) {
+      this.x = new Polynomial(c0.x, (c1 as Vector2).x, c2!.x, c3.x);
+      this.y = new Polynomial(c0.y, (c1 as Vector2).y, c2!.y, c3.y);
+    } else {
+      this.x = new Polynomial(c0.x, (c1 as Vector2).x, c2!.x);
+      this.y = new Polynomial(c0.y, (c1 as Vector2).y, c2!.y);
+    }
+  }
+
+  public eval(t: number, derivative = 0): Vector2 {
+    return new Vector2(
+      this.x.differentiate(derivative).eval(t),
+      this.y.differentiate(derivative).eval(t),
+    );
+  }
+
+  public split(u: number): [Polynomial2D, Polynomial2D] {
+    const [xPre, xPost] = this.x.split(u);
+    const [yPre, yPost] = this.y.split(u);
+    return [new Polynomial2D(xPre, yPre), new Polynomial2D(xPost, yPost)];
+  }
+
+  public differentiate(n = 1): Polynomial2D {
+    return new Polynomial2D(this.x.differentiate(n), this.y.differentiate(n));
+  }
+
+  public evalDerivative(t: number): Vector2 {
+    return this.differentiate().eval(t);
+  }
+
+  /**
+   * Calculate the tight axis-aligned bounds of the curve in the unit interval.
+   */
+  public getBounds(): BBox {
+    const rangeX = this.x.outputRange01();
+    const rangeY = this.y.outputRange01();
+    return BBox.fromPoints(
+      new Vector2(Math.min(...rangeX), Math.max(...rangeY)),
+      new Vector2(Math.max(...rangeX), Math.min(...rangeY)),
+    );
+  }
+}

package/src/lib/curves/PolynomialSegment.ts

@@ -1,124 +1,124 @@
-import {transformVectorAsPoint, type BBox, type Vector2} from '@twick/core';
-import {moveTo} from '../utils';
-import type {CurvePoint} from './CurvePoint';
-import type {Polynomial2D} from './Polynomial2D';
-import {Segment} from './Segment';
-import {UniformPolynomialCurveSampler} from './UniformPolynomialCurveSampler';
-
-export abstract class PolynomialSegment extends Segment {
-  protected readonly pointSampler: UniformPolynomialCurveSampler;
-
-  public get arcLength(): number {
-    return this.length;
-  }
-
-  public abstract override get points(): Vector2[];
-
-  protected constructor(
-    protected readonly curve: Polynomial2D,
-    protected readonly length: number,
-  ) {
-    super();
-    this.pointSampler = new UniformPolynomialCurveSampler(this);
-  }
-
-  public getBBox(): BBox {
-    return this.curve.getBounds();
-  }
-
-  /**
-   * Evaluate the polynomial at the given t value.
-   *
-   * @param t - The t value at which to evaluate the curve.
-   */
-  public eval(t: number): CurvePoint {
-    const tangent = this.tangent(t);
-
-    return {
-      position: this.curve.eval(t),
-      tangent,
-      normal: tangent.perpendicular,
-    };
-  }
-
-  /**
-   * Split the curve into two separate polynomials at the given t value. The two
-   * resulting curves form the same overall shape as the original curve.
-   *
-   * @param t - The t value at which to split the curve.
-   */
-  public abstract split(t: number): [PolynomialSegment, PolynomialSegment];
-
-  public getPoint(distance: number): CurvePoint {
-    const closestPoint = this.pointSampler.pointAtDistance(
-      this.arcLength * distance,
-    );
-    return {
-      position: closestPoint.position,
-      tangent: closestPoint.tangent,
-      normal: closestPoint.tangent.perpendicular,
-    };
-  }
-
-  public transformPoints(matrix: DOMMatrix): Vector2[] {
-    return this.points.map(point => transformVectorAsPoint(point, matrix));
-  }
-
-  /**
-   * Return the tangent of the point that sits at the provided t value on the
-   * curve.
-   *
-   * @param t - The t value at which to evaluate the curve.
-   */
-  public tangent(t: number): Vector2 {
-    return this.curve.evalDerivative(t).normalized;
-  }
-
-  public draw(
-    context: CanvasRenderingContext2D | Path2D,
-    start = 0,
-    end = 1,
-    move = true,
-  ): [CurvePoint, CurvePoint] {
-    let curve: PolynomialSegment | null = null;
-    let startT = start;
-    let endT = end;
-    let points = this.points;
-
-    if (start !== 0 || end !== 1) {
-      const startDistance = this.length * start;
-      const endDistance = this.length * end;
-
-      startT = this.pointSampler.distanceToT(startDistance);
-      endT = this.pointSampler.distanceToT(endDistance);
-      const relativeEndT = (endT - startT) / (1 - startT);
-
-      const [, startSegment] = this.split(startT);
-      [curve] = startSegment.split(relativeEndT);
-      points = curve.points;
-    }
-
-    if (move) {
-      moveTo(context, points[0]);
-    }
-    (curve ?? this).doDraw(context);
-
-    const startTangent = this.tangent(startT);
-    const endTangent = this.tangent(endT);
-
-    return [
-      {
-        position: points[0],
-        tangent: startTangent,
-        normal: startTangent.perpendicular,
-      },
-      {
-        position: points.at(-1)!,
-        tangent: endTangent,
-        normal: endTangent.perpendicular,
-      },
-    ];
-  }
-
-  protected abstract doDraw(context: CanvasRenderingContext2D | Path2D): void;
-}
+import {transformVectorAsPoint, type BBox, type Vector2} from '@twick/core';
+import {moveTo} from '../utils';
+import type {CurvePoint} from './CurvePoint';
+import type {Polynomial2D} from './Polynomial2D';
+import {Segment} from './Segment';
+import {UniformPolynomialCurveSampler} from './UniformPolynomialCurveSampler';
+
+export abstract class PolynomialSegment extends Segment {
+  protected readonly pointSampler: UniformPolynomialCurveSampler;
+
+  public get arcLength(): number {
+    return this.length;
+  }
+
+  public abstract override get points(): Vector2[];
+
+  protected constructor(
+    protected readonly curve: Polynomial2D,
+    protected readonly length: number,
+  ) {
+    super();
+    this.pointSampler = new UniformPolynomialCurveSampler(this);
+  }
+
+  public getBBox(): BBox {
+    return this.curve.getBounds();
+  }
+
+  /**
+   * Evaluate the polynomial at the given t value.
+   *
+   * @param t - The t value at which to evaluate the curve.
+   */
+  public eval(t: number): CurvePoint {
+    const tangent = this.tangent(t);
+
+    return {
+      position: this.curve.eval(t),
+      tangent,
+      normal: tangent.perpendicular,
+    };
+  }
+
+  /**
+   * Split the curve into two separate polynomials at the given t value. The two
+   * resulting curves form the same overall shape as the original curve.
+   *
+   * @param t - The t value at which to split the curve.
+   */
+  public abstract split(t: number): [PolynomialSegment, PolynomialSegment];
+
+  public getPoint(distance: number): CurvePoint {
+    const closestPoint = this.pointSampler.pointAtDistance(
+      this.arcLength * distance,
+    );
+    return {
+      position: closestPoint.position,
+      tangent: closestPoint.tangent,
+      normal: closestPoint.tangent.perpendicular,
+    };
+  }
+
+  public transformPoints(matrix: DOMMatrix): Vector2[] {
+    return this.points.map(point => transformVectorAsPoint(point, matrix));
+  }
+
+  /**
+   * Return the tangent of the point that sits at the provided t value on the
+   * curve.
+   *
+   * @param t - The t value at which to evaluate the curve.
+   */
+  public tangent(t: number): Vector2 {
+    return this.curve.evalDerivative(t).normalized;
+  }
+
+  public draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start = 0,
+    end = 1,
+    move = true,
+  ): [CurvePoint, CurvePoint] {
+    let curve: PolynomialSegment | null = null;
+    let startT = start;
+    let endT = end;
+    let points = this.points;
+
+    if (start !== 0 || end !== 1) {
+      const startDistance = this.length * start;
+      const endDistance = this.length * end;
+
+      startT = this.pointSampler.distanceToT(startDistance);
+      endT = this.pointSampler.distanceToT(endDistance);
+      const relativeEndT = (endT - startT) / (1 - startT);
+
+      const [, startSegment] = this.split(startT);
+      [curve] = startSegment.split(relativeEndT);
+      points = curve.points;
+    }
+
+    if (move) {
+      moveTo(context, points[0]);
+    }
+    (curve ?? this).doDraw(context);
+
+    const startTangent = this.tangent(startT);
+    const endTangent = this.tangent(endT);
+
+    return [
+      {
+        position: points[0],
+        tangent: startTangent,
+        normal: startTangent.perpendicular,
+      },
+      {
+        position: points.at(-1)!,
+        tangent: endTangent,
+        normal: endTangent.perpendicular,
+      },
+    ];
+  }
+
+  protected abstract doDraw(context: CanvasRenderingContext2D | Path2D): void;
+}

package/src/lib/curves/QuadBezierSegment.ts

@@ -1,64 +1,64 @@
-import {Vector2, lazy} from '@twick/core';
-import {quadraticCurveTo} from '../utils';
-import {Polynomial2D} from './Polynomial2D';
-import {PolynomialSegment} from './PolynomialSegment';
-
-/**
- * A spline segment representing a quadratic Bézier curve.
- */
-export class QuadBezierSegment 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];
-  }
-
-  public constructor(
-    public readonly p0: Vector2,
-    public readonly p1: Vector2,
-    public readonly p2: Vector2,
-  ) {
-    super(
-      new Polynomial2D(
-        p0,
-        // 2*(-p0+p1)
-        p0.flipped.add(p1).scale(2),
-        // p0-2*p1+p2
-        p0.sub(p1.scale(2)).add(p2),
-      ),
-      QuadBezierSegment.getLength(p0, p1, p2),
-    );
-  }
-
-  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 p = new Vector2(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
-
-    const left = new QuadBezierSegment(this.p0, a, p);
-    const right = new QuadBezierSegment(p, b, this.p2);
-
-    return [left, right];
-  }
-
-  protected static getLength(p0: Vector2, p1: Vector2, p2: Vector2): number {
-    // Let the browser do the work for us instead of calculating the arclength
-    // manually.
-    QuadBezierSegment.el.setAttribute(
-      'd',
-      `M ${p0.x} ${p0.y} Q ${p1.x} ${p1.y} ${p2.x} ${p2.y}`,
-    );
-    return QuadBezierSegment.el.getTotalLength();
-  }
-
-  protected override doDraw(context: CanvasRenderingContext2D | Path2D) {
-    quadraticCurveTo(context, this.p1, this.p2);
-  }
-}
+import {Vector2, lazy} from '@twick/core';
+import {quadraticCurveTo} from '../utils';
+import {Polynomial2D} from './Polynomial2D';
+import {PolynomialSegment} from './PolynomialSegment';
+
+/**
+ * A spline segment representing a quadratic Bézier curve.
+ */
+export class QuadBezierSegment 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];
+  }
+
+  public constructor(
+    public readonly p0: Vector2,
+    public readonly p1: Vector2,
+    public readonly p2: Vector2,
+  ) {
+    super(
+      new Polynomial2D(
+        p0,
+        // 2*(-p0+p1)
+        p0.flipped.add(p1).scale(2),
+        // p0-2*p1+p2
+        p0.sub(p1.scale(2)).add(p2),
+      ),
+      QuadBezierSegment.getLength(p0, p1, p2),
+    );
+  }
+
+  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 p = new Vector2(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
+
+    const left = new QuadBezierSegment(this.p0, a, p);
+    const right = new QuadBezierSegment(p, b, this.p2);
+
+    return [left, right];
+  }
+
+  protected static getLength(p0: Vector2, p1: Vector2, p2: Vector2): number {
+    // Let the browser do the work for us instead of calculating the arclength
+    // manually.
+    QuadBezierSegment.el.setAttribute(
+      'd',
+      `M ${p0.x} ${p0.y} Q ${p1.x} ${p1.y} ${p2.x} ${p2.y}`,
+    );
+    return QuadBezierSegment.el.getTotalLength();
+  }
+
+  protected override doDraw(context: CanvasRenderingContext2D | Path2D) {
+    quadraticCurveTo(context, this.p1, this.p2);
+  }
+}

package/src/lib/curves/Segment.ts

@@ -1,17 +1,17 @@
-import type {Vector2} from '@twick/core';
-import type {CurvePoint} from './CurvePoint';
-
-export abstract class Segment {
-  public abstract readonly points: Vector2[];
-
-  public abstract draw(
-    context: CanvasRenderingContext2D | Path2D,
-    start: number,
-    end: number,
-    move: boolean,
-  ): [CurvePoint, CurvePoint];
-
-  public abstract getPoint(distance: number): CurvePoint;
-
-  public abstract get arcLength(): number;
-}
+import type {Vector2} from '@twick/core';
+import type {CurvePoint} from './CurvePoint';
+
+export abstract class Segment {
+  public abstract readonly points: Vector2[];
+
+  public abstract draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start: number,
+    end: number,
+    move: boolean,
+  ): [CurvePoint, CurvePoint];
+
+  public abstract getPoint(distance: number): CurvePoint;
+
+  public abstract get arcLength(): number;
+}