@lazlon-platform/html-editor 0.4.0 → 0.6.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,12 @@
 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 } 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,11 +17,10 @@ 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.roundness = roundness ?? 0
@@ -30,12 +28,8 @@ export class ImageNode extends Node {
     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,59 @@
+import { computed, state } from "react-bolt"
+import { point, pointAdd, rect, 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(_) {
+    // no-op: size is calculated from x,y and points
+  }
+
+  @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)))
+  }
+
+  constructor(page: Page, { points, strokeWidth, strokeColor, ...props }: LineNodeProps) {
+    super(page, props)
+    this.points = points ?? [
+      { x: -50, y: -50 },
+      { x: 100, y: 50 },
+      { x: 100, y: 0 },
+    ]
+    this.strokeWidth = strokeWidth ?? 1
+    this.strokeColor = strokeColor ?? "#000000"
+  }
+
+  get props(): LineNodeProps {
+    const { points, strokeWidth, strokeColor } = this
+    return { ...super.props, points, strokeWidth, strokeColor }
+  }
+}

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()
-  }
 }

package/lib/model/node/shapeNode/shape.ts

@@ -0,0 +1,96 @@
+// shapes are not reactive stores because the batch dispatcher and history model
+// is designed for non-nested stores
+
+import { clamp } from "es-toolkit"
+
+export interface StarShape {
+  name: "star"
+  props: {
+    corners: number
+    roundness: number
+    depth: number
+  }
+}
+
+export function newStarShape(props?: Partial<StarShape["props"]>): StarShape {
+  return {
+    name: "star",
+    props: {
+      corners: Math.max(props?.corners ?? 5, 3),
+      roundness: Math.max(props?.roundness ?? 0, 0),
+      depth: clamp(props?.depth ?? 0.4, 0, 1),
+    },
+  }
+}
+
+export interface ArrowShape {
+  name: "arrow"
+  props: {
+    roundness: number
+  }
+}
+
+export function newArrowShape(props?: Partial<ArrowShape["props"]>): ArrowShape {
+  return {
+    name: "arrow",
+    props: {
+      roundness: Math.max(props?.roundness ?? 0, 0),
+    },
+  }
+}
+
+export interface EllipseShape {
+  name: "ellipse"
+  props: { _?: never }
+}
+
+export function newEllipseShape(): EllipseShape {
+  return {
+    name: "ellipse",
+    props: {},
+  }
+}
+
+export interface PolygonShape {
+  name: "polygon"
+  props: {
+    roundness: number
+    sides: number
+  }
+}
+
+export function newPolygonShape(props?: Partial<PolygonShape["props"]>): PolygonShape {
+  return {
+    name: "polygon",
+    props: {
+      roundness: Math.max(props?.roundness ?? 0, 0),
+      sides: clamp(props?.sides ?? 5, 3, 20),
+    },
+  }
+}
+
+export interface RectangleShape {
+  name: "rectangle"
+  props: {
+    cornerTopLeft: number
+    cornerTopRight: number
+    cornerBottomLeft: number
+    cornerBottomRight: number
+  }
+}
+
+export function newRectangleShape(
+  props?: Partial<RectangleShape["props"]>,
+): RectangleShape {
+  return {
+    name: "rectangle",
+    props: {
+      cornerTopLeft: Math.max(props?.cornerTopLeft ?? 0, 0),
+      cornerTopRight: Math.max(props?.cornerTopRight ?? 0, 0),
+      cornerBottomLeft: Math.max(props?.cornerBottomLeft ?? 0, 0),
+      cornerBottomRight: Math.max(props?.cornerBottomRight ?? 0, 0),
+    },
+  }
+}
+
+export type Shape = RectangleShape | ArrowShape | PolygonShape | StarShape | EllipseShape

package/lib/model/node/{text.ts → textNode.ts}

@@ -1,13 +1,11 @@
 import { computed, 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"
 
 export type TextNodeProps = EditableNodeProps & Partial<Pick<TextNode, "halign" | "size">>
 
 export class TextNode extends EditableNode {
-  get name() {
+  get name(): "text" {
     return "text"
   }
 
@@ -15,22 +13,20 @@ export class TextNode extends EditableNode {
   @state accessor size: number = 16
   @state accessor contentHeight: number = 24
 
+  private observer = new ResizeObserver(([entry]) => {
+    this.contentHeight = entry.target.clientHeight
+  })
+
   @computed get height(): number {
     return this.contentHeight
   }
 
-  set height(n: number) {
-    const target = Math.max(1, n)
-
-    if (this.contentHeight > 0) {
-      this.size = (this.size * target) / this.contentHeight
-    }
-
-    this.contentHeight = target
+  set height(_) {
+    // no-op: TextNode's height can be set using its font-size
   }
 
-  constructor(editor: Editor, page: Page, { halign, size, ...props }: TextNodeProps) {
-    super(editor, page, props)
+  constructor(page: Page, { halign, size, ...props }: TextNodeProps) {
+    super(page, props)
     this.halign = halign ?? "center"
     this.size = size ?? 16
 
@@ -42,19 +38,21 @@ export class TextNode extends EditableNode {
 
   set contentRef(ref: HTMLElement | null) {
     super.contentRef = ref
-    if (ref) this.contentHeight = ref.clientHeight
+
+    if (ref) {
+      this.observer.observe(ref)
+      this.contentHeight = ref.clientHeight
+    } else {
+      this.observer.disconnect()
+    }
   }
 
   @computed get contentRef() {
     return super.contentRef
   }
 
-  props(): TextNodeProps {
+  get props(): TextNodeProps {
     const { halign, size } = this
-    return { ...super.props(), halign, size }
-  }
-
-  serialize(): SerializedNode<this["name"], TextNodeProps> {
-    return super.serialize()
+    return { ...super.props, halign, size }
   }
 }

package/lib/model/node.ts

@@ -1,16 +1,12 @@
 import { computed, state } from "react-bolt"
-import type { Editor } from "./editor"
-import { rotatedAABB } from "./geometry"
+import { deg, type Deg } from "./geometry/math"
 import type { Page } from "./page"
 
 export type Schema = Map<string, typeof Node>
 
-export type SerializedNode<
-  Name extends string = string,
-  Props extends NodeProps = NodeProps,
-> = {
-  name: Name
-  props: Props
+export type SerializedNode<N extends Node = Node> = {
+  name: N["name"]
+  props: N["props"]
 }
 
 export interface NodeProps
@@ -23,6 +19,7 @@ export interface NodeProps
 
 export abstract class Node {
   abstract get name(): string
+
   readonly id: string
   readonly page: Page
 
@@ -31,11 +28,11 @@ export abstract class Node {
   @state private accessor _width: number
   @state private accessor _height: number
 
-  @state accessor rotation: number
+  @state accessor rotation: Deg
   @state accessor role: string | null
   @state accessor locked: boolean
-  @state accessor x: number
-  @state accessor y: number
+  @state accessor x: number = 0
+  @state accessor y: number = 0
   @state accessor css: string
 
   @computed get width() {
@@ -56,7 +53,7 @@ export abstract class Node {
     this._height = n
   }
 
-  constructor(_: Editor, page: Page, props: NodeProps) {
+  constructor(page: Page, props: NodeProps) {
     this.page = page
     this.id = props.id
     this.x = props.x
@@ -65,15 +62,11 @@ export abstract class Node {
     this._height = props.height
     this.role = props.role?.[0] || null
     this.locked = props.locked ?? false
-    this.rotation = props.rotation ?? 0
+    this.rotation = props.rotation ?? deg(0)
     this.css = props.css ?? ""
   }
 
-  blockMove(_: React.PointerEvent): boolean {
-    return !!this.locked
-  }
-
-  props(): NodeProps {
+  get props(): NodeProps {
     const { id, role, locked, rotation, css, x, y, width, height } = this
     return {
       id,
@@ -87,15 +80,4 @@ export abstract class Node {
       ...(rotation && { rotation }),
     }
   }
-
-  serialize(): SerializedNode {
-    return {
-      name: this.name,
-      props: this.props(),
-    }
-  }
-
-  @computed get boundingBox() {
-    return rotatedAABB(this, this.rotation)
-  }
 }