@lazlon-platform/html-editor 0.6.0 → 0.7.0

package/lib/hooks/actions.ts

@@ -4,7 +4,6 @@ import {
   GroupNode,
   type HistoryAction,
   type Node,
-  type NodeProps,
   type Page,
 } from "../model"
 import type { Editor, NodeConstructor } from "../model/editor"
@@ -19,10 +18,17 @@ import { selectionBox } from "../ui/selection"
 import { useBatchSet } from "./batch"
 import { useEditor } from "./editor"
 
-export function clone(
+function getSelection(editor: Editor) {
+  return editor.selection
+    .values()
+    .toArray()
+    .filter((n) => !n.locked)
+}
+
+export function clone<N extends Node>(
   editor: Editor,
-  node: Node,
-  props?: ((props: NodeProps) => Partial<NodeProps>) | Partial<NodeProps>,
+  node: N,
+  props?: ((props: N["props"]) => Partial<N["props"]>) | Partial<N["props"]>,
 ) {
   const copy = node.props
   const newProps = typeof props === "function" ? props(copy) : props
@@ -48,7 +54,8 @@ export function useAddNodeAction(page?: Page) {
   ) {
     const [firstPage] = editor.pages.values()
     const targetPage = page ?? firstPage
-    if (!targetPage) return
+    if (!targetPage) throw Error("missing Page")
+
     const { width, height, nodes } = targetPage
 
     const node = new NodeClass(targetPage, {
@@ -76,7 +83,7 @@ export function useMoveAction() {
 
   return function move(props: { x?: number; y?: number }) {
     const { x, y } = props
-    const selection = editor.selection.values().toArray()
+    const selection = getSelection(editor)
     if (x) batchSet(selection, (n) => ({ x: n.x + x }))
     if (y) batchSet(selection, (n) => ({ y: n.y + y }))
   }
@@ -86,17 +93,18 @@ export function useTrashAction() {
   const editor = useEditor()
 
   return function trash() {
-    const { selection, selectionPage: page } = editor
-    const array = selection.values().toArray()
-    if (selection.size === 0 || !page) return
+    const page = editor.selectionPage
+    const selection = getSelection(editor)
+    if (selection.length === 0 || !page) return
 
     editor.history.push({
-      redo: ["delete-node", [page.id, array.map((node) => node.id)]],
-      undo: ["add-node", [page.id, array.map((n) => editor.serializeNode(n))]],
+      redo: ["delete-node", [page.id, selection.map((node) => node.id)]],
+      undo: ["add-node", [page.id, selection.map((n) => editor.serializeNode(n))]],
     })
 
+    const current = editor.selection
     editor.selection = new Set()
-    page.nodes = new Map(page.nodes.entries().filter(([, node]) => !selection.has(node)))
+    page.nodes = new Map(page.nodes.entries().filter(([, node]) => !current.has(node)))
   }
 }
 
@@ -104,9 +112,11 @@ export function useGroupAction() {
   const editor = useEditor()
 
   function group() {
-    const { selection, selectionPage: page } = editor
+    const page = editor.selectionPage
+    const selection = getSelection(editor)
+    if (selection.length === 0 || !page) return
+
     const { width, height, x, y } = boxBounds(selectionBox(selection))
-    if (selection.size === 0 || !page) return
 
     const group = new GroupNode(page, {
       id: editor.id(),
@@ -128,11 +138,12 @@ export function useGroupAction() {
         .toArray(),
     )
 
+    const current = editor.selection
     editor.selection = new Set()
     page.nodes = new Map([
       ...page.nodes
         .values()
-        .filter((n) => !selection.has(n))
+        .filter((n) => !current.has(n))
         .map((n) => [n.id, n] as const),
       [group.id, group],
     ])
@@ -174,6 +185,8 @@ export function useGroupAction() {
   }
 
   function ungroup(group: GroupNode) {
+    if (group.locked) return
+
     const page = group.page
     const groupCenter = rectCenter(group)
     const nodes = group.nodes
@@ -231,30 +244,24 @@ export function useDuplicateAction() {
   const editor = useEditor()
 
   return function duplicate(props?: { page?: Page; nodes?: Set<Node>; offset?: number }) {
-    const selection = props?.nodes ?? editor.selection
     const offset = props?.offset ?? 10
     const page = props?.page ?? editor.selectionPage
-    if (selection.size === 0 || !page) return
-
-    const nodes = selection
-      .values()
-      .map((node) =>
-        clone(editor, node, (n) => ({
-          x: n.x + offset,
-          y: n.y + offset,
-        })),
-      )
-      .toArray()
+    const nodes = Array.from(props?.nodes ?? getSelection(editor))
+    if (nodes.length === 0 || !page) return
+
+    const dup = nodes.map((node) =>
+      clone(editor, node, (n) => ({
+        x: n.x + offset,
+        y: n.y + offset,
+      })),
+    )
 
-    page.nodes = new Map([
-      ...page.nodes,
-      ...nodes.map((node) => [node.id, node] as const),
-    ])
+    page.nodes = new Map([...page.nodes, ...dup.map((node) => [node.id, node] as const)])
 
-    editor.selection = new Set(nodes)
+    editor.selection = new Set(dup)
     editor.history.push({
-      redo: ["add-node", [page.id, nodes.map((n) => editor.serializeNode(n))]],
-      undo: ["delete-node", [page.id, nodes.map((node) => node.id)]],
+      redo: ["add-node", [page.id, dup.map((n) => editor.serializeNode(n))]],
+      undo: ["delete-node", [page.id, dup.map((node) => node.id)]],
     })
   }
 }
@@ -264,26 +271,15 @@ export function useToggleLockAction() {
 
   return function toggleLock() {
     const selection = editor.selection.values().toArray()
-    const isLocked = selection.some((n) => n.locked)
-    for (const node of selection) {
-      node.locked = !isLocked
-    }
-  }
-}
+    const nextLocked = selection.some((n) => !n.locked)
 
-export function useAlignAction() {
-  type AlignProps = { x: number } | { y: number }
-
-  const editor = useEditor()
-
-  function align(fn: (node: Node) => { prev: AlignProps; next: AlignProps }) {
     const undo: HistoryAction[] = []
     const redo: HistoryAction[] = []
 
-    for (const node of editor.selection) {
-      const { prev, next } = fn(node)
-      undo.push(["set-node-props", [node.id, prev]])
-      redo.push(["set-node-props", [node.id, next]])
+    for (const node of selection) {
+      undo.push(["set-node-props", [node.id, { locked: node.locked }]])
+      redo.push(["set-node-props", [node.id, { locked: nextLocked }]])
+      node.locked = nextLocked
     }
 
     editor.history.push({
@@ -291,6 +287,24 @@ export function useAlignAction() {
       redo: ["batch", redo],
     })
   }
+}
+
+export function useAlignAction() {
+  type AlignProps = { x: number } | { y: number }
+
+  const editor = useEditor()
+
+  function align(set: (node: Node) => { prev: AlignProps; next: AlignProps }) {
+    editor.pushHistory(
+      getSelection(editor).map((node) => {
+        const { prev, next } = set(node)
+        return {
+          undo: ["set-node-props", [node.id, prev]],
+          redo: ["set-node-props", [node.id, next]],
+        }
+      }),
+    )
+  }
 
   function halign(getX: (node: Node) => number) {
     align((node) => {
@@ -324,20 +338,22 @@ export function useDistributeAction() {
   const editor = useEditor()
 
   function distribute(pos: "x" | "y", size: "width" | "height") {
+    const selection = getSelection(editor)
+    if (selection.length === 0) return
+
     const rect = boxBounds(selectionBox(editor.selection))
-    const array = editor.selection.values().toArray()
 
-    const undo: HistoryAction[] = array.map((node) => [
+    const undo: HistoryAction[] = selection.map((node) => [
       "set-node-props",
       [node.id, { [pos]: node[pos] }],
     ])
 
-    const total = array.reduce((sum, it) => sum + it[size], 0)
-    const gap = (rect[size] - total) / (array.length - 1)
+    const total = selection.reduce((sum, it) => sum + it[size], 0)
+    const gap = (rect[size] - total) / (selection.length - 1)
 
     let cursor = rect[pos]
 
-    const redo: HistoryAction[] = array
+    const redo: HistoryAction[] = selection
       .toSorted((a, b) => a[pos] - b[pos])
       .map((node) => {
         node[pos] = cursor
@@ -402,15 +418,17 @@ export function useStackOrderAction() {
   }
 
   const canBringBackward = useComputed(() => {
-    const { selection, selectionPage: page } = editor
-    if (selection.size !== 0 || !page) return false
+    const page = editor.selectionPage
+    const selection = getSelection(editor)
+    if (selection.length === 0 || !page) return false
     const nodes = page.nodes.values().toArray()
     return selection.values().some((n) => n !== nodes.at(0))
   })
 
   const canBringForward = useComputed(() => {
-    const { selection, selectionPage: page } = editor
-    if (selection.size !== 0 || !page) return false
+    const page = editor.selectionPage
+    const selection = getSelection(editor)
+    if (selection.length === 0 || !page) return false
     const nodes = page.nodes.values().toArray()
     return selection.values().some((n) => n !== nodes.at(-1))
   })
@@ -419,17 +437,20 @@ export function useStackOrderAction() {
     canBringBackward,
     canBringForward,
     bringBackward() {
-      const { selection, selectionPage: page } = editor
-      if (selection.size === 0 || !page) return
-      order(page, moveBackward(page.nodes.values().toArray(), selection))
+      const page = editor.selectionPage
+      const selection = getSelection(editor)
+      if (selection.length === 0 || !page) return
+      order(page, moveBackward(page.nodes.values().toArray(), new Set(selection)))
     },
     bringForward() {
-      const { selection, selectionPage: page } = editor
-      if (selection.size === 0 || !page) return
-      order(page, moveForward(page.nodes.values().toArray(), selection))
+      const page = editor.selectionPage
+      const selection = getSelection(editor)
+      if (selection.length === 0 || !page) return
+      order(page, moveForward(page.nodes.values().toArray(), new Set(selection)))
     },
     bringToBack() {
-      const { selection, selectionPage: page } = editor
+      const page = editor.selectionPage
+      const selection = new Set(getSelection(editor))
       if (selection.size === 0 || !page) return
       order(page, [
         ...selection,
@@ -437,7 +458,8 @@ export function useStackOrderAction() {
       ])
     },
     bringToFront() {
-      const { selection, selectionPage: page } = editor
+      const page = editor.selectionPage
+      const selection = new Set(getSelection(editor))
       if (selection.size === 0 || !page) return
       order(page, [
         ...page.nodes.values().filter((node) => !selection.has(node)),

package/lib/hooks/batch.ts

@@ -18,10 +18,12 @@ export function useNodeField<N extends Node, K extends keyof N>(
   key: K,
   fallback: N[K],
 ) {
-  const values = Array.from(nodes).map((node) => node[key])
   return useComputed<N[K]>({
     equals: isEqual,
-    fn: () => reduce(values, fallback),
+    fn: () => {
+      const values = Array.from(nodes).map((node) => node[key])
+      return reduce(values, fallback)
+    },
   })
 }
 
@@ -92,12 +94,10 @@ export function useBatchSet() {
     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>[]
       const prevValues = Object.fromEntries(keys.map((key) => [key, node[key]]))
@@ -106,8 +106,12 @@ export function useBatchSet() {
       Object.assign(node, nextValues)
     }
 
-    if (push) {
+    if (next.length > 1) {
       history.push({ undo: ["batch", prev], redo: ["batch", next] })
+    } else if (next.length > 0) {
+      const [undo] = prev
+      const [redo] = next
+      history.push({ undo, redo })
     }
   }
 }

package/lib/hooks/index.ts

@@ -12,13 +12,13 @@ export {
 } from "./actions"
 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"
-export { useSelectionFrame } from "./pointer/selectionFrame"
-export { useSelector } from "./pointer/selector"
+export { useMoveable } from "./pointer/useMoveable"
+export { useMovePoint } from "./pointer/useMovePoint"
+export { usePointer } from "./pointer/usePointer"
+export { useResize } from "./pointer/useResize"
+export { useRotation } from "./pointer/useRotation"
+export { useSelectionFrame } from "./selectionFrame"
+export { useSelector } from "./pointer/useSelector"
 export { useTextMarks } from "./textMarks"
 export { useEditPage } from "./page"
 export { useVisualPositionBatch } from "./node"

package/lib/hooks/page.ts

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

package/lib/hooks/pointer/useMovePoint.ts

@@ -0,0 +1,100 @@
+import { useRef } from "react"
+import type { LineNode } from "../../model"
+import {
+  deg,
+  floatNorm,
+  point,
+  pointSubtract,
+  rect,
+  rectCenter,
+  rotatePoint,
+  type Point,
+} from "../../model/geometry/math"
+import { useEditor } from "../editor"
+import { cursorPosition, usePointer } from "./usePointer"
+import { useSnap } from "./useSnap"
+
+export function useMovePoint(props: { lineNode: LineNode; pointIndex: number }) {
+  const { lineNode, pointIndex } = props
+  const editor = useEditor()
+  const page = lineNode.page
+  const snap = useSnap(page)
+
+  const state = useRef({
+    cursorOffset: point(),
+    baseVertices: [] as Point[],
+    basePoints: [] as Point[],
+    baseX: 0,
+    baseY: 0,
+  })
+
+  function unrotatedPagePoints(vertices: Point[]): Point[] {
+    const rotation = lineNode.rotation
+    const origin = point()
+    const unrotatedBounds = rect(
+      ...vertices.map((p) => rotatePoint(p, origin, deg(-rotation))),
+    )
+    const center = rotatePoint(rectCenter(unrotatedBounds), origin, rotation)
+    return vertices.map((p) => rotatePoint(p, center, deg(-rotation)))
+  }
+
+  function setLinePoints(pagePoints: Point[]) {
+    const bounds = point(rect(...pagePoints))
+    lineNode.x = floatNorm(bounds.x)
+    lineNode.y = floatNorm(bounds.y)
+    lineNode.points = pagePoints.map((p) => pointSubtract(p, bounds))
+  }
+
+  function redoProps() {
+    const { x, y, points } = lineNode
+    return { x, y, points }
+  }
+
+  function undoProps() {
+    const { baseX: x, baseY: y, basePoints: points } = state.current
+    return { x, y, points }
+  }
+
+  return usePointer({
+    onDown(event) {
+      if (lineNode.locked) return false
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      state.current = {
+        baseVertices: lineNode.vertices,
+        basePoints: lineNode.points,
+        baseX: lineNode.x,
+        baseY: lineNode.y,
+        cursorOffset: pointSubtract(
+          cursorPosition(event, page),
+          lineNode.vertices[pointIndex],
+        ),
+      }
+    },
+    onMove(event) {
+      const { cursorOffset, baseVertices } = state.current
+      const cursor = pointSubtract(cursorPosition(event, page), cursorOffset)
+      const result = point(snap(!event.shiftKey, rect(cursor)))
+      const vertices = baseVertices.map((p, i) => (i === pointIndex ? result : p))
+
+      setLinePoints(unrotatedPagePoints(vertices))
+
+      editor.action = { action: "move", payload: result }
+    },
+    onCancel() {
+      editor.action = {}
+      page.snapLines = []
+    },
+    onEnd() {
+      editor.action = {}
+      page.snapLines = []
+
+      editor.pushHistory({
+        redo: ["set-node-props", [lineNode.id, redoProps()]],
+        undo: ["set-node-props", [lineNode.id, undoProps()]],
+      })
+    },
+  })
+}

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

@@ -1,4 +1,5 @@
 import { useRef } from "react"
+import { LineNode } from "../../model"
 import {
   accessibleLine,
   box,
@@ -10,13 +11,11 @@ import {
   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 { LineNode } from "@lazlon/html-editor/model"
+import { cursorPosition, usePointer } from "./usePointer"
+import { useSnap } from "./useSnap"
 
 export function useMoveable() {
   const editor = useEditor()
@@ -24,11 +23,11 @@ export function useMoveable() {
   const snap = useSnap(page)
 
   const state = useRef({
-    initialSelectionRect: rect(),
+    baseRect: rect(),
     cursorOffset: point(),
     nodes: Array<{
       node: Node
-      startingPoint: Point
+      basePosition: Point
       selectionOffset: Point
     }>(),
   })
@@ -64,25 +63,25 @@ export function useMoveable() {
       }
 
       if (editor.selection.size === 0) return false
+      if (!isCursorInSelection(cursor)) 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
+      for (const node of editor.selection) {
+        if (node.locked) 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(),
       }
     },
 
@@ -95,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,
         }),
       )
 
@@ -117,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}

@@ -17,8 +17,8 @@ export function cursorPosition(
   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
+}