@lazlon-platform/html-editor 0.1.0

package/tests/model/node.test.ts

@@ -0,0 +1,276 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { Page } from "../../lib/model/page"
+import { ImageNode } from "../../lib/model/node/image"
+import { createTestEditor } from "../createTestEditor"
+
+// Using ImageNode as a concrete implementation of Node for testing
+describe("Node", () => {
+  let editor: ReturnType<typeof createTestEditor>
+  let page: Page
+
+  beforeEach(() => {
+    editor = createTestEditor()
+    page = new Page(editor, { id: "page-1" })
+  })
+
+  describe("construction", () => {
+    it("initializes with required properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 50,
+      })
+
+      expect(node.id).toBe("node-1")
+      expect(node.x).toBe(10)
+      expect(node.y).toBe(20)
+      expect(node.width).toBe(100)
+      expect(node.height).toBe(50)
+    })
+
+    it("applies default values for optional properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      expect(node.rotation).toBe(0)
+      expect(node.locked).toBe(false)
+      expect(node.role).toBeNull()
+      expect(node.css).toBe("")
+    })
+
+    it("accepts optional properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        rotation: 45,
+        locked: true,
+        role: ["header"],
+        css: "filter: blur(2px);",
+      })
+
+      expect(node.rotation).toBe(45)
+      expect(node.locked).toBe(true)
+      expect(node.role).toBe("header")
+      expect(node.css).toBe("filter: blur(2px);")
+    })
+
+    it("stores reference to parent page", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      expect(node.page).toBe(page)
+    })
+  })
+
+  describe("width and height constraints", () => {
+    it("enforces minimum width of 1", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      node.width = 0
+      expect(node.width).toBe(1)
+
+      node.width = -10
+      expect(node.width).toBe(1)
+    })
+
+    it("enforces minimum height of 1", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      node.height = 0
+      expect(node.height).toBe(1)
+
+      node.height = -10
+      expect(node.height).toBe(1)
+    })
+
+    it("allows setting width and height to exactly 1", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      node.width = 1
+      node.height = 1
+
+      expect(node.width).toBe(1)
+      expect(node.height).toBe(1)
+    })
+  })
+
+  describe("boundingBox", () => {
+    it("returns node rect when rotation is 0", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 50,
+        rotation: 0,
+      })
+
+      const bbox = node.boundingBox
+      expect(bbox.x).toBe(10)
+      expect(bbox.y).toBe(20)
+      expect(bbox.width).toBe(100)
+      expect(bbox.height).toBe(50)
+    })
+
+    it("expands bounding box for rotated node", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        rotation: 45,
+      })
+
+      const bbox = node.boundingBox
+      // A 100x100 square rotated 45 degrees has diagonal ~141.4
+      expect(bbox.width).toBeGreaterThan(100)
+      expect(bbox.height).toBeGreaterThan(100)
+    })
+  })
+
+  describe("blockMove", () => {
+    it("returns true when node is locked", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        locked: true,
+      })
+
+      const mockEvent = {} as React.PointerEvent
+      expect(node.blockMove(mockEvent)).toBe(true)
+    })
+
+    it("returns false when node is not locked", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        locked: false,
+      })
+
+      const mockEvent = {} as React.PointerEvent
+      expect(node.blockMove(mockEvent)).toBe(false)
+    })
+  })
+
+  describe("serialization", () => {
+    it("serializes required properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 50,
+      })
+
+      const serialized = node.serialize()
+
+      expect(serialized.name).toBe("image")
+      expect(serialized.props.id).toBe("node-1")
+      expect(serialized.props.x).toBe(10)
+      expect(serialized.props.y).toBe(20)
+      expect(serialized.props.width).toBe(100)
+      expect(serialized.props.height).toBe(50)
+    })
+
+    it("omits default optional properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      const props = node.props()
+
+      expect(props).not.toHaveProperty("rotation")
+      expect(props).not.toHaveProperty("locked")
+      expect(props).not.toHaveProperty("css")
+      expect(props).not.toHaveProperty("role")
+    })
+
+    it("includes non-default optional properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        rotation: 90,
+        locked: true,
+        css: "opacity: 0.5;",
+        role: ["button"],
+      })
+
+      const props = node.props()
+
+      expect(props.rotation).toBe(90)
+      expect(props.locked).toBe(true)
+      expect(props.css).toBe("opacity: 0.5;")
+      expect(props.role).toEqual(["button"])
+    })
+  })
+
+  describe("deserialization round-trip", () => {
+    it("produces identical props after serialize -> deserialize -> serialize", () => {
+      const original = new ImageNode(editor, page, {
+        id: "node-1",
+        x: 50,
+        y: 100,
+        width: 200,
+        height: 150,
+        rotation: 30,
+        locked: true,
+        css: "border: 1px solid red;",
+        role: ["logo"],
+      })
+
+      const firstSerialized = original.serialize()
+
+      const restored = editor.deserializeNode(page, firstSerialized)
+      const secondSerialized = restored.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+    })
+  })
+})

package/tests/model/page.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { Page } from "../../lib/model/page"
+import { createTestEditor } from "../createTestEditor"
+
+describe("Page", () => {
+  let editor: ReturnType<typeof createTestEditor>
+
+  beforeEach(() => {
+    editor = createTestEditor()
+  })
+
+  describe("construction", () => {
+    it("creates a page with required id", () => {
+      const page = new Page(editor, { id: "page-1" })
+      expect(page.id).toBe("page-1")
+    })
+
+    it("applies default dimensions (A4 landscape)", () => {
+      const page = new Page(editor, { id: "page-1" })
+      expect(page.width).toBe(841)
+      expect(page.height).toBe(595)
+    })
+
+    it("applies default white background", () => {
+      const page = new Page(editor, { id: "page-1" })
+      expect(page.background).toBe("#ffffff")
+    })
+
+    it("accepts custom dimensions", () => {
+      const page = new Page(editor, { id: "page-1", width: 1920, height: 1080 })
+      expect(page.width).toBe(1920)
+      expect(page.height).toBe(1080)
+    })
+
+    it("accepts custom background", () => {
+      const page = new Page(editor, { id: "page-1", background: "#ff0000" })
+      expect(page.background).toBe("#ff0000")
+    })
+
+    it("initializes with empty nodes map", () => {
+      const page = new Page(editor, { id: "page-1" })
+      expect(page.nodes.size).toBe(0)
+    })
+
+    it("initializes with empty snapLines", () => {
+      const page = new Page(editor, { id: "page-1" })
+      expect(page.snapLines).toEqual([])
+    })
+  })
+
+  describe("serialization", () => {
+    it("serializes all page properties", () => {
+      const page = new Page(editor, {
+        id: "page-1",
+        width: 800,
+        height: 600,
+        background: "#cccccc",
+      })
+
+      const serialized = page.serialize()
+
+      expect(serialized).toEqual({
+        id: "page-1",
+        width: 800,
+        height: 600,
+        background: "#cccccc",
+        nodes: [],
+      })
+    })
+
+    it("serializes with default values", () => {
+      const page = new Page(editor, { id: "page-1" })
+      const serialized = page.serialize()
+
+      expect(serialized).toEqual({
+        id: "page-1",
+        width: 841,
+        height: 595,
+        background: "#ffffff",
+        nodes: [],
+      })
+    })
+
+    it("serializes contained nodes", () => {
+      const page = new Page(editor, { id: "page-1" })
+
+      // Add a node via the editor's deserialize method
+      const node = editor.deserializeNode(page, {
+        name: "image",
+        props: { id: "img-1", x: 10, y: 20, width: 100, height: 100 },
+      })
+      page.nodes = new Map([["img-1", node]])
+
+      const serialized = page.serialize()
+
+      expect(serialized.nodes).toHaveLength(1)
+      expect(serialized.nodes[0].name).toBe("image")
+      expect(serialized.nodes[0].props.id).toBe("img-1")
+    })
+  })
+
+  describe("deserialization round-trip", () => {
+    it("produces identical output after serialize -> load -> serialize", () => {
+      const page = new Page(editor, {
+        id: "page-1",
+        width: 1024,
+        height: 768,
+        background: "#f0f0f0",
+      })
+
+      // Add nodes
+      const node = editor.deserializeNode(page, {
+        name: "image",
+        props: {
+          id: "img-1",
+          x: 50,
+          y: 100,
+          width: 200,
+          height: 150,
+          url: "https://example.com/image.png",
+          fit: "cover",
+          roundness: 10,
+          borderWidth: 2,
+          borderColor: "#333333",
+        },
+      })
+      page.nodes = new Map([["img-1", node]])
+
+      const firstSerialized = page.serialize()
+
+      // Create new page from serialized data
+      const restoredPage = new Page(editor, {
+        id: firstSerialized.id,
+        width: firstSerialized.width,
+        height: firstSerialized.height,
+        background: firstSerialized.background,
+      })
+      restoredPage.nodes = new Map(
+        firstSerialized.nodes.map((n) => [
+          n.props.id,
+          editor.deserializeNode(restoredPage, n),
+        ]),
+      )
+
+      const secondSerialized = restoredPage.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+    })
+  })
+})

package/tests/setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest"
+import { cleanup } from "@testing-library/react"
+import { afterEach } from "vitest"
+
+afterEach(() => {
+  cleanup()
+})

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@lazlon/html-editor/ui": ["./lib/ui/index.ts"],
+      "@lazlon/html-editor/model": ["./lib/model/index.ts"],
+      "@lazlon/html-editor/hooks": ["./lib/hooks/index.ts"]
+    }
+  },
+  "include": ["lib", "demo"]
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss(), tsconfigPaths()],
+})

package/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  test: {
+    globals: true,
+    environment: "happy-dom",
+    setupFiles: ["./tests/setup.ts"],
+    include: ["tests/**/*.test.{ts,tsx}"],
+  },
+})