@lazlon-platform/html-editor 0.5.0 → 0.7.0

package/lib/hooks/actions.ts

@@ -1,21 +1,36 @@
 import { useComputed } from "react-bolt"
+import {
+  flattenNodes,
+  GroupNode,
+  type HistoryAction,
+  type Node,
+  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 {
+  boxBounds,
+  deg,
+  floatNorm,
+  rectCenter,
+  rotatePoint,
+} from "../model/geometry/math"
 import { selectionBox } from "../ui/selection"
 import { useBatchSet } from "./batch"
 import { useEditor } from "./editor"
-import { boxBounds } from "../model/geometry/math"
 
-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.serialize().props
+  const copy = node.props
   const newProps = typeof props === "function" ? props(copy) : props
   const newNode = editor.deserializeNode(node.page, {
     props: { ...copy, ...newProps },
@@ -35,14 +50,15 @@ 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
+    if (!targetPage) throw Error("missing Page")
+
     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,
@@ -53,7 +69,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]]],
     })
 
@@ -67,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 }))
   }
@@ -77,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) => n.serialize())]],
+      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)))
   }
 }
 
@@ -95,32 +112,38 @@ 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(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(),
-    })
+    )
 
+    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],
     ])
@@ -139,7 +162,7 @@ export function useGroupAction() {
                 .toArray(),
             ],
           ],
-          ["add-node", [page.id, [group.serialize()]]],
+          ["add-node", [page.id, [editor.serializeNode(group)]]],
         ],
       ],
       undo: [
@@ -152,7 +175,7 @@ export function useGroupAction() {
               page.id,
               selection
                 .values()
-                .map((n) => n.serialize())
+                .map((n) => editor.serializeNode(n))
                 .toArray(),
             ],
           ],
@@ -162,14 +185,31 @@ export function useGroupAction() {
   }
 
   function ungroup(group: GroupNode) {
+    if (group.locked) return
+
     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()
 
@@ -184,14 +224,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)]]],
         ],
       ],
     })
@@ -204,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 = Array.from(props?.nodes ?? getSelection(editor))
+    if (nodes.length === 0 || !page) return
 
-    const nodes = selection
-      .values()
-      .map((node) =>
-        clone(editor, node, (n) => ({
-          x: n.x + offset,
-          y: n.y + offset,
-        })),
-      )
-      .toArray()
+    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) => n.serialize())]],
-      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)]],
     })
   }
 }
@@ -237,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({
@@ -264,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) => {
@@ -297,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
@@ -375,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))
   })
@@ -392,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,
@@ -410,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

@@ -5,27 +5,39 @@ 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
   return useComputed<N[K]>({
     equals: isEqual,
-    fn: () =>
-      rest.reduce(
-        (acc, node) => (isEqual(node[key], acc) ? acc : fallback),
-        first ? first[key] : fallback,
-      ),
+    fn: () => {
+      const values = Array.from(nodes).map((node) => node[key])
+      return 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)
 
@@ -82,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]]))
@@ -96,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,12 +12,13 @@ export {
 } from "./actions"
 export { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
 export { EditorContext, PageContext, useEditor, usePage } from "./editor"
-export { useMoveable } from "./pointer/moveable"
-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()]],
+      })
+    },
+  })
+}