@lazlon-platform/html-editor 0.1.0

package/lib/lib/googleFonts.ts

@@ -0,0 +1,162 @@
+import { range } from "es-toolkit"
+import { useEffect, useState } from "react"
+
+const API_URL = "https://www.googleapis.com/webfonts/v1/webfonts"
+const FONT_URL = "https://fonts.googleapis.com/css2"
+
+const VARIANTS = {
+  regular: "0,400",
+  italic: "1,400",
+  "100": "0,100",
+  "200": "0,200",
+  "300": "0,300",
+  "500": "0,500",
+  "600": "0,600",
+  "700": "0,700",
+  "800": "0,800",
+  "900": "0,900",
+  "100italic": "1,100",
+  "200italic": "1,200",
+  "300italic": "1,300",
+  "500italic": "1,500",
+  "600italic": "1,600",
+  "700italic": "1,700",
+  "800italic": "1,800",
+  "900italic": "1,900",
+} as const
+
+type Variant = keyof typeof VARIANTS
+
+type Subset =
+  | "latin"
+  | "latin-ext"
+  | "cyrillic"
+  | "cyrillic-ext"
+  | "greek"
+  | "math"
+  | "symbols"
+  | "greek-ext"
+  | "gothic"
+  | "runic"
+  | "emoji"
+  | (string & {})
+
+export type FontCategory =
+  | "serif"
+  | "sans-serif"
+  | "handwriting"
+  | "display"
+  | "monospace"
+
+export type GoogleWebfont = {
+  family: string
+  variants: Variant[]
+  placeholder?: boolean
+  category: FontCategory
+}
+
+const variants: Variant[] = ["regular", "italic", "700", "700italic"]
+
+// server only
+export async function getGoogleFonts(
+  key: string,
+  queryParams: {
+    sort?: null | "alpha" | "date" | "popularity" | "style" | "trending"
+    family?: null | string
+    subset?: null | Subset
+    category?: null | FontCategory
+  },
+): Promise<GoogleWebfont[]> {
+  if (typeof window === "object") return []
+
+  const url = new URL(API_URL)
+  url.searchParams.set("key", key)
+  const { sort, family, subset, category } = queryParams
+
+  if (sort) url.searchParams.set("sort", sort)
+  if (family) url.searchParams.set("family", family)
+  if (subset) url.searchParams.set("subet", subset)
+  if (category) url.searchParams.set("category", category)
+
+  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()
+}
+
+export function getLink(font: GoogleWebfont) {
+  const family = font.family.replace(/ /g, "+")
+  const variantParams = font.variants
+    .filter((v) => v === "regular" || v === "italic" || v === "700" || v === "700italic")
+    .map((v) => VARIANTS[v])
+    .sort()
+    .join(";")
+
+  return `${FONT_URL}?display=swap&family=${family}:ital,wght@${variantParams}`
+}
+
+// client only
+export function loadFont(font: GoogleWebfont) {
+  if (!isLoaded(font.family)) {
+    const link = document.createElement("link")
+    link.rel = "stylesheet"
+    link.href = getLink(font)
+    loaded.add(font.family)
+    document.head.appendChild(link)
+  }
+}
+
+const loaded = new Set<string>()
+
+export function isLoaded(family: string) {
+  return loaded.has(family)
+}
+
+type LoadingState = "loaded" | "failed" | "loading"
+
+export function WithGoogleFont(props: {
+  font: GoogleWebfont
+  italic?: boolean
+  bold?: boolean
+  size?: string
+  children: (props: { state: LoadingState; fontFamily: string | null }) => React.ReactNode
+}) {
+  const { font, italic, bold, size, children } = props
+  const [state, setState] = useState<"loaded" | "failed" | "loading">("loading")
+
+  useEffect(() => {
+    if (font.placeholder) return
+    const fontSpec = [
+      italic && "italic",
+      bold && "bold",
+      size ?? "16px",
+      `"${font.family}"`,
+    ]
+    document.fonts
+      .load(fontSpec.filter((s) => typeof s === "string").join(" "))
+      .then(() => setState("loaded"))
+      .catch((error) => {
+        setState("failed")
+        console.error(error)
+      })
+  }, [font, italic, bold, size])
+
+  useEffect(() => {
+    if (!font.placeholder) {
+      loadFont(font)
+    }
+  }, [font])
+
+  return children({ state, fontFamily: font.placeholder ? null : font.family })
+}
+
+export function placeholder(length = 32): GoogleWebfont[] {
+  return range(length).map((i) => ({
+    family: `${i}`,
+    variants: [],
+    placeholder: true,
+    category: "sans-serif",
+  }))
+}

package/lib/model/editor.ts

@@ -0,0 +1,169 @@
+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 { 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 SerializedEditor {
+  idCounter: number
+  pages: SerializedPage[]
+  history: {
+    undoHistory: HistoryEntry[]
+    redoHistory: HistoryEntry[]
+  }
+}
+
+export type Action =
+  | { action?: never; payload?: never }
+  | { action: "select"; payload?: never }
+  | { action: "move"; payload: { x: number; y: number } }
+  | { action: "resize"; payload: { width: number; height: number } }
+  | { action: "rotate"; payload: { deg: number } }
+
+interface EditorOptions {
+  loadFonts(family: string): Promise<GoogleWebfont[]>
+  maxHistory: number
+  snapThreshold: number
+}
+
+export interface EditorProps {
+  schema: Array<NodeConstructor>
+  options?: Partial<EditorOptions>
+  init?: Partial<SerializedEditor>
+  onChange?: () => void
+}
+
+function unimplemented(): Promise<GoogleWebfont[]> {
+  throw Error("missing implementation")
+}
+
+export class Editor {
+  #idCounter = 0
+  #history: HistoryStore
+  #onChange: () => void
+  #schema: Map<string, NodeConstructor>
+
+  @state accessor ref: HTMLElement | null = null
+
+  @state accessor pages = new Map<string, Page>()
+  @state private accessor _selection = new Set<Node>()
+
+  @state accessor action: Action = {}
+  @state accessor zoom: number = 1
+
+  readonly options: EditorOptions
+  get history() {
+    return this.#history
+  }
+
+  @computed get selection() {
+    // TODO: also filter so that only nodes from a single page is included
+    const nodes = new Set(this.nodes.values())
+    return new Set(this._selection.values().filter((node) => nodes.has(node)))
+  }
+
+  set selection(set: Set<Node>) {
+    const equals = this._selection.size === set.size && this._selection.isSubsetOf(set)
+    if (!equals) this._selection = set
+  }
+
+  @computed
+  get nodes(): Map<string, Node> {
+    return new Map(
+      this.pages
+        .values()
+        .flatMap((page) => page.nodes.values())
+        .map((node) => [node.id, node] as const),
+    )
+  }
+
+  @computed
+  get selectionPage() {
+    if (this.selection.size === 0) return null
+    const [first, ...rest] = this.selection
+    return rest.reduce(
+      (acc: Page | null, curr) => (acc === curr.page ? curr.page : null),
+      first.page,
+    )
+  }
+
+  id(): string {
+    let c = ++this.#idCounter
+    let s = ""
+    while (c > 0) {
+      s = CHARS[c % CHARS.length] + s
+      c = Math.floor(c / CHARS.length)
+    }
+    return s
+  }
+
+  constructor(props: EditorProps) {
+    const { schema, options, init } = props
+    this.#onChange = () => props.onChange?.()
+    this.#schema = new Map(schema.map((ctor) => [ctor.prototype.name, ctor]))
+
+    this.options = createStore({
+      loadFonts: options?.loadFonts ?? unimplemented,
+      maxHistory: options?.maxHistory ?? 200,
+      snapThreshold: options?.snapThreshold ?? 8,
+    })
+
+    this.#history = new HistoryStore({
+      editor: this,
+      onChange: this.#onChange,
+    })
+
+    if (init) this.load(init)
+  }
+
+  load({ idCounter, pages = [], history }: Partial<SerializedEditor>) {
+    this.#idCounter = idCounter ?? 0
+    this.#history = new HistoryStore({
+      editor: this,
+      onChange: this.#onChange,
+      redoHistory: history?.redoHistory ?? [],
+      undoHistory: history?.undoHistory ?? [],
+    })
+
+    this.pages = new Map(
+      pages.map(({ nodes, ...props }) => {
+        const page = new Page(this, props)
+        page.nodes = new Map(
+          nodes.map((node) => [node.props.id, this.deserializeNode(page, node)]),
+        )
+
+        return [page.id, page] as const
+      }),
+    )
+  }
+
+  deserializeNode<T extends NodeProps>(
+    page: Page,
+    { name, props }: SerializedNode<string, T>,
+  ): Node {
+    const NodeClass = this.#schema.get(name)
+    if (!NodeClass) throw Error(`cannot deserialize unknown Node: ${name}`)
+    return new NodeClass(this, page, props)
+  }
+
+  serialize(): SerializedEditor {
+    return {
+      idCounter: this.#idCounter,
+      pages: this.pages
+        .values()
+        .map((page) => page.serialize())
+        .toArray(),
+      history: {
+        undoHistory: this.history.undoHistory,
+        redoHistory: this.history.redoHistory,
+      },
+    }
+  }
+}

package/lib/model/geometry.ts

@@ -0,0 +1,155 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Rect extends Point {
+  width: number
+  height: number
+}
+
+function rectCorners({ x, y, width, height }: Rect): Point[] {
+  return [
+    { x, y },
+    { x: x + width, y },
+    { x, y: y + height },
+    { x: x + width, y: y + height },
+  ]
+}
+
+/**
+ * @example
+ * ```ts
+ * const center = { x: 0, y: 0 }
+ * const P = { x: 2, y: 0 }
+ * rotate(P, center, 90) // P' = { x: 0, y: 2 }
+ * ```
+ *
+ * P
+ * ●
+ * │
+ * │ 90°
+ * ●─────● P'
+ */
+export function rotatePoint(p: Point, center: Point, deg: number): Point {
+  const rad = (deg * Math.PI) / 180
+  const cos = Math.cos(rad)
+  const sin = Math.sin(rad)
+  const dx = p.x - center.x
+  const dy = p.y - center.y
+
+  return {
+    x: center.x + dx * cos - dy * sin,
+    y: center.y + dx * sin + dy * cos,
+  }
+}
+
+export function boundingBox(args: Point[] | Rect[]): Rect {
+  const points: Point[] = args.flatMap((arg) =>
+    "width" in arg && "height" in arg ? rectCorners(arg) : arg,
+  )
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const p of points) {
+    if (p.x < minX) minX = p.x
+    if (p.y < minY) minY = p.y
+    if (p.x > maxX) maxX = p.x
+    if (p.y > maxY) maxY = p.y
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  }
+}
+
+export function rectCenter({ x, y, width, height }: Rect): Point {
+  return {
+    x: x + width / 2,
+    y: y + height / 2,
+  }
+}
+
+/**
+ * axis-aligned bounding box (AABB) of the rotated rectangle
+ */
+export function rotatedAABB(rect: Rect, deg: number): Rect {
+  return boundingBox(rectCorners(rect).map((c) => rotatePoint(c, rectCenter(rect), deg)))
+}
+
+export function dist(a: Point, b: Point) {
+  const dx = a.x - b.x
+  const dy = a.y - b.y
+  return Math.hypot(dx, dy)
+}
+
+export function sub(a: Point, b: Point) {
+  return {
+    x: a.x - b.x,
+    y: a.y - b.y,
+  }
+}
+
+export function add(a: Point, b: Point) {
+  return {
+    x: a.x + b.x,
+    y: a.y + b.y,
+  }
+}
+
+export function mul(p: Point, n: number) {
+  return {
+    x: p.x * n,
+    y: p.y * n,
+  }
+}
+
+export function norm(p: Point) {
+  const d = Math.hypot(p.x, p.y)
+  return {
+    x: d === 0 ? 0 : p.x / d,
+    y: d === 0 ? 0 : p.y / d,
+  }
+}
+
+export function dot(a: Point, b: Point) {
+  return a.x * b.x + a.y * b.y
+}
+
+export function clamp(n: number, lo: number, hi: number) {
+  return Math.max(lo, Math.min(hi, n))
+}
+
+export function tidyFloat(v: number) {
+  return Math.abs(v) < 1e-10 ? 0 : +v.toFixed(3)
+}
+
+export function radToDeg(rad: number): number {
+  return (rad * 180) / Math.PI
+}
+
+/**
+ * @example
+ * ```ts
+ * const center = { x: 0, y: 0 }
+ * const a = { x: 0, y: 2 }
+ * const b = { x: 2, y: 0 }
+ * angle(center, a, b) // 90
+ * ```
+ * a
+ * ●
+ * │
+ * │ 90°
+ * ●─────● b
+ */
+export function angle(center: Point, a: Point, b: Point): number {
+  const angA = radToDeg(Math.atan2(a.y - center.y, a.x - center.x))
+  const angB = radToDeg(Math.atan2(b.y - center.y, b.x - center.x))
+  return Math.round(((((angA + angB + 180) % 360) + 360) % 360) - 180)
+}

package/lib/model/history.ts

@@ -0,0 +1,135 @@
+import { computed, state } from "react-bolt"
+import type { Editor } from "./editor"
+import type { Node, NodeProps, 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>>],
+    ]
+  | [action: "delete-node", payload: [pageId: string, nodes: Array<string>]]
+  | [action: "set-node-props", payload: [nodeId: string, props: Partial<Props>]]
+  | [action: "set-page-props", payload: [pageId: string, props: Partial<PageProps>]]
+  | [action: "stack-order", payload: [pageId: string, order: Array<string>]]
+
+function assert<T>(instance?: T): T {
+  if (!instance) throw Error("unreachable")
+  return instance!
+}
+
+export type HistoryEntry<Props extends NodeProps = NodeProps> = {
+  undo: HistoryAction<Props>
+  redo: HistoryAction<Props>
+}
+
+export class HistoryStore {
+  private emitChange: () => void
+  readonly editor: Editor
+
+  @state private accessor _undoHistory: HistoryEntry[]
+  @state private accessor _redoHistory: HistoryEntry[]
+
+  @computed get undoHistory() {
+    return this._undoHistory
+  }
+
+  @computed get redoHistory() {
+    return this._redoHistory
+  }
+
+  readonly push = <Props extends NodeProps = NodeProps>(entry: HistoryEntry<Props>) => {
+    if (this._redoHistory.length > 0) {
+      this._redoHistory = []
+    }
+
+    this._undoHistory = [
+      ...this._undoHistory.slice(0, this.editor.options.maxHistory - 1),
+      entry,
+    ]
+    this.emitChange()
+  }
+
+  readonly undo = () => {
+    const undoList = [...this._undoHistory]
+    const entry = undoList.pop()
+    if (entry) {
+      this.execute(entry.undo)
+      this._redoHistory = [...this._redoHistory, entry]
+      this._undoHistory = undoList
+    }
+    this.emitChange()
+  }
+
+  readonly redo = () => {
+    const redoList = [...this._redoHistory]
+    const entry = redoList.pop()
+    if (entry) {
+      this.execute(entry.redo)
+      this._undoHistory = [...this._undoHistory, entry]
+      this._redoHistory = redoList
+    }
+    this.emitChange()
+  }
+
+  private execute([action, payload]: HistoryAction) {
+    switch (action) {
+      case "batch": {
+        payload.map((action) => this.execute(action))
+        break
+      }
+      case "add-node": {
+        const [pageId, data] = payload
+        const page = assert(this.editor.pages.get(pageId))
+        page.nodes = new Map([
+          ...page.nodes,
+          ...data.map((props) => {
+            const node = this.editor.deserializeNode(page, props)
+            return [node.id, node] as const
+          }),
+        ])
+        break
+      }
+      case "delete-node": {
+        const [pageId, data] = payload
+        const page = assert(this.editor.pages.get(pageId))
+        page.nodes = new Map(page.nodes.entries().filter(([key]) => !data.includes(key)))
+        break
+      }
+      case "set-node-props": {
+        const [nodeId, props] = payload
+        const node = assert(this.editor.nodes.get(nodeId))
+        Object.assign(node, props)
+        break
+      }
+      case "set-page-props": {
+        const [pageId, props] = payload
+        const page = assert(this.editor.pages.get(pageId))
+        Object.assign(page, props)
+        break
+      }
+      case "stack-order": {
+        const [pageId, order] = payload
+        const page = assert(this.editor.pages.get(pageId))
+        page.nodes = order.reduce((acc, id) => {
+          const node = assert(page.nodes.get(id))
+          return acc.set(node.id, node)
+        }, new Map<string, Node>())
+        break
+      }
+    }
+  }
+
+  constructor(props: {
+    editor: Editor
+    undoHistory?: HistoryEntry[]
+    redoHistory?: HistoryEntry[]
+    onChange: () => void
+  }) {
+    this.editor = props.editor
+    this.emitChange = props.onChange
+    this._undoHistory = props.undoHistory ?? []
+    this._redoHistory = props.redoHistory ?? []
+  }
+}

package/lib/model/index.ts

@@ -0,0 +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 { PolygonNode, type PolygonNodeProps } from "./node/shape/polygon"
+export { ShapeNode, type ShapeNodeProps } from "./node/shape/shape"
+export { TextNode, type TextNodeProps } from "./node/text"
+export { Page, type PageProps, type SerializedPage } from "./page"
+export { flattenNodes } from "./traversal"