@lazlon-platform/html-editor 0.4.0 → 0.5.0

package/lib/hooks/actions.ts

@@ -5,9 +5,10 @@ import type { Node, NodeProps } from "../model/node"
 import { GroupNode } from "../model/node/group"
 import type { Page } from "../model/page"
 import { flattenNodes } from "../model/traversal"
-import { getTargetRect } from "../ui/selection"
+import { selectionBox } from "../ui/selection"
 import { useBatchSet } from "./batch"
 import { useEditor } from "./editor"
+import { boxBounds } from "../model/geometry/math"
 
 export function clone(
   editor: Editor,
@@ -95,7 +96,7 @@ export function useGroupAction() {
 
   function group() {
     const { selection, selectionPage: page } = editor
-    const { width, height, x, y } = getTargetRect(selection)
+    const { width, height, x, y } = boxBounds(selectionBox(selection))
     if (selection.size === 0 || !page) return
 
     const group = new GroupNode(editor, page, {
@@ -296,7 +297,7 @@ export function useDistributeAction() {
   const editor = useEditor()
 
   function distribute(pos: "x" | "y", size: "width" | "height") {
-    const rect = getTargetRect(editor.selection)
+    const rect = boxBounds(selectionBox(editor.selection))
     const array = editor.selection.values().toArray()
 
     const undo: HistoryAction[] = array.map((node) => [

package/lib/hooks/node.ts

@@ -1,31 +1,39 @@
 import type { Node } from "../model"
-import { rotatedAABB } from "../model/geometry"
+import { box, boxBounds, deg } from "../model/geometry/math"
 import { useNodeField, useNodeFieldBatch } from "./batch"
 
 export function useVisualPositionBatch(nodes: Node[]) {
-  const rotation = useNodeField(nodes, "rotation", 0)
+  const rotation = useNodeField(nodes, "rotation", deg(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)
+  const bounds = boxBounds(
+    box({
+      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]
+      const delta = value - bounds[axis]
       return fn(axis === "x" ? x.value + delta : y.value + delta)
     }
   }
 
   return {
     x: {
-      value: box.x,
+      value: bounds.x,
       onChange: withBoundingBox("x", x.onChange),
       onChangeEnd: withBoundingBox("x", x.onChangeEnd),
     },
     y: {
-      value: box.y,
+      value: bounds.y,
       onChange: withBoundingBox("y", y.onChange),
       onChangeEnd: withBoundingBox("y", y.onChangeEnd),
     },

package/lib/hooks/pointer/moveable.ts

@@ -1,73 +1,94 @@
 import { useRef } from "react"
-import type { Point } from "../../model/geometry"
+import {
+  box,
+  boxBounds,
+  boxContainsPoint,
+  type Point,
+  point,
+  pointSubtract,
+  rect,
+} from "../../model/geometry/math"
 import type { HistoryEntry } from "../../model/history"
 import type { Node } from "../../model/node"
-import { getTargetRect, isPointerInSelectionRect } from "../../ui/selection"
+import { selectionBox } from "../../ui/selection"
 import { useEditor, usePage } from "../editor"
-import { usePointer } from "./pointer"
+import { cursorPosition, 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()
 
+  const state = useRef({
+    initialSelectionRect: rect(),
+    cursorOffset: point(),
+    nodes: Array<{
+      node: Node
+      startingPoint: Point
+      selectionOffset: Point
+    }>(),
+  })
+
   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),
-        },
+      const cursor = cursorPosition(event, page)
+
+      // clicked outside of selection, try grabbing nodes under the cursor
+      if (!boxContainsPoint(selectionBox(editor.selection), cursor)) {
+        const stackOrderedNodes = editor.nodes.values().toArray().toReversed()
+        for (const node of stackOrderedNodes) {
+          if (boxContainsPoint(box(node), cursor)) {
+            editor.selection = new Set([node])
+            break
+          }
+        }
       }
 
-      for (const node of selection) {
+      if (editor.selection.size === 0) return false
+
+      const initialSelectionBox = selectionBox(editor.selection)
+      const initialSelectionRect = boxBounds(initialSelectionBox)
+
+      for (const node of editor.selection) {
         if (node.blockMove(event)) return false
       }
 
-      return isPointerInSelectionRect(selection, event)
+      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
+      }
     },
 
-    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
+    onMove(event) {
+      const cursor = cursorPosition(event, page)
+      const target = pointSubtract(cursor, state.current.cursorOffset)
+
+      const { x, y } = snap(
+        !event.shiftKey,
+        rect({
+          x: target.x,
+          y: target.y,
+          width: state.current.initialSelectionRect.width,
+          height: state.current.initialSelectionRect.height,
+        }),
+      )
+
+      for (const { node, selectionOffset } of state.current.nodes) {
+        node.x = x + selectionOffset.x
+        node.y = y + selectionOffset.y
       }
 
       editor.action = { action: "move", payload: { x, y } }
@@ -82,12 +103,12 @@ export function useMoveable() {
       editor.action = {}
       page.snapLines = []
 
-      const entries = startpoints.current.map(({ node, start }): HistoryEntry => {
-        return {
+      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.history.push({
         redo: ["batch", entries.map((e) => e.redo)],

package/lib/hooks/pointer/pointer.ts

@@ -1,15 +1,26 @@
+import { Page, type Node } from "@lazlon/html-editor/model"
 import { useCallback, useRef } from "react"
-
-type MoveEvent = {
-  start: React.PointerEvent
-  event: globalThis.PointerEvent
-}
+import { floatNorm, type Point } from "../../model/geometry/math"
 
 export type UsePointerProps = {
   onDown?(event: React.PointerEvent): boolean | void
-  onMove?(event: MoveEvent): void
-  onEnd?(event: MoveEvent): void
-  onCancel?(event: MoveEvent): void
+  onMove?(event: globalThis.PointerEvent): void
+  onEnd?(event: globalThis.PointerEvent): void
+  onCancel?(event: globalThis.PointerEvent): void
+}
+
+export function cursorPosition(
+  event: { clientX: number; clientY: number },
+  relativeTo: Page | Node,
+): 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),
+  }
 }
 
 export function usePointer(props: UsePointerProps) {
@@ -23,7 +34,7 @@ export function usePointer(props: UsePointerProps) {
 
       function onPointerMove(event: globalThis.PointerEvent) {
         isMovingRef.current = true
-        onMove?.({ start, event })
+        onMove?.(event)
       }
 
       function onPointerUp(event: globalThis.PointerEvent) {
@@ -32,9 +43,9 @@ export function usePointer(props: UsePointerProps) {
         removeEventListener("pointercancel", onPointerUp)
 
         if (isMovingRef.current) {
-          onEnd?.({ start, event })
+          onEnd?.(event)
         } else {
-          onCancel?.({ start, event })
+          onCancel?.(event)
         }
 
         isMovingRef.current = false