@lazlon-platform/html-editor 0.1.0

package/demo/Navbar/index.tsx

@@ -0,0 +1,33 @@
+import { useAddNodeAction, useEditor } from "@lazlon/html-editor/hooks"
+import { PolygonNode } from "@lazlon/html-editor/model"
+import { useStore } from "react-bolt"
+
+function randomHexColor(): string {
+  const value = Math.floor(Math.random() * 0xffffff)
+  return `#${value.toString(16).padStart(6, "0")}`
+}
+
+export default function Navbar() {
+  const { history } = useEditor()
+  const canUndo = useStore(history, "undoHistory").length
+  const canRedo = useStore(history, "redoHistory").length
+  const addNode = useAddNodeAction()
+
+  return (
+    <nav className="bg-white flex shadow-xl justify-between px-2">
+      <span className="text-3xl font-medium p-1">Brand</span>
+
+      <div className="flex gap-2 my-auto">
+        <button onClick={() => addNode(PolygonNode, { background: randomHexColor() })}>
+          add
+        </button>
+        <button disabled={!canRedo} onClick={history.redo}>
+          redo
+        </button>
+        <button disabled={!canUndo} onClick={history.undo}>
+          undo
+        </button>
+      </div>
+    </nav>
+  )
+}

package/demo/Sidebar/index.tsx

@@ -0,0 +1,71 @@
+import {
+  useEditor,
+  useNodeFieldBatch,
+  useVisualPositionBatch,
+} from "@lazlon/html-editor/hooks"
+import { PolygonNode } from "@lazlon/html-editor/model"
+import { ColorField, Input, Label, NumberField } from "react-aria-components"
+import { useStore } from "react-bolt"
+
+export default function SideBar() {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection").values().toArray()
+
+  const width = useNodeFieldBatch(selection, "width", NaN)
+  const height = useNodeFieldBatch(selection, "height", NaN)
+  const { x, y } = useVisualPositionBatch(selection)
+  const rotation = useNodeFieldBatch(selection, "rotation", NaN)
+
+  const polygons = selection.filter((node) => node instanceof PolygonNode)
+  const color = useNodeFieldBatch(polygons, "background", "#000000")
+  const roundness = useNodeFieldBatch(polygons, "roundness", NaN)
+  const sides = useNodeFieldBatch(polygons, "sides", NaN)
+
+  return (
+    <div className="bg-white flex flex-col w-58 shadow-lg p-2 gap-8 h-full">
+      {selection.length > 0 && (
+        <fieldset className="grid grid-cols-2 gap-4">
+          <NumberField value={x.value} onChange={x.onChangeEnd}>
+            <Label>X Position</Label>
+            <Input className="w-full" />
+          </NumberField>
+          <NumberField value={y.value} onChange={y.onChangeEnd}>
+            <Label>Y Position</Label>
+            <Input className="w-full" />
+          </NumberField>
+          <NumberField value={width.value} onChange={width.onChangeEnd}>
+            <Label>Width</Label>
+            <Input className="w-full" />
+          </NumberField>
+          <NumberField value={height.value} onChange={height.onChangeEnd}>
+            <Label>Height</Label>
+            <Input className="w-full" />
+          </NumberField>
+          <NumberField value={rotation.value} onChange={rotation.onChangeEnd}>
+            <Label>Rotation</Label>
+            <Input className="w-full" />
+          </NumberField>
+        </fieldset>
+      )}
+      {polygons.length > 0 && (
+        <fieldset className="grid grid-cols-2 gap-4">
+          <ColorField
+            value={color.value}
+            onChange={(c) => color.onChangeEnd(c!.toString("hex"))}
+          >
+            <Label>Color</Label>
+            <Input className="w-full" />
+          </ColorField>
+          <NumberField value={roundness.value} onChange={roundness.onChangeEnd}>
+            <Label>Roundness</Label>
+            <Input className="w-full" />
+          </NumberField>
+          <NumberField value={sides.value} onChange={sides.onChangeEnd} minValue={3}>
+            <Label>Sides</Label>
+            <Input className="w-full" />
+          </NumberField>
+        </fieldset>
+      )}
+    </div>
+  )
+}

package/demo/hotkeys.ts

@@ -0,0 +1,93 @@
+import {
+  useAddNodeAction,
+  useDuplicateAction,
+  useEditor,
+  useGroupAction,
+  useMoveAction,
+  useTrashAction,
+} from "@lazlon/html-editor/hooks"
+import { GroupNode, PolygonNode, TextNode, type Node } from "@lazlon/html-editor/model"
+import { useEffect } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+
+let pasteCount = 0
+let clipboard = new Set<Node>()
+
+export default function Hotkeys(): React.ReactNode {
+  const editor = useEditor()
+  const duplicate = useDuplicateAction()
+  const trash = useTrashAction()
+  const { group, ungroup } = useGroupAction()
+  const addNode = useAddNodeAction()
+  const move = useMoveAction()
+
+  useEffect(() => {
+    const stage = editor.ref
+
+    function onWheel(e: WheelEvent) {
+      if (!e.ctrlKey) return
+      e.preventDefault()
+
+      const sign = Math.sign(e.deltaY)
+
+      // zoom in, cap at 500%
+      if (sign < 0 && editor.zoom < 5) {
+        editor.zoom += 0.05
+      }
+
+      // zoom out, cap at 5%
+      if (sign > 0 && editor.zoom > 0.05) {
+        editor.zoom -= 0.05
+      }
+    }
+
+    if (stage) {
+      stage.addEventListener("wheel", onWheel, { passive: false })
+      return () => void stage.removeEventListener("wheel", onWheel)
+    }
+  })
+
+  useHotkeys("mod+c", () => {
+    pasteCount = 0
+    clipboard = new Set(editor.selection)
+  })
+
+  useHotkeys("mod+v", () => {
+    duplicate({ nodes: clipboard, offset: ++pasteCount * 10 })
+  })
+
+  useHotkeys("backspace", trash)
+  useHotkeys("delete", trash)
+  useHotkeys("mod+d", () => duplicate())
+
+  useHotkeys("mod+z", () => editor.history.undo())
+  useHotkeys("mod+y", () => editor.history.redo())
+
+  useHotkeys("mod+g", group)
+  useHotkeys("mod+shift+g", () => {
+    const [group, ...rest] = editor.selection
+    if (group && group instanceof GroupNode && rest.length === 0) {
+      ungroup(group)
+    }
+  })
+
+  useHotkeys("shift+r", () => addNode(PolygonNode, { sides: 4 }))
+  // useHotkeys("shift+l", () => addNode(LineNode))
+  useHotkeys("shift+t", () => addNode(TextNode))
+  // useHotkeys("shift+o", () => addNode(OvalNode))
+
+  useHotkeys("escape", () => {
+    editor.selection = new Set()
+  })
+
+  useHotkeys("up", () => move({ y: -1 }))
+  useHotkeys("down", () => move({ y: 1 }))
+  useHotkeys("left", () => move({ x: -1 }))
+  useHotkeys("right", () => move({ x: 1 }))
+  useHotkeys("shift+up", () => move({ y: -10 }))
+  useHotkeys("shift+down", () => move({ y: 10 }))
+  useHotkeys("shift+left", () => move({ x: -10 }))
+  useHotkeys("shift+right", () => move({ x: 10 }))
+
+  return null
+}

package/demo/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App"
+import "./style.css"
+
+createRoot(document.body).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/demo/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      // react-bolt uses accessors for state updates
+      "react-hooks/immutability": ["off"],
+
+      // Allow unused variables with underscore
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+])

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>html-editor</title>
+</head>
+
+<body class="h-screen">
+    <script type="module" src="/demo/main.tsx"></script>
+</body>
+
+</html>

package/lib/hooks/actions.ts

@@ -0,0 +1,426 @@
+import { useComputed } from "react-bolt"
+import type { Editor, NodeConstructor } from "../model/editor"
+import type { HistoryAction } from "../model/history"
+import type { Node, NodeProps } from "../model/node"
+import { GroupNode } from "../model/node/group"
+import { TextNode } from "../model/node/text"
+import type { Page } from "../model/page"
+import { flattenNodes } from "../model/traversal"
+import { getTargetRect } from "../ui/selection"
+import { useBatchSet } from "./batch"
+import { useEditor } from "./editor"
+
+export function clone(
+  editor: Editor,
+  node: Node,
+  props?: ((props: NodeProps) => Partial<NodeProps>) | Partial<NodeProps>,
+) {
+  const copy = node.serialize().props
+  const newProps = typeof props === "function" ? props(copy) : props
+  const newNode = editor.deserializeNode(node.page, {
+    props: { ...copy, ...newProps },
+    name: node.name,
+  })
+
+  for (const n of flattenNodes(newNode)) {
+    // @ts-expect-error id is readonly
+    n.id = editor.id()
+  }
+
+  return newNode
+}
+
+export function useAddNodeAction(page?: Page) {
+  const editor = useEditor()
+
+  return function addNode<N extends NodeConstructor>(
+    NodeClass: N,
+    props?: Partial<ConstructorParameters<N>[2]>,
+  ) {
+    const [firstPage] = editor.pages.values()
+    const targetPage = page ?? firstPage
+    if (!targetPage) return
+    const { width, height, nodes } = targetPage
+
+    const node = new NodeClass(editor, targetPage, {
+      id: editor.id(),
+      x: Math.round(width / 2) - 50,
+      y: Math.round(height / 2) - 50,
+      width: 100,
+      height: 100,
+      ...props,
+    })
+
+    targetPage.nodes = new Map([...nodes, [node.id, node]])
+    editor.history.push({
+      redo: ["add-node", [targetPage.id, [node.serialize()]]],
+      undo: ["delete-node", [targetPage.id, [node.id]]],
+    })
+
+    if (node instanceof TextNode) {
+      editor.selection = new Set([node])
+      setTimeout(() => node.tiptap.commands.focus())
+    }
+
+    return node as InstanceType<N>
+  }
+}
+
+export function useMoveAction() {
+  const editor = useEditor()
+  const batchSet = useBatchSet()
+
+  return function move(props: { x?: number; y?: number }) {
+    const { x, y } = props
+    const selection = editor.selection.values().toArray()
+    if (x) batchSet(selection, (n) => ({ x: n.x + x }))
+    if (y) batchSet(selection, (n) => ({ y: n.y + y }))
+  }
+}
+
+export function useTrashAction() {
+  const editor = useEditor()
+
+  return function trash() {
+    const { selection, selectionPage: page } = editor
+    const array = selection.values().toArray()
+    if (selection.size === 0 || !page) return
+
+    editor.history.push({
+      redo: ["delete-node", [page.id, array.map((node) => node.id)]],
+      undo: ["add-node", [page.id, array.map((n) => n.serialize())]],
+    })
+
+    editor.selection = new Set()
+    page.nodes = new Map(page.nodes.entries().filter(([, node]) => !selection.has(node)))
+  }
+}
+
+export function useGroupAction() {
+  const editor = useEditor()
+
+  function group() {
+    const { selection, selectionPage: page } = editor
+    const { width, height, x, y } = getTargetRect(selection)
+    if (selection.size === 0 || !page) return
+
+    const group = new GroupNode(editor, page, {
+      id: editor.id(),
+      width,
+      height,
+      x,
+      y,
+      nodes: selection
+        .values()
+        .map((node) =>
+          clone(editor, node, (n) => ({
+            x: n.x - x,
+            y: n.y - y,
+          })).serialize(),
+        )
+        .toArray(),
+    })
+
+    editor.selection = new Set()
+    page.nodes = new Map([
+      ...page.nodes
+        .values()
+        .filter((n) => !selection.has(n))
+        .map((n) => [n.id, n] as const),
+      [group.id, group],
+    ])
+
+    editor.history.push({
+      redo: [
+        "batch",
+        [
+          [
+            "delete-node",
+            [
+              page.id,
+              selection
+                .values()
+                .map((n) => n.id)
+                .toArray(),
+            ],
+          ],
+          ["add-node", [page.id, [group.serialize()]]],
+        ],
+      ],
+      undo: [
+        "batch",
+        [
+          ["delete-node", [page.id, [group.id]]],
+          [
+            "add-node",
+            [
+              page.id,
+              selection
+                .values()
+                .map((n) => n.serialize())
+                .toArray(),
+            ],
+          ],
+        ],
+      ],
+    })
+  }
+
+  function ungroup(group: GroupNode) {
+    const page = group.page
+    const nodes = group.nodes
+      .values()
+      .map((node) =>
+        clone(editor, node, (n) => ({
+          x: n.x + group.x,
+          y: n.y + group.y,
+        })),
+      )
+      .toArray()
+
+    editor.selection = new Set()
+    page.nodes = new Map([
+      ...page.nodes.entries().filter(([id]) => id !== group.id),
+      ...nodes.map((node) => [node.id, node] as const),
+    ])
+
+    editor.history.push({
+      redo: [
+        "batch",
+        [
+          ["delete-node", [page.id, [group.id]]],
+          ["add-node", [page.id, nodes.map((n) => n.serialize())]],
+        ],
+      ],
+      undo: [
+        "batch",
+        [
+          ["delete-node", [page.id, nodes.map((node) => node.id)]],
+          ["add-node", [page.id, [group.serialize()]]],
+        ],
+      ],
+    })
+  }
+
+  return { group, ungroup }
+}
+
+export function useDuplicateAction() {
+  const editor = useEditor()
+
+  return function duplicate(props?: { page?: Page; nodes?: Set<Node>; offset?: number }) {
+    const selection = props?.nodes ?? editor.selection
+    const offset = props?.offset ?? 10
+    const page = props?.page ?? editor.selectionPage
+    if (selection.size === 0 || !page) return
+
+    const nodes = selection
+      .values()
+      .map((node) =>
+        clone(editor, node, (n) => ({
+          x: n.x + offset,
+          y: n.y + offset,
+        })),
+      )
+      .toArray()
+
+    page.nodes = new Map([
+      ...page.nodes,
+      ...nodes.map((node) => [node.id, node] as const),
+    ])
+
+    editor.selection = new Set(nodes)
+    editor.history.push({
+      redo: ["add-node", [page.id, nodes.map((n) => n.serialize())]],
+      undo: ["delete-node", [page.id, nodes.map((node) => node.id)]],
+    })
+  }
+}
+
+export function useToggleLockAction() {
+  const editor = useEditor()
+
+  return function toggleLock() {
+    const selection = editor.selection.values().toArray()
+    const isLocked = selection.some((n) => n.locked)
+    for (const node of selection) {
+      node.locked = !isLocked
+    }
+  }
+}
+
+export function useAlignAction() {
+  type AlignProps = { x: number } | { y: number }
+
+  const editor = useEditor()
+
+  function align(fn: (node: Node) => { prev: AlignProps; next: AlignProps }) {
+    const undo: HistoryAction[] = []
+    const redo: HistoryAction[] = []
+
+    for (const node of editor.selection) {
+      const { prev, next } = fn(node)
+      undo.push(["set-node-props", [node.id, prev]])
+      redo.push(["set-node-props", [node.id, next]])
+    }
+
+    editor.history.push({
+      undo: ["batch", undo],
+      redo: ["batch", redo],
+    })
+  }
+
+  function halign(getX: (node: Node) => number) {
+    align((node) => {
+      const x = getX(node)
+      const res = { next: { x }, prev: { x: node.x } }
+      node.x = x
+      return res
+    })
+  }
+
+  function valign(getY: (node: Node) => number) {
+    align((node) => {
+      const y = getY(node)
+      const res = { next: { y }, prev: { y: node.y } }
+      node.y = y
+      return res
+    })
+  }
+
+  return {
+    left: () => halign(() => 0),
+    center: () => halign((n) => Math.round(n.page.width / 2 - n.width / 2)),
+    right: () => halign((n) => Math.round(n.page.width - n.width)),
+    top: () => valign(() => 0),
+    middle: () => valign((n) => Math.round(n.page.height / 2 - n.height / 2)),
+    bottom: () => valign((n) => Math.round(n.page.height - n.height)),
+  }
+}
+
+export function useDistributeAction() {
+  const editor = useEditor()
+
+  function distribute(pos: "x" | "y", size: "width" | "height") {
+    const rect = getTargetRect(editor.selection)
+    const array = editor.selection.values().toArray()
+
+    const undo: HistoryAction[] = array.map((node) => [
+      "set-node-props",
+      [node.id, { [pos]: node[pos] }],
+    ])
+
+    const total = array.reduce((sum, it) => sum + it[size], 0)
+    const gap = (rect[size] - total) / (array.length - 1)
+
+    let cursor = rect[pos]
+
+    const redo: HistoryAction[] = array
+      .toSorted((a, b) => a[pos] - b[pos])
+      .map((node) => {
+        node[pos] = cursor
+        cursor += node[size] + gap
+
+        return ["set-node-props", [node.id, { [pos]: node[pos] }]]
+      })
+
+    editor.history.push({
+      undo: ["batch", undo],
+      redo: ["batch", redo],
+    })
+  }
+
+  return {
+    horizontal: () => distribute("x", "width"),
+    vertical: () => distribute("y", "height"),
+  }
+}
+
+/** @example move([a,b,c,d], [b,d]) -> [b,a,d,c] */
+function moveBackward<T>(arr: T[], elems: Set<T>): T[] {
+  if (arr.length < 2) return arr
+
+  for (let i = 1; i < arr.length; i++) {
+    const curr = arr[i]
+    if (elems.has(curr)) {
+      arr[i] = arr[i - 1]
+      arr[i - 1] = curr
+    }
+  }
+
+  return arr
+}
+
+/** @example move([a,b,c,d], [b,d]) -> [a,c,b,d] */
+function moveForward<T>(arr: T[], elems: Set<T>): T[] {
+  if (arr.length < 2) return arr
+
+  for (let i = arr.length - 2; i >= 0; i--) {
+    const curr = arr[i]
+    if (elems.has(curr)) {
+      arr[i] = arr[i + 1]
+      arr[i + 1] = curr
+    }
+  }
+  return arr
+}
+
+export function useStackOrderAction() {
+  const editor = useEditor()
+
+  function order(page: Page, order: Node[]) {
+    const prevOrder = page.nodes.keys().toArray()
+    const nextOrder = order.map((n) => n.id)
+
+    page.nodes = new Map(order.map((n) => [n.id, n]))
+    editor.history.push({
+      undo: ["stack-order", [page.id, prevOrder]],
+      redo: ["stack-order", [page.id, nextOrder]],
+    })
+  }
+
+  const canBringBackward = useComputed(() => {
+    const { selection, selectionPage: page } = editor
+    if (selection.size !== 0 || !page) return false
+    const nodes = page.nodes.values().toArray()
+    return selection.values().some((n) => n !== nodes.at(0))
+  })
+
+  const canBringForward = useComputed(() => {
+    const { selection, selectionPage: page } = editor
+    if (selection.size !== 0 || !page) return false
+    const nodes = page.nodes.values().toArray()
+    return selection.values().some((n) => n !== nodes.at(-1))
+  })
+
+  return {
+    canBringBackward,
+    canBringForward,
+    bringBackward() {
+      const { selection, selectionPage: page } = editor
+      if (selection.size === 0 || !page) return
+      order(page, moveBackward(page.nodes.values().toArray(), selection))
+    },
+    bringForward() {
+      const { selection, selectionPage: page } = editor
+      if (selection.size === 0 || !page) return
+      order(page, moveForward(page.nodes.values().toArray(), selection))
+    },
+    bringToBack() {
+      const { selection, selectionPage: page } = editor
+      if (selection.size === 0 || !page) return
+      order(page, [
+        ...selection,
+        ...page.nodes.values().filter((node) => !selection.has(node)),
+      ])
+    },
+    bringToFront() {
+      const { selection, selectionPage: page } = editor
+      if (selection.size === 0 || !page) return
+      order(page, [
+        ...page.nodes.values().filter((node) => !selection.has(node)),
+        ...selection,
+      ])
+    },
+  }
+}