@lazlon-platform/html-editor 0.4.0 → 0.6.0

package/lib/hooks/pointer/selectionFrame.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react"
 import { useComputed, useStore } from "react-bolt"
-import { getTargetDOMRect } from "../../ui/selection"
+import { pointSubtract } from "../../model/geometry/math"
+import { selectionDOMRect } from "../../ui/selection"
 import { useEditor } from "../editor"
 
 function arraysEqual<T>(a: T[], b: T[]): boolean {
@@ -73,23 +74,19 @@ export function useSelectionFrame<E extends HTMLElement>(props?: {
 
     if (props?.accountForSingleSelection && selection.size === 1 && frame) {
       const [firstNode] = selection
-      const { page } = firstNode
-
       const { x, y, width, height, rotation } = firstNode
-      const relative = page.ref!.getBoundingClientRect()
+      const relative = firstNode.page.ref!.getBoundingClientRect()
       const tx = relative.x - stage.x + x * zoom
       const ty = relative.y - stage.y + y * zoom
-
       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) {
-      const { x, y, width, height } = getTargetDOMRect(selection)
-      const tx = x - stage.x
-      const ty = y - stage.y
-      frame.style.height = `${height}px`
-      frame.style.width = `${width}px`
-      frame.style.transform = `translate(${tx}px, ${ty}px)`
+      const dom = selectionDOMRect(selection)
+      const t = pointSubtract(dom, stage)
+      frame.style.height = `${dom.height}px`
+      frame.style.width = `${dom.width}px`
+      frame.style.transform = `translate(${t.x}px, ${t.y}px)`
     }
   })
 

package/lib/hooks/pointer/selector.ts

@@ -1,53 +1,78 @@
-import { isPointerInSelectionRect } from "../../ui/selection"
+import { useRef } from "react"
+import {
+  type Rect,
+  box,
+  boxContainsPoint,
+  pointSubtract,
+  rect,
+  boxIntersects,
+  lineContainsPoint,
+  lineIntersectsBox,
+  accessibleLine,
+} from "../../model/geometry/math"
 import { useEditor } from "../editor"
-import { usePointer } from "./pointer"
+import { cursorPosition, usePointer } from "./pointer"
+import { LineNode } from "../../model"
 
-export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null> }) {
+function clientPoint(event: { clientX: number; clientY: number }) {
+  return { x: event.clientX, y: event.clientY }
+}
+
+export function useSelector(view: (props: null | Rect) => void) {
   const editor = useEditor()
 
+  const dragAnchor = useRef({
+    clientX: 0,
+    clientY: 0,
+  })
+
   return usePointer({
     onDown(event) {
-      const isPointerInsideRect = isPointerInSelectionRect(editor.selection, event)
+      for (const node of editor.nodes.values()) {
+        const cursor = cursorPosition(event, node.page)
+        if (
+          (node instanceof LineNode && lineContainsPoint(accessibleLine(node), cursor)) ||
+          (!(node instanceof LineNode) && boxContainsPoint(box(node), cursor))
+        ) {
+          return false
+        }
+      }
 
-      if (!isPointerInsideRect && !editor.action.action) {
+      if (!editor.action.action) {
         editor.action = { action: "select" }
+        dragAnchor.current = event
       }
-
-      return !isPointerInsideRect
     },
-    onMove({ event, start }) {
-      const div = props.ref.current
-      if (!div) throw Error("selector div ref is null")
+    onMove(event) {
       if (editor.action.action !== "select") return
+      const stage = editor.ref!.getBoundingClientRect()
 
-      const rect = editor.ref!.getBoundingClientRect()
-
-      const x = event.clientX - start.clientX
-      const y = event.clientY - start.clientY
-      const width = Math.floor(Math.abs(x))
-      const height = Math.floor(Math.abs(y))
-      const tx = (x > 0 ? start.clientX : start.clientX - width) - rect.x
-      const ty = (y > 0 ? start.clientY : start.clientY - height) - rect.y
-
-      const { left, right, top, bottom } = div.getBoundingClientRect()
+      /* world view */ {
+        const p1 = clientPoint(dragAnchor.current)
+        const p2 = clientPoint(event)
+        view(rect(pointSubtract(p1, stage), pointSubtract(p2, stage)))
+      }
 
-      editor.selection = new Set(
-        editor.nodes.values().filter(({ ref }) => {
-          const node = ref?.getBoundingClientRect()
-          if (!node) throw Error("node.ref is null")
-          return !(
-            node.right <= left || // node is left of selection
-            node.left >= right || // node is right of selection
-            node.bottom <= top || // node is above selection
-            node.top >= bottom // node is below selection
-          )
-        }),
-      )
+      const selection = editor.pages
+        .values()
+        .toArray()
+        .flatMap((page) => {
+          const p1 = cursorPosition(dragAnchor.current, page)
+          const p2 = cursorPosition(event, page)
+          const selection = box(rect(p1, p2))
+          return page.nodes
+            .values()
+            .toArray()
+            .filter((node) => {
+              if (node instanceof LineNode) {
+                return lineIntersectsBox(node, selection)
+              } else {
+                return boxIntersects(selection, box(node))
+              }
+            })
+        })
 
-      div.style.width = `${width}px`
-      div.style.height = `${height}px`
-      div.style.transform = `translate(${tx}px, ${ty}px)`
-      div.style.display = "block"
+      editor.selection = new Set(selection)
     },
     onCancel() {
       editor.selection = new Set() // click away
@@ -55,10 +80,7 @@ export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null>
     },
     onEnd() {
       editor.action = {}
-
-      const div = props.ref.current
-      if (!div) throw Error("selector div ref is null")
-      div.style.display = "none"
+      view(null)
     },
   })
 }

package/lib/hooks/pointer/snap.ts

@@ -1,14 +1,14 @@
-import type { Rect } from "../../model/geometry"
+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) {
@@ -17,13 +17,13 @@ export function useSnap() {
 
   function ySnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { y, height } = n.boundingBox
+      const { y, height } = boxBounds(box(n))
       return [y, y + height]
     })
 
     const hlines = [0, page.height, ...nodelines]
-    const top = hlines.find(shouldSnap(rect.y))
-    const bottom = hlines.find(shouldSnap(rect.y + rect.height))
+    const top = hlines.find(shouldSnap(rect.top))
+    const bottom = hlines.find(shouldSnap(rect.bottom))
 
     if (isN(top) && isN(bottom)) {
       return [
@@ -46,15 +46,15 @@ export function useSnap() {
     return [rect.y]
   }
 
-  function xSnap(nodes: Node[], box: Rect): [number, ...Lines] {
+  function xSnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { x, width } = n.boundingBox
+      const { x, width } = boxBounds(box(n))
       return [x, x + width]
     })
 
     const hlines = [0, page.width, ...nodelines]
-    const left = hlines.find(shouldSnap(box.x))
-    const right = hlines.find(shouldSnap(box.x + box.width))
+    const left = hlines.find(shouldSnap(rect.left))
+    const right = hlines.find(shouldSnap(rect.right))
 
     if (isN(left) && isN(right)) {
       return [left, { x: left - 1 }, { x: right }]
@@ -65,16 +65,16 @@ export function useSnap() {
     }
 
     if (isN(right)) {
-      return [right - box.width, { x: right }]
+      return [right - rect.width, { x: right }]
     }
 
-    return [box.x]
+    return [rect.x]
   }
 
-  return function snap(snap: boolean, rect: Rect): Rect {
+  return function snap(snap: boolean, r: Rect): Rect {
     if (!snap) {
       page.snapLines = []
-      return rect
+      return r
     }
 
     const nodes = page.nodes
@@ -82,16 +82,16 @@ export function useSnap() {
       .filter((node) => !editor.selection.has(node))
       .toArray()
 
-    const [left, ...hlines] = xSnap(nodes, rect)
-    const [top, ...vlines] = ySnap(nodes, rect)
+    const [x, ...hlines] = xSnap(nodes, r)
+    const [y, ...vlines] = ySnap(nodes, r)
 
     page.snapLines = [...vlines, ...hlines]
 
-    return {
-      x: left,
-      y: top,
-      width: rect.width,
-      height: rect.height,
-    }
+    return rect({
+      x,
+      y,
+      width: r.width,
+      height: r.height,
+    })
   }
 }

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

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 {
@@ -144,13 +144,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 {