@lazlon-platform/html-editor 0.4.0 → 0.5.0

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,8 +1,8 @@
 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" | "size">>
 
@@ -15,18 +15,16 @@ export class TextNode extends EditableNode {
   @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
   }
 
-  set height(n: number) {
-    const target = Math.max(1, n)
-
-    if (this.contentHeight > 0) {
-      this.size = (this.size * target) / this.contentHeight
-    }
-
-    this.contentHeight = target
+  set height(_) {
+    // no-op: TextNode's height can be set using its font-size
   }
 
   constructor(editor: Editor, page: Page, { halign, size, ...props }: TextNodeProps) {
@@ -42,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() {

package/lib/model/node.ts

@@ -1,7 +1,7 @@
 import { computed, state } from "react-bolt"
 import type { Editor } from "./editor"
-import { rotatedAABB } from "./geometry"
 import type { Page } from "./page"
+import { deg, type Deg } from "./geometry/math"
 
 export type Schema = Map<string, typeof Node>
 
@@ -31,7 +31,7 @@ export abstract class Node {
   @state private accessor _width: number
   @state private accessor _height: number
 
-  @state accessor rotation: number
+  @state accessor rotation: Deg
   @state accessor role: string | null
   @state accessor locked: boolean
   @state accessor x: number
@@ -65,7 +65,7 @@ export abstract class Node {
     this._height = props.height
     this.role = props.role?.[0] || null
     this.locked = props.locked ?? false
-    this.rotation = props.rotation ?? 0
+    this.rotation = props.rotation ?? deg(0)
     this.css = props.css ?? ""
   }
 
@@ -94,8 +94,4 @@ export abstract class Node {
       props: this.props(),
     }
   }
-
-  @computed get boundingBox() {
-    return rotatedAABB(this, this.rotation)
-  }
 }

package/lib/model/page.ts

@@ -15,6 +15,7 @@ export interface SerializedPage extends Omit<PageProps, "nodes"> {
 
 export class Page {
   readonly id: string
+  readonly editor: Editor
 
   ref: HTMLElement | null = null
 
@@ -28,7 +29,8 @@ export class Page {
     | { y: number; x?: number; w?: number; h?: never } // vertical
   > = []
 
-  constructor(_: Editor, props: PageProps) {
+  constructor(editor: Editor, props: PageProps) {
+    this.editor = editor
     this.id = props.id
     this.background = props.background ?? "#ffffff"
     this.width = props.width ?? 841

package/lib/ui/node/NodeView.tsx

@@ -1,10 +1,9 @@
 import { useEffect } from "react"
 import { useStore } from "react-bolt"
 import { useEditor } from "../../hooks/editor"
+import { isLoaded, loadFont } from "../../lib/googleFonts"
 import { Node } from "../../model/node"
 import { getFontFamilies } from "../../ui/extractor"
-import { isLoaded, loadFont } from "../../lib/googleFonts"
-import { isPointerInSelectionRect } from "../selection"
 
 export function NodeView(props: {
   node: Node
@@ -49,17 +48,6 @@ export function NodeView(props: {
         height: `${height}px`,
         transform: `translate(${x}px,${y}px) rotate(${rotation ?? 0}deg)`,
       }}
-      onDragStart={(e) => e.preventDefault()}
-      onPointerDown={(event) => {
-        if (event.button !== 0) return
-
-        const { selection } = editor
-        if (selection.size === 0 || event.shiftKey) {
-          editor.selection = new Set([...selection, node])
-        } else if (!isPointerInSelectionRect(selection, event)) {
-          editor.selection = new Set([node])
-        }
-      }}
     >
       {children}
       {css && <style>{`#${id} { ${css} }`}</style>}

package/lib/ui/selection.ts

@@ -1,38 +1,21 @@
-import { boundingBox } from "../model/geometry"
+import { box, boxBounds, rect, type Box, type Rect } from "../model/geometry/math"
 import type { Node } from "../model/node"
 
-export function getTargetDOMRect(selection: Set<Node>) {
+export function selectionDOMRect(selection: Set<Node>): Rect {
   const rects = selection
     .values()
     .map((node) => node.ref)
     .filter((dom) => dom instanceof HTMLElement)
     .map((dom) => dom.getBoundingClientRect())
-    .toArray()
 
-  return boundingBox(rects)
+  return rect(...rects)
 }
 
-export function getTargetRect(selection: Set<Node>) {
-  const rects = selection
-    .values()
-    .map((node) => node.boundingBox)
-    .toArray()
-
-  return boundingBox(rects)
-}
-
-export function isPointerInSelectionRect(
-  selection: Set<Node>,
-  event: React.PointerEvent,
-) {
-  const rect = getTargetDOMRect(selection)
-  const right = rect.x + rect.width
-  const bottom = rect.y + rect.height
+export function selectionBox(selection: Set<Node>): Box {
+  if (selection.size === 1) {
+    const [node] = selection
+    return box(node)
+  }
 
-  return (
-    event.clientX >= rect.x &&
-    event.clientX <= right &&
-    event.clientY >= rect.y &&
-    event.clientY <= bottom
-  )
+  return box(boxBounds(...selection.values().map(box)))
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazlon-platform/html-editor",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "lib"
@@ -8,55 +8,55 @@
   "exports": {
     "./ui": "./lib/ui/index.ts",
     "./model": "./lib/model/index.ts",
-    "./model/geometry": "./lib/model/geometry.ts",
+    "./model/geometry": "./lib/model/geometry/math.ts",
     "./hooks": "./lib/hooks/index.ts",
     "./googleFonts": "./lib/lib/googleFonts.ts"
   },
   "dependencies": {
-    "@tiptap/core": "^3.20.0",
-    "@tiptap/extension-bold": "^3.20.0",
-    "@tiptap/extension-document": "^3.20.0",
-    "@tiptap/extension-hard-break": "^3.20.0",
-    "@tiptap/extension-italic": "^3.20.0",
-    "@tiptap/extension-paragraph": "^3.20.0",
-    "@tiptap/extension-strike": "^3.20.0",
-    "@tiptap/extension-subscript": "^3.20.0",
-    "@tiptap/extension-superscript": "^3.20.0",
-    "@tiptap/extension-text": "^3.20.0",
-    "@tiptap/extension-text-style": "^3.20.0",
-    "@tiptap/extension-underline": "^3.20.0",
-    "@tiptap/extensions": "^3.22.4",
-    "@tiptap/pm": "^3.20.0",
-    "@tiptap/react": "^3.20.0",
+    "@tiptap/core": "^3.23.1",
+    "@tiptap/extension-bold": "^3.23.1",
+    "@tiptap/extension-document": "^3.23.1",
+    "@tiptap/extension-hard-break": "^3.23.1",
+    "@tiptap/extension-italic": "^3.23.1",
+    "@tiptap/extension-paragraph": "^3.23.1",
+    "@tiptap/extension-strike": "^3.23.1",
+    "@tiptap/extension-subscript": "^3.23.1",
+    "@tiptap/extension-superscript": "^3.23.1",
+    "@tiptap/extension-text": "^3.23.1",
+    "@tiptap/extension-text-style": "^3.23.1",
+    "@tiptap/extension-underline": "^3.23.1",
+    "@tiptap/extensions": "^3.23.1",
+    "@tiptap/pm": "^3.23.1",
+    "@tiptap/react": "^3.23.1",
     "clsx": "^2.1.1",
-    "es-toolkit": "^1.45.0",
-    "react": "^19.2.0",
-    "react-aria-components": "^1.15.1",
+    "es-toolkit": "^1.46.1",
+    "react": "^19.2.6",
+    "react-aria-components": "^1.17.0",
     "react-bolt": "^1.4.1",
-    "react-dom": "^19.2.0",
-    "react-hotkeys-hook": "^5.2.4",
-    "tailwindcss": "^4.2.1"
+    "react-dom": "^19.2.6",
+    "react-hotkeys-hook": "^5.3.2",
+    "tailwindcss": "^4.3.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@tailwindcss/vite": "^4.2.1",
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.12.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/coverage-v8": "^4.1.0",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "happy-dom": "^20.8.3",
+    "happy-dom": "^20.9.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^7.3.3",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.5"
   },
   "prettier": {
     "semi": false,

package/lib/model/geometry.ts

@@ -1,247 +0,0 @@
-export interface Point {
-  x: number
-  y: number
-}
-
-export interface Rect extends Point {
-  width: number
-  height: number
-}
-
-function rectCorners({ x, y, width, height }: Rect): Point[] {
-  return [
-    { x, y },
-    { x: x + width, y },
-    { x, y: y + height },
-    { x: x + width, y: y + height },
-  ]
-}
-
-/**
- * @example
- * ```ts
- * const center = { x: 0, y: 0 }
- * const P = { x: 2, y: 0 }
- * rotate(P, center, 90) // P' = { x: 0, y: 2 }
- * ```
- *
- * P
- * ●
- * │
- * │ 90°
- * ●─────● P'
- */
-export function rotatePoint(p: Point, center: Point, deg: number): Point {
-  const rad = (deg * Math.PI) / 180
-  const cos = Math.cos(rad)
-  const sin = Math.sin(rad)
-  const dx = p.x - center.x
-  const dy = p.y - center.y
-
-  return {
-    x: center.x + dx * cos - dy * sin,
-    y: center.y + dx * sin + dy * cos,
-  }
-}
-
-export function boundingBox(args: Point[] | Rect[]): 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
-  }
-
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-  }
-}
-
-export function rectCenter({ x, y, width, height }: Rect): Point {
-  return {
-    x: x + width / 2,
-    y: y + height / 2,
-  }
-}
-
-/**
- * axis-aligned bounding box (AABB) of the rotated rectangle
- */
-export function rotatedAABB(rect: Rect, deg: number): Rect {
-  return boundingBox(rectCorners(rect).map((c) => rotatePoint(c, rectCenter(rect), deg)))
-}
-
-export function dist(a: Point, b: Point) {
-  const dx = a.x - b.x
-  const dy = a.y - b.y
-  return Math.hypot(dx, dy)
-}
-
-export function sub(a: Point, b: Point) {
-  return {
-    x: a.x - b.x,
-    y: a.y - b.y,
-  }
-}
-
-export function add(a: Point, b: Point) {
-  return {
-    x: a.x + b.x,
-    y: a.y + b.y,
-  }
-}
-
-export function mul(p: Point, n: number) {
-  return {
-    x: p.x * n,
-    y: p.y * n,
-  }
-}
-
-export function norm(p: Point) {
-  const d = Math.hypot(p.x, p.y)
-  return {
-    x: d === 0 ? 0 : p.x / d,
-    y: d === 0 ? 0 : p.y / d,
-  }
-}
-
-export function dot(a: Point, b: Point) {
-  return a.x * b.x + a.y * b.y
-}
-
-export function clamp(n: number, lo: number, hi: number) {
-  return Math.max(lo, Math.min(hi, n))
-}
-
-export function tidyFloat(v: number) {
-  return Math.abs(v) < 1e-10 ? 0 : +v.toFixed(3)
-}
-
-export function radToDeg(rad: number): number {
-  return (rad * 180) / Math.PI
-}
-
-/**
- * @example
- * ```ts
- * const center = { x: 0, y: 0 }
- * const a = { x: 0, y: 2 }
- * const b = { x: 2, y: 0 }
- * angle(center, a, b) // 90
- * ```
- * a
- * ●
- * │
- * │ 90°
- * ●─────● b
- */
-export function angle(center: Point, a: Point, b: Point): number {
-  const angA = radToDeg(Math.atan2(a.y - center.y, a.x - center.x))
-  const angB = radToDeg(Math.atan2(b.y - center.y, b.x - center.x))
-  return Math.round(((((angA + angB + 180) % 360) + 360) % 360) - 180)
-}
-
-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 = norm(sub(prev, curr))
-    const v2 = norm(sub(next, curr))
-
-    const cosTheta = clamp(dot(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} ${tidyFloat(curr.x)} ${tidyFloat(curr.y)}`
-    }
-
-    const dPrev = dist(curr, prev)
-    const dNext = dist(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 = add(curr, mul(v1, t))
-    const p2 = add(curr, mul(v2, t))
-    const isConcave = winding !== 0 && Math.sign(cornerCross) !== winding
-    const sweep = isConcave ? 0 : 1
-    const arc = `A ${tidyFloat(rEff)} ${tidyFloat(rEff)} 0 0 ${sweep} ${tidyFloat(p2.x)} ${tidyFloat(p2.y)}`
-
-    return `${cmd} ${tidyFloat(p1.x)} ${tidyFloat(p1.y)} ${arc}`
-  })
-
-  return cmds.concat("Z").join(" ")
-}
-
-export 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),
-    }
-  })
-}
-
-export 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),
-    }
-  })
-}