feat(Cover): Added new cover config property

The cover property provides control over when vector points will stop being generated.
  - When cover is true it will attempt to fill the bounds with as many vectors as possible.
  - When false it will stop generating vectors as soon as one falls outside of the boudns given.

BREAKING CHANGE: The arguments given to algorithms is now a single object. See some of the provided algorithms for an example. This only affects SysPlot when used with custom alogrithms.

Author: HHogg

README.md

@@ -22,6 +22,7 @@ const sysPlot = new SysPlot();
 
 sysPlot.setConfig({
   algorithm: VogelSpiral,
+  cover: true,
   padding: 10,
   proportional: true,
   spread: 0.25,
@@ -86,24 +87,40 @@ const shapesWithValidPositions = zip(positions, shapes).filter(([, p]) => p);
 const config = {
   /**
    * One of the exported algorithm functions mentioned above.
+   *
+   * Defaults: ArchimedesSpiral
    */
   algorithm: Function,
 
+  /**
+   * Specifies to generate as many vector points needed to cover the entire
+   * area give.
+   *
+   * Defaults: true
+   */
+  cover: Boolean
+
   /**
    * The amount of padding to be used around the shapes when
    * positioning.
+   *
+   * Defaults: 10
    */
   padding: Number,
 
   /**
    * Retains the aspect ratio for plotting the vector points.
+   *
+   * Defaults: false
    */
   proportional: Boolean,
 
   /**
    * A number between 0.1 and 1 that affects the density of the
    * vector points. 0.1 being very dense and 1 being very spread
    * apart.
+   *
+   * Defaults: 0.25
    */
   spread: Number,
 }
@@ -162,7 +179,6 @@ const positions = sysPlot.getPositions();
 const shapesWithValidPositions = zip(positions, shapes).filter(([, p]) => p);
 ```
 
-
 #### SysPlot.getVectors()
 
 Gets the vector points used for positioning (as XY coordinates) that the algorithm generated, radiating out from the center.

src/SysPlot.js

@@ -1,24 +1,44 @@
+import ArchimedesSpiral from './algorithms/ArchimedesSpiral';
+import getMaxShapeSize from './positioning/getMaxShapeSize';
 import position from './positioning/position';
 
+const defaultConfig = {
+  algorithm: ArchimedesSpiral,
+  cover: true,
+  padding: 10,
+  proportional: false,
+  spread: 0.25,
+};
+
 export default class SysPlot {
   constructor() {
-    this.config = {};
+    this.config = Object.assign({}, defaultConfig);
   }
 
   setConfig(config = {}) {
+    const {
+      algorithm = defaultConfig.algorithm,
+      cover = defaultConfig.cover,
+      padding = defaultConfig.padding,
+      proportional = defaultConfig.proportional,
+      spread = defaultConfig.spread,
+    } = config;
+
     const updateVectors =
-      this.config.algorithm !== config.algorithm ||
-      this.config.proportional !== config.proportional ||
-      this.config.spread !== config.spread;
+      this.config.algorithm !== algorithm ||
+      this.config.cover !== cover ||
+      this.config.proportional !== proportional ||
+      this.config.spread !== spread;
 
     const updatePositions = updateVectors ||
-      this.config.padding !== config.padding;
+      this.config.padding !== padding;
 
     this.config = {
-      algorithm: config.algorithm,
-      padding: config.padding,
-      proportional: config.proportional,
-      spread: config.spread,
+      algorithm,
+      cover,
+      padding,
+      proportional,
+      spread,
     };
 
     if (updateVectors) this.vectors = null;
@@ -39,28 +59,38 @@ export default class SysPlot {
   }
 
   setShapes(shapes) {
-    this.shapes = shapes;
+    const shapesBoundaryOffset = this.config.cover ? 0 : (getMaxShapeSize(shapes) / 2);
+
     this.positions = null;
+    this.shapes = shapes;
+
+    if (this.shapesBoundaryOffset !== shapesBoundaryOffset) {
+      this.shapesBoundaryOffset = shapesBoundaryOffset;
+      this.vectors = null;
+    }
 
     return this;
   }
 
   getVectors() {
     if (!this.vectors) {
-      const { config, width: w, height: h } = this;
+      const { config, width, height } = this;
+      const h = height - this.shapesBoundaryOffset;
+      const w = width - this.shapesBoundaryOffset;
       const [xDim, yDim] = config.proportional ? [w, h] : (w > h ? [w, w] : [h, h]);
       const spread = Math.max(0.1, Math.min(1, config.spread)) / 10;
 
-      this.vectors = this.config.algorithm(
-        this.width,
-        this.height,
-        this.width / 2,
-        this.height / 2,
-        (xDim * (spread * (xDim / yDim)))
+      this.vectors = this.config.algorithm({
+        cover: config.cover,
+        height: h,
+        width: w,
+        xCenter: (w / 2) + (this.shapesBoundaryOffset / 2),
+        xDistance: (xDim * (spread * (xDim / yDim)))
           * this.config.algorithm.NORMALISATION_FACTOR,
-        (yDim * (spread * (yDim / xDim)))
+        yCenter: (h / 2) + (this.shapesBoundaryOffset / 2),
+        yDistance: (yDim * (spread * (yDim / xDim)))
           * this.config.algorithm.NORMALISATION_FACTOR,
-      );
+      });
     }
 
     return this.vectors;

src/algorithms/ArchimedesSpiral.js

@@ -1,4 +1,12 @@
-const ArchimedesSpiral = (w, h, cx, cy, xDist, yDist) => {
+const ArchimedesSpiral = ({
+  cover: cover,
+  height: h,
+  width: w,
+  xCenter: cx,
+  xDistance: xDist,
+  yDistance: yDist,
+  yCenter: cy,
+}) => {
   const vectors = [];
   const hxDist = xDist / 2;
   const hyDist = yDist / 2;
@@ -16,6 +24,8 @@ const ArchimedesSpiral = (w, h, cx, cy, xDist, yDist) => {
 
     if (vx > 0 && vy > 0 && vx < w && vy < h) {
       vectors.push([vx, vy]);
+    } else if (!cover) {
+      return vectors;
     }
   }
 

src/algorithms/ConcentricCircles.js

@@ -1,6 +1,14 @@
 const pi2 = Math.PI * 2;
 
-const ConcentricCircles = (w, h, cx, cy, xDist, yDist) => {
+const ConcentricCircles = ({
+  cover: cover,
+  height: h,
+  width: w,
+  xCenter: cx,
+  xDistance: xDist,
+  yDistance: yDist,
+  yCenter: cy,
+}) => {
   const vectors = [[cx, cy]];
   const max = Math.hypot(cx, cy);
   let rx = 0;
@@ -22,6 +30,8 @@ const ConcentricCircles = (w, h, cx, cy, xDist, yDist) => {
 
       if (vx > 0 && vy > 0 && vx < w && vy < h) {
         vectors.push([vx, vy]);
+      } else if (!cover) {
+        return vectors;
       }
     }
   }

src/algorithms/FermatSpiral.js

@@ -1,4 +1,12 @@
-const FermatSpiral = (w, h, cx, cy, xDist, yDist, c = 1.5) => {
+const FermatSpiral = ({
+  cover: cover,
+  height: h,
+  width: w,
+  xCenter: cx,
+  xDistance: xDist,
+  yDistance: yDist,
+  yCenter: cy,
+}, c = 1.5) => {
   const vectors = [];
   let rx, ry, tx = 0, ty = 0, vx = 1, vy = 1;
 
@@ -10,6 +18,8 @@ const FermatSpiral = (w, h, cx, cy, xDist, yDist, c = 1.5) => {
 
     if (vx > 0 && vy > 0 && vx < w && vy < h) {
       vectors.push([vx, vy]);
+    } else if (!cover) {
+      return vectors;
     }
   }
 

src/algorithms/UlamSpiral.js

@@ -13,7 +13,15 @@ const isPrimeNumber = (n) => {
   return n !== 1;
 };
 
-const UlamSpiral = (w, h, cx, cy, xDist, yDist) => {
+const UlamSpiral = ({
+  cover: cover,
+  height: h,
+  width: w,
+  xCenter: cx,
+  xDistance: xDist,
+  yDistance: yDist,
+  yCenter: cy,
+}) => {
   const vectors = [];
   let n = 0;
   let d = R;
@@ -25,6 +33,8 @@ const UlamSpiral = (w, h, cx, cy, xDist, yDist) => {
     if (isPrimeNumber(n++)) {
       if (vx > 0 && vy > 0 && vx < w && vy < h) {
         vectors.push([vx, vy]);
+      } else if (!cover) {
+        return vectors;
       }
     }
 

src/positioning/getMaxShapeSize.js

@@ -0,0 +1,16 @@
+export default (shapes) => {
+  let max;
+
+  for (let i = 0; i < shapes.length; i++) {
+    const { height, radius, width } = shapes[i];
+
+    if (radius !== undefined) {
+      if (!max || radius > max) max = radius * 2;
+    } else if (width !== undefined && height !== undefined) {
+      if (!max || width > max) max = width;
+      if (height > max) max = height;
+    }
+  }
+
+  return max || 0;
+};

src/positioning/getMaxShapeSize.test.js

@@ -0,0 +1,59 @@
+import getMaxShapeSize from './getMaxShapeSize';
+
+describe('getMaxShapeSize', () => {
+  test('no shapes', () => {
+    expect(getMaxShapeSize([])).toBe(0);
+  });
+
+  test('one shape with radius', () => {
+    expect(getMaxShapeSize([{ radius: 10 }])).toBe(20);
+  });
+
+  test('one shape with same width and height', () => {
+    expect(getMaxShapeSize([{ height: 10, width: 10 }])).toBe(10);
+  });
+
+  test('one shape with greater width and height', () => {
+    expect(getMaxShapeSize([{ height: 10, width: 20 }])).toBe(20);
+  });
+
+  test('one shape with width and greater height', () => {
+    expect(getMaxShapeSize([{ height: 20, width: 10 }])).toBe(20);
+  });
+
+  test('multiple shapes with radius', () => {
+    expect(getMaxShapeSize([
+      { radius: 20 },
+      { radius: 40 },
+      { radius: 30 },
+    ])).toBe(40);
+  });
+
+  test('multiple shapes with width and height', () => {
+    expect(getMaxShapeSize([
+      { height: 20, width: 10 },
+      { height: 30, width: 10 },
+      { height: 20, width: 40 },
+    ])).toBe(40);
+  });
+
+  test('multiple mixed shapes with greater radius and width and height', () => {
+    expect(getMaxShapeSize([
+      { radius: 20 },
+      { radius: 40 },
+      { radius: 30 },
+      { height: 20, width: 10 },
+      { height: 30, width: 10 },
+    ])).toBe(40);
+  });
+
+  test('multiple mixed shapes with radius and greater width and height', () => {
+    expect(getMaxShapeSize([
+      { radius: 20 },
+      { radius: 30 },
+      { radius: 30 },
+      { height: 20, width: 10 },
+      { height: 30, width: 40 },
+    ])).toBe(40);
+  });
+});