fizzle.js - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/fizzle.min.js

@@ -1,1 +0,1 @@
-this.Fizzle=function(t){var i={};function e(s){if(i[s])return i[s].exports;var o=i[s]={i:s,l:!1,exports:{}};return t[s].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:s})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(e.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var o in t)e.d(s,o,function(i){return t[i]}.bind(null,o));return s},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=0)}([function(t,i,e){"use strict";e.r(i);var s=function(t){return document.defaultView.getComputedStyle(t||document.body).direction};e.d(i,"default",function(){return u});const o=2*Math.PI,{random:n,floor:r,sqrt:h,abs:l,max:d}=Math,f=()=>Math.sign(n()-.5);class a{constructor(t,i,e){this.x=t,this.y=i,this.color=e,this.diffX=0,this.diffY=0,this.speedX=(n()/2+.25)*f(),this.speedY=(1-l(this.speedX))*f()}render(t,i){const e=this.x+this.diffX,s=this.y+this.diffY;return t.beginPath(),t.fillStyle=this.color,t.arc(e,s,i,0,o),t.fill(),this}move(t,i){return i>0&&(this.diffX+=this.speedX*t,this.diffY+=this.speedY*t),(this.diffX>i&&this.speedX>0||this.diffX<-i&&this.speedX<0)&&(this.speedX*=-1),(this.diffY>i&&this.speedY>0||this.diffY<-i&&this.speedY<0)&&(this.speedY*=-1),this}}class u{constructor(t,i){this._options=Object.assign(u.defaultOptions,i),this.bubbles=[],this.text=t}getImageData(){const t=document.createElement("canvas"),i=t.getContext("2d"),e=`${this._options.bold?"bold":""} ${this._options.italic?"italic":""}\n                      ${this._options.fontSize}px ${this._options.font}`;i.font=e;const o=this._options.text.reduce((t,e)=>d(t,r(i.measureText(e).width)),0),n=r((this._options.text.length+.2)*this._options.fontSize);t.width=o,t.height=n,this.width=o,this.height=n;let h=[];if(this.width&&this.height){i.fillStyle="#000",i.textAlign=this._options.align,i.textBaseline="top",i.font=e;const t=s();let o=0;this._options.align===u.alignments.right||"rtl"===t&&this._options.align===u.alignments.start||"ltr"===t&&this._options.align===u.alignments.end?o=this.width:this._options.align===u.alignments.center&&(o=this.width/2),this._options.text.forEach((t,e)=>i.fillText(t,o,e*this._options.fontSize)),h=i.getImageData(0,0,this.width,this.height).data}return h}build(){this.bubbles=[];const t=this.getImageData(),i=this._options.fontSize/1e5*(1/this._options.density);let e=i/2;const s=.08/h(t.length),o=this._options.colors.length;for(let h=0,l=t.length/4;h<l;++h)if((e-=t[4*h+3]/255*s)<0){const t=this._options.colors[r(n()*o)];this.bubbles.push(new a(h%this.width,r(h/this.width),t)),e=(n()+1)*i}this.bubbles.sort(()=>2*n()-1)}set text(t){this._options.text=Array.isArray(t)?t.map(t=>t.toString()):[t.toString().split(/\n/g)],this.build()}get text(){return this._options.text.join("\n")}set font(t){this._options.font=t,this.build()}get font(){return this._options.font}set fontSize(t){this._options.fontSize=t,this.build()}get fontSize(){return this._options.fontSize}set bold(t){this._options.bold=t,this.build()}get bold(){return this._options.bold}set italic(t){this._options.italic=t,this.build()}get italic(){return this._options.italic}set align(t){this._options.align=t,this.build()}get align(){return this._options.align}set density(t){this._options.density=t,this.build()}get density(){return this._options.density}set speed(t){this._options.speed=t}get speed(){return this._options.speed}set freedom(t){this._options.freedom=t}get freedom(){return this._options.freedom}set size(t){this._options.size=t}get size(){return this._options.size}set colors(t){this._options.colors=t;const i=t.length;this.bubbles.forEach(t=>t.color=this._options.colors[r(n()*i)])}get colors(){return this._options.colors}render(t){const i=this.speed*(this.fontSize/600),e=this.freedom*(this.fontSize/30),s=this.size*(this.fontSize/40);return this.bubbles.forEach(o=>o.move(i,e).render(t,s)),this}static get defaultOptions(){return{font:"sans-serif",fontSize:200,bold:!0,italic:!1,align:u.alignments.start,colors:["#31ffb7","#ffb031","#c1ff31","#7931ff"],density:1,size:1,speed:1,freedom:1}}static get alignments(){return{left:"left",center:"center",right:"right",start:"start",end:"end"}}}}]).default;
+this.Fizzle=function(t){var e={};function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(s,n,function(e){return t[e]}.bind(null,n));return s},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);var s=function(t){return document.defaultView.getComputedStyle(t||document.body).direction};i.d(e,"default",function(){return c});const n=2*Math.PI,{random:r,floor:o,sqrt:h,abs:l,max:d}=Math,f=()=>Math.sign(r()-.5);class a{constructor(t,e,i){this.x=t,this.y=e,this.color=i,this.diffX=0,this.diffY=0,this.speedX=(r()/2+.25)*f(),this.speedY=(1-l(this.speedX))*f()}render(t,e){const i=this.x+this.diffX,s=this.y+this.diffY;return t.beginPath(),t.fillStyle=this.color,t.arc(i,s,e,0,n),t.fill(),this}move(t,e){return e>0&&(this.diffX+=this.speedX*t,this.diffY+=this.speedY*t),(this.diffX>e&&this.speedX>0||this.diffX<-e&&this.speedX<0)&&(this.speedX*=-1),(this.diffY>e&&this.speedY>0||this.diffY<-e&&this.speedY<0)&&(this.speedY*=-1),this}}const u=Symbol("_options");class c{constructor(t,e){this[u]=Object.assign(c.defaultOptions,e),this.bubbles=[],this.text=t}getImageData(){const t=this[u],e=document.createElement("canvas"),i=e.getContext("2d"),n=`${t.bold?"bold":""} ${t.italic?"italic":""}\n                      ${t.fontSize}px ${t.font}`;i.font=n;const r=t.text.reduce((t,e)=>d(t,o(i.measureText(e).width)),0),h=o((t.text.length+.2)*t.fontSize);e.width=r,e.height=h,this.width=r,this.height=h;let l=[];if(this.width&&this.height){i.fillStyle="#000",i.textAlign=t.align,i.textBaseline="top",i.font=n;const e=s();let r=0;t.align===c.alignments.right||"rtl"===e&&t.align===c.alignments.start||"ltr"===e&&t.align===c.alignments.end?r=this.width:t.align===c.alignments.center&&(r=this.width/2),t.text.forEach((e,s)=>i.fillText(e,r,s*t.fontSize)),l=i.getImageData(0,0,this.width,this.height).data}return l}build(){this.bubbles=[];const t=this.getImageData(),e=this[u].fontSize/1e5*(1/this[u].density);let i=e/2;const s=.08/h(t.length),n=this[u].colors.length;for(let h=0,l=t.length/4;h<l;++h)if((i-=t[4*h+3]/255*s)<0){const t=this[u].colors[o(r()*n)];this.bubbles.push(new a(h%this.width,o(h/this.width),t)),i=(r()+1)*e}this.bubbles.sort(()=>2*r()-1)}set text(t){this[u].text=Array.isArray(t)?t.map(t=>t.toString()):[t.toString().split(/\n/g)],this.build()}get text(){return this[u].text.join("\n")}set font(t){this[u].font=t,this.build()}get font(){return this[u].font}set fontSize(t){this[u].fontSize=t,this.build()}get fontSize(){return this[u].fontSize}set bold(t){this[u].bold=t,this.build()}get bold(){return this[u].bold}set italic(t){this[u].italic=t,this.build()}get italic(){return this[u].italic}set align(t){this[u].align=t,this.build()}get align(){return this[u].align}set density(t){this[u].density=t,this.build()}get density(){return this[u].density}set speed(t){this[u].speed=t}get speed(){return this[u].speed}set freedom(t){this[u].freedom=t}get freedom(){return this[u].freedom}set size(t){this[u].size=t}get size(){return this[u].size}set colors(t){this[u].colors=t;const e=t.length;this.bubbles.forEach(t=>t.color=this[u].colors[o(r()*e)])}get colors(){return this[u].colors}render(t){const e=this.speed*(this.fontSize/600),i=this.freedom*(this.fontSize/30),s=this.size*(this.fontSize/40);return this.bubbles.forEach(n=>n.move(e,i).render(t,s)),this}static get defaultOptions(){return{font:"sans-serif",fontSize:200,bold:!0,italic:!1,align:c.alignments.start,colors:["#31ffb7","#ffb031","#c1ff31","#7931ff"],density:1,size:1,speed:1,freedom:1}}static get alignments(){return{left:"left",center:"center",right:"right",start:"start",end:"end"}}}}]).default;

fizzle.js

@@ -73,2 +73,4 @@ import getDirection from "text-direction";
 
+const optionsKey = Symbol("_options");
+
 /**
@@ -85,3 +87,3 @@ * Class that render some text using dynamic bubbles
     constructor (text, options) {
-        this._options = Object.assign(Fizzle.defaultOptions, options);
+        this[optionsKey] = Object.assign(Fizzle.defaultOptions, options);
 
@@ -98,10 +100,11 @@ this.bubbles = [];
     getImageData () {
+        const options = this[optionsKey];
         const canvas = document.createElement("canvas");
         const ctx = canvas.getContext("2d");
-        const font = `${this._options.bold ? "bold" : ""} ${this._options.italic ? "italic" : ""}
-                      ${this._options.fontSize}px ${this._options.font}`;
+        const font = `${options.bold ? "bold" : ""} ${options.italic ? "italic" : ""}
+                      ${options.fontSize}px ${options.font}`;
         ctx.font = font;
 
-        const textWidth = this._options.text.reduce((m, line) => max(m, floor(ctx.measureText(line).width)), 0);
-        const textHeight = floor((this._options.text.length + 0.2) * this._options.fontSize);
+        const textWidth = options.text.reduce((m, line) => max(m, floor(ctx.measureText(line).width)), 0);
+        const textHeight = floor((options.text.length + 0.2) * options.fontSize);
         canvas.width = textWidth;
@@ -117,3 +120,3 @@ canvas.height = textHeight;
             ctx.fillStyle = "#000";
-            ctx.textAlign = this._options.align;
+            ctx.textAlign = options.align;
             ctx.textBaseline = "top";
@@ -124,11 +127,11 @@ ctx.font = font;
             let position = 0;
-            if (this._options.align === Fizzle.alignments.right ||
-                (textDirection === "rtl" && this._options.align === Fizzle.alignments.start) ||
-                (textDirection === "ltr" && this._options.align === Fizzle.alignments.end)) {
+            if (options.align === Fizzle.alignments.right ||
+                (textDirection === "rtl" && options.align === Fizzle.alignments.start) ||
+                (textDirection === "ltr" && options.align === Fizzle.alignments.end)) {
                 position = this.width;
             }
-            else if (this._options.align === Fizzle.alignments.center) {
+            else if (options.align === Fizzle.alignments.center) {
                 position = this.width / 2;
             }
-            this._options.text.forEach((line, n) => ctx.fillText(line, position, n * this._options.fontSize));
+            options.text.forEach((line, n) => ctx.fillText(line, position, n * options.fontSize));
             imgData = ctx.getImageData(0, 0, this.width, this.height).data;
@@ -146,10 +149,10 @@ }
         const imgData = this.getImageData();
-        const space = (this._options.fontSize / 1e5) * (1 / this._options.density);
+        const space = (this[optionsKey].fontSize / 1e5) * (1 / this[optionsKey].density);
         let counter = space / 2;
         const jump = 0.08 / sqrt(imgData.length);
-        const colorLength = this._options.colors.length;
+        const colorLength = this[optionsKey].colors.length;
         for (let i = 0, l = imgData.length / 4; i < l; ++i) {
             counter -= (imgData[(i * 4) + 3] / 255) * jump;
             if (counter < 0) {
-                const color = this._options.colors[floor(random() * colorLength)];
+                const color = this[optionsKey].colors[floor(random() * colorLength)];
                 this.bubbles.push(new Bubble(i % this.width, floor(i / this.width), color));
@@ -168,3 +171,3 @@ counter = (random() + 1) * space;
     set text (text) {
-        this._options.text = Array.isArray(text) ? text.map(str => str.toString()) : [text.toString().split(/\n/g)];
+        this[optionsKey].text = Array.isArray(text) ? text.map(str => str.toString()) : [text.toString().split(/\n/g)];
         this.build();
@@ -178,3 +181,3 @@ }
     get text () {
-        return this._options.text.join("\n");
+        return this[optionsKey].text.join("\n");
     }
@@ -187,3 +190,3 @@
     set font (font) {
-        this._options.font = font;
+        this[optionsKey].font = font;
         this.build();
@@ -197,3 +200,3 @@ }
     get font () {
-        return this._options.font;
+        return this[optionsKey].font;
     }
@@ -206,3 +209,3 @@
     set fontSize (fontSize) {
-        this._options.fontSize = fontSize;
+        this[optionsKey].fontSize = fontSize;
         this.build();
@@ -216,3 +219,3 @@ }
     get fontSize () {
-        return this._options.fontSize;
+        return this[optionsKey].fontSize;
     }
@@ -225,3 +228,3 @@
     set bold (bold) {
-        this._options.bold = bold;
+        this[optionsKey].bold = bold;
         this.build();
@@ -235,3 +238,3 @@ }
     get bold () {
-        return this._options.bold;
+        return this[optionsKey].bold;
     }
@@ -244,3 +247,3 @@
     set italic (italic) {
-        this._options.italic = italic;
+        this[optionsKey].italic = italic;
         this.build();
@@ -254,3 +257,3 @@ }
     get italic () {
-        return this._options.italic;
+        return this[optionsKey].italic;
     }
@@ -263,3 +266,3 @@
     set align (align) {
-        this._options.align = align;
+        this[optionsKey].align = align;
         this.build();
@@ -273,3 +276,3 @@ }
     get align () {
-        return this._options.align;
+        return this[optionsKey].align;
     }
@@ -282,3 +285,3 @@
     set density (density) {
-        this._options.density = density;
+        this[optionsKey].density = density;
         this.build();
@@ -292,3 +295,3 @@ }
     get density () {
-        return this._options.density;
+        return this[optionsKey].density;
     }
@@ -301,3 +304,3 @@
     set speed (speed) {
-        this._options.speed = speed;
+        this[optionsKey].speed = speed;
     }
@@ -310,3 +313,3 @@
     get speed () {
-        return this._options.speed;
+        return this[optionsKey].speed;
     }
@@ -319,3 +322,3 @@
     set freedom (freedom) {
-        this._options.freedom = freedom;
+        this[optionsKey].freedom = freedom;
     }
@@ -328,3 +331,3 @@
     get freedom () {
-        return this._options.freedom;
+        return this[optionsKey].freedom;
     }
@@ -337,3 +340,3 @@
     set size (size) {
-        this._options.size = size;
+        this[optionsKey].size = size;
     }
@@ -346,3 +349,3 @@
     get size () {
-        return this._options.size;
+        return this[optionsKey].size;
     }
@@ -355,6 +358,5 @@
     set colors (colors) {
-        this._options.colors = colors;
+        this[optionsKey].colors = colors;
         const colorLength = colors.length;
-        // eslint-disable-next-line no-param-reassign, no-return-assign
-        this.bubbles.forEach(bubble => bubble.color = this._options.colors[floor(random() * colorLength)]);
+        this.bubbles.forEach(bubble => bubble.color = this[optionsKey].colors[floor(random() * colorLength)]);
     }
@@ -367,3 +369,3 @@
     get colors () {
-        return this._options.colors;
+        return this[optionsKey].colors;
     }
@@ -370,0 +372,0 @@

package.json

 {
   "name": "fizzle.js",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Write any text in a canvas with fizzly bubbles.",
@@ -13,3 +13,3 @@ "main": "fizzle.js",
     "lint": "eslint fizzle.js",
-    "test": "ava",
+    "test": "ava tests",
     "build": "webpack --mode=development",
@@ -40,13 +40,13 @@ "prepublishOnly": "npm run lint && npm test && webpack --mode=production"
   "devDependencies": {
-    "@gmartigny/eslint-config": "^1.2.1",
-    "ava": "^0.25.0",
-    "eslint": "^5.2.0",
-    "eslint-plugin-import": "^2.13.0",
-    "esm": "^3.0.72",
-    "webpack": "^4.16.2",
-    "webpack-command": "^0.4.1"
+    "@gmartigny/eslint-config": "^1.2.3",
+    "ava": "^1.2.1",
+    "eslint": "^5.13.0",
+    "eslint-plugin-import": "^2.16.0",
+    "esm": "^3.2.4",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
   },
   "dependencies": {
-    "text-direction": "^1.1.0"
+    "text-direction": "^1.2.1"
   }
 }

readme.md

@@ -38,2 +38,3 @@ # Fizzle.js
     function loop () {
+        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
         ctx.save();
@@ -40,0 +41,0 @@ ctx.translate(x, y); // move to desired location

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

361

increased by0.28%

Number of lines in readme file

67

increased by1.52%

Worsened metrics

Total package byte prevSize

19861

decreased by-1.13%

Dependency changes

• Updatedtext-direction@^1.2.1