diff --git a/README.md b/README.md index 0d6f818..cb67f11 100644 --- a/README.md +++ b/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.

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.

This is helpful when positioning labels. diff --git a/src/constants.js b/src/constants.js index cefb20d..16c11c7 100644 --- a/src/constants.js +++ b/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, diff --git a/src/wheel.js b/src/wheel.js index 2174d79..78d98de 100644 --- a/src/wheel.js +++ b/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;