diff --git a/README.md b/README.md index e290e95..85cfe29 100644 --- a/README.md +++ b/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. diff --git a/lib/index.ts b/lib/index.ts index 5136bfc..e370448 100644 --- a/lib/index.ts +++ b/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) diff --git a/lib/mergeGraphics.ts b/lib/mergeGraphics.ts new file mode 100644 index 0000000..4596901 --- /dev/null +++ b/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 ?? [])], + } +} diff --git a/lib/translateGraphics.ts b/lib/translateGraphics.ts new file mode 100644 index 0000000..74f1c22 --- /dev/null +++ b/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 }, + })), + } +} diff --git a/tests/mergeGraphics.test.ts b/tests/mergeGraphics.test.ts new file mode 100644 index 0000000..b3e5c5f --- /dev/null +++ b/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() + }) +}) diff --git a/tests/translateGraphics.test.ts b/tests/translateGraphics.test.ts new file mode 100644 index 0000000..f2f9bfe --- /dev/null +++ b/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) + }) +})