Merge branch 'release/5.0.1'

README.md

@@ -39,13 +39,13 @@ An easy to use, themeable component for randomising choices and prizes.
 ### ESM
 
 ```javascript
-import {Wheel} from 'https://cdn.jsdelivr.net/npm/[email protected].0/dist/spin-wheel-esm.js';
+import {Wheel} from 'https://cdn.jsdelivr.net/npm/[email protected].1/dist/spin-wheel-esm.js';
 ```
 
 ### IIFE
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/spin-wheel-iife.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/spin-wheel-iife.js"></script>
 ```
 
 ### Local

examples/playground/css/index.css

@@ -33,18 +33,13 @@ body {
 
 .frame-center {
   position: relative;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
+  display: grid;
 }
 
 .wheel-wrapper {
   /* Hide UI during page load */
   visibility: hidden;
-
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
+  overflow: hidden; /* Prevent grid blowout */
 }
 
 .frame-right {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spin-wheel",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "author": "CrazyTim",
   "repository": {
     "type": "git",

src/wheel.js

@@ -85,6 +85,13 @@ export class Wheel {
   add(container) {
     this._canvasContainer = container;
     this.canvas = document.createElement('canvas');
+
+    // Prevent infinte resize loop.
+    // The canvas element has a default display of 'inline'.
+    // This forms whitespace inside the container, making it slightly larger than it should be,
+    // which creates a positive feedback loop when the wheel trys to resize itself.
+    this.canvas.style.display = 'block';
+
     this._context = this.canvas.getContext('2d');
     this._canvasContainer.append(this.canvas);
     events.register(this);

tests/__snapshots__/item.test.js.snap

@@ -21,7 +21,7 @@ Item {
         aria-label="An image of a spinning prize wheel."
         height="500"
         role="img"
-        style="width: 500px; height: 500px;"
+        style="display: block; width: 500px; height: 500px;"
         width="500"
       />
     </div>,
@@ -34,7 +34,7 @@ Item {
         aria-label="An image of a spinning prize wheel."
         height="500"
         role="img"
-        style="width: 500px; height: 500px;"
+        style="display: block; width: 500px; height: 500px;"
         width="500"
       />,
       "_clipIndex": 1,
@@ -260,7 +260,7 @@ Item {
       aria-label="An image of a spinning prize wheel."
       height="500"
       role="img"
-      style="width: 500px; height: 500px;"
+      style="display: block; width: 500px; height: 500px;"
       width="500"
     />,
   },

tests/__snapshots__/wheel.test.js.snap

@@ -10,7 +10,7 @@ Wheel {
       aria-label="An image of a spinning prize wheel."
       height="500"
       role="img"
-      style="width: 500px; height: 500px;"
+      style="display: block; width: 500px; height: 500px;"
       width="500"
     />
   </div>,
@@ -23,7 +23,7 @@ Wheel {
       aria-label="An image of a spinning prize wheel."
       height="500"
       role="img"
-      style="width: 500px; height: 500px;"
+      style="display: block; width: 500px; height: 500px;"
       width="500"
     />,
     "_clipIndex": 1,
@@ -249,7 +249,7 @@ Wheel {
     aria-label="An image of a spinning prize wheel."
     height="500"
     role="img"
-    style="width: 500px; height: 500px;"
+    style="display: block; width: 500px; height: 500px;"
     width="500"
   />,
 }