@lazlon-platform/html-editor 0.4.0 → 0.6.0

package/lib/model/geometry/math.ts

@@ -0,0 +1,623 @@
+export type Deg = number & { readonly __unit: "degrees" }
+export type Rad = number & { readonly __unit: "radians" }
+export type Edge = "n" | "s" | "w" | "e"
+export type Corner = "ne" | "nw" | "se" | "sw"
+
+export interface Point {
+  readonly x: number
+  readonly y: number
+}
+
+export interface Size {
+  readonly width: number
+  readonly height: number
+}
+
+export interface Rect extends Point, Size {
+  readonly top: number
+  readonly bottom: number
+  readonly left: number
+  readonly right: number
+}
+
+export interface Line extends Point {
+  readonly points: Point[]
+  readonly strokeWidth: number
+}
+
+/**
+ * A rotated rectangle around a pivot point.
+ * Pivot point is relative to the center point.
+ */
+export interface Box extends Size {
+  readonly center: Point
+  readonly rotation: Deg
+  readonly pivot: Point
+}
+
+/**
+ * Cast a number to a degree value.
+ */
+export function deg(deg: number): Deg {
+  return (deg % 360) as Deg
+}
+
+/**
+ * Cast a number to a radian value.
+ */
+export function rad(rad: number): Rad {
+  return rad as Rad
+}
+
+/**
+ * Create a point.
+ */
+export function point(p?: Partial<Point>): Point {
+  return { x: p?.x ?? 0, y: p?.y ?? 0 }
+}
+
+/**
+ * Create a rectangle around the given points and rectangles.
+ */
+export function rect(...args: Array<(Point & Size) | Point>): Rect {
+  const points: Point[] = args.flatMap((arg) =>
+    "width" in arg && "height" in arg ? rectCorners(arg) : arg,
+  )
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const p of points) {
+    if (p.x < minX) minX = p.x
+    if (p.y < minY) minY = p.y
+    if (p.x > maxX) maxX = p.x
+    if (p.y > maxY) maxY = p.y
+  }
+
+  const rect = {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  }
+
+  return {
+    ...rect,
+    top: rect.y,
+    bottom: rect.y + rect.height,
+    left: rect.x,
+    right: rect.x + rect.width,
+  }
+}
+
+/**
+ * Create a rotatable box for a rectangle
+ */
+export function box(input?: Size & Point & { rotation?: Deg }): Box {
+  return {
+    center: rectCenter(input ?? rect()),
+    rotation: input?.rotation ?? deg(0),
+    pivot: rectCenter(input ?? rect()),
+    width: input?.width ?? 0,
+    height: input?.height ?? 0,
+  }
+}
+
+/**
+ * @returns Four corners of a rectangle.
+ * ●───●
+ * │   │
+ * ●───●
+ */
+export function rectCorners(rect: Size & Point): [Point, Point, Point, Point] {
+  const top = rect.y
+  const bottom = rect.y + rect.height
+  const left = rect.x
+  const right = rect.x + rect.width
+  return [
+    { y: top, x: left },
+    { y: top, x: right },
+    { y: bottom, x: right },
+    { y: bottom, x: left },
+  ]
+}
+
+/**
+ * @returns Center point of a rectangle.
+ * ┌─────┐
+ * │  ●C │
+ * └─────┘
+ */
+export function rectCenter({ x, y, width, height }: Size & Point): Point {
+  return {
+    x: x + width / 2,
+    y: y + height / 2,
+  }
+}
+
+/**
+ * @returns Rotate a point relative to a pivot point.
+ *
+ * @example
+ * ```
+ * P = (0,0)
+ * A = (2,0)
+ *
+ * rotate(A, P, 90)
+ * -> A' = (0,2)
+ * ```
+ *
+ * A
+ * ●
+ * │
+ * │ 90°
+ * ●─────● A'
+ * P
+ */
+export function rotatePoint(p: Point, pivot: Point, deg: Deg): Point {
+  const rad = (deg * Math.PI) / 180
+  const cos = Math.cos(rad)
+  const sin = Math.sin(rad)
+  const dx = p.x - pivot.x
+  const dy = p.y - pivot.y
+
+  return {
+    x: pivot.x + dx * cos - dy * sin,
+    y: pivot.y + dx * sin + dy * cos,
+  }
+}
+
+/**
+ * @returns Axis-aligned bounding box (AABB) of the rotated rectangle.
+ * ⠀▁▁▁▁
+ * 🭵 ╱🯒🯓🭰
+ * 🭵╱  ╱🭰
+ * 🭵🯒🯓╱ 🭰
+ * ⠀▔▔▔▔
+ */
+export function boxBounds(...boxes: Box[]): Rect {
+  const points = boxes.flatMap((box) => {
+    const corners = rectCorners({
+      x: box.center.x - box.width / 2,
+      y: box.center.y - box.height / 2,
+      width: box.width,
+      height: box.height,
+    })
+
+    return corners.map((corner) => {
+      return rotatePoint(corner, box.pivot, box.rotation)
+    })
+  })
+
+  return rect(...points)
+}
+
+/**
+ * @returns Distance between two points.
+ *
+ * ●
+ * ⠀╲
+ * ⠀⠀●
+ */
+export function pointDist(a: Point, b: Point): number {
+  const dx = a.x - b.x
+  const dy = a.y - b.y
+  return Math.hypot(dx, dy)
+}
+
+/**
+ * Subtract point `b` from point `a`.
+ * b● ────▶ ●a
+ */
+export function pointSubtract(a: Point, b: Point): Point {
+  return {
+    x: a.x - b.x,
+    y: a.y - b.y,
+  }
+}
+
+/**
+ * Add point `b` to point `a`
+ *
+ * a● ────▶ ●b
+ */
+export function pointAdd(a: Point, b: Point): Point {
+  return {
+    x: a.x + b.x,
+    y: a.y + b.y,
+  }
+}
+
+/**
+ * Multiply a point by a scalar.
+ *
+ * ●──▶ p
+ * ●──────▶ p * n
+ */
+export function pointMultiply(p: Point, n: number): Point {
+  return {
+    x: p.x * n,
+    y: p.y * n,
+  }
+}
+
+/**
+ * Normalize a point as a vector from the origin.
+ *
+ * ●────────▶ p
+ * ●──▶ norm(p)
+ */
+export function pointNorm(p: Point): Point {
+  const d = Math.hypot(p.x, p.y)
+  return {
+    x: d === 0 ? 0 : p.x / d,
+    y: d === 0 ? 0 : p.y / d,
+  }
+}
+
+/**
+ * Compute the dot product of two points as vectors.
+ *
+ *  B●
+ *  ╱
+ * ╱
+ * ▔▔▔▔▔●A
+ */
+export function vectorDotProd(a: Point, b: Point): number {
+  return a.x * b.x + a.y * b.y
+}
+
+/**
+ * Clamp a number between inclusive lower and upper bounds.
+ */
+export function clamp(n: number, lo: number, hi: number) {
+  return Math.max(lo, Math.min(hi, n))
+}
+
+/**
+ * Round tiny floating point noise to zero and limit precision.
+ * @example
+ * ```
+ * 0.00000000001 ->  0
+ * 1.23456 -> 1.235
+ * 10 -> 10
+ * ```
+ */
+export function floatNorm(v: number): number {
+  return Math.abs(v) < 1e-10 ? 0 : +v.toFixed(3)
+}
+
+/**
+ * Convert radians to degrees.
+ *
+ * ```text
+ * π rad = 180°
+ * ```
+ */
+export function radToDeg(rad: Rad): Deg {
+  return deg((rad * 180) / Math.PI)
+}
+
+/**
+ * @example
+ * ```ts
+ * C = (0,0)
+ * A = (0,2)
+ * B = (2,0)
+ * angle(C, A, B) // 90
+ * ```
+ * A
+ * ●
+ * │
+ * │ 90°
+ * ●─────● B
+ * C
+ */
+export function angle(center: Point, a: Point, b: Point): Deg {
+  const angA = radToDeg(rad(Math.atan2(a.y - center.y, a.x - center.x)))
+  const angB = radToDeg(rad(Math.atan2(b.y - center.y, b.x - center.x)))
+  return deg(Math.round(((((angA + angB + 180) % 360) + 360) % 360) - 180))
+}
+
+/**
+ * @returns Unrotated rectangle for box
+ */
+export function boxRect(box: Box): Rect {
+  return rect({
+    x: box.center.x - box.width / 2,
+    y: box.center.y - box.height / 2,
+    width: box.width,
+    height: box.height,
+  })
+}
+
+/**
+ * @returns Whether point is contained in box.
+ * @example
+ * ┌──┐
+ * │ ●│
+ * └──┘
+ */
+export function boxContainsPoint(target: Box, point: Point): boolean {
+  const p = rotatePoint(point, target.pivot, deg(-target.rotation))
+  const r = boxRect(target)
+  const x = floatNorm(p.x)
+  const y = floatNorm(p.y)
+
+  return (
+    x >= floatNorm(r.left) &&
+    x <= floatNorm(r.right) &&
+    y >= floatNorm(r.top) &&
+    y <= floatNorm(r.bottom)
+  )
+}
+
+function pointSegmentDistance(target: Point, a: Point, b: Point): number {
+  const segment = pointSubtract(b, a)
+  const lengthSq = vectorDotProd(segment, segment)
+
+  if (lengthSq === 0) {
+    return pointDist(target, a)
+  }
+
+  const fromStart = pointSubtract(target, a)
+  const projection = clamp(vectorDotProd(fromStart, segment) / lengthSq, 0, 1)
+  const closest = pointAdd(a, pointMultiply(segment, projection))
+
+  return pointDist(target, closest)
+}
+
+function segmentCross(a: Point, b: Point, c: Point): number {
+  return floatNorm((b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x))
+}
+
+function pointOnSegment(target: Point, a: Point, b: Point): boolean {
+  const x = floatNorm(target.x)
+  const y = floatNorm(target.y)
+
+  return (
+    segmentCross(a, b, target) === 0 &&
+    x >= floatNorm(Math.min(a.x, b.x)) &&
+    x <= floatNorm(Math.max(a.x, b.x)) &&
+    y >= floatNorm(Math.min(a.y, b.y)) &&
+    y <= floatNorm(Math.max(a.y, b.y))
+  )
+}
+
+function segmentsIntersect(a: Point, b: Point, c: Point, d: Point): boolean {
+  const abc = segmentCross(a, b, c)
+  const abd = segmentCross(a, b, d)
+  const cda = segmentCross(c, d, a)
+  const cdb = segmentCross(c, d, b)
+
+  return (
+    (abc === 0 && pointOnSegment(c, a, b)) ||
+    (abd === 0 && pointOnSegment(d, a, b)) ||
+    (cda === 0 && pointOnSegment(a, c, d)) ||
+    (cdb === 0 && pointOnSegment(b, c, d)) ||
+    (abc * abd < 0 && cda * cdb < 0)
+  )
+}
+
+function segmentDistance(a: Point, b: Point, c: Point, d: Point): number {
+  if (segmentsIntersect(a, b, c, d)) return 0
+
+  return Math.min(
+    pointSegmentDistance(a, c, d),
+    pointSegmentDistance(b, c, d),
+    pointSegmentDistance(c, a, b),
+    pointSegmentDistance(d, a, b),
+  )
+}
+
+function linePoints(line: Line): Point[] {
+  return line.points.map((p) => pointAdd(line, p))
+}
+
+/**
+ * @returns Whether point is contained in the stroked polyline.
+ */
+export function lineContainsPoint(line: Line, point: Point): boolean {
+  const points = linePoints(line)
+  const radius = line.strokeWidth / 2
+
+  if (points.length === 1) {
+    return pointDist(point, points[0]) <= radius
+  }
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i]
+    const b = points[i + 1]
+
+    if (pointSegmentDistance(point, a, b) <= radius) return true
+  }
+
+  return false
+}
+
+/**
+ * @returns Whether the stroked polyline intersects the box.
+ */
+export function lineIntersectsBox(line: Line, box: Box): boolean {
+  const points = linePoints(line)
+
+  if (points.length === 0) return false
+
+  for (const point of points) {
+    if (boxContainsPoint(box, point)) return true
+  }
+
+  const radius = line.strokeWidth / 2
+  const corners = boxCorners(box)
+  const edges = corners.map(
+    (corner, i) => [corner, corners[(i + 1) % corners.length]] as const,
+  )
+
+  for (const corner of corners) {
+    if (lineContainsPoint(line, corner)) return true
+  }
+
+  if (points.length === 1) {
+    return edges.some(([a, b]) => pointSegmentDistance(points[0], a, b) <= radius)
+  }
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i]
+    const b = points[i + 1]
+
+    for (const [c, d] of edges) {
+      if (segmentDistance(a, b, c, d) <= radius) return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * @returns Line with increased strokeWidth for accessibility reasons.
+ */
+export function accessibleLine(line: Line): Line {
+  const { x, y, strokeWidth, points } = line
+  return {
+    x,
+    y,
+    points,
+    strokeWidth: Math.max(18, strokeWidth),
+  }
+}
+
+/**
+ * @returns Four corners of a box.
+ * ⠀⠀ ●
+ * ⠀🯐🯑 🯒🯓
+ * ●     ●
+ * ⠀🯒🯓 🯐🯑
+ * ⠀⠀⠀●
+ */
+function boxCorners(box: Box): [Point, Point, Point, Point] {
+  const [a, b, c, d] = rectCorners(boxRect(box)).map((corner) =>
+    rotatePoint(corner, box.pivot, box.rotation),
+  )
+  return [a, b, c, d]
+}
+
+/**
+ * @returns Perpendicular normalized axes for each box edge.
+ */
+function boxAxes(corners: Point[]): Point[] {
+  return corners
+    .map((corner, i) => pointSubtract(corners[(i + 1) % corners.length], corner))
+    .map((edge) => pointNorm({ x: -edge.y, y: edge.x }))
+    .filter((axis) => axis.x !== 0 || axis.y !== 0)
+}
+
+/**
+ * @returns Smallest and largest scalar projections of points onto an axis.
+ */
+function projectPoints(points: Point[], axis: Point) {
+  let min = Infinity
+  let max = -Infinity
+
+  for (const point of points) {
+    const projection = floatNorm(vectorDotProd(point, axis))
+    if (projection < min) min = projection
+    if (projection > max) max = projection
+  }
+
+  return { min, max }
+}
+
+/**
+ * @returns Whether `a` covers any point from `b`.
+ */
+export function boxIntersects(a: Box, b: Box): boolean {
+  const ac = boxCorners(a)
+  const bc = boxCorners(b)
+
+  return [...boxAxes(ac), ...boxAxes(bc)].every((axis) => {
+    const ap = projectPoints(ac, axis)
+    const bp = projectPoints(bc, axis)
+
+    return ap.max >= bp.min && bp.max >= ap.min
+  })
+}
+
+/**
+ * Perpendicular (signed) distance from point b to the infinite line
+ * that passes through point a with direction `deg` (degrees).
+ */
+export function perpDistance(a: Point, b: Point, deg: Deg): number {
+  const normal = rotatePoint(point({ y: 1 }), point(), deg)
+  const vector = pointSubtract(b, a)
+  return vectorDotProd(vector, normal)
+}
+
+/**
+ * Resize box by one of its edges.
+ * The center and pivot is shifted accordingly so that visually only the edge moves.
+ */
+export function resizeBox(box: Box, edge: Edge, by: number): Box {
+  const delta = by / 2
+  const direction =
+    edge === "n"
+      ? { x: 0, y: -1 }
+      : edge === "s"
+        ? { x: 0, y: 1 }
+        : edge === "w"
+          ? { x: -1, y: 0 }
+          : { x: 1, y: 0 }
+
+  const shift = pointMultiply(rotatePoint(direction, point(), box.rotation), delta)
+  const center = pointAdd(box.center, shift)
+  const pivot = pointAdd(box.pivot, shift)
+
+  return {
+    ...box,
+    center,
+    pivot,
+    width: edge === "w" || edge === "e" ? box.width + by : box.width,
+    height: edge === "n" || edge === "s" ? box.height + by : box.height,
+  }
+}
+
+/**
+ * Scale box by one of its edges keeping its aspect ratio.
+ * The center and pivot is shifted accordingly so that visually only the edge moves.
+ */
+export function scaleBox(box: Box, direction: Edge | Corner, by: number) {
+  const vertical = direction.includes("n") || direction.includes("s")
+  const scale =
+    vertical && box.height !== 0
+      ? (box.height + by) / box.height
+      : box.width !== 0
+        ? (box.width + by) / box.width
+        : 1
+
+  const width = box.width * scale
+  const height = box.height * scale
+  const widthDelta = width - box.width
+  const heightDelta = height - box.height
+
+  const isCorner = direction.length === 2
+  const north = direction.includes("n") ? heightDelta : 0
+  const south = direction.includes("s") ? heightDelta : 0
+  const west = direction.includes("w") ? widthDelta : 0
+  const east = direction.includes("e") ? widthDelta : 0
+  const x = (east - west) / 2
+  const y = (south - north) / 2
+  const edgeShift = isCorner ? { x, y } : vertical ? { x: 0, y } : { x, y: 0 }
+
+  const shift = rotatePoint(edgeShift, point(), box.rotation)
+  const center = pointAdd(box.center, shift)
+  const pivot = pointAdd(box.pivot, shift)
+
+  return {
+    rotation: box.rotation,
+    center,
+    pivot,
+    width,
+    height,
+  }
+}

package/lib/model/geometry/svg.ts

@@ -0,0 +1,55 @@
+import {
+  clamp,
+  floatNorm,
+  type Point,
+  pointAdd,
+  pointDist,
+  pointMultiply,
+  pointNorm,
+  pointSubtract,
+  vectorDotProd,
+} from "./math"
+
+export function roundedPathData(points: Point[], roundness: number): string {
+  const count = points.length
+  const winding = Math.sign(
+    points.reduce((area, curr, i) => {
+      const next = points[(i + 1) % count]
+      return area + curr.x * next.y - next.x * curr.y
+    }, 0),
+  )
+
+  const cmds = Array.from({ length: count }, (_, i) => {
+    const prev = points[(i - 1 + count) % count]
+    const curr = points[i]
+    const next = points[(i + 1) % count]
+    const cmd = i === 0 ? "M" : "L"
+
+    const v1 = pointNorm(pointSubtract(prev, curr))
+    const v2 = pointNorm(pointSubtract(next, curr))
+
+    const cosTheta = clamp(vectorDotProd(v1, v2), -1, 1)
+    const theta = Math.acos(cosTheta)
+    const cornerCross =
+      (curr.x - prev.x) * (next.y - curr.y) - (curr.y - prev.y) * (next.x - curr.x)
+
+    if (!isFinite(theta) || theta < 1e-6 || roundness <= 0) {
+      return `${cmd} ${floatNorm(curr.x)} ${floatNorm(curr.y)}`
+    }
+
+    const dPrev = pointDist(curr, prev)
+    const dNext = pointDist(curr, next)
+    const tIdeal = roundness / Math.tan(theta / 2)
+    const t = Math.min(tIdeal, dPrev / 2, dNext / 2)
+    const rEff = t * Math.tan(theta / 2)
+    const p1 = pointAdd(curr, pointMultiply(v1, t))
+    const p2 = pointAdd(curr, pointMultiply(v2, t))
+    const isConcave = winding !== 0 && Math.sign(cornerCross) !== winding
+    const sweep = isConcave ? 0 : 1
+    const arc = `A ${floatNorm(rEff)} ${floatNorm(rEff)} 0 0 ${sweep} ${floatNorm(p2.x)} ${floatNorm(p2.y)}`
+
+    return `${cmd} ${floatNorm(p1.x)} ${floatNorm(p1.y)} ${arc}`
+  })
+
+  return cmds.concat("Z").join(" ")
+}