refactor(editor): add gfx entry in bs global package (#10612)

blocksuite/framework/global/src/gfx/model/bound.ts

@@ -0,0 +1,366 @@
+import { EPSILON, lineIntersects, polygonPointDistance } from '../math.js';
+import type { SerializedXYWH, XYWH } from '../xywh.js';
+import { deserializeXYWH, serializeXYWH } from '../xywh.js';
+import { type IVec, Vec } from './vec.js';
+
+export function getIBoundFromPoints(
+  points: IVec[],
+  rotation = 0
+): IBound & {
+  maxX: number;
+  maxY: number;
+  minX: number;
+  minY: number;
+} {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  if (points.length < 1) {
+    minX = 0;
+    minY = 0;
+    maxX = 1;
+    maxY = 1;
+  } else {
+    for (const [x, y] of points) {
+      minX = Math.min(x, minX);
+      minY = Math.min(y, minY);
+      maxX = Math.max(x, maxX);
+      maxY = Math.max(y, maxY);
+    }
+  }
+
+  if (rotation !== 0) {
+    return getIBoundFromPoints(
+      points.map(pt =>
+        Vec.rotWith(pt, [(minX + maxX) / 2, (minY + maxY) / 2], rotation)
+      )
+    );
+  }
+
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    x: minX,
+    y: minY,
+    w: maxX - minX,
+    h: maxY - minY,
+  };
+}
+
+/**
+ * Represents the x, y, width, and height of a block that can be easily accessed.
+ */
+export interface IBound {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  rotate?: number;
+}
+
+export class Bound implements IBound {
+  h: number;
+
+  w: number;
+
+  x: number;
+
+  y: number;
+
+  get bl(): IVec {
+    return [this.x, this.y + this.h];
+  }
+
+  get br(): IVec {
+    return [this.x + this.w, this.y + this.h];
+  }
+
+  get center(): IVec {
+    return [this.x + this.w / 2, this.y + this.h / 2];
+  }
+
+  set center([cx, cy]: IVec) {
+    const [px, py] = this.center;
+    this.x += cx - px;
+    this.y += cy - py;
+  }
+
+  get horizontalLine(): IVec[] {
+    return [
+      [this.x, this.y + this.h / 2],
+      [this.x + this.w, this.y + this.h / 2],
+    ];
+  }
+
+  get leftLine(): IVec[] {
+    return [
+      [this.x, this.y],
+      [this.x, this.y + this.h],
+    ];
+  }
+
+  get lowerLine(): IVec[] {
+    return [
+      [this.x, this.y + this.h],
+      [this.x + this.w, this.y + this.h],
+    ];
+  }
+
+  get maxX() {
+    return this.x + this.w;
+  }
+
+  get maxY() {
+    return this.y + this.h;
+  }
+
+  get midPoints(): IVec[] {
+    return [
+      [this.x + this.w / 2, this.y],
+      [this.x + this.w, this.y + this.h / 2],
+      [this.x + this.w / 2, this.y + this.h],
+      [this.x, this.y + this.h / 2],
+    ];
+  }
+
+  get minX() {
+    return this.x;
+  }
+
+  get minY() {
+    return this.y;
+  }
+
+  get points(): IVec[] {
+    return [
+      [this.x, this.y],
+      [this.x + this.w, this.y],
+      [this.x + this.w, this.y + this.h],
+      [this.x, this.y + this.h],
+    ];
+  }
+
+  get rightLine(): IVec[] {
+    return [
+      [this.x + this.w, this.y],
+      [this.x + this.w, this.y + this.h],
+    ];
+  }
+
+  get tl(): IVec {
+    return [this.x, this.y];
+  }
+
+  get tr(): IVec {
+    return [this.x + this.w, this.y];
+  }
+
+  get upperLine(): IVec[] {
+    return [
+      [this.x, this.y],
+      [this.x + this.w, this.y],
+    ];
+  }
+
+  get verticalLine(): IVec[] {
+    return [
+      [this.x + this.w / 2, this.y],
+      [this.x + this.w / 2, this.y + this.h],
+    ];
+  }
+
+  constructor(x = 0, y = 0, w = 0, h = 0) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+    this.h = h;
+  }
+
+  static deserialize(s: string) {
+    const [x, y, w, h] = deserializeXYWH(s);
+    return new Bound(x, y, w, h);
+  }
+
+  static from(arg1: IBound) {
+    return new Bound(arg1.x, arg1.y, arg1.w, arg1.h);
+  }
+
+  static fromCenter(center: IVec, width: number, height: number) {
+    const [x, y] = center;
+    return new Bound(x - width / 2, y - height / 2, width, height);
+  }
+
+  static fromDOMRect({ left, top, width, height }: DOMRect) {
+    return new Bound(left, top, width, height);
+  }
+
+  static fromPoints(points: IVec[]) {
+    return Bound.from(getIBoundFromPoints(points));
+  }
+
+  static fromXYWH(xywh: XYWH) {
+    return new Bound(xywh[0], xywh[1], xywh[2], xywh[3]);
+  }
+
+  static serialize(bound: IBound) {
+    return serializeXYWH(bound.x, bound.y, bound.w, bound.h);
+  }
+
+  clone(): Bound {
+    return new Bound(this.x, this.y, this.w, this.h);
+  }
+
+  contains(bound: Bound) {
+    return (
+      bound.x >= this.x &&
+      bound.y >= this.y &&
+      bound.maxX <= this.maxX &&
+      bound.maxY <= this.maxY
+    );
+  }
+
+  containsPoint([x, y]: IVec): boolean {
+    const { minX, minY, maxX, maxY } = this;
+    return minX <= x && x <= maxX && minY <= y && y <= maxY;
+  }
+
+  expand(margin: [number, number]): Bound;
+  expand(left: number, top?: number, right?: number, bottom?: number): Bound;
+  expand(
+    left: number | [number, number],
+    top?: number,
+    right?: number,
+    bottom?: number
+  ) {
+    if (Array.isArray(left)) {
+      const [x, y] = left;
+      return new Bound(this.x - x, this.y - y, this.w + x * 2, this.h + y * 2);
+    }
+
+    top ??= left;
+    right ??= left;
+    bottom ??= top;
+
+    return new Bound(
+      this.x - left,
+      this.y - top,
+      this.w + left + right,
+      this.h + top + bottom
+    );
+  }
+
+  getRelativePoint([x, y]: IVec): IVec {
+    return [this.x + x * this.w, this.y + y * this.h];
+  }
+
+  getVerticesAndMidpoints() {
+    return [...this.points, ...this.midPoints];
+  }
+
+  horizontalDistance(bound: Bound) {
+    return Math.min(
+      Math.abs(this.minX - bound.maxX),
+      Math.abs(this.maxX - bound.minX)
+    );
+  }
+
+  include(point: IVec) {
+    const x1 = Math.min(this.x, point[0]),
+      y1 = Math.min(this.y, point[1]),
+      x2 = Math.max(this.maxX, point[0]),
+      y2 = Math.max(this.maxY, point[1]);
+    return new Bound(x1, y1, x2 - x1, y2 - y1);
+  }
+
+  intersectLine(sp: IVec, ep: IVec, infinite = false) {
+    const rst: IVec[] = [];
+    (
+      [
+        [this.tl, this.tr],
+        [this.tl, this.bl],
+        [this.tr, this.br],
+        [this.bl, this.br],
+      ] as IVec[][]
+    ).forEach(([p1, p2]) => {
+      const p = lineIntersects(sp, ep, p1, p2, infinite);
+      if (p) rst.push(p);
+    });
+    return rst.length === 0 ? null : rst;
+  }
+
+  isHorizontalCross(bound: Bound) {
+    return !(this.maxY < bound.minY || this.minY > bound.maxY);
+  }
+
+  isIntersectWithBound(bound: Bound, epsilon = EPSILON) {
+    return (
+      bound.maxX > this.minX - epsilon &&
+      bound.maxY > this.minY - epsilon &&
+      bound.minX < this.maxX + epsilon &&
+      bound.minY < this.maxY + epsilon &&
+      !this.contains(bound) &&
+      !bound.contains(this)
+    );
+  }
+
+  isOverlapWithBound(bound: Bound, epsilon = EPSILON) {
+    return (
+      bound.maxX > this.minX - epsilon &&
+      bound.maxY > this.minY - epsilon &&
+      bound.minX < this.maxX + epsilon &&
+      bound.minY < this.maxY + epsilon
+    );
+  }
+
+  isPointInBound([x, y]: IVec, tolerance = 0.01) {
+    return (
+      x > this.minX + tolerance &&
+      x < this.maxX - tolerance &&
+      y > this.minY + tolerance &&
+      y < this.maxY - tolerance
+    );
+  }
+
+  isPointNearBound([x, y]: IVec, tolerance = 0.01) {
+    return polygonPointDistance(this.points, [x, y]) < tolerance;
+  }
+
+  isVerticalCross(bound: Bound) {
+    return !(this.maxX < bound.minX || this.minX > bound.maxX);
+  }
+
+  moveDelta(dx: number, dy: number) {
+    return new Bound(this.x + dx, this.y + dy, this.w, this.h);
+  }
+
+  serialize(): SerializedXYWH {
+    return serializeXYWH(this.x, this.y, this.w, this.h);
+  }
+
+  toRelative([x, y]: IVec): IVec {
+    return [(x - this.x) / this.w, (y - this.y) / this.h];
+  }
+
+  toXYWH(): XYWH {
+    return [this.x, this.y, this.w, this.h];
+  }
+
+  unite(bound: Bound) {
+    const x1 = Math.min(this.x, bound.x),
+      y1 = Math.min(this.y, bound.y),
+      x2 = Math.max(this.maxX, bound.maxX),
+      y2 = Math.max(this.maxY, bound.maxY);
+    return new Bound(x1, y1, x2 - x1, y2 - y1);
+  }
+
+  verticalDistance(bound: Bound) {
+    return Math.min(
+      Math.abs(this.minY - bound.maxY),
+      Math.abs(this.maxY - bound.minY)
+    );
+  }
+}

blocksuite/framework/global/src/gfx/model/index.ts

@@ -0,0 +1,4 @@
+export * from './bound.js';
+export * from './point.js';
+export * from './point-location.js';
+export * from './vec.js';

blocksuite/framework/global/src/gfx/model/point-location.ts

@@ -0,0 +1,94 @@
+import { type IVec, Vec } from './vec.js';
+
+/**
+ * PointLocation is an implementation of IVec with in/out vectors and tangent.
+ * This is useful when dealing with path.
+ */
+export class PointLocation extends Array<number> implements IVec {
+  _in: IVec = [0, 0];
+
+  _out: IVec = [0, 0];
+
+  // the tangent belongs to the point on the element outline
+  _tangent: IVec = [0, 0];
+
+  [0]: number;
+
+  [1]: number;
+
+  get absIn() {
+    return Vec.add(this, this._in);
+  }
+
+  get absOut() {
+    return Vec.add(this, this._out);
+  }
+
+  get in() {
+    return this._in;
+  }
+
+  set in(value: IVec) {
+    this._in = value;
+  }
+
+  override get length() {
+    return super.length as 2;
+  }
+
+  get out() {
+    return this._out;
+  }
+
+  set out(value: IVec) {
+    this._out = value;
+  }
+
+  get tangent() {
+    return this._tangent;
+  }
+
+  set tangent(value: IVec) {
+    this._tangent = value;
+  }
+
+  constructor(
+    point: IVec = [0, 0],
+    tangent: IVec = [0, 0],
+    inVec: IVec = [0, 0],
+    outVec: IVec = [0, 0]
+  ) {
+    super(2);
+    this[0] = point[0];
+    this[1] = point[1];
+    this._tangent = tangent;
+    this._in = inVec;
+    this._out = outVec;
+  }
+
+  static fromVec(vec: IVec) {
+    const point = new PointLocation();
+    point[0] = vec[0];
+    point[1] = vec[1];
+    return point;
+  }
+
+  clone() {
+    return new PointLocation(
+      this as unknown as IVec,
+      this._tangent,
+      this._in,
+      this._out
+    );
+  }
+
+  setVec(vec: IVec) {
+    this[0] = vec[0];
+    this[1] = vec[1];
+    return this;
+  }
+
+  toVec(): IVec {
+    return [this[0], this[1]];
+  }
+}

blocksuite/framework/global/src/gfx/model/point.ts

@@ -0,0 +1,268 @@
+import { clamp } from '../math.js';
+
+export interface IPoint {
+  x: number;
+  y: number;
+}
+
+export class Point {
+  x: number;
+
+  y: number;
+
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+
+  /**
+   * Restrict a value to a certain interval.
+   */
+  static clamp(p: Point, min: Point, max: Point) {
+    return new Point(clamp(p.x, min.x, max.x), clamp(p.y, min.y, max.y));
+  }
+
+  static from(point: IPoint | number[] | number, y?: number) {
+    if (Array.isArray(point)) {
+      return new Point(point[0], point[1]);
+    }
+    if (typeof point === 'number') {
+      return new Point(point, y ?? point);
+    }
+    return new Point(point.x, point.y);
+  }
+
+  /**
+   * Compares and returns the maximum of two points.
+   */
+  static max(a: Point, b: Point) {
+    return new Point(Math.max(a.x, b.x), Math.max(a.y, b.y));
+  }
+
+  /**
+   * Compares and returns the minimum of two points.
+   */
+  static min(a: Point, b: Point) {
+    return new Point(Math.min(a.x, b.x), Math.min(a.y, b.y));
+  }
+
+  add(point: IPoint): Point {
+    return new Point(this.x + point.x, this.y + point.y);
+  }
+
+  /**
+   * Returns a copy of the point.
+   */
+  clone() {
+    return new Point(this.x, this.y);
+  }
+
+  cross(point: IPoint): number {
+    return this.x * point.y - this.y * point.x;
+  }
+
+  equals({ x, y }: Point) {
+    return this.x === x && this.y === y;
+  }
+
+  lerp(point: IPoint, t: number): Point {
+    return new Point(
+      this.x + (point.x - this.x) * t,
+      this.y + (point.y - this.y) * t
+    );
+  }
+
+  scale(factor: number): Point {
+    return new Point(this.x * factor, this.y * factor);
+  }
+
+  set(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+
+  subtract(point: IPoint): Point {
+    return new Point(this.x - point.x, this.y - point.y);
+  }
+
+  toArray() {
+    return [this.x, this.y];
+  }
+}
+
+export class Rect {
+  // `[right, bottom]`
+  max: Point;
+
+  // `[left, top]`
+  min: Point;
+
+  get bottom() {
+    return this.max.y;
+  }
+
+  set bottom(y: number) {
+    this.max.y = y;
+  }
+
+  get height() {
+    return this.max.y - this.min.y;
+  }
+
+  set height(h: number) {
+    this.max.y = this.min.y + h;
+  }
+
+  get left() {
+    return this.min.x;
+  }
+
+  set left(x: number) {
+    this.min.x = x;
+  }
+
+  get right() {
+    return this.max.x;
+  }
+
+  set right(x: number) {
+    this.max.x = x;
+  }
+
+  get top() {
+    return this.min.y;
+  }
+
+  set top(y: number) {
+    this.min.y = y;
+  }
+
+  get width() {
+    return this.max.x - this.min.x;
+  }
+
+  set width(w: number) {
+    this.max.x = this.min.x + w;
+  }
+
+  constructor(left: number, top: number, right: number, bottom: number) {
+    const [minX, maxX] = left <= right ? [left, right] : [right, left];
+    const [minY, maxY] = top <= bottom ? [top, bottom] : [bottom, top];
+    this.min = new Point(minX, minY);
+    this.max = new Point(maxX, maxY);
+  }
+
+  static fromDOM(dom: Element) {
+    return Rect.fromDOMRect(dom.getBoundingClientRect());
+  }
+
+  static fromDOMRect({ left, top, right, bottom }: DOMRect) {
+    return Rect.fromLTRB(left, top, right, bottom);
+  }
+
+  static fromLTRB(left: number, top: number, right: number, bottom: number) {
+    return new Rect(left, top, right, bottom);
+  }
+
+  static fromLWTH(left: number, width: number, top: number, height: number) {
+    return new Rect(left, top, left + width, top + height);
+  }
+
+  static fromPoint(point: Point) {
+    return Rect.fromPoints(point.clone(), point);
+  }
+
+  static fromPoints(start: Point, end: Point) {
+    const width = Math.abs(end.x - start.x);
+    const height = Math.abs(end.y - start.y);
+    const left = Math.min(end.x, start.x);
+    const top = Math.min(end.y, start.y);
+    return Rect.fromLWTH(left, width, top, height);
+  }
+
+  static fromXY(x: number, y: number) {
+    return Rect.fromPoint(new Point(x, y));
+  }
+
+  center() {
+    return new Point(
+      (this.left + this.right) / 2,
+      (this.top + this.bottom) / 2
+    );
+  }
+
+  clamp(p: Point) {
+    return Point.clamp(p, this.min, this.max);
+  }
+
+  clone() {
+    const { left, top, right, bottom } = this;
+    return new Rect(left, top, right, bottom);
+  }
+
+  contains({ min, max }: Rect) {
+    return this.isPointIn(min) && this.isPointIn(max);
+  }
+
+  equals({ min, max }: Rect) {
+    return this.min.equals(min) && this.max.equals(max);
+  }
+
+  extend_with(point: Point) {
+    this.min = Point.min(this.min, point);
+    this.max = Point.max(this.max, point);
+  }
+
+  extend_with_x(x: number) {
+    this.min.x = Math.min(this.min.x, x);
+    this.max.x = Math.max(this.max.x, x);
+  }
+
+  extend_with_y(y: number) {
+    this.min.y = Math.min(this.min.y, y);
+    this.max.y = Math.max(this.max.y, y);
+  }
+
+  intersect(other: Rect) {
+    return Rect.fromPoints(
+      Point.max(this.min, other.min),
+      Point.min(this.max, other.max)
+    );
+  }
+
+  intersects({ left, top, right, bottom }: Rect) {
+    return (
+      this.left <= right &&
+      left <= this.right &&
+      this.top <= bottom &&
+      top <= this.bottom
+    );
+  }
+
+  isPointDown({ x, y }: Point) {
+    return this.bottom < y && this.left <= x && this.right >= x;
+  }
+
+  isPointIn({ x, y }: Point) {
+    return (
+      this.left <= x && x <= this.right && this.top <= y && y <= this.bottom
+    );
+  }
+
+  isPointLeft({ x, y }: Point) {
+    return x < this.left && this.top <= y && this.bottom >= y;
+  }
+
+  isPointRight({ x, y }: Point) {
+    return x > this.right && this.top <= y && this.bottom >= y;
+  }
+
+  isPointUp({ x, y }: Point) {
+    return y < this.top && this.left <= x && this.right >= x;
+  }
+
+  toDOMRect() {
+    const { left, top, width, height } = this;
+    return new DOMRect(left, top, width, height);
+  }
+}

blocksuite/framework/global/src/gfx/model/vec.ts

@@ -0,0 +1,599 @@
+// Inlined from https://raw.githubusercontent.com/tldraw/tldraw/24cad6959f59f93e20e556d018c391fd89d4ecca/packages/vec/src/index.ts
+// Credits to tldraw
+
+export type IVec = [number, number];
+
+export type IVec3 = [number, number, number];
+
+export class Vec {
+  /**
+   * Absolute value of a vector.
+   * @param A
+   * @returns
+   */
+  static abs = (A: number[]): number[] => {
+    return [Math.abs(A[0]), Math.abs(A[1])];
+  };
+
+  /**
+   * Add vectors.
+   * @param A
+   * @param B
+   */
+  static add = (A: number[], B: number[]): IVec => {
+    return [A[0] + B[0], A[1] + B[1]];
+  };
+
+  /**
+   * Add scalar to vector.
+   * @param A
+   * @param B
+   */
+  static addScalar = (A: number[], n: number): IVec => {
+    return [A[0] + n, A[1] + n];
+  };
+
+  /**
+   * Angle between vector A and vector B in radians
+   * @param A
+   * @param B
+   */
+  static ang = (A: number[], B: number[]): number => {
+    return Math.atan2(Vec.cpr(A, B), Vec.dpr(A, B));
+  };
+
+  /**
+   * Get the angle between the three vectors A, B, and C.
+   * @param p1
+   * @param pc
+   * @param p2
+   */
+  static ang3 = (p1: IVec, pc: IVec, p2: IVec): number => {
+    // this,
+    const v1 = Vec.vec(pc, p1);
+    const v2 = Vec.vec(pc, p2);
+    return Vec.ang(v1, v2);
+  };
+
+  /**
+   * Angle between vector A and vector B in radians
+   * @param A
+   * @param B
+   */
+  static angle = (A: IVec, B: IVec): number => {
+    return Math.atan2(B[1] - A[1], B[0] - A[0]);
+  };
+
+  /**
+   * Get whether p1 is left of p2, relative to pc.
+   * @param p1
+   * @param pc
+   * @param p2
+   */
+  static clockwise = (p1: number[], pc: number[], p2: number[]): boolean => {
+    return Vec.isLeft(p1, pc, p2) > 0;
+  };
+
+  /**
+   * Cross product (outer product) | A X B |
+   * @param A
+   * @param B
+   */
+  static cpr = (A: number[], B: number[]): number => {
+    return A[0] * B[1] - B[0] * A[1];
+  };
+
+  /**
+   * Dist length from A to B
+   * @param A
+   * @param B
+   */
+  static dist = (A: number[], B: number[]): number => {
+    return Math.hypot(A[1] - B[1], A[0] - B[0]);
+  };
+
+  /**
+   * Dist length from A to B squared.
+   * @param A
+   * @param B
+   */
+  static dist2 = (A: IVec, B: IVec): number => {
+    return Vec.len2(Vec.sub(A, B));
+  };
+
+  /**
+   * Distance between a point and the nearest point on a bounding box.
+   * @param bounds The bounding box.
+   * @param P The point
+   * @returns
+   */
+  static distanceToBounds = (
+    bounds: {
+      minX: number;
+      minY: number;
+      maxX: number;
+      maxY: number;
+    },
+    P: number[]
+  ): number => {
+    return Vec.dist(P, Vec.nearestPointOnBounds(bounds, P));
+  };
+
+  /**
+   * Distance between a point and the nearest point on a line segment between A and B
+   * @param A The start of the line segment
+   * @param B The end of the line segment
+   * @param P The off-line point
+   * @param clamp Whether to clamp the point between A and B.
+   * @returns
+   */
+  static distanceToLineSegment = (
+    A: IVec,
+    B: IVec,
+    P: IVec,
+    clamp = true
+  ): number => {
+    return Vec.dist(P, Vec.nearestPointOnLineSegment(A, B, P, clamp));
+  };
+
+  /**
+   * Distance between a point and a line with a known unit vector that passes through a point.
+   * @param A Any point on the line
+   * @param u The unit vector for the line.
+   * @param P A point not on the line to test.
+   * @returns
+   */
+  static distanceToLineThroughPoint = (A: IVec, u: IVec, P: IVec): number => {
+    return Vec.dist(P, Vec.nearestPointOnLineThroughPoint(A, u, P));
+  };
+
+  /**
+   * Vector division by scalar.
+   * @param A
+   * @param n
+   */
+  static div = (A: IVec, n: number): IVec => {
+    return [A[0] / n, A[1] / n];
+  };
+
+  /**
+   * Vector division by vector.
+   * @param A
+   * @param n
+   */
+  static divV = (A: IVec, B: IVec): IVec => {
+    return [A[0] / B[0], A[1] / B[1]];
+  };
+
+  /**
+   * Dot product
+   * @param A
+   * @param B
+   */
+  static dpr = (A: number[], B: number[]): number => {
+    return A[0] * B[0] + A[1] * B[1];
+  };
+
+  /**
+   * A faster, though less accurate method for testing distances. Maybe faster?
+   * @param A
+   * @param B
+   * @returns
+   */
+  static fastDist = (A: number[], B: number[]): number[] => {
+    const V = [B[0] - A[0], B[1] - A[1]];
+    const aV = [Math.abs(V[0]), Math.abs(V[1])];
+    let r = 1 / Math.max(aV[0], aV[1]);
+    r = r * (1.29289 - (aV[0] + aV[1]) * r * 0.29289);
+    return [V[0] * r, V[1] * r];
+  };
+
+  /**
+   * Interpolate from A to B when curVAL goes fromVAL: number[] => to
+   * @param A
+   * @param B
+   * @param from Starting value
+   * @param to Ending value
+   * @param s Strength
+   */
+  static int = (A: IVec, B: IVec, from: number, to: number, s = 1): IVec => {
+    const t = (Vec.clamp(from, to) - from) / (to - from);
+    return Vec.add(Vec.mul(A, 1 - t), Vec.mul(B, s));
+  };
+
+  /**
+   * Check of two vectors are identical.
+   * @param A
+   * @param B
+   */
+  static isEqual = (A: number[], B: number[]): boolean => {
+    return A[0] === B[0] && A[1] === B[1];
+  };
+
+  /**
+   * Get whether p1 is left of p2, relative to pc.
+   * @param p1
+   * @param pc
+   * @param p2
+   */
+  static isLeft = (p1: number[], pc: number[], p2: number[]): number => {
+    //  isLeft: >0 for counterclockwise
+    //          =0 for none (degenerate)
+    //          <0 for clockwise
+    return (
+      (pc[0] - p1[0]) * (p2[1] - p1[1]) - (p2[0] - p1[0]) * (pc[1] - p1[1])
+    );
+  };
+
+  /**
+   * Length of the vector
+   * @param A
+   */
+  static len = (A: number[]): number => {
+    return Math.hypot(A[0], A[1]);
+  };
+
+  /**
+   * Length of the vector squared
+   * @param A
+   */
+  static len2 = (A: number[]): number => {
+    return A[0] * A[0] + A[1] * A[1];
+  };
+
+  /**
+   * Interpolate vector A to B with a scalar t
+   * @param A
+   * @param B
+   * @param t scalar
+   */
+  static lrp = (A: IVec, B: IVec, t: number): IVec => {
+    return Vec.add(A, Vec.mul(Vec.sub(B, A), t));
+  };
+
+  /**
+   * Get a vector comprised of the maximum of two or more vectors.
+   */
+  static max = (...v: number[][]) => {
+    return [Math.max(...v.map(a => a[0])), Math.max(...v.map(a => a[1]))];
+  };
+
+  /**
+   * Mean between two vectors or mid vector between two vectors
+   * @param A
+   * @param B
+   */
+  static med = (A: IVec, B: IVec): IVec => {
+    return Vec.mul(Vec.add(A, B), 0.5);
+  };
+
+  /**
+   * Get a vector comprised of the minimum of two or more vectors.
+   */
+  static min = (...v: number[][]) => {
+    return [Math.min(...v.map(a => a[0])), Math.min(...v.map(a => a[1]))];
+  };
+
+  /**
+   * Vector multiplication by scalar
+   * @param A
+   * @param n
+   */
+  static mul = (A: IVec, n: number): IVec => {
+    return [A[0] * n, A[1] * n];
+  };
+
+  /**
+   * Multiple two vectors.
+   * @param A
+   * @param B
+   */
+  static mulV = (A: IVec, B: IVec): IVec => {
+    return [A[0] * B[0], A[1] * B[1]];
+  };
+
+  /**
+   * Get the nearest point on a bounding box to a point P.
+   * @param bounds The bounding box
+   * @param P The point point
+   * @returns
+   */
+  static nearestPointOnBounds = (
+    bounds: {
+      minX: number;
+      minY: number;
+      maxX: number;
+      maxY: number;
+    },
+    P: number[]
+  ): number[] => {
+    return [
+      Vec.clamp(P[0], bounds.minX, bounds.maxX),
+      Vec.clamp(P[1], bounds.minY, bounds.maxY),
+    ];
+  };
+
+  /**
+   * Get the nearest point on a line segment between A and B
+   * @param A The start of the line segment
+   * @param B The end of the line segment
+   * @param P The off-line point
+   * @param clamp Whether to clamp the point between A and B.
+   * @returns
+   */
+  static nearestPointOnLineSegment = (
+    A: IVec,
+    B: IVec,
+    P: IVec,
+    clamp = true
+  ): IVec => {
+    const u = Vec.uni(Vec.sub(B, A));
+    const C = Vec.add(A, Vec.mul(u, Vec.pry(Vec.sub(P, A), u)));
+
+    if (clamp) {
+      if (C[0] < Math.min(A[0], B[0])) return A[0] < B[0] ? A : B;
+      if (C[0] > Math.max(A[0], B[0])) return A[0] > B[0] ? A : B;
+      if (C[1] < Math.min(A[1], B[1])) return A[1] < B[1] ? A : B;
+      if (C[1] > Math.max(A[1], B[1])) return A[1] > B[1] ? A : B;
+    }
+
+    return C;
+  };
+
+  /**
+   * Get the nearest point on a line with a known unit vector that passes through point A
+   * @param A Any point on the line
+   * @param u The unit vector for the line.
+   * @param P A point not on the line to test.
+   * @returns
+   */
+  static nearestPointOnLineThroughPoint = (A: IVec, u: IVec, P: IVec): IVec => {
+    return Vec.add(A, Vec.mul(u, Vec.pry(Vec.sub(P, A), u)));
+  };
+
+  /**
+   * Negate a vector.
+   * @param A
+   */
+  static neg = (A: number[]): number[] => {
+    return [-A[0], -A[1]];
+  };
+
+  /**
+   * Get normalized / unit vector.
+   * @param A
+   */
+  static normalize = (A: IVec): IVec => {
+    return Vec.uni(A);
+  };
+
+  /**
+   * Push a point A towards point B by a given distance.
+   * @param A
+   * @param B
+   * @param d
+   * @returns
+   */
+  static nudge = (A: IVec, B: IVec, d: number): number[] => {
+    if (Vec.isEqual(A, B)) return A;
+    return Vec.add(A, Vec.mul(Vec.uni(Vec.sub(B, A)), d));
+  };
+
+  /**
+   * Push a point in a given angle by a given distance.
+   * @param A
+   * @param B
+   * @param d
+   */
+  static nudgeAtAngle = (A: number[], a: number, d: number): number[] => {
+    return [Math.cos(a) * d + A[0], Math.sin(a) * d + A[1]];
+  };
+
+  /**
+   * Perpendicular rotation of a vector A
+   * @param A
+   */
+  static per = (A: IVec): IVec => {
+    return [A[1], -A[0]];
+  };
+
+  static pointOffset = (A: IVec, B: IVec, offset: number): IVec => {
+    let u = Vec.uni(Vec.sub(B, A));
+    if (Vec.isEqual(A, B)) u = A;
+    return Vec.add(A, Vec.mul(u, offset));
+  };
+
+  /**
+   * Get an array of points between two points.
+   * @param A The first point.
+   * @param B The second point.
+   * @param steps The number of points to return.
+   */
+  static pointsBetween = (A: IVec, B: IVec, steps = 6): number[][] => {
+    return Array.from({ length: steps }).map((_, i) => {
+      const t = i / (steps - 1);
+      const k = Math.min(1, 0.5 + Math.abs(0.5 - t));
+      return [...Vec.lrp(A, B, t), k];
+    });
+  };
+
+  /**
+   * Project A over B
+   * @param A
+   * @param B
+   */
+  static pry = (A: number[], B: number[]): number => {
+    return Vec.dpr(A, B) / Vec.len(B);
+  };
+
+  static rescale = (a: number[], n: number): number[] => {
+    const l = Vec.len(a);
+    return [(n * a[0]) / l, (n * a[1]) / l];
+  };
+
+  /**
+   * Vector rotation by r (radians)
+   * @param A
+   * @param r rotation in radians
+   */
+  static rot = (A: number[], r = 0): IVec => {
+    return [
+      A[0] * Math.cos(r) - A[1] * Math.sin(r),
+      A[0] * Math.sin(r) + A[1] * Math.cos(r),
+    ];
+  };
+
+  /**
+   * Rotate a vector around another vector by r (radians)
+   * @param A vector
+   * @param C center
+   * @param r rotation in radians
+   */
+  static rotWith = (A: IVec, C: IVec, r = 0): IVec => {
+    if (r === 0) return A;
+
+    const s = Math.sin(r);
+    const c = Math.cos(r);
+
+    const px = A[0] - C[0];
+    const py = A[1] - C[1];
+
+    const nx = px * c - py * s;
+    const ny = px * s + py * c;
+
+    return [nx + C[0], ny + C[1]];
+  };
+
+  /**
+   * Get the slope between two points.
+   * @param A
+   * @param B
+   */
+  static slope = (A: number[], B: number[]) => {
+    if (A[0] === B[0]) return NaN;
+    return (A[1] - B[1]) / (A[0] - B[0]);
+  };
+
+  /**
+   * Subtract vectors.
+   * @param A
+   * @param B
+   */
+  static sub = (A: IVec, B: IVec): IVec => {
+    return [A[0] - B[0], A[1] - B[1]];
+  };
+
+  /**
+   * Subtract scalar from vector.
+   * @param A
+   * @param B
+   */
+  static subScalar = (A: IVec, n: number): IVec => {
+    return [A[0] - n, A[1] - n];
+  };
+
+  /**
+   * Get the tangent between two vectors.
+   * @param A
+   * @param B
+   * @returns
+   */
+  static tangent = (A: IVec, B: IVec): IVec => {
+    return Vec.uni(Vec.sub(A, B));
+  };
+
+  /**
+   * Round a vector to two decimal places.
+   * @param a
+   */
+  static toFixed = (a: number[]): number[] => {
+    return a.map(v => Math.round(v * 100) / 100);
+  };
+
+  static toPoint = (v: IVec) => {
+    return {
+      x: v[0],
+      y: v[1],
+    };
+  };
+
+  /**
+   * Round a vector to a precision length.
+   * @param a
+   * @param n
+   */
+  static toPrecision = (a: number[], n = 4): number[] => {
+    return [+a[0].toPrecision(n), +a[1].toPrecision(n)];
+  };
+
+  static toVec = (v: { x: number; y: number }): IVec => [v.x, v.y];
+
+  /**
+   * Get normalized / unit vector.
+   * @param A
+   */
+  static uni = (A: IVec): IVec => {
+    return Vec.div(A, Vec.len(A));
+  };
+
+  /**
+   * Get the vector from vectors A to B.
+   * @param A
+   * @param B
+   */
+  static vec = (A: IVec, B: IVec): IVec => {
+    // A, B as vectors get the vector from A to B
+    return [B[0] - A[0], B[1] - A[1]];
+  };
+
+  /**
+   * Clamp a value into a range.
+   * @param n
+   * @param min
+   */
+  static clamp(n: number, min: number): number;
+
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  static clamp(n: number, min: number, max: number): number;
+
+  static clamp(n: number, min: number, max?: number): number {
+    return Math.max(min, max !== undefined ? Math.min(n, max) : n);
+  }
+
+  /**
+   * Clamp a value into a range.
+   * @param n
+   * @param min
+   */
+  static clampV(A: number[], min: number): number[];
+
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  static clampV(A: number[], min: number, max: number): number[];
+
+  static clampV(A: number[], min: number, max?: number): number[] {
+    return A.map(n =>
+      max !== undefined ? Vec.clamp(n, min, max) : Vec.clamp(n, min)
+    );
+  }
+
+  /**
+   * Cross (for point in polygon)
+   *
+   */
+  static cross(x: number[], y: number[], z: number[]): number {
+    return (y[0] - x[0]) * (z[1] - x[1]) - (z[0] - x[0]) * (y[1] - x[1]);
+  }
+
+  /**
+   * Snap vector to nearest step.
+   * @param A
+   * @param step
+   * @example
+   * ```ts
+   * Vec.snap([10.5, 28], 10) // [10, 30]
+   * ```
+   */
+  static snap(a: number[], step = 1) {
+    return [Math.round(a[0] / step) * step, Math.round(a[1] / step) * step];
+  }
+}