fizzle.js - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/fizzle.min.js

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

fizzle.js

@@ -96,53 +96,72 @@ import getDirection from "text-direction";
      * Fizzle constructor
-     * @param {Array<String>|String} text -
-     * @param {FizzleOptions} options -
+     * @param {Array<String>|String} text - Any string
+     * @param {FizzleOptions} options - Specific options
      */
     constructor (text, options) {
-        const lines = Array.isArray(text) ? text.map(str => str.toString()) : [text.toString()];
-        const mergedOptions = Object.assign(Fizzle.defaultOptions, options);
+        this._options = Object.assign(Fizzle.defaultOptions, options);
 
+        this.bubbles = [];
+
+        this.text = text;
+    }
+
+    /**
+     * Return image data according to current options.
+     * @return {Array}
+     */
+    getImageData () {
         const canvas = document.createElement("canvas");
         const ctx = canvas.getContext("2d");
-        const font = `${mergedOptions.bold ? "bold" : ""} ${mergedOptions.italic ? "italic" : ""}
-                      ${mergedOptions.fontSize}px ${mergedOptions.font}`;
+        const font = `${this._options.bold ? "bold" : ""} ${this._options.italic ? "italic" : ""}
+                      ${this._options.fontSize}px ${this._options.font}`;
         ctx.font = font;
-        const textWidth = lines.reduce((current, line) => max(current, floor(ctx.measureText(line).width)), 0);
-        const textHeight = floor((lines.length + 0.2) * mergedOptions.fontSize);
+
+        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);
         canvas.width = textWidth;
         canvas.height = textHeight;
 
-        this.bubbles = [];
-        this.size = mergedOptions.size * (mergedOptions.fontSize / 25);
-        this.speed = mergedOptions.speed * (mergedOptions.fontSize / 600);
-        this.freedom = mergedOptions.freedom * (mergedOptions.fontSize / 30);
         this.width = textWidth;
         this.height = textHeight;
 
-        ctx.fillStyle = "#000";
-        ctx.textAlign = mergedOptions.align;
-        ctx.textBaseline = "top";
-        ctx.font = font;
+        let imgData = [];
 
-        const textDirection = getDirection();
-        let position = 0;
-        if (mergedOptions.align === Fizzle.alignments.right ||
-            (textDirection === "rtl" && mergedOptions.align === Fizzle.alignments.start) ||
-            (textDirection === "ltr" && mergedOptions.align === Fizzle.alignments.end)) {
-            position = textWidth;
+        if (this.width && this.height) {
+            ctx.fillStyle = "#000";
+            ctx.textAlign = this._options.align;
+            ctx.textBaseline = "top";
+            ctx.font = font;
+
+            const textDirection = getDirection();
+            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)) {
+                position = this.width;
+            }
+            else if (this._options.align === Fizzle.alignments.center) {
+                position = this.width / 2;
+            }
+            this._options.text.forEach((line, n) => ctx.fillText(line, position, n * this._options.fontSize));
+            imgData = ctx.getImageData(0, 0, this.width, this.height).data;
         }
-        else if (mergedOptions.align === Fizzle.alignments.center) {
-            position = textWidth / 2;
-        }
-        lines.forEach((line, n) => ctx.fillText(line, position, n * mergedOptions.fontSize));
-        const imgData = ctx.getImageData(0, 0, textWidth, textHeight).data;
 
-        const space = (mergedOptions.fontSize / 1e5) * (1 / mergedOptions.density);
+        return imgData;
+    }
+
+    /**
+     * Add bubbles according to current options.
+     */
+    build () {
+        this.bubbles = [];
+        const imgData = this.getImageData();
+        const space = (this._options.fontSize / 1e5) * (1 / this._options.density);
         let counter = space / 2;
-        const jump = 0.05 / sqrt(imgData.length);
-        const colorLength = mergedOptions.colors.length;
+        const jump = 0.08 / sqrt(imgData.length);
+        const colorLength = this._options.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 = mergedOptions.colors[floor(random() * colorLength)];
-                this.bubbles.push(new Bubble(i % textWidth, floor(i / textWidth), color));
+                const color = this._options.colors[floor(random() * colorLength)];
+                this.bubbles.push(new Bubble(i % this.width, floor(i / this.width), color));
                 counter = (random() + 1) * space;
@@ -156,3 +175,180 @@ }
     /**
-     * Render everything in a drawing context
+     * Change text at runtime (trigger a rebuild).
+     * @param {String} text - Any string
+     */
+    set text (text) {
+        this._options.text = Array.isArray(text) ? text.map(str => str.toString()) : [text.toString().split(/\n/g)];
+        this.build();
+    }
+    /**
+     * Get current text.
+     * @return {String}
+     */
+    get text () {
+        return this._options.text.join("\n");
+    }
+
+    /**
+     * Change font at runtime (trigger a rebuild).
+     * @param {String} font - New value for font
+     */
+    set font (font) {
+        this._options.font = font;
+        this.build();
+    }
+    /**
+     * Get the current font
+     * @return {String}
+     */
+    get font () {
+        return this._options.font;
+    }
+
+    /**
+     * Change font-size at runtime (trigger a rebuild).
+     * @param {Number} fontSize - New value for font-size
+     */
+    set fontSize (fontSize) {
+        this._options.fontSize = fontSize;
+        this.build();
+    }
+    /**
+     * Get current font-size
+     * @return {Number}
+     */
+    get fontSize () {
+        return this._options.fontSize;
+    }
+
+    /**
+     * Change if the font is bold at runtime (trigger a rebuild).
+     * @param {Boolean} bold - New value for bold
+     */
+    set bold (bold) {
+        this._options.bold = bold;
+        this.build();
+    }
+    /**
+     * Get whether font is bold
+     * @return {Boolean}
+     */
+    get bold () {
+        return this._options.bold;
+    }
+
+    /**
+     * Change if the font is italic at runtime (trigger a rebuild).
+     * @param {Boolean} italic - New value for italic
+     */
+    set italic (italic) {
+        this._options.italic = italic;
+        this.build();
+    }
+    /**
+     * Get whether font is italic
+     * @return {Boolean}
+     */
+    get italic () {
+        return this._options.italic;
+    }
+
+    /**
+     * Change text alignment at runtime (trigger a rebuild).
+     * @param {String} align - New value for alignment
+     */
+    set align (align) {
+        this._options.align = align;
+        this.build();
+    }
+    /**
+     * Get current alignment
+     * @return {String}
+     */
+    get align () {
+        return this._options.align;
+    }
+
+    /**
+     * Change density at runtime (trigger a rebuild).
+     * @param {Number} density - New value for density
+     */
+    set density (density) {
+        this._options.density = density;
+        this.build();
+    }
+
+    /**
+     * Get current density
+     * @return {Number}
+     */
+    get density () {
+        return this._options.density;
+    }
+
+    /**
+     * Change bubbles' speed at runtime
+     * @param {Number} speed - New value for bubbles' speed
+     */
+    set speed (speed) {
+        this._options.speed = speed;
+    }
+    /**
+     * Get current bubbles' speed
+     * @return {Number}
+     */
+    get speed () {
+        return this._options.speed;
+    }
+
+    /**
+     * Change bubbles' freedom at runtime
+     * @param {Number} freedom - New value for bubbles' freedom
+     */
+    set freedom (freedom) {
+        this._options.freedom = freedom;
+    }
+
+    /**
+     * Get current bubbles' freedom
+     * @return {Number}
+     */
+    get freedom () {
+        return this._options.freedom;
+    }
+
+    /**
+     * Change bubbles' size at runtime
+     * @param {Number} size - New value for bubbles' size
+     */
+    set size (size) {
+        this._options.size = size;
+    }
+    /**
+     * Get current bubbles' size
+     * @return {Number}
+     */
+    get size () {
+        return this._options.size;
+    }
+
+    /**
+     * Change bubbles' colors at runtime
+     * @param {Array<String>} colors - New value for bubbles' colors
+     */
+    set colors (colors) {
+        this._options.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)]);
+    }
+    /**
+     * Get current bubbles' colors
+     * @return {Array<String>}
+     */
+    get colors () {
+        return this._options.colors;
+    }
+
+    /**
+     * Render everything in a drawing context.
      * @param {CanvasRenderingContext2D} ctx - Drawing context
@@ -162,3 +358,6 @@ * @return {Fizzle} Itself
     render (ctx) {
-        this.bubbles.forEach(bubble => bubble.move(this.speed, this.freedom).render(ctx, this.size));
+        const speed = this.speed * (this.fontSize / 600);
+        const freedom = this.freedom * (this.fontSize / 30);
+        const size = this.size * (this.fontSize / 40);
+        this.bubbles.forEach(bubble => bubble.move(speed, freedom).render(ctx, size));
         return this;
@@ -168,3 +367,3 @@ }
     /**
-     * Return the default options for a Fizzle
+     * Return the default options for a Fizzle.
      * @return {FizzleOptions}
@@ -171,0 +370,0 @@ */

package.json

 {
   "name": "fizzle.js",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Write any text in a canvas with fizzly bubbles.",
@@ -36,5 +36,5 @@ "main": "fizzle.js",
     "babel-loader": "^8.0.0-beta.0",
-    "eslint": "^4.18.0",
+    "eslint": "^4.18.1",
     "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.9.0",
     "uglifyjs-webpack-plugin": "^1.2.0",
@@ -44,4 +44,4 @@ "webpack": "^3.11.0"
   "dependencies": {
-    "text-direction": "^1.0.0"
+    "text-direction": "^1.0.1"
   }
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Total package byte prevSize

23150

increased by36.93%

Lines of code

360

increased by101.12%

Number of lines in readme file

175

increased by9.38%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedtext-direction@^1.0.1