@lazlon-platform/html-editor 0.1.0

package/tests/model/editor.test.ts

@@ -0,0 +1,384 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { Page } from "../../lib/model/page"
+import { ImageNode } from "../../lib/model/node/image"
+import { PolygonNode } from "../../lib/model/node/shape/polygon"
+import { GroupNode } from "../../lib/model/node/group"
+import { Node } from "../../lib/model"
+import { createTestEditor } from "../createTestEditor"
+
+describe("Editor", () => {
+  let editor: ReturnType<typeof createTestEditor>
+
+  beforeEach(() => {
+    editor = createTestEditor()
+  })
+
+  describe("construction", () => {
+    it("initializes with empty pages", () => {
+      expect(editor.pages.size).toBe(0)
+    })
+
+    it("initializes with empty selection", () => {
+      expect(editor.selection.size).toBe(0)
+    })
+
+    it("can deserialize registered node types", () => {
+      const page = new Page(editor, { id: "page-1" })
+
+      // These should not throw - proves schema is registered
+      expect(() =>
+        editor.deserializeNode(page, {
+          name: "image",
+          props: { id: "1", x: 0, y: 0, width: 100, height: 100 },
+        }),
+      ).not.toThrow()
+
+      expect(() =>
+        editor.deserializeNode(page, {
+          name: "text",
+          props: { id: "2", x: 0, y: 0, width: 100, height: 100 },
+        }),
+      ).not.toThrow()
+
+      expect(() =>
+        editor.deserializeNode(page, {
+          name: "polygon",
+          props: { id: "3", x: 0, y: 0, width: 100, height: 100 },
+        }),
+      ).not.toThrow()
+
+      expect(() =>
+        editor.deserializeNode(page, {
+          name: "group",
+          props: { id: "4", x: 0, y: 0, width: 100, height: 100 },
+        }),
+      ).not.toThrow()
+    })
+
+    it("applies default options", () => {
+      expect(editor.options.maxHistory).toBe(100)
+      expect(editor.options.snapThreshold).toBe(8)
+    })
+
+    it("accepts custom options", () => {
+      const customEditor = createTestEditor({ maxHistory: 50 })
+      expect(customEditor.options.maxHistory).toBe(50)
+    })
+  })
+
+  describe("id generation", () => {
+    it("generates unique ids", () => {
+      const ids = new Set<string>()
+      for (let i = 0; i < 100; i++) {
+        ids.add(editor.id())
+      }
+      expect(ids.size).toBe(100)
+    })
+
+    it("generates ids using base-52 encoding", () => {
+      const id = editor.id()
+      expect(id).toMatch(/^[a-zA-Z]+$/)
+    })
+  })
+
+  describe("deserializeNode", () => {
+    it("creates node from serialized data", () => {
+      const page = new Page(editor, { id: "page-1" })
+
+      const node = editor.deserializeNode(page, {
+        name: "image",
+        props: { id: "img-1", x: 10, y: 20, width: 100, height: 50 },
+      })
+
+      expect(node).toBeInstanceOf(ImageNode)
+      expect(node.id).toBe("img-1")
+      expect(node.x).toBe(10)
+      expect(node.y).toBe(20)
+    })
+
+    it("throws for unknown node type", () => {
+      const page = new Page(editor, { id: "page-1" })
+
+      expect(() => {
+        editor.deserializeNode(page, {
+          name: "unknown",
+          props: { id: "x", x: 0, y: 0, width: 100, height: 100 },
+        })
+      }).toThrow("cannot deserialize unknown Node: unknown")
+    })
+  })
+
+  describe("serialization", () => {
+    it("serializes empty editor", () => {
+      const serialized = editor.serialize()
+
+      expect(serialized).toEqual({
+        idCounter: 0,
+        pages: [],
+        history: { undoHistory: [], redoHistory: [] },
+      })
+    })
+
+    it("serializes idCounter", () => {
+      editor.id()
+      editor.id()
+      editor.id()
+
+      const serialized = editor.serialize()
+      expect(serialized.idCounter).toBe(3)
+    })
+
+    it("serializes pages with nodes", () => {
+      const page = new Page(editor, { id: "page-1", width: 800, height: 600 })
+      const node = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([[node.id, node]])
+      editor.pages = new Map([[page.id, page]])
+
+      const serialized = editor.serialize()
+
+      expect(serialized.pages).toHaveLength(1)
+      expect(serialized.pages[0].id).toBe("page-1")
+      expect(serialized.pages[0].nodes).toHaveLength(1)
+      expect(serialized.pages[0].nodes[0].name).toBe("image")
+      expect(serialized.pages[0].nodes[0].props.id).toBe("img-1")
+    })
+
+    it("serializes history", () => {
+      const page = new Page(editor, { id: "page-1" })
+      editor.pages = new Map([["page-1", page]])
+
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { width: 100 }]],
+        undo: ["set-page-props", ["page-1", { width: 841 }]],
+      })
+
+      const serialized = editor.serialize()
+
+      expect(serialized.history.undoHistory).toHaveLength(1)
+      expect(serialized.history.redoHistory).toHaveLength(0)
+    })
+  })
+
+  describe("load", () => {
+    it("loads idCounter", () => {
+      editor.load({ idCounter: 42 })
+      expect(editor.id()).toMatch(/^[a-zA-Z]+$/) // id 43
+    })
+
+    it("loads pages", () => {
+      editor.load({
+        pages: [
+          {
+            id: "page-1",
+            width: 1024,
+            height: 768,
+            background: "#cccccc",
+            nodes: [],
+          },
+        ],
+      })
+
+      expect(editor.pages.size).toBe(1)
+      const page = editor.pages.get("page-1")!
+      expect(page.width).toBe(1024)
+      expect(page.height).toBe(768)
+      expect(page.background).toBe("#cccccc")
+    })
+
+    it("loads pages with nodes", () => {
+      editor.load({
+        pages: [
+          {
+            id: "page-1",
+            width: 800,
+            height: 600,
+            background: "#ffffff",
+            nodes: [
+              {
+                name: "image",
+                props: { id: "img-1", x: 10, y: 20, width: 100, height: 50 },
+              },
+            ],
+          },
+        ],
+      })
+
+      const page = editor.pages.get("page-1")!
+      expect(page.nodes.size).toBe(1)
+      expect(page.nodes.has("img-1")).toBe(true)
+    })
+
+    it("loads history", () => {
+      editor.load({
+        history: {
+          undoHistory: [
+            {
+              redo: ["batch", []],
+              undo: ["batch", []],
+            },
+          ],
+          redoHistory: [],
+        },
+      })
+
+      expect(editor.history.undoHistory).toHaveLength(1)
+    })
+  })
+
+  describe("serialization round-trip", () => {
+    it("produces identical output after serialize -> load -> serialize", () => {
+      // Create complex state
+      const page1 = new Page(editor, { id: editor.id(), width: 1920, height: 1080 })
+      const page2 = new Page(editor, { id: editor.id(), background: "#f0f0f0" })
+
+      // Add various node types
+      const img: Node = new ImageNode(editor, page1, {
+        id: editor.id(),
+        x: 100,
+        y: 200,
+        width: 300,
+        height: 200,
+        url: "https://example.com/image.jpg",
+        fit: "cover",
+        roundness: 8,
+        borderWidth: 2,
+        borderColor: "#333333",
+        rotation: 15,
+      })
+
+      const polygon: Node = new PolygonNode(editor, page1, {
+        id: editor.id(),
+        x: 500,
+        y: 100,
+        width: 150,
+        height: 150,
+        sides: 6,
+        roundness: 5,
+        background: "#ff6600",
+      })
+
+      page1.nodes = new Map([
+        [img.id, img],
+        [polygon.id, polygon],
+      ])
+
+      editor.pages = new Map([
+        [page1.id, page1],
+        [page2.id, page2],
+      ])
+
+      editor.history.push({
+        redo: ["set-page-props", [page1.id, { width: 1920 }]],
+        undo: ["set-page-props", [page2.id, { width: 841 }]],
+      })
+
+      const firstSerialized = editor.serialize()
+
+      const newEditor = createTestEditor()
+      newEditor.load(firstSerialized)
+
+      const secondSerialized = newEditor.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+    })
+
+    it("preserves GroupNode with nested children", () => {
+      const page = new Page(editor, { id: "page-1" })
+
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+        nodes: [
+          {
+            name: "image",
+            props: { id: "child-1", x: 10, y: 10, width: 50, height: 50 },
+          },
+          {
+            name: "image",
+            props: { id: "child-2", x: 70, y: 10, width: 50, height: 50 },
+          },
+        ],
+      })
+
+      page.nodes = new Map([["group-1", group]])
+      editor.pages = new Map([["page-1", page]])
+
+      const firstSerialized = editor.serialize()
+
+      const newEditor = createTestEditor()
+      newEditor.load(firstSerialized)
+
+      const secondSerialized = newEditor.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+
+      const restoredPage = newEditor.pages.get("page-1")!
+      const restoredGroup = restoredPage.nodes.get("group-1") as GroupNode
+      expect(restoredGroup.nodes.size).toBe(2)
+    })
+  })
+
+  describe("selection", () => {
+    it("filters out deleted nodes from selection", () => {
+      const page = new Page(editor, { id: "page-1" })
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+      editor.pages = new Map([["page-1", page]])
+
+      editor.selection = new Set([node])
+      expect(editor.selection.size).toBe(1)
+
+      page.nodes = new Map()
+
+      expect(editor.selection.size).toBe(0)
+    })
+  })
+
+  describe("selectionPage", () => {
+    it("returns null when selection is empty", () => {
+      expect(editor.selectionPage).toBeNull()
+    })
+
+    it("returns page when all selected nodes are from same page", () => {
+      const page = new Page(editor, { id: "page-1" })
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 100,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+      editor.pages = new Map([["page-1", page]])
+
+      editor.selection = new Set([node1, node2])
+
+      expect(editor.selectionPage).toBe(page)
+    })
+  })
+})

package/tests/model/history.test.ts

@@ -0,0 +1,293 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { ImageNode } from "../../lib/model/node/image"
+import { Page } from "../../lib/model/page"
+import { createTestEditor } from "../createTestEditor"
+
+describe("HistoryStore", () => {
+  let editor: ReturnType<typeof createTestEditor>
+  let page: Page
+
+  beforeEach(() => {
+    editor = createTestEditor()
+    page = new Page(editor, { id: "page-1" })
+    editor.pages = new Map([["page-1", page]])
+  })
+
+  describe("push", () => {
+    it("adds entry to undo history", () => {
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { width: 200 }]],
+        undo: ["set-page-props", ["page-1", { width: 841 }]],
+      })
+
+      expect(editor.history.undoHistory).toHaveLength(1)
+    })
+
+    it("clears redo history when pushing new entry", () => {
+      // First push an entry and undo it to populate redo history
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { width: 100 }]],
+        undo: ["set-page-props", ["page-1", { width: 841 }]],
+      })
+      editor.history.undo()
+      expect(editor.history.redoHistory).toHaveLength(1)
+
+      // Push new entry should clear redo history
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { width: 200 }]],
+        undo: ["set-page-props", ["page-1", { width: 841 }]],
+      })
+
+      expect(editor.history.redoHistory).toHaveLength(0)
+    })
+
+    it("respects maxHistory limit", () => {
+      const limitedEditor = createTestEditor({ maxHistory: 3 })
+      const limitedPage = new Page(limitedEditor, { id: "p1" })
+      limitedEditor.pages = new Map([["p1", limitedPage]])
+
+      for (let i = 0; i < 5; i++) {
+        limitedEditor.history.push({
+          redo: ["set-page-props", ["p1", { width: i }]],
+          undo: ["set-page-props", ["p1", { width: i - 1 }]],
+        })
+      }
+
+      expect(limitedEditor.history.undoHistory).toHaveLength(3)
+    })
+  })
+
+  describe("undo", () => {
+    it("executes undo action and moves entry to redo history", () => {
+      page.width = 200
+
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { width: 200 }]],
+        undo: ["set-page-props", ["page-1", { width: 841 }]],
+      })
+
+      editor.history.undo()
+
+      expect(page.width).toBe(841)
+      expect(editor.history.undoHistory).toHaveLength(0)
+      expect(editor.history.redoHistory).toHaveLength(1)
+    })
+
+    it("does nothing when undo history is empty", () => {
+      const initialWidth = page.width
+
+      editor.history.undo()
+
+      expect(page.width).toBe(initialWidth)
+      expect(editor.history.undoHistory).toHaveLength(0)
+      expect(editor.history.redoHistory).toHaveLength(0)
+    })
+  })
+
+  describe("redo", () => {
+    it("executes redo action and moves entry back to undo history", () => {
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { width: 200 }]],
+        undo: ["set-page-props", ["page-1", { width: 841 }]],
+      })
+
+      editor.history.undo()
+      expect(page.width).toBe(841)
+
+      editor.history.redo()
+      expect(page.width).toBe(200)
+      expect(editor.history.undoHistory).toHaveLength(1)
+      expect(editor.history.redoHistory).toHaveLength(0)
+    })
+
+    it("does nothing when redo history is empty", () => {
+      const initialWidth = page.width
+
+      editor.history.redo()
+
+      expect(page.width).toBe(initialWidth)
+    })
+  })
+
+  describe("batch action", () => {
+    it("executes multiple actions as a single history entry", () => {
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+
+      node1.x = 50
+      node2.x = 50
+
+      editor.history.push({
+        redo: [
+          "batch",
+          [
+            ["set-node-props", ["n1", { x: 50 }]],
+            ["set-node-props", ["n2", { x: 50 }]],
+          ],
+        ],
+        undo: [
+          "batch",
+          [
+            ["set-node-props", ["n1", { x: 0 }]],
+            ["set-node-props", ["n2", { x: 0 }]],
+          ],
+        ],
+      })
+
+      editor.history.undo()
+
+      expect(node1.x).toBe(0)
+      expect(node2.x).toBe(0)
+      expect(editor.history.undoHistory).toHaveLength(0)
+    })
+  })
+
+  describe("add-node action", () => {
+    it("adds nodes to page on redo", () => {
+      editor.history.push({
+        redo: [
+          "add-node",
+          [
+            "page-1",
+            [
+              {
+                name: "image",
+                props: { id: "new-1", x: 0, y: 0, width: 100, height: 100 },
+              },
+            ],
+          ],
+        ],
+        undo: ["delete-node", ["page-1", ["new-1"]]],
+      })
+
+      // Push adds to undo history but doesn't execute redo
+      expect(page.nodes.has("new-1")).toBe(false)
+
+      // Undo then redo to execute the add
+      editor.history.undo()
+      editor.history.redo()
+
+      expect(page.nodes.has("new-1")).toBe(true)
+    })
+  })
+
+  describe("delete-node action", () => {
+    it("removes nodes from page", () => {
+      const node = new ImageNode(editor, page, {
+        id: "del-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+      })
+      page.nodes = new Map([["del-1", node]])
+
+      editor.history.push({
+        redo: ["delete-node", ["page-1", ["del-1"]]],
+        undo: ["add-node", ["page-1", [node.serialize()]]],
+      })
+
+      // Execute delete via undo then redo
+      editor.history.undo()
+      editor.history.redo()
+
+      expect(page.nodes.has("del-1")).toBe(false)
+    })
+  })
+
+  describe("set-node-props action", () => {
+    it("updates node properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      editor.history.push({
+        redo: ["set-node-props", ["n1", { x: 100, y: 200 }]],
+        undo: ["set-node-props", ["n1", { x: 0, y: 0 }]],
+      })
+
+      node.x = 100
+      node.y = 200
+
+      editor.history.undo()
+
+      expect(node.x).toBe(0)
+      expect(node.y).toBe(0)
+    })
+  })
+
+  describe("set-page-props action", () => {
+    it("updates page properties", () => {
+      editor.history.push({
+        redo: ["set-page-props", ["page-1", { background: "#ff0000" }]],
+        undo: ["set-page-props", ["page-1", { background: "#ffffff" }]],
+      })
+
+      page.background = "#ff0000"
+
+      editor.history.undo()
+
+      expect(page.background).toBe("#ffffff")
+    })
+  })
+
+  describe("stack-order action", () => {
+    it("reorders nodes in page", () => {
+      const n1 = new ImageNode(editor, page, {
+        id: "a",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+      })
+      const n2 = new ImageNode(editor, page, {
+        id: "b",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+      })
+      page.nodes = new Map([
+        ["a", n1],
+        ["b", n2],
+      ])
+
+      editor.history.push({
+        redo: ["stack-order", ["page-1", ["b", "a"]]],
+        undo: ["stack-order", ["page-1", ["a", "b"]]],
+      })
+
+      // Execute reorder via undo then redo
+      editor.history.undo()
+
+      const order = [...page.nodes.keys()]
+      expect(order).toEqual(["a", "b"])
+
+      editor.history.redo()
+
+      const newOrder = [...page.nodes.keys()]
+      expect(newOrder).toEqual(["b", "a"])
+    })
+  })
+})