@lazlon-platform/html-editor 0.3.6 → 0.5.0

package/lib/model/geometry/math.ts

@@ -0,0 +1,484 @@
+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
+}
+
+/**
+ * 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)
+  )
+}
+
+/**
+ * @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(" ")
+}

package/lib/model/node/shape/arrow.ts

@@ -3,7 +3,7 @@ import type { Editor } from "../../editor"
 import type { SerializedNode } from "../../node"
 import type { Page } from "../../page"
 import { ShapeNode, type ShapeNodeProps } from "./shape"
-import { roundedPathData } from "../../geometry"
+import { roundedPathData } from "../../geometry/svg"
 
 export type ArrowNodeProps = ShapeNodeProps & Partial<Pick<ArrowNode, "roundness">>
 

package/lib/model/node/shape/polygon.ts

@@ -1,9 +1,10 @@
 import { computed, state } from "react-bolt"
 import type { Editor } from "../../editor"
+import type { Point } from "../../geometry/math"
+import { roundedPathData } from "../../geometry/svg"
 import type { SerializedNode } from "../../node"
 import type { Page } from "../../page"
 import { ShapeNode, type ShapeNodeProps } from "./shape"
-import { regularPolygonPoints, roundedPathData } from "../../geometry"
 
 export type PolygonNodeProps = ShapeNodeProps &
   Partial<
@@ -106,3 +107,24 @@ export class PolygonNode extends ShapeNode {
     )
   }
 }
+
+function regularPolygonPoints(props: {
+  width: number
+  height: number
+  sides: number
+}): Point[] {
+  const { width, height, sides } = props
+  const rotation = sides % 2 === 0 ? Math.PI / sides : 0
+  const cx = width / 2
+  const cy = height / 2
+  const rx = width / 2
+  const ry = height / 2
+
+  return Array.from({ length: sides }, (_, i) => {
+    const angle = (i * Math.PI * 2) / sides - Math.PI / 2 + rotation
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+}

package/lib/model/node/shape/star.ts

@@ -1,9 +1,10 @@
 import { computed, state } from "react-bolt"
-import { clamp, roundedPathData, starPoints } from "../../geometry"
 import type { Editor } from "../../editor"
 import type { SerializedNode } from "../../node"
 import type { Page } from "../../page"
 import { ShapeNode, type ShapeNodeProps } from "./shape"
+import { clamp, type Point } from "../../geometry/math"
+import { roundedPathData } from "../../geometry/svg"
 
 export type StarNodeProps = ShapeNodeProps &
   Partial<Pick<StarNode, "corners" | "roundness" | "depth">>
@@ -61,3 +62,30 @@ export class StarNode extends ShapeNode {
     )
   }
 }
+
+function starPoints(props: {
+  width: number
+  height: number
+  corners: number
+  depth: number
+}): Point[] {
+  const { width, height, corners, depth } = props
+  const cx = width / 2
+  const cy = height / 2
+  const outerRx = width / 2
+  const outerRy = height / 2
+  const innerRx = outerRx * depth
+  const innerRy = outerRy * depth
+
+  return Array.from({ length: corners * 2 }, (_, i) => {
+    const angle = (i * Math.PI) / corners - Math.PI / 2
+    const isOuter = i % 2 === 0
+    const rx = isOuter ? outerRx : innerRx
+    const ry = isOuter ? outerRy : innerRy
+
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+}

package/lib/model/node/text.ts

@@ -1,11 +1,10 @@
 import { computed, state } from "react-bolt"
 import type { Editor } from "../editor"
 import type { Page } from "../page"
-import { EditableNode, type EditableNodeProps } from "./editable"
 import type { SerializedNode } from "../node"
+import { EditableNode, type EditableNodeProps } from "./editable"
 
-export type TextNodeProps = EditableNodeProps &
-  Partial<Pick<TextNode, "halign" | "scale">>
+export type TextNodeProps = EditableNodeProps & Partial<Pick<TextNode, "halign" | "size">>
 
 export class TextNode extends EditableNode {
   get name() {
@@ -13,21 +12,25 @@ export class TextNode extends EditableNode {
   }
 
   @state accessor halign: "left" | "center" | "right" | "justify"
-  @state accessor scale: number = 1
+  @state accessor size: number = 16
   @state accessor contentHeight: number = 24
 
+  private observer = new ResizeObserver(([entry]) => {
+    this.contentHeight = entry.target.clientHeight
+  })
+
   @computed get height(): number {
-    return this.contentHeight * this.scale
+    return this.contentHeight
   }
 
-  set height(n: number) {
-    this.scale = n / this.contentHeight
+  set height(_) {
+    // no-op: TextNode's height can be set using its font-size
   }
 
-  constructor(editor: Editor, page: Page, { halign, scale, ...props }: TextNodeProps) {
+  constructor(editor: Editor, page: Page, { halign, size, ...props }: TextNodeProps) {
     super(editor, page, props)
     this.halign = halign ?? "center"
-    this.scale = scale ?? 1
+    this.size = size ?? 16
 
     this.tiptap.on("transaction", () => {
       const height = this.tiptap.view.dom.clientHeight
@@ -37,7 +40,13 @@ export class TextNode extends EditableNode {
 
   set contentRef(ref: HTMLElement | null) {
     super.contentRef = ref
-    if (ref) this.contentHeight = ref.clientHeight
+
+    if (ref) {
+      this.observer.observe(ref)
+      this.contentHeight = ref.clientHeight
+    } else {
+      this.observer.disconnect()
+    }
   }
 
   @computed get contentRef() {
@@ -45,8 +54,8 @@ export class TextNode extends EditableNode {
   }
 
   props(): TextNodeProps {
-    const { halign, scale } = this
-    return { ...super.props(), halign, scale }
+    const { halign, size } = this
+    return { ...super.props(), halign, size }
   }
 
   serialize(): SerializedNode<this["name"], TextNodeProps> {