@lazlon-platform/html-editor 0.4.0 → 0.5.0

package/lib/hooks/pointer/resize.ts

@@ -1,60 +1,115 @@
+import { TextNode, type HistoryEntry, type Node } from "@lazlon/html-editor/model"
+import { pick } from "es-toolkit"
 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 {
+  box,
+  boxRect,
+  deg,
+  floatNorm,
+  perpDistance,
+  point,
+  pointNorm,
+  pointSubtract,
+  rect,
+  resizeBox,
+  rotatePoint,
+  scaleBox,
+  vectorDotProd,
+  type Box,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+  type Size,
+} from "../../model/geometry/math"
+import { selectionBox } from "../../ui/selection"
 import { useEditor } from "../editor"
-import { usePointer } from "./pointer"
+import { cursorPosition, usePointer } from "./pointer"
 
-type Edge = "n" | "s" | "w" | "e"
-type Corner = "ne" | "nw" | "se" | "sw"
-type Direction = Edge | Corner
+const rectProps = ["x", "y", "width", "height"] as const
 
-type ResizeInit = {
-  rect: Rect
-  nodes: Array<Rect & { node: Node; undo: Rect }>
+function setNodeSize(node: Node, size: Point & Size) {
+  node.x = floatNorm(size.x)
+  node.y = floatNorm(size.y)
+  node.width = floatNorm(size.width)
+  node.height = floatNorm(size.height)
 }
 
-function useSingleResize(direction: Direction) {
+function setTextNodeSize(node: TextNode, size: Point & Size) {
+  const target = Math.max(1, size.height)
+  node.size = (node.size * target) / node.contentHeight
+  node.contentHeight = target
+  setNodeSize(node, size)
+}
+
+function scaleDistance(
+  base: Box,
+  direction: Edge | Corner,
+  anchor: Point,
+  cursor: Point,
+) {
+  const vector = pointSubtract(cursor, anchor)
+  const localDirection = pointNorm({
+    x: direction.includes("w") ? -base.width : direction.includes("e") ? base.width : 0,
+    y: direction.includes("n") ? -base.height : direction.includes("s") ? base.height : 0,
+  })
+  const worldDirection = rotatePoint(localDirection, point(), base.rotation)
+  const distance = vectorDotProd(vector, worldDirection)
+
+  if (direction.length === 1) return distance
+
+  const diagonal = Math.hypot(base.width, base.height)
+  return diagonal === 0 ? 0 : (distance * base.height) / diagonal
+}
+
+export function useSingleResize(direction: Edge | Corner) {
   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[]
+  const edges = direction.split("") as Edge[]
+  const [node] = useStore(editor, "selection")
+
+  const state = useRef({
+    baseSize: box(),
+    anchorPoint: point(),
+  })
 
   return usePointer({
-    onDown() {
-      if (!node || rest.length > 0) return false
-      const { x, y, width, height } = node
-      init.current = { x, y, width, height }
+    onDown(event) {
+      state.current = {
+        baseSize: box(node),
+        anchorPoint: cursorPosition(event, node),
+      }
     },
-    onMove({ start, event }) {
-      editor.action = { action: "resize", payload: { width: 0, height: 0 } }
-
-      let size = init.current
+    onMove(event) {
+      const cursor = cursorPosition(event, node)
 
-      for (const direction of directions) {
-        const r =
-          direction === "w" ? 90 : direction === "e" ? -90 : direction === "n" ? 180 : 0
-
-        size = resize(
-          size,
-          node.rotation,
+      if (node instanceof TextNode && direction !== "w" && direction !== "e") {
+        const size = scaleBox(
+          state.current.baseSize,
           direction,
-          distance(
-            { x: start.clientX, y: start.clientY },
-            { x: event.clientX, y: event.clientY },
-            node.rotation + r,
+          scaleDistance(
+            state.current.baseSize,
+            direction,
+            state.current.anchorPoint,
+            cursor,
           ),
         )
-      }
 
-      node.width = size.width
-      node.height = size.height
-      node.x = size.x
-      node.y = size.y
+        setTextNodeSize(node, boxRect(size))
+      } else {
+        let size = state.current.baseSize
+
+        for (const edge of edges) {
+          const r = edge === "w" ? 90 : edge === "e" ? -90 : edge === "n" ? 180 : 0
+          size = resizeBox(
+            size,
+            edge,
+            perpDistance(state.current.anchorPoint, cursor, deg(node.rotation + r)),
+          )
+        }
 
-      editor.action = { action: "resize", payload: size }
+        setNodeSize(node, boxRect(size))
+      }
     },
     onCancel() {
       editor.action = {}
@@ -62,111 +117,118 @@ function useSingleResize(direction: Direction) {
     onEnd() {
       editor.action = {}
 
-      const prev = init.current
-      const next = {
-        x: node.x,
-        y: node.y,
-        width: node.width,
-        height: node.height,
-      }
+      const prev = boxRect(state.current.baseSize)
+      const next = rect(node)
 
       editor.history.push({
-        redo: ["set-node-props", [node.id, next]],
-        undo: ["set-node-props", [node.id, prev]],
+        redo: ["set-node-props", [node.id, pick(prev, rectProps)]],
+        undo: ["set-node-props", [node.id, pick(next, rectProps)]],
       })
     },
   })
 }
 
-function useMultiResize(direction: Direction) {
+function useMultiResize(direction: Edge | Corner) {
   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: [],
+  const edges = direction.split("") as Edge[]
+
+  const state = useRef({
+    initialTargetRect: rect(),
+    initialCursorPos: point(),
+    nodes: Array<{
+      node: Node
+      baseSize: Box
+      relative: Rect
+    }>(),
   })
 
   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,
-        })),
+    onDown(event) {
+      const { x, y, width, height } = boxRect(selectionBox(editor.selection))
+
+      state.current = {
+        initialTargetRect: rect({ x, y, width, height }),
+        initialCursorPos: cursorPosition(event, editor.selectionPage!),
+        nodes: editor.selection
+          .values()
+          .toArray()
+          .map((node) => ({
+            node,
+            baseSize: box(node),
+            relative: rect({
+              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 }
+    onMove(event) {
+      const r = { ...state.current.initialTargetRect }
+      const p = pointSubtract(
+        cursorPosition(event, editor.selectionPage!),
+        state.current.initialCursorPos,
+      )
 
       /* mutate rect  */ {
-        const { x, y, height, width } = init.current.rect
+        const { x, y, height, width } = state.current.initialTargetRect
 
-        if (directions.includes("n") && height - py > 0) {
-          rect.height = height - py
-          rect.y = y + py
+        if (edges.includes("n") && height - p.y > 0) {
+          r.height = height - p.y
+          r.y = y + p.y
         }
-        if (directions.includes("s")) {
-          rect.height = height + py
+        if (edges.includes("s")) {
+          r.height = height + p.y
         }
-        if (directions.includes("w") && width - px > 0) {
-          rect.width = width - px
-          rect.x = x + px
+        if (edges.includes("w") && width - p.x > 0) {
+          r.width = width - p.x
+          r.x = x + p.x
         }
-        if (directions.includes("e")) {
-          rect.width = width + px
+        if (edges.includes("e")) {
+          r.width = width + p.x
         }
       }
 
       /* 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)
+        for (const { node, baseSize, relative } of state.current.nodes) {
+          const size = {
+            x: relative.x * r.width + r.x,
+            y: relative.y * r.height + r.y,
+            width: r.width * relative.width,
+            height: r.height * relative.height,
+          }
+
+          if (node instanceof TextNode && direction !== "w" && direction !== "e") {
+            const scaled = scaleBox(baseSize, direction, size.height - baseSize.height)
+
+            setTextNodeSize(node, {
+              x: size.x + size.width / 2 - scaled.width / 2,
+              y: size.y + size.height / 2 - scaled.height / 2,
+              width: scaled.width,
+              height: scaled.height,
+            })
+          } else {
+            setNodeSize(node, size)
+          }
         }
       }
 
-      editor.action = { action: "resize", payload: rect }
+      editor.action = { action: "resize", payload: r }
     },
+
     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 }],
-          ],
-        }),
-      )
+      const entries: HistoryEntry[] = state.current.nodes.map(({ node, baseSize }) => ({
+        redo: ["set-node-props", [node.id, pick(node, rectProps)]],
+        undo: ["set-node-props", [node.id, pick(boxRect(baseSize), rectProps)]],
+      }))
 
       editor.history.push({
         redo: ["batch", entries.map((e) => e.redo)],
@@ -176,106 +238,10 @@ function useMultiResize(direction: Direction) {
   })
 }
 
-/**
- * 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) {
+export function useResize(direction: Edge | Corner) {
   const editor = useEditor()
-  const selection = useStore(editor, "selection")
+  const nodes = useStore(editor, "selection")
   const single = useSingleResize(direction)
   const multi = useMultiResize(direction)
-  return selection.size === 1 ? single : multi
+  return nodes.size === 1 ? single : multi
 }

package/lib/hooks/pointer/rotation.ts

@@ -1,71 +1,58 @@
 import { useRef } from "react"
-import { useStore } from "react-bolt"
-import { angle, type Point } from "../../model/geometry"
+import { angle, deg, point, rectCenter, type Deg } from "../../model/geometry/math"
 import type { HistoryAction } from "../../model/history"
 import type { Node } from "../../model/node"
-import { getTargetDOMRect } from "../../ui/selection"
+import { selectionDOMRect } from "../../ui/selection"
 import { useEditor } from "../editor"
 import { usePointer } from "./pointer"
 
-type RotationState = {
-  anchor: Point
-  center: Point
-  deg: number
-  nodes: Array<{ node: Node; deg: number }>
-}
-
 function snappedDeg(startDeg: number, delta: number, shiftKey: boolean) {
   const rotation = startDeg + delta
-  return shiftKey ? Math.round(rotation / 45) * 45 : rotation
+  return deg(shiftKey ? Math.round(rotation / 45) * 45 : rotation)
 }
 
 export function useRotation() {
-  const start = useRef<RotationState | null>(null)
   const editor = useEditor()
-  const selection = useStore(editor, "selection")
-  const selectionArray = selection.values().toArray()
+
+  const state = useRef({
+    centerPoint: point(),
+    inititalDeg: deg(0),
+    nodes: Array<{ node: Node; deg: Deg }>(),
+  })
 
   return usePointer({
     onDown(event) {
-      const { x, y, width, height } = getTargetDOMRect(selection)
-      const anchor = {
-        x: x + width / 2,
-        y: height,
-      }
-      const center = {
-        x: x + width / 2,
-        y: y + height / 2,
-      }
-      const deg = angle(center, anchor, {
-        x: event.clientX,
-        y: event.clientY,
-      })
-      start.current = {
-        anchor,
-        center,
-        deg,
-        nodes: selectionArray.map((node) => ({
-          node,
-          deg: node.rotation,
-        })),
+      const target = selectionDOMRect(editor.selection)
+      const nodes = editor.selection.values().toArray()
+      const center = rectCenter(target)
+
+      state.current = {
+        centerPoint: center,
+        inititalDeg: angle(center, point(), {
+          x: event.clientX,
+          y: event.clientY,
+        }),
+        nodes: nodes.map((node) => ({ node, deg: node.rotation })),
       }
-      editor.action = { action: "rotate", payload: { deg: 0 } }
+
+      const deg = nodes.length === 1 ? nodes[0].rotation : 0
+      editor.action = { action: "rotate", payload: { deg } }
     },
-    onMove({ event }) {
-      const s = start.current
-      if (!s) return
 
-      const point = { x: event.clientX, y: event.clientY }
-      const deg = angle(s.center, s.anchor, point) - s.deg
+    onMove(event) {
+      const { centerPoint, inititalDeg, nodes } = state.current
+
+      const clientPoint = { x: event.clientX, y: event.clientY }
+      const deg = angle(centerPoint, point(), clientPoint) - inititalDeg
 
-      for (const n of s.nodes) {
+      for (const n of nodes) {
         n.node.rotation = snappedDeg(n.deg, deg, event.shiftKey)
       }
 
       const display =
-        s.nodes.length === 1
-          ? s.nodes[0].node.rotation
-          : snappedDeg(s.deg, deg, event.shiftKey)
+        nodes.length === 1
+          ? nodes[0].node.rotation
+          : snappedDeg(inititalDeg, deg, event.shiftKey)
 
       editor.action = {
         action: "rotate",
@@ -74,19 +61,19 @@ export function useRotation() {
         },
       }
     },
+
     onCancel() {
       editor.action = {}
-      start.current = null
     },
-    onEnd({ event }) {
-      const s = start.current
-      if (!s) return
 
-      const point = { x: event.clientX, y: event.clientY }
-      const deg = angle(s.center, s.anchor, point) - s.deg
+    onEnd(event) {
+      const { centerPoint, inititalDeg, nodes } = state.current
+
+      const clientPoint = { x: event.clientX, y: event.clientY }
+      const deg = angle(centerPoint, point(), clientPoint) - inititalDeg
 
-      if (s.nodes.length === 0) {
-        const [n] = s.nodes
+      if (nodes.length === 0) {
+        const [n] = nodes
         const rotation = snappedDeg(n.deg, deg, event.shiftKey)
         editor.history.push({
           redo: ["set-node-props", [n.node.id, { rotation }]],
@@ -97,7 +84,7 @@ export function useRotation() {
         const redo: HistoryAction[] = []
         const undo: HistoryAction[] = []
 
-        for (const n of s.nodes) {
+        for (const n of nodes) {
           const rotation = snappedDeg(n.deg, deg, event.shiftKey)
           redo.push(["set-node-props", [n.node.id, { rotation }]])
           undo.push(["set-node-props", [n.node.id, { rotation: n.deg }]])
@@ -111,7 +98,6 @@ export function useRotation() {
       }
 
       editor.action = {}
-      start.current = null
     },
   })
 }

package/lib/hooks/pointer/selectionFrame.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react"
 import { useComputed, useStore } from "react-bolt"
-import { getTargetDOMRect } from "../../ui/selection"
+import { pointSubtract } from "../../model/geometry/math"
+import { selectionDOMRect } from "../../ui/selection"
 import { useEditor } from "../editor"
 
 function arraysEqual<T>(a: T[], b: T[]): boolean {
@@ -73,23 +74,19 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
 
     if (props?.accountForSingleSelection && selection.size === 1 && frame) {
       const [firstNode] = selection
-      const { page } = firstNode
-
       const { x, y, width, height, rotation } = firstNode
-      const relative = page.ref!.getBoundingClientRect()
+      const relative = firstNode.page.ref!.getBoundingClientRect()
       const tx = relative.x - stage.x + x * zoom
       const ty = relative.y - stage.y + y * zoom
-
       frame.style.height = `${height * zoom}px`
       frame.style.width = `${width * zoom}px`
       frame.style.transform = `translate(${tx}px, ${ty}px) rotate(${rotation}deg)`
     } else if (frame) {
-      const { x, y, width, height } = getTargetDOMRect(selection)
-      const tx = x - stage.x
-      const ty = y - stage.y
-      frame.style.height = `${height}px`
-      frame.style.width = `${width}px`
-      frame.style.transform = `translate(${tx}px, ${ty}px)`
+      const dom = selectionDOMRect(selection)
+      const t = pointSubtract(dom, stage)
+      frame.style.height = `${dom.height}px`
+      frame.style.width = `${dom.width}px`
+      frame.style.transform = `translate(${t.x}px, ${t.y}px)`
     }
   })