@lazlon-platform/html-editor 0.5.0 → 0.6.0

package/lib/hooks/actions.ts

@@ -1,21 +1,30 @@
 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 {
+  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(
   editor: Editor,
   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 },
@@ -35,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,
@@ -53,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]]],
     })
 
@@ -83,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()
@@ -99,22 +108,25 @@ export function useGroupAction() {
     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([
@@ -139,7 +151,7 @@ export function useGroupAction() {
                 .toArray(),
             ],
           ],
-          ["add-node", [page.id, [group.serialize()]]],
+          ["add-node", [page.id, [editor.serializeNode(group)]]],
         ],
       ],
       undo: [
@@ -152,7 +164,7 @@ export function useGroupAction() {
               page.id,
               selection
                 .values()
-                .map((n) => n.serialize())
+                .map((n) => editor.serializeNode(n))
                 .toArray(),
             ],
           ],
@@ -163,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()
 
@@ -184,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)]]],
         ],
       ],
     })
@@ -226,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)]],
     })
   }

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/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,8 +1,10 @@
 import { useRef } from "react"
 import {
+  accessibleLine,
   box,
   boxBounds,
   boxContainsPoint,
+  lineContainsPoint,
   type Point,
   point,
   pointSubtract,
@@ -14,11 +16,12 @@ 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"
 
 export function useMoveable() {
   const editor = useEditor()
   const page = usePage()
-  const snap = useSnap()
+  const snap = useSnap(page)
 
   const state = useRef({
     initialSelectionRect: rect(),
@@ -30,15 +33,30 @@ export function useMoveable() {
     }>(),
   })
 
+  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
           }
@@ -50,11 +68,7 @@ export function useMoveable() {
       const initialSelectionBox = selectionBox(editor.selection)
       const initialSelectionRect = boxBounds(initialSelectionBox)
 
-      for (const node of editor.selection) {
-        if (node.blockMove(event)) return false
-      }
-
-      if (boxContainsPoint(initialSelectionBox, cursor)) {
+      if (isCursorInSelection(cursor)) {
         state.current = {
           initialSelectionRect,
           cursorOffset: pointSubtract(cursor, initialSelectionRect),

package/lib/hooks/pointer/pointer.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,9 +11,8 @@ 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()
 

package/lib/hooks/pointer/resize.ts

@@ -77,11 +77,11 @@ export function useSingleResize(direction: Edge | Corner) {
     onDown(event) {
       state.current = {
         baseSize: box(node),
-        anchorPoint: cursorPosition(event, node),
+        anchorPoint: cursorPosition(event, node.page),
       }
     },
     onMove(event) {
-      const cursor = cursorPosition(event, node)
+      const cursor = cursorPosition(event, node.page)
 
       if (node instanceof TextNode && direction !== "w" && direction !== "e") {
         const size = scaleBox(

package/lib/hooks/pointer/rotation.ts

@@ -1,10 +1,21 @@
+import { pick } from "es-toolkit"
 import { useRef } from "react"
-import { angle, deg, point, rectCenter, type Deg } from "../../model/geometry/math"
+import {
+  angle,
+  box,
+  boxRect,
+  deg,
+  floatNorm,
+  point,
+  rotatePoint,
+  type Box,
+} from "../../model/geometry/math"
 import type { HistoryAction } from "../../model/history"
 import type { Node } from "../../model/node"
-import { selectionDOMRect } from "../../ui/selection"
+import type { Page } from "../../model/page"
+import { selectionBox } from "../../ui/selection"
 import { useEditor } from "../editor"
-import { usePointer } from "./pointer"
+import { cursorPosition, usePointer } from "./pointer"
 
 function snappedDeg(startDeg: number, delta: number, shiftKey: boolean) {
   const rotation = startDeg + delta
@@ -15,24 +26,52 @@ export function useRotation() {
   const editor = useEditor()
 
   const state = useRef({
-    centerPoint: point(),
-    inititalDeg: deg(0),
-    nodes: Array<{ node: Node; deg: Deg }>(),
+    initialDeg: deg(0),
+    page: null as Page | null,
+    selectionCenter: point(),
+    nodes: Array<{
+      node: Node
+      base: Box
+    }>(),
   })
 
+  function applyRotation(delta: number, shiftKey: boolean) {
+    const { initialDeg, nodes, selectionCenter } = state.current
+
+    if (nodes.length > 1) {
+      const groupDelta = snappedDeg(initialDeg, delta, shiftKey) - initialDeg
+
+      for (const { node, base } of nodes) {
+        const center = rotatePoint(base.center, selectionCenter, deg(groupDelta))
+
+        node.x = floatNorm(center.x - base.width / 2)
+        node.y = floatNorm(center.y - base.height / 2)
+        node.rotation = deg(base.rotation + groupDelta)
+      }
+
+      return snappedDeg(initialDeg, delta, shiftKey)
+    }
+
+    for (const { node, base } of nodes) {
+      node.rotation = snappedDeg(base.rotation, delta, shiftKey)
+    }
+
+    return nodes[0]?.node.rotation ?? deg(0)
+  }
+
   return usePointer({
     onDown(event) {
-      const target = selectionDOMRect(editor.selection)
       const nodes = editor.selection.values().toArray()
-      const center = rectCenter(target)
+      const page = editor.selectionPage
+      if (nodes.length === 0 || !page) return false
+
+      const { center: selectionCenter } = selectionBox(editor.selection)
 
       state.current = {
-        centerPoint: center,
-        inititalDeg: angle(center, point(), {
-          x: event.clientX,
-          y: event.clientY,
-        }),
-        nodes: nodes.map((node) => ({ node, deg: node.rotation })),
+        initialDeg: angle(selectionCenter, point(), cursorPosition(event, page)),
+        page,
+        selectionCenter,
+        nodes: nodes.map((node) => ({ node, base: box(node) })),
       }
 
       const deg = nodes.length === 1 ? nodes[0].rotation : 0
@@ -40,19 +79,12 @@ export function useRotation() {
     },
 
     onMove(event) {
-      const { centerPoint, inititalDeg, nodes } = state.current
-
-      const clientPoint = { x: event.clientX, y: event.clientY }
-      const deg = angle(centerPoint, point(), clientPoint) - inititalDeg
+      const { initialDeg, page, selectionCenter } = state.current
+      if (!page) return
 
-      for (const n of nodes) {
-        n.node.rotation = snappedDeg(n.deg, deg, event.shiftKey)
-      }
-
-      const display =
-        nodes.length === 1
-          ? nodes[0].node.rotation
-          : snappedDeg(inititalDeg, deg, event.shiftKey)
+      const deg =
+        angle(selectionCenter, point(), cursorPosition(event, page)) - initialDeg
+      const display = applyRotation(deg, event.shiftKey)
 
       editor.action = {
         action: "rotate",
@@ -67,28 +99,31 @@ export function useRotation() {
     },
 
     onEnd(event) {
-      const { centerPoint, inititalDeg, nodes } = state.current
+      const { initialDeg, nodes, page, selectionCenter } = state.current
+      if (!page) return
+
+      const deg =
+        angle(selectionCenter, point(), cursorPosition(event, page)) - initialDeg
 
-      const clientPoint = { x: event.clientX, y: event.clientY }
-      const deg = angle(centerPoint, point(), clientPoint) - inititalDeg
+      applyRotation(deg, event.shiftKey)
 
-      if (nodes.length === 0) {
+      if (nodes.length === 1) {
         const [n] = nodes
-        const rotation = snappedDeg(n.deg, deg, event.shiftKey)
         editor.history.push({
-          redo: ["set-node-props", [n.node.id, { rotation }]],
-          undo: ["set-node-props", [n.node.id, { rotation: n.deg }]],
+          redo: ["set-node-props", [n.node.id, { rotation: n.node.rotation }]],
+          undo: ["set-node-props", [n.node.id, { rotation: n.base.rotation }]],
         })
-        n.node.rotation = rotation
       } else {
         const redo: HistoryAction[] = []
         const undo: HistoryAction[] = []
 
-        for (const n of nodes) {
-          const rotation = snappedDeg(n.deg, deg, event.shiftKey)
-          redo.push(["set-node-props", [n.node.id, { rotation }]])
-          undo.push(["set-node-props", [n.node.id, { rotation: n.deg }]])
-          n.node.rotation = rotation
+        for (const { node, base } of nodes) {
+          const baseRect = boxRect(base)
+          redo.push(["set-node-props", [node.id, pick(node, ["rotation", "x", "y"])]])
+          undo.push([
+            "set-node-props",
+            [node.id, { rotation: base.rotation, x: baseRect.x, y: baseRect.y }],
+          ])
         }
 
         editor.history.push({

package/lib/hooks/pointer/selector.ts

@@ -6,9 +6,13 @@ import {
   pointSubtract,
   rect,
   boxIntersects,
+  lineContainsPoint,
+  lineIntersectsBox,
+  accessibleLine,
 } from "../../model/geometry/math"
 import { useEditor } from "../editor"
 import { cursorPosition, usePointer } from "./pointer"
+import { LineNode } from "../../model"
 
 function clientPoint(event: { clientX: number; clientY: number }) {
   return { x: event.clientX, y: event.clientY }
@@ -25,7 +29,11 @@ export function useSelector(view: (props: null | Rect) => void) {
   return usePointer({
     onDown(event) {
       for (const node of editor.nodes.values()) {
-        if (boxContainsPoint(box(node), cursorPosition(event, node))) {
+        const cursor = cursorPosition(event, node.page)
+        if (
+          (node instanceof LineNode && lineContainsPoint(accessibleLine(node), cursor)) ||
+          (!(node instanceof LineNode) && boxContainsPoint(box(node), cursor))
+        ) {
           return false
         }
       }
@@ -55,7 +63,13 @@ export function useSelector(view: (props: null | Rect) => void) {
           return page.nodes
             .values()
             .toArray()
-            .filter((node) => boxIntersects(selection, box(node)))
+            .filter((node) => {
+              if (node instanceof LineNode) {
+                return lineIntersectsBox(node, selection)
+              } else {
+                return boxIntersects(selection, box(node))
+              }
+            })
         })
 
       editor.selection = new Set(selection)

package/lib/hooks/pointer/snap.ts

@@ -1,14 +1,14 @@
 import { type Rect, box, boxBounds, rect } from "../../model/geometry/math"
 import type { Node } from "../../model/node"
 import type { Page } from "../../model/page"
-import { useEditor, usePage } from "../editor"
+import { useEditor } from "../editor"
 
 type Lines = Page["snapLines"]
 const isN = (n?: number) => typeof n === "number"
 
-export function useSnap() {
-  const page = usePage()
+export function useSnap(page: Page) {
   const editor = useEditor()
+
   const threshold = editor.options.snapThreshold
 
   function shouldSnap(point: number) {

package/lib/hooks/textMarks.ts

@@ -1,9 +1,7 @@
 import { isEqual } from "es-toolkit"
 import { useCallback, useRef, useSyncExternalStore } from "react"
 import { effect, useComputed } from "react-bolt"
-import { TextNode } from "../model"
-import { EditableNode } from "../model/node/editable"
-import { FormattableNode } from "../model/node/formattable"
+import { TextNode, EditableNode, FormattableNode } from "../model"
 import { useBatchSet, useNodeFieldBatch } from "./batch"
 
 function mergeField<T>(values: T[]): T | null {

package/lib/lib/googleFonts.ts

@@ -55,8 +55,6 @@ export type GoogleWebfont = {
   category: FontCategory
 }
 
-const variants: Variant[] = ["regular", "italic", "700", "700italic"]
-
 // server only
 export async function getGoogleFonts(
   key: string,
@@ -81,9 +79,7 @@ export async function getGoogleFonts(
   const res = await fetch(url)
   const { items = [] } = (await res.json()) as { items?: GoogleWebfont[] }
 
-  // the editor only uses these
-  const result = items.filter((font) => variants.some((v) => font.variants.includes(v)))
-  return sort ? result : result.sort()
+  return items
 }
 
 export function getLink(font: GoogleWebfont) {