Add snapUtils file. These may evolve when actually used.

js/__tests__/snapUtils-test.js

@@ -0,0 +1,85 @@
+jest.unmock('../snapUtils');
+
+import {
+  top,
+  bottom,
+  left,
+  right,
+  near,
+  snap
+} from '../snapUtils';
+
+describe('side functions', () => {
+  const box = {x: 10, y: 15, width: 50, height: 100};
+  it('can find the top of a box', () => {
+    const actual = top(box);
+    const expected = 15;
+    expect(actual).toEqual(expected);
+  });
+  it('can find the bottom of a box', () => {
+    const actual = bottom(box);
+    const expected = 115;
+    expect(actual).toEqual(expected);
+  });
+  it('can find the left of a box', () => {
+    const actual = left(box);
+    const expected = 10;
+    expect(actual).toEqual(expected);
+  });
+  it('can find the right of a box', () => {
+    const actual = right(box);
+    const expected = 60;
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe('near function', () => {
+  it('can tell if A is near B', () => {
+    const actual = near(10, 20);
+    const expected = true;
+    expect(actual).toEqual(expected);
+  });
+  it('can tell if A is near B', () => {
+    const actual = near(10, 30);
+    const expected = false;
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe('snap function', () => {
+  it('does not snap if A and B are obviously far apart', () => {
+    const a = {x: 10, y: 10, width: 100, height: 100};
+    const b = {x: 200, y: 200, width: 100, height: 100};
+    const actual = snap(a, b);
+    const expected = {};
+    expect(actual).toEqual(expected);
+  });
+  it('snaps the left of A to the right of B', () => {
+    const a = {x: 120, y: 10, width: 100, height: 100};
+    const b = {x: 10, y: 10, width: 100, height: 100};
+    const actual = snap(a, b);
+    const expected = {x: 110};
+    expect(actual).toEqual(expected);
+  });
+  it('snaps the right of A to the left of B', () => {
+    const a = {x: 10, y: 10, width: 100, height: 100};
+    const b = {x: 120, y: 10, width: 100, height: 100};
+    const actual = snap(a, b);
+    const expected = {x: 20};
+    expect(actual).toEqual(expected);
+  });
+  it('snaps the top of A to the bottom of B', () => {
+    const a = {x: 10, y: 10, width: 100, height: 100};
+    const b = {x: 10, y: 120, width: 100, height: 100};
+    const actual = snap(a, b);
+    const expected = {y: 20};
+    expect(actual).toEqual(expected);
+  });
+  it('snaps the bottom of A to the top of B', () => {
+    const a = {x: 10, y: 120, width: 100, height: 100};
+    const b = {x: 10, y: 10, width: 100, height: 100};
+    const actual = snap(a, b);
+    const expected = {y: 110};
+    expect(actual).toEqual(expected);
+  });
+});

js/snapUtils.js

@@ -0,0 +1,43 @@
+// box = {x, y, width, height}
+
+export const SNAP_DISTANCE = 15;
+
+export const top = (box) => box.y;
+export const bottom = (box) => box.y + box.height;
+export const left = (box) => box.x;
+export const right = (box) => box.x + box.width;
+
+export const near = (a, b) => Math.abs(a - b) < SNAP_DISTANCE;
+
+export const snap = (boxA, boxB) => {
+  let x, y;
+
+  if (near(left(boxA), right(boxB))) {
+    x = right(boxB);
+  }
+
+  if (near(right(boxA), left(boxB))) {
+    x = left(boxB) - boxA.width;
+  }
+
+  if (near(top(boxA), bottom(boxB))) {
+    y = bottom(boxB);
+  }
+
+  if (near(bottom(boxA), top(boxB))) {
+    y = top(boxB) - boxA.height;
+  }
+  return {x, y};
+};
+
+export const snapToMany = (boxA, otherBoxes) => {
+  let x, y;
+
+  otherBoxes.forEach((boxB) => {
+    const newPos = snap(boxA, boxB);
+    x = newPos.x || x;
+    y = newPos.y || y;
+  });
+
+  return {x, y};
+};