@lazlon-platform/html-editor 0.5.0 → 0.7.0

package/lib/model/geometry/math.ts

@@ -20,6 +20,11 @@ export interface Rect extends Point, Size {
   readonly right: number
 }
 
+export interface Line {
+  readonly vertices: Point[]
+  readonly strokeWidth: number
+}
+
 /**
  * A rotated rectangle around a pivot point.
  * Pivot point is relative to the center point.
@@ -349,6 +354,128 @@ export function boxContainsPoint(target: Box, point: Point): boolean {
   )
 }
 
+function pointSegmentDistance(target: Point, a: Point, b: Point): number {
+  const segment = pointSubtract(b, a)
+  const lengthSq = vectorDotProd(segment, segment)
+
+  if (lengthSq === 0) {
+    return pointDist(target, a)
+  }
+
+  const fromStart = pointSubtract(target, a)
+  const projection = clamp(vectorDotProd(fromStart, segment) / lengthSq, 0, 1)
+  const closest = pointAdd(a, pointMultiply(segment, projection))
+
+  return pointDist(target, closest)
+}
+
+function segmentCross(a: Point, b: Point, c: Point): number {
+  return floatNorm((b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x))
+}
+
+function pointOnSegment(target: Point, a: Point, b: Point): boolean {
+  const x = floatNorm(target.x)
+  const y = floatNorm(target.y)
+
+  return (
+    segmentCross(a, b, target) === 0 &&
+    x >= floatNorm(Math.min(a.x, b.x)) &&
+    x <= floatNorm(Math.max(a.x, b.x)) &&
+    y >= floatNorm(Math.min(a.y, b.y)) &&
+    y <= floatNorm(Math.max(a.y, b.y))
+  )
+}
+
+function segmentsIntersect(a: Point, b: Point, c: Point, d: Point): boolean {
+  const abc = segmentCross(a, b, c)
+  const abd = segmentCross(a, b, d)
+  const cda = segmentCross(c, d, a)
+  const cdb = segmentCross(c, d, b)
+
+  return (
+    (abc === 0 && pointOnSegment(c, a, b)) ||
+    (abd === 0 && pointOnSegment(d, a, b)) ||
+    (cda === 0 && pointOnSegment(a, c, d)) ||
+    (cdb === 0 && pointOnSegment(b, c, d)) ||
+    (abc * abd < 0 && cda * cdb < 0)
+  )
+}
+
+function segmentDistance(a: Point, b: Point, c: Point, d: Point): number {
+  if (segmentsIntersect(a, b, c, d)) return 0
+
+  return Math.min(
+    pointSegmentDistance(a, c, d),
+    pointSegmentDistance(b, c, d),
+    pointSegmentDistance(c, a, b),
+    pointSegmentDistance(d, a, b),
+  )
+}
+
+/**
+ * @returns Whether point is contained in the stroked polyline.
+ */
+export function lineContainsPoint(line: Line, point: Point): boolean {
+  const points = line.vertices
+  const radius = line.strokeWidth / 2
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i]
+    const b = points[i + 1]
+
+    if (pointSegmentDistance(point, a, b) <= radius) return true
+  }
+
+  return false
+}
+
+/**
+ * @returns Whether the stroked polyline intersects the box.
+ */
+export function lineIntersectsBox(line: Line, box: Box): boolean {
+  const points = line.vertices
+
+  for (const point of points) {
+    if (boxContainsPoint(box, point)) return true
+  }
+
+  const radius = line.strokeWidth / 2
+  const corners = boxCorners(box)
+  const edges = corners.map(
+    (corner, i) => [corner, corners[(i + 1) % corners.length]] as const,
+  )
+
+  for (const corner of corners) {
+    if (lineContainsPoint(line, corner)) return true
+  }
+
+  if (points.length === 1) {
+    return edges.some(([a, b]) => pointSegmentDistance(points[0], a, b) <= radius)
+  }
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i]
+    const b = points[i + 1]
+
+    for (const [c, d] of edges) {
+      if (segmentDistance(a, b, c, d) <= radius) return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * @returns Line with increased strokeWidth for accessibility reasons.
+ */
+export function accessibleLine(line: Line): Line {
+  const { strokeWidth, vertices } = line
+  return {
+    vertices,
+    strokeWidth: Math.max(24, strokeWidth),
+  }
+}
+
 /**
  * @returns Four corners of a box.
  * ⠀⠀ ●
@@ -447,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/history.ts

@@ -1,16 +1,13 @@
 import { computed, state } from "react-bolt"
 import type { Editor } from "./editor"
-import type { Node, NodeProps, SerializedNode } from "./node"
+import type { Node, SerializedNode } from "./node"
 import type { PageProps } from "./page"
 
-export type HistoryAction<Props extends NodeProps = NodeProps> =
-  | [action: "batch", payload: Array<HistoryAction>]
-  | [
-      action: "add-node",
-      payload: [pageId: string, nodes: Array<SerializedNode<string, Props>>],
-    ]
+export type HistoryAction<N extends Node = Node> =
+  | [action: "batch", payload: Array<HistoryAction<N>>]
+  | [action: "add-node", payload: [pageId: string, nodes: Array<SerializedNode<N>>]]
   | [action: "delete-node", payload: [pageId: string, nodes: Array<string>]]
-  | [action: "set-node-props", payload: [nodeId: string, props: Partial<Props>]]
+  | [action: "set-node-props", payload: [nodeId: string, props: Partial<N["props"]>]]
   | [action: "set-page-props", payload: [pageId: string, props: Partial<PageProps>]]
   | [action: "stack-order", payload: [pageId: string, order: Array<string>]]
 
@@ -19,9 +16,9 @@ function assert<T>(instance?: T): T {
   return instance!
 }
 
-export type HistoryEntry<Props extends NodeProps = NodeProps> = {
-  undo: HistoryAction<Props>
-  redo: HistoryAction<Props>
+export type HistoryEntry<N extends Node = Node> = {
+  undo: HistoryAction<N>
+  redo: HistoryAction<N>
 }
 
 export class HistoryStore {
@@ -39,7 +36,7 @@ export class HistoryStore {
     return this._redoHistory
   }
 
-  readonly push = <Props extends NodeProps = NodeProps>(entry: HistoryEntry<Props>) => {
+  readonly push = <N extends Node>(entry: HistoryEntry<N>) => {
     if (this._redoHistory.length > 0) {
       this._redoHistory = []
     }
@@ -73,7 +70,7 @@ export class HistoryStore {
     this.emitChange()
   }
 
-  private execute([action, payload]: HistoryAction) {
+  private execute<N extends Node>([action, payload]: HistoryAction<N>) {
     switch (action) {
       case "batch": {
         payload.map((action) => this.execute(action))

package/lib/model/index.ts

@@ -1,15 +1,20 @@
 export { Editor, type NodeConstructor, type SerializedEditor } from "./editor"
 export { type HistoryAction, type HistoryEntry } from "./history"
 export { Node, type NodeProps, type SerializedNode } from "./node"
-export { EditableNode, type EditableNodeProps } from "./node/editable"
-export { FormattableNode, type FormattableNodeProps } from "./node/formattable"
-export { GroupNode, type GroupNodeProps } from "./node/group"
-export { ImageNode, type ImageNodeProps } from "./node/image"
-export { ArrowNode, type ArrowNodeProps } from "./node/shape/arrow"
-export { EllipseNode, type EllipseNodeProps } from "./node/shape/ellipse"
-export { PolygonNode, type PolygonNodeProps } from "./node/shape/polygon"
-export { ShapeNode, type ShapeNodeProps } from "./node/shape/shape"
-export { StarNode, type StarNodeProps } from "./node/shape/star"
-export { TextNode, type TextNodeProps } from "./node/text"
+export { EditableNode, type EditableNodeProps } from "./node/editableNode"
+export { FormattableNode, type FormattableNodeProps } from "./node/formattableNode"
+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,
+  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/{editable → editableNode}/index.ts

@@ -1,7 +1,6 @@
 import { Editor as Tiptap, type JSONContent } from "@tiptap/react"
 import { computed, state } from "react-bolt"
-import type { Editor } from "../../editor"
-import { Node, type NodeProps, type SerializedNode } from "../../node"
+import { Node, type NodeProps } from "../../node"
 import type { Page } from "../../page"
 import { TiptapExtensions } from "./tiptapExtensions"
 
@@ -69,35 +68,15 @@ export abstract class EditableNode extends Node {
     EditableNode.lastFocused = null
   }
 
-  constructor(
-    editor: Editor,
-    page: Page,
-    { content, lineHeight, ...props }: EditableNodeProps,
-  ) {
-    super(editor, page, props)
+  constructor(page: Page, { content, lineHeight, ...props }: EditableNodeProps) {
+    super(page, props)
     this.lineHeight = lineHeight ?? 1.2
     this.content = content ?? { type: "doc", content: [] }
   }
 
-  blockMove(event: React.PointerEvent): boolean {
-    const rect = this.tiptap.view.dom.getBoundingClientRect()
-    return (
-      super.blockMove(event) ||
-      (this.tiptap.isFocused &&
-        event.clientX >= rect.left &&
-        event.clientX <= rect.right &&
-        event.clientY >= rect.top &&
-        event.clientY <= rect.bottom)
-    )
-  }
-
-  props(): EditableNodeProps {
+  get props(): EditableNodeProps {
     const { content, lineHeight } = this
-    return { ...super.props(), content, lineHeight }
-  }
-
-  serialize(): SerializedNode<string, EditableNodeProps> {
-    return super.serialize()
+    return { ...super.props, content, lineHeight }
   }
 
   /**
@@ -107,14 +86,19 @@ export abstract class EditableNode extends Node {
    */
   private static lastFocused: EditableNode | null = null
 
-  static getFocused(node: EditableNode[]) {
-    const focused = node.find((e) => e.tiptap.isFocused)
+  /**
+   * Get the current focused node from {@link Editor.selection}.
+   */
+  static getFocused(selection: Iterable<EditableNode>) {
+    const nodes = Array.from(selection)
+
+    const focused = nodes.find((e) => e.tiptap.isFocused)
 
     if (focused) {
       return (this.lastFocused = focused)
     }
 
-    if (this.lastFocused && node.includes(this.lastFocused)) {
+    if (this.lastFocused && nodes.includes(this.lastFocused)) {
       return this.lastFocused
     }
 

package/lib/model/node/{formattable.ts → formattableNode/index.ts}

@@ -1,7 +1,6 @@
 import { state } from "react-bolt"
-import type { Editor } from "../editor"
-import { Node, type NodeProps, type SerializedNode } from "../node"
-import type { Page } from "../page"
+import { Node, type NodeProps } from "../../node"
+import type { Page } from "../../page"
 
 export type FormattableNodeProps = NodeProps &
   Partial<
@@ -37,7 +36,6 @@ export abstract class FormattableNode extends Node {
   @state accessor casing: "capitalize" | "uppercase" | "lowercase" | "normal"
 
   constructor(
-    editor: Editor,
     page: Page,
     {
       bold,
@@ -55,7 +53,7 @@ export abstract class FormattableNode extends Node {
       ...props
     }: FormattableNodeProps,
   ) {
-    super(editor, page, props)
+    super(page, props)
     this.bold = bold ?? false
     this.italic = italic ?? false
     this.underline = underline ?? false
@@ -70,7 +68,7 @@ export abstract class FormattableNode extends Node {
     this.casing = casing ?? "normal"
   }
 
-  props(): FormattableNodeProps {
+  get props(): FormattableNodeProps {
     const {
       bold,
       italic,
@@ -86,7 +84,7 @@ export abstract class FormattableNode extends Node {
       casing,
     } = this
     return {
-      ...super.props(),
+      ...super.props,
       size,
       spacing,
       lineHeight,
@@ -101,8 +99,4 @@ export abstract class FormattableNode extends Node {
       ...(family && { family }),
     }
   }
-
-  serialize(): SerializedNode<string, FormattableNodeProps> {
-    return super.serialize()
-  }
 }

package/lib/model/node/{group.ts → groupNode.ts}

@@ -1,5 +1,4 @@
 import { state } from "react-bolt"
-import type { Editor } from "../editor"
 import { Node, type NodeProps, type SerializedNode } from "../node"
 import type { Page } from "../page"
 
@@ -8,15 +7,15 @@ export interface GroupNodeProps extends NodeProps {
 }
 
 export class GroupNode extends Node {
-  get name() {
+  get name(): "group" {
     return "group"
   }
 
   @state accessor nodes = new Set<Node>()
 
-  constructor(editor: Editor, page: Page, { nodes = [], ...props }: GroupNodeProps) {
-    super(editor, page, props)
-    this.nodes = new Set(nodes.map((node) => editor.deserializeNode(page, node)))
+  constructor(page: Page, { nodes = [], ...props }: GroupNodeProps) {
+    super(page, props)
+    this.nodes = new Set(nodes.map((node) => page.editor.deserializeNode(page, node)))
   }
 
   get width() {
@@ -63,17 +62,14 @@ export class GroupNode extends Node {
     }
   }
 
-  props(): GroupNodeProps {
+  get props(): GroupNodeProps {
+    const { nodes, page } = this
     return {
-      ...super.props(),
-      nodes: this.nodes
+      ...super.props,
+      nodes: nodes
         .values()
-        .map((node) => node.serialize())
+        .map((node) => page.editor.serializeNode(node))
         .toArray(),
     }
   }
-
-  serialize(): SerializedNode<this["name"], GroupNodeProps> {
-    return super.serialize()
-  }
 }

package/lib/model/node/{image.ts → imageNode.ts}

@@ -1,13 +1,12 @@
 import { state } from "react-bolt"
-import type { Editor } from "../editor"
-import { Node, type NodeProps, type SerializedNode } from "../node"
+import { Node, type NodeProps } from "../node"
 import type { Page } from "../page"
 
 export type ImageNodeProps = NodeProps &
   Partial<Pick<ImageNode, "url" | "fit" | "roundness" | "borderWidth" | "borderColor">>
 
 export class ImageNode extends Node {
-  get name() {
+  get name(): "image" {
     return "image"
   }
 
@@ -18,24 +17,19 @@ export class ImageNode extends Node {
   @state accessor borderColor: string
 
   constructor(
-    editor: Editor,
     page: Page,
     { url, fit, roundness, borderWidth, borderColor, ...props }: ImageNodeProps,
   ) {
-    super(editor, page, props)
+    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
   }
 
-  props(): ImageNodeProps {
+  get props(): ImageNodeProps {
     const { url, fit, roundness, borderWidth, borderColor } = this
-    return { ...super.props(), url, fit, roundness, borderWidth, borderColor }
-  }
-
-  serialize(): SerializedNode<this["name"], ImageNodeProps> {
-    return super.serialize()
+    return { ...super.props, url, fit, roundness, borderWidth, borderColor }
   }
 }

package/lib/model/node/lineNode.ts

@@ -0,0 +1,80 @@
+import { computed, state } from "react-bolt"
+import {
+  floatNorm,
+  pointAdd,
+  rect,
+  rectCenter,
+  rotatePoint,
+  type Line,
+  type Point,
+} from "../geometry/math"
+import { Node, type NodeProps } from "../node"
+import type { Page } from "../page"
+
+export type LineNodeProps = NodeProps &
+  Partial<Pick<LineNode, "points" | "strokeWidth" | "strokeColor">>
+
+export class LineNode extends Node {
+  get name(): "line" {
+    return "line"
+  }
+
+  /** Relative to {@link x},{@link y} */
+  @state accessor points: Point[] = []
+  @state accessor strokeWidth: number
+  @state accessor strokeColor: string
+
+  @computed get height(): number {
+    return this.rect.height
+  }
+
+  set height(height: number) {
+    this.scalePoints("y", height)
+  }
+
+  @computed get width(): number {
+    return this.rect.width
+  }
+
+  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: 0, y: 0 },
+      { x: 100, y: 0 },
+    ]
+  }
+
+  get props(): LineNodeProps {
+    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/{shape/shape.ts → shapeNode/index.ts}

@@ -1,15 +1,23 @@
 import { state } from "react-bolt"
-import type { Editor } from "../../editor"
 import type { Page } from "../../page"
-import { EditableNode, type EditableNodeProps } from "../editable"
-import type { SerializedNode } from "../../node"
+import { EditableNode, type EditableNodeProps } from "../editableNode"
+import { newRectangleShape, type Shape } from "./shape"
+
+export * from "./shape"
 
 export type ShapeNodeProps = EditableNodeProps &
   Partial<
-    Pick<ShapeNode, "valign" | "halign" | "background" | "borderWidth" | "borderColor">
+    Pick<
+      ShapeNode,
+      "valign" | "halign" | "background" | "borderWidth" | "borderColor" | "shape"
+    >
   >
 
-export abstract class ShapeNode extends EditableNode {
+export class ShapeNode extends EditableNode {
+  get name(): "shape" {
+    return "shape"
+  }
+
   @state accessor background: string
   @state accessor borderWidth: number
   @state accessor borderColor: string
@@ -17,32 +25,39 @@ export abstract class ShapeNode extends EditableNode {
   @state accessor halign: "left" | "center" | "right" | "justify"
   @state accessor valign: "top" | "center" | "bottom"
 
+  @state accessor shape: Shape
+
   constructor(
-    editor: Editor,
     page: Page,
-    { valign, halign, background, borderColor, borderWidth, ...props }: ShapeNodeProps,
+    {
+      valign,
+      halign,
+      background,
+      borderColor,
+      borderWidth,
+      shape,
+      ...props
+    }: ShapeNodeProps,
   ) {
-    super(editor, page, props)
+    super(page, props)
     this.valign = valign ?? "center"
     this.halign = halign ?? "center"
     this.background = background ?? "#7f7f7f"
     this.borderColor = borderColor ?? "#000000"
     this.borderWidth = borderWidth ?? 0
+    this.shape = shape ?? newRectangleShape()
   }
 
-  props(): ShapeNodeProps {
-    const { valign, halign, background, borderColor, borderWidth } = this
+  get props(): ShapeNodeProps {
+    const { valign, halign, background, borderColor, borderWidth, shape } = this
     return {
-      ...super.props(),
+      ...super.props,
       valign,
       halign,
       background,
+      shape,
       ...(borderWidth && { borderColor }),
       ...(borderWidth && { borderWidth }),
     }
   }
-
-  serialize(): SerializedNode<this["name"], EditableNodeProps> {
-    return super.serialize()
-  }
 }