@twick/2d 0.13.0 → 0.14.2

package/src/lib/curves/CircleSegment.ts

@@ -1,77 +1,77 @@
-import {Vector2, clamp} from '@twick/core';
-import type {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,
-    };
-  }
-}
+import {Vector2, clamp} from '@twick/core';
+import type {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

@@ -1,78 +1,78 @@
-import {Vector2, lazy} from '@twick/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();
-  }
-}
+import {Vector2, lazy} from '@twick/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

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

package/src/lib/curves/CurvePoint.ts

@@ -1,15 +1,15 @@
-import type {Vector2} from '@twick/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;
-}
+import type {Vector2} from '@twick/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

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

package/src/lib/curves/KnotInfo.ts

@@ -1,10 +1,10 @@
-import type {Vector2} from '@twick/core';
-
-export type KnotAutoHandles = {start: number; end: number};
-
-export interface KnotInfo {
-  position: Vector2;
-  startHandle: Vector2;
-  endHandle: Vector2;
-  auto: KnotAutoHandles;
-}
+import type {Vector2} from '@twick/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

@@ -1,62 +1,62 @@
-import type {Vector2} from '@twick/core';
-import {lineTo, moveTo} from '../utils';
-import type {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,
-    };
-  }
-}
+import type {Vector2} from '@twick/core';
+import {lineTo, moveTo} from '../utils';
+import type {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,
+    };
+  }
+}