@lazlon-platform/html-editor 0.5.0 → 0.7.0

package/lib/hooks/pointer/useResize/singleRegularNode.ts

@@ -0,0 +1,91 @@
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import { Node } from "../../../model"
+import {
+  box,
+  boxRect,
+  deg,
+  floatNorm,
+  perpDistance,
+  point,
+  resizeBox,
+  type Box,
+  type Corner,
+  type Edge,
+} from "../../../model/geometry/math"
+import { useEditor } from "../../editor"
+import { cursorPosition, usePointer } from "../usePointer"
+
+export function setRegularNodeSize(node: Node, size: Box) {
+  const { x, y, width, height } = boxRect(size)
+  node.x = floatNorm(x)
+  node.y = floatNorm(y)
+  node.width = floatNorm(width)
+  node.height = floatNorm(height)
+}
+
+export function useSingleRegularNodeResize(direction: Edge | Corner) {
+  const editor = useEditor()
+  const edges = direction.split("") as Edge[]
+  const [node] = useStore(editor, "selection")
+
+  const state = useRef({
+    base: box(),
+    anchorPoint: point(),
+  })
+
+  function redoProps() {
+    const { x, y, width, height } = node
+    return { x, y, width, height }
+  }
+
+  function undoProps() {
+    const { x, y, width, height } = boxRect(state.current.base)
+    return { x, y, width, height }
+  }
+
+  return usePointer({
+    onDown(event) {
+      if (!node || node.locked) return false
+
+      state.current = {
+        base: box(node),
+        anchorPoint: cursorPosition(event, node.page),
+      }
+    },
+
+    onMove(event) {
+      const { base, anchorPoint } = state.current
+      const cursor = cursorPosition(event, node.page)
+
+      setRegularNodeSize(
+        node,
+        edges.reduce((size, edge) => {
+          const r = edge === "w" ? 90 : edge === "e" ? -90 : edge === "n" ? 180 : 0
+          return resizeBox(
+            size,
+            edge,
+            perpDistance(anchorPoint, cursor, deg(node.rotation + r)),
+          )
+        }, base),
+      )
+
+      editor.action = {
+        action: "resize",
+        payload: { width: node.width, height: node.height },
+      }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd() {
+      editor.action = {}
+      editor.pushHistory({
+        redo: ["set-node-props", [node.id, redoProps()]],
+        undo: ["set-node-props", [node.id, undoProps()]],
+      })
+    },
+  })
+}

package/lib/hooks/pointer/useResize/singleTextNode.ts

@@ -0,0 +1,115 @@
+import { useRef } from "react"
+import { useComputed, useStore } from "react-bolt"
+import { Node, TextNode } from "../../../model"
+import {
+  box,
+  boxRect,
+  floatNorm,
+  point,
+  pointNorm,
+  pointSubtract,
+  rotatePoint,
+  scaleBox,
+  vectorDotProd,
+  type Box,
+  type Corner,
+  type Edge,
+  type Point,
+} from "../../../model/geometry/math"
+import { useEditor } from "../../editor"
+import { cursorPosition, usePointer } from "../usePointer"
+
+export function setTextNodeSize(
+  node: TextNode,
+  baseFontSize: number,
+  baseBoxSize: Box,
+  size: Box,
+) {
+  const { height, width, x, y } = boxRect(size)
+  const targetHeight = Math.max(8, height)
+  node.size = floatNorm((baseFontSize * targetHeight) / baseBoxSize.height)
+  node.x = floatNorm(x)
+  node.y = floatNorm(y)
+  node.height = floatNorm(targetHeight)
+  node.width = floatNorm(width)
+}
+
+export function useSingleTextNodeResize(direction: Edge | Corner) {
+  const editor = useEditor()
+  const [node] = useStore(editor, "selection")
+  const isLocked = useComputed(() => node instanceof Node && node.locked)
+  const enable =
+    node instanceof TextNode && !isLocked && direction !== "w" && direction !== "e"
+
+  const state = useRef({
+    anchorPoint: point(),
+    baseFontSize: 0,
+    baseBoxSize: box(),
+  })
+
+  function scaleDistance(cursor: Point) {
+    const { width, height, rotation } = state.current.baseBoxSize
+    const localDirection = pointNorm({
+      x: direction.includes("w") ? -width : direction.includes("e") ? width : 0,
+      y: direction.includes("n") ? -height : direction.includes("s") ? height : 0,
+    })
+    const distance = vectorDotProd(
+      pointSubtract(cursor, state.current.anchorPoint),
+      rotatePoint(localDirection, point(), rotation),
+    )
+
+    if (direction.length === 1) return distance
+    const diagonal = Math.hypot(width, height)
+    return diagonal === 0 ? 0 : (distance * height) / diagonal
+  }
+
+  function redoProps() {
+    const { x, y, width, height, size } = node as TextNode
+    return { x, y, width, height, size }
+  }
+
+  function undoProps() {
+    const { x, y, width, height } = boxRect(state.current.baseBoxSize)
+    const size = state.current.baseFontSize
+    return { x, y, width, height, size }
+  }
+
+  return usePointer({
+    onDown(event) {
+      if (enable) {
+        state.current = {
+          anchorPoint: cursorPosition(event, node.page),
+          baseFontSize: node.size,
+          baseBoxSize: box(node),
+        }
+      }
+      return enable
+    },
+
+    onMove(event) {
+      if (!enable) return
+
+      const { baseFontSize, baseBoxSize } = state.current
+      const cursor = cursorPosition(event, node.page)
+      const size = scaleBox(baseBoxSize, direction, scaleDistance(cursor))
+      setTextNodeSize(node, baseFontSize, baseBoxSize, size)
+
+      editor.action = {
+        action: "resize",
+        payload: { width: node.width, height: node.height },
+      }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd() {
+      editor.action = {}
+      editor.pushHistory<TextNode>({
+        redo: ["set-node-props", [node.id, redoProps()]],
+        undo: ["set-node-props", [node.id, undoProps()]],
+      })
+    },
+  })
+}

package/lib/hooks/pointer/useRotation.ts

@@ -0,0 +1,102 @@
+import { useRef } from "react"
+import {
+  angle,
+  box,
+  boxRect,
+  deg,
+  floatNorm,
+  point,
+  rotatePoint,
+  type Box,
+  type Deg,
+} from "../../model/geometry/math"
+import { Node } from "../../model/node"
+import { selectionBox } from "../../ui/selection"
+import { useEditor } from "../editor"
+import { cursorPosition, usePointer } from "./usePointer"
+
+function snap(v: number): Deg {
+  return deg(Math.round(v / 45) * 45)
+}
+
+export function useRotation() {
+  const editor = useEditor()
+  const origin = point()
+
+  const state = useRef({
+    base: deg(0),
+    pivot: point(),
+    nodes: [] as Array<{ node: Node; baseBox: Box }>,
+  })
+
+  function historyProps(entry: Node | Box) {
+    const { x, y } = entry instanceof Node ? entry : boxRect(entry)
+    return { x, y, rotation: entry.rotation }
+  }
+
+  return usePointer({
+    onDown(event) {
+      const page = editor.selectionPage
+      const nodes = editor.selection
+        .values()
+        .toArray()
+        .filter((n) => !n.locked)
+      if (nodes.length === 0 || !page) return false
+
+      const { center: pivot } = selectionBox(editor.selection)
+
+      state.current = {
+        base: angle(pivot, origin, cursorPosition(event, page)),
+        pivot,
+        nodes: nodes.map((node) => ({ node, baseBox: box(node) })),
+      }
+
+      editor.action = {
+        action: "rotate",
+        payload: { deg: nodes.length > 1 ? 0 : nodes[0].rotation },
+      }
+    },
+
+    onMove(event) {
+      const { base, pivot, nodes } = state.current
+      const cursor = cursorPosition(event, editor.selectionPage!)
+
+      const delta = deg(angle(pivot, origin, cursor) - base)
+      const singleBase = nodes.length === 1 ? nodes[0].baseBox.rotation : null
+      const resultDelta = deg(
+        event.shiftKey
+          ? typeof singleBase === "number"
+            ? snap(singleBase + delta) - singleBase
+            : snap(delta)
+          : delta,
+      )
+
+      for (const { node, baseBox } of nodes) {
+        const { x, y } = rotatePoint(baseBox.center, pivot, resultDelta)
+        node.x = floatNorm(x - baseBox.width / 2)
+        node.y = floatNorm(y - baseBox.height / 2)
+        node.rotation = deg(baseBox.rotation + resultDelta)
+      }
+
+      editor.action = {
+        action: "rotate",
+        payload: { deg: resultDelta },
+      }
+    },
+
+    onCancel() {
+      editor.action = {}
+    },
+
+    onEnd() {
+      editor.action = {}
+
+      editor.pushHistory(
+        state.current.nodes.map(({ node, baseBox }) => ({
+          redo: ["set-node-props", [node.id, historyProps(node)]],
+          undo: ["set-node-props", [node.id, historyProps(baseBox)]],
+        })),
+      )
+    },
+  })
+}

package/lib/hooks/pointer/{selector.ts → useSelector.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 { cursorPosition, usePointer } from "./usePointer"
+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,14 @@ export function useSelector(view: (props: null | Rect) => void) {
           return page.nodes
             .values()
             .toArray()
-            .filter((node) => boxIntersects(selection, box(node)))
+            .filter((node) => !node.locked)
+            .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 → useSnap.ts}

@@ -1,15 +1,16 @@
+import { useStore } from "react-bolt"
 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
+  const zoom = useStore(editor, "zoom")
+  const threshold = editor.options.snapThreshold / zoom
 
   function shouldSnap(point: number) {
     return (line: number) => line + threshold > point && point > line - threshold

package/lib/hooks/{pointer/selectionFrame.ts → selectionFrame.ts}

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react"
 import { useComputed, useStore } from "react-bolt"
-import { pointSubtract } from "../../model/geometry/math"
-import { selectionDOMRect } from "../../ui/selection"
-import { useEditor } from "../editor"
+import { pointSubtract } from "../model/geometry/math"
+import { selectionDOMRect } from "../ui/selection"
+import { useEditor } from "./editor"
 
 function arraysEqual<T>(a: T[], b: T[]): boolean {
   if (a.length !== b.length) return false
@@ -33,6 +33,8 @@ function useObserver(onChange: () => void) {
     .toArray()
 
   useEffect(() => {
+    onChange()
+
     const mObserver = new MutationObserver(onChange)
     const rObserver = new ResizeObserver(onChange)
 
@@ -70,9 +72,10 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
 
   useObserver(() => {
     const frame = ref.current
-    const stage = editor.ref!.getBoundingClientRect()
+    const stage = editor.ref?.getBoundingClientRect()
+    if (!frame || !stage) return
 
-    if (props?.accountForSingleSelection && selection.size === 1 && frame) {
+    if (props?.accountForSingleSelection && selection.size === 1) {
       const [firstNode] = selection
       const { x, y, width, height, rotation } = firstNode
       const relative = firstNode.page.ref!.getBoundingClientRect()
@@ -81,7 +84,7 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
       frame.style.height = `${height * zoom}px`
       frame.style.width = `${width * zoom}px`
       frame.style.transform = `translate(${tx}px, ${ty}px) rotate(${rotation}deg)`
-    } else if (frame) {
+    } else {
       const dom = selectionDOMRect(selection)
       const t = pointSubtract(dom, stage)
       frame.style.height = `${dom.height}px`

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 { EditableNode, FormattableNode, type Node, TextNode } from "../model"
 import { useBatchSet, useNodeFieldBatch } from "./batch"
 
 function mergeField<T>(values: T[]): T | null {
@@ -181,6 +179,10 @@ function useFocusedTiptap(editables: EditableNode[]) {
   )
 }
 
+function nonLocked(node: Node) {
+  return !node.locked
+}
+
 // don't forget a unique key `selection.map((n) => n.id).join("")` on the parent component
 export function useTextMarks(props: {
   editables: Array<EditableNode>
@@ -199,21 +201,25 @@ export function useTextMarks(props: {
     toggle(
       mark: "Bold" | "Italic" | "Underline" | "Strike" | "Superscript" | "Subscript",
     ) {
-      if (focused) {
+      if (focused && !focused.locked) {
         focused.tiptap.commands[`toggle${mark}`]()
       } else {
         const key = mark.toLowerCase() as Lowercase<typeof mark>
         const isMark = state && state[`is${mark}`]
         const action = isMark ? "unset" : "set"
-        editables.map((e) => e.tiptap.chain().selectAll()[`${action}${mark}`]().run())
+        for (const editable of editables.filter(nonLocked)) {
+          editable.tiptap.chain().selectAll()[`${action}${mark}`]().run()
+        }
         batchSet(formattables, { [key]: !isMark })
       }
     },
     setColor(color: string, opts: { end: boolean }) {
-      if (focused) {
+      if (focused && !focused.locked) {
         focused.tiptap.commands.setColor(color)
       } else {
-        editables.map((e) => e.tiptap.chain().selectAll().setColor(color).run())
+        for (const editable of editables.filter(nonLocked)) {
+          editable.tiptap.chain().selectAll().setColor(color).run()
+        }
         if (opts.end) {
           formattableColors.onChangeEnd(color)
         } else {
@@ -222,24 +228,23 @@ export function useTextMarks(props: {
       }
     },
     setSize(size: number) {
-      if (focused) {
+      if (focused && !focused.locked) {
         if (focused instanceof TextNode) {
           batchSet([focused], { size })
         } else {
           focused.tiptap.commands.setFontSize(`${size}px`)
         }
       } else {
-        editables
-          .filter((e) => !(e instanceof TextNode))
-          .map((e) => {
-            e.tiptap.chain().selectAll().setFontSize(`${size}px`).run()
-          })
+        const nonTextNodes = editables.filter((e) => !(e instanceof TextNode))
+        for (const textNode of nonTextNodes.filter(nonLocked)) {
+          textNode.tiptap.chain().selectAll().setFontSize(`${size}px`).run()
+        }
         const textNodes = editables.filter((e) => e instanceof TextNode)
         batchSet([...formattables, ...textNodes], { size })
       }
     },
     setFamily(family: string | null) {
-      if (focused) {
+      if (focused && !focused.locked) {
         if (family) {
           focused.tiptap.commands.setFontFamily(family)
         } else {
@@ -247,20 +252,24 @@ export function useTextMarks(props: {
         }
       } else {
         if (family) {
-          editables.map((e) => e.tiptap.chain().selectAll().setFontFamily(family).run())
+          for (const editable of editables.filter(nonLocked)) {
+            editable.tiptap.chain().selectAll().setFontFamily(family).run()
+          }
         } else {
-          editables.map((e) => e.tiptap.chain().selectAll().unsetFontFamily().run())
+          for (const editable of editables.filter(nonLocked)) {
+            editable.tiptap.chain().selectAll().unsetFontFamily().run()
+          }
         }
         batchSet(formattables, { family })
       }
     },
     setSpacing(spacing: number, opts: { end: boolean }) {
-      if (focused) {
+      if (focused && !focused.locked) {
         focused.tiptap.commands.setLetterSpacing(`${spacing}px`)
       } else {
-        editables.map((e) =>
-          e.tiptap.chain().selectAll().setLetterSpacing(`${spacing}px`).run(),
-        )
+        for (const editable of editables.filter(nonLocked)) {
+          editable.tiptap.chain().selectAll().setLetterSpacing(`${spacing}px`).run()
+        }
         if (opts.end) {
           formattableSpacings.onChangeEnd(spacing)
         } else {
@@ -269,7 +278,7 @@ export function useTextMarks(props: {
       }
     },
     setLineHeight(lineHeight: number, opts: { end: boolean }) {
-      if (focused) {
+      if (focused && !focused.locked) {
         focused.tiptap.commands.setLineHeight(`${lineHeight}`)
       } else {
         editables.map((e) =>

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) {

package/lib/model/editor.ts

@@ -1,14 +1,14 @@
 import { computed, createStore, state } from "react-bolt"
 import type { GoogleWebfont } from "../lib/googleFonts"
 import { HistoryStore, type HistoryEntry } from "./history"
-import type { Node, NodeProps, SerializedNode } from "./node"
+import type { Node, SerializedNode } from "./node"
 import { Page, type SerializedPage } from "./page"
 
 const CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
 
-export interface NodeConstructor<Props extends NodeProps = NodeProps> {
-  prototype: Node
-  new (ctx: Editor, page: Page, props: Props): Node
+export interface NodeConstructor<N extends Node = Node> {
+  prototype: N
+  new (page: Page, props: N["props"]): Node
 }
 
 export interface SerializedEditor {
@@ -59,6 +59,7 @@ export class Editor {
   @state accessor zoom: number = 1
 
   readonly options: EditorOptions
+
   get history() {
     return this.#history
   }
@@ -74,8 +75,7 @@ export class Editor {
     if (!equals) this._selection = set
   }
 
-  @computed
-  get nodes(): Map<string, Node> {
+  @computed get nodes(): Map<string, Node> {
     return new Map(
       this.pages
         .values()
@@ -84,8 +84,7 @@ export class Editor {
     )
   }
 
-  @computed
-  get selectionPage() {
+  @computed get selectionPage() {
     if (this.selection.size === 0) return null
     const [first, ...rest] = this.selection
     return rest.reduce(
@@ -144,13 +143,17 @@ export class Editor {
     )
   }
 
-  deserializeNode<T extends NodeProps>(
-    page: Page,
-    { name, props }: SerializedNode<string, T>,
-  ): Node {
+  deserializeNode<T extends Node>(page: Page, { name, props }: SerializedNode<T>): T {
     const NodeClass = this.#schema.get(name)
     if (!NodeClass) throw Error(`cannot deserialize unknown Node: ${name}`)
-    return new NodeClass(this, page, props)
+    return new NodeClass(page, props) as T
+  }
+
+  serializeNode<T extends Node>(node: T): SerializedNode<T> {
+    return {
+      name: node.name,
+      props: node.props,
+    }
   }
 
   serialize(): SerializedEditor {
@@ -166,4 +169,19 @@ export class Editor {
       },
     }
   }
+
+  pushHistory<N extends Node>(entries: HistoryEntry<N> | Array<HistoryEntry<N>>) {
+    if (Array.isArray(entries)) {
+      if (entries.length > 1) {
+        this.history.push({
+          undo: ["batch", entries.map((e) => e.undo)],
+          redo: ["batch", entries.map((e) => e.redo)],
+        })
+      } else if (entries.length === 1) {
+        this.history.push(entries[0])
+      }
+    } else {
+      this.history.push(entries)
+    }
+  }
 }