@lazlon-platform/html-editor 0.4.0 → 0.5.0

package/lib/hooks/pointer/selector.ts

@@ -1,53 +1,64 @@
-import { isPointerInSelectionRect } from "../../ui/selection"
+import { useRef } from "react"
+import {
+  type Rect,
+  box,
+  boxContainsPoint,
+  pointSubtract,
+  rect,
+  boxIntersects,
+} from "../../model/geometry/math"
 import { useEditor } from "../editor"
-import { usePointer } from "./pointer"
+import { cursorPosition, usePointer } from "./pointer"
 
-export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null> }) {
+function clientPoint(event: { clientX: number; clientY: number }) {
+  return { x: event.clientX, y: event.clientY }
+}
+
+export function useSelector(view: (props: null | Rect) => void) {
   const editor = useEditor()
 
+  const dragAnchor = useRef({
+    clientX: 0,
+    clientY: 0,
+  })
+
   return usePointer({
     onDown(event) {
-      const isPointerInsideRect = isPointerInSelectionRect(editor.selection, event)
+      for (const node of editor.nodes.values()) {
+        if (boxContainsPoint(box(node), cursorPosition(event, node))) {
+          return false
+        }
+      }
 
-      if (!isPointerInsideRect && !editor.action.action) {
+      if (!editor.action.action) {
         editor.action = { action: "select" }
+        dragAnchor.current = event
       }
-
-      return !isPointerInsideRect
     },
-    onMove({ event, start }) {
-      const div = props.ref.current
-      if (!div) throw Error("selector div ref is null")
+    onMove(event) {
       if (editor.action.action !== "select") return
+      const stage = editor.ref!.getBoundingClientRect()
 
-      const rect = editor.ref!.getBoundingClientRect()
-
-      const x = event.clientX - start.clientX
-      const y = event.clientY - start.clientY
-      const width = Math.floor(Math.abs(x))
-      const height = Math.floor(Math.abs(y))
-      const tx = (x > 0 ? start.clientX : start.clientX - width) - rect.x
-      const ty = (y > 0 ? start.clientY : start.clientY - height) - rect.y
-
-      const { left, right, top, bottom } = div.getBoundingClientRect()
+      /* world view */ {
+        const p1 = clientPoint(dragAnchor.current)
+        const p2 = clientPoint(event)
+        view(rect(pointSubtract(p1, stage), pointSubtract(p2, stage)))
+      }
 
-      editor.selection = new Set(
-        editor.nodes.values().filter(({ ref }) => {
-          const node = ref?.getBoundingClientRect()
-          if (!node) throw Error("node.ref is null")
-          return !(
-            node.right <= left || // node is left of selection
-            node.left >= right || // node is right of selection
-            node.bottom <= top || // node is above selection
-            node.top >= bottom // node is below selection
-          )
-        }),
-      )
+      const selection = editor.pages
+        .values()
+        .toArray()
+        .flatMap((page) => {
+          const p1 = cursorPosition(dragAnchor.current, page)
+          const p2 = cursorPosition(event, page)
+          const selection = box(rect(p1, p2))
+          return page.nodes
+            .values()
+            .toArray()
+            .filter((node) => boxIntersects(selection, box(node)))
+        })
 
-      div.style.width = `${width}px`
-      div.style.height = `${height}px`
-      div.style.transform = `translate(${tx}px, ${ty}px)`
-      div.style.display = "block"
+      editor.selection = new Set(selection)
     },
     onCancel() {
       editor.selection = new Set() // click away
@@ -55,10 +66,7 @@ export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null>
     },
     onEnd() {
       editor.action = {}
-
-      const div = props.ref.current
-      if (!div) throw Error("selector div ref is null")
-      div.style.display = "none"
+      view(null)
     },
   })
 }

package/lib/hooks/pointer/snap.ts

@@ -1,4 +1,4 @@
-import type { Rect } from "../../model/geometry"
+import { type Rect, box, boxBounds, rect } from "../../model/geometry/math"
 import type { Node } from "../../model/node"
 import type { Page } from "../../model/page"
 import { useEditor, usePage } from "../editor"
@@ -17,13 +17,13 @@ export function useSnap() {
 
   function ySnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { y, height } = n.boundingBox
+      const { y, height } = boxBounds(box(n))
       return [y, y + height]
     })
 
     const hlines = [0, page.height, ...nodelines]
-    const top = hlines.find(shouldSnap(rect.y))
-    const bottom = hlines.find(shouldSnap(rect.y + rect.height))
+    const top = hlines.find(shouldSnap(rect.top))
+    const bottom = hlines.find(shouldSnap(rect.bottom))
 
     if (isN(top) && isN(bottom)) {
       return [
@@ -46,15 +46,15 @@ export function useSnap() {
     return [rect.y]
   }
 
-  function xSnap(nodes: Node[], box: Rect): [number, ...Lines] {
+  function xSnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { x, width } = n.boundingBox
+      const { x, width } = boxBounds(box(n))
       return [x, x + width]
     })
 
     const hlines = [0, page.width, ...nodelines]
-    const left = hlines.find(shouldSnap(box.x))
-    const right = hlines.find(shouldSnap(box.x + box.width))
+    const left = hlines.find(shouldSnap(rect.left))
+    const right = hlines.find(shouldSnap(rect.right))
 
     if (isN(left) && isN(right)) {
       return [left, { x: left - 1 }, { x: right }]
@@ -65,16 +65,16 @@ export function useSnap() {
     }
 
     if (isN(right)) {
-      return [right - box.width, { x: right }]
+      return [right - rect.width, { x: right }]
     }
 
-    return [box.x]
+    return [rect.x]
   }
 
-  return function snap(snap: boolean, rect: Rect): Rect {
+  return function snap(snap: boolean, r: Rect): Rect {
     if (!snap) {
       page.snapLines = []
-      return rect
+      return r
     }
 
     const nodes = page.nodes
@@ -82,16 +82,16 @@ export function useSnap() {
       .filter((node) => !editor.selection.has(node))
       .toArray()
 
-    const [left, ...hlines] = xSnap(nodes, rect)
-    const [top, ...vlines] = ySnap(nodes, rect)
+    const [x, ...hlines] = xSnap(nodes, r)
+    const [y, ...vlines] = ySnap(nodes, r)
 
     page.snapLines = [...vlines, ...hlines]
 
-    return {
-      x: left,
-      y: top,
-      width: rect.width,
-      height: rect.height,
-    }
+    return rect({
+      x,
+      y,
+      width: r.width,
+      height: r.height,
+    })
   }
 }

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,
+  }
+}