@lazlon-platform/html-editor 0.6.0 → 0.7.1

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}

@@ -11,7 +11,7 @@ import {
   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 }) {
@@ -63,6 +63,7 @@ export function useSelector(view: (props: null | Rect) => void) {
           return page.nodes
             .values()
             .toArray()
+            .filter((node) => !node.locked)
             .filter((node) => {
               if (node instanceof LineNode) {
                 return lineIntersectsBox(node, selection)

package/lib/hooks/pointer/{snap.ts → useSnap.ts}

@@ -1,3 +1,4 @@
+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"
@@ -8,8 +9,8 @@ const isN = (n?: number) => typeof n === "number"
 
 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,7 +1,7 @@
 import { isEqual } from "es-toolkit"
 import { useCallback, useRef, useSyncExternalStore } from "react"
 import { effect, useComputed } from "react-bolt"
-import { TextNode, EditableNode, FormattableNode } from "../model"
+import { EditableNode, FormattableNode, type Node, TextNode } from "../model"
 import { useBatchSet, useNodeFieldBatch } from "./batch"
 
 function mergeField<T>(values: T[]): T | null {
@@ -179,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>
@@ -197,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 {
@@ -220,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 {
@@ -245,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 {
@@ -267,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/model/editor.ts

@@ -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(
@@ -170,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)
+    }
+  }
 }

package/lib/model/geometry/math.ts

@@ -20,8 +20,8 @@ export interface Rect extends Point, Size {
   readonly right: number
 }
 
-export interface Line extends Point {
-  readonly points: Point[]
+export interface Line {
+  readonly vertices: Point[]
   readonly strokeWidth: number
 }
 
@@ -412,21 +412,13 @@ function segmentDistance(a: Point, b: Point, c: Point, d: Point): number {
   )
 }
 
-function linePoints(line: Line): Point[] {
-  return line.points.map((p) => pointAdd(line, p))
-}
-
 /**
  * @returns Whether point is contained in the stroked polyline.
  */
 export function lineContainsPoint(line: Line, point: Point): boolean {
-  const points = linePoints(line)
+  const points = line.vertices
   const radius = line.strokeWidth / 2
 
-  if (points.length === 1) {
-    return pointDist(point, points[0]) <= radius
-  }
-
   for (let i = 0; i < points.length - 1; i++) {
     const a = points[i]
     const b = points[i + 1]
@@ -441,9 +433,7 @@ export function lineContainsPoint(line: Line, point: Point): boolean {
  * @returns Whether the stroked polyline intersects the box.
  */
 export function lineIntersectsBox(line: Line, box: Box): boolean {
-  const points = linePoints(line)
-
-  if (points.length === 0) return false
+  const points = line.vertices
 
   for (const point of points) {
     if (boxContainsPoint(box, point)) return true
@@ -479,12 +469,10 @@ export function lineIntersectsBox(line: Line, box: Box): boolean {
  * @returns Line with increased strokeWidth for accessibility reasons.
  */
 export function accessibleLine(line: Line): Line {
-  const { x, y, strokeWidth, points } = line
+  const { strokeWidth, vertices } = line
   return {
-    x,
-    y,
-    points,
-    strokeWidth: Math.max(18, strokeWidth),
+    vertices,
+    strokeWidth: Math.max(24, strokeWidth),
   }
 }
 
@@ -586,7 +574,7 @@ export function resizeBox(box: Box, edge: Edge, by: number): Box {
  * Scale box by one of its edges keeping its aspect ratio.
  * The center and pivot is shifted accordingly so that visually only the edge moves.
  */
-export function scaleBox(box: Box, direction: Edge | Corner, by: number) {
+export function scaleBox(box: Box, direction: Edge | Corner, by: number): Box {
   const vertical = direction.includes("n") || direction.includes("s")
   const scale =
     vertical && box.height !== 0

package/lib/model/index.ts

@@ -6,7 +6,15 @@ export { FormattableNode, type FormattableNodeProps } from "./node/formattableNo
 export { GroupNode, type GroupNodeProps } from "./node/groupNode"
 export { ImageNode, type ImageNodeProps } from "./node/imageNode"
 export { LineNode, type LineNodeProps } from "./node/lineNode"
-export { ShapeNode, type ShapeNodeProps } from "./node/shapeNode"
+export {
+  ShapeNode,
+  type ShapeNodeProps,
+  newRectangleShape,
+  newPolygonShape,
+  newEllipseShape,
+  newArrowShape,
+  newStarShape,
+} from "./node/shapeNode"
 export { TextNode, type TextNodeProps } from "./node/textNode"
 export { Page, type PageProps, type SerializedPage } from "./page"
 export { flattenNodes } from "./traversal"

package/lib/model/node/imageNode.ts

@@ -22,7 +22,7 @@ export class ImageNode extends Node {
   ) {
     super(page, props)
     this.url = url ?? null
-    this.fit = "cover"
+    this.fit = fit ?? "cover"
     this.roundness = roundness ?? 0
     this.borderColor = borderColor ?? "#000000"
     this.borderWidth = borderWidth ?? 0

package/lib/model/node/lineNode.ts

@@ -1,5 +1,13 @@
 import { computed, state } from "react-bolt"
-import { point, pointAdd, rect, type Point } from "../geometry/math"
+import {
+  floatNorm,
+  pointAdd,
+  rect,
+  rectCenter,
+  rotatePoint,
+  type Line,
+  type Point,
+} from "../geometry/math"
 import { Node, type NodeProps } from "../node"
 import type { Page } from "../page"
 
@@ -12,7 +20,7 @@ export class LineNode extends Node {
   }
 
   /** Relative to {@link x},{@link y} */
-  @state accessor points: Point[]
+  @state accessor points: Point[] = []
   @state accessor strokeWidth: number
   @state accessor strokeColor: string
 
@@ -20,40 +28,53 @@ export class LineNode extends Node {
     return this.rect.height
   }
 
-  set height(_) {
-    // no-op: size is calculated from x,y and points
+  set height(height: number) {
+    this.scalePoints("y", height)
   }
 
   @computed get width(): number {
     return this.rect.width
   }
 
-  set width(_) {
-    // no-op: size is calculated from x,y and points
-  }
-
-  @computed private get rect() {
-    const local = point({
-      x: super.x,
-      y: super.y,
-    })
-
-    return rect(...this.points.map((p) => pointAdd(p, local)))
+  set width(width: number) {
+    this.scalePoints("x", width)
   }
 
   constructor(page: Page, { points, strokeWidth, strokeColor, ...props }: LineNodeProps) {
     super(page, props)
+    this.strokeWidth = strokeWidth ?? 1
+    this.strokeColor = strokeColor ?? "#000000"
     this.points = points ?? [
-      { x: -50, y: -50 },
-      { x: 100, y: 50 },
+      { x: 0, y: 0 },
       { x: 100, y: 0 },
     ]
-    this.strokeWidth = strokeWidth ?? 1
-    this.strokeColor = strokeColor ?? "#000000"
   }
 
   get props(): LineNodeProps {
-    const { points, strokeWidth, strokeColor } = this
+    const { strokeWidth, strokeColor, points } = this
     return { ...super.props, points, strokeWidth, strokeColor }
   }
+
+  @computed private get rect() {
+    return rect(...this.points)
+  }
+
+  @computed get vertices(): Line["vertices"] {
+    const center = rectCenter(this)
+    return this.points.map((p) => rotatePoint(pointAdd(p, this), center, this.rotation))
+  }
+
+  private scalePoints(axis: keyof Point, size: number) {
+    const { x, y, width, height } = this.rect
+
+    const origin = axis === "x" ? x : y
+    const scale = size / (axis === "x" ? width : height)
+
+    this.points = this.points.map((p) => {
+      return {
+        ...p,
+        [axis]: floatNorm(origin + (p[axis] - origin) * scale),
+      }
+    })
+  }
 }

package/lib/model/node/textNode.ts

@@ -11,28 +11,19 @@ export class TextNode extends EditableNode {
 
   @state accessor halign: "left" | "center" | "right" | "justify"
   @state accessor size: number = 16
-  @state accessor contentHeight: number = 24
 
   private observer = new ResizeObserver(([entry]) => {
-    this.contentHeight = entry.target.clientHeight
+    this.height = entry.target.clientHeight
   })
 
-  @computed get height(): number {
-    return this.contentHeight
-  }
-
-  set height(_) {
-    // no-op: TextNode's height can be set using its font-size
-  }
-
-  constructor(page: Page, { halign, size, ...props }: TextNodeProps) {
-    super(page, props)
+  constructor(page: Page, { halign, size, height = 24, ...props }: TextNodeProps) {
+    super(page, { height, ...props })
     this.halign = halign ?? "center"
     this.size = size ?? 16
 
     this.tiptap.on("transaction", () => {
       const height = this.tiptap.view.dom.clientHeight
-      if (height > 0) this.contentHeight = height
+      if (height > 0) this.height = height
     })
   }
 
@@ -41,7 +32,7 @@ export class TextNode extends EditableNode {
 
     if (ref) {
       this.observer.observe(ref)
-      this.contentHeight = ref.clientHeight
+      this.height = ref.clientHeight
     } else {
       this.observer.disconnect()
     }

package/lib/model/node.ts

@@ -10,7 +10,8 @@ export type SerializedNode<N extends Node = Node> = {
 }
 
 export interface NodeProps
-  extends Pick<Node, "id" | "x" | "y" | "width" | "height">,
+  extends
+    Pick<Node, "id" | "x" | "y" | "width" | "height">,
     Partial<Pick<Node, "locked" | "rotation" | "css">> {
   // serialized as a list in case we need to allow
   // nodes to have multiple roles in the future
@@ -28,12 +29,12 @@ export abstract class Node {
   @state private accessor _width: number
   @state private accessor _height: number
 
-  @state accessor rotation: Deg
-  @state accessor role: string | null
-  @state accessor locked: boolean
+  @state accessor rotation: Deg = deg(0)
+  @state accessor role: string | null = null
+  @state accessor locked: boolean = false
   @state accessor x: number = 0
   @state accessor y: number = 0
-  @state accessor css: string
+  @state accessor css: string = ""
 
   @computed get width() {
     return this._width
@@ -60,10 +61,18 @@ export abstract class Node {
     this.y = props.y
     this._width = props.width
     this._height = props.height
-    this.role = props.role?.[0] || null
-    this.locked = props.locked ?? false
-    this.rotation = props.rotation ?? deg(0)
-    this.css = props.css ?? ""
+    if (typeof props.role === "object") {
+      this.role = props.role?.[0]
+    }
+    if (typeof props.locked === "boolean") {
+      this.locked = props.locked
+    }
+    if (typeof props.rotation === "number") {
+      this.rotation = props.rotation
+    }
+    if (typeof props.css === "string") {
+      this.css = props.css
+    }
   }
 
   get props(): NodeProps {

package/lib/model/page.ts

@@ -2,8 +2,9 @@ import { state } from "react-bolt"
 import type { Editor } from "./editor"
 import { Node, type SerializedNode } from "./node"
 
-export interface PageProps
-  extends Partial<Pick<Page, "background" | "width" | "height">> {
+export interface PageProps extends Partial<
+  Pick<Page, "background" | "width" | "height">
+> {
   id: string
   nodes?: Node[]
 }