Add mergeGraphics utility

README.md

@@ -187,6 +187,26 @@ const svg = getSvgFromGraphicsObject(graphicsObject)
 // Returns a formatted SVG string ready to be written to a file or embedded in HTML
 ```
 
+### Translate a GraphicsObject
+
+You can shift every element in a `GraphicsObject` by a fixed amount using `translateGraphics`.
+
+```tsx
+import { translateGraphics } from "graphics-debug"
+
+const moved = translateGraphics(graphicsObject, 10, 5)
+```
+
+### Merge two GraphicsObjects
+
+Combine the contents of two graphics objects into one using `mergeGraphics`.
+
+```tsx
+import { mergeGraphics } from "graphics-debug"
+
+const combined = mergeGraphics(graphicsObjectA, graphicsObjectB)
+```
+
 ### Testing GraphicsObjects with Bun's Test Framework
 
 If you're using Bun for testing, you can use the `toMatchGraphicsSvg` matcher to compare graphics objects against saved snapshots.

lib/index.ts

@@ -5,6 +5,8 @@ import {
   computeTransformFromViewbox,
   getBounds,
 } from "./drawGraphicsToCanvas"
+import { translateGraphics } from "./translateGraphics"
+import { mergeGraphics } from "./mergeGraphics"
 
 export type {
   Point,
@@ -23,6 +25,8 @@ export {
   computeTransformFromViewbox,
   getBounds,
 } from "./drawGraphicsToCanvas"
+export { translateGraphics } from "./translateGraphics"
+export { mergeGraphics } from "./mergeGraphics"
 
 export function getSvgFromLogString(logString: string): string {
   const objects = getGraphicsObjectsFromLogString(logString)

lib/mergeGraphics.ts

@@ -0,0 +1,14 @@
+import type { GraphicsObject } from "./types"
+
+export const mergeGraphics = (
+  graphics1: GraphicsObject,
+  graphics2: GraphicsObject,
+): GraphicsObject => {
+  return {
+    ...graphics1,
+    rects: [...(graphics1.rects ?? []), ...(graphics2.rects ?? [])],
+    points: [...(graphics1.points ?? []), ...(graphics2.points ?? [])],
+    lines: [...(graphics1.lines ?? []), ...(graphics2.lines ?? [])],
+    circles: [...(graphics1.circles ?? []), ...(graphics2.circles ?? [])],
+  }
+}

lib/translateGraphics.ts

@@ -0,0 +1,28 @@
+import type { GraphicsObject } from "./types"
+
+export function translateGraphics(
+  graphics: GraphicsObject,
+  dx: number,
+  dy: number,
+): GraphicsObject {
+  return {
+    ...graphics,
+    points: graphics.points?.map((p) => ({
+      ...p,
+      x: p.x + dx,
+      y: p.y + dy,
+    })),
+    lines: graphics.lines?.map((line) => ({
+      ...line,
+      points: line.points.map((pt) => ({ x: pt.x + dx, y: pt.y + dy })),
+    })),
+    rects: graphics.rects?.map((rect) => ({
+      ...rect,
+      center: { x: rect.center.x + dx, y: rect.center.y + dy },
+    })),
+    circles: graphics.circles?.map((circle) => ({
+      ...circle,
+      center: { x: circle.center.x + dx, y: circle.center.y + dy },
+    })),
+  }
+}

tests/mergeGraphics.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from "bun:test"
+import { mergeGraphics } from "../lib/mergeGraphics"
+import type { GraphicsObject } from "../lib/types"
+
+describe("mergeGraphics", () => {
+  test("combines rects, points, lines and circles", () => {
+    const a: GraphicsObject = {
+      points: [{ x: 0, y: 0 }],
+      rects: [{ center: { x: 1, y: 1 }, width: 2, height: 2 }],
+    }
+    const b: GraphicsObject = {
+      lines: [
+        {
+          points: [
+            { x: 2, y: 2 },
+            { x: 3, y: 3 },
+          ],
+        },
+      ],
+      circles: [{ center: { x: 4, y: 4 }, radius: 1 }],
+    }
+    const merged = mergeGraphics(a, b)
+    expect(merged).toEqual({
+      points: [{ x: 0, y: 0 }],
+      rects: [{ center: { x: 1, y: 1 }, width: 2, height: 2 }],
+      lines: [
+        {
+          points: [
+            { x: 2, y: 2 },
+            { x: 3, y: 3 },
+          ],
+        },
+      ],
+      circles: [{ center: { x: 4, y: 4 }, radius: 1 }],
+    })
+    // check immutability
+    expect(a.lines).toBeUndefined()
+    expect(b.points).toBeUndefined()
+  })
+})

tests/translateGraphics.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test"
+import { translateGraphics } from "../lib/translateGraphics"
+import type { GraphicsObject } from "../lib/types"
+
+describe("translateGraphics", () => {
+  test("translates points, lines, rects and circles", () => {
+    const original: GraphicsObject = {
+      points: [{ x: 1, y: 1 }],
+      lines: [
+        {
+          points: [
+            { x: 0, y: 0 },
+            { x: 1, y: 1 },
+          ],
+        },
+      ],
+      rects: [{ center: { x: 2, y: 2 }, width: 2, height: 2 }],
+      circles: [{ center: { x: 3, y: 3 }, radius: 1 }],
+    }
+    const result = translateGraphics(original, 5, -3)
+    expect(result).toEqual({
+      points: [{ x: 6, y: -2 }],
+      lines: [
+        {
+          points: [
+            { x: 5, y: -3 },
+            { x: 6, y: -2 },
+          ],
+        },
+      ],
+      rects: [{ center: { x: 7, y: -1 }, width: 2, height: 2 }],
+      circles: [{ center: { x: 8, y: 0 }, radius: 1 }],
+    })
+    // ensure original object was not mutated
+    expect(original.points?.[0].x).toBe(1)
+    expect(original.lines?.[0].points[0].x).toBe(0)
+  })
+})