@lazlon-platform/html-editor 0.1.0

package/lib/hooks/batch.ts

@@ -0,0 +1,102 @@
+import { isEqual, pick } from "es-toolkit"
+import { useRef } from "react"
+import { useComputed } from "react-bolt"
+import { type HistoryAction } from "../model/history"
+import { Node } from "../model/node"
+import { useEditor } from "./editor"
+
+export function useNodeField<N extends Node, K extends keyof N>(
+  nodes: Iterable<N>,
+  key: K,
+  fallback: N[K],
+) {
+  const [first, ...rest] = nodes
+  return useComputed<N[K]>({
+    equals: isEqual,
+    fn: () =>
+      rest.reduce(
+        (acc, node) => (isEqual(node[key], acc) ? acc : fallback),
+        first ? first[key] : fallback,
+      ),
+  })
+}
+
+export function useNodeFieldBatch<N extends Node, K extends keyof N>(
+  nodes: N[],
+  key: K,
+  fallback: N[K],
+) {
+  const { history } = useEditor()
+  const initial = useRef<Map<N, N[K]> | null>(null)
+
+  return {
+    value: useNodeField(nodes, key, fallback),
+    onChange(set: N[K] | ((node: N) => N[K])) {
+      if (nodes.length === 0) return
+
+      if (!initial.current) {
+        initial.current = new Map(nodes.map((n) => [n, n[key]]))
+      }
+
+      for (const node of nodes) {
+        node[key] = typeof set === "function" ? (set as (node: N) => N[K])(node) : set
+      }
+    },
+    onChangeEnd(end: N[K] | ((node: N) => N[K])) {
+      if (nodes.length === 0) return
+
+      const init = initial.current || new Map(nodes.map((n) => [n, n[key]]))
+
+      const prev: HistoryAction[] = []
+      const next: HistoryAction[] = []
+
+      for (const node of nodes) {
+        const nextValue =
+          typeof end === "function" ? (end as (node: N) => N[K])(node) : end
+
+        prev.push(["set-node-props", [node.id, { [key]: init.get(node) }]])
+        next.push(["set-node-props", [node.id, { [key]: nextValue }]])
+        node[key] = nextValue
+      }
+
+      history.push({ undo: ["batch", prev], redo: ["batch", next] })
+      initial.current = null
+    },
+  }
+}
+
+type WritableKeys<T> = {
+  [K in keyof T]-?: IfEquals<{ [P in K]: T[P] }, { -readonly [P in K]: T[P] }, K>
+}[keyof T]
+
+type IfEquals<X, Y, Result> =
+  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? Result : never
+
+type Writable<T> = Pick<T, WritableKeys<T>>
+type Props<N> = Partial<Writable<{ [K in keyof N]: N[K] }>>
+
+export function useBatchSet() {
+  const { history } = useEditor()
+
+  return function batchSet<N extends Node>(
+    nodes: Iterable<N>,
+    set: Props<N> | ((n: N) => Props<N>),
+  ) {
+    let push = false
+    const prev: HistoryAction[] = []
+    const next: HistoryAction[] = []
+
+    for (const node of nodes) {
+      push = true
+      const nextValues = typeof set === "function" ? set(node) : set
+      const keys = Object.keys(nextValues) as WritableKeys<N>[]
+      prev.push(["set-node-props", [node.id, pick(node, keys)]])
+      next.push(["set-node-props", [node.id, nextValues]])
+      Object.assign(node, nextValues)
+    }
+
+    if (push) {
+      history.push({ undo: ["batch", prev], redo: ["batch", next] })
+    }
+  }
+}

package/lib/hooks/editor.ts

@@ -0,0 +1,18 @@
+import { createContext, use } from "react"
+import { Editor } from "../model/editor"
+import type { Page } from "../model/page"
+
+export const EditorContext = createContext<Editor | null>(null)
+export const PageContext = createContext<Page | null>(null)
+
+export function usePage() {
+  const page = use(PageContext)
+  if (!page) throw Error("missing PageContext")
+  return page
+}
+
+export function useEditor() {
+  const editor = use(EditorContext)
+  if (!editor) throw Error("missing EditorContext")
+  return editor
+}

package/lib/hooks/index.ts

@@ -0,0 +1,23 @@
+export {
+  clone,
+  useAddNodeAction,
+  useAlignAction,
+  useDistributeAction,
+  useDuplicateAction,
+  useGroupAction,
+  useMoveAction,
+  useStackOrderAction,
+  useToggleLockAction,
+  useTrashAction,
+} from "./actions"
+export { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+export { EditorContext, PageContext, useEditor, usePage } from "./editor"
+export { useMoveable } from "./pointer/moveable"
+export { usePointer } from "./pointer/pointer"
+export { useResize } from "./pointer/resize"
+export { useRotation } from "./pointer/rotation"
+export { useSelectionFrame } from "./pointer/selectionFrame"
+export { useSelector } from "./pointer/selector"
+export { useTextMarks } from "./textMarks"
+export { useEditPage } from "./page"
+export { useVisualPositionBatch } from "./node"

package/lib/hooks/node.ts

@@ -0,0 +1,33 @@
+import type { Node } from "../model"
+import { rotatedAABB } from "../model/geometry"
+import { useNodeField, useNodeFieldBatch } from "./batch"
+
+export function useVisualPositionBatch(nodes: Node[]) {
+  const rotation = useNodeField(nodes, "rotation", 0)
+  const width = useNodeField(nodes, "width", NaN)
+  const height = useNodeField(nodes, "height", NaN)
+  const x = useNodeFieldBatch(nodes, "x", NaN)
+  const y = useNodeFieldBatch(nodes, "y", NaN)
+
+  const box = rotatedAABB({ x: x.value, y: y.value, width, height }, rotation)
+
+  function withBoundingBox(axis: "x" | "y", fn: (value: number) => void) {
+    return function (value: number): void {
+      const delta = value - box[axis]
+      return fn(axis === "x" ? x.value + delta : y.value + delta)
+    }
+  }
+
+  return {
+    x: {
+      value: box.x,
+      onChange: withBoundingBox("x", x.onChange),
+      onChangeEnd: withBoundingBox("x", x.onChangeEnd),
+    },
+    y: {
+      value: box.y,
+      onChange: withBoundingBox("y", y.onChange),
+      onChangeEnd: withBoundingBox("y", y.onChangeEnd),
+    },
+  }
+}

package/lib/hooks/page.ts

@@ -0,0 +1,26 @@
+import { useRef } from "react"
+import type { Page } from "../model"
+import { useEditor } from "./editor"
+import { useStore } from "react-bolt"
+
+export function useEditPage<Key extends keyof Page>(page: Page, key: Key) {
+  const editor = useEditor()
+  const init = useRef(page[key])
+  const value = useStore(page, key)
+
+  return {
+    value,
+    onChange(value: Page[Key]) {
+      page[key] = value
+    },
+    onChangeEnd(value: Page[Key]) {
+      editor.history.push({
+        redo: ["set-page-props", [page.id, { [key]: value }]],
+        undo: ["set-page-props", [page.id, { [key]: init.current }]],
+      })
+
+      init.current = value
+      page[key] = value
+    },
+  }
+}

package/lib/hooks/pointer/moveable.ts

@@ -0,0 +1,98 @@
+import { useRef } from "react"
+import type { Point } from "../../model/geometry"
+import type { HistoryEntry } from "../../model/history"
+import type { Node } from "../../model/node"
+import { getTargetRect, isPointerInSelectionRect } from "../../ui/selection"
+import { useEditor, usePage } from "../editor"
+import { usePointer } from "./pointer"
+import { useSnap } from "./snap"
+
+type StartPoints = {
+  node: Node
+  start: Point
+  offset: Point
+}
+
+const moveInit = {
+  start: { x: 0, y: 0, width: 0, height: 0 },
+  grab: { x: 0, y: 0 },
+}
+
+export function useMoveable() {
+  const editor = useEditor()
+  const page = usePage()
+  const startpoints = useRef(Array<StartPoints>())
+  const move = useRef(moveInit)
+  const snap = useSnap()
+
+  return usePointer({
+    onDown(event) {
+      const { selection } = editor
+      const rect = getTargetRect(selection)
+
+      startpoints.current = selection
+        .values()
+        .map((n) => ({
+          node: n,
+          start: { x: n.x, y: n.y },
+          offset: { x: n.x - rect.x, y: n.y - rect.y },
+        }))
+        .toArray()
+
+      move.current = {
+        start: rect,
+        grab: {
+          x: Math.round(event.clientX / editor.zoom - rect.x),
+          y: Math.round(event.clientY / editor.zoom - rect.y),
+        },
+      }
+
+      for (const node of selection) {
+        if (node.blockMove(event)) return false
+      }
+
+      return isPointerInSelectionRect(selection, event)
+    },
+
+    onMove({ event }) {
+      const px = Math.round(event.clientX / editor.zoom - move.current.grab.x)
+      const py = Math.round(event.clientY / editor.zoom - move.current.grab.y)
+
+      const { x, y } = snap(!event.shiftKey, {
+        x: px,
+        y: py,
+        width: move.current.start.width,
+        height: move.current.start.height,
+      })
+
+      for (const { node, offset } of startpoints.current) {
+        node.x = x + offset.x
+        node.y = y + offset.y
+      }
+
+      editor.action = { action: "move", payload: { x, y } }
+    },
+
+    onCancel() {
+      editor.action = {}
+      page.snapLines = []
+    },
+
+    onEnd() {
+      editor.action = {}
+      page.snapLines = []
+
+      const entries = startpoints.current.map(({ node, start }): HistoryEntry => {
+        return {
+          redo: ["set-node-props", [node.id, { x: node.x, y: node.y }]],
+          undo: ["set-node-props", [node.id, { x: start.x, y: start.y }]],
+        }
+      })
+
+      editor.history.push({
+        redo: ["batch", entries.map((e) => e.redo)],
+        undo: ["batch", entries.map((e) => e.undo)],
+      })
+    },
+  })
+}

package/lib/hooks/pointer/pointer.ts

@@ -0,0 +1,56 @@
+import { useCallback, useRef } from "react"
+
+type MoveEvent = {
+  start: React.PointerEvent
+  event: globalThis.PointerEvent
+}
+
+export type UsePointerProps = {
+  onDown?(event: React.PointerEvent): boolean | void
+  onMove?(event: MoveEvent): void
+  onEnd?(event: MoveEvent): void
+  onCancel?(event: MoveEvent): void
+}
+
+export function usePointer(props: UsePointerProps) {
+  const { onDown, onMove, onEnd, onCancel } = props
+  const isMovingRef = useRef(false)
+
+  const onPointerDown = useCallback(
+    function onPointerDown(start: React.PointerEvent) {
+      if (start.button !== 0) return
+      if (onDown?.(start) === false) return
+
+      function onPointerMove(event: globalThis.PointerEvent) {
+        isMovingRef.current = true
+        onMove?.({ start, event })
+      }
+
+      function onPointerUp(event: globalThis.PointerEvent) {
+        removeEventListener("pointermove", onPointerMove)
+        removeEventListener("pointerup", onPointerUp)
+        removeEventListener("pointercancel", onPointerUp)
+
+        if (isMovingRef.current) {
+          onEnd?.({ start, event })
+        } else {
+          onCancel?.({ start, event })
+        }
+
+        isMovingRef.current = false
+      }
+
+      addEventListener("pointermove", onPointerMove)
+      addEventListener("pointerup", onPointerUp)
+      addEventListener("pointercancel", onPointerUp)
+    },
+    [onDown, onMove, onEnd, onCancel, isMovingRef],
+  )
+
+  return {
+    onPointerDown,
+    isMoving() {
+      return isMovingRef.current
+    },
+  }
+}

package/lib/hooks/pointer/resize.ts

@@ -0,0 +1,281 @@
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import type { Point, Rect } from "../../model/geometry"
+import type { HistoryEntry } from "../../model/history"
+import type { Node } from "../../model/node"
+import { getTargetRect } from "../../ui/selection"
+import { useEditor } from "../editor"
+import { usePointer } from "./pointer"
+
+type Edge = "n" | "s" | "w" | "e"
+type Corner = "ne" | "nw" | "se" | "sw"
+type Direction = Edge | Corner
+
+type ResizeInit = {
+  rect: Rect
+  nodes: Array<Rect & { node: Node; undo: Rect }>
+}
+
+function useSingleResize(direction: Direction) {
+  const editor = useEditor()
+  const [node, ...rest] = useStore(editor, "selection")
+  const init = useRef<Rect>({ width: 0, height: 0, x: 0, y: 0 })
+  const directions = direction.split("") as Edge[]
+
+  return usePointer({
+    onDown() {
+      if (!node || rest.length > 0) return false
+      const { x, y, width, height } = node
+      init.current = { x, y, width, height }
+    },
+    onMove({ start, event }) {
+      editor.action = { action: "resize", payload: { width: 0, height: 0 } }
+
+      let size = init.current
+
+      for (const direction of directions) {
+        const r =
+          direction === "w" ? 90 : direction === "e" ? -90 : direction === "n" ? 180 : 0
+
+        size = resize(
+          size,
+          node.rotation,
+          direction,
+          distance(
+            { x: start.clientX, y: start.clientY },
+            { x: event.clientX, y: event.clientY },
+            node.rotation + r,
+          ),
+        )
+      }
+
+      node.width = size.width
+      node.height = size.height
+      node.x = size.x
+      node.y = size.y
+
+      editor.action = { action: "resize", payload: size }
+    },
+    onCancel() {
+      editor.action = {}
+    },
+    onEnd() {
+      editor.action = {}
+
+      const prev = init.current
+      const next = {
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+      }
+
+      editor.history.push({
+        redo: ["set-node-props", [node.id, next]],
+        undo: ["set-node-props", [node.id, prev]],
+      })
+    },
+  })
+}
+
+function useMultiResize(direction: Direction) {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const selectionArray = selection.values().toArray()
+  const directions = direction.split("") as Edge[]
+  const init = useRef<ResizeInit>({
+    rect: { x: 0, y: 0, width: 0, height: 0 },
+    nodes: [],
+  })
+
+  return usePointer({
+    onDown() {
+      if (selectionArray.some((n) => n.locked)) {
+        return false
+      }
+
+      const { x, y, width, height } = getTargetRect(selection)
+
+      init.current = {
+        rect: { x, y, width, height },
+        nodes: selectionArray.map((node) => ({
+          node,
+          undo: {
+            x: node.x,
+            y: node.y,
+            width: node.width,
+            height: node.height,
+          },
+          x: (node.x - x) / width,
+          y: (node.y - y) / height,
+          width: node.width / width,
+          height: node.height / height,
+        })),
+      }
+    },
+    onMove({ start, event }) {
+      const px = Math.round((event.clientX - start.clientX) / editor.zoom)
+      const py = Math.round((event.clientY - start.clientY) / editor.zoom)
+
+      const rect: Rect = { ...init.current.rect }
+
+      /* mutate rect  */ {
+        const { x, y, height, width } = init.current.rect
+
+        if (directions.includes("n") && height - py > 0) {
+          rect.height = height - py
+          rect.y = y + py
+        }
+        if (directions.includes("s")) {
+          rect.height = height + py
+        }
+        if (directions.includes("w") && width - px > 0) {
+          rect.width = width - px
+          rect.x = x + px
+        }
+        if (directions.includes("e")) {
+          rect.width = width + px
+        }
+      }
+
+      /* mutate nodes according to rect */ {
+        for (const { node, x, y, height, width } of init.current.nodes) {
+          node.x = Math.round(x * rect.width) + rect.x
+          node.y = Math.round(y * rect.height) + rect.y
+          node.width = Math.round(rect.width * width)
+          node.height = Math.round(rect.height * height)
+        }
+      }
+
+      editor.action = { action: "resize", payload: rect }
+    },
+    onCancel() {
+      editor.action = {}
+    },
+    onEnd() {
+      editor.action = {}
+
+      const entries = init.current.nodes.map(
+        ({ node, undo }): HistoryEntry => ({
+          redo: [
+            "set-node-props",
+            [node.id, { x: node.x, y: node.y, width: node.width, height: node.height }],
+          ],
+          undo: [
+            "set-node-props",
+            [node.id, { width: undo.width, height: undo.height, x: undo.x, y: undo.y }],
+          ],
+        }),
+      )
+
+      editor.history.push({
+        redo: ["batch", entries.map((e) => e.redo)],
+        undo: ["batch", entries.map((e) => e.undo)],
+      })
+    },
+  })
+}
+
+/**
+ * Assumptions (matches typical HTML/CSS editors):
+ * - node.x, node.y are the unrotated rectangle's TOP-LEFT (CSS left/top).
+ * - rotation is around the rectangle CENTER (transform-origin: center).
+ * - resizing keeps the OPPOSITE side fixed in world space (so it won't "drift" when rotated).
+ * - n is the delta to width/height (positive grows, negative shrinks).
+ */
+function resize(rect: Rect, deg: number, side: "n" | "s" | "e" | "w", n: number): Rect {
+  const minSize = 1
+
+  const w0 = rect.width
+  const h0 = rect.height
+
+  const w1 = side === "e" || side === "w" ? Math.max(minSize, w0 + n) : w0
+  const h1 = side === "n" || side === "s" ? Math.max(minSize, h0 + n) : h0
+
+  const hx0 = w0 / 2
+  const hy0 = h0 / 2
+  const hx1 = w1 / 2
+  const hy1 = h1 / 2
+
+  const theta = (deg * Math.PI) / 180
+  const cos = Math.cos(theta)
+  const sin = Math.sin(theta)
+
+  const rot = (p: { x: number; y: number }) => ({
+    x: p.x * cos - p.y * sin,
+    y: p.x * sin + p.y * cos,
+  })
+
+  // Center of the rect in world coords (since x,y is top-left pre-rotation)
+  const c0 = { x: rect.x + hx0, y: rect.y + hy0 }
+
+  // Opposite side midpoint is the anchor (fixed in world space)
+  const anchorLocal0 =
+    side === "e"
+      ? { x: -hx0, y: 0 }
+      : side === "w"
+        ? { x: hx0, y: 0 }
+        : side === "s"
+          ? { x: 0, y: -hy0 }
+          : { x: 0, y: hy0 } // side === "n"
+
+  const a = rot(anchorLocal0)
+  const anchorWorld = { x: c0.x + a.x, y: c0.y + a.y }
+
+  // After resize, the anchor local point changes because half-extents changed
+  const anchorLocal1 =
+    side === "e"
+      ? { x: -hx1, y: 0 }
+      : side === "w"
+        ? { x: hx1, y: 0 }
+        : side === "s"
+          ? { x: 0, y: -hy1 }
+          : { x: 0, y: hy1 } // side === "n"
+
+  // Solve for new center so the anchor stays in the same world position:
+  // anchorWorld = c1 + R * anchorLocal1  =>  c1 = anchorWorld - R * anchorLocal1
+  const a1 = rot(anchorLocal1)
+  const c1 = { x: anchorWorld.x - a1.x, y: anchorWorld.y - a1.y }
+
+  // Convert center back to unrotated top-left
+  const x1 = c1.x - hx1
+  const y1 = c1.y - hy1
+
+  return {
+    x: x1,
+    y: y1,
+    width: w1,
+    height: h1,
+  }
+}
+
+/**
+ * Perpendicular (signed) distance from point b to the infinite line
+ * that passes through point a with direction `deg` (degrees).
+ */
+function distance(a: Point, b: Point, deg: number): number {
+  const t = (deg * Math.PI) / 180
+
+  // unit direction along the line
+  const dx = Math.cos(t)
+  const dy = Math.sin(t)
+
+  // unit normal (perpendicular) to the line
+  const nx = -dy
+  const ny = dx
+
+  // vector from a to b
+  const vx = b.x - a.x
+  const vy = b.y - a.y
+
+  // projection onto normal => signed perpendicular distance
+  return vx * nx + vy * ny
+}
+
+export function useResize(direction: Direction) {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const single = useSingleResize(direction)
+  const multi = useMultiResize(direction)
+  return selection.size === 1 ? single : multi
+}