@lazlon-platform/html-editor 0.1.0 → 0.2.1

package/tests/model/node/group.test.ts

@@ -1,294 +0,0 @@
-import { beforeEach, describe, expect, it } from "vitest"
-import { GroupNode } from "../../../lib/model/node/group"
-import { Page } from "../../../lib/model/page"
-import { createTestEditor } from "../../createTestEditor"
-import { ImageNodeProps } from "../../../lib/model"
-
-describe("GroupNode", () => {
-  let editor: ReturnType<typeof createTestEditor>
-  let page: Page
-
-  beforeEach(() => {
-    editor = createTestEditor()
-    page = new Page(editor, { id: "page-1" })
-  })
-
-  describe("construction", () => {
-    it("has name 'group'", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 200,
-        height: 200,
-      })
-      expect(group.name).toBe("group")
-    })
-
-    it("initializes with empty nodes set", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 200,
-        height: 200,
-      })
-      expect(group.nodes.size).toBe(0)
-    })
-
-    it("deserializes child nodes from props", () => {
-      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 },
-          },
-        ],
-      })
-
-      expect(group.nodes.size).toBe(2)
-    })
-  })
-
-  describe("proportional scaling", () => {
-    it("scales child x positions when width changes", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        nodes: [
-          { name: "image", props: { id: "child-1", x: 50, y: 0, width: 20, height: 20 } },
-        ],
-      })
-
-      const child = [...group.nodes][0]
-      expect(child.x).toBe(50) // 50% of 100
-
-      group.width = 200
-
-      expect(child.x).toBe(100) // 50% of 200
-    })
-
-    it("scales child widths when group width changes", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        nodes: [
-          { name: "image", props: { id: "child-1", x: 0, y: 0, width: 50, height: 20 } },
-        ],
-      })
-
-      const child = [...group.nodes][0]
-      expect(child.width).toBe(50) // 50% of 100
-
-      group.width = 200
-
-      expect(child.width).toBe(100) // 50% of 200
-    })
-
-    it("scales child y positions when height changes", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        nodes: [
-          { name: "image", props: { id: "child-1", x: 0, y: 25, width: 20, height: 20 } },
-        ],
-      })
-
-      const child = [...group.nodes][0]
-      expect(child.y).toBe(25) // 25% of 100
-
-      group.height = 200
-
-      expect(child.y).toBe(50) // 25% of 200
-    })
-
-    it("scales child heights when group height changes", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        nodes: [
-          { name: "image", props: { id: "child-1", x: 0, y: 0, width: 20, height: 40 } },
-        ],
-      })
-
-      const child = [...group.nodes][0]
-      expect(child.height).toBe(40) // 40% of 100
-
-      group.height = 200
-
-      expect(child.height).toBe(80) // 40% of 200
-    })
-
-    it("scales all children proportionally", () => {
-      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: 0, y: 0, width: 100, height: 100 },
-          },
-          {
-            name: "image",
-            props: { id: "child-2", x: 100, y: 100, width: 100, height: 100 },
-          },
-        ],
-      })
-
-      const [child1, child2] = [...group.nodes]
-
-      group.width = 400
-      group.height = 400
-
-      // Both children should scale proportionally
-      expect(child1.x).toBe(0)
-      expect(child1.y).toBe(0)
-      expect(child1.width).toBe(200)
-      expect(child1.height).toBe(200)
-
-      expect(child2.x).toBe(200)
-      expect(child2.y).toBe(200)
-      expect(child2.width).toBe(200)
-      expect(child2.height).toBe(200)
-    })
-  })
-
-  describe("serialization", () => {
-    it("includes serialized child nodes", () => {
-      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 },
-          },
-        ],
-      })
-
-      const serialized = group.serialize()
-
-      expect(serialized.name).toBe("group")
-      expect(serialized.props.nodes).toHaveLength(1)
-      expect(serialized.props.nodes![0].name).toBe("image")
-      expect(serialized.props.nodes![0].props.id).toBe("child-1")
-    })
-
-    it("serializes empty group", () => {
-      const group = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 0,
-        y: 0,
-        width: 200,
-        height: 200,
-      })
-
-      const serialized = group.serialize()
-
-      expect(serialized.props.nodes).toEqual([])
-    })
-  })
-
-  describe("deserialization round-trip", () => {
-    it("produces identical props after serialize -> deserialize -> serialize", () => {
-      const imageProps1: ImageNodeProps = {
-        id: "child-1",
-        x: 10,
-        y: 10,
-        width: 100,
-        height: 80,
-        url: "https://example.com/img1.jpg",
-      }
-      const imageProps2: ImageNodeProps = {
-        id: "child-2",
-        x: 120,
-        y: 10,
-        width: 100,
-        height: 80,
-        url: "https://example.com/img2.jpg",
-      }
-      const original = new GroupNode(editor, page, {
-        id: "group-1",
-        x: 50,
-        y: 100,
-        width: 300,
-        height: 250,
-        rotation: 15,
-        nodes: [
-          { name: "image", props: imageProps1 },
-          { name: "image", props: imageProps2 },
-        ],
-      })
-
-      const firstSerialized = original.serialize()
-      const restored = editor.deserializeNode(page, firstSerialized) as GroupNode
-      const secondSerialized = restored.serialize()
-
-      expect(secondSerialized).toEqual(firstSerialized)
-    })
-
-    it("preserves nested groups through round-trip", () => {
-      const groupProps = {
-        id: "inner-group",
-        x: 50,
-        y: 50,
-        width: 200,
-        height: 200,
-        nodes: [
-          {
-            name: "image",
-            props: { id: "deep-child", x: 10, y: 10, width: 50, height: 50 },
-          },
-        ],
-      }
-
-      const original = new GroupNode(editor, page, {
-        id: "outer-group",
-        x: 0,
-        y: 0,
-        width: 400,
-        height: 400,
-        nodes: [{ name: "group", props: groupProps }],
-      })
-
-      const firstSerialized = original.serialize()
-      const restored = editor.deserializeNode(page, firstSerialized) as GroupNode
-      const secondSerialized = restored.serialize()
-
-      expect(secondSerialized).toEqual(firstSerialized)
-
-      // Verify nested structure
-      expect(restored.nodes.size).toBe(1)
-      const innerGroup = [...restored.nodes][0] as GroupNode
-      expect(innerGroup.name).toBe("group")
-      expect(innerGroup.nodes.size).toBe(1)
-    })
-  })
-})

package/tests/model/node/image.test.ts

@@ -1,150 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest"
-import { Page } from "../../../lib/model/page"
-import { ImageNode } from "../../../lib/model/node/image"
-import { createTestEditor } from "../../createTestEditor"
-
-describe("ImageNode", () => {
-  let editor: ReturnType<typeof createTestEditor>
-  let page: Page
-
-  beforeEach(() => {
-    editor = createTestEditor()
-    page = new Page(editor, { id: "page-1" })
-  })
-
-  describe("construction", () => {
-    it("has name 'image'", () => {
-      const node = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-      expect(node.name).toBe("image")
-    })
-
-    it("applies default values", () => {
-      const node = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      expect(node.url).toBeNull()
-      expect(node.fit).toBe("cover")
-      expect(node.roundness).toBe(0)
-      expect(node.borderWidth).toBe(0)
-      expect(node.borderColor).toBe("#000000")
-    })
-
-    it("accepts custom properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        url: "https://example.com/image.png",
-        fit: "contain",
-        roundness: 20,
-        borderWidth: 3,
-        borderColor: "#ff0000",
-      })
-
-      expect(node.url).toBe("https://example.com/image.png")
-      // Note: fit is hardcoded to "cover" in constructor (bug?)
-      expect(node.roundness).toBe(20)
-      expect(node.borderWidth).toBe(3)
-      expect(node.borderColor).toBe("#ff0000")
-    })
-  })
-
-  describe("serialization", () => {
-    it("includes all ImageNode-specific properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 10,
-        y: 20,
-        width: 200,
-        height: 150,
-        url: "https://example.com/photo.jpg",
-        fit: "fill",
-        roundness: 15,
-        borderWidth: 2,
-        borderColor: "#333333",
-      })
-
-      const serialized = node.serialize()
-
-      expect(serialized.name).toBe("image")
-      expect(serialized.props).toMatchObject({
-        id: "img-1",
-        x: 10,
-        y: 20,
-        width: 200,
-        height: 150,
-        url: "https://example.com/photo.jpg",
-        roundness: 15,
-        borderWidth: 2,
-        borderColor: "#333333",
-      })
-    })
-
-    it("serializes null url", () => {
-      const node = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      const props = node.props()
-      expect(props.url).toBeNull()
-    })
-  })
-
-  describe("deserialization round-trip", () => {
-    it("produces identical props after serialize -> deserialize -> serialize", () => {
-      const original = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 50,
-        y: 100,
-        width: 300,
-        height: 200,
-        url: "https://cdn.example.com/images/photo.jpg",
-        fit: "cover",
-        roundness: 25,
-        borderWidth: 4,
-        borderColor: "#00ff00",
-        rotation: 45,
-        locked: true,
-      })
-
-      const firstSerialized = original.serialize()
-      const restored = editor.deserializeNode(page, firstSerialized) as ImageNode
-      const secondSerialized = restored.serialize()
-
-      expect(secondSerialized).toEqual(firstSerialized)
-    })
-
-    it("preserves default values through round-trip", () => {
-      const original = new ImageNode(editor, page, {
-        id: "img-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      const firstSerialized = original.serialize()
-      const restored = editor.deserializeNode(page, firstSerialized) as ImageNode
-      const secondSerialized = restored.serialize()
-
-      expect(secondSerialized).toEqual(firstSerialized)
-    })
-  })
-})