@lazlon-platform/html-editor 0.4.0 → 0.6.0

package/lib/hooks/actions.ts

@@ -1,11 +1,21 @@
 import { useComputed } from "react-bolt"
+import {
+  flattenNodes,
+  GroupNode,
+  type HistoryAction,
+  type Node,
+  type NodeProps,
+  type Page,
+} from "../model"
 import type { Editor, NodeConstructor } from "../model/editor"
-import type { HistoryAction } from "../model/history"
-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 {
+  boxBounds,
+  deg,
+  floatNorm,
+  rectCenter,
+  rotatePoint,
+} from "../model/geometry/math"
+import { selectionBox } from "../ui/selection"
 import { useBatchSet } from "./batch"
 import { useEditor } from "./editor"
 
@@ -14,7 +24,7 @@ export function clone(
   node: Node,
   props?: ((props: NodeProps) => Partial<NodeProps>) | Partial<NodeProps>,
 ) {
-  const copy = node.serialize().props
+  const copy = node.props
   const newProps = typeof props === "function" ? props(copy) : props
   const newNode = editor.deserializeNode(node.page, {
     props: { ...copy, ...newProps },
@@ -34,14 +44,14 @@ export function useAddNodeAction(page?: Page) {
 
   return function addNode<N extends NodeConstructor>(
     NodeClass: N,
-    props?: Partial<ConstructorParameters<N>[2]>,
+    props?: Partial<N["prototype"]["props"]>,
   ) {
     const [firstPage] = editor.pages.values()
     const targetPage = page ?? firstPage
     if (!targetPage) return
     const { width, height, nodes } = targetPage
 
-    const node = new NodeClass(editor, targetPage, {
+    const node = new NodeClass(targetPage, {
       id: editor.id(),
       x: Math.round(width / 2) - 50,
       y: Math.round(height / 2) - 50,
@@ -52,7 +62,7 @@ export function useAddNodeAction(page?: Page) {
 
     targetPage.nodes = new Map([...nodes, [node.id, node]])
     editor.history.push({
-      redo: ["add-node", [targetPage.id, [node.serialize()]]],
+      redo: ["add-node", [targetPage.id, [editor.serializeNode(node)]]],
       undo: ["delete-node", [targetPage.id, [node.id]]],
     })
 
@@ -82,7 +92,7 @@ export function useTrashAction() {
 
     editor.history.push({
       redo: ["delete-node", [page.id, array.map((node) => node.id)]],
-      undo: ["add-node", [page.id, array.map((n) => n.serialize())]],
+      undo: ["add-node", [page.id, array.map((n) => editor.serializeNode(n))]],
     })
 
     editor.selection = new Set()
@@ -95,25 +105,28 @@ 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, {
+    const group = new GroupNode(page, {
       id: editor.id(),
       width,
       height,
       x,
       y,
-      nodes: selection
+    })
+
+    group.nodes = new Set(
+      selection
         .values()
         .map((node) =>
           clone(editor, node, (n) => ({
             x: n.x - x,
             y: n.y - y,
-          })).serialize(),
+          })),
         )
         .toArray(),
-    })
+    )
 
     editor.selection = new Set()
     page.nodes = new Map([
@@ -138,7 +151,7 @@ export function useGroupAction() {
                 .toArray(),
             ],
           ],
-          ["add-node", [page.id, [group.serialize()]]],
+          ["add-node", [page.id, [editor.serializeNode(group)]]],
         ],
       ],
       undo: [
@@ -151,7 +164,7 @@ export function useGroupAction() {
               page.id,
               selection
                 .values()
-                .map((n) => n.serialize())
+                .map((n) => editor.serializeNode(n))
                 .toArray(),
             ],
           ],
@@ -162,13 +175,28 @@ export function useGroupAction() {
 
   function ungroup(group: GroupNode) {
     const page = group.page
+    const groupCenter = rectCenter(group)
     const nodes = group.nodes
       .values()
       .map((node) =>
-        clone(editor, node, (n) => ({
-          x: n.x + group.x,
-          y: n.y + group.y,
-        })),
+        clone(editor, node, (n) => {
+          const center = rotatePoint(
+            rectCenter({
+              x: n.x + group.x,
+              y: n.y + group.y,
+              width: n.width,
+              height: n.height,
+            }),
+            groupCenter,
+            group.rotation,
+          )
+
+          return {
+            x: floatNorm(center.x - n.width / 2),
+            y: floatNorm(center.y - n.height / 2),
+            rotation: deg((n.rotation ?? 0) + group.rotation),
+          }
+        }),
       )
       .toArray()
 
@@ -183,14 +211,14 @@ export function useGroupAction() {
         "batch",
         [
           ["delete-node", [page.id, [group.id]]],
-          ["add-node", [page.id, nodes.map((n) => n.serialize())]],
+          ["add-node", [page.id, nodes.map((n) => editor.serializeNode(n))]],
         ],
       ],
       undo: [
         "batch",
         [
           ["delete-node", [page.id, nodes.map((node) => node.id)]],
-          ["add-node", [page.id, [group.serialize()]]],
+          ["add-node", [page.id, [editor.serializeNode(group)]]],
         ],
       ],
     })
@@ -225,7 +253,7 @@ export function useDuplicateAction() {
 
     editor.selection = new Set(nodes)
     editor.history.push({
-      redo: ["add-node", [page.id, nodes.map((n) => n.serialize())]],
+      redo: ["add-node", [page.id, nodes.map((n) => editor.serializeNode(n))]],
       undo: ["delete-node", [page.id, nodes.map((node) => node.id)]],
     })
   }
@@ -296,7 +324,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/batch.ts

@@ -5,27 +5,37 @@ import { type HistoryAction } from "../model/history"
 import { Node } from "../model/node"
 import { useEditor } from "./editor"
 
+export function reduce<T>(values: T[], fallback: T) {
+  const [first, ...rest] = values
+  return rest.reduce(
+    (acc, value) => (isEqual(value, acc) ? acc : fallback),
+    values.length > 0 ? first : fallback,
+  )
+}
+
 export function useNodeField<N extends Node, K extends keyof N>(
   nodes: Iterable<N>,
   key: K,
   fallback: N[K],
 ) {
-  const [first, ...rest] = nodes
+  const values = Array.from(nodes).map((node) => node[key])
   return useComputed<N[K]>({
     equals: isEqual,
-    fn: () =>
-      rest.reduce(
-        (acc, node) => (isEqual(node[key], acc) ? acc : fallback),
-        first ? first[key] : fallback,
-      ),
+    fn: () => reduce(values, fallback),
   })
 }
 
+export interface NodeFieldBatch<N extends Node, T> {
+  value: T
+  onChange(set: T | ((node: N) => T)): void
+  onChangeEnd(set: T | ((node: N) => T)): void
+}
+
 export function useNodeFieldBatch<N extends Node, K extends keyof N>(
   nodes: N[],
   key: K,
   fallback: N[K],
-) {
+): NodeFieldBatch<N, N[K]> {
   const { history } = useEditor()
   const initial = useRef<Map<N, N[K]> | null>(null)
 

package/lib/hooks/index.ts

@@ -13,6 +13,7 @@ export {
 export { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
 export { EditorContext, PageContext, useEditor, usePage } from "./editor"
 export { useMoveable } from "./pointer/moveable"
+export { useMovePoint } from "./pointer/movePoint"
 export { usePointer } from "./pointer/pointer"
 export { useResize } from "./pointer/resize"
 export { useRotation } from "./pointer/rotation"

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/movePoint.ts

@@ -0,0 +1,75 @@
+import { useRef } from "react"
+import type { LineNode } from "../../model"
+import {
+  point,
+  pointAdd,
+  pointSubtract,
+  rect,
+  type Point,
+} from "../../model/geometry/math"
+import { useEditor } from "../editor"
+import { cursorPosition, usePointer } from "./pointer"
+import { useSnap } from "./snap"
+
+export function useMovePoint(props: { lineNode: LineNode; pointIndex: number }) {
+  const editor = useEditor()
+  const { lineNode, pointIndex } = props
+  const page = lineNode.page
+  const snap = useSnap(page)
+
+  const state = useRef({
+    cursorOffset: point(),
+    initialAnchor: point(),
+    initialPoints: [] as Point[],
+  })
+
+  return usePointer({
+    onDown(event) {
+      const cursor = cursorPosition(event, page)
+      const linePoint = lineNode.points[pointIndex]
+      const pointPosition = pointAdd(lineNode, linePoint)
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      state.current = {
+        cursorOffset: pointSubtract(cursor, pointPosition),
+        initialAnchor: point(lineNode),
+        initialPoints: Array.from(lineNode.points),
+      }
+    },
+    onMove(event) {
+      const { cursorOffset, initialPoints, initialAnchor } = state.current
+      const cursor = pointSubtract(cursorPosition(event, page), cursorOffset)
+      const snapped = snap(
+        !event.shiftKey,
+        rect({ x: cursor.x, y: cursor.y, width: 0, height: 0 }),
+      )
+
+      const points = initialPoints.map((p, i) =>
+        i === pointIndex ? snapped : pointAdd(initialAnchor, p),
+      )
+
+      const bounds = point(rect(...points))
+
+      lineNode.x = bounds.x
+      lineNode.y = bounds.y
+      lineNode.points = points.map((p) => pointSubtract(p, bounds))
+
+      editor.action = { action: "move", payload: point(snapped) }
+    },
+    onCancel() {
+      editor.action = {}
+      page.snapLines = []
+    },
+    onEnd() {
+      editor.action = {}
+      page.snapLines = []
+
+      lineNode.page.editor.history.push<LineNode>({
+        redo: ["set-node-props", [lineNode.id, { points: lineNode.points }]],
+        undo: ["set-node-props", [lineNode.id, { points: state.current.initialPoints }]],
+      })
+    },
+  })
+}

package/lib/hooks/pointer/moveable.ts

@@ -1,73 +1,108 @@
 import { useRef } from "react"
-import type { Point } from "../../model/geometry"
+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 { 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 },
-}
+import { LineNode } from "@lazlon/html-editor/model"
 
 export function useMoveable() {
   const editor = useEditor()
   const page = usePage()
-  const startpoints = useRef(Array<StartPoints>())
-  const move = useRef(moveInit)
-  const snap = useSnap()
+  const snap = useSnap(page)
+
+  const state = useRef({
+    initialSelectionRect: rect(),
+    cursorOffset: point(),
+    nodes: Array<{
+      node: Node
+      startingPoint: 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 { 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 (!isCursorInSelection(cursor)) {
+        const stackOrderedNodes = editor.nodes.values().toArray().toReversed()
+        for (const node of stackOrderedNodes) {
+          if (isNodeHit(node, cursor)) {
+            editor.selection = new Set([node])
+            break
+          }
+        }
       }
 
-      for (const node of selection) {
-        if (node.blockMove(event)) return false
+      if (editor.selection.size === 0) return false
+
+      const initialSelectionBox = selectionBox(editor.selection)
+      const initialSelectionRect = boxBounds(initialSelectionBox)
+
+      if (isCursorInSelection(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
       }
-
-      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
+    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 +117,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,25 @@
+import { Page } 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 },
+  page: Page,
+): Point {
+  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 +33,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 +42,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