Merge branch 'release/4.0.1'

.eslintrc.json

@@ -46,7 +46,11 @@
     "quotes": ["error", "single"],
     "semi": ["error", "always"],
     "space-before-blocks": ["error"],
-    "space-before-function-paren": ["error", "never"],
+    "space-before-function-paren": ["error", {
+      "anonymous": "never",
+      "named": "never",
+      "asyncArrow": "always"
+    }],
     "space-in-parens": ["error", "never"],
     "valid-typeof": ["error"]
   }

README.md

@@ -22,19 +22,19 @@ An easy to use, themeable component for randomising choices and prizes.
 
 ## Installation
 
-### ESM from CDN
+### ESM
 
 ```javascript
-import {Wheel} from 'https://cdn.jsdelivr.net/npm/spin-wheel@4.0.0/dist/spin-wheel-esm.js';
+import {Wheel} from 'https://cdn.jsdelivr.net/npm/spin-wheel@4.1.0/dist/spin-wheel-esm.js';
 ```
 
-### IIFE from CDN
+### IIFE
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/spin-wheel@4.0.0/dist/spin-wheel-iife.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/spin-wheel@4.1.0/dist/spin-wheel-iife.js"></script>
 ```
 
-### Local from npm
+### Local
 
 ```sh
 npm install spin-wheel
@@ -65,7 +65,7 @@ const container = document.querySelector('.wheel-container');
 const wheel = new Wheel(container, props);
 ```
 
-# How to spin the wheel
+## How to spin the wheel
 
 The most useful way is to call `Wheel.spinToItem()`. The wheel will spin for a certain duration, and once finished the pointer will be pointing at the specified item. For non-trivial applications (such as multiplayer games, or awarding prizes with actual value) you should always calculate the winning item on the back-end, and only use the front-end to display the result. For example:
 
@@ -76,9 +76,9 @@ const easing = easing.cubicOut;
 wheel.spinToItem(2, duration, false, 2, 1, easing)
 ```
 
-A simpler way to spin the wheel is to set `Wheel.rotationSpeed`. The wheel will start spinning, and will slow down and eventually stop depending on the value of `Wheel.rotationResistance`.
+If precision is less important, you can use `Wheel.spin()` to immediately start spinning the wheel at a certain speed. This sets the wheel's `rotationSpeed`, which will be reduced over time according to `Wheel.rotationResistance`.
 
-Lastly, you can set `Wheel.isInteractive == true` to allow the user to interact with the wheel by clicking and dragging (or flicking on touch screens). After the interaction has finished, the wheel will continue to spin in the direction it was dragged/flicked.
+You can also set `Wheel.isInteractive = true` to allow the user to spin the wheel themselves by dragging or flicking.
 
 ## Examples
 
@@ -109,7 +109,8 @@ Here's a handy diagram:
 Method                                                              | Description
 ------------------------------------------------------------------- | ---------------------------
 `constructor(container, props = {})`                                | `container` must be an Element.</p><p>`props` must be an Object or null.
-`init(props = {})`                                                  | Initialise all properties.</p><p>If a value is not provided for a property then it will be given a default value.
+`init(props = {})`                                                  | Initialise all properties.</p><The>If a value is not provided for a property then it will be given a default value.
+`spin(rotationSpeed = 0)`                                           | Spin the wheel by setting `rotationSpeed`. The wheel will immediately start spinning, and slow down over time depending on the value of `rotationResistance`.</p><p>A positive number will spin clockwise, a negative number will spin anticlockwise.
 `spinTo(rotation = 0, duration = 0, easingFunction = null)`         | Spin the wheel to a particular rotation.</p><p>The animation will occur over the provided `duration` (milliseconds).</p><p>The `rotationSpeed` property will be ignored during the animation.</p><p>The animation can be adjusted by providing an optional `easingFunction` which accepts a single parameter n, where n is between 0 and 1 inclusive.</p><p>For example easing functions see [easing-utils](https://github.com/AndrewRayCode/easing-utils).
 `spinToItem(itemIndex = 0, duration = 0, spinToCenter = true, numberOfRevolutions = 1, easingFunction = null)` | Spin the wheel to a particular item.</p><p>The animation will occur over the provided `duration` (milliseconds).</p><p>If `spinToCenter` is true, the wheel will spin to the center of the item, otherwise the wheel will spin to a random angle inside the item.</p><p>`numberOfRevolutions` controls how many times the wheel will rotate a full 360 degrees before resting on the item.</p><p>The animation can be adjusted by providing an optional `easingFunction` which accepts a single parameter n, where n is between 0 and 1 inclusive.</p><p>If no easing function is provided, the default easeSinOut will be used.</p><p>For example easing functions see [easing-utils](https://github.com/AndrewRayCode/easing-utils).</p><p>Note: the `Wheel.rotationSpeed` property will be ignored during the animation.
 `stop()`                                                            | Immediately stop the wheel from spinning, regardless of which method was used to spin it.
@@ -141,9 +142,9 @@ Name                            | Default Value     | Description
 `pixelRatio`                    | `0`               | The pixel ratio used to render the wheel.</p><p>Values above 0 will produce a sharper image at the cost of performance.</p><p>A value of `0` will cause the pixel ratio to be automatically determined using `window.devicePixelRatio`.
 `radius`                        | `0.95`            | The radius of the wheel (as a percent of the container's smallest dimension).
 `rotation`                      | `0`               | The rotation (angle in degrees) of the wheel.</p><p>The first item will be drawn clockwise from this point.
-`rotationResistance`            | `-35`             | How much to reduce `rotationSpeed` by every second.
-`rotationSpeed`                 | `0`               | How far (angle in degrees) the wheel should spin every 1 second.</p><p>Any number other than `0` will spin the wheel.</p><p>A positive number will spin clockwise, a negative number will spin antiClockwise.
-`rotationSpeedMax`              | `250`             | The maximum value for `rotationSpeed`.</p><p>The wheel will not spin faster than this value.
+`rotationResistance`            | `-35`             | The amount that `rotationSpeed` will be reduced by every second. Only in effect when `rotationSpeed !== 0`.</p><p>Set to `0` to spin the wheel infinitely.
+`rotationSpeed`                 | `0`               | (Readonly) How far (angle in degrees) the wheel will spin every 1 second.</p><p>A positive number means the wheel is spinning clockwise, a negative number means anticlockwise, and `0` means the wheel is not spinning.
+`rotationSpeedMax`              | `250`             | The maximum value for `rotationSpeed` (ignoring the wheel's spin direction).</p><p>The wheel will not spin faster than this value in any direction.
 `offset`                        | `{w: 0, h: 0}`    | The offset of the wheel relative to it's center (as a percent of the wheel's diameter).
 `onCurrentIndexChange`          | `null`            | The callback for the `onCurrentIndexChange` event.
 `onRest`                        | `null`            | The callback for the `onRest` event.
@@ -174,14 +175,15 @@ Key                         | Value
 
 ### `onSpin(event = {})`
 
-Raised when the wheel has been spun by the user (via click-drag/touch-flick), or by calling `Wheel.spinTo()` or `Wheel.spinToItem()`.
+Raised when the wheel has been spun.
 
 Key                         | Value
 --------------------------- | ---------------------------
 `type`                      | `'spin'`
 `duration`                  | the duration of the spin animation. Only set when `method = spinto` or `method = spintoitem`.
-`method`                    | The method that was used to spin the wheel (`interact`, `spinto`, `spintoitem`).
-`rotationSpeed`             | The value of `Wheel.rotationSpeed` at the time the event was raised.</p><p>Only set when `method = interact`.</p><p>See `Wheel.rotationSpeed`.
+`method`                    | The method that was used to spin the wheel (`interact`, `spin`, `spinto`, `spintoitem`).
+`rotationResistance`        | The value of `Wheel.rotationResistance` at the time the event was raised.</p><p>Only set when `method = interact` or `method = spin`.
+`rotationSpeed`             | The value of `Wheel.rotationSpeed` at the time the event was raised.</p><p>Only set when `method = interact` or `method = spin`.
 `targetItemIndex`           | The item that the Pointer will be pointing at once the spin animation has finished.</p><p>Only set when `method = spintoitem`.
 `targetRotation`            | The value that `Wheel.rotation` will have once the spin animation has finished.</p><p>Only set when `method = spinto` or `method = spintoitem`.
 

examples/esm/index.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="./css/index.css"/>
 
   <script type='module'>
-    import {Wheel} from 'https://cdn.jsdelivr.net/npm/spin-wheel@4.0.0/dist/spin-wheel-esm.js';
+    import {Wheel} from 'https://cdn.jsdelivr.net/npm/spin-wheel/dist/spin-wheel-esm.js';
 
     window.onload = () => {
 

examples/iife/index.html

@@ -7,7 +7,7 @@
   <link rel="icon" href="data:image/x-icon;," type="image/x-icon">
   <link rel="stylesheet" href="./css/index.css"/>
 
-  <script src="https://cdn.jsdelivr.net/npm/spin-wheel@4.0.0/dist/spin-wheel-iife.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/spin-wheel/dist/spin-wheel-iife.js"></script>
 
   <script>
     window.onload = () => {

examples/playground/index.html

@@ -107,11 +107,25 @@ <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
         <input type="range" min="0" max="200" value="0">
       </div>
 
+      <div class="input-group" data-name="overlayImage">
+        <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
+        <input type="file" accept="image/*">
+        <div>
+          <label class="btn choose">Choose file...</label>
+          <label class="btn clear">x</label>
+        </div>
+      </div>
+
       <div class="input-group" data-name="pixelRatio" data-multiplier="0.1">
         <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
         <input type="range" min="0" max="40" value="0">
       </div>
 
+      <div class="input-group" data-name="pointerAngle">
+        <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
+        <input type="range" min="0" max="360" value="0">
+      </div>
+
       <div class="input-group" data-name="radius" data-multiplier="0.01">
         <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
         <input type="range" min="10" max="100" value="0">
@@ -127,19 +141,6 @@ <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
         <input type="range" min="50" max="1000" value="0">
       </div>
 
-      <div class="input-group" data-name="overlayImage">
-        <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
-        <input type="file" accept="image/*">
-        <div>
-          <label class="btn choose">Choose file...</label>
-          <label class="btn clear">x</label>
-        </div>
-      </div>
-
-      <div class="input-group" data-name="pointerAngle">
-        <h2><span class="prop-name"></span><span class="prop-value"></span></h2>
-        <input type="range" min="0" max="360" value="0">
-      </div>
   </div>
 
 </body>

examples/playground/js/initEventListeners.js

@@ -18,15 +18,13 @@ const wheelPropInits = {
   //'items': TODO
   'lineColor': initTextbox,
   'lineWidth': initRange,
+  //'offset': initRange,
+  'overlayImage': initImage,
   'pixelRatio': initRange,
+  'pointerAngle': initRange,
   'radius': initRange,
-  //'rotation': initRange,
   'rotationResistance': initRange,
-  //'rotationSpeed': initRange,
   'rotationSpeedMax': initRange,
-  //'offset': initRange,
-  'overlayImage': initImage,
-  'pointerAngle': initRange,
 }
 
 for (const g of inputGroups) {

examples/themes/index.html

@@ -32,14 +32,15 @@
 
       // Handle dropdown change:
       dropdown.onchange = () => {
+        const oldRotationSpeed = wheel.rotationSpeed;
         wheel.init({
           ...props[dropdown.selectedIndex],
-          rotationSpeed: wheel.rotationSpeed, // Preserve value so it doesn't get reset.
-          rotation: wheel.rotation, // Preserve value so it doesn't get reset.
+          rotation: wheel.rotation, // Preserve value.
           onCurrentIndexChange: e => console.log(e),
           onRest: e => console.log(e),
           onSpin: e => console.log(e),
         });
+        wheel.spin(oldRotationSpeed); // Preserve value.
       }
 
       // Select default:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spin-wheel",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "An easy to use, themeable component for randomising choices and prizes.",
   "keywords": [
     "spinner",
@@ -23,9 +23,10 @@
   },
   "jest": {
     "verbose": true,
-    "injectGlobals": false,
+    "injectGlobals": true,
     "silent": false,
-    "testEnvironment": "jsdom"
+    "testEnvironment": "jsdom",
+    "setupFiles": ["jest-canvas-mock"]
   },
   "repository": {
     "type": "git",
@@ -39,9 +40,10 @@
   },
   "devDependencies": {
     "browser-sync": "^2.27.5",
-    "canvas": "^2.8.0",
+    "canvas": "^2.11.2",
     "esbuild": "^0.15.11",
     "eslint": "^8.25.0",
-    "jest": "^27.4.3"
+    "jest": "^27.4.3",
+    "jest-canvas-mock": "^2.5.1"
   }
 }