Add align Wheel property for top/center/bottom vertical alignment

README.md

@@ -139,6 +139,7 @@ Note: setting a property to `undefined` will reset it to the default value.
 
 Name                            | Default Value     | Description
 ------------------------------- | ------------------| ---------------------------
+`align`                         | `center`          | The vertical alignment of the wheel within its container.</p><p>Possible values: `'top'`,`'center'`,`'bottom'`.
 `borderColor`                   | `'#000'`          | The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for the line around the circumference of the wheel.
 `borderWidth`                   | `0`               | The width (in pixels) of the line around the circumference of the wheel.
 `debug`                         | `false`           | If debugging info will be shown.</p><p>This is helpful when positioning labels.

src/constants.js

@@ -13,6 +13,15 @@ export const baseCanvasSize = 500; // 500 seemed to be a good value for this.
  */
 export const dragCapturePeriod = 250;
 
+/**
+ * Wheel vertical alignment enum.
+ */
+export const AlignWheel = Object.freeze({
+  top: 'top',
+  center: 'center',
+  bottom: 'bottom',
+});
+
 /**
  * Text alignment enum.
  */
@@ -27,6 +36,7 @@ export const AlignText = Object.freeze({
  */
 export const Defaults = Object.freeze({
   wheel: {
+    align: AlignWheel.center,
     borderColor: '#000',
     borderWidth: 1,
     debug: false,

src/wheel.js

@@ -47,6 +47,7 @@ export class Wheel {
   init(props = {}) {
     this._isInitialising = true;
 
+    this.align = props.align;
     this.borderColor = props.borderColor;
     this.borderWidth = props.borderWidth;
     this.debug = props.debug;
@@ -146,6 +147,12 @@ export class Wheel {
       y: h / 2 + (h * this._offset.y),
     };
 
+    if (this.align === 'top') {
+      this._center.y = this._size / 2;
+    } else if (this.align === 'bottom') {
+      this._center.y += this._size / 2;
+    }
+
     // Calculate the wheel radius:
     this._actualRadius = (this._size / 2) * this.radius;