@lazlon-platform/html-editor 0.5.0 → 0.7.0

package/lib/hooks/pointer/{moveable.ts → useMoveable.ts}

@@ -1,44 +1,61 @@
 import { useRef } from "react"
+import { LineNode } from "../../model"
 import {
+  accessibleLine,
   box,
   boxBounds,
   boxContainsPoint,
+  lineContainsPoint,
   type Point,
   point,
   pointSubtract,
   rect,
 } from "../../model/geometry/math"
-import type { HistoryEntry } from "../../model/history"
 import type { Node } from "../../model/node"
 import { selectionBox } from "../../ui/selection"
 import { useEditor, usePage } from "../editor"
-import { cursorPosition, usePointer } from "./pointer"
-import { useSnap } from "./snap"
+import { cursorPosition, usePointer } from "./usePointer"
+import { useSnap } from "./useSnap"
 
 export function useMoveable() {
   const editor = useEditor()
   const page = usePage()
-  const snap = useSnap()
+  const snap = useSnap(page)
 
   const state = useRef({
-    initialSelectionRect: rect(),
+    baseRect: rect(),
     cursorOffset: point(),
     nodes: Array<{
       node: Node
-      startingPoint: Point
+      basePosition: Point
       selectionOffset: Point
     }>(),
   })
 
+  function isCursorInSelection(cursor: Point) {
+    const [firstNode, ...rest] = editor.selection
+    if (rest.length === 0 && firstNode && firstNode instanceof LineNode) {
+      return lineContainsPoint(accessibleLine(firstNode), cursor)
+    }
+    return boxContainsPoint(selectionBox(editor.selection), cursor)
+  }
+
+  function isNodeHit(node: Node, cursor: Point) {
+    if (node instanceof LineNode) {
+      return lineContainsPoint(accessibleLine(node), cursor)
+    }
+    return boxContainsPoint(box(node), cursor)
+  }
+
   return usePointer({
     onDown(event) {
       const cursor = cursorPosition(event, page)
 
       // clicked outside of selection, try grabbing nodes under the cursor
-      if (!boxContainsPoint(selectionBox(editor.selection), cursor)) {
+      if (!isCursorInSelection(cursor)) {
         const stackOrderedNodes = editor.nodes.values().toArray().toReversed()
         for (const node of stackOrderedNodes) {
-          if (boxContainsPoint(box(node), cursor)) {
+          if (isNodeHit(node, cursor)) {
             editor.selection = new Set([node])
             break
           }
@@ -46,29 +63,25 @@ export function useMoveable() {
       }
 
       if (editor.selection.size === 0) return false
-
-      const initialSelectionBox = selectionBox(editor.selection)
-      const initialSelectionRect = boxBounds(initialSelectionBox)
+      if (!isCursorInSelection(cursor)) return false
 
       for (const node of editor.selection) {
-        if (node.blockMove(event)) return false
+        if (node.locked) return false
       }
 
-      if (boxContainsPoint(initialSelectionBox, cursor)) {
-        state.current = {
-          initialSelectionRect,
-          cursorOffset: pointSubtract(cursor, initialSelectionRect),
-          nodes: editor.selection
-            .values()
-            .map((node) => ({
-              node,
-              startingPoint: point(node),
-              selectionOffset: pointSubtract(point(node), initialSelectionRect),
-            }))
-            .toArray(),
-        }
-      } else {
-        return false
+      const baseRect = boxBounds(selectionBox(editor.selection))
+
+      state.current = {
+        baseRect,
+        cursorOffset: pointSubtract(cursor, baseRect),
+        nodes: editor.selection
+          .values()
+          .map((node) => ({
+            node,
+            basePosition: point(node),
+            selectionOffset: pointSubtract(point(node), baseRect),
+          }))
+          .toArray(),
       }
     },
 
@@ -81,8 +94,8 @@ export function useMoveable() {
         rect({
           x: target.x,
           y: target.y,
-          width: state.current.initialSelectionRect.width,
-          height: state.current.initialSelectionRect.height,
+          width: state.current.baseRect.width,
+          height: state.current.baseRect.height,
         }),
       )
 
@@ -103,17 +116,12 @@ export function useMoveable() {
       editor.action = {}
       page.snapLines = []
 
-      const entries: HistoryEntry[] = state.current.nodes.map(
-        ({ node, startingPoint: start }) => ({
-          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.pushHistory(
+        state.current.nodes.map(({ node, basePosition }) => ({
+          redo: ["set-node-props", [node.id, point(node)]],
+          undo: ["set-node-props", [node.id, basePosition]],
+        })),
       )
-
-      editor.history.push({
-        redo: ["batch", entries.map((e) => e.redo)],
-        undo: ["batch", entries.map((e) => e.undo)],
-      })
     },
   })
 }

package/lib/hooks/pointer/{pointer.ts → usePointer.ts}

@@ -1,4 +1,4 @@
-import { Page, type Node } from "@lazlon/html-editor/model"
+import { Page } from "@lazlon/html-editor/model"
 import { useCallback, useRef } from "react"
 import { floatNorm, type Point } from "../../model/geometry/math"
 
@@ -11,15 +11,14 @@ export type UsePointerProps = {
 
 export function cursorPosition(
   event: { clientX: number; clientY: number },
-  relativeTo: Page | Node,
+  page: Page,
 ): Point {
-  const page = relativeTo instanceof Page ? relativeTo : relativeTo.page
   const { zoom } = page.editor
   const { x, y } = page.ref!.getBoundingClientRect()
 
   return {
-    x: floatNorm(event.clientX / zoom - x),
-    y: floatNorm(event.clientY / zoom - y),
+    x: floatNorm((event.clientX - x) / zoom),
+    y: floatNorm((event.clientY - y) / zoom),
   }
 }
 

package/lib/hooks/pointer/useResize/index.ts

@@ -0,0 +1,31 @@
+import { TextNode } from "@lazlon/html-editor/model"
+import { useComputed, useStore } from "react-bolt"
+import type { Corner, Edge } from "../../../model/geometry/math"
+import { useEditor } from "../../editor"
+import { useMultiResize } from "./multi"
+import { useSingleRegularNodeResize } from "./singleRegularNode"
+import { useSingleTextNodeResize } from "./singleTextNode"
+import type { usePointer } from "../usePointer"
+
+export function useResize(direction: Edge | Corner): ReturnType<typeof usePointer> {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const [node, ...nodes] = selection
+  const singleText = useSingleTextNodeResize(direction)
+  const single = useSingleRegularNodeResize(direction)
+  const multi = useMultiResize(direction)
+  const isLocked = useComputed(() => selection.values().some((node) => node.locked))
+
+  if (isLocked) {
+    return {
+      onPointerDown() {},
+      isMoving: () => false,
+    }
+  }
+
+  return nodes.length === 0
+    ? node instanceof TextNode && direction !== "w" && direction !== "e"
+      ? singleText
+      : single
+    : multi
+}

package/lib/hooks/pointer/useResize/multi.ts

@@ -0,0 +1,161 @@
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import { LineNode, TextNode, type HistoryEntry, type Node } from "../../../model"
+import {
+  boxRect,
+  point,
+  pointSubtract,
+  rect,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+} from "../../../model/geometry/math"
+import { selectionBox } from "../../../ui/selection"
+import { useEditor } from "../../editor"
+import { cursorPosition, usePointer } from "../usePointer"
+import { useMultiLineNodeResize } from "./multiLineNode"
+import { useMultiRegularNodeResize } from "./multiRegularNode"
+import { useMultiTextNodeResize } from "./multiTextNode"
+
+interface MultiResizeHookDownContext {
+  event: React.PointerEvent
+  baseSelectionRect: Rect
+  baseCursorPosition: Point
+  relativeSize(node: Node): Rect
+}
+
+interface MultiResizeHookMoveContext {
+  event: globalThis.PointerEvent
+  baseSelectionRect: Rect
+  baseCursorPosition: Point
+  selectionRect: Rect
+  cursorPosition: Point
+}
+
+interface MultiResizeHookEndContext {
+  event: globalThis.PointerEvent
+  baseSelectionRect: Rect
+  baseCursorPosition: Point
+}
+
+export interface MultiResizeHook<N extends Node> {
+  onDown(ctx: MultiResizeHookDownContext): void
+  onMove(ctx: MultiResizeHookMoveContext): void
+  onEnd(ctx: MultiResizeHookEndContext): Array<HistoryEntry<N>>
+}
+
+export function useMultiResize(direction: Edge | Corner) {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection").values().toArray()
+
+  const text = useMultiTextNodeResize(
+    direction,
+    selection.filter((node) => node instanceof TextNode),
+  )
+
+  const line = useMultiLineNodeResize(
+    direction,
+    selection.filter((node) => node instanceof LineNode),
+  )
+
+  const regular = useMultiRegularNodeResize(
+    direction,
+    selection.filter((node) => !(node instanceof TextNode || node instanceof LineNode)),
+  )
+
+  const state = useRef({
+    baseSelectionRect: rect(),
+    baseCursorPosition: point(),
+  })
+
+  return usePointer({
+    onDown(event) {
+      if (selection.length === 0 || !editor.selectionPage) {
+        return false
+      }
+
+      const baseSelectionRect = boxRect(selectionBox(editor.selection))
+      const baseCursorPosition = cursorPosition(event, editor.selectionPage!)
+      const { x, y, width, height } = baseSelectionRect
+
+      const ctx: MultiResizeHookDownContext = {
+        event,
+        baseSelectionRect,
+        baseCursorPosition,
+        relativeSize: (node) => {
+          return rect({
+            x: (node.x - x) / width,
+            y: (node.y - y) / height,
+            width: node.width / width,
+            height: node.height / height,
+          })
+        },
+      }
+
+      state.current = {
+        baseSelectionRect,
+        baseCursorPosition,
+      }
+
+      text.onDown(ctx)
+      line.onDown(ctx)
+      regular.onDown(ctx)
+    },
+
+    onMove(event) {
+      const r = { ...state.current.baseSelectionRect }
+      const p = pointSubtract(
+        cursorPosition(event, editor.selectionPage!),
+        state.current.baseCursorPosition,
+      )
+
+      /* mutate rect  */ {
+        if (direction.includes("n") && r.height - p.y > 0) {
+          r.height -= p.y
+          r.y += p.y
+        }
+        if (direction.includes("s")) {
+          r.height += p.y
+        }
+        if (direction.includes("w") && r.width - p.x > 0) {
+          r.width -= p.x
+          r.x += p.x
+        }
+        if (direction.includes("e")) {
+          r.width += p.x
+        }
+      }
+
+      const ctx: MultiResizeHookMoveContext = {
+        event,
+        baseSelectionRect: state.current.baseSelectionRect,
+        baseCursorPosition: state.current.baseCursorPosition,
+        selectionRect: r,
+        cursorPosition: p,
+      }
+
+      text.onMove(ctx)
+      line.onMove(ctx)
+      regular.onMove(ctx)
+
+      editor.action = { action: "resize", payload: r }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd(event) {
+      editor.action = {}
+
+      const ctx: MultiResizeHookEndContext = {
+        event,
+        baseSelectionRect: state.current.baseSelectionRect,
+        baseCursorPosition: state.current.baseCursorPosition,
+      }
+
+      editor.pushHistory([...text.onEnd(ctx), ...line.onEnd(ctx), ...regular.onEnd(ctx)])
+    },
+  })
+}

package/lib/hooks/pointer/useResize/multiLineNode.ts

@@ -0,0 +1,99 @@
+import { useRef } from "react"
+import type { LineNode } from "../../../model"
+import {
+  deg,
+  floatNorm,
+  point,
+  pointSubtract,
+  rect,
+  rectCenter,
+  rotatePoint,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+} from "../../../model/geometry/math"
+import type { MultiResizeHook } from "./multi"
+
+type NodeState = {
+  node: LineNode
+  basePoints: Point[]
+  baseX: number
+  baseY: number
+  relativeVertices: Point[]
+}
+
+function relativePoint(p: Point, selectionRect: Rect): Point {
+  return {
+    x: selectionRect.width === 0 ? 0 : (p.x - selectionRect.x) / selectionRect.width,
+    y: selectionRect.height === 0 ? 0 : (p.y - selectionRect.y) / selectionRect.height,
+  }
+}
+
+function pagePoint(relative: Point, selectionRect: Rect): Point {
+  return {
+    x: selectionRect.x + relative.x * selectionRect.width,
+    y: selectionRect.y + relative.y * selectionRect.height,
+  }
+}
+
+function unrotatedPagePoints(vertices: Point[], rotation: number): Point[] {
+  const origin = point()
+  const unrotatedBounds = rect(
+    ...vertices.map((p) => rotatePoint(p, origin, deg(-rotation))),
+  )
+  const center = rotatePoint(rectCenter(unrotatedBounds), origin, deg(rotation))
+  return vertices.map((p) => rotatePoint(p, center, deg(-rotation)))
+}
+
+function setLinePoints(node: LineNode, pagePoints: Point[]) {
+  const bounds = point(rect(...pagePoints))
+  node.x = floatNorm(bounds.x)
+  node.y = floatNorm(bounds.y)
+  node.points = pagePoints.map((p) => pointSubtract(p, bounds))
+}
+
+export function useMultiLineNodeResize(
+  _direction: Edge | Corner,
+  nodes: LineNode[],
+): MultiResizeHook<LineNode> {
+  const state = useRef(Array<NodeState>())
+
+  function redoProps(state: NodeState) {
+    const { x, y, points } = state.node
+    return { x, y, points }
+  }
+
+  function undoProps(state: NodeState) {
+    const { baseX: x, baseY: y, basePoints: points } = state
+    return { x, y, points }
+  }
+
+  return {
+    onDown({ baseSelectionRect }) {
+      state.current = nodes.map((node) => {
+        return {
+          node,
+          basePoints: node.points,
+          baseX: node.x,
+          baseY: node.y,
+          relativeVertices: node.vertices.map((p) => relativePoint(p, baseSelectionRect)),
+        }
+      })
+    },
+
+    onMove({ selectionRect }) {
+      for (const item of state.current) {
+        const vertices = item.relativeVertices.map((p) => pagePoint(p, selectionRect))
+        setLinePoints(item.node, unrotatedPagePoints(vertices, item.node.rotation))
+      }
+    },
+
+    onEnd() {
+      return state.current.map((state) => ({
+        redo: ["set-node-props", [state.node.id, redoProps(state)]],
+        undo: ["set-node-props", [state.node.id, undoProps(state)]],
+      }))
+    },
+  }
+}

package/lib/hooks/pointer/useResize/multiRegularNode.ts

@@ -0,0 +1,109 @@
+import { useRef } from "react"
+import type { Node } from "../../../model"
+import {
+  box,
+  boxRect,
+  rect,
+  rectCenter,
+  type Box,
+  type Corner,
+  type Edge,
+  type Point,
+  type Rect,
+} from "../../../model/geometry/math"
+import type { MultiResizeHook } from "./multi"
+import { setRegularNodeSize } from "./singleRegularNode"
+
+type NodeState = {
+  node: Node
+  baseSize: Box
+  relative: Rect
+}
+
+function resizeScale(enabled: boolean, base: number, target: number) {
+  return enabled && base !== 0 ? target / base : 1
+}
+
+function selectionScale(
+  direction: Edge | Corner,
+  baseSelectionRect: Rect,
+  selectionRect: Rect,
+) {
+  return {
+    x: resizeScale(
+      direction.includes("w") || direction.includes("e"),
+      baseSelectionRect.width,
+      selectionRect.width,
+    ),
+    y: resizeScale(
+      direction.includes("n") || direction.includes("s"),
+      baseSelectionRect.height,
+      selectionRect.height,
+    ),
+  }
+}
+
+function scaledRegularBox(baseSize: Box, target: Rect, scale: Point): Box {
+  const r = (baseSize.rotation * Math.PI) / 180
+  const cos = Math.cos(r)
+  const sin = Math.sin(r)
+  const center = rectCenter(target)
+
+  return {
+    center,
+    pivot: center,
+    rotation: baseSize.rotation,
+    width: baseSize.width * Math.hypot(scale.x * cos, scale.y * sin),
+    height: baseSize.height * Math.hypot(scale.x * sin, scale.y * cos),
+  }
+}
+
+export function useMultiRegularNodeResize(
+  direction: Edge | Corner,
+  nodes: Node[],
+): MultiResizeHook<Node> {
+  const state = useRef(Array<NodeState>())
+
+  function redoProps(state: NodeState) {
+    const { x, y, width, height } = state.node
+    return { x, y, width, height }
+  }
+
+  function undoProps(state: NodeState) {
+    const { x, y, width, height } = boxRect(state.baseSize)
+    return { x, y, width, height }
+  }
+
+  return {
+    onDown({ relativeSize }) {
+      state.current = nodes.map((node) => ({
+        node,
+        baseSize: box(node),
+        relative: relativeSize(node),
+      }))
+    },
+
+    onMove({ baseSelectionRect, selectionRect }) {
+      const { x, y, width, height } = selectionRect
+      const scale = selectionScale(direction, baseSelectionRect, selectionRect)
+
+      for (const { node, relative, baseSize } of state.current) {
+        const size = rect({
+          x: relative.x * width + x,
+          y: relative.y * height + y,
+          width: width * relative.width,
+          height: height * relative.height,
+        })
+
+        setRegularNodeSize(node, scaledRegularBox(baseSize, size, scale))
+      }
+    },
+
+    onEnd() {
+      return state.current.map((state) => ({
+        undo: ["set-node-props", [state.node.id, undoProps(state)]],
+        redo: ["set-node-props", [state.node.id, redoProps(state)]],
+      }))
+    },
+  }
+}

package/lib/hooks/pointer/useResize/multiTextNode.ts

@@ -0,0 +1,108 @@
+import { useRef } from "react"
+import { TextNode } from "../../../model"
+import {
+  box,
+  boxRect,
+  rect,
+  scaleBox,
+  type Box,
+  type Corner,
+  type Edge,
+  type Rect,
+} from "../../../model/geometry/math"
+import type { MultiResizeHook } from "./multi"
+import { setTextNodeSize } from "./singleTextNode"
+import { setRegularNodeSize } from "./singleRegularNode"
+
+type NodeState = {
+  node: TextNode
+  baseFontSize: number
+  baseBoxSize: Box
+  relative: Rect
+}
+
+function textScale(base: Box, target: Rect, direction: Edge | Corner) {
+  const horizontal = direction.includes("w") || direction.includes("e")
+  const vertical = direction.includes("n") || direction.includes("s")
+  const widthScale = base.width === 0 ? 1 : target.width / base.width
+  const heightScale = base.height === 0 ? 1 : target.height / base.height
+
+  if (horizontal && vertical) return Math.min(widthScale, heightScale)
+  if (horizontal) return widthScale
+  return heightScale
+}
+
+function scaledTextBox(base: Box, target: Rect, direction: Edge | Corner) {
+  const scale = textScale(base, target, direction)
+  const by =
+    direction.includes("n") || direction.includes("s")
+      ? base.height * scale - base.height
+      : base.width * scale - base.width
+
+  return scaleBox(base, direction, by)
+}
+
+export function useMultiTextNodeResize(
+  direction: Edge | Corner,
+  nodes: TextNode[],
+): MultiResizeHook<TextNode> {
+  const state = useRef(Array<NodeState>())
+
+  function redoProps(state: NodeState) {
+    const { x, y, width, height, size } = state.node
+    return { x, y, width, height, size }
+  }
+
+  function undoProps(state: NodeState) {
+    const { baseBoxSize, baseFontSize: size } = state
+    const { x, y, width, height } = boxRect(baseBoxSize)
+    return { x, y, width, height, size }
+  }
+
+  return {
+    onDown({ relativeSize }) {
+      state.current = nodes.map((node) => ({
+        node,
+        baseFontSize: node.size,
+        baseBoxSize: box(node),
+        relative: relativeSize(node),
+      }))
+    },
+
+    onMove({ selectionRect }) {
+      const { width, height, x, y } = selectionRect
+      for (const { node, relative, baseBoxSize, baseFontSize } of state.current) {
+        const size = rect({
+          x: relative.x * width + x,
+          y: relative.y * height + y,
+          width: width * relative.width,
+          height: height * relative.height,
+        })
+
+        if (direction === "w" || direction === "e") {
+          setRegularNodeSize(node, box(size))
+        } else {
+          const scaled = scaledTextBox(baseBoxSize, size, direction)
+          setTextNodeSize(
+            node,
+            baseFontSize,
+            baseBoxSize,
+            box({
+              x: size.x + size.width / 2 - scaled.width / 2,
+              y: size.y + size.height / 2 - scaled.height / 2,
+              width: scaled.width,
+              height: scaled.height,
+            }),
+          )
+        }
+      }
+    },
+
+    onEnd() {
+      return state.current.map((state) => ({
+        redo: ["set-node-props", [state.node.id, redoProps(state)]],
+        undo: ["set-node-props", [state.node.id, undoProps(state)]],
+      }))
+    },
+  }
+}